@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/tasty/zero/next.d.ts

@@ -0,0 +1,61 @@
+
+//#region src/tasty/zero/next.d.ts
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * Provides a convenient way to configure the Babel plugin for Next.js projects.
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero({
+ *   output: 'public/tasty.css',
+ * })({
+ *   // your Next.js config
+ * });
+ * ```
+ */
+interface WebpackConfigContext {
+  isServer: boolean;
+  dev: boolean;
+  buildId: string;
+  dir: string;
+}
+interface NextConfig {
+  webpack?: (config: any, context: WebpackConfigContext) => any;
+  [key: string]: unknown;
+}
+interface TastyZeroNextOptions {
+  /**
+   * Output path for CSS relative to project root.
+   * @default 'public/tasty.css'
+   */
+  output?: string;
+  /**
+   * Whether to enable the plugin.
+   * @default true
+   */
+  enabled?: boolean;
+}
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * @param options - Configuration options
+ * @returns A function that wraps the Next.js config
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero()({
+ *   reactStrictMode: true,
+ * });
+ * ```
+ */
+declare function withTastyZero(options?: TastyZeroNextOptions): (nextConfig?: NextConfig) => NextConfig;
+//#endregion
+export { TastyZeroNextOptions, withTastyZero };
+//# sourceMappingURL=next.d.ts.map

package/dist/tasty/zero/next.js

@@ -0,0 +1,79 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { __require } from "../../_virtual/_rolldown/runtime.js";
+import * as path from "path";
+
+//#region src/tasty/zero/next.ts
+/**
+* Next.js configuration wrapper for tasty-zero.
+*
+* Provides a convenient way to configure the Babel plugin for Next.js projects.
+*
+* @example
+* ```javascript
+* // next.config.js
+* const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+*
+* module.exports = withTastyZero({
+*   output: 'public/tasty.css',
+* })({
+*   // your Next.js config
+* });
+* ```
+*/
+/**
+* Next.js configuration wrapper for tasty-zero.
+*
+* @param options - Configuration options
+* @returns A function that wraps the Next.js config
+*
+* @example
+* ```javascript
+* // next.config.js
+* const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+*
+* module.exports = withTastyZero()({
+*   reactStrictMode: true,
+* });
+* ```
+*/
+function withTastyZero(options = {}) {
+	const { output = "public/tasty.css", enabled = true } = options;
+	return (nextConfig = {}) => {
+		if (!enabled) return nextConfig;
+		return {
+			...nextConfig,
+			webpack(config, context) {
+				const { isServer, dir } = context;
+				if (!isServer) {
+					const absoluteOutput = path.resolve(dir || process.cwd(), output);
+					const babelPluginConfig = [__require.resolve("./babel"), { output: absoluteOutput }];
+					const existingRule = config.module?.rules?.find((rule) => rule.use?.loader === "babel-loader" || rule.use?.some?.((u) => u.loader === "babel-loader"));
+					if (existingRule) {
+						const babelUse = Array.isArray(existingRule.use) ? existingRule.use.find((u) => u.loader === "babel-loader") : existingRule.use;
+						if (babelUse?.options) {
+							babelUse.options.plugins = babelUse.options.plugins || [];
+							babelUse.options.plugins.push(babelPluginConfig);
+						}
+					} else {
+						config.module = config.module || {};
+						config.module.rules = config.module.rules || [];
+						config.module.rules.push({
+							test: /\.(tsx?|jsx?)$/,
+							exclude: /node_modules/,
+							use: [{
+								loader: __require.resolve("babel-loader"),
+								options: { plugins: [babelPluginConfig] }
+							}]
+						});
+					}
+				}
+				if (typeof nextConfig.webpack === "function") return nextConfig.webpack(config, context);
+				return config;
+			}
+		};
+	};
+}
+
+//#endregion
+export { withTastyZero };
+//# sourceMappingURL=next.js.map

