@nadicodeai/design-system 12.1.102 → 12.1.104

package/dist/css/tokens.css

@@ -188,10 +188,10 @@
     --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
     --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
     --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
-    --nc-dark-material-resting: oklch(0.1448 0.0000 0.00);
-    --nc-dark-material-raised: oklch(0.1448 0.0000 0.00);
-    --nc-dark-material-floating: oklch(0.1448 0.0000 0.00);
-    --nc-dark-material-modal: oklch(0.1776 0.0000 0.00);
+    --nc-dark-material-resting: oklch(0.1543 0.0000 0.00);
+    --nc-dark-material-raised: oklch(0.1776 0.0000 0.00);
+    --nc-dark-material-floating: oklch(0.1957 0.0000 0.00);
+    --nc-dark-material-modal: oklch(0.1957 0.0000 0.00);
     --nc-dark-ink: oklch(0.9461 0.0000 0.00);
     --nc-dark-body: oklch(0.7090 0.0000 0.00);
     --nc-dark-muted: oklch(0.6993 0.0000 0.00);
@@ -351,10 +351,14 @@
     --nc-control-height-lg: 40px;
     --nc-control-height-xs: 24px;
     --nc-control-padding-inline: 12px;
+    --nc-button-padding-inline-sm: 6px;
+    --nc-button-padding-inline: 10px;
+    --nc-button-padding-inline-lg: 14px;
     --nc-card-padding: 20px;
     --nc-touch-target: 44px;
     --nc-rounded-none: 0px;
     --nc-rounded-xs: 2px;
+    --nc-rounded-xs-plus: 4px;
     --nc-rounded-sm: 6px;
     --nc-rounded-md: 8px;
     --nc-rounded-lg: 12px;
@@ -470,7 +474,7 @@
       sans-serif;
     --nc-type-button-lg-font-size: 16px;
     --nc-type-button-lg-font-weight: 500;
-    --nc-type-button-lg-line-height: 20px;
+    --nc-type-button-lg-line-height: 24px;
     --nc-type-button-lg-letter-spacing: 0px;
     --nc-type-button-font-family:
       Geist,
@@ -480,7 +484,7 @@
       sans-serif;
     --nc-type-button-font-size: 14px;
     --nc-type-button-font-weight: 500;
-    --nc-type-button-line-height: 20px;
+    --nc-type-button-line-height: 21px;
     --nc-type-button-letter-spacing: 0px;
     --nc-type-button-xs-font-family:
       Geist,
@@ -660,28 +664,32 @@
     --nc-material-glass-opacity: 60%;
     --nc-material-glass-saturation: 180%;
     --nc-material-glass-blur: 20px;
-    --nc-material-glass-highlight: inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.18);
     --nc-elevation-resting:
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08),
-      0px 2px 2px 0px rgb(0% 0% 0% / 0.04),
-      0px 0px 0px 1px rgb(100% 100% 100%);
+      0px 1px 2px 0px rgb(0% 0% 0% / 0.05),
+      0px 2px 8px -2px rgb(0% 0% 0% / 0.06);
     --nc-elevation-raised:
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08),
-      0px 2px 2px 0px rgb(0% 0% 0% / 0.04),
-      0px 8px 8px -8px rgb(0% 0% 0% / 0.04),
-      0px 0px 0px 1px rgb(100% 100% 100%);
+      0px 1px 2px 0px rgb(0% 0% 0% / 0.06),
+      0px 6px 12px -4px rgb(0% 0% 0% / 0.08),
+      0px 16px 32px -8px rgb(0% 0% 0% / 0.1);
     --nc-elevation-floating:
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08),
-      0px 1px 1px 0px rgb(0% 0% 0% / 0.02),
-      0px 4px 8px -4px rgb(0% 0% 0% / 0.04),
-      0px 16px 24px -8px rgb(0% 0% 0% / 0.06),
-      0px 0px 0px 1px rgb(100% 100% 100%);
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
+      0px 12px 24px -6px rgb(0% 0% 0% / 0.12),
+      0px 32px 64px -16px rgb(0% 0% 0% / 0.16);
     --nc-elevation-modal:
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08),
-      0px 1px 1px 0px rgb(0% 0% 0% / 0.02),
-      0px 8px 16px -4px rgb(0% 0% 0% / 0.04),
-      0px 24px 32px -8px rgb(0% 0% 0% / 0.06),
-      0px 0px 0px 1px rgb(100% 100% 100%);
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
+      0px 24px 48px -12px rgb(0% 0% 0% / 0.18),
+      0px 64px 128px -32px rgb(0% 0% 0% / 0.26);
+    --nc-elevation-glass:
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),
+      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),
+      0px 0px 0px 1px rgb(0% 0% 0% / 0.07),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
+      0px 12px 24px -6px rgb(0% 0% 0% / 0.12),
+      0px 32px 64px -16px rgb(0% 0% 0% / 0.16);
     --nc-duration-control: 100ms;
     --nc-duration-close: 140ms;
     --nc-duration-confirm: 180ms;
