@solibo/solibo-ui 0.4.1 → 0.4.4

package/dist/tokens.css

@@ -1,76 +1,211 @@
 /* generated by `pnpm tokens:build` 🥷 */
 
 :root {
-  --border: var(--border-width) solid var(--color-border);
-  --border-radius: calc(var(--unit) / 1.5);
-  --border-radius-large: calc(var(--unit) * 1.5);
-  --border-width: 1px;
-  --border-width-heavy: 2px;
-  --color-background-light: var(--color-neutral-light);
-  --color-black: rgb(23 23 23);
-  --color-border: var(--color-timberwolf);
-  --color-border-primary: rgb(42 42 42 / 12%);
-  --color-cod-gray: rgb(11 11 11);
-  --color-dark: rgb(180 180 180);
-  --color-draft: rgb(255 255 200 / 80%);
-  --color-electric-violet: rgb(90 35 245);
-  --color-fallback: var(--color-silver);
-  --color-green: rgb(0 146 20);
-  --color-green-dark: rgb(33 69 45);
-  --color-green-light: rgb(209 250 229);
-  --color-highlight: rgb(235 235 235);
-  --color-icon: var(--color-outer-space);
-  --color-mahogany: rgb(136 4 2);
-  --color-neutral: var(--color-timberwolf);
-  --color-neutral-light: var(--color-wild-sand);
-  --color-outer-space: rgb(82 82 82);
-  --color-placeholder-text: var(--color-silver);
-  --color-primary: var(--color-electric-violet);
-  --color-primary-dark: var(--color-purple-heart);
-  --color-purple-heart: rgb(64 25 174);
-  --color-purple-light: rgb(239 233 254);
-  --color-red: rgb(191 6 3);
-  --color-red-light: rgb(235 178 177);
-  --color-silver: rgb(194 194 194);
-  --color-surface-active: rgb(123 79 247 / 20%);
-  --color-text: var(--color-text-primary);
-  --color-text-primary: var(--color-cod-gray);
-  --color-text-secondary: var(--color-outer-space);
-  --color-timberwolf: rgb(223 223 223);
-  --color-translucent: rgba(255 255 255 / 60%);
-  --color-warning: var(--color-red);
-  --color-white: rgb(255 255 255);
-  --color-wild-sand: rgb(245 245 245);
-  --font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  --font-size: var(--unit);
-  --font-size-h1: calc(var(--unit) * 2);
-  --font-size-h2: calc(var(--unit) * 1.25);
-  --font-size-h3: calc(var(--unit));
-  --font-size-small: calc(var(--unit) * 0.75);
-  --font-weight-bold: 700;
-  --font-weight-normal: 400;
-  --font-weight-semibold: 600;
-  --gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
-  --icon-size: calc(var(--unit) * 1.5);
-  --negative-unit: calc(-1 * var(--unit));
-  --negative-unit-large: calc(var(--negative-unit) * 2);
-  --negative-unit-small: calc(var(--negative-unit) / 2);
-  --offset: calc(-2 * var(--unit));
-  --opacity-disabled: var(--opacity-minimal);
-  --opacity-minimal: 0.5;
-  --opacity-visited: var(--opacity-minimal);
-  --padding-box: 0.05px var(--unit);
-  --shadow: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-tiny);
-  --shadow-big: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-small);
-  --shadow-color: rgb(0 0 0 / 10%);
-  --transition-delay: 125ms;
-  --transition-duration: 250ms;
-  --transition-duration-long: calc(var(--transition-duration) * 2);
-  --transition-timing-function: ease-out;
-  --unit: 16px;
-  --unit-large: calc(var(--unit) * 2);
-  --unit-micro: calc(var(--unit) / 8);
-  --unit-small: calc(var(--unit) / 2);
-  --unit-tiny: calc(var(--unit) / 4);
-  --z-max: 2147483647;
+  --colors-green-100: #b0c8c2;
+  --colors-green-200: #8aaea5;
+  --colors-green-300: #54887c;
+  --colors-green-400: #337162;
+  --colors-green-50: #e6edeb;
+  --colors-green-500: #004e3b;
+  --colors-green-600: #004736;
+  --colors-green-700: #00372a;
+  --colors-green-800: #002b20;
+  --colors-green-900: #002119;
+  --colors-neutral-0: #fff;
+  --colors-neutral-100: #ebebeb;
+  --colors-neutral-200: #dfdfdf;
+  --colors-neutral-300: #999;
+  --colors-neutral-400: #7b7b7b;
+  --colors-neutral-50: #f5f5f5;
+  --colors-neutral-500: #525252;
+  --colors-neutral-600: #373737;
+  --colors-neutral-700: #2a2a2a;
+  --colors-neutral-800: #1c1c1c;
+  --colors-neutral-900: #0b0b0b;
+  --colors-orange-100: #fdd7b0;
+  --colors-orange-200: #fbc48a;
+  --colors-orange-300: #faa954;
+  --colors-orange-400: #f99933;
+  --colors-orange-50: #fef2e6;
+  --colors-orange-500: #f77f00;
+  --colors-orange-600: #e17400;
+  --colors-orange-700: #af5a00;
+  --colors-orange-800: #884600;
+  --colors-orange-900: #683500;
+  --colors-purple-100: #ccbbfc;
+  --colors-purple-200: #b39afa;
+  --colors-purple-300: #906cf8;
+  --colors-purple-400: #7b4ff7;
+  --colors-purple-50: #efe9fe;
+  --colors-purple-500: #5a23f5;
+  --colors-purple-600: #5220df;
+  --colors-purple-700: #4019ae;
+  --colors-purple-800: #321387;
+  --colors-purple-900: #260f67;
+  --colors-red-100: #ebb2b1;
+  --colors-red-200: #e28c8b;
+  --colors-red-300: #d45856;
+  --colors-red-400: #cc3835;
+  --colors-red-50: #f9e6e6;
+  --colors-red-500: #bf0603;
+  --colors-red-600: #ae0503;
+  --colors-red-700: #880402;
+  --colors-red-800: #690302;
+  --colors-red-900: #500301;
+  --colors-semantic-bg-disabled: var(--colors-neutral-50);
+  --colors-semantic-bg-overlay: var(--colors-neutral-100);
+  --colors-semantic-bg-page: var(--colors-neutral-50);
+  --colors-semantic-bg-surface: var(--colors-neutral-0);
+  --colors-semantic-border-default: var(--colors-neutral-200);
+  --colors-semantic-border-disabled: var(--colors-neutral-50);
+  --colors-semantic-border-focus: var(--colors-purple-500);
+  --colors-semantic-border-strong: var(--colors-neutral-300);
+  --colors-semantic-border-subtle: var(--colors-neutral-100);
+  --colors-semantic-content-disabled: var(--colors-neutral-300);
+  --colors-semantic-content-link: var(--colors-purple-600);
+  --colors-semantic-content-link-hover: var(--colors-purple-700);
+  --colors-semantic-content-link-visited: var(--colors-purple-400);
+  --colors-semantic-content-on-color: var(--colors-neutral-0);
+  --colors-semantic-content-primary: var(--colors-neutral-900);
+  --colors-semantic-content-secondary: var(--colors-neutral-500);
+  --colors-semantic-content-tertiary: var(--colors-neutral-400);
+  --colors-semantic-interactive-destructive-bg: var(--colors-red-600);
+  --colors-semantic-interactive-destructive-disabled: var(--colors-red-200);
+  --colors-semantic-interactive-destructive-hover: var(--colors-red-700);
+  --colors-semantic-interactive-disabled: var(--colors-neutral-200);
+  --colors-semantic-interactive-hover: var(--colors-purple-50);
+  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-50);
+  --colors-semantic-interactive-pressed: var(--colors-purple-100);
+  --colors-semantic-interactive-selected: var(--colors-purple-100);
+  --colors-semantic-primary-on-primary: var(--colors-neutral-0);
+  --colors-semantic-primary-on-primary-subtle: var(--colors-purple-700);
+  --colors-semantic-primary-primary: var(--colors-purple-500);
+  --colors-semantic-primary-primary-active: var(--colors-purple-700);
+  --colors-semantic-primary-primary-hover: var(--colors-purple-600);
+  --colors-semantic-primary-primary-subtle: var(--colors-purple-50);
+  --colors-semantic-primary-primary-subtle-border: var(--colors-purple-200);
+  --colors-semantic-status-error-bg: var(--colors-red-50);
+  --colors-semantic-status-error-border: var(--colors-red-500);
+  --colors-semantic-status-error-content: var(--colors-red-700);
+  --colors-semantic-status-error-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-success-bg: var(--colors-green-50);
+  --colors-semantic-status-success-border: var(--colors-green-200);
+  --colors-semantic-status-success-content: var(--colors-green-800);
+  --colors-semantic-status-success-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-warning-bg: var(--colors-orange-50);
+  --colors-semantic-status-warning-border: var(--colors-orange-200);
+  --colors-semantic-status-warning-content: var(--colors-orange-800);
+  --colors-semantic-status-warning-content-inverse: var(--colors-neutral-0);
+  --font-base: 'Figtree';
+  --font-font-weight-bold: 700;
+  --font-font-weight-regular: 400;
+  --font-font-weight-semibold: 600;
+  --scale-0: 0px;
+  --scale-1: 1px;
+  --scale-12: 12px;
+  --scale-14: 14px;
+  --scale-16: 16px;
+  --scale-18: 18px;
+  --scale-2: 2px;
+  --scale-20: 20px;
+  --scale-24: 24px;
+  --scale-32: 32px;
+  --scale-4: 4px;
+  --scale-40: 40px;
+  --scale-48: 48px;
+  --scale-56: 56px;
+  --scale-64: 64px;
+  --scale-72: 72px;
+  --scale-8: 8px;
+  --scale-80: 80px;
+  --scale-88: 88px;
+  --scale-96: 96px;
+  --scale-negative-16: -16px;
+  --shape-border-radius-radius-2xl: var(--scale-24);
+  --shape-border-radius-radius-full: var(--scale-32);
+  --shape-border-radius-radius-lg: var(--scale-12);
+  --shape-border-radius-radius-md: var(--scale-8);
+  --shape-border-radius-radius-none: var(--scale-0);
+  --shape-border-radius-radius-sm: var(--scale-4);
+  --shape-border-radius-radius-xl: var(--scale-16);
+  --shape-spacing-2xl: var(--scale-48);
+  --shape-spacing-2xs: var(--scale-4);
+  --shape-spacing-3xl: var(--scale-64);
+  --shape-spacing-3xs: var(--scale-2);
+  --shape-spacing-lg: var(--scale-24);
+  --shape-spacing-md: var(--scale-16);
+  --shape-spacing-sm: var(--scale-12);
+  --shape-spacing-xl: var(--scale-32);
+  --shape-spacing-xs: var(--scale-8);
+  --typography-font-sizes-body-lg: var(--scale-18);
+  --typography-font-sizes-body-md: var(--scale-16);
+  --typography-font-sizes-body-sm: var(--scale-14);
+  --typography-font-sizes-caption: var(--scale-12);
+  --typography-font-sizes-display-lg: var(--scale-56);
+  --typography-font-sizes-display-sm: var(--scale-48);
+  --typography-font-sizes-h1: var(--scale-32);
+  --typography-font-sizes-h2: var(--scale-24);
+  --typography-font-sizes-h3: var(--scale-20);
+  --typography-font-sizes-h4: var(--scale-16);
+  --typography-font-sizes-label-lg: var(--scale-16);
+  --typography-font-sizes-label-sm: var(--scale-14);
+  --utils-tokens-font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --utils-tokens-gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
+  --utils-tokens-icon-size: var(--scale-16);
+  --utils-tokens-negative-unit: var(--scale-negative-16);
+  --utils-tokens-opacity-minimal: 0.5;
+  --utils-tokens-transition-delay: 125ms;
+  --utils-tokens-transition-duration: 250ms;
+  --utils-tokens-transition-timing-function: ease-out;
+  --utils-tokens-unit: var(--scale-16);
+  --utils-tokens-z-max: 2147483648;
+}
+
+[data-theme='dark'] {
+  --colors-semantic-bg-disabled: var(--colors-neutral-800);
+  --colors-semantic-bg-overlay: var(--colors-neutral-600);
+  --colors-semantic-bg-page: var(--colors-neutral-900);
+  --colors-semantic-bg-surface: var(--colors-neutral-800);
+  --colors-semantic-border-default: var(--colors-neutral-500);
+  --colors-semantic-border-disabled: var(--colors-neutral-700);
+  --colors-semantic-border-focus: var(--colors-purple-400);
+  --colors-semantic-border-subtle: var(--colors-neutral-600);
+  --colors-semantic-content-disabled: var(--colors-neutral-500);
+  --colors-semantic-content-link: var(--colors-purple-200);
+  --colors-semantic-content-link-hover: var(--colors-purple-300);
+  --colors-semantic-content-primary: var(--colors-neutral-50);
+  --colors-semantic-content-secondary: var(--colors-neutral-200);
+  --colors-semantic-content-tertiary: var(--colors-neutral-300);
+  --colors-semantic-interactive-disabled: var(--colors-neutral-500);
+  --colors-semantic-interactive-hover: var(--colors-purple-700);
+  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-700);
+  --colors-semantic-interactive-pressed: var(--colors-purple-700);
+  --colors-semantic-interactive-selected: var(--colors-purple-600);
+  --colors-semantic-primary-on-primary-subtle: var(--colors-purple-200);
+  --colors-semantic-primary-primary: var(--colors-purple-300);
+  --colors-semantic-primary-primary-active: var(--colors-purple-200);
+  --colors-semantic-primary-primary-hover: var(--colors-purple-300);
+  --colors-semantic-primary-primary-subtle: var(--colors-purple-800);
+  --colors-semantic-primary-primary-subtle-border: var(--colors-purple-600);
+  --colors-semantic-status-error-bg: var(--colors-red-100);
+  --colors-semantic-status-error-border: var(--colors-red-300);
+  --colors-semantic-status-error-content: var(--colors-red-800);
+  --colors-semantic-status-success-bg: var(--colors-green-200);
+  --colors-semantic-status-success-border: var(--colors-green-400);
+  --colors-semantic-status-warning-bg: var(--colors-orange-200);
+  --colors-semantic-status-warning-border: var(--colors-orange-400);
+}
+
+@media (width <= 960px) {
+  :root {
+    --typography-font-sizes-body-lg: var(--scale-16);
+    --typography-font-sizes-display-lg: var(--scale-48);
+    --typography-font-sizes-display-sm: var(--scale-40);
+    --typography-font-sizes-h1: var(--scale-24);
+    --typography-font-sizes-h2: var(--scale-20);
+    --typography-font-sizes-h3: var(--scale-18);
+    --typography-font-sizes-h4: var(--scale-18);
+    --typography-font-sizes-label-lg: var(--scale-14);
+    --typography-font-sizes-label-sm: var(--scale-12);
+  }
 }