package/dist/tasty/zero/next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.js","names":[],"sources":["../../../src/tasty/zero/next.ts"],"sourcesContent":["/**\n * Next.js configuration wrapper for tasty-zero.\n *\n * Provides a convenient way to configure the Babel plugin for Next.js projects.\n *\n * @example\n * ```javascript\n * // next.config.js\n * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');\n *\n * module.exports = withTastyZero({\n *   output: 'public/tasty.css',\n * })({\n *   // your Next.js config\n * });\n * ```\n */\n\nimport * as path from 'path';\n\n// Next.js types (inline to avoid requiring next as a dependency)\ninterface WebpackConfigContext {\n  isServer: boolean;\n  dev: boolean;\n  buildId: string;\n  dir: string;\n}\n\ninterface NextConfig {\n  webpack?: (config: any, context: WebpackConfigContext) => any;\n  [key: string]: unknown;\n}\n\nexport interface TastyZeroNextOptions {\n  /**\n   * Output path for CSS relative to project root.\n   * @default 'public/tasty.css'\n   */\n  output?: string;\n\n  /**\n   * Whether to enable the plugin.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Next.js configuration wrapper for tasty-zero.\n *\n * @param options - Configuration options\n * @returns A function that wraps the Next.js config\n *\n * @example\n * ```javascript\n * // next.config.js\n * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');\n *\n * module.exports = withTastyZero()({\n *   reactStrictMode: true,\n * });\n * ```\n */\nexport function withTastyZero(options: TastyZeroNextOptions = {}) {\n  const { output = 'public/tasty.css', enabled = true } = options;\n\n  return (nextConfig: NextConfig = {}): NextConfig => {\n    if (!enabled) {\n      return nextConfig;\n    }\n\n    return {\n      ...nextConfig,\n\n      webpack(config: any, context: WebpackConfigContext) {\n        const { isServer, dir } = context;\n\n        // Only process on client build to avoid duplicate CSS generation\n        if (!isServer) {\n          // Get absolute output path\n          const absoluteOutput = path.resolve(dir || process.cwd(), output);\n\n          // Find existing babel-loader rule or add new one\n          const babelPluginConfig = [\n            require.resolve('./babel'),\n            { output: absoluteOutput },\n          ];\n\n          // Add our plugin to the existing babel config or create new rule\n          const existingRule = config.module?.rules?.find(\n            (rule: any) =>\n              rule.use?.loader === 'babel-loader' ||\n              rule.use?.some?.((u: any) => u.loader === 'babel-loader'),\n          );\n\n          if (existingRule) {\n            // Add to existing babel-loader\n            const babelUse = Array.isArray(existingRule.use)\n              ? existingRule.use.find((u: any) => u.loader === 'babel-loader')\n              : existingRule.use;\n\n            if (babelUse?.options) {\n              babelUse.options.plugins = babelUse.options.plugins || [];\n              babelUse.options.plugins.push(babelPluginConfig);\n            }\n          } else {\n            // Add new rule for our plugin\n            config.module = config.module || {};\n            config.module.rules = config.module.rules || [];\n            config.module.rules.push({\n              test: /\\.(tsx?|jsx?)$/,\n              exclude: /node_modules/,\n              use: [\n                {\n                  loader: require.resolve('babel-loader'),\n                  options: {\n                    plugins: [babelPluginConfig],\n                  },\n                },\n              ],\n            });\n          }\n        }\n\n        // Chain with existing webpack config\n        if (typeof nextConfig.webpack === 'function') {\n          return nextConfig.webpack(config, context);\n        }\n\n        return config;\n      },\n    };\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,SAAgB,cAAc,UAAgC,EAAE,EAAE;CAChE,MAAM,EAAE,SAAS,oBAAoB,UAAU,SAAS;AAExD,SAAQ,aAAyB,EAAE,KAAiB;AAClD,MAAI,CAAC,QACH,QAAO;AAGT,SAAO;GACL,GAAG;GAEH,QAAQ,QAAa,SAA+B;IAClD,MAAM,EAAE,UAAU,QAAQ;AAG1B,QAAI,CAAC,UAAU;KAEb,MAAM,iBAAiB,KAAK,QAAQ,OAAO,QAAQ,KAAK,EAAE,OAAO;KAGjE,MAAM,oBAAoB,WAChB,QAAQ,UAAU,EAC1B,EAAE,QAAQ,gBAAgB,CAC3B;KAGD,MAAM,eAAe,OAAO,QAAQ,OAAO,MACxC,SACC,KAAK,KAAK,WAAW,kBACrB,KAAK,KAAK,QAAQ,MAAW,EAAE,WAAW,eAAe,CAC5D;AAED,SAAI,cAAc;MAEhB,MAAM,WAAW,MAAM,QAAQ,aAAa,IAAI,GAC5C,aAAa,IAAI,MAAM,MAAW,EAAE,WAAW,eAAe,GAC9D,aAAa;AAEjB,UAAI,UAAU,SAAS;AACrB,gBAAS,QAAQ,UAAU,SAAS,QAAQ,WAAW,EAAE;AACzD,gBAAS,QAAQ,QAAQ,KAAK,kBAAkB;;YAE7C;AAEL,aAAO,SAAS,OAAO,UAAU,EAAE;AACnC,aAAO,OAAO,QAAQ,OAAO,OAAO,SAAS,EAAE;AAC/C,aAAO,OAAO,MAAM,KAAK;OACvB,MAAM;OACN,SAAS;OACT,KAAK,CACH;QACE,kBAAgB,QAAQ,eAAe;QACvC,SAAS,EACP,SAAS,CAAC,kBAAkB,EAC7B;QACF,CACF;OACF,CAAC;;;AAKN,QAAI,OAAO,WAAW,YAAY,WAChC,QAAO,WAAW,QAAQ,QAAQ,QAAQ;AAG5C,WAAO;;GAEV"}

package/dist/tokens/base.d.ts

@@ -0,0 +1,14 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/base.d.ts
+/**
+ * Base design system tokens.
+ * These define the fundamental units and values used throughout the system.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+declare const BASE_TOKENS: Styles;
+//#endregion
+export { BASE_TOKENS };
+//# sourceMappingURL=base.d.ts.map

package/dist/tokens/base.js

@@ -0,0 +1,40 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/base.ts
+/**
+* Base design system tokens.
+* These define the fundamental units and values used throughout the system.
+*
+* Keys use $ prefix for CSS custom properties.
+*/
+const BASE_TOKENS = {
+	"$font-size": "14px",
+	"$line-height": "20px",
+	"$input-font-size": "14px",
+	"$input-line-height": "20px",
+	"$input-letter-spacing": "0.02em",
+	"$disabled-opacity": ".4",
+	$gap: "8px",
+	"$stroke-width": 1.5,
+	"$outline-width": "calc(1rem / 16 * 3)",
+	"$border-width": "1px",
+	$radius: "6px",
+	"$large-radius": "(1r + .5x)",
+	"$card-radius": "(1r + .5x)",
+	"$sharp-radius": "0px",
+	"$min-dialog-size": "min(288px, calc(100vw - (2 * var(--gap))))",
+	$transition: "80ms",
+	"$disclosure-transition": "120ms",
+	"$tab-transition": "120ms",
+	"$fade-transition": "200ms",
+	"$scrollbar-width": "1.5x",
+	"$scrollbar-outline-width": "1ow",
+	"$scrollbar-radius": "1.5r",
+	"#scrollbar-thumb": "#text.5",
+	"#scrollbar-outline": "#clear",
+	"#scrollbar-bg": "#dark-bg",
+	"#scrollbar-corner": "#clear"
+};
+
+//#endregion
+export { BASE_TOKENS };
+//# sourceMappingURL=base.js.map

