@factorialco/f0-react-native 0.24.1 → 0.26.0

package/src/styles/theme.css

@@ -76,6 +76,77 @@
   --leading-4xl: 2.5rem;
   --tracking-4xl: -0.02em;
 
+  /* Semantic Typography Tokens - F0Text Variants */
+  /* Heading lg */
+  --p-text-heading-lg-font-size: 1.5rem; /* 24px */
+  --p-text-heading-lg-font-line-height: 2rem; /* 32px */
+  --p-text-heading-lg-font-letter-spacing: -0.2px;
+  --p-text-heading-lg-font-weight: 600;
+  --p-text-heading-lg-font-family: Inter;
+
+  /* Heading md */
+  --p-text-heading-md-font-size: 1.25rem; /* 20px */
+  --p-text-heading-md-font-line-height: 1.75rem; /* 28px */
+  --p-text-heading-md-font-letter-spacing: -0.2px;
+  --p-text-heading-md-font-weight: 600;
+  --p-text-heading-md-font-family: Inter;
+
+  /* Heading sm */
+  --p-text-heading-sm-font-size: 1rem; /* 16px */
+  --p-text-heading-sm-font-line-height: 1.5rem; /* 24px */
+  --p-text-heading-sm-font-letter-spacing: 0;
+  --p-text-heading-sm-font-weight: 600;
+  --p-text-heading-sm-font-family: Inter;
+
+  /* Body md default */
+  --p-text-body-md-default-font-size: 1rem; /* 16px */
+  --p-text-body-md-default-font-line-height: 1.5rem; /* 24px */
+  --p-text-body-md-default-font-letter-spacing: 0;
+  --p-text-body-md-default-font-weight: 400;
+  --p-text-body-md-default-font-family: Inter;
+
+  /* Body md medium */
+  --p-text-body-md-medium-font-size: 1rem; /* 16px */
+  --p-text-body-md-medium-font-line-height: 1.5rem; /* 24px */
+  --p-text-body-md-medium-font-letter-spacing: 0;
+  --p-text-body-md-medium-font-weight: 500;
+  --p-text-body-md-medium-font-family: Inter;
+
+  /* Body md semibold */
+  --p-text-body-md-semibold-font-size: 1rem; /* 16px */
+  --p-text-body-md-semibold-font-line-height: 1.5rem; /* 24px */
+  --p-text-body-md-semibold-font-letter-spacing: 0;
+  --p-text-body-md-semibold-font-weight: 600;
+  --p-text-body-md-semibold-font-family: Inter;
+
+  /* Body sm default */
+  --p-text-body-sm-default-font-size: 0.875rem; /* 14px */
+  --p-text-body-sm-default-font-line-height: 1.25rem; /* 20px */
+  --p-text-body-sm-default-font-letter-spacing: 0;
+  --p-text-body-sm-default-font-weight: 400;
+  --p-text-body-sm-default-font-family: Inter;
+
+  /* Body sm medium */
+  --p-text-body-sm-medium-font-size: 0.875rem; /* 14px */
+  --p-text-body-sm-medium-font-line-height: 1.5rem; /* 24px */
+  --p-text-body-sm-medium-font-letter-spacing: 0;
+  --p-text-body-sm-medium-font-weight: 500;
+  --p-text-body-sm-medium-font-family: Inter;
+
+  /* Body sm semibold */
+  --p-text-body-sm-semibold-font-size: 0.875rem; /* 14px */
+  --p-text-body-sm-semibold-font-line-height: 1.25rem; /* 20px */
+  --p-text-body-sm-semibold-font-letter-spacing: 0;
+  --p-text-body-sm-semibold-font-weight: 600;
+  --p-text-body-sm-semibold-font-family: Inter;
+
+  /* Body xs medium */
+  --p-text-body-xs-medium-font-size: 0.75rem; /* 12px */
+  --p-text-body-xs-medium-font-line-height: 1rem; /* 16px */
+  --p-text-body-xs-medium-font-letter-spacing: 0;
+  --p-text-body-xs-medium-font-weight: 500;
+  --p-text-body-xs-medium-font-family: Inter;
+
   /* 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);
@@ -163,94 +234,94 @@
   --radius-2xl: 1.5rem;
   --radius-full: 9999px;
 
-  /* F1 Semantic Colors - References to variant-defined values */
+  /* F0 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-f0-foreground: var(--f0-foreground);
+  --color-f0-foreground-secondary: var(--f0-foreground-secondary);
+  --color-f0-foreground-tertiary: var(--f0-foreground-tertiary);
+  --color-f0-foreground-inverse: var(--f0-foreground-inverse);
+  --color-f0-foreground-inverse-secondary: var(
+    --f0-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-f0-foreground-disabled: var(--f0-foreground-disabled);
+  --color-f0-foreground-accent: var(--f0-foreground-accent);
+  --color-f0-foreground-critical: var(--f0-foreground-critical);
+  --color-f0-foreground-info: var(--f0-foreground-info);
+  --color-f0-foreground-warning: var(--f0-foreground-warning);
+  --color-f0-foreground-positive: var(--f0-foreground-positive);
+  --color-f0-foreground-selected: var(--f0-foreground-selected);
+  --color-f0-background: var(--f0-background);
+  --color-f0-background-hover: var(--f0-background-hover);
+  --color-f0-background-secondary: var(--f0-background-secondary);
+  --color-f0-background-secondary-hover: var(--f0-background-secondary-hover);
+  --color-f0-background-tertiary: var(--f0-background-tertiary);
+  --color-f0-background-inverse: var(--f0-background-inverse);
+  --color-f0-background-inverse-secondary: var(
+    --f0-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-f0-background-bold: var(--f0-background-bold);
+  --color-f0-background-accent: var(--f0-background-accent);
+  --color-f0-background-accent-bold: var(--f0-background-accent-bold);
+  --color-f0-background-accent-bold-hover: var(
+    --f0-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-f0-background-promote: var(--f0-background-promote);
+  --color-f0-background-promote-hover: var(--f0-background-promote-hover);
+  --color-f0-background-critical: var(--f0-background-critical);
+  --color-f0-background-critical-bold: var(--f0-background-critical-bold);
+  --color-f0-background-info: var(--f0-background-info);
+  --color-f0-background-info-bold: var(--f0-background-info-bold);
+  --color-f0-background-warning: var(--f0-background-warning);
+  --color-f0-background-warning-bold: var(--f0-background-warning-bold);
+  --color-f0-background-positive: var(--f0-background-positive);
+  --color-f0-background-positive-bold: var(--f0-background-positive-bold);
+  --color-f0-background-selected: var(--f0-background-selected);
+  --color-f0-background-selected-secondary: var(
+    --f0-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-f0-background-selected-hover: var(--f0-background-selected-hover);
+  --color-f0-background-selected-bold: var(--f0-background-selected-bold);
+  --color-f0-background-selected-bold-hover: var(
+    --f0-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);
+  --color-f0-background-overlay: var(--f0-background-overlay);
+  --color-f0-border: var(--f0-border);
+  --color-f0-border-hover: var(--f0-border-hover);
+  --color-f0-border-secondary: var(--f0-border-secondary);
+  --color-f0-border-inverse: var(--f0-border-inverse);
+  --color-f0-border-bold: var(--f0-border-bold);
+  --color-f0-border-promote: var(--f0-border-promote);
+  --color-f0-border-selected: var(--f0-border-selected);
+  --color-f0-border-selected-bold: var(--f0-border-selected-bold);
+  --color-f0-border-critical: var(--f0-border-critical);
+  --color-f0-border-critical-bold: var(--f0-border-critical-bold);
+  --color-f0-border-warning: var(--f0-border-warning);
+  --color-f0-border-warning-bold: var(--f0-border-warning-bold);
+  --color-f0-border-info: var(--f0-border-info);
+  --color-f0-border-info-bold: var(--f0-border-info-bold);
+  --color-f0-border-positive: var(--f0-border-positive);
+  --color-f0-border-positive-bold: var(--f0-border-positive-bold);
+  --color-f0-icon: var(--f0-icon);
+  --color-f0-icon-secondary: var(--f0-icon-secondary);
+  --color-f0-icon-inverse: var(--f0-icon-inverse);
+  --color-f0-icon-bold: var(--f0-icon-bold);
+  --color-f0-icon-critical: var(--f0-icon-critical);
+  --color-f0-icon-critical-bold: var(--f0-icon-critical-bold);
+  --color-f0-icon-accent: var(--f0-icon-accent);
+  --color-f0-icon-info: var(--f0-icon-info);
+  --color-f0-icon-warning: var(--f0-icon-warning);
+  --color-f0-icon-positive: var(--f0-icon-positive);
+  --color-f0-icon-promote: var(--f0-icon-promote);
+  --color-f0-icon-selected: var(--f0-icon-selected);
+  --color-f0-icon-selected-hover: var(--f0-icon-selected-hover);
+  --color-f0-icon-mood-super-negative: var(--f0-icon-mood-super-negative);
+  --color-f0-icon-mood-negative: var(--f0-icon-mood-negative);
+  --color-f0-icon-mood-neutral: var(--f0-icon-mood-neutral);
+  --color-f0-icon-mood-positive: var(--f0-icon-mood-positive);
+  --color-f0-icon-mood-super-positive: var(--f0-icon-mood-super-positive);
+  --color-f0-special-ring: var(--f0-special-ring);
+  --color-f0-special-page: var(--f0-special-page);
+  --color-f0-special-highlight: var(--f0-special-highlight);
 
   /* Chart Colors */
   --chart-categorical-1: hsl(184, 92%, 35%);
