@invana/styling 0.0.6 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invana/styling",
-  "version": "0.0.6",
+  "version": "0.0.11",
   "description": "Invana TailwindCSS 4 Design System - Reusable styling configuration",
   "homepage": "https://github.com/invana/design-kit#readme",
   "type": "module",

package/src/index.css

@@ -39,25 +39,27 @@
   --color-ring: hsl(142 70% 43%);
   --color-background: hsl(0 0% 97%);
   --color-foreground: hsl(210 10% 20%);
-  
+
   --color-primary: hsl(142 70% 43%);
   --color-primary-foreground: hsl(0 0% 100%);
-  
+
   --color-secondary: hsl(142 30% 95%);
   --color-secondary-foreground: hsl(142 25% 40%);
-  
+
   --color-destructive: hsl(0 70% 60%);
   --color-destructive-foreground: hsl(0 0% 100%);
-  
+
   --color-muted: hsl(210 6% 90%);
   --color-muted-foreground: hsl(210 8% 45%);
-  
-  --color-accent: hsl(142 70% 43%);
-  --color-accent-foreground: hsl(0 0% 100%);
-  
+
+  /* accent = neutral interactive feedback (hover/focus), NOT brand green.
+     Kept a SOLID color so opacity modifiers (bg-accent/50) still work. */
+  --color-accent: hsl(210 6% 92%);
+  --color-accent-foreground: hsl(210 10% 20%);
+
   --color-popover: hsl(0 0% 98%);
   --color-popover-foreground: hsl(210 10% 20%);
-  
+
   --color-card: hsl(0 0% 100%);
   --color-card-foreground: hsl(210 10% 20%);
 
@@ -73,28 +75,70 @@
   --animate-accordion-up: accordion-up 0.2s ease-out;
 }
 
-/* 
+/*
  * NOTE: Theme-specific color variables are defined in theme files:
  * - themes/default.css
- * - themes/tailwind.css  
+ * - themes/tailwind.css
  * - themes/vite.css
- * 
+ *
  * These files use [data-theme="..."] selectors to apply theme-specific colors.
  * Default fallbacks are handled by the first theme (default-light).
  */
 
+/*
+ * Interactive surface controls.
+ *
+ * Glass mode is opt-in: set `data-glass="true"` on any element (root, a panel
+ * subtree, or a single component) and every descendant that uses the
+ * `--surface-alpha` / `--glass-blur` tokens becomes translucent + blurred.
+ * Defaults below reproduce the current opaque, no-blur rendering exactly.
+ *
+ * The raw HSL triplets mirror default-light so `hsl(var(--token) / <alpha>)`
+ * resolves even when no [data-theme] is applied; theme files override them.
+ */
+:root {
+  --primary: 142 70% 43%;
+  --secondary: 142 30% 95%;
+  --destructive: 0 70% 60%;
+  --background: 0 0% 97%;
+  --accent: 210 6% 92%;
+
+  --surface-alpha: 1; /* opaque → identical to current look */
+  --glass-blur: none; /* no backdrop blur */
+}
+
+[data-glass="true"] {
+  --surface-alpha: 0.6;
+  --glass-blur: blur(12px);
+}
+
+/* Apply on any surface that should frost in glass mode (no-op when off). */
+@utility glassable {
+  backdrop-filter: var(--glass-blur, none);
+  -webkit-backdrop-filter: var(--glass-blur, none);
+}
+
 @keyframes accordion-down {
-  from { height: 0; }
-  to { height: var(--radix-accordion-content-height); }
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
 }
 
 @keyframes accordion-up {
-  from { height: var(--radix-accordion-content-height); }
-  to { height: 0; }
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
 }
 
 /* Base styles */
-html, body {
+html,
+body {
   font-size: 13px;
   font-family: ui-sans-serif, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -109,7 +153,8 @@ body {
   color: var(--color-foreground);
 }
 
-button, a {
+button,
+a {
   cursor: pointer;
 }
 

package/src/themes/default.css

@@ -11,8 +11,8 @@
   --foreground: 210 10% 20%;
   --muted: 210 6% 90%;
   --muted-foreground: 210 8% 45%;
-  --accent: 142 70% 43%;
-  --accent-foreground: 0 0% 100%;
+  --accent: 210 6% 92%;
+  --accent-foreground: 210 10% 20%;
   --popover: 0 0% 98%;
   --popover-foreground: 210 10% 20%;
   --border: 210 6% 85%;
@@ -40,8 +40,8 @@
   --color-secondary-foreground: hsl(142 25% 40%);
   --color-muted: hsl(210 6% 90%);
   --color-muted-foreground: hsl(210 8% 45%);
-  --color-accent: hsl(142 70% 43%);
-  --color-accent-foreground: hsl(0 0% 100%);
+  --color-accent: hsl(210 6% 92%);
+  --color-accent-foreground: hsl(210 10% 20%);
   --color-destructive: hsl(0 70% 60%);
   --color-destructive-foreground: hsl(0 0% 100%);
   --color-border: hsl(210 6% 85%);
@@ -57,8 +57,8 @@
   --foreground: 0 0% 85%;
   --muted: 210 6% 18%;
   --muted-foreground: 210 8% 60%;
-  --accent: 142 70% 43%;
-  --accent-foreground: 210 4% 13%;
+  --accent: 210 6% 22%;
+  --accent-foreground: 0 0% 85%;
   --popover: 210 4% 11%;
   --popover-foreground: 0 0% 85%;
   --border: 210 6% 22%;
@@ -86,8 +86,8 @@
   --color-secondary-foreground: hsl(0 0% 85%);
   --color-muted: hsl(210 6% 18%);
   --color-muted-foreground: hsl(210 8% 60%);
-  --color-accent: hsl(142 70% 43%);
-  --color-accent-foreground: hsl(210 4% 13%);
+  --color-accent: hsl(210 6% 22%);
+  --color-accent-foreground: hsl(0 0% 85%);
   --color-destructive: hsl(0 60% 45%);
   --color-destructive-foreground: hsl(0 0% 95%);
   --color-border: hsl(210 6% 22%);