package/dist/tokens/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/tokens/base.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n/**\n * Base design system tokens.\n * These define the fundamental units and values used throughout the system.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const BASE_TOKENS: Styles = {\n  // Typography base\n  /** @deprecated Use preset tokens instead */\n  '$font-size': '14px',\n  /** @deprecated Use preset tokens instead */\n  '$line-height': '20px',\n\n  // Input typography\n  '$input-font-size': '14px',\n  '$input-line-height': '20px',\n  '$input-letter-spacing': '0.02em',\n\n  // Opacity & dimensions\n  /** Opacity for disabled elements */\n  '$disabled-opacity': '.4',\n  /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */\n  $gap: '8px',\n  /** Stroke width for icons */\n  '$stroke-width': 1.5,\n  /** Focus outline width */\n  '$outline-width': 'calc(1rem / 16 * 3)',\n  /** Border width for bordered elements */\n  '$border-width': '1px',\n\n  // Border radius\n  /** Base border radius (used with `1r`, `2r` etc.) */\n  $radius: '6px',\n  /** Larger radius using tasty calc: 1r + 0.5x */\n  '$large-radius': '(1r + .5x)',\n  /** Card border radius */\n  '$card-radius': '(1r + .5x)',\n  /** Sharp corner for leaf shapes */\n  '$sharp-radius': '0px',\n\n  // Misc dimensions\n  /** Minimum dialog width (responsive) */\n  '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',\n\n  // Transitions\n  /** Default transition duration */\n  $transition: '80ms',\n  /** Transition for disclosure animations */\n  '$disclosure-transition': '120ms',\n  /** Transition for tab animations */\n  '$tab-transition': '120ms',\n  /** Transition for fade animations */\n  '$fade-transition': '200ms',\n\n  // Scrollbar tokens\n  '$scrollbar-width': '1.5x',\n  '$scrollbar-outline-width': '1ow',\n  '$scrollbar-radius': '1.5r',\n  '#scrollbar-thumb': '#text.5',\n  '#scrollbar-outline': '#clear',\n  '#scrollbar-bg': '#dark-bg',\n  '#scrollbar-corner': '#clear',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAsB;CAGjC,cAAc;CAEd,gBAAgB;CAGhB,oBAAoB;CACpB,sBAAsB;CACtB,yBAAyB;CAIzB,qBAAqB;CAErB,MAAM;CAEN,iBAAiB;CAEjB,kBAAkB;CAElB,iBAAiB;CAIjB,SAAS;CAET,iBAAiB;CAEjB,gBAAgB;CAEhB,iBAAiB;CAIjB,oBAAoB;CAIpB,aAAa;CAEb,0BAA0B;CAE1B,mBAAmB;CAEnB,oBAAoB;CAGpB,oBAAoB;CACpB,4BAA4B;CAC5B,qBAAqB;CACrB,oBAAoB;CACpB,sBAAsB;CACtB,iBAAiB;CACjB,qBAAqB;CACtB"}

package/dist/tokens/colors.d.ts

@@ -0,0 +1,13 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/colors.d.ts
+/**
+ * Color tokens with # prefix for tasty color definitions.
+ * The tasty system automatically generates {name}-color-rgb variants.
+ * Colors are defined in OKHSL format for perceptually uniform color manipulation.
+ */
+declare const COLOR_TOKENS: Styles;
+//#endregion
+export { COLOR_TOKENS };
+//# sourceMappingURL=colors.d.ts.map

package/dist/tokens/colors.js

