@keyfunc/keybricks-ds 2.6.0 → 2.7.0

package/tokens/tokens.js

@@ -10,6 +10,17 @@ export const cssVar = {
   actionPrimary: "var(--action-primary)",
   actionPrimaryActive: "var(--action-primary-active)",
   actionPrimaryHover: "var(--action-primary-hover)",
+  aiGlowBlur: "var(--ai-glow-blur)",
+  aiGlowOpacity: "var(--ai-glow-opacity)",
+  aiGradientEnd: "var(--ai-gradient-end)",
+  aiGradientStart: "var(--ai-gradient-start)",
+  aiGradientStops: "var(--ai-gradient-stops)",
+  aiRingRestTrack: "var(--ai-ring-rest-track)",
+  aiRingWidth: "var(--ai-ring-width)",
+  aiSpinHover: "var(--ai-spin-hover)",
+  aiSpinRest: "var(--ai-spin-rest)",
+  aiTint: "var(--ai-tint)",
+  aiTintPress: "var(--ai-tint-press)",
   amber100: "var(--amber-100)",
   amber200: "var(--amber-200)",
   amber300: "var(--amber-300)",
@@ -280,10 +291,13 @@ export const cssVar = {
   series7: "var(--series-7)",
   series8: "var(--series-8)",
   series9: "var(--series-9)",
+  shadowDrawer: "var(--shadow-drawer)",
   shadowMenu: "var(--shadow-menu)",
   shadowModal: "var(--shadow-modal)",
   shadowNode: "var(--shadow-node)",
+  shadowRaised: "var(--shadow-raised)",
   shadowSelected: "var(--shadow-selected)",
+  shadowThumb: "var(--shadow-thumb)",
   sidebarW: "var(--sidebar-w)",
   skeleton: "var(--skeleton)",
   softActive: "var(--soft-active)",
@@ -377,6 +391,17 @@ export const light = {
   actionPrimary: "#155dfc",
   actionPrimaryActive: "#1039c4",
   actionPrimaryHover: "#1447e6",
+  aiGlowBlur: "6px",
+  aiGlowOpacity: ".4",
+  aiGradientEnd: "#e355b2",
+  aiGradientStart: "#2b7fff",
+  aiGradientStops: "#2b7fff,#e355b2,#2b7fff",
+  aiRingRestTrack: "#e5e5e5",
+  aiRingWidth: "1px",
+  aiSpinHover: "1.2s",
+  aiSpinRest: "5s",
+  aiTint: "8%",
+  aiTintPress: "14%",
   amber100: "#ffefd3",
   amber200: "#ffe5b7",
   amber300: "#ffd280",
@@ -647,10 +672,13 @@ export const light = {
   series7: "#7a8d30",
   series8: "#2f99c0",
   series9: "#737373",
+  shadowDrawer: "-8px 0 24px rgba(0,0,0,.12)",
   shadowMenu: "0 4px 12px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08)",
   shadowModal: "0 24px 64px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)",
   shadowNode: "0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)",
+  shadowRaised: "0 1px 2px rgba(0,0,0,.08)",
   shadowSelected: "0 0 0 2px #dbeafe,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)",
+  shadowThumb: "0 1px 2px rgba(0,0,0,.15)",
   sidebarW: "240px",
   skeleton: "#e5e5e5",
   softActive: "#bedbff",
@@ -661,8 +689,8 @@ export const light = {
   successBg: "#ecfdf5",
   successStrong: "#009966",
   successText: "#007a55",
-  switchH: "20px",
-  switchW: "36px",
+  switchH: "18px",
+  switchW: "32px",
   tHover: "background 120ms cubic-bezier(.2,.8,.3,1),border-color 120ms cubic-bezier(.2,.8,.3,1),color 120ms cubic-bezier(.2,.8,.3,1)",
   tTheme: "background-color 160ms cubic-bezier(.2,.8,.3,1),color 160ms cubic-bezier(.2,.8,.3,1),border-color 160ms cubic-bezier(.2,.8,.3,1)",
   tagH: "24px",
@@ -744,6 +772,17 @@ export const dark = {
   actionPrimary: "#1f6feb",
   actionPrimaryActive: "#1a5ec9",
   actionPrimaryHover: "#2b7fff",
+  aiGlowBlur: "6px",
+  aiGlowOpacity: ".3",
+  aiGradientEnd: "#e355b2",
+  aiGradientStart: "#2b7fff",
+  aiGradientStops: "#2b7fff,#e355b2,#2b7fff",
+  aiRingRestTrack: "#333333",
+  aiRingWidth: "1px",
+  aiSpinHover: "1.2s",
+  aiSpinRest: "5s",
+  aiTint: "8%",
+  aiTintPress: "14%",
   amber100: "#ffefd3",
   amber200: "#ffe5b7",
   amber300: "#ffd280",
@@ -1014,10 +1053,13 @@ export const dark = {
   series7: "#9bb054",
   series8: "#54b8e1",
   series9: "#8f8f8f",
+  shadowDrawer: "-8px 0 24px rgba(0,0,0,.5)",
   shadowMenu: "0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)",
   shadowModal: "0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5)",
   shadowNode: "0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5)",
+  shadowRaised: "0 1px 2px rgba(0,0,0,.4)",
   shadowSelected: "0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6)",
+  shadowThumb: "0 1px 2px rgba(0,0,0,.5)",
   sidebarW: "240px",
   skeleton: "#242424",
   softActive: "rgba(43,127,255,.32)",
@@ -1028,8 +1070,8 @@ export const dark = {
   successBg: "rgba(0,188,125,.14)",
   successStrong: "#22c58f",
   successText: "#4ade9f",
-  switchH: "20px",
-  switchW: "36px",
+  switchH: "18px",
+  switchW: "32px",
   tHover: "background 120ms cubic-bezier(.2,.8,.3,1),border-color 120ms cubic-bezier(.2,.8,.3,1),color 120ms cubic-bezier(.2,.8,.3,1)",
   tTheme: "background-color 160ms cubic-bezier(.2,.8,.3,1),color 160ms cubic-bezier(.2,.8,.3,1),border-color 160ms cubic-bezier(.2,.8,.3,1)",
   tagH: "24px",
@@ -1103,6 +1145,6 @@ export const dark = {
   zTooltip: "100",
 };
 
-export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--count-h","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
+export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--ai-glow-blur","--ai-glow-opacity","--ai-gradient-end","--ai-gradient-start","--ai-gradient-stops","--ai-ring-rest-track","--ai-ring-width","--ai-spin-hover","--ai-spin-rest","--ai-tint","--ai-tint-press","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-split","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--cell-px","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--count-h","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-soft-hover","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--edge-pad","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--group-gap","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-code","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-drawer","--shadow-menu","--shadow-modal","--shadow-node","--shadow-raised","--shadow-selected","--shadow-thumb","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
 
 export default { cssVar, light, dark, tokenNames };

package/tokens/tokens.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "2.4.0",
+  "version": "2.7.0",
   "source": "tokens/*.css",
   "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
@@ -81,6 +81,91 @@
         "value": "#2b7fff"
       }
     },
+    "--ai-glow-blur": {
+      "group": "ai",
+      "light": {
+        "raw": "6px",
+        "value": "6px"
+      }
+    },
+    "--ai-glow-opacity": {
+      "group": "ai",
+      "light": {
+        "raw": ".4",
+        "value": ".4"
+      },
+      "dark": {
+        "raw": ".3",
+        "value": ".3"
+      }
+    },
+    "--ai-gradient-end": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--pink-500)",
+        "value": "#e355b2"
+      }
+    },
+    "--ai-gradient-start": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--blue-500)",
+        "value": "#2b7fff"
+      }
+    },
+    "--ai-gradient-stops": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--ai-gradient-start),var(--ai-gradient-end),var(--ai-gradient-start)",
+        "value": "#2b7fff,#e355b2,#2b7fff"
+      }
+    },
+    "--ai-ring-rest-track": {
+      "group": "ai",
+      "light": {
+        "raw": "var(--border-control)",
+        "value": "#e5e5e5"
+      },
+      "dark": {
+        "raw": "var(--border-control)",
+        "value": "#333333"
+      }
+    },
+    "--ai-ring-width": {
+      "group": "ai",
+      "light": {
+        "raw": "1px",
+        "value": "1px"
+      }
+    },
+    "--ai-spin-hover": {
+      "group": "ai",
+      "light": {
+        "raw": "1.2s",
+        "value": "1.2s"
+      }
+    },
+    "--ai-spin-rest": {
+      "group": "ai",
+      "light": {
+        "raw": "5s",
+        "value": "5s"
+      }
+    },
+    "--ai-tint": {
+      "group": "ai",
+      "light": {
+        "raw": "8%",
+        "value": "8%"
+      }
+    },
+    "--ai-tint-press": {
+      "group": "ai",
+      "light": {
+        "raw": "14%",
+        "value": "14%"
+      }
+    },
     "--amber-100": {
       "group": "colors-extended",
       "light": {
@@ -2431,6 +2516,17 @@
         "value": "#8f8f8f"
       }
     },
