@velora-cms/design-tokens 0.9.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,26 @@
+# @velora-cms/design-tokens
+
+The single source of truth for Velora's design tokens — colors, spacing,
+typography, and theme overrides. Generates the Tailwind config and CSS
+variables that `@velora-cms/ui`, the admin UI, and third-party plugin UIs
+all consume, so a theme change here propagates everywhere automatically.
+
+## Install
+
+```sh
+npm install @velora-cms/design-tokens
+```
+
+## Usage
+
+```ts
+import { tokens, tailwindTheme, themes } from "@velora-cms/design-tokens";
+
+console.log(tokens.color.primary[500]);
+```
+
+```css
+@import "@velora-cms/design-tokens/tokens.css";
+```
+
+Part of [Velora](https://github.com/velora-cms/velora). Apache-2.0.

package/dist/generate.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/generate.js

@@ -0,0 +1,34 @@
+/**
+ * Build-time generator: emits tokens.css (CSS custom properties on
+ * :root) and tokens.json (for theme plugin authors) next to the
+ * compiled output. Run via `node dist/generate.js` after tsc.
+ */
+import { writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { tokens } from './tokens.js';
+import { themes } from './themes/index.js';
+import { flatten, themeOverridesToCss } from './theme-css.js';
+// The typography group flattens without its section prefix so variables
+// read --font-size-base, not --typography-font-size-base. Everything
+// else keeps its section name (--color-primary-500, --spacing-4, ...).
+const { typography, ...rest } = tokens;
+const cssTree = { ...rest, ...typography };
+const variables = {};
+flatten(cssTree, [], variables);
+// Each theme with overrides gets its own [data-theme="id"] block —
+// the same mechanism a third-party theme plugin will use. Light has
+// no overrides (it IS the :root default) so it emits no block; that's
+// a property of Light's token set, not a special case in this loop.
+const themeBlocks = themes
+    .map((theme) => themeOverridesToCss(theme.id, theme.contributions.themeTokens))
+    .filter(Boolean);
+const css = [
+    '/* Generated by @velora-cms/design-tokens — do not edit by hand. */',
+    [':root {', ...Object.entries(variables).map(([name, value]) => `  ${name}: ${value};`), '}'].join('\n'),
+    ...themeBlocks,
+].join('\n\n') + '\n';
+const outDir = dirname(fileURLToPath(import.meta.url));
+await writeFile(join(outDir, 'tokens.css'), css, 'utf8');
+await writeFile(join(outDir, 'tokens.json'), JSON.stringify(tokens, null, 2) + '\n', 'utf8');
+console.log(`Generated tokens.css (${Object.keys(variables).length} variables) and tokens.json`);

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export type { VeloraDesignTokens, ColorScale, ColorScaleStep, ScaleTokens, SpacingStep, } from './types.js';
+export { tokens } from './tokens.js';
+export { tailwindTheme } from './tailwind-theme.js';
+export type { BuiltInTheme, ThemeTokenOverrides, ThemeColorOverrides, } from './theme-types.js';
+export { themeOverridesToCss } from './theme-css.js';
+export { themes, lightTheme, darkTheme } from './themes/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { tokens } from './tokens.js';
+export { tailwindTheme } from './tailwind-theme.js';
+export { themeOverridesToCss } from './theme-css.js';
+export { themes, lightTheme, darkTheme } from './themes/index.js';

package/dist/tailwind-theme.d.ts

@@ -0,0 +1,28 @@
+export declare const tailwindTheme: {
+    colors: {
+        transparent: string;
+        current: string;
+        inherit: string;
+        primary: Record<import("./types.js").ColorScaleStep, string>;
+        secondary: Record<import("./types.js").ColorScaleStep, string>;
+        success: Record<import("./types.js").ColorScaleStep, string>;
+        warning: Record<import("./types.js").ColorScaleStep, string>;
+        danger: Record<import("./types.js").ColorScaleStep, string>;
+        neutral: Record<import("./types.js").ColorScaleStep, string>;
+        background: Record<"base" | "elevated" | "overlay" | "hover", string>;
+        text: Record<"primary" | "secondary" | "disabled" | "inverse", string>;
+        border: Record<"default" | "subtle" | "strong", string>;
+    };
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+    fontSize: Record<"xs" | "sm" | "base" | "lg" | "xl", string>;
+    fontWeight: Record<"normal" | "medium" | "semibold" | "bold", string>;
+    lineHeight: Record<"normal" | "tight" | "relaxed", string>;
+    spacing: Record<import("./types.js").SpacingStep, string>;
+    borderRadius: Record<"sm" | "lg" | "none" | "md" | "full", string>;
+    boxShadow: Record<"sm" | "lg" | "xl" | "md", string>;
+    transitionDuration: Record<string, string>;
+    transitionTimingFunction: Record<string, string>;
+};

package/dist/tailwind-theme.js

@@ -0,0 +1,49 @@
+/**
+ * Tailwind theme built from the token definitions — every value is a
+ * var(--...) reference into tokens.css, never a raw value. Utilities
+ * like bg-primary-500 therefore resolve through the CSS custom
+ * property at runtime, which is what lets theme plugins re-skin the
+ * admin (and every plugin UI rendered with host components) by
+ * overriding variables — no build-time theme baking.
+ *
+ * Variable names here must stay in sync with generate.ts's flattening
+ * (color/spacing/radius/shadow/motion keep their section prefix,
+ * typography flattens without one).
+ */
+import { tokens } from './tokens.js';
+function scaleRefs(scale, prefix) {
+    const out = {};
+    for (const key of Object.keys(scale)) {
+        out[key] = `var(--${prefix}-${key})`;
+    }
+    return out;
+}
+export const tailwindTheme = {
+    colors: {
+        // CSS keywords, not theme values — the only non-var entries
+        transparent: 'transparent',
+        current: 'currentColor',
+        inherit: 'inherit',
+        primary: scaleRefs(tokens.color.primary, 'color-primary'),
+        secondary: scaleRefs(tokens.color.secondary, 'color-secondary'),
+        success: scaleRefs(tokens.color.success, 'color-success'),
+        warning: scaleRefs(tokens.color.warning, 'color-warning'),
+        danger: scaleRefs(tokens.color.danger, 'color-danger'),
+        neutral: scaleRefs(tokens.color.neutral, 'color-neutral'),
+        background: scaleRefs(tokens.color.background, 'color-background'),
+        text: scaleRefs(tokens.color.text, 'color-text'),
+        border: scaleRefs(tokens.color.border, 'color-border'),
+    },
+    fontFamily: {
+        sans: 'var(--font-family-sans)',
+        mono: 'var(--font-family-mono)',
+    },
+    fontSize: scaleRefs(tokens.typography.fontSize, 'font-size'),
+    fontWeight: scaleRefs(tokens.typography.fontWeight, 'font-weight'),
+    lineHeight: scaleRefs(tokens.typography.lineHeight, 'line-height'),
+    spacing: scaleRefs(tokens.spacing, 'spacing'),
+    borderRadius: scaleRefs(tokens.radius, 'radius'),
+    boxShadow: scaleRefs(tokens.shadow, 'shadow'),
+    transitionDuration: scaleRefs(tokens.motion.duration, 'motion-duration'),
+    transitionTimingFunction: scaleRefs(tokens.motion.easing, 'motion-easing'),
+};

package/dist/theme-css.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeTokenOverrides } from './theme-types.js';
+export declare function toKebab(key: string): string;
+export declare function flatten(value: unknown, path: string[], out: Record<string, string>): void;
+/** THE theme mechanism: one token-override set → one [data-theme] CSS
+ * block. The build-time generator bakes built-ins through this exact
+ * function; the admin injects installed themes through it at runtime —
+ * "same mechanism as a third-party theme" is true by construction, not
+ * by convention. Empty overrides → empty string (Light IS the :root
+ * default and emits no block). Entries whose name or value contain a
+ * CSS-escaping character are skipped (with a warning) rather than
+ * emitted — see UNSAFE_CSS_CHARS. */
+export declare function themeOverridesToCss(themeDomId: string, overrides: ThemeTokenOverrides): string;

package/dist/theme-css.js

@@ -0,0 +1,42 @@
+export function toKebab(key) {
+    return key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+export function flatten(value, path, out) {
+    if (typeof value === 'object' && value !== null) {
+        for (const [key, child] of Object.entries(value)) {
+            flatten(child, [...path, toKebab(key)], out);
+        }
+    }
+    else {
+        out[`--${path.join('-')}`] = String(value);
+    }
+}
+// A variable name or value containing any of these could break out of its
+// `  --name: value;` declaration and inject arbitrary rules into the
+// shared admin-wide style block (both the baked tokens.css path and the
+// runtime-injected theme path go through this same emission loop).
+// Braces/semicolons/control characters are never legitimate inside a
+// single CSS custom-property name or value.
+const UNSAFE_CSS_CHARS = new RegExp('[{};\\u0000-\\u001f\\u007f]');
+/** THE theme mechanism: one token-override set → one [data-theme] CSS
+ * block. The build-time generator bakes built-ins through this exact
+ * function; the admin injects installed themes through it at runtime —
+ * "same mechanism as a third-party theme" is true by construction, not
+ * by convention. Empty overrides → empty string (Light IS the :root
+ * default and emits no block). Entries whose name or value contain a
+ * CSS-escaping character are skipped (with a warning) rather than
+ * emitted — see UNSAFE_CSS_CHARS. */
+export function themeOverridesToCss(themeDomId, overrides) {
+    const vars = {};
+    flatten(overrides, [], vars);
+    const entries = Object.entries(vars).filter(([name, value]) => {
+        if (UNSAFE_CSS_CHARS.test(name) || UNSAFE_CSS_CHARS.test(value)) {
+            console.warn(`themeOverridesToCss: skipping unsafe token "${name}" for theme "${themeDomId}" (contains CSS-escaping characters)`);
+            return false;
+        }
+        return true;
+    });
+    if (entries.length === 0)
+        return '';
+    return [`[data-theme="${themeDomId}"] {`, ...entries.map(([n, v]) => `  ${n}: ${v};`), '}'].join('\n');
+}

package/dist/theme-types.d.ts

@@ -0,0 +1,39 @@
+import type { ColorScale, VeloraDesignTokens } from './types.js';
+/**
+ * What a theme is allowed to touch: color scales/semantic groups and
+ * radius. Deliberately excludes typography, spacing, shadow, and motion
+ * — the Theme System section's "tokens only, never components" rule
+ * still leaves room for a theme to accidentally reshape layout-adjacent
+ * tokens if the type allowed it; keeping the override surface to
+ * color + radius keeps themes cosmetic by construction, not just by
+ * convention.
+ */
+export interface ThemeColorOverrides {
+    primary?: Partial<ColorScale>;
+    secondary?: Partial<ColorScale>;
+    success?: Partial<ColorScale>;
+    warning?: Partial<ColorScale>;
+    danger?: Partial<ColorScale>;
+    neutral?: Partial<ColorScale>;
+    background?: Partial<VeloraDesignTokens['color']['background']>;
+    text?: Partial<VeloraDesignTokens['color']['text']>;
+    border?: Partial<VeloraDesignTokens['color']['border']>;
+}
+export interface ThemeTokenOverrides {
+    color?: ThemeColorOverrides;
+    radius?: Partial<VeloraDesignTokens['radius']>;
+}
+/** A built-in theme, shaped like a theme plugin MANIFEST's relevant
+ * slice ({id, name, type, contributions.themeTokens}) rather than the
+ * retired pre-SDK {tokens} shape. DELIBERATE WAIVER: built-in ids stay
+ * "light"/"dark" (not reverse-domain) — they are statically registered,
+ * never pass marketplace validation, and every [data-theme] consumer
+ * (tokens.css, docs pages, tests) keys on these historical ids. */
+export interface BuiltInTheme {
+    id: string;
+    name: string;
+    type: 'theme';
+    contributions: {
+        themeTokens: ThemeTokenOverrides;
+    };
+}

package/dist/theme-types.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/dark.d.ts

@@ -0,0 +1,13 @@
+import type { BuiltInTheme } from '../theme-types.js';
+/**
+ * Dark theme overrides, per the Theme System section of
+ * PROJECT_CONTEXT.md. Every value here is drawn from tokens the base
+ * set already declares — no new colors invented outside the
+ * VeloraDesignTokens shape. The background/text/border remaps make
+ * #0F1117 (the brand dark bg reserved for this theme since Session 25)
+ * and #F3F4F6 text actually apply; primary/secondary swap in the
+ * lighter tint their own scale already defines (400/500) so accents
+ * stay legible against the dark background, with the hover shade
+ * shifting to what was the light theme's base shade.
+ */
+export declare const darkTheme: BuiltInTheme;

package/dist/themes/dark.js

@@ -0,0 +1,42 @@
+/**
+ * Dark theme overrides, per the Theme System section of
+ * PROJECT_CONTEXT.md. Every value here is drawn from tokens the base
+ * set already declares — no new colors invented outside the
+ * VeloraDesignTokens shape. The background/text/border remaps make
+ * #0F1117 (the brand dark bg reserved for this theme since Session 25)
+ * and #F3F4F6 text actually apply; primary/secondary swap in the
+ * lighter tint their own scale already defines (400/500) so accents
+ * stay legible against the dark background, with the hover shade
+ * shifting to what was the light theme's base shade.
+ */
+export const darkTheme = {
+    id: 'dark',
+    name: 'Dark',
+    type: 'theme',
+    contributions: {
+        themeTokens: {
+            color: {
+                background: {
+                    base: '#0F1117',
+                    elevated: '#171923',
+                    overlay: 'rgba(0, 0, 0, 0.6)',
+                    // one step lighter than elevated (neutral.800) — the missing dark
+                    // remap behind the Session 41 outline-hover bug
+                    hover: '#1F2937',
+                },
+                text: {
+                    primary: '#F3F4F6',
+                    secondary: '#9CA3AF',
+                    disabled: '#4B5563',
+                },
+                border: {
+                    default: '#1F2937',
+                    subtle: '#171923',
+                    strong: '#374151',
+                },
+                primary: { '500': '#818CF8', '600': '#6366F1' },
+                secondary: { '500': '#A78BFA', '600': '#8B5CF6' },
+            },
+        },
+    },
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,5 @@
+import type { BuiltInTheme } from '../theme-types.js';
+import { lightTheme } from './light.js';
+import { darkTheme } from './dark.js';
+export { lightTheme, darkTheme };
+export declare const themes: BuiltInTheme[];

package/dist/themes/index.js

@@ -0,0 +1,4 @@
+import { lightTheme } from './light.js';
+import { darkTheme } from './dark.js';
+export { lightTheme, darkTheme };
+export const themes = [lightTheme, darkTheme];

package/dist/themes/light.d.ts

@@ -0,0 +1,9 @@
+import type { BuiltInTheme } from '../theme-types.js';
+/**
+ * Light needs no overrides — the base token set generated to :root
+ * (tokens.ts) already IS the light theme. Still modeled as a real
+ * BuiltInTheme, not a special case: applying any theme is always
+ * "set data-theme to this id," whether or not that theme happens to
+ * define overrides.
+ */
+export declare const lightTheme: BuiltInTheme;

package/dist/themes/light.js

@@ -0,0 +1,13 @@
+/**
+ * Light needs no overrides — the base token set generated to :root
+ * (tokens.ts) already IS the light theme. Still modeled as a real
+ * BuiltInTheme, not a special case: applying any theme is always
+ * "set data-theme to this id," whether or not that theme happens to
+ * define overrides.
+ */
+export const lightTheme = {
+    id: 'light',
+    name: 'Light',
+    type: 'theme',
+    contributions: { themeTokens: {} },
+};

package/dist/tokens.css

@@ -0,0 +1,146 @@
+/* Generated by @velora-cms/design-tokens — do not edit by hand. */
+
+:root {
+  --color-primary-50: #EEF2FF;
+  --color-primary-100: #E0E7FF;
+  --color-primary-200: #C7D2FE;
+  --color-primary-300: #A5B4FC;
+  --color-primary-400: #818CF8;
+  --color-primary-500: #6366F1;
+  --color-primary-600: #4F46E5;
+  --color-primary-700: #4338CA;
+  --color-primary-800: #3730A3;
+  --color-primary-900: #312E81;
+  --color-primary-950: #1E1B4B;
+  --color-secondary-50: #F5F3FF;
+  --color-secondary-100: #EDE9FE;
+  --color-secondary-200: #DDD6FE;
+  --color-secondary-300: #C4B5FD;
+  --color-secondary-400: #A78BFA;
+  --color-secondary-500: #8B5CF6;
+  --color-secondary-600: #7C3AED;
+  --color-secondary-700: #6D28D9;
+  --color-secondary-800: #5B21B6;
+  --color-secondary-900: #4C1D95;
+  --color-secondary-950: #2E1065;
+  --color-success-50: #ECFDF5;
+  --color-success-100: #D1FAE5;
+  --color-success-200: #A7F3D0;
+  --color-success-300: #6EE7B7;
+  --color-success-400: #34D399;
+  --color-success-500: #10B981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
+  --color-success-800: #065F46;
+  --color-success-900: #064E3B;
+  --color-success-950: #022C22;
+  --color-warning-50: #FFFBEB;
+  --color-warning-100: #FEF3C7;
+  --color-warning-200: #FDE68A;
+  --color-warning-300: #FCD34D;
+  --color-warning-400: #FBBF24;
+  --color-warning-500: #F59E0B;
+  --color-warning-600: #D97706;
+  --color-warning-700: #B45309;
+  --color-warning-800: #92400E;
+  --color-warning-900: #78350F;
+  --color-warning-950: #451A03;
+  --color-danger-50: #FEF2F2;
+  --color-danger-100: #FEE2E2;
+  --color-danger-200: #FECACA;
+  --color-danger-300: #FCA5A5;
+  --color-danger-400: #F87171;
+  --color-danger-500: #EF4444;
+  --color-danger-600: #DC2626;
+  --color-danger-700: #B91C1C;
+  --color-danger-800: #991B1B;
+  --color-danger-900: #7F1D1D;
+  --color-danger-950: #450A0A;
+  --color-neutral-50: #F9FAFB;
+  --color-neutral-100: #F3F4F6;
+  --color-neutral-200: #E5E7EB;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-400: #9CA3AF;
+  --color-neutral-500: #6B7280;
+  --color-neutral-600: #4B5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1F2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+  --color-background-base: #F9FAFB;
+  --color-background-elevated: #FFFFFF;
+  --color-background-overlay: rgba(17, 24, 39, 0.5);
+  --color-background-hover: #F3F4F6;
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-text-disabled: #9CA3AF;
+  --color-text-inverse: #FFFFFF;
+  --color-border-default: #E5E7EB;
+  --color-border-subtle: #F3F4F6;
+  --color-border-strong: #D1D5DB;
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-px: 1px;
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --motion-duration-fast: 150ms;
+  --motion-duration-normal: 250ms;
+  --motion-duration-slow: 400ms;
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --direction: ltr;
+  --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-family-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+}
+
+[data-theme="dark"] {
+  --color-background-base: #0F1117;
+  --color-background-elevated: #171923;
+  --color-background-overlay: rgba(0, 0, 0, 0.6);
+  --color-background-hover: #1F2937;
+  --color-text-primary: #F3F4F6;
+  --color-text-secondary: #9CA3AF;
+  --color-text-disabled: #4B5563;
+  --color-border-default: #1F2937;
+  --color-border-subtle: #171923;
+  --color-border-strong: #374151;
+  --color-primary-500: #818CF8;
+  --color-primary-600: #6366F1;
+  --color-secondary-500: #A78BFA;
+  --color-secondary-600: #8B5CF6;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,12 @@
+import type { VeloraDesignTokens } from './types.js';
+/**
+ * Velora brand tokens — the default (light) token set.
+ *
+ * Brand anchors from docs/PROJECT_CONTEXT.md → UI & Design System:
+ * every brand color is the 500 step of its scale (indigo #6366F1,
+ * violet #8B5CF6, emerald #10B981, amber #F59E0B, red #EF4444), and
+ * the light background #F9FAFB is neutral.50. The dark background
+ * #0F1117 belongs to the Dark theme's overrides (Session 27), not to
+ * this base set — themes override tokens, never components.
+ */
+export declare const tokens: VeloraDesignTokens;

package/dist/tokens.js

@@ -0,0 +1,181 @@
+/**
+ * Velora brand tokens — the default (light) token set.
+ *
+ * Brand anchors from docs/PROJECT_CONTEXT.md → UI & Design System:
+ * every brand color is the 500 step of its scale (indigo #6366F1,
+ * violet #8B5CF6, emerald #10B981, amber #F59E0B, red #EF4444), and
+ * the light background #F9FAFB is neutral.50. The dark background
+ * #0F1117 belongs to the Dark theme's overrides (Session 27), not to
+ * this base set — themes override tokens, never components.
+ */
+export const tokens = {
+    color: {
+        primary: {
+            '50': '#EEF2FF',
+            '100': '#E0E7FF',
+            '200': '#C7D2FE',
+            '300': '#A5B4FC',
+            '400': '#818CF8',
+            '500': '#6366F1',
+            '600': '#4F46E5',
+            '700': '#4338CA',
+            '800': '#3730A3',
+            '900': '#312E81',
+            '950': '#1E1B4B',
+        },
+        secondary: {
+            '50': '#F5F3FF',
+            '100': '#EDE9FE',
+            '200': '#DDD6FE',
+            '300': '#C4B5FD',
+            '400': '#A78BFA',
+            '500': '#8B5CF6',
+            '600': '#7C3AED',
+            '700': '#6D28D9',
+            '800': '#5B21B6',
+            '900': '#4C1D95',
+            '950': '#2E1065',
+        },
+        success: {
+            '50': '#ECFDF5',
+            '100': '#D1FAE5',
+            '200': '#A7F3D0',
+            '300': '#6EE7B7',
+            '400': '#34D399',
+            '500': '#10B981',
+            '600': '#059669',
+            '700': '#047857',
+            '800': '#065F46',
+            '900': '#064E3B',
+            '950': '#022C22',
+        },
+        warning: {
+            '50': '#FFFBEB',
+            '100': '#FEF3C7',
+            '200': '#FDE68A',
+            '300': '#FCD34D',
+            '400': '#FBBF24',
+            '500': '#F59E0B',
+            '600': '#D97706',
+            '700': '#B45309',
+            '800': '#92400E',
+            '900': '#78350F',
+            '950': '#451A03',
+        },
+        danger: {
+            '50': '#FEF2F2',
+            '100': '#FEE2E2',
+            '200': '#FECACA',
+            '300': '#FCA5A5',
+            '400': '#F87171',
+            '500': '#EF4444',
+            '600': '#DC2626',
+            '700': '#B91C1C',
+            '800': '#991B1B',
+            '900': '#7F1D1D',
+            '950': '#450A0A',
+        },
+        neutral: {
+            '50': '#F9FAFB',
+            '100': '#F3F4F6',
+            '200': '#E5E7EB',
+            '300': '#D1D5DB',
+            '400': '#9CA3AF',
+            '500': '#6B7280',
+            '600': '#4B5563',
+            '700': '#374151',
+            '800': '#1F2937',
+            '900': '#111827',
+            '950': '#030712',
+        },
+        background: {
+            base: '#F9FAFB',
+            elevated: '#FFFFFF',
+            overlay: 'rgba(17, 24, 39, 0.5)',
+            // neutral.100 — the shade outline/ghost hovers rendered before this
+            // was a token, so light theme is visually unchanged
+            hover: '#F3F4F6',
+        },
+        text: {
+            primary: '#111827',
+            secondary: '#6B7280',
+            disabled: '#9CA3AF',
+            inverse: '#FFFFFF',
+        },
+        border: {
+            default: '#E5E7EB',
+            subtle: '#F3F4F6',
+            strong: '#D1D5DB',
+        },
+    },
+    typography: {
+        fontFamily: {
+            sans: "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+            mono: "'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace",
+        },
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+        },
+        fontWeight: {
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+    spacing: {
+        '0': '0',
+        px: '1px',
+        '1': '0.25rem',
+        '2': '0.5rem',
+        '3': '0.75rem',
+        '4': '1rem',
+        '5': '1.25rem',
+        '6': '1.5rem',
+        '7': '1.75rem',
+        '8': '2rem',
+        '9': '2.25rem',
+        '10': '2.5rem',
+        '11': '2.75rem',
+        '12': '3rem',
+        '14': '3.5rem',
+        '16': '4rem',
+        '20': '5rem',
+        '24': '6rem',
+    },
+    radius: {
+        none: '0',
+        sm: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        full: '9999px',
+    },
+    shadow: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+    },
+    motion: {
+        duration: {
+            fast: '150ms',
+            normal: '250ms',
+            slow: '400ms',
+        },
+        easing: {
+            standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            enter: 'cubic-bezier(0, 0, 0.2, 1)',
+            exit: 'cubic-bezier(0.4, 0, 1, 1)',
+        },
+    },
+    direction: 'ltr',
+};

package/dist/tokens.json

@@ -0,0 +1,169 @@
+{
+  "color": {
+    "primary": {
+      "50": "#EEF2FF",
+      "100": "#E0E7FF",
+      "200": "#C7D2FE",
+      "300": "#A5B4FC",
+      "400": "#818CF8",
+      "500": "#6366F1",
+      "600": "#4F46E5",
+      "700": "#4338CA",
+      "800": "#3730A3",
+      "900": "#312E81",
+      "950": "#1E1B4B"
+    },
+    "secondary": {
+      "50": "#F5F3FF",
+      "100": "#EDE9FE",
+      "200": "#DDD6FE",
+      "300": "#C4B5FD",
+      "400": "#A78BFA",
+      "500": "#8B5CF6",
+      "600": "#7C3AED",
+      "700": "#6D28D9",
+      "800": "#5B21B6",
+      "900": "#4C1D95",
+      "950": "#2E1065"
+    },
+    "success": {
+      "50": "#ECFDF5",
+      "100": "#D1FAE5",
+      "200": "#A7F3D0",
+      "300": "#6EE7B7",
+      "400": "#34D399",
+      "500": "#10B981",
+      "600": "#059669",
+      "700": "#047857",
+      "800": "#065F46",
+      "900": "#064E3B",
+      "950": "#022C22"
+    },
+    "warning": {
+      "50": "#FFFBEB",
+      "100": "#FEF3C7",
+      "200": "#FDE68A",
+      "300": "#FCD34D",
+      "400": "#FBBF24",
+      "500": "#F59E0B",
+      "600": "#D97706",
+      "700": "#B45309",
+      "800": "#92400E",
+      "900": "#78350F",
+      "950": "#451A03"
+    },
+    "danger": {
+      "50": "#FEF2F2",
+      "100": "#FEE2E2",
+      "200": "#FECACA",
+      "300": "#FCA5A5",
+      "400": "#F87171",
+      "500": "#EF4444",
+      "600": "#DC2626",
+      "700": "#B91C1C",
+      "800": "#991B1B",
+      "900": "#7F1D1D",
+      "950": "#450A0A"
+    },
+    "neutral": {
+      "50": "#F9FAFB",
+      "100": "#F3F4F6",
+      "200": "#E5E7EB",
+      "300": "#D1D5DB",
+      "400": "#9CA3AF",
+      "500": "#6B7280",
+      "600": "#4B5563",
+      "700": "#374151",
+      "800": "#1F2937",
+      "900": "#111827",
+      "950": "#030712"
+    },
+    "background": {
+      "base": "#F9FAFB",
+      "elevated": "#FFFFFF",
+      "overlay": "rgba(17, 24, 39, 0.5)",
+      "hover": "#F3F4F6"
+    },
+    "text": {
+      "primary": "#111827",
+      "secondary": "#6B7280",
+      "disabled": "#9CA3AF",
+      "inverse": "#FFFFFF"
+    },
+    "border": {
+      "default": "#E5E7EB",
+      "subtle": "#F3F4F6",
+      "strong": "#D1D5DB"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif",
+      "mono": "'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace"
+    },
+    "fontSize": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem"
+    },
+    "fontWeight": {
+      "normal": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700
+    },
+    "lineHeight": {
+      "tight": 1.25,
+      "normal": 1.5,
+      "relaxed": 1.75
+    }
+  },
+  "spacing": {
+    "0": "0",
+    "1": "0.25rem",
+    "2": "0.5rem",
+    "3": "0.75rem",
+    "4": "1rem",
+    "5": "1.25rem",
+    "6": "1.5rem",
+    "7": "1.75rem",
+    "8": "2rem",
+    "9": "2.25rem",
+    "10": "2.5rem",
+    "11": "2.75rem",
+    "12": "3rem",
+    "14": "3.5rem",
+    "16": "4rem",
+    "20": "5rem",
+    "24": "6rem",
+    "px": "1px"
+  },
+  "radius": {
+    "none": "0",
+    "sm": "0.25rem",
+    "md": "0.375rem",
+    "lg": "0.5rem",
+    "full": "9999px"
+  },
+  "shadow": {
+    "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+    "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  },
+  "motion": {
+    "duration": {
+      "fast": "150ms",
+      "normal": "250ms",
+      "slow": "400ms"
+    },
+    "easing": {
+      "standard": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "enter": "cubic-bezier(0, 0, 0.2, 1)",
+      "exit": "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  "direction": "ltr"
+}

package/dist/types.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Design token type definitions — the shape every theme (built-in or
+ * plugin) targets. See docs/PROJECT_CONTEXT.md → Design Tokens.
+ */
+export type ColorScaleStep = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+export type ColorScale = Record<ColorScaleStep, string>;
+/**
+ * 4px-base spacing scale. Keys are multiples of the base unit
+ * (spacing '4' = 4 × 4px = 1rem), plus 'px' for hairline offsets.
+ * Dots are avoided in keys so CSS custom property names stay valid
+ * without escaping.
+ */
+export type SpacingStep = '0' | 'px' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '14' | '16' | '20' | '24';
+export type ScaleTokens = Record<SpacingStep, string>;
+export interface VeloraDesignTokens {
+    color: {
+        primary: ColorScale;
+        secondary: ColorScale;
+        success: ColorScale;
+        warning: ColorScale;
+        danger: ColorScale;
+        neutral: ColorScale;
+        background: {
+            base: string;
+            elevated: string;
+            overlay: string;
+            hover: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+            inverse: string;
+        };
+        border: {
+            default: string;
+            subtle: string;
+            strong: string;
+        };
+    };
+    typography: {
+        fontFamily: {
+            sans: string;
+            mono: string;
+        };
+        fontSize: Record<'xs' | 'sm' | 'base' | 'lg' | 'xl', string>;
+        fontWeight: Record<'normal' | 'medium' | 'semibold' | 'bold', number>;
+        lineHeight: Record<'tight' | 'normal' | 'relaxed', number>;
+    };
+    spacing: ScaleTokens;
+    radius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', string>;
+    shadow: Record<'sm' | 'md' | 'lg' | 'xl', string>;
+    motion: {
+        duration: Record<string, string>;
+        easing: Record<string, string>;
+    };
+    direction: 'ltr' | 'rtl';
+}

package/dist/types.js

@@ -0,0 +1,5 @@
+/**
+ * Design token type definitions — the shape every theme (built-in or
+ * plugin) targets. See docs/PROJECT_CONTEXT.md → Design Tokens.
+ */
+export {};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@velora-cms/design-tokens",
+  "version": "0.9.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/velora-cms/velora.git",
+    "directory": "packages/design-tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./dist/tokens.json"
+  },
+  "devDependencies": {
+    "@types/node": "20.19.43"
+  },
+  "scripts": {
+    "build": "tsc -p . && node dist/generate.js",
+    "test": "vitest run"
+  }
+}