@@ -272,195 +343,195 @@
 }
 
 /* Theme Variants - Light and Dark Mode */
-/* All f1-* variables are defined here with complete, pre-calculated color values */
+/* All f0-* variables are defined here with complete, pre-calculated color values */
 @layer theme {
   :root {
     /* Light Mode */
     @variant light {
       /* ============================================ */
-      /* F1 Semantic Tokens - Light Mode              */
+      /* F0 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%);
+      --f0-foreground: hsl(218, 48%, 10%);
+      --f0-foreground-secondary: hsla(217, 96%, 11%, 0.61);
+      --f0-foreground-tertiary: hsla(219, 97%, 15%, 0.45);
+      --f0-foreground-inverse: hsl(0, 0%, 100%);
+      --f0-foreground-inverse-secondary: hsla(0, 0%, 100%, 0.8);
+      --f0-foreground-disabled: hsla(213, 87%, 15%, 0.2);
+      --f0-foreground-accent: hsl(347, 80%, 34%);
+      --f0-foreground-critical: hsl(3, 71%, 41%);
+      --f0-foreground-info: hsl(216, 48%, 44%);
+      --f0-foreground-warning: hsl(24, 69%, 40%);
+      --f0-foreground-positive: hsl(161, 84%, 27%);
+      --f0-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);
+      --f0-background: hsl(0, 0%, 100%);
+      --f0-background-hover: hsla(220, 88%, 17%, 0.04);
+      --f0-background-secondary: hsla(216, 89%, 18%, 0.06);
+      --f0-background-secondary-hover: hsla(214, 70%, 20%, 0.1);
+      --f0-background-tertiary: hsla(220, 88%, 17%, 0.04);
+      --f0-background-inverse: hsla(219, 88%, 6%, 0.92);
+      --f0-background-inverse-secondary: hsla(0, 0%, 100%, 0.6);
+      --f0-background-bold: hsla(219, 88%, 6%, 0.92);
+      --f0-background-accent: hsla(348, 80%, 50%, 0.05);
+      --f0-background-accent-bold: hsl(348, 80%, 50%);
+      --f0-background-accent-bold-hover: hsl(348, 80%, 42%);
+      --f0-background-promote: hsla(38, 92%, 54%, 0.3);
+      --f0-background-promote-hover: hsla(38, 92%, 54%, 0.4);
+      --f0-background-critical: hsla(5, 100%, 65%, 0.1);
+      --f0-background-critical-bold: hsl(4, 61%, 49%);
+      --f0-background-info: hsla(216, 90%, 65%, 0.1);
+      --f0-background-info-bold: hsl(216, 90%, 65%);
+      --f0-background-warning: hsla(25, 95%, 53%, 0.1);
+      --f0-background-warning-bold: hsl(25, 95%, 53%);
+      --f0-background-positive: hsla(160, 84%, 39%, 0.1);
+      --f0-background-positive-bold: hsl(160, 84%, 39%);
+      --f0-background-selected: hsla(184, 92%, 35%, 0.1);
+      --f0-background-selected-secondary: hsla(184, 92%, 35%, 0.05);
+      --f0-background-selected-hover: hsla(184, 92%, 35%, 0.2);
+      --f0-background-selected-bold: hsl(184, 92%, 28%);
+      --f0-background-selected-bold-hover: hsl(184, 92%, 24%);
+      --f0-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%);
+      --f0-border: hsla(213, 87%, 15%, 0.2);
+      --f0-border-hover: hsla(219, 97%, 15%, 0.45);
+      --f0-border-secondary: hsla(216, 89%, 18%, 0.06);
+      --f0-border-inverse: hsla(0, 0%, 100%, 0.2);
+      --f0-border-bold: hsl(218, 48%, 10%);
+      --f0-border-promote: hsla(38, 92%, 54%, 0.4);
+      --f0-border-selected: hsla(184, 92%, 35%, 0.4);
+      --f0-border-selected-bold: hsl(184, 92%, 35%);
+      --f0-border-critical: hsla(5, 100%, 65%, 0.1);
+      --f0-border-critical-bold: hsl(5, 100%, 65%);
+      --f0-border-warning: hsla(25, 95%, 53%, 0.1);
+      --f0-border-warning-bold: hsl(25, 95%, 53%);
+      --f0-border-info: hsla(216, 90%, 65%, 0.1);
+      --f0-border-info-bold: hsl(216, 90%, 65%);
+      --f0-border-positive: hsla(160, 84%, 39%, 0.1);
+      --f0-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%);
+      --f0-icon: hsl(218, 14%, 45%);
+      --f0-icon-secondary: hsl(219, 18%, 69%);
+      --f0-icon-inverse: hsl(0, 0%, 100%);
+      --f0-icon-bold: hsl(218, 48%, 10%);
+      --f0-icon-critical: hsl(5, 100%, 65%);
+      --f0-icon-critical-bold: hsl(3, 71%, 41%);
+      --f0-icon-accent: hsl(348, 80%, 50%);
+      --f0-icon-info: hsl(216, 90%, 65%);
+      --f0-icon-warning: hsl(25, 95%, 53%);
+      --f0-icon-positive: hsl(160, 84%, 39%);
+      --f0-icon-promote: hsl(38, 92%, 54%);
+      --f0-icon-selected: hsl(184, 96%, 55%);
+      --f0-icon-selected-hover: hsl(184, 96%, 46%);
+      --f0-icon-mood-super-negative: hsl(348, 80%, 50%);
+      --f0-icon-mood-negative: hsl(25, 95%, 53%);
+      --f0-icon-mood-neutral: hsl(38, 92%, 54%);
+      --f0-icon-mood-positive: hsl(84, 55%, 53%);
+      --f0-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%);
+      --f0-special-ring: hsl(184, 92%, 35%);
+      --f0-special-page: hsl(0, 0%, 100%);
+      --f0-special-highlight: hsl(348, 80%, 50%);
     }
 
     /* Dark Mode */
     @variant dark {
       /* ============================================ */
-      /* F1 Semantic Tokens - Dark Mode               */
+      /* F0 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%);
+      --f0-foreground: hsl(0, 0%, 100%);
+      --f0-foreground-secondary: hsla(0, 0%, 100%, 0.5);
+      --f0-foreground-tertiary: hsla(0, 0%, 100%, 0.4);
+      --f0-foreground-inverse: hsl(218, 48%, 10%);
+      --f0-foreground-inverse-secondary: hsla(218, 48%, 10%, 0.8);
+      --f0-foreground-disabled: hsla(0, 0%, 100%, 0.3);
+      --f0-foreground-accent: hsl(348, 80%, 50%);
+      --f0-foreground-critical: hsl(5, 100%, 65%);
+      --f0-foreground-info: hsl(216, 90%, 65%);
+      --f0-foreground-warning: hsl(25, 95%, 53%);
+      --f0-foreground-positive: hsl(160, 84%, 39%);
+      --f0-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);
+      --f0-background: hsl(218, 48%, 10%);
+      --f0-background-hover: hsla(0, 0%, 100%, 0.05);
+      --f0-background-secondary: hsla(0, 0%, 100%, 0.1);
+      --f0-background-secondary-hover: hsla(0, 0%, 100%, 0.2);
+      --f0-background-tertiary: hsla(0, 0%, 100%, 0.05);
+      --f0-background-inverse: hsla(0, 0%, 100%, 0.9);
+      --f0-background-inverse-secondary: hsla(218, 48%, 10%, 0.6);
+      --f0-background-bold: hsla(0, 0%, 100%, 0.9);
+      --f0-background-accent: hsla(348, 80%, 42%, 0.05);
+      --f0-background-accent-bold: hsl(348, 80%, 42%);
+      --f0-background-accent-bold-hover: hsl(348, 80%, 50%);
+      --f0-background-promote: hsla(38, 79%, 45%, 0.3);
+      --f0-background-promote-hover: hsla(38, 79%, 45%, 0.4);
+      --f0-background-critical: hsla(4, 61%, 49%, 0.1);
+      --f0-background-critical-bold: hsl(4, 61%, 49%);
+      --f0-background-info: hsla(216, 59%, 55%, 0.1);
+      --f0-background-info-bold: hsl(216, 59%, 55%);
+      --f0-background-warning: hsla(24, 69%, 40%, 0.1);
+      --f0-background-warning-bold: hsl(24, 69%, 40%);
+      --f0-background-positive: hsla(160, 85%, 33%, 0.1);
+      --f0-background-positive-bold: hsl(160, 85%, 33%);
+      --f0-background-selected: hsla(184, 92%, 35%, 0.1);
+      --f0-background-selected-secondary: hsla(184, 92%, 35%, 0.05);
+      --f0-background-selected-hover: hsla(184, 92%, 35%, 0.2);
+      --f0-background-selected-bold: hsl(184, 92%, 28%);
+      --f0-background-selected-bold-hover: hsl(184, 92%, 35%);
+      --f0-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%);
+      --f0-border: hsla(0, 0%, 100%, 0.3);
+      --f0-border-hover: hsla(0, 0%, 100%, 0.4);
+      --f0-border-secondary: hsla(0, 0%, 100%, 0.1);
+      --f0-border-inverse: hsla(218, 48%, 10%, 0.2);
+      --f0-border-bold: hsl(0, 0%, 100%);
+      --f0-border-promote: hsla(38, 79%, 45%, 0.4);
+      --f0-border-selected: hsla(184, 92%, 35%, 0.4);
+      --f0-border-selected-bold: hsl(184, 92%, 35%);
+      --f0-border-critical: hsla(4, 61%, 49%, 0.1);
+      --f0-border-critical-bold: hsl(4, 61%, 49%);
+      --f0-border-warning: hsla(24, 69%, 40%, 0.1);
+      --f0-border-warning-bold: hsl(24, 69%, 40%);
+      --f0-border-info: hsla(216, 59%, 55%, 0.1);
+      --f0-border-info-bold: hsl(216, 59%, 55%);
+      --f0-border-positive: hsla(160, 85%, 33%, 0.1);
+      --f0-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%);
+      --f0-icon: hsla(0, 0%, 100%, 0.5);
+      --f0-icon-secondary: hsla(0, 0%, 100%, 0.4);
+      --f0-icon-inverse: hsl(218, 48%, 10%);
+      --f0-icon-bold: hsl(0, 0%, 100%);
+      --f0-icon-critical: hsl(4, 61%, 49%);
+      --f0-icon-critical-bold: hsl(5, 100%, 65%);
+      --f0-icon-accent: hsl(348, 80%, 42%);
+      --f0-icon-info: hsl(216, 59%, 55%);
+      --f0-icon-warning: hsl(24, 69%, 40%);
+      --f0-icon-positive: hsl(160, 85%, 33%);
+      --f0-icon-promote: hsl(38, 79%, 45%);
+      --f0-icon-selected: hsl(184, 96%, 55%);
+      --f0-icon-selected-hover: hsl(184, 96%, 68%);
+      --f0-icon-mood-super-negative: hsl(4, 61%, 49%);
+      --f0-icon-mood-negative: hsl(24, 69%, 40%);
+      --f0-icon-mood-neutral: hsl(38, 79%, 45%);
+      --f0-icon-mood-positive: hsl(160, 85%, 33%);
+      --f0-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%);
+      --f0-special-ring: hsl(184, 92%, 35%);
+      --f0-special-page: hsla(0, 0%, 100%, 0.03);
+      --f0-special-highlight: hsl(348, 80%, 42%);
     }
   }
 }

package/src/styles/tokens/colors.ts

@@ -112,7 +112,7 @@ export const baseColors = {
 
 export type BaseColor = keyof typeof baseColors
 
-export const f1Colors = {
+export const f0Colors = {
   foreground: {
     DEFAULT: "hsl(var(--neutral-100))",
     secondary: "hsl(var(--neutral-50))",
@@ -245,4 +245,4 @@ export const f1Colors = {
   },
 } as const
 
-export type F1Color = keyof typeof f1Colors
+export type F0Color = keyof typeof f0Colors

package/src/ui/avatar.tsx

@@ -106,7 +106,7 @@ const AvatarFallback = ({
   size?: (typeof sizes)[number]
 }) => (
   <Text
-    className={cn("text-f1-foreground-inverse/90", textSizes[size], className)}
+    className={cn("text-f0-foreground-inverse/90", textSizes[size], className)}
     {...props}
   />
 )