pbstyles/styles/tailwind/theme.css

Basic styles for quick prototyping

@theme {
  --*: initial;

  --font-sans: 'Inter', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-24: 24px;
  --text-32: 32px;
  --text-48: 48px;
  --text-64: 64px;

  --text-h64: 64px;
  --text-h64--line-height: 1.25;
  --text-h64--font-weight: 700;

  --text-h48: 48px;
  --text-h48--line-height: 1.25;
  --text-h48--font-weight: 700;

  --text-h32: 32px;
  --text-h32--line-height: 1.25;
  --text-h32--font-weight: 700;

  --text-h24: 24px;
  --text-h24--line-height: 1.25;
  --text-h24--font-weight: 700;

  --text-h16: 16px;
  --text-h16--line-height: 1.25;
  --text-h16--font-weight: 700;

  --text-h20: 20px;
  --text-h20--line-height: 1.25;
  --text-h20--font-weight: 700;

  --text-t32: 32px;
  --text-t32--line-height: 1.5;
  --text-t32--font-weight: 400;

  --text-t24: 24px;
  --text-t24--line-height: 1.5;
  --text-t24--font-weight: 400;

  --text-t20: 20px;
  --text-t20--line-height: 1.5;
  --text-t20--font-weight: 400;

  --text-t16: 16px;
  --text-t16--line-height: 1.5;
  --text-t16--font-weight: 400;

  --text-t14: 14px;
  --text-t14--line-height: 1.5;
  --text-t14--font-weight: 400;

  --text-t12: 12px;
  --text-t12--line-height: 1.5;
  --text-t12--font-weight: 400;

  --text-tm32: 32px;
  --text-tm32--line-height: 1.5;
  --text-tm32--font-weight: 600;

  --text-tm24: 24px;
  --text-tm24--line-height: 1.5;
  --text-tm24--font-weight: 600;

  --text-tm20: 20px;
  --text-tm20--line-height: 1.5;
  --text-tm20--font-weight: 600;

  --text-tm16: 16px;
  --text-tm16--line-height: 1.5;
  --text-tm16--font-weight: 600;

  --text-tm14: 14px;
  --text-tm14--line-height: 1.5;
  --text-tm14--font-weight: 600;

  --text-tm12: 12px;
  --text-tm12--line-height: 1.5;
  --text-tm12--font-weight: 600;

  --color-*: initial;
  --color-basic-main: #000000;
  --color-basic-light: #78909c;
  --color-basic-lighter: #f5f5f5;
  --color-basic-lightest: #fafafa;
  --color-primary-darker: #2962ff;
  --color-primary-main: #2979ff;
  --color-primary-light: #bbdefb;
  --color-primary-lighter: #e3f2fd;
  --color-secondary-darker: #263238;
  --color-secondary-main: #37474f;
  --color-secondary-light: #cfd8dc;
  --color-secondary-lighter: #eceff1;
  --color-success-darker: #4caf50;
  --color-success-main: #00c853;
  --color-success-light: #c8e6c9;
  --color-success-lighter: #e8f5e9;
  --color-danger-darker: #d50000;
  --color-danger-main: #ff5252;
  --color-danger-light: #ffcdd2;
  --color-danger-lighter: #ffebee;
  --color-outline-primary: rgba(41, 121, 255, 0.2);
  --color-outline-secondary: rgba(55, 71, 79, 0.2);
  --color-outline-success: rgba(0, 200, 83, 0.2);
  --color-outline-danger: rgba(255, 23, 68, 0.2);
  --color-black: #000000;
  --color-white: #ffffff;
  --color-transparent: transparent;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-gray-blue-50: #eceff1;
  --color-gray-blue-100: #cfd8dc;
  --color-gray-blue-200: #b0bec5;
  --color-gray-blue-300: #90a4ae;
  --color-gray-blue-400: #78909c;
  --color-gray-blue-500: #607d8b;
  --color-gray-blue-600: #546e7a;
  --color-gray-blue-700: #455a64;
  --color-gray-blue-800: #37474f;
  --color-gray-blue-900: #263238;
  --color-blue-50: #e3f2fd;
  --color-blue-100: #bbdefb;
  --color-blue-200: #90caf9;
  --color-blue-300: #64b5f6;
  --color-blue-400: #42a5f5;
  --color-blue-500: #2196f3;
  --color-blue-600: #1e88e5;
  --color-blue-700: #1976d2;
  --color-blue-800: #1565c0;
  --color-blue-900: #0d47a1;
  --color-blue-accent-100: #82b1ff;
  --color-blue-accent-200: #448aff;
  --color-blue-accent-300: #2979ff;
  --color-blue-accent-400: #2962ff;
  --color-green-50: #e8f5e9;
  --color-green-100: #c8e6c9;
  --color-green-200: #a5d6a7;
  --color-green-300: #81c784;
  --color-green-400: #66bb6a;
  --color-green-500: #4caf50;
  --color-green-600: #43a047;
  --color-green-700: #388e3c;
  --color-green-800: #2e7d32;
  --color-green-900: #1b5e20;
  --color-green-accent-100: #b9f6ca;
  --color-green-accent-200: #69f0ae;
  --color-green-accent-300: #00e676;
  --color-green-accent-400: #00c853;
  --color-red-50: #ffebee;
  --color-red-100: #ffcdd2;
  --color-red-200: #ef9a9a;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #f44336;
  --color-red-600: #e53935;
  --color-red-700: #d32f2f;
  --color-red-800: #c62828;
  --color-red-900: #b71c1c;
  --color-red-accent-100: #ff8a80;
  --color-red-accent-200: #ff5252;
  --color-red-accent-300: #ff1744;
  --color-red-accent-400: #d50000;
  --color-pink-50: #fce4ec;
  --color-pink-100: #f8bbd0;
  --color-pink-200: #f48fb1;
  --color-pink-300: #f06292;
  --color-pink-400: #ec407a;
  --color-pink-500: #e91e63;
  --color-pink-600: #d81b60;
  --color-pink-700: #c2185b;
  --color-pink-800: #ad1457;
  --color-pink-900: #880e4f;
  --color-pink-accent-100: #ff80ab;
  --color-pink-accent-200: #ff4081;
  --color-pink-accent-300: #f50057;
  --color-pink-accent-400: #c51162;
  --color-yellow-50: #fffde7;
  --color-yellow-100: #fff9c4;
  --color-yellow-200: #fff59d;
  --color-yellow-300: #fff176;
  --color-yellow-400: #ffee58;
  --color-yellow-500: #ffeb3b;
  --color-yellow-600: #fdd835;
  --color-yellow-700: #fbc02d;
  --color-yellow-800: #f9a825;
  --color-yellow-900: #f57f17;
  --color-yellow-accent-100: #ffff8d;
  --color-yellow-accent-200: #ffff00;
  --color-yellow-accent-300: #ffea00;
  --color-yellow-accent-400: #ffd600;
  --color-orange-50: #fff3e0;
  --color-orange-100: #ffe0b2;
  --color-orange-200: #ffcc80;
  --color-orange-300: #ffb74d;
  --color-orange-400: #ffa726;
  --color-orange-500: #ff9800;
  --color-orange-600: #fb8c00;
  --color-orange-700: #f57c00;
  --color-orange-800: #ef6c00;
  --color-orange-900: #e65100;
  --color-orange-accent-100: #ffd180;
  --color-orange-accent-200: #ffab40;
  --color-orange-accent-300: #ff9100;
  --color-orange-accent-400: #ff6d00;

  --spacing: 1px;

  --radius-0: 0px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-999: 999px;

  --shadow-xs: 0px 2px 4px -2px rgba(24, 39, 75, 0.12), 0px 4px 4px -2px rgba(24, 39, 75, 0.08);
  --shadow-sm: 0px 4px 6px -4px rgba(24, 39, 75, 0.12), 0px 8px 8px -4px rgba(24, 39, 75, 0.08);
  --shadow-md: 0px 6px 8px -6px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.08);
  --shadow-lg: 0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08);
  --shadow-xl: 0px 6px 14px -6px rgba(24, 39, 75, 0.12), 0px 10px 32px -4px rgba(24, 39, 75, 0.1);
  --shadow-xxl: 0px 8px 18px -6px rgba(24, 39, 75, 0.12), 0px 12px 42px -4px rgba(24, 39, 75, 0.12);
  --shadow-xxxl:
    0px 8px 22px -6px rgba(24, 39, 75, 0.12), 0px 14px 64px -4px rgba(24, 39, 75, 0.12);
  --shadow-xxxxl:
    0px 8px 28px -6px rgba(24, 39, 75, 0.12), 0px 18px 88px -4px rgba(24, 39, 75, 0.14);

  --breakpoint-*: initial;
  --breakpoint-desktop: 769px;
  --breakpoint-mobile: 768px;
  --breakpoint-xl: 1441px;
  --breakpoint-lg-max: 1440px;
  --breakpoint-lg-min: 921px;
  --breakpoint-md-max: 920px;
  --breakpoint-md-min: 769px;
  --breakpoint-sm-max: 768px;
  --breakpoint-sm-min: 481px;
  --breakpoint-xs: 480px;

  --animation-show: show 300ms ease-in forwards;
  --animation-hide: hide 200ms ease-out forwards;

  @keyframes show {
    from: {
      opacity: 0;
    }
    to: {
      opacity: 1;
    }
  }
  @keyframes hide {
    from: {
      opacity: 1;
    }
    to: {
      opacity: 0;
    }
  }
}