panelui-native 0.1.0 → 0.2.0

package/theme.css

@@ -1,143 +1,158 @@
 /*
  * 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;
+  /* Coss radius scale: --radius: 0.625rem (10px) */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 16px;
+}
 
-  --popover: #ffffff;
-  --popover-foreground: #262626;
+@layer theme {
+  :root {
+    @variant light {
+      --color-background: #ffffff;
+      /* neutral-800 */
+      --color-foreground: #262626;
 
-  /* --primary: neutral-800 / neutral-50 */
-  --primary: #262626;
-  --primary-foreground: #fafafa;
+      --color-card: #ffffff;
+      --color-card-foreground: #262626;
 
-  /* --secondary/muted/accent: black at 4% */
-  --secondary: rgba(0, 0, 0, 0.04);
-  --secondary-foreground: #262626;
+      --color-popover: #ffffff;
+      --color-popover-foreground: #262626;
 
-  --muted: rgba(0, 0, 0, 0.04);
-  /* color-mix(neutral-500 90%, black) */
-  --muted-foreground: #686868;
+      --color-primary: #262626;
+      --color-primary-foreground: #fafafa;
 
-  --accent: rgba(0, 0, 0, 0.04);
-  --accent-foreground: #262626;
+      /* secondary/muted/accent: black at 4% */
+      --color-secondary: rgba(0, 0, 0, 0.06);
+      --color-secondary-foreground: #262626;
 
-  /* status: {hue}-500 with {hue}-700 foreground (for text on tints) */
-  --destructive: #ef4444;
-  --destructive-foreground: #b91c1c;
+      --color-muted: rgba(0, 0, 0, 0.06);
+      /* color-mix(neutral-500 90%, black) */
+      --color-muted-foreground: #686868;
 
-  --info: #3b82f6;
-  --info-foreground: #1d4ed8;
+      --color-accent: rgba(0, 0, 0, 0.06);
+      --color-accent-foreground: #262626;
 
-  --success: #10b981;
-  --success-foreground: #047857;
+      /* status: {hue}-500, foreground {hue}-700 */
+      --color-destructive: #ef4444;
+      --color-destructive-foreground: #b91c1c;
 
-  --warning: #f59e0b;
-  --warning-foreground: #b45309;
+      --color-info: #3b82f6;
+      --color-info-foreground: #1d4ed8;
 
-  /* --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-success: #10b981;
+      --color-success-foreground: #047857;
 
-.dark {
-  /* color-mix(neutral-950 96%, white) */
-  --background: #141414;
-  /* neutral-100 */
-  --foreground: #f5f5f5;
+      --color-warning: #f59e0b;
+      --color-warning-foreground: #b45309;
 
-  /* color-mix(background 98%, white) */
-  --card: #191919;
-  --card-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;
 
-  /* color-mix(background 96%, white) */
-  --popover: #1d1d1d;
-  --popover-foreground: #f5f5f5;
+      /* grouping surface (Frame) and skeleton fill */
+      --color-surface: #f7f7f7;
+      --color-skeleton: rgba(0, 0, 0, 0.1);
+    }
 
-  --primary: #f5f5f5;
-  --primary-foreground: #262626;
+    @variant dark {
+      /* color-mix(neutral-950 96%, white) */
+      --color-background: #141414;
+      /* neutral-100 */
+      --color-foreground: #f5f5f5;
 
-  /* --secondary/muted/accent: white at 4% */
-  --secondary: rgba(255, 255, 255, 0.04);
-  --secondary-foreground: #f5f5f5;
+      /* color-mix(background 98%, white) */
+      --color-card: #191919;
+      --color-card-foreground: #f5f5f5;
 
-  --muted: rgba(255, 255, 255, 0.04);
-  /* color-mix(neutral-500 90%, white) */
-  --muted-foreground: #818181;
+      /* color-mix(background 96%, white) */
+      --color-popover: #1d1d1d;
+      --color-popover-foreground: #f5f5f5;
 
-  --accent: rgba(255, 255, 255, 0.04);
-  --accent-foreground: #f5f5f5;
+      --color-primary: #f5f5f5;
+      --color-primary-foreground: #262626;
 
-  /* destructive: color-mix(red-500 90%, white); foreground: {hue}-400 */
-  --destructive: #f15757;
-  --destructive-foreground: #f87171;
+      /* secondary/muted/accent: white at 4% */
+      --color-secondary: rgba(255, 255, 255, 0.08);
+      --color-secondary-foreground: #f5f5f5;
 
-  --info: #3b82f6;
-  --info-foreground: #60a5fa;
+      --color-muted: rgba(255, 255, 255, 0.08);
+      /* color-mix(neutral-500 90%, white) */
+      --color-muted-foreground: #818181;
 
-  --success: #10b981;
-  --success-foreground: #34d399;
+      --color-accent: rgba(255, 255, 255, 0.08);
+      --color-accent-foreground: #f5f5f5;
 
-  --warning: #f59e0b;
-  --warning-foreground: #fbbf24;
+      /* color-mix(red-500 90%, white), foreground {hue}-400 */
+      --color-destructive: #f15757;
+      --color-destructive-foreground: #f87171;
 
-  /* --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-info: #3b82f6;
+      --color-info-foreground: #60a5fa;
 
-@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);
+      --color-success: #10b981;
+      --color-success-foreground: #34d399;
 
-  /* 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-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);
+    }
+  }
 }