@@ -0,0 +1,90 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/colors.ts
+const PINK_HUE = 5;
+const PURPLE_HUE = 280.3;
+const DANGER_HUE = 23.1;
+const SUCCESS_HUE = 156.9;
+const WARNING_HUE = 84.3;
+const NOTE_HUE = 302.3;
+const MAIN_SATURATION = 80;
+const BG_SATURATION = 60;
+const ICON_SATURATION = 75;
+const MAIN_LIGHTNESS = 52;
+const TEXT_LIGHTNESS = 45;
+const BG_LIGHTNESS = 97;
+const ICON_LIGHTNESS = 60;
+const DISABLED_SATURATION = 32;
+const DISABLED_LIGHTNESS = 80.8;
+/** Generate an OKHSL color string */
+const okhsl = (h, s, l) => `okhsl(${h} ${s}% ${l}%)`;
+/**
+* Color tokens with # prefix for tasty color definitions.
+* The tasty system automatically generates {name}-color-rgb variants.
+* Colors are defined in OKHSL format for perceptually uniform color manipulation.
+*/
+const COLOR_TOKENS = {
+	"#pink": okhsl(PINK_HUE, 100, 67),
+	"#primary": okhsl(PURPLE_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),
+	"#primary-text": okhsl(PURPLE_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),
+	"#primary-bg": okhsl(PURPLE_HUE, BG_SATURATION, BG_LIGHTNESS),
+	"#primary-icon": okhsl(PURPLE_HUE, ICON_SATURATION, ICON_LIGHTNESS),
+	"#primary-desaturated": okhsl(PURPLE_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),
+	"#primary-disabled": okhsl(PURPLE_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),
+	"#purple": "#primary",
+	"#purple-text": "#primary-text",
+	"#purple-bg": "#primary-bg",
+	"#purple-icon": "#primary-icon",
+	"#purple-disabled": "#primary-disabled",
+	"#purple-01": okhsl(PURPLE_HUE, 100, 58),
+	"#purple-02": okhsl(PURPLE_HUE, 100, 66),
+	"#purple-03": okhsl(PURPLE_HUE, 100, 74),
+	"#purple-04": okhsl(PURPLE_HUE, 100, 83),
+	"#focus": okhsl(PURPLE_HUE, 69, 71),
+	"#text": okhsl(PURPLE_HUE, 30, 31),
+	"#dark": okhsl(PURPLE_HUE, 38, 12),
+	"#dark-01": okhsl(PURPLE_HUE, 38, 12),
+	"#dark-02": okhsl(PURPLE_HUE, 30, 31),
+	"#dark-03": okhsl(PURPLE_HUE, 19, 49),
+	"#dark-04": okhsl(PURPLE_HUE, 14, 67),
+	"#dark-05": okhsl(PURPLE_HUE, 14, 86),
+	"#dark-bg": okhsl(PURPLE_HUE, 21, 98),
+	"#light": okhsl(PURPLE_HUE, 14, 97),
+	"#white": "okhsl(0 0% 100%)",
+	"#black": "okhsl(0 0% 0%)",
+	"#danger": okhsl(DANGER_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),
+	"#danger-text": okhsl(DANGER_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),
+	"#danger-bg": okhsl(DANGER_HUE, BG_SATURATION, BG_LIGHTNESS),
+	"#danger-icon": okhsl(DANGER_HUE, ICON_SATURATION, ICON_LIGHTNESS),
+	"#danger-desaturated": okhsl(DANGER_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),
+	"#danger-disabled": okhsl(DANGER_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),
+	"#success": okhsl(SUCCESS_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),
+	"#success-text": okhsl(SUCCESS_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),
+	"#success-bg": okhsl(SUCCESS_HUE, BG_SATURATION, BG_LIGHTNESS),
+	"#success-icon": okhsl(SUCCESS_HUE, ICON_SATURATION, ICON_LIGHTNESS),
+	"#success-desaturated": okhsl(SUCCESS_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),
+	"#success-disabled": okhsl(SUCCESS_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),
+	"#warning": okhsl(WARNING_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),
+	"#warning-text": okhsl(WARNING_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),
+	"#warning-bg": okhsl(WARNING_HUE, BG_SATURATION, BG_LIGHTNESS),
+	"#warning-icon": okhsl(WARNING_HUE, ICON_SATURATION, ICON_LIGHTNESS),
+	"#warning-desaturated": okhsl(WARNING_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),
+	"#warning-disabled": okhsl(WARNING_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),
+	"#note": okhsl(NOTE_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),
+	"#note-text": okhsl(NOTE_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),
+	"#note-bg": okhsl(NOTE_HUE, BG_SATURATION, BG_LIGHTNESS),
+	"#note-icon": okhsl(NOTE_HUE, ICON_SATURATION, ICON_LIGHTNESS),
+	"#note-desaturated": okhsl(NOTE_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),
+	"#note-disabled": okhsl(NOTE_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),
+	"#border": okhsl(PURPLE_HUE, 13, 90),
+	"#placeholder": "#dark-04",
+	"#clear": "transparent",
+	"#shadow": "#dark.06",
+	"#minor": "#dark.65",
+	"#disabled": "#dark-01.25",
+	"#disabled-text": "#dark-01.25",
+	"#disabled-bg": "#dark-05.2"
+};
+
+//#endregion
+export { COLOR_TOKENS };
+//# sourceMappingURL=colors.js.map

