panelui-native 0.1.0 → 0.4.0

package/theme.css

@@ -1,143 +1,481 @@
 /*
  * PanelUI theme — Coss UI design tokens, translated for React Native.
  * Source of truth: cosscom/coss packages/ui/src/styles/globals.css
- * (color-mix()/--alpha() expressions are precomputed to static values,
- * since they must resolve at runtime on native.)
+ * (color-mix()/--alpha() expressions precomputed to static values.)
+ *
+ * Structured the way Uniwind expects themed tokens (see uniwind's own
+ * test.css / expo-example): utility names declared in @theme, per-theme
+ * values defined with @variant blocks inside :root.
  *
  * Usage (in your app's global.css):
  *   @import 'tailwindcss';
  *   @import 'uniwind';
  *   @import 'panelui-native/theme.css';
- *   @source '../node_modules/panelui-native/src';
+ *   @source './node_modules/panelui-native/src';
  */
 
-:root {
-  /* --background: white */
-  --background: #ffffff;
-  /* --foreground: neutral-800 */
-  --foreground: #262626;
+@theme {
+  --color-background: unset;
+  --color-foreground: unset;
+  --color-card: unset;
+  --color-card-foreground: unset;
+  --color-popover: unset;
+  --color-popover-foreground: unset;
+  --color-primary: unset;
+  --color-primary-foreground: unset;
+  --color-secondary: unset;
+  --color-secondary-foreground: unset;
+  --color-muted: unset;
+  --color-muted-foreground: unset;
+  --color-accent: unset;
+  --color-accent-foreground: unset;
+  --color-destructive: unset;
+  --color-destructive-foreground: unset;
+  --color-info: unset;
+  --color-info-foreground: unset;
+  --color-success: unset;
+  --color-success-foreground: unset;
+  --color-warning: unset;
+  --color-warning-foreground: unset;
+  --color-border: unset;
+  --color-input: unset;
+  --color-ring: unset;
+  --color-surface: unset;
+  --color-skeleton: unset;
 
-  --card: #ffffff;
-  --card-foreground: #262626;
+  /*
+   * Tinted status fills. These exist as real tokens rather than `bg-info/10
+   * dark:bg-info/[0.06]` because `dark:` only resolves in the light/dark
+   * themes — inside a named theme (moon, grass) Uniwind compiles it to a
+   * plain class selector that never matches, so the tint would vanish.
+   * `-soft` is the Alert fill, `-subtle` the lighter Badge fill.
+   */
+  --color-info-soft: unset;
+  --color-info-subtle: unset;
+  --color-success-soft: unset;
+  --color-success-subtle: unset;
+  --color-warning-soft: unset;
+  --color-warning-subtle: unset;
+  --color-destructive-soft: unset;
+  --color-destructive-subtle: unset;
 
-  --popover: #ffffff;
-  --popover-foreground: #262626;
+  /*
+   * Radius scale. Themed rather than static: a theme is a shape as well as a
+   * palette, so each family sets its own corner rounding. --radius-3xl is
+   * declared here because rounded-3xl / rounded-t-3xl are both in use and
+   * would otherwise silently fall through to Tailwind's default.
+   */
+  --radius-xs: unset;
+  --radius-sm: unset;
+  --radius-md: unset;
+  --radius-lg: unset;
+  --radius-xl: unset;
+  --radius-2xl: unset;
+  --radius-3xl: unset;
+}
 
-  /* --primary: neutral-800 / neutral-50 */
-  --primary: #262626;
-  --primary-foreground: #fafafa;
+@layer theme {
+  :root {
+    @variant light {
+      --color-background: #ffffff;
+      /* neutral-800 */
+      --color-foreground: #262626;
 
-  /* --secondary/muted/accent: black at 4% */
-  --secondary: rgba(0, 0, 0, 0.04);
-  --secondary-foreground: #262626;
+      --color-card: #ffffff;
+      --color-card-foreground: #262626;
 
-  --muted: rgba(0, 0, 0, 0.04);
-  /* color-mix(neutral-500 90%, black) */
-  --muted-foreground: #686868;
+      --color-popover: #ffffff;
+      --color-popover-foreground: #262626;
 
-  --accent: rgba(0, 0, 0, 0.04);
-  --accent-foreground: #262626;
+      --color-primary: #262626;
+      --color-primary-foreground: #fafafa;
 
-  /* status: {hue}-500 with {hue}-700 foreground (for text on tints) */
-  --destructive: #ef4444;
-  --destructive-foreground: #b91c1c;
+      /* secondary/muted/accent: black at 4% */
+      --color-secondary: rgba(0, 0, 0, 0.06);
+      --color-secondary-foreground: #262626;
 
-  --info: #3b82f6;
-  --info-foreground: #1d4ed8;
+      --color-muted: rgba(0, 0, 0, 0.06);
+      /* color-mix(neutral-500 90%, black) */
+      --color-muted-foreground: #686868;
 
-  --success: #10b981;
-  --success-foreground: #047857;
+      --color-accent: rgba(0, 0, 0, 0.06);
+      --color-accent-foreground: #262626;
 
-  --warning: #f59e0b;
-  --warning-foreground: #b45309;
+      /* status: {hue}-500, foreground {hue}-700 */
+      --color-destructive: #ef4444;
+      --color-destructive-foreground: #b91c1c;
 
-  /* --border: black 8%, --input: black 10% */
-  --border: rgba(0, 0, 0, 0.08);
-  --input: rgba(0, 0, 0, 0.1);
-  /* --ring: neutral-400 */
-  --ring: #a3a3a3;
-}
+      --color-info: #3b82f6;
+      --color-info-foreground: #1d4ed8;
 
-.dark {
-  /* color-mix(neutral-950 96%, white) */
-  --background: #141414;
-  /* neutral-100 */
-  --foreground: #f5f5f5;
+      --color-success: #10b981;
+      --color-success-foreground: #047857;
 
-  /* color-mix(background 98%, white) */
-  --card: #191919;
-  --card-foreground: #f5f5f5;
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #b45309;
 
-  /* color-mix(background 96%, white) */
-  --popover: #1d1d1d;
-  --popover-foreground: #f5f5f5;
+      /* border: black 8%, input: black 10% */
+      --color-border: rgba(0, 0, 0, 0.08);
+      --color-input: rgba(0, 0, 0, 0.1);
+      /* neutral-400 */
+      --color-ring: #a3a3a3;
 
-  --primary: #f5f5f5;
-  --primary-foreground: #262626;
+      /* grouping surface (Frame) and skeleton fill */
+      --color-surface: #f7f7f7;
+      --color-skeleton: rgba(0, 0, 0, 0.1);
 
-  /* --secondary/muted/accent: white at 4% */
-  --secondary: rgba(255, 255, 255, 0.04);
-  --secondary-foreground: #f5f5f5;
+      /* status fills: -soft = Alert (10%), -subtle = Badge (8%) */
+      --color-info-soft: rgba(59, 130, 246, 0.1);
+      --color-info-subtle: rgba(59, 130, 246, 0.08);
+      --color-success-soft: rgba(16, 185, 129, 0.1);
+      --color-success-subtle: rgba(16, 185, 129, 0.08);
+      --color-warning-soft: rgba(245, 158, 11, 0.1);
+      --color-warning-subtle: rgba(245, 158, 11, 0.08);
+      --color-destructive-soft: rgba(239, 68, 68, 0.1);
+      --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+    
+      /* Panel shape scale */
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 10px;
+      --radius-xl: 14px;
+      --radius-2xl: 16px;
+      --radius-3xl: 24px;
+    }
 
-  --muted: rgba(255, 255, 255, 0.04);
-  /* color-mix(neutral-500 90%, white) */
-  --muted-foreground: #818181;
+    @variant dark {
+      /* color-mix(neutral-950 96%, white) */
+      --color-background: #141414;
+      /* neutral-100 */
+      --color-foreground: #f5f5f5;
 
-  --accent: rgba(255, 255, 255, 0.04);
-  --accent-foreground: #f5f5f5;
+      /* color-mix(background 98%, white) */
+      --color-card: #191919;
+      --color-card-foreground: #f5f5f5;
 
-  /* destructive: color-mix(red-500 90%, white); foreground: {hue}-400 */
-  --destructive: #f15757;
-  --destructive-foreground: #f87171;
+      /* color-mix(background 96%, white) */
+      --color-popover: #1d1d1d;
+      --color-popover-foreground: #f5f5f5;
 
-  --info: #3b82f6;
-  --info-foreground: #60a5fa;
+      --color-primary: #f5f5f5;
+      --color-primary-foreground: #262626;
 
-  --success: #10b981;
-  --success-foreground: #34d399;
+      /* secondary/muted/accent: white at 4% */
+      --color-secondary: rgba(255, 255, 255, 0.08);
+      --color-secondary-foreground: #f5f5f5;
 
-  --warning: #f59e0b;
-  --warning-foreground: #fbbf24;
+      --color-muted: rgba(255, 255, 255, 0.08);
+      /* color-mix(neutral-500 90%, white) */
+      --color-muted-foreground: #818181;
 
-  /* --border: white 6%, --input: white 8% */
-  --border: rgba(255, 255, 255, 0.06);
-  --input: rgba(255, 255, 255, 0.08);
-  /* --ring: neutral-500 */
-  --ring: #737373;
-}
+      --color-accent: rgba(255, 255, 255, 0.08);
+      --color-accent-foreground: #f5f5f5;
+
+      /* color-mix(red-500 90%, white), foreground {hue}-400 */
+      --color-destructive: #f15757;
+      --color-destructive-foreground: #f87171;
+
+      --color-info: #3b82f6;
+      --color-info-foreground: #60a5fa;
+
+      --color-success: #10b981;
+      --color-success-foreground: #34d399;
+
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #fbbf24;
+
+      /* border: white 6%, input: white 8% */
+      --color-border: rgba(255, 255, 255, 0.06);
+      --color-input: rgba(255, 255, 255, 0.08);
+      /* neutral-500 */
+      --color-ring: #737373;
+
+      /* grouping surface (Frame) and skeleton fill */
+      --color-surface: #1c1c1c;
+      --color-skeleton: rgba(255, 255, 255, 0.13);
+
+      /* status fills: -soft = Alert (6%), -subtle = Badge (16%) */
+      --color-info-soft: rgba(59, 130, 246, 0.06);
+      --color-info-subtle: rgba(59, 130, 246, 0.16);
+      --color-success-soft: rgba(16, 185, 129, 0.06);
+      --color-success-subtle: rgba(16, 185, 129, 0.16);
+      --color-warning-soft: rgba(245, 158, 11, 0.06);
+      --color-warning-subtle: rgba(245, 158, 11, 0.16);
+      --color-destructive-soft: rgba(241, 87, 87, 0.06);
+      --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+    
+      /* Panel shape scale */
+      --radius-xs: 4px;
+      --radius-sm: 6px;
+      --radius-md: 8px;
+      --radius-lg: 10px;
+      --radius-xl: 14px;
+      --radius-2xl: 16px;
+      --radius-3xl: 24px;
+    }
+
+    /*
+     * Named themes.
+     *
+     * Uniwind only gives `light` and `dark` prefers-color-scheme handling;
+     * every other theme compiles to a plain class selector. That means a
+     * named theme cannot adapt on its own, so each brand ships as a
+     * light/dark pair and the app switches between them explicitly (see
+     * `useThemeMode()`).
+     *
+     * Register them in your metro config or setTheme() will throw:
+     *   withUniwindConfig(config, {
+     *     extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+     *   })
+     *
+     * Every theme must define every token — Uniwind fails the build with
+     * "All themes must have the same variables" otherwise.
+     */
+
+    /* Moon — monochrome and high-contrast: pure black/white, electric blue accent,
+       hairline borders, tight corners. */
+    @variant moon {
+      --color-background: #ffffff;
+      --color-foreground: #171717;
+
+      --color-card: #ffffff;
+      --color-card-foreground: #171717;
+
+      --color-popover: #ffffff;
+      --color-popover-foreground: #171717;
+
+      --color-primary: #171717;
+      --color-primary-foreground: #ffffff;
+
+      --color-secondary: rgba(0, 0, 0, 0.05);
+      --color-secondary-foreground: #171717;
+
+      --color-muted: rgba(0, 0, 0, 0.05);
+      --color-muted-foreground: #666666;
+
+      --color-accent: rgba(0, 0, 0, 0.05);
+      --color-accent-foreground: #171717;
+
+      --color-destructive: #e5484d;
+      --color-destructive-foreground: #c62b30;
+
+      --color-info: #0070f3;
+      --color-info-foreground: #0060d1;
+
+      --color-success: #45a557;
+      --color-success-foreground: #297c3b;
+
+      --color-warning: #f5a623;
+      --color-warning-foreground: #a35200;
+
+      --color-border: rgba(0, 0, 0, 0.09);
+      --color-input: rgba(0, 0, 0, 0.12);
+      --color-ring: #171717;
+
+      --color-surface: #fafafa;
+      --color-skeleton: rgba(0, 0, 0, 0.08);
+
+      --color-info-soft: rgba(0, 112, 243, 0.08);
+      --color-info-subtle: rgba(0, 112, 243, 0.06);
+      --color-success-soft: rgba(69, 165, 87, 0.1);
+      --color-success-subtle: rgba(69, 165, 87, 0.08);
+      --color-warning-soft: rgba(245, 166, 35, 0.1);
+      --color-warning-subtle: rgba(245, 166, 35, 0.08);
+      --color-destructive-soft: rgba(229, 72, 77, 0.1);
+      --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+    
+      /* Moon shape scale */
+      --radius-xs: 2px;
+      --radius-sm: 4px;
+      --radius-md: 5px;
+      --radius-lg: 6px;
+      --radius-xl: 8px;
+      --radius-2xl: 10px;
+      --radius-3xl: 14px;
+    }
+
+    @variant moon-dark {
+      --color-background: #000000;
+      --color-foreground: #ededed;
+
+      --color-card: #0a0a0a;
+      --color-card-foreground: #ededed;
+
+      --color-popover: #101010;
+      --color-popover-foreground: #ededed;
+
+      --color-primary: #ededed;
+      --color-primary-foreground: #0a0a0a;
+
+      --color-secondary: rgba(255, 255, 255, 0.09);
+      --color-secondary-foreground: #ededed;
+
+      --color-muted: rgba(255, 255, 255, 0.09);
+      --color-muted-foreground: #a1a1a1;
+
+      --color-accent: rgba(255, 255, 255, 0.09);
+      --color-accent-foreground: #ededed;
+
+      --color-destructive: #e5484d;
+      --color-destructive-foreground: #ff6369;
+
+      --color-info: #0070f3;
+      --color-info-foreground: #52a8ff;
+
+      --color-success: #45a557;
+      --color-success-foreground: #62c073;
+
+      --color-warning: #f5a623;
+      --color-warning-foreground: #f1a10d;
+
+      --color-border: rgba(255, 255, 255, 0.09);
+      --color-input: rgba(255, 255, 255, 0.14);
+      --color-ring: #ededed;
+
+      --color-surface: #0f0f0f;
+      --color-skeleton: rgba(255, 255, 255, 0.11);
+
+      --color-info-soft: rgba(0, 112, 243, 0.12);
+      --color-info-subtle: rgba(0, 112, 243, 0.18);
+      --color-success-soft: rgba(69, 165, 87, 0.1);
+      --color-success-subtle: rgba(69, 165, 87, 0.16);
+      --color-warning-soft: rgba(245, 166, 35, 0.1);
+      --color-warning-subtle: rgba(245, 166, 35, 0.16);
+      --color-destructive-soft: rgba(229, 72, 77, 0.1);
+      --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+    
+      /* Moon shape scale */
+      --radius-xs: 2px;
+      --radius-sm: 4px;
+      --radius-md: 5px;
+      --radius-lg: 6px;
+      --radius-xl: 8px;
+      --radius-2xl: 10px;
+      --radius-3xl: 14px;
+    }
+
+    /* Grass — green accent on warm-neutral greys, with soft generous corners. */
+    @variant grass {
+      --color-background: #ffffff;
+      --color-foreground: #171717;
+
+      --color-card: #ffffff;
+      --color-card-foreground: #171717;
+
+      --color-popover: #ffffff;
+      --color-popover-foreground: #171717;
+
+      /* Brand green is too light for white text; light mode uses the
+         darker ramp step so the contrast ratio holds. */
+      --color-primary: #24b47e;
+      --color-primary-foreground: #ffffff;
+
+      --color-secondary: rgba(0, 0, 0, 0.05);
+      --color-secondary-foreground: #171717;
+
+      --color-muted: rgba(0, 0, 0, 0.05);
+      --color-muted-foreground: #707070;
+
+      --color-accent: rgba(62, 207, 142, 0.1);
+      --color-accent-foreground: #16794c;
+
+      --color-destructive: #ef4444;
+      --color-destructive-foreground: #b91c1c;
+
+      --color-info: #3b82f6;
+      --color-info-foreground: #1d4ed8;
+
+      --color-success: #24b47e;
+      --color-success-foreground: #16794c;
+
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #b45309;
+
+      --color-border: rgba(0, 0, 0, 0.08);
+      --color-input: rgba(0, 0, 0, 0.1);
+      --color-ring: #3ecf8e;
+
+      --color-surface: #f8f9fa;
+      --color-skeleton: rgba(0, 0, 0, 0.08);
+
+      --color-info-soft: rgba(59, 130, 246, 0.1);
+      --color-info-subtle: rgba(59, 130, 246, 0.08);
+      --color-success-soft: rgba(36, 180, 126, 0.1);
+      --color-success-subtle: rgba(36, 180, 126, 0.08);
+      --color-warning-soft: rgba(245, 158, 11, 0.1);
+      --color-warning-subtle: rgba(245, 158, 11, 0.08);
+      --color-destructive-soft: rgba(239, 68, 68, 0.1);
+      --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+    
+      /* Grass shape scale */
+      --radius-xs: 6px;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 14px;
+      --radius-xl: 18px;
+      --radius-2xl: 22px;
+      --radius-3xl: 28px;
+    }
+
+    @variant grass-dark {
+      --color-background: #1c1c1c;
+      --color-foreground: #ededed;
+
+      --color-card: #1f1f1f;
+      --color-card-foreground: #ededed;
+
+      --color-popover: #232323;
+      --color-popover-foreground: #ededed;
+
+      --color-primary: #3ecf8e;
+      --color-primary-foreground: #052e1b;
+
+      --color-secondary: rgba(255, 255, 255, 0.07);
+      --color-secondary-foreground: #ededed;
+
+      --color-muted: rgba(255, 255, 255, 0.07);
+      --color-muted-foreground: #8f8f8f;
+
+      --color-accent: rgba(62, 207, 142, 0.12);
+      --color-accent-foreground: #3ecf8e;
+
+      --color-destructive: #f15757;
+      --color-destructive-foreground: #f87171;
+
+      --color-info: #3b82f6;
+      --color-info-foreground: #60a5fa;
+
+      --color-success: #3ecf8e;
+      --color-success-foreground: #4ade80;
+
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #fbbf24;
+
+      --color-border: rgba(255, 255, 255, 0.07);
+      --color-input: rgba(255, 255, 255, 0.1);
+      --color-ring: #3ecf8e;
+
+      --color-surface: #242424;
+      --color-skeleton: rgba(255, 255, 255, 0.11);
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Coss radius scale: --radius: 0.625rem (10px) */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 10px;
-  --radius-xl: 14px;
-  --radius-2xl: 20px;
+      --color-info-soft: rgba(59, 130, 246, 0.08);
+      --color-info-subtle: rgba(59, 130, 246, 0.16);
+      --color-success-soft: rgba(62, 207, 142, 0.08);
+      --color-success-subtle: rgba(62, 207, 142, 0.16);
+      --color-warning-soft: rgba(245, 158, 11, 0.08);
+      --color-warning-subtle: rgba(245, 158, 11, 0.16);
+      --color-destructive-soft: rgba(241, 87, 87, 0.08);
+      --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+    
+      /* Grass shape scale */
+      --radius-xs: 6px;
+      --radius-sm: 8px;
+      --radius-md: 12px;
+      --radius-lg: 14px;
+      --radius-xl: 18px;
+      --radius-2xl: 22px;
+      --radius-3xl: 28px;
+    }
+  }
 }