@@ -849,24 +857,25 @@
     --nc-category-pink-soft: var(--nc-dark-category-pink-soft);
     --nc-category-pink-deep: var(--nc-dark-category-pink-deep);
     --nc-elevation-resting:
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.145),
-      0px 1px 2px 0px rgb(0% 0% 0% / 0.16),
-      0px 0px 0px 1px rgb(0% 0% 0%);
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.05),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.08),
+      0px 1px 2px 0px rgb(0% 0% 0% / 0.6);
     --nc-elevation-raised:
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.145),
-      0px 2px 2px 0px rgb(0% 0% 0% / 0.2),
-      0px 8px 8px -8px rgb(0% 0% 0% / 0.3),
-      0px 0px 0px 1px rgb(0% 0% 0%);
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.07),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.1),
+      0px 16px 32px -8px rgb(0% 0% 0% / 0.6);
     --nc-elevation-floating:
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.145),
-      0px 4px 8px -4px rgb(0% 0% 0% / 0.4),
-      0px 16px 24px -8px rgb(0% 0% 0% / 0.5),
-      0px 0px 0px 1px rgb(0% 0% 0%);
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.09),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.12),
+      0px 32px 64px -16px rgb(0% 0% 0% / 0.7);
     --nc-elevation-modal:
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.145),
-      0px 8px 16px -4px rgb(0% 0% 0% / 0.4),
-      0px 24px 32px -8px rgb(0% 0% 0% / 0.55),
-      0px 0px 0px 1px rgb(0% 0% 0%);
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.14),
+      0px 64px 128px -32px rgb(0% 0% 0% / 0.8);
+    --nc-elevation-glass:
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.12),
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.12),
+      0px 32px 64px -16px rgb(0% 0% 0% / 0.7);
   }
 }
 

package/dist/tailwind/nadicode.tailwind.json

@@ -149,10 +149,10 @@
         "dark-canvas-soft-2": "#1a1a1a",
         "dark-material-workspace": "#000000",
         "dark-material-solid": "#000000",
-        "dark-material-resting": "#0a0a0a",
-        "dark-material-raised": "#0a0a0a",
-        "dark-material-floating": "#0a0a0a",
-        "dark-material-modal": "#111111",
+        "dark-material-resting": "#0c0c0c",
+        "dark-material-raised": "#111111",
+        "dark-material-floating": "#151515",
+        "dark-material-modal": "#151515",
         "dark-ink": "#ededed",
         "dark-body": "#a1a1a1",
         "dark-muted": "#9e9e9e",
@@ -465,7 +465,7 @@
         "button-lg": [
           "16px",
           {
-            "lineHeight": "20px",
+            "lineHeight": "24px",
             "letterSpacing": "0px",
             "fontWeight": "500"
           }
@@ -473,7 +473,7 @@
         "button": [
           "14px",
           {
-            "lineHeight": "20px",
+            "lineHeight": "21px",
             "letterSpacing": "0px",
             "fontWeight": "500"
           }
@@ -618,6 +618,7 @@
       "borderRadius": {
         "none": "0px",
         "xs": "2px",
+        "xs-plus": "4px",
         "sm": "6px",
         "md": "8px",
         "lg": "12px",
@@ -648,6 +649,9 @@
         "control-height-lg": "40px",
         "control-height-xs": "24px",
         "control-padding-inline": "12px",
+        "button-padding-inline-sm": "6px",
+        "button-padding-inline": "10px",
+        "button-padding-inline-lg": "14px",
         "card-padding": "20px",
         "touch-target": "44px"
       }