package/dist/tokens/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","names":[],"sources":["../../src/tokens/colors.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n// ============================================================================\n// Color Constants (OKHSL)\n// ============================================================================\n\n// Hue values (degrees)\nexport const PINK_HUE = 5.0;\nexport const PURPLE_HUE = 280.3;\nexport const DANGER_HUE = 23.1;\nexport const SUCCESS_HUE = 156.9;\nexport const WARNING_HUE = 84.3;\nexport const NOTE_HUE = 302.3;\n\n// Saturation values (%)\nexport const MAIN_SATURATION = 80;\nexport const BG_SATURATION = 60;\nexport const ICON_SATURATION = 75;\n\n// Lightness values (%)\nexport const MAIN_LIGHTNESS = 52;\nexport const TEXT_LIGHTNESS = 45;\nexport const BG_LIGHTNESS = 97;\nexport const ICON_LIGHTNESS = 60;\n\n// Disabled state values (60% white + 40% main color in okhsl)\n// Saturation: 0.6 * 0 + 0.4 * MAIN_SATURATION = 32\n// Lightness: 0.6 * 100 + 0.4 * MAIN_LIGHTNESS = 80.8\nexport const DISABLED_SATURATION = 32;\nexport const DISABLED_LIGHTNESS = 80.8;\n\n// ============================================================================\n// Helper function\n// ============================================================================\n\n/** Generate an OKHSL color string */\nconst okhsl = (h: number, s: number, l: number): string =>\n  `okhsl(${h} ${s}% ${l}%)`;\n\n// ============================================================================\n// Color Tokens\n// ============================================================================\n\n/**\n * Color tokens with # prefix for tasty color definitions.\n * The tasty system automatically generates {name}-color-rgb variants.\n * Colors are defined in OKHSL format for perceptually uniform color manipulation.\n */\nexport const COLOR_TOKENS: Styles = {\n  // Base colors - Pink\n  '#pink': okhsl(PINK_HUE, 100, 67),\n\n  // Primary colors (semantic aliases)\n  '#primary': okhsl(PURPLE_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),\n  '#primary-text': okhsl(PURPLE_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),\n  '#primary-bg': okhsl(PURPLE_HUE, BG_SATURATION, BG_LIGHTNESS),\n  '#primary-icon': okhsl(PURPLE_HUE, ICON_SATURATION, ICON_LIGHTNESS),\n  '#primary-desaturated': okhsl(\n    PURPLE_HUE,\n    DISABLED_SATURATION,\n    MAIN_LIGHTNESS,\n  ),\n  '#primary-disabled': okhsl(\n    PURPLE_HUE,\n    DISABLED_SATURATION,\n    DISABLED_LIGHTNESS,\n  ),\n\n  // Base colors - Purple (legacy aliases for backward compatibility)\n  '#purple': '#primary',\n  '#purple-text': '#primary-text',\n  '#purple-bg': '#primary-bg',\n  '#purple-icon': '#primary-icon',\n  '#purple-disabled': '#primary-disabled',\n  '#purple-01': okhsl(PURPLE_HUE, 100, 58),\n  '#purple-02': okhsl(PURPLE_HUE, 100, 66),\n  '#purple-03': okhsl(PURPLE_HUE, 100, 74),\n  '#purple-04': okhsl(PURPLE_HUE, 100, 83),\n\n  // Focus\n  '#focus': okhsl(PURPLE_HUE, 69, 71),\n\n  // Text\n  '#text': okhsl(PURPLE_HUE, 30, 31),\n\n  // Dark\n  '#dark': okhsl(PURPLE_HUE, 38, 12),\n  '#dark-01': okhsl(PURPLE_HUE, 38, 12),\n  '#dark-02': okhsl(PURPLE_HUE, 30, 31),\n  '#dark-03': okhsl(PURPLE_HUE, 19, 49),\n  '#dark-04': okhsl(PURPLE_HUE, 14, 67),\n  '#dark-05': okhsl(PURPLE_HUE, 14, 86),\n  '#dark-bg': okhsl(PURPLE_HUE, 21, 98),\n\n  // Light\n  '#light': okhsl(PURPLE_HUE, 14, 97),\n\n  // Black & White\n  '#white': 'okhsl(0 0% 100%)',\n  '#black': 'okhsl(0 0% 0%)',\n\n  // Danger (red)\n  '#danger': okhsl(DANGER_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),\n  '#danger-text': okhsl(DANGER_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),\n  '#danger-bg': okhsl(DANGER_HUE, BG_SATURATION, BG_LIGHTNESS),\n  '#danger-icon': okhsl(DANGER_HUE, ICON_SATURATION, ICON_LIGHTNESS),\n  '#danger-desaturated': okhsl(DANGER_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),\n  '#danger-disabled': okhsl(\n    DANGER_HUE,\n    DISABLED_SATURATION,\n    DISABLED_LIGHTNESS,\n  ),\n\n  // Success (green)\n  '#success': okhsl(SUCCESS_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),\n  '#success-text': okhsl(SUCCESS_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),\n  '#success-bg': okhsl(SUCCESS_HUE, BG_SATURATION, BG_LIGHTNESS),\n  '#success-icon': okhsl(SUCCESS_HUE, ICON_SATURATION, ICON_LIGHTNESS),\n  '#success-desaturated': okhsl(\n    SUCCESS_HUE,\n    DISABLED_SATURATION,\n    MAIN_LIGHTNESS,\n  ),\n  '#success-disabled': okhsl(\n    SUCCESS_HUE,\n    DISABLED_SATURATION,\n    DISABLED_LIGHTNESS,\n  ),\n\n  // Warning (yellow/amber)\n  '#warning': okhsl(WARNING_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),\n  '#warning-text': okhsl(WARNING_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),\n  '#warning-bg': okhsl(WARNING_HUE, BG_SATURATION, BG_LIGHTNESS),\n  '#warning-icon': okhsl(WARNING_HUE, ICON_SATURATION, ICON_LIGHTNESS),\n  '#warning-desaturated': okhsl(\n    WARNING_HUE,\n    DISABLED_SATURATION,\n    MAIN_LIGHTNESS,\n  ),\n  '#warning-disabled': okhsl(\n    WARNING_HUE,\n    DISABLED_SATURATION,\n    DISABLED_LIGHTNESS,\n  ),\n\n  // Note (violet)\n  '#note': okhsl(NOTE_HUE, MAIN_SATURATION, MAIN_LIGHTNESS),\n  '#note-text': okhsl(NOTE_HUE, MAIN_SATURATION, TEXT_LIGHTNESS),\n  '#note-bg': okhsl(NOTE_HUE, BG_SATURATION, BG_LIGHTNESS),\n  '#note-icon': okhsl(NOTE_HUE, ICON_SATURATION, ICON_LIGHTNESS),\n  '#note-desaturated': okhsl(NOTE_HUE, DISABLED_SATURATION, MAIN_LIGHTNESS),\n  '#note-disabled': okhsl(NOTE_HUE, DISABLED_SATURATION, DISABLED_LIGHTNESS),\n\n  // Border\n  '#border': okhsl(PURPLE_HUE, 13, 90),\n\n  '#placeholder': '#dark-04',\n\n  // Semantic colors\n  '#clear': 'transparent',\n  '#shadow': '#dark.06',\n  '#minor': '#dark.65',\n\n  // Disabled state colors\n  '#disabled': '#dark-01.25',\n  '#disabled-text': '#dark-01.25',\n  '#disabled-bg': '#dark-05.2',\n};\n"],"mappings":"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"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,30 @@
+
+import { Styles } from "../tasty/styles/types.js";
+import { TYPOGRAPHY_PRESETS, TypographyPreset } from "./typography.js";
+import { COLOR_TOKENS } from "./colors.js";
+import { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS, SizeKey, SizeName } from "./sizes.js";
+import { SPACE_TOKENS } from "./spacing.js";
+import { SHADOW_TOKENS } from "./shadows.js";
+import { LAYOUT_TOKENS } from "./layout.js";
+import { BASE_TOKENS } from "./base.js";
+
+//#region src/tokens/index.d.ts
+/**
+ * All design tokens combined into a single Styles object.
+ * Keys use $ prefix for CSS custom properties.
+ *
+ * Ready for use with useGlobalStyles('body', TOKENS).
+ *
+ * Includes:
+ * - Base tokens ($gap, $radius, etc.)
+ * - Space tokens ($space-xs, $space-sm, etc.)
+ * - Size tokens ($size-xs, $size-sm, etc.)
+ * - Shadow tokens ($shadow, $item-shadow, etc.)
+ * - Layout tokens ($max-content-width, $topbar-height, etc.)
+ * - Typography tokens ($h1-font-size, $t3-line-height, etc.)
+ * - Color tokens ($purple-color, $purple-color-rgb, etc.)
+ */
+declare const TOKENS: Styles;
+//#endregion
+export { TOKENS };
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.js