+    "--shadow-drawer": {
+      "group": "dark",
+      "light": {
+        "raw": "-8px 0 24px rgba(0,0,0,.12)",
+        "value": "-8px 0 24px rgba(0,0,0,.12)"
+      },
+      "dark": {
+        "raw": "-8px 0 24px rgba(0,0,0,.5)",
+        "value": "-8px 0 24px rgba(0,0,0,.5)"
+      }
+    },
     "--shadow-menu": {
       "group": "dark",
       "light": {
@@ -2464,6 +2560,17 @@
         "value": "0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5)"
       }
     },
+    "--shadow-raised": {
+      "group": "dark",
+      "light": {
+        "raw": "0 1px 2px rgba(0,0,0,.08)",
+        "value": "0 1px 2px rgba(0,0,0,.08)"
+      },
+      "dark": {
+        "raw": "0 1px 2px rgba(0,0,0,.4)",
+        "value": "0 1px 2px rgba(0,0,0,.4)"
+      }
+    },
     "--shadow-selected": {
       "group": "dark",
       "light": {
@@ -2475,6 +2582,17 @@
         "value": "0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6)"
       }
     },
+    "--shadow-thumb": {
+      "group": "dark",
+      "light": {
+        "raw": "0 1px 2px rgba(0,0,0,.15)",
+        "value": "0 1px 2px rgba(0,0,0,.15)"
+      },
+      "dark": {
+        "raw": "0 1px 2px rgba(0,0,0,.5)",
+        "value": "0 1px 2px rgba(0,0,0,.5)"
+      }
+    },
     "--sidebar-w": {
       "group": "layout",
       "light": {
@@ -2584,15 +2702,15 @@
     "--switch-h": {
       "group": "layout",
       "light": {
-        "raw": "20px",
-        "value": "20px"
+        "raw": "18px",
+        "value": "18px"
       }
     },
     "--switch-w": {
       "group": "layout",
       "light": {
-        "raw": "36px",
-        "value": "36px"
+        "raw": "32px",
+        "value": "32px"
       }
     },
     "--t-hover": {