@lucasmiqueias/blip-tokens/css/tokens.css

Design token system inspired by BLiP's design language

/* BLiP Design System - Core Tokens */
/* This file contains all the base design tokens */

:root {
  /* Brand Colors */
  --color-brand: rgba(0, 150, 250, 1);

  /* Primary Colors - Light Theme */
  --color-light-primary: rgba(30, 107, 241, 1);
  --color-light-secondary: rgba(41, 41, 41, 1);

  /* Primary Colors - Dark Theme */
  --color-dark-primary: rgba(73, 139, 255, 1);
  --color-dark-secondary: rgba(255, 255, 255, 1);

  /* Surface Colors - Light Theme */
  --color-light-surface-0: rgba(255, 255, 255, 1);
  --color-light-surface-1: rgba(246, 246, 246, 1);
  --color-light-surface-2: rgba(237, 237, 237, 1);
  --color-light-surface-3: rgba(227, 227, 227, 1);
  --color-light-surface-4: rgba(20, 20, 20, 1);
  --color-light-surface-positive: rgba(1, 114, 62, 1);
  --color-light-surface-negative: rgba(138, 0, 0, 1);
  --color-light-surface-primary: rgba(30, 107, 241, 1);

  /* Surface Colors - Dark Theme */
  --color-dark-surface-0: rgba(66, 66, 66, 1);
  --color-dark-surface-1: rgba(57, 57, 57, 1);
  --color-dark-surface-2: rgba(31, 31, 31, 1);
  --color-dark-surface-3: rgba(20, 20, 20, 1);
  --color-dark-surface-4: rgba(10, 10, 10, 1);
  --color-dark-surface-positive: rgba(1, 86, 47, 1);
  --color-dark-surface-negative: rgba(87, 0, 0, 1);
  --color-dark-surface-primary: rgba(12, 80, 197, 1);

  /* Content Colors - Light Theme */
  --color-light-content-default: rgba(40, 40, 40, 1);
  --color-light-content-disable: rgba(89, 89, 89, 1);
  --color-light-content-ghost: rgba(140, 140, 140, 1);
  --color-light-content-bright: rgba(255, 255, 255, 1);
  --color-light-content-din: rgba(0, 0, 0, 1);

  /* Content Colors - Dark Theme */
  --color-dark-content-default: rgba(255, 255, 255, 1);
  --color-dark-content-disable: rgba(148, 148, 148, 1);
  --color-dark-content-ghost: rgba(102, 102, 102, 1);
  --color-dark-content-bright: rgba(255, 255, 255, 1);
  --color-dark-content-din: rgba(0, 0, 0, 1);

  /* Border Colors - Light Theme */
  --color-light-border-1: rgba(0, 0, 0, 0.2);
  --color-light-border-2: rgba(0, 0, 0, 0.16);
  --color-light-border-3: rgba(0, 0, 0, 0.06);

  /* Border Colors - Dark Theme */
  --color-dark-border-1: rgba(255, 255, 255, 0.2);
  --color-dark-border-2: rgba(255, 255, 255, 0.16);
  --color-dark-border-3: rgba(255, 255, 255, 0.06);

  /* Semantic Colors - Light Theme */
  --color-light-positive: rgba(0, 122, 66, 1);
  --color-light-negative: rgba(168, 11, 11, 1);
  --color-light-info: rgba(128, 227, 235, 1);
  --color-light-system: rgba(178, 223, 253, 1);
  --color-light-focus: rgba(194, 38, 251, 1);
  --color-light-success: rgba(132, 235, 188, 1);
  --color-light-warning: rgba(253, 233, 155, 1);
  --color-light-error: rgba(250, 190, 190, 1);
  --color-light-delete: rgba(230, 15, 15, 1);

  /* Semantic Colors - Dark Theme */
  --color-dark-positive: rgba(107, 255, 188, 1);
  --color-dark-negative: rgba(255, 184, 184, 1);
  --color-dark-info: rgba(0, 79, 86, 1);
  --color-dark-system: rgba(0, 60, 100, 1);
  --color-dark-focus: rgba(194, 38, 251, 1);
  --color-dark-success: rgba(53, 94, 75, 1);
  --color-dark-warning: rgba(96, 89, 59, 1);
  --color-dark-error: rgba(123, 61, 61, 1);
  --color-dark-delete: rgba(182, 12, 12, 1);

  /* Extended Colors - Light Theme */
  --color-light-extended-blue: rgba(25, 104, 240, 1);
  --color-light-extended-blue-bright: rgba(178, 223, 253, 1);
  --color-light-extended-ocean: rgba(0, 211, 228, 1);
  --color-light-extended-ocean-bright: rgba(128, 227, 235, 1);
  --color-light-extended-green: rgba(53, 222, 144, 1);
  --color-light-extended-green-bright: rgba(132, 235, 188, 1);
  --color-light-extended-yellow: rgba(251, 207, 35, 1);
  --color-light-extended-yellow-bright: rgba(253, 233, 155, 1);
  --color-light-extended-orange: rgba(240, 99, 5, 1);
  --color-light-extended-orange-bright: rgba(252, 170, 115, 1);
  --color-light-extended-red: rgba(230, 15, 15, 1);
  --color-light-extended-red-bright: rgba(249, 159, 159, 1);
  --color-light-extended-pink: rgba(251, 75, 193, 1);
  --color-light-extended-pink-bright: rgba(253, 155, 220, 1);
  --color-light-extended-gray: rgba(102, 102, 102, 1);
  --color-light-extended-gray-bright: rgba(199, 199, 199, 1);

  /* Extended Colors - Dark Theme */
  --color-dark-extended-blue: rgba(25, 104, 240, 1);
  --color-dark-extended-blue-bright: rgba(178, 223, 253, 1);
  --color-dark-extended-ocean: rgba(0, 211, 228, 1);
  --color-dark-extended-ocean-bright: rgba(128, 227, 235, 1);
  --color-dark-extended-green: rgba(53, 222, 144, 1);
  --color-dark-extended-green-bright: rgba(132, 235, 188, 1);
  --color-dark-extended-yellow: rgba(251, 207, 35, 1);
  --color-dark-extended-yellow-bright: rgba(253, 233, 155, 1);
  --color-dark-extended-orange: rgba(240, 99, 5, 1);
  --color-dark-extended-orange-bright: rgba(252, 170, 115, 1);
  --color-dark-extended-red: rgba(230, 15, 15, 1);
  --color-dark-extended-red-bright: rgba(249, 159, 159, 1);
  --color-dark-extended-pink: rgba(251, 75, 193, 1);
  --color-dark-extended-pink-bright: rgba(253, 155, 220, 1);
  --color-dark-extended-gray: rgba(102, 102, 102, 1);
  --color-dark-extended-gray-bright: rgba(199, 199, 199, 1);

  /* Action Colors - Light Theme */
  --color-light-hover: rgba(0, 0, 0, 0.08);
  --color-light-pressed: rgba(0, 0, 0, 0.16);

  /* Action Colors - Dark Theme */
  --color-dark-hover: rgba(255, 255, 255, 0.16);
  --color-dark-pressed: rgba(255, 255, 255, 0.08);

  /* Size Tokens */
  --size-0: 0px;
  --size-0-5: 4px;
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 24px;
  --size-4: 32px;
  --size-5: 40px;
  --size-6: 48px;
  --size-7: 56px;
  --size-8: 64px;
  --size-9: 72px;
  --size-10: 80px;
  --size-11: 88px;
  --size-12: 96px;

  /* Border Radius Tokens */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Spacing Tokens */
  --spacing-0: var(--size-0);
  --spacing-px: 1px;
  --spacing-0-5: var(--size-0-5);
  --spacing-1: var(--size-1);
  --spacing-1-5: 6px;
  --spacing-2: var(--size-2);
  --spacing-2-5: 10px;
  --spacing-3: var(--size-3);
  --spacing-3-5: 14px;
  --spacing-4: var(--size-4);
  --spacing-5: var(--size-5);
  --spacing-6: var(--size-6);
  --spacing-7: var(--size-7);
  --spacing-8: var(--size-8);
  --spacing-9: var(--size-9);
  --spacing-10: var(--size-10);
  --spacing-11: var(--size-11);
  --spacing-12: var(--size-12);

  /* Font Size Tokens */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;

  /* Font Family Tokens */
  --font-family-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-serif: "Georgia", "Cambria", "Times New Roman", "Times", serif;
  --font-family-mono: "Menlo", "Monaco", "Consolas", "Liberation Mono",
    "Courier New", monospace;

  /* Font Weight Tokens */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Shadow Tokens */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-none: none;

  /* Icon Size Tokens */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 40px;

  /* Z-Index Tokens */
  --z-index-auto: auto;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-30: 30;
  --z-index-40: 40;
  --z-index-50: 50;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1080;
}