@@ -0,0 +1,54 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { TYPOGRAPHY_PRESETS } from "./typography.js";
+import { generateTypographyTokens } from "../tasty/utils/typography.js";
+import { BASE_TOKENS } from "./base.js";
+import { COLOR_TOKENS } from "./colors.js";
+import { LAYOUT_TOKENS } from "./layout.js";
+import { SHADOW_TOKENS } from "./shadows.js";
+import { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from "./sizes.js";
+import { SPACE_TOKENS } from "./spacing.js";
+
+//#region src/tokens/index.ts
+/**
+* Design tokens for the Cube UI Kit.
+*
+* This module exports all design tokens used throughout the design system.
+* All token keys use $ prefix for CSS custom properties.
+*
+* Categories:
+* - Colors: Base color palette with -color and -color-rgb variants
+* - Typography: Font presets for headings, text, paragraphs, etc.
+* - Sizes: Component size values (XS, SM, MD, LG, XL)
+* - Spacing: Space tokens using gap multipliers
+* - Shadows: Shadow definitions for elevation
+* - Layout: Common layout dimensions
+* - Base: Core design system values
+*/
+/**
+* All design tokens combined into a single Styles object.
+* Keys use $ prefix for CSS custom properties.
+*
+* Ready for use with useGlobalStyles('body', TOKENS).
+*
+* Includes:
+* - Base tokens ($gap, $radius, etc.)
+* - Space tokens ($space-xs, $space-sm, etc.)
+* - Size tokens ($size-xs, $size-sm, etc.)
+* - Shadow tokens ($shadow, $item-shadow, etc.)
+* - Layout tokens ($max-content-width, $topbar-height, etc.)
+* - Typography tokens ($h1-font-size, $t3-line-height, etc.)
+* - Color tokens ($purple-color, $purple-color-rgb, etc.)
+*/
+const TOKENS = {
+	...BASE_TOKENS,
+	...SPACE_TOKENS,
+	...SIZE_TOKENS,
+	...SHADOW_TOKENS,
+	...LAYOUT_TOKENS,
+	...generateTypographyTokens(),
+	...COLOR_TOKENS
+};
+
+//#endregion
+export { TOKENS };
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * Design tokens for the Cube UI Kit.\n *\n * This module exports all design tokens used throughout the design system.\n * All token keys use $ prefix for CSS custom properties.\n *\n * Categories:\n * - Colors: Base color palette with -color and -color-rgb variants\n * - Typography: Font presets for headings, text, paragraphs, etc.\n * - Sizes: Component size values (XS, SM, MD, LG, XL)\n * - Spacing: Space tokens using gap multipliers\n * - Shadows: Shadow definitions for elevation\n * - Layout: Common layout dimensions\n * - Base: Core design system values\n */\n\nimport { generateTypographyTokens } from '../tasty/utils/typography';\n\nimport { BASE_TOKENS } from './base';\nimport { COLOR_TOKENS } from './colors';\nimport { LAYOUT_TOKENS } from './layout';\nimport { SHADOW_TOKENS } from './shadows';\nimport { SIZE_NAME_TO_KEY, SIZE_TOKENS, SIZES } from './sizes';\nimport { SPACE_TOKENS } from './spacing';\n\nimport type { Styles } from '../tasty/styles/types';\nimport type { SizeKey, SizeName } from './sizes';\n\n/**\n * All design tokens combined into a single Styles object.\n * Keys use $ prefix for CSS custom properties.\n *\n * Ready for use with useGlobalStyles('body', TOKENS).\n *\n * Includes:\n * - Base tokens ($gap, $radius, etc.)\n * - Space tokens ($space-xs, $space-sm, etc.)\n * - Size tokens ($size-xs, $size-sm, etc.)\n * - Shadow tokens ($shadow, $item-shadow, etc.)\n * - Layout tokens ($max-content-width, $topbar-height, etc.)\n * - Typography tokens ($h1-font-size, $t3-line-height, etc.)\n * - Color tokens ($purple-color, $purple-color-rgb, etc.)\n */\nexport const TOKENS: Styles = {\n  ...BASE_TOKENS,\n  ...SPACE_TOKENS,\n  ...SIZE_TOKENS,\n  ...SHADOW_TOKENS,\n  ...LAYOUT_TOKENS,\n  ...generateTypographyTokens(),\n  ...COLOR_TOKENS,\n};\n\n// Re-export category modules for direct access\nexport { COLOR_TOKENS } from './colors';\nexport { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from './sizes';\nexport type { SizeKey, SizeName } from './sizes';\nexport { SPACE_TOKENS } from './spacing';\nexport { SHADOW_TOKENS } from './shadows';\nexport { LAYOUT_TOKENS } from './layout';\nexport { BASE_TOKENS } from './base';\nexport { TYPOGRAPHY_PRESETS } from './typography';\nexport type { TypographyPreset } from './typography';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,SAAiB;CAC5B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG,0BAA0B;CAC7B,GAAG;CACJ"}

package/dist/tokens/layout.d.ts

@@ -0,0 +1,13 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/layout.d.ts
+/**
+ * Layout-related tokens for common UI dimensions.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+declare const LAYOUT_TOKENS: Styles;
+//#endregion
+export { LAYOUT_TOKENS };
+//# sourceMappingURL=layout.d.ts.map

package/dist/tokens/layout.js

@@ -0,0 +1,18 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/layout.ts
+/**
+* Layout-related tokens for common UI dimensions.
+*
+* Keys use $ prefix for CSS custom properties.
+*/
+const LAYOUT_TOKENS = {
+	"$max-content-width": "1440px",
+	"$topbar-height": "48px",
+	"$devmodebar-height": "54px",
+	"$sidebar-width": "200px",
+	"$border-radius-base": "4px"
+};
+
+//#endregion
+export { LAYOUT_TOKENS };
+//# sourceMappingURL=layout.js.map

package/dist/tokens/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../src/tokens/layout.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n/**\n * Layout-related tokens for common UI dimensions.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const LAYOUT_TOKENS: Styles = {\n  /** Maximum width for main content areas */\n  '$max-content-width': '1440px',\n  /** Height of the top navigation bar */\n  '$topbar-height': '48px',\n  /** Height of the development mode indicator bar */\n  '$devmodebar-height': '54px',\n  /** Width of the sidebar navigation */\n  '$sidebar-width': '200px',\n  /** Base border radius (legacy, prefer `radius`) */\n  '$border-radius-base': '4px',\n};\n"],"mappings":";;;;;;;AAOA,MAAa,gBAAwB;CAEnC,sBAAsB;CAEtB,kBAAkB;CAElB,sBAAsB;CAEtB,kBAAkB;CAElB,uBAAuB;CACxB"}

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,18 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/shadows.d.ts
+/**
+ * Shadow tokens using tasty shorthand syntax.
+ *
+ * Format: `<offset-y> <blur> <spread?> <color>`
+ * - `1bw` = 1 × border-width
+ * - `.5x` = 0.5 × gap
+ * - `#dark.15` = dark color at 15% opacity
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+declare const SHADOW_TOKENS: Styles;
+//#endregion
+export { SHADOW_TOKENS };
+//# sourceMappingURL=shadows.d.ts.map

package/dist/tokens/shadows.js

@@ -0,0 +1,22 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/shadows.ts
+/**
+* Shadow tokens using tasty shorthand syntax.
+*
+* Format: `<offset-y> <blur> <spread?> <color>`
+* - `1bw` = 1 × border-width
+* - `.5x` = 0.5 × gap
+* - `#dark.15` = dark color at 15% opacity
+*
+* Keys use $ prefix for CSS custom properties.
+*/
+const SHADOW_TOKENS = {
+	"$item-shadow": "0 1bw .375x #dark.15",
+	"$card-shadow": "0 .5x 2x #shadow",
+	$shadow: "0 .5x 2x #shadow",
+	"$dialog-shadow": "0 1x 4x #dark.15"
+};
+
+//#endregion
+export { SHADOW_TOKENS };
+//# sourceMappingURL=shadows.js.map

package/dist/tokens/shadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.js","names":[],"sources":["../../src/tokens/shadows.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n/**\n * Shadow tokens using tasty shorthand syntax.\n *\n * Format: `<offset-y> <blur> <spread?> <color>`\n * - `1bw` = 1 × border-width\n * - `.5x` = 0.5 × gap\n * - `#dark.15` = dark color at 15% opacity\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const SHADOW_TOKENS: Styles = {\n  /** Subtle shadow for list items */\n  '$item-shadow': '0 1bw .375x #dark.15',\n  /** Standard card shadow */\n  '$card-shadow': '0 .5x 2x #shadow',\n  /** Standard elevation */\n  $shadow: '0 .5x 2x #shadow',\n  /** Elevated dialog shadow */\n  '$dialog-shadow': '0 1x 4x #dark.15',\n};\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gBAAwB;CAEnC,gBAAgB;CAEhB,gBAAgB;CAEhB,SAAS;CAET,kBAAkB;CACnB"}

package/dist/tokens/sizes.d.ts

@@ -0,0 +1,31 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/sizes.d.ts
+/**
+ * Component size values in pixels.
+ * Used for buttons, inputs, and other interactive elements.
+ */
+declare const SIZES: {
+  readonly XS: 24;
+  readonly SM: 28;
+  readonly MD: 32;
+  readonly LG: 40;
+  readonly XL: 48;
+};
+type SizeKey = keyof typeof SIZES;
+/** Human-readable size names */
+type SizeName = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * Map from size names to size keys.
+ * @example SIZE_NAME_TO_KEY['small'] // 'SM'
+ */
+declare const SIZE_NAME_TO_KEY: Record<SizeName, SizeKey>;
+/**
+ * Size tokens with $ prefix for CSS custom properties.
+ * Creates tokens like `$size-xs`, `$size-sm`, etc.
+ */
+declare const SIZE_TOKENS: Styles;
+//#endregion
+export { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS, SizeKey, SizeName };
+//# sourceMappingURL=sizes.d.ts.map

package/dist/tokens/sizes.js

@@ -0,0 +1,39 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/sizes.ts
+/**
+* Component size values in pixels.
+* Used for buttons, inputs, and other interactive elements.
+*/
+const SIZES = {
+	XS: 24,
+	SM: 28,
+	MD: 32,
+	LG: 40,
+	XL: 48
+};
+/**
+* Map from size names to size keys.
+* @example SIZE_NAME_TO_KEY['small'] // 'SM'
+*/
+const SIZE_NAME_TO_KEY = {
+	xsmall: "XS",
+	small: "SM",
+	medium: "MD",
+	large: "LG",
+	xlarge: "XL"
+};
+/**
+* Size tokens with $ prefix for CSS custom properties.
+* Creates tokens like `$size-xs`, `$size-sm`, etc.
+*/
+const SIZE_TOKENS = {
+	"$size-xs": `${SIZES.XS}px`,
+	"$size-sm": `${SIZES.SM}px`,
+	"$size-md": `${SIZES.MD}px`,
+	"$size-lg": `${SIZES.LG}px`,
+	"$size-xl": `${SIZES.XL}px`
+};
+
+//#endregion
+export { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS };
+//# sourceMappingURL=sizes.js.map

package/dist/tokens/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","names":[],"sources":["../../src/tokens/sizes.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n/**\n * Component size values in pixels.\n * Used for buttons, inputs, and other interactive elements.\n */\nexport const SIZES = {\n  XS: 24,\n  SM: 28,\n  MD: 32,\n  LG: 40,\n  XL: 48,\n} as const;\n\nexport type SizeKey = keyof typeof SIZES;\n\n/** Human-readable size names */\nexport type SizeName = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\n\n/**\n * Map from size names to size keys.\n * @example SIZE_NAME_TO_KEY['small'] // 'SM'\n */\nexport const SIZE_NAME_TO_KEY: Record<SizeName, SizeKey> = {\n  xsmall: 'XS',\n  small: 'SM',\n  medium: 'MD',\n  large: 'LG',\n  xlarge: 'XL',\n};\n\n/**\n * Size tokens with $ prefix for CSS custom properties.\n * Creates tokens like `$size-xs`, `$size-sm`, etc.\n */\nexport const SIZE_TOKENS: Styles = {\n  '$size-xs': `${SIZES.XS}px`,\n  '$size-sm': `${SIZES.SM}px`,\n  '$size-md': `${SIZES.MD}px`,\n  '$size-lg': `${SIZES.LG}px`,\n  '$size-xl': `${SIZES.XL}px`,\n};\n"],"mappings":";;;;;;AAMA,MAAa,QAAQ;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;;;;;AAWD,MAAa,mBAA8C;CACzD,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACT;;;;;AAMD,MAAa,cAAsB;CACjC,YAAY,GAAG,MAAM,GAAG;CACxB,YAAY,GAAG,MAAM,GAAG;CACxB,YAAY,GAAG,MAAM,GAAG;CACxB,YAAY,GAAG,MAAM,GAAG;CACxB,YAAY,GAAG,MAAM,GAAG;CACzB"}

package/dist/tokens/spacing.d.ts

@@ -0,0 +1,14 @@
+
+import { Styles } from "../tasty/styles/types.js";
+
+//#region src/tokens/spacing.d.ts
+/**
+ * Spacing tokens using tasty multiplier syntax.
+ * Values like `.5x` mean 0.5 × gap, `2x` means 2 × gap.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+declare const SPACE_TOKENS: Styles;
+//#endregion
+export { SPACE_TOKENS };
+//# sourceMappingURL=spacing.d.ts.map

package/dist/tokens/spacing.js

@@ -0,0 +1,19 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/tokens/spacing.ts
+/**
+* Spacing tokens using tasty multiplier syntax.
+* Values like `.5x` mean 0.5 × gap, `2x` means 2 × gap.
+*
+* Keys use $ prefix for CSS custom properties.
+*/
+const SPACE_TOKENS = {
+	"$space-xs": ".5x",
+	"$space-sm": ".75x",
+	"$space-md": "1x",
+	"$space-lg": "1.5x",
+	"$space-xl": "2x"
+};
+
+//#endregion
+export { SPACE_TOKENS };
+//# sourceMappingURL=spacing.js.map

package/dist/tokens/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","names":[],"sources":["../../src/tokens/spacing.ts"],"sourcesContent":["import type { Styles } from '../tasty/styles/types';\n\n/**\n * Spacing tokens using tasty multiplier syntax.\n * Values like `.5x` mean 0.5 × gap, `2x` means 2 × gap.\n *\n * Keys use $ prefix for CSS custom properties.\n */\nexport const SPACE_TOKENS: Styles = {\n  '$space-xs': '.5x',\n  '$space-sm': '.75x',\n  '$space-md': '1x',\n  '$space-lg': '1.5x',\n  '$space-xl': '2x',\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,eAAuB;CAClC,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACb,aAAa;CACd"}