@asteby/metacore-theme 2.19.0 → 2.21.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { fonts, fontFamilies } from './fonts.js';
 export type { FontFamily } from './fonts.js';
-export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, themeConfig, } from './preset.js';
+export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, motionTokens, themeConfig, } from './preset.js';
 export type { ThemeConfig } from './preset.js';
 export { ThemeProvider, useTheme } from './provider.js';
 export type { ThemeProviderProps, ThemeProviderState } from './provider.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,WAAW,GACZ,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.js

@@ -1,4 +1,4 @@
 export { fonts, fontFamilies } from './fonts.js';
-export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, themeConfig, } from './preset.js';
+export { colorTokens, chartTokens, radiusTokens, shadowTokens, fontTokens, trackingTokens, motionTokens, themeConfig, } from './preset.js';
 export { ThemeProvider, useTheme } from './provider.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,WAAW,GACZ,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,MAAM,aAAa,CAAA;AAGpB,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA"}

package/dist/preset.d.ts

@@ -96,6 +96,26 @@ export declare const fontTokens: {
 export declare const trackingTokens: {
     readonly normal: "-0.025em";
 };
+/**
+ * Motion tokens. Durations follow a small scale (feedback → layout moves);
+ * easings are "standard" (enter/move), "emphasized" (larger travel) and
+ * "exit". CSS: `--motion-duration-*` / `--motion-ease-*` in tokens.css.
+ * Consumers must honour prefers-reduced-motion (tokens.css zeroes the
+ * durations under `reduce`).
+ */
+export declare const motionTokens: {
+    readonly duration: {
+        readonly instant: "100ms";
+        readonly fast: "150ms";
+        readonly moderate: "220ms";
+        readonly slow: "320ms";
+    };
+    readonly easing: {
+        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+        readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+    };
+};
 export declare const themeConfig: {
     readonly colors: {
         readonly light: {
@@ -182,6 +202,19 @@ export declare const themeConfig: {
     readonly tracking: {
         readonly normal: "-0.025em";
     };
+    readonly motion: {
+        readonly duration: {
+            readonly instant: "100ms";
+            readonly fast: "150ms";
+            readonly moderate: "220ms";
+            readonly slow: "320ms";
+        };
+        readonly easing: {
+            readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+            readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+            readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+        };
+    };
 };
 export type ThemeConfig = typeof themeConfig;
 //# sourceMappingURL=preset.d.ts.map

package/dist/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAA;AAEV,eAAO,MAAM,UAAU;;;;CAIb,CAAA;AAEV,eAAO,MAAM,cAAc;;CAEjB,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cd,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;CAed,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAA;AAEV,eAAO,MAAM,UAAU;;;;CAIb,CAAA;AAEV,eAAO,MAAM,cAAc;;CAEjB,CAAA;AAEV;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAA;AAEV,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQd,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAA"}

package/dist/preset.js

@@ -96,6 +96,26 @@ export const fontTokens = {
 export const trackingTokens = {
     normal: '-0.025em',
 };
+/**
+ * Motion tokens. Durations follow a small scale (feedback → layout moves);
+ * easings are "standard" (enter/move), "emphasized" (larger travel) and
+ * "exit". CSS: `--motion-duration-*` / `--motion-ease-*` in tokens.css.
+ * Consumers must honour prefers-reduced-motion (tokens.css zeroes the
+ * durations under `reduce`).
+ */
+export const motionTokens = {
+    duration: {
+        instant: '100ms',
+        fast: '150ms',
+        moderate: '220ms',
+        slow: '320ms',
+    },
+    easing: {
+        standard: 'cubic-bezier(0.2, 0, 0, 1)',
+        emphasized: 'cubic-bezier(0.3, 0, 0, 1)',
+        exit: 'cubic-bezier(0.4, 0, 1, 1)',
+    },
+};
 export const themeConfig = {
     colors: colorTokens,
     charts: chartTokens,
@@ -103,5 +123,6 @@ export const themeConfig = {
     shadows: shadowTokens,
     fonts: fontTokens,
     tracking: trackingTokens,
+    motion: motionTokens,
 };
 //# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE;QACL,UAAU,EAAE,mBAAmB;QAC/B,UAAU,EAAE,cAAc;QAC1B,IAAI,EAAE,mBAAmB;QACzB,cAAc,EAAE,cAAc;QAC9B,OAAO,EAAE,mBAAmB;QAC5B,iBAAiB,EAAE,cAAc;QACjC,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,mBAAmB;QACtC,SAAS,EAAE,0BAA0B;QACrC,mBAAmB,EAAE,mBAAmB;QACxC,KAAK,EAAE,mBAAmB;QAC1B,eAAe,EAAE,mBAAmB;QACpC,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,0BAA0B;QAC5C,WAAW,EAAE,8BAA8B;QAC3C,qBAAqB,EAAE,mBAAmB;QAC1C,MAAM,EAAE,0BAA0B;QAClC,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,cAAc;KACrB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,sBAAsB;QAClC,UAAU,EAAE,mBAAmB;QAC/B,IAAI,EAAE,sBAAsB;QAC5B,cAAc,EAAE,mBAAmB;QACnC,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,mBAAmB;QACtC,OAAO,EAAE,sBAAsB;QAC/B,iBAAiB,EAAE,mBAAmB;QACtC,SAAS,EAAE,sBAAsB;QACjC,mBAAmB,EAAE,mBAAmB;QACxC,KAAK,EAAE,sBAAsB;QAC7B,eAAe,EAAE,mBAAmB;QACpC,MAAM,EAAE,sBAAsB;QAC9B,gBAAgB,EAAE,sBAAsB;QACxC,WAAW,EAAE,8BAA8B;QAC3C,qBAAqB,EAAE,mBAAmB;QAC1C,MAAM,EAAE,sBAAsB;QAC9B,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,sBAAsB;KAC7B;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE;QACL,MAAM,EAAE,+BAA+B;QACvC,MAAM,EAAE,sBAAsB;QAC9B,MAAM,EAAE,8BAA8B;QACtC,MAAM,EAAE,0BAA0B;QAClC,MAAM,EAAE,mBAAmB;KAC5B;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,+BAA+B;QACvC,MAAM,EAAE,sBAAsB;QAC9B,MAAM,EAAE,8BAA8B;QACtC,MAAM,EAAE,0BAA0B;QAClC,MAAM,EAAE,mBAAmB;KAC5B;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,oBAAoB;IACxB,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,oBAAoB;CAChB,CAAA;AAEV,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,qCAAqC;IAC5C,EAAE,EAAE,qCAAqC;IACzC,EAAE,EAAE,2EAA2E;IAC/E,IAAI,EAAE,2EAA2E;IACjF,EAAE,EAAE,2EAA2E;IAC/E,EAAE,EAAE,2EAA2E;IAC/E,EAAE,EAAE,4EAA4E;IAChF,KAAK,EAAE,qCAAqC;CACpC,CAAA;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,0BAA0B;CACxB,CAAA;AAEV,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,UAAU;CACV,CAAA;AAEV;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,QAAQ,EAAE;QACR,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,4BAA4B;QACtC,UAAU,EAAE,4BAA4B;QACxC,IAAI,EAAE,4BAA4B;KACnC;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,WAAW;IACnB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;CACZ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-theme",
-  "version": "2.19.0",
+  "version": "2.21.0",
   "description": "Metacore design tokens + Tailwind 4 preset (oklch, shadows, fonts, dark mode)",
   "license": "Apache-2.0",
   "repository": {

package/styles/glass.css

@@ -65,6 +65,18 @@
   --glass-row-hover: oklch(1 0 0 / 0.4);
   --glass-thead: oklch(1 0 0 / 0.62);
 
+  /* Semantic surfaces (see tokens.css) mapped onto the glass recipe. */
+  --surface-panel: var(--card);
+  --surface-raised: var(--card);
+  --surface-field: var(--glass-field);
+  --border-rim: var(--glass-rim);
+  --elevation-raised: var(--glass-highlight), 0 1px 2px oklch(0.25 0.04 260 / 0.06);
+  --elevation-panel: var(--glass-highlight), var(--glass-shadow);
+  --elevation-float: var(--glass-highlight), var(--glass-shadow-float);
+  --backdrop-panel: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  --radius-panel: var(--glass-radius);
+  --radius-field: calc(var(--radius) + 10px);
+
   --shadow-md: var(--glass-shadow);
   --ui-surface-blur: var(--glass-blur);
   --ui-card-alpha: 0.5;

package/styles/tokens.css

@@ -1,4 +1,26 @@
 :root {
+  /* Status hues for chips and badges (text-safe on --background). */
+  --success: oklch(0.56 0.14 155);
+  --warning: oklch(0.6 0.15 65);
+  --info: oklch(0.55 0.13 235);
+
+  /*
+   * Semantic surfaces for floating UI outside the metacore-ui primitives
+   * (chat panels, composers, result cards). Defaults are the plain tokens;
+   * a theme pack (glass.css) redefines them, so screens that paint with
+   * these never need to know which theme is active.
+   */
+  --surface-panel: var(--card);
+  --surface-raised: var(--card);
+  --surface-field: var(--background);
+  --border-rim: var(--border);
+  --elevation-raised: 0 1px 2px oklch(0 0 0 / 0.05);
+  --elevation-panel: 0 1px 2px oklch(0 0 0 / 0.05), 0 12px 32px -16px oklch(0 0 0 / 0.18);
+  --elevation-float: 0 2px 6px oklch(0 0 0 / 0.08), 0 24px 56px -20px oklch(0 0 0 / 0.3);
+  --backdrop-panel: none;
+  --radius-panel: calc(var(--radius) + 4px);
+  --radius-field: calc(var(--radius) + 10px);
+
   --background: oklch(0.9940 0 0);
   --foreground: oklch(0 0 0);
   --card: oklch(0.9940 0 0);
@@ -51,6 +73,14 @@
   --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
   --tracking-normal: -0.025em;
   --spacing: 0.27rem;
+  /* Motion (see motionTokens in src/preset.ts) */
+  --motion-duration-instant: 100ms;
+  --motion-duration-fast: 150ms;
+  --motion-duration-moderate: 220ms;
+  --motion-duration-slow: 320ms;
+  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
 }
 
 .dark {
@@ -102,6 +132,9 @@
   --shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
   --shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
   --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.40);
+  --success: oklch(0.78 0.14 155);
+  --warning: oklch(0.82 0.14 80);
+  --info: oklch(0.78 0.11 235);
 }
 
 @theme inline {
@@ -169,3 +202,12 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant: 0ms;
+    --motion-duration-fast: 0ms;
+    --motion-duration-moderate: 0ms;
+    --motion-duration-slow: 0ms;
+  }
+}