@factorialco/f0-react-native 0.22.0 → 0.23.1

package/src/styles/theme.css

@@ -0,0 +1,466 @@
+/* F0-Core Theme Tokens - Compatible with Uniwind */
+/* Using @theme inline static pattern for React Native inline style compilation */
+
+@theme inline static {
+  /* Spacing Scale (px) */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-18: 72px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-28: 112px;
+  --spacing-32: 128px;
+  --spacing-36: 144px;
+  --spacing-40: 160px;
+  --spacing-44: 176px;
+  --spacing-48: 192px;
+  --spacing-52: 208px;
+  --spacing-56: 224px;
+  --spacing-60: 240px;
+  --spacing-64: 256px;
+  --spacing-72: 288px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+  --spacing-px: 1px;
+  --spacing-0_5: 2px;
+  --spacing-1_5: 6px;
+  --spacing-2_5: 10px;
+  --spacing-3_5: 14px;
+
+  /* Typography Scale (exact from f0 core) */
+  --text-xs: 0.625rem;
+  --leading-xs: 0.75rem;
+
+  --text-sm: 0.75rem;
+  --leading-sm: 1rem;
+
+  --text-base: 0.875rem;
+  --leading-base: 1.25rem;
+  --tracking-base: -0.005em;
+
+  /* text-md alias for legacy usage */
+  --text-md: var(--text-base);
+  --leading-md: var(--leading-base);
+  --tracking-md: var(--tracking-base);
+
+  --text-lg: 1rem;
+  --leading-lg: 1.5rem;
+  --tracking-lg: -0.01em;
+
+  --text-xl: 1.125rem;
+  --leading-xl: 1.75rem;
+  --tracking-xl: -0.01em;
+
+  --text-2xl: 1.375rem;
+  --leading-2xl: 1.75rem;
+  --tracking-2xl: -0.01em;
+
+  --text-3xl: 1.625rem;
+  --leading-3xl: 2rem;
+  --tracking-3xl: -0.01em;
+
+  --text-4xl: 2.25rem;
+  --leading-4xl: 2.5rem;
+  --tracking-4xl: -0.02em;
+
+  /* Base Colors - Static values that don't change between themes */
+  --color-white-3: hsla(0, 0%, 100%, 0.03);
+  --color-white-5: hsla(0, 0%, 100%, 0.05);
+  --color-white-10: hsla(0, 0%, 100%, 0.1);
+  --color-white-20: hsla(0, 0%, 100%, 0.2);
+  --color-white-30: hsla(0, 0%, 100%, 0.3);
+  --color-white-40: hsla(0, 0%, 100%, 0.4);
+  --color-white-50: hsla(0, 0%, 100%, 0.5);
+  --color-white-60: hsla(0, 0%, 100%, 0.6);
+  --color-white-70: hsla(0, 0%, 100%, 0.7);
+  --color-white-80: hsla(0, 0%, 100%, 0.8);
+  --color-white-90: hsla(0, 0%, 100%, 0.9);
+  --color-white-100: hsl(0, 0%, 100%);
+  --color-current: currentColor;
+  --color-transparent: transparent;
+  --color-grey-0: hsla(210, 91%, 22%, 0.02);
+  --color-grey-5: hsla(220, 88%, 17%, 0.04);
+  --color-grey-10: hsla(216, 89%, 18%, 0.06);
+  --color-grey-20: hsla(214, 70%, 20%, 0.1);
+  --color-grey-30: hsla(213, 87%, 15%, 0.2);
+  --color-grey-40: hsla(219, 97%, 15%, 0.45);
+  --color-grey-50: hsla(217, 96%, 11%, 0.61);
+  --color-grey-60: hsla(220, 88%, 10%, 0.82);
+  --color-grey-70: hsla(219, 91%, 8%, 0.88);
+  --color-grey-80: hsla(219, 94%, 7%, 0.9);
+  --color-grey-90: hsla(219, 88%, 6%, 0.92);
+  --color-grey-100: hsl(218, 48%, 10%);
+  --color-grey-solid-40: hsl(219, 18%, 69%);
+  --color-grey-solid-50: hsl(218, 14%, 45%);
+  --color-lilac-50: hsl(340, 49%, 60%);
+  --color-lilac-60: hsl(341, 34%, 50%);
+  --color-lilac-70: hsl(340, 33%, 41%);
+  --color-barbie-50: hsl(331, 84%, 63%);
+  --color-barbie-60: hsl(331, 55%, 53%);
+  --color-barbie-70: hsl(330, 49%, 43%);
+  --color-smoke-50: hsl(192, 26%, 54%);
+  --color-smoke-60: hsl(192, 22%, 45%);
+  --color-smoke-70: hsl(192, 22%, 37%);
+  --color-army-50: hsl(162, 44%, 33%);
+  --color-army-60: hsl(163, 45%, 28%);
+  --color-army-70: hsl(162, 44%, 23%);
+  --color-flubber-50: hsl(84, 55%, 53%);
+  --color-flubber-60: hsl(84, 48%, 45%);
+  --color-flubber-70: hsl(83, 48%, 33%);
+  --color-indigo-50: hsl(239, 91%, 64%);
+  --color-indigo-60: hsl(239, 59%, 54%);
+  --color-indigo-70: hsl(239, 51%, 44%);
+  --color-camel-50: hsl(25, 46%, 53%);
+  --color-camel-60: hsl(25, 42%, 44%);
+  --color-camel-70: hsl(25, 42%, 36%);
+  --color-radical-50: hsl(348, 80%, 50%);
+  --color-radical-60: hsl(348, 80%, 42%);
+  --color-radical-70: hsl(347, 80%, 34%);
+  --color-viridian-50: hsl(184, 92%, 35%);
+  --color-viridian-60: hsl(184, 92%, 28%);
+  --color-viridian-70: hsl(184, 92%, 24%);
+  --color-orange-50: hsl(25, 95%, 53%);
+  --color-orange-60: hsl(24, 69%, 49%);
+  --color-orange-70: hsl(24, 69%, 40%);
+  --color-red-50: hsl(5, 100%, 65%);
+  --color-red-60: hsl(4, 61%, 49%);
+  --color-red-70: hsl(3, 71%, 41%);
+  --color-grass-50: hsl(160, 84%, 39%);
+  --color-grass-60: hsl(160, 85%, 33%);
+  --color-grass-70: hsl(161, 84%, 27%);
+  --color-malibu-50: hsl(216, 90%, 65%);
+  --color-malibu-60: hsl(216, 59%, 55%);
+  --color-malibu-70: hsl(216, 48%, 44%);
+  --color-yellow-50: hsl(38, 92%, 54%);
+  --color-yellow-60: hsl(38, 79%, 45%);
+  --color-yellow-70: hsl(38, 80%, 36%);
+  --color-purple-50: hsl(258, 88%, 67%);
+  --color-purple-60: hsl(258, 56%, 56%);
+  --color-purple-70: hsl(258, 43%, 46%);
+
+  /* Border Radius */
+  --radius-none: 0px;
+  --radius-2xs: 0.25rem;
+  --radius-xs: 0.375rem;
+  --radius-sm: 0.5rem;
+  --radius: 0.625rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* F1 Semantic Colors - References to variant-defined values */
+  /* These use var() to reference values defined in @variant blocks */
+  --color-f1-foreground: var(--f1-foreground);
+  --color-f1-foreground-secondary: var(--f1-foreground-secondary);
+  --color-f1-foreground-tertiary: var(--f1-foreground-tertiary);
+  --color-f1-foreground-inverse: var(--f1-foreground-inverse);
+  --color-f1-foreground-inverse-secondary: var(
+    --f1-foreground-inverse-secondary
+  );
+  --color-f1-foreground-disabled: var(--f1-foreground-disabled);
+  --color-f1-foreground-accent: var(--f1-foreground-accent);
+  --color-f1-foreground-critical: var(--f1-foreground-critical);
+  --color-f1-foreground-info: var(--f1-foreground-info);
+  --color-f1-foreground-warning: var(--f1-foreground-warning);
+  --color-f1-foreground-positive: var(--f1-foreground-positive);
+  --color-f1-foreground-selected: var(--f1-foreground-selected);
+  --color-f1-background: var(--f1-background);
+  --color-f1-background-hover: var(--f1-background-hover);
+  --color-f1-background-secondary: var(--f1-background-secondary);
+  --color-f1-background-secondary-hover: var(--f1-background-secondary-hover);
+  --color-f1-background-tertiary: var(--f1-background-tertiary);
+  --color-f1-background-inverse: var(--f1-background-inverse);
+  --color-f1-background-inverse-secondary: var(
+    --f1-background-inverse-secondary
+  );
+  --color-f1-background-bold: var(--f1-background-bold);
+  --color-f1-background-accent: var(--f1-background-accent);
+  --color-f1-background-accent-bold: var(--f1-background-accent-bold);
+  --color-f1-background-accent-bold-hover: var(
+    --f1-background-accent-bold-hover
+  );
+  --color-f1-background-promote: var(--f1-background-promote);
+  --color-f1-background-promote-hover: var(--f1-background-promote-hover);
+  --color-f1-background-critical: var(--f1-background-critical);
+  --color-f1-background-critical-bold: var(--f1-background-critical-bold);
+  --color-f1-background-info: var(--f1-background-info);
+  --color-f1-background-info-bold: var(--f1-background-info-bold);
+  --color-f1-background-warning: var(--f1-background-warning);
+  --color-f1-background-warning-bold: var(--f1-background-warning-bold);
+  --color-f1-background-positive: var(--f1-background-positive);
+  --color-f1-background-positive-bold: var(--f1-background-positive-bold);
+  --color-f1-background-selected: var(--f1-background-selected);
+  --color-f1-background-selected-secondary: var(
+    --f1-background-selected-secondary
+  );
+  --color-f1-background-selected-hover: var(--f1-background-selected-hover);
+  --color-f1-background-selected-bold: var(--f1-background-selected-bold);
+  --color-f1-background-selected-bold-hover: var(
+    --f1-background-selected-bold-hover
+  );
+  --color-f1-background-overlay: var(--f1-background-overlay);
+  --color-f1-border: var(--f1-border);
+  --color-f1-border-hover: var(--f1-border-hover);
+  --color-f1-border-secondary: var(--f1-border-secondary);
+  --color-f1-border-inverse: var(--f1-border-inverse);
+  --color-f1-border-bold: var(--f1-border-bold);
+  --color-f1-border-promote: var(--f1-border-promote);
+  --color-f1-border-selected: var(--f1-border-selected);
+  --color-f1-border-selected-bold: var(--f1-border-selected-bold);
+  --color-f1-border-critical: var(--f1-border-critical);
+  --color-f1-border-critical-bold: var(--f1-border-critical-bold);
+  --color-f1-border-warning: var(--f1-border-warning);
+  --color-f1-border-warning-bold: var(--f1-border-warning-bold);
+  --color-f1-border-info: var(--f1-border-info);
+  --color-f1-border-info-bold: var(--f1-border-info-bold);
+  --color-f1-border-positive: var(--f1-border-positive);
+  --color-f1-border-positive-bold: var(--f1-border-positive-bold);
+  --color-f1-icon: var(--f1-icon);
+  --color-f1-icon-secondary: var(--f1-icon-secondary);
+  --color-f1-icon-inverse: var(--f1-icon-inverse);
+  --color-f1-icon-bold: var(--f1-icon-bold);
+  --color-f1-icon-critical: var(--f1-icon-critical);
+  --color-f1-icon-critical-bold: var(--f1-icon-critical-bold);
+  --color-f1-icon-accent: var(--f1-icon-accent);
+  --color-f1-icon-info: var(--f1-icon-info);
+  --color-f1-icon-warning: var(--f1-icon-warning);
+  --color-f1-icon-positive: var(--f1-icon-positive);
+  --color-f1-icon-promote: var(--f1-icon-promote);
+  --color-f1-icon-selected: var(--f1-icon-selected);
+  --color-f1-icon-selected-hover: var(--f1-icon-selected-hover);
+  --color-f1-icon-mood-super-negative: var(--f1-icon-mood-super-negative);
+  --color-f1-icon-mood-negative: var(--f1-icon-mood-negative);
+  --color-f1-icon-mood-neutral: var(--f1-icon-mood-neutral);
+  --color-f1-icon-mood-positive: var(--f1-icon-mood-positive);
+  --color-f1-icon-mood-super-positive: var(--f1-icon-mood-super-positive);
+  --color-f1-special-ring: var(--f1-special-ring);
+  --color-f1-special-page: var(--f1-special-page);
+  --color-f1-special-highlight: var(--f1-special-highlight);
+
+  /* Chart Colors */
+  --chart-categorical-1: hsl(184, 92%, 35%);
+  --chart-categorical-2: hsl(216, 90%, 65%);
+  --chart-categorical-3: hsl(348, 80%, 50%);
+  --chart-categorical-4: hsl(160, 84%, 39%);
+  --chart-categorical-5: hsl(38, 92%, 54%);
+  --chart-categorical-6: hsl(25, 95%, 53%);
+  --chart-categorical-7: hsl(258, 88%, 67%);
+  --chart-categorical-8: hsl(5, 100%, 65%);
+  --chart-feedback-negative: hsl(5, 100%, 65%);
+  --chart-feedback-neutral: hsl(38, 92%, 54%);
+  --chart-feedback-positive: hsl(160, 85%, 33%);
+
+  /* Scrollbar */
+  --scrollbar-track: transparent;
+  --scrollbar-thumb: rgba(0, 0, 0, 0.4);
+  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.6);
+}
+
+/* Theme Variants - Light and Dark Mode */
+/* All f1-* variables are defined here with complete, pre-calculated color values */
+@layer theme {
+  :root {
+    /* Light Mode */
+    @variant light {
+      /* ============================================ */
+      /* F1 Semantic Tokens - Light Mode              */
+      /* All colors are pre-calculated, no hsl(var()) */
+      /* ============================================ */
+
+      /* Foreground Colors */
+      --f1-foreground: hsl(218, 48%, 10%);
+      --f1-foreground-secondary: hsla(217, 96%, 11%, 0.61);
+      --f1-foreground-tertiary: hsla(219, 97%, 15%, 0.45);
+      --f1-foreground-inverse: hsl(0, 0%, 100%);
+      --f1-foreground-inverse-secondary: hsla(0, 0%, 100%, 0.8);
+      --f1-foreground-disabled: hsla(213, 87%, 15%, 0.2);
+      --f1-foreground-accent: hsl(347, 80%, 34%);
+      --f1-foreground-critical: hsl(3, 71%, 41%);
+      --f1-foreground-info: hsl(216, 48%, 44%);
+      --f1-foreground-warning: hsl(24, 69%, 40%);
+      --f1-foreground-positive: hsl(161, 84%, 27%);
+      --f1-foreground-selected: hsl(184, 92%, 24%);
+
+      /* Background Colors */
+      --f1-background: hsl(0, 0%, 100%);
+      --f1-background-hover: hsla(220, 88%, 17%, 0.04);
+      --f1-background-secondary: hsla(216, 89%, 18%, 0.06);
+      --f1-background-secondary-hover: hsla(214, 70%, 20%, 0.1);
+      --f1-background-tertiary: hsla(220, 88%, 17%, 0.04);
+      --f1-background-inverse: hsla(219, 88%, 6%, 0.92);
+      --f1-background-inverse-secondary: hsla(0, 0%, 100%, 0.6);
+      --f1-background-bold: hsla(219, 88%, 6%, 0.92);
+      --f1-background-accent: hsla(348, 80%, 50%, 0.05);
+      --f1-background-accent-bold: hsl(348, 80%, 50%);
+      --f1-background-accent-bold-hover: hsl(348, 80%, 42%);
+      --f1-background-promote: hsla(38, 92%, 54%, 0.3);
+      --f1-background-promote-hover: hsla(38, 92%, 54%, 0.4);
+      --f1-background-critical: hsla(5, 100%, 65%, 0.1);
+      --f1-background-critical-bold: hsl(4, 61%, 49%);
+      --f1-background-info: hsla(216, 90%, 65%, 0.1);
+      --f1-background-info-bold: hsl(216, 90%, 65%);
+      --f1-background-warning: hsla(25, 95%, 53%, 0.1);
+      --f1-background-warning-bold: hsl(25, 95%, 53%);
+      --f1-background-positive: hsla(160, 84%, 39%, 0.1);
+      --f1-background-positive-bold: hsl(160, 84%, 39%);
+      --f1-background-selected: hsla(184, 92%, 35%, 0.1);
+      --f1-background-selected-secondary: hsla(184, 92%, 35%, 0.05);
+      --f1-background-selected-hover: hsla(184, 92%, 35%, 0.2);
+      --f1-background-selected-bold: hsl(184, 92%, 28%);
+      --f1-background-selected-bold-hover: hsl(184, 92%, 24%);
+      --f1-background-overlay: hsla(219, 97%, 15%, 0.45);
+
+      /* Border Colors */
+      --f1-border: hsla(213, 87%, 15%, 0.2);
+      --f1-border-hover: hsla(219, 97%, 15%, 0.45);
+      --f1-border-secondary: hsla(216, 89%, 18%, 0.06);
+      --f1-border-inverse: hsla(0, 0%, 100%, 0.2);
+      --f1-border-bold: hsl(218, 48%, 10%);
+      --f1-border-promote: hsla(38, 92%, 54%, 0.4);
+      --f1-border-selected: hsla(184, 92%, 35%, 0.4);
+      --f1-border-selected-bold: hsl(184, 92%, 35%);
+      --f1-border-critical: hsla(5, 100%, 65%, 0.1);
+      --f1-border-critical-bold: hsl(5, 100%, 65%);
+      --f1-border-warning: hsla(25, 95%, 53%, 0.1);
+      --f1-border-warning-bold: hsl(25, 95%, 53%);
+      --f1-border-info: hsla(216, 90%, 65%, 0.1);
+      --f1-border-info-bold: hsl(216, 90%, 65%);
+      --f1-border-positive: hsla(160, 84%, 39%, 0.1);
+      --f1-border-positive-bold: hsl(160, 84%, 39%);
+
+      /* Icon Colors */
+      --f1-icon: hsl(218, 14%, 45%);
+      --f1-icon-secondary: hsl(219, 18%, 69%);
+      --f1-icon-inverse: hsl(0, 0%, 100%);
+      --f1-icon-bold: hsl(218, 48%, 10%);
+      --f1-icon-critical: hsl(5, 100%, 65%);
+      --f1-icon-critical-bold: hsl(3, 71%, 41%);
+      --f1-icon-accent: hsl(348, 80%, 50%);
+      --f1-icon-info: hsl(216, 90%, 65%);
+      --f1-icon-warning: hsl(25, 95%, 53%);
+      --f1-icon-positive: hsl(160, 84%, 39%);
+      --f1-icon-promote: hsl(38, 92%, 54%);
+      --f1-icon-selected: hsl(184, 96%, 55%);
+      --f1-icon-selected-hover: hsl(184, 96%, 46%);
+      --f1-icon-mood-super-negative: hsl(348, 80%, 50%);
+      --f1-icon-mood-negative: hsl(25, 95%, 53%);
+      --f1-icon-mood-neutral: hsl(38, 92%, 54%);
+      --f1-icon-mood-positive: hsl(84, 55%, 53%);
+      --f1-icon-mood-super-positive: hsl(160, 84%, 39%);
+
+      /* Special Colors */
+      --f1-special-ring: hsl(184, 92%, 35%);
+      --f1-special-page: hsl(0, 0%, 100%);
+      --f1-special-highlight: hsl(348, 80%, 50%);
+    }
+
+    /* Dark Mode */
+    @variant dark {
+      /* ============================================ */
+      /* F1 Semantic Tokens - Dark Mode               */
+      /* All colors are pre-calculated, no hsl(var()) */
+      /* ============================================ */
+
+      /* Foreground Colors */
+      --f1-foreground: hsl(0, 0%, 100%);
+      --f1-foreground-secondary: hsla(0, 0%, 100%, 0.5);
+      --f1-foreground-tertiary: hsla(0, 0%, 100%, 0.4);
+      --f1-foreground-inverse: hsl(218, 48%, 10%);
+      --f1-foreground-inverse-secondary: hsla(218, 48%, 10%, 0.8);
+      --f1-foreground-disabled: hsla(0, 0%, 100%, 0.3);
+      --f1-foreground-accent: hsl(348, 80%, 50%);
+      --f1-foreground-critical: hsl(5, 100%, 65%);
+      --f1-foreground-info: hsl(216, 90%, 65%);
+      --f1-foreground-warning: hsl(25, 95%, 53%);
+      --f1-foreground-positive: hsl(160, 84%, 39%);
+      --f1-foreground-selected: hsl(184, 92%, 35%);
+
+      /* Background Colors */
+      --f1-background: hsl(218, 48%, 10%);
+      --f1-background-hover: hsla(0, 0%, 100%, 0.05);
+      --f1-background-secondary: hsla(0, 0%, 100%, 0.1);
+      --f1-background-secondary-hover: hsla(0, 0%, 100%, 0.2);
+      --f1-background-tertiary: hsla(0, 0%, 100%, 0.05);
+      --f1-background-inverse: hsla(0, 0%, 100%, 0.9);
+      --f1-background-inverse-secondary: hsla(218, 48%, 10%, 0.6);
+      --f1-background-bold: hsla(0, 0%, 100%, 0.9);
+      --f1-background-accent: hsla(348, 80%, 42%, 0.05);
+      --f1-background-accent-bold: hsl(348, 80%, 42%);
+      --f1-background-accent-bold-hover: hsl(348, 80%, 50%);
+      --f1-background-promote: hsla(38, 79%, 45%, 0.3);
+      --f1-background-promote-hover: hsla(38, 79%, 45%, 0.4);
+      --f1-background-critical: hsla(4, 61%, 49%, 0.1);
+      --f1-background-critical-bold: hsl(4, 61%, 49%);
+      --f1-background-info: hsla(216, 59%, 55%, 0.1);
+      --f1-background-info-bold: hsl(216, 59%, 55%);
+      --f1-background-warning: hsla(24, 69%, 40%, 0.1);
+      --f1-background-warning-bold: hsl(24, 69%, 40%);
+      --f1-background-positive: hsla(160, 85%, 33%, 0.1);
+      --f1-background-positive-bold: hsl(160, 85%, 33%);
+      --f1-background-selected: hsla(184, 92%, 35%, 0.1);
+      --f1-background-selected-secondary: hsla(184, 92%, 35%, 0.05);
+      --f1-background-selected-hover: hsla(184, 92%, 35%, 0.2);
+      --f1-background-selected-bold: hsl(184, 92%, 28%);
+      --f1-background-selected-bold-hover: hsl(184, 92%, 35%);
+      --f1-background-overlay: hsla(0, 0%, 100%, 0.4);
+
+      /* Border Colors */
+      --f1-border: hsla(0, 0%, 100%, 0.3);
+      --f1-border-hover: hsla(0, 0%, 100%, 0.4);
+      --f1-border-secondary: hsla(0, 0%, 100%, 0.1);
+      --f1-border-inverse: hsla(218, 48%, 10%, 0.2);
+      --f1-border-bold: hsl(0, 0%, 100%);
+      --f1-border-promote: hsla(38, 79%, 45%, 0.4);
+      --f1-border-selected: hsla(184, 92%, 35%, 0.4);
+      --f1-border-selected-bold: hsl(184, 92%, 35%);
+      --f1-border-critical: hsla(4, 61%, 49%, 0.1);
+      --f1-border-critical-bold: hsl(4, 61%, 49%);
+      --f1-border-warning: hsla(24, 69%, 40%, 0.1);
+      --f1-border-warning-bold: hsl(24, 69%, 40%);
+      --f1-border-info: hsla(216, 59%, 55%, 0.1);
+      --f1-border-info-bold: hsl(216, 59%, 55%);
+      --f1-border-positive: hsla(160, 85%, 33%, 0.1);
+      --f1-border-positive-bold: hsl(160, 85%, 33%);
+
+      /* Icon Colors */
+      --f1-icon: hsla(0, 0%, 100%, 0.5);
+      --f1-icon-secondary: hsla(0, 0%, 100%, 0.4);
+      --f1-icon-inverse: hsl(218, 48%, 10%);
+      --f1-icon-bold: hsl(0, 0%, 100%);
+      --f1-icon-critical: hsl(4, 61%, 49%);
+      --f1-icon-critical-bold: hsl(5, 100%, 65%);
+      --f1-icon-accent: hsl(348, 80%, 42%);
+      --f1-icon-info: hsl(216, 59%, 55%);
+      --f1-icon-warning: hsl(24, 69%, 40%);
+      --f1-icon-positive: hsl(160, 85%, 33%);
+      --f1-icon-promote: hsl(38, 79%, 45%);
+      --f1-icon-selected: hsl(184, 96%, 55%);
+      --f1-icon-selected-hover: hsl(184, 96%, 68%);
+      --f1-icon-mood-super-negative: hsl(4, 61%, 49%);
+      --f1-icon-mood-negative: hsl(24, 69%, 40%);
+      --f1-icon-mood-neutral: hsl(38, 79%, 45%);
+      --f1-icon-mood-positive: hsl(160, 85%, 33%);
+      --f1-icon-mood-super-positive: hsl(160, 85%, 33%);
+
+      /* Special Colors */
+      --f1-special-ring: hsl(184, 92%, 35%);
+      --f1-special-page: hsla(0, 0%, 100%, 0.03);
+      --f1-special-highlight: hsl(348, 80%, 42%);
+    }
+  }
+}

package/src/styles/tokens/borderRadius.ts

@@ -0,0 +1,12 @@
+export const borderRadius = {
+  none: "0px",
+  "2xs": "0.25rem",
+  xs: "0.375rem",
+  sm: "0.5rem",
+  DEFAULT: "0.625rem",
+  md: "0.75rem",
+  lg: "0.875rem",
+  xl: "1rem",
+  "2xl": "1.5rem",
+  full: "9999px",
+}

package/src/styles/tokens/breakpoints.ts

@@ -0,0 +1,5 @@
+export const breakpoints = {
+  md: 900,
+  lg: 1200,
+  xl: 1440,
+}