@neuravision/construct 2.0.3 → 2.1.1

package/tokens/tokens.js

@@ -1,4 +1,18 @@
-/* Generated by design/scripts/build-tokens.mjs. Do not edit directly. */
+/* Generated by scripts/build-tokens.mjs. Do not edit directly. */
+
+export const tokenMetadata = {
+  "formatVersion": 1,
+  "layers": [
+    "primitives",
+    "semantic",
+    "components"
+  ],
+  "themes": [
+    "light",
+    "dark",
+    "high-contrast"
+  ]
+};
 
 export const primitives = {
   "color": {
@@ -127,6 +141,7 @@ export const primitives = {
       "extrabold": "800"
     },
     "size": {
+      "2xs": "10px",
       "xs": "12px",
       "sm": "14px",
       "md": "16px",
@@ -139,6 +154,7 @@ export const primitives = {
       "6xl": "48px"
     },
     "lineHeight": {
+      "2xs": "14px",
       "xs": "16px",
       "sm": "20px",
       "md": "24px",
@@ -274,8 +290,8 @@ export const semantic = {
       "primaryHover": "#353128",
       "primaryActive": "#211E18",
       "accent": "#F4581C",
-      "accentHover": "#DD4A0F",
-      "accentActive": "#B23C0C",
+      "accentHover": "#FB6E2E",
+      "accentActive": "#FF9462",
       "onAccent": "#16130F"
     },
     "text": {
@@ -289,17 +305,19 @@ export const semantic = {
       "canvas": "#FAFAF8",
       "surface": "#F1F0EB",
       "elevated": "#FFFFFF",
-      "muted": "#E4E2DB"
+      "muted": "#E4E2DB",
+      "subtle": "#F1F0EB"
     },
     "border": {
       "subtle": "#E4E2DB",
-      "default": "#D3D0C7",
-      "strong": "#8E887A"
+      "default": "#8E887A",
+      "strong": "#8E887A",
+      "muted": "#E4E2DB"
     },
     "state": {
       "info": "#1F5BA6",
-      "success": "#2EA070",
-      "warning": "#C8930A",
+      "success": "#1B6145",
+      "warning": "#694B00",
       "danger": "#BE1F3D",
       "onSolid": "#FFFFFF"
     },
@@ -444,6 +462,61 @@ export const semantic = {
   }
 };
 
+export const components = {
+  "button": {
+    "background": "#16130F",
+    "backgroundHover": "#353128",
+    "backgroundActive": "#211E18",
+    "border": "#16130F",
+    "color": "#FFFFFF",
+    "height": "40px",
+    "paddingX": "16px",
+    "fontSize": "14px",
+    "lineHeight": "20px",
+    "fontWeight": "600",
+    "radius": "8px",
+    "gap": "6px",
+    "loadingSpinnerSize": "20px"
+  },
+  "control": {
+    "background": "#FFFFFF",
+    "backgroundHover": "#F1F0EB",
+    "backgroundDisabled": "#E4E2DB",
+    "border": "#8E887A",
+    "borderHover": "#8E887A",
+    "borderFocus": "#DD4A0F",
+    "text": "#16130F",
+    "placeholder": "#66604E",
+    "radius": "8px"
+  },
+  "card": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "padding": "16px",
+    "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+    "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+  },
+  "status": {
+    "gap": "4px",
+    "fontSize": "14px",
+    "iconSize": "16px"
+  },
+  "metric": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "padding": "16px",
+    "valueFontSize": "24px",
+    "labelFontSize": "14px"
+  },
+  "meter": {
+    "height": "6px",
+    "radius": "999px",
+    "track": "#E4E2DB"
+  }
+};
+
 export const semanticThemes = {
   "light": {
     "color": {
@@ -452,8 +525,8 @@ export const semanticThemes = {
         "primaryHover": "#353128",
         "primaryActive": "#211E18",
         "accent": "#F4581C",
-        "accentHover": "#DD4A0F",
-        "accentActive": "#B23C0C",
+        "accentHover": "#FB6E2E",
+        "accentActive": "#FF9462",
         "onAccent": "#16130F"
       },
       "text": {
@@ -467,17 +540,19 @@ export const semanticThemes = {
         "canvas": "#FAFAF8",
         "surface": "#F1F0EB",
         "elevated": "#FFFFFF",
-        "muted": "#E4E2DB"
+        "muted": "#E4E2DB",
+        "subtle": "#F1F0EB"
       },
       "border": {
         "subtle": "#E4E2DB",
-        "default": "#D3D0C7",
-        "strong": "#8E887A"
+        "default": "#8E887A",
+        "strong": "#8E887A",
+        "muted": "#E4E2DB"
       },
       "state": {
         "info": "#1F5BA6",
-        "success": "#2EA070",
-        "warning": "#C8930A",
+        "success": "#1B6145",
+        "warning": "#694B00",
         "danger": "#BE1F3D",
         "onSolid": "#FFFFFF"
       },
@@ -635,7 +710,7 @@ export const semanticThemes = {
       "text": {
         "primary": "#FFFFFF",
         "secondary": "#E4E2DB",
-        "muted": "#B4AFA1",
+        "muted": "#D3D0C7",
         "inverse": "#FFFFFF",
         "onPrimary": "#16130F"
       },
@@ -643,12 +718,14 @@ export const semanticThemes = {
         "canvas": "#16130F",
         "surface": "#353128",
         "elevated": "#4B473E",
-        "muted": "#211E18"
+        "muted": "#211E18",
+        "subtle": "#353128"
       },
       "border": {
         "subtle": "#4B473E",
-        "default": "#66604E",
-        "strong": "#8E887A"
+        "default": "#B4AFA1",
+        "strong": "#8E887A",
+        "muted": "#4B473E"
       },
       "state": {
         "info": "#76A6DC",
@@ -805,7 +882,7 @@ export const semanticThemes = {
         "primaryActive": "#353128",
         "accent": "#B23C0C",
         "accentHover": "#882D09",
-        "accentActive": "#DD4A0F",
+        "accentActive": "#5C1E06",
         "onAccent": "#FFFFFF"
       },
       "text": {
@@ -819,12 +896,14 @@ export const semanticThemes = {
         "canvas": "#FFFFFF",
         "surface": "#FFFFFF",
         "elevated": "#FFFFFF",
-        "muted": "#FAFAF8"
+        "muted": "#FAFAF8",
+        "subtle": "#FFFFFF"
       },
       "border": {
         "subtle": "#B4AFA1",
         "default": "#4B473E",
-        "strong": "#16130F"
+        "strong": "#16130F",
+        "muted": "#B4AFA1"
       },
       "state": {
         "info": "#123356",
@@ -975,6 +1054,171 @@ export const semanticThemes = {
   }
 };
 
+export const componentThemes = {
+  "light": {
+    "button": {
+      "background": "#16130F",
+      "backgroundHover": "#353128",
+      "backgroundActive": "#211E18",
+      "border": "#16130F",
+      "color": "#FFFFFF",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#FFFFFF",
+      "backgroundHover": "#F1F0EB",
+      "backgroundDisabled": "#E4E2DB",
+      "border": "#8E887A",
+      "borderHover": "#8E887A",
+      "borderFocus": "#DD4A0F",
+      "text": "#16130F",
+      "placeholder": "#66604E",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "14px",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "24px",
+      "labelFontSize": "14px"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#E4E2DB"
+    }
+  },
+  "dark": {
+    "button": {
+      "background": "#F1F0EB",
+      "backgroundHover": "#FFFFFF",
+      "backgroundActive": "#E4E2DB",
+      "border": "#F1F0EB",
+      "color": "#16130F",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#4B473E",
+      "backgroundHover": "#353128",
+      "backgroundDisabled": "#211E18",
+      "border": "#B4AFA1",
+      "borderHover": "#8E887A",
+      "borderFocus": "#FB6E2E",
+      "text": "#FFFFFF",
+      "placeholder": "#D3D0C7",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#4B473E",
+      "border": "#4B473E",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "14px",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#4B473E",
+      "border": "#4B473E",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "24px",
+      "labelFontSize": "14px"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#211E18"
+    }
+  },
+  "highContrast": {
+    "button": {
+      "background": "#16130F",
+      "backgroundHover": "#211E18",
+      "backgroundActive": "#353128",
+      "border": "#16130F",
+      "color": "#FFFFFF",
+      "height": "40px",
+      "paddingX": "16px",
+      "fontSize": "14px",
+      "lineHeight": "20px",
+      "fontWeight": "600",
+      "radius": "8px",
+      "gap": "6px",
+      "loadingSpinnerSize": "20px"
+    },
+    "control": {
+      "background": "#FFFFFF",
+      "backgroundHover": "#FFFFFF",
+      "backgroundDisabled": "#FAFAF8",
+      "border": "#4B473E",
+      "borderHover": "#16130F",
+      "borderFocus": "#B23C0C",
+      "text": "#16130F",
+      "placeholder": "#4B473E",
+      "radius": "8px"
+    },
+    "card": {
+      "background": "#FFFFFF",
+      "border": "#B4AFA1",
+      "radius": "12px",
+      "padding": "16px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
+      "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
+    },
+    "status": {
+      "gap": "4px",
+      "fontSize": "14px",
+      "iconSize": "16px"
+    },
+    "metric": {
+      "background": "#FFFFFF",
+      "border": "#B4AFA1",
+      "radius": "12px",
+      "padding": "16px",
+      "valueFontSize": "24px",
+      "labelFontSize": "14px"
+    },
+    "meter": {
+      "height": "6px",
+      "radius": "999px",
+      "track": "#FAFAF8"
+    }
+  }
+};
+
 export const cssVars = {
   "primitives": {
     "color": {
@@ -1103,6 +1347,7 @@ export const cssVars = {
         "extrabold": "var(--font-weight-extrabold)"
       },
       "size": {
+        "2xs": "var(--font-size-2xs)",
         "xs": "var(--font-size-xs)",
         "sm": "var(--font-size-sm)",
         "md": "var(--font-size-md)",
@@ -1115,6 +1360,7 @@ export const cssVars = {
         "6xl": "var(--font-size-6xl)"
       },
       "lineHeight": {
+        "2xs": "var(--line-height-2xs)",
         "xs": "var(--line-height-xs)",
         "sm": "var(--line-height-sm)",
         "md": "var(--line-height-md)",
@@ -1264,12 +1510,14 @@ export const cssVars = {
         "canvas": "var(--color-bg-canvas)",
         "surface": "var(--color-bg-surface)",
         "elevated": "var(--color-bg-elevated)",
-        "muted": "var(--color-bg-muted)"
+        "muted": "var(--color-bg-muted)",
+        "subtle": "var(--color-bg-subtle)"
       },
       "border": {
         "subtle": "var(--color-border-subtle)",
         "default": "var(--color-border-default)",
-        "strong": "var(--color-border-strong)"
+        "strong": "var(--color-border-strong)",
+        "muted": "var(--color-border-muted)"
       },
       "state": {
         "info": "var(--color-state-info)",
@@ -1417,7 +1665,69 @@ export const cssVars = {
       "dropdown": "var(--shadow-dropdown)",
       "modal": "var(--shadow-modal)"
     }
+  },
+  "components": {
+    "button": {
+      "background": "var(--component-button-background)",
+      "backgroundHover": "var(--component-button-background-hover)",
+      "backgroundActive": "var(--component-button-background-active)",
+      "border": "var(--component-button-border)",
+      "color": "var(--component-button-color)",
+      "height": "var(--component-button-height)",
+      "paddingX": "var(--component-button-padding-x)",
+      "fontSize": "var(--component-button-font-size)",
+      "lineHeight": "var(--component-button-line-height)",
+      "fontWeight": "var(--component-button-font-weight)",
+      "radius": "var(--component-button-radius)",
+      "gap": "var(--component-button-gap)",
+      "loadingSpinnerSize": "var(--component-button-loading-spinner-size)"
+    },
+    "control": {
+      "background": "var(--component-control-background)",
+      "backgroundHover": "var(--component-control-background-hover)",
+      "backgroundDisabled": "var(--component-control-background-disabled)",
+      "border": "var(--component-control-border)",
+      "borderHover": "var(--component-control-border-hover)",
+      "borderFocus": "var(--component-control-border-focus)",
+      "text": "var(--component-control-text)",
+      "placeholder": "var(--component-control-placeholder)",
+      "radius": "var(--component-control-radius)"
+    },
+    "card": {
+      "background": "var(--component-card-background)",
+      "border": "var(--component-card-border)",
+      "radius": "var(--component-card-radius)",
+      "padding": "var(--component-card-padding)",
+      "shadow": "var(--component-card-shadow)",
+      "shadowHover": "var(--component-card-shadow-hover)"
+    },
+    "status": {
+      "gap": "var(--component-status-gap)",
+      "fontSize": "var(--component-status-font-size)",
+      "iconSize": "var(--component-status-icon-size)"
+    },
+    "metric": {
+      "background": "var(--component-metric-background)",
+      "border": "var(--component-metric-border)",
+      "radius": "var(--component-metric-radius)",
+      "padding": "var(--component-metric-padding)",
+      "valueFontSize": "var(--component-metric-value-font-size)",
+      "labelFontSize": "var(--component-metric-label-font-size)"
+    },
+    "meter": {
+      "height": "var(--component-meter-height)",
+      "radius": "var(--component-meter-radius)",
+      "track": "var(--component-meter-track)"
+    }
   }
 };
 
-export const tokens = { primitives, semantic, semanticThemes, cssVars };
+export const tokens = {
+  metadata: tokenMetadata,
+  primitives,
+  semantic,
+  components,
+  semanticThemes,
+  componentThemes,
+  cssVars,
+};