@ui0/theme 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,114 @@
-# Temporary Holding Version
+# @ui0/theme — генерация темы
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Генератор CSS-тем из конфига. Три способа запуска: CLI, Vite-плагин и
+библиотечный API (`generateThemeCss(config)`). Ниже — первые два.
+
+## Конфиг
+
+По умолчанию ищется в корне проекта (`--cwd` / Vite root) под именем
+`ui0.config.ts` или `ui0-theme.config.ts`, default-экспорт — `ThemeConfig`:
+
+```ts
+import type { ThemeConfig } from '@ui0/theme'
+
+export default {
+  default: {
+    // твоя базовая линия (не обязательно)
+    controls: { controlSize: '40px' }
+  },
+  playground: {
+    // каждая тема -> класс .theme-playground
+    colors: {
+      brand: ['#6a5cff', 4], // база + 4 lighten/darken-ступени
+      accent: ['#02a694', 4, ['c', 's']], // + contrast/shade рампы
+      sea: [['#0d654e', '#000', 50], 3] // бленд 50% + рампа
+    },
+    dark: { background: '#0b0b0b' }, // перекрытия схемы
+    light: { background: '#fff' }
+    // typography / roundings / density / durations / settings / extends ...
+  }
+} satisfies ThemeConfig
+```
+
+Слияние с дефолтами (`withDefaults`, вызывается CLI и плагином самостоятельно):
+каждая тема получает недостающие токены из твоего `default` (если объявлен),
+а тот, в свою очередь, — из встроенного `config.default.ts`. Приоритет:
+**тема > твой `default` > встроенный default**. Без конфига генерируется
+только встроенный default.
+
+## Способ 1: терминал (CLI)
+
+```bash
+# в проекте-потребителе (пакет установлен):
+pnpm ui0-theme            # ui0.config.ts -> src/assets/theme.css
+pnpm ui0-theme -w         # то же + пересборка при правке конфига
+
+# в этом монорепо (из корня):
+node packages/theme/dist/generator/cli.mjs --cwd playground
+```
+
+Флаги:
+
+| флаг                  | значение                                          |
+| --------------------- | ------------------------------------------------- |
+| `-c, --config <path>` | явный путь к конфигу (иначе авто-поиск)           |
+| `-o, --out <path>`    | куда писать CSS (default: `src/assets/theme.css`) |
+| `-w, --watch`         | пересборка при изменении конфига                  |
+| `--cwd <dir>`         | корень проекта (default: текущая директория)      |
+| `-h, --help`          | справка                                           |
+
+## Способ 2: Vite-плагин
+
+```ts
+// vite.config.ts
+import ui0Theme from '@ui0/theme/vite'
+
+export default defineConfig({
+  plugins: [ui0Theme({ out: 'src/assets/theme.css' })]
+})
+```
+
+Три режима потребления:
+
+1. **Файл (`out`)** — плагин пишет CSS в `out` и рядом `.d.ts`
+   (типизирует `name`/`appearance` у ThemeProvider через глобальные
+   `Ui0ThemeNames` / `Ui0ThemeSchemeNames`). Импортируй как обычный css.
+2. **Виртуальный CSS** (без `out`): `import 'virtual:ui0-theme.css'` —
+   CSS идёт через пайплайн Vite (HMR, ассет на билде).
+3. **Виртуальный JS**: `import { applyUi0Theme } from 'virtual:ui0-theme'` —
+   модуль со строкой CSS; `applyUi0Theme()` сам вставляет `<style>`, когда
+   приложение решает применить тему (например, после чтения сохранённой
+   схемы, до первой отрисовки).
+
+Опции: `config` (явный путь к конфигу) и `out`. Правка конфига пересобирает
+тему на лету: в режиме `out` — перезапись файла, в виртуальных — full-reload.
+
+## Контракты пропов (dist-артефакты)
+
+Каждый контракт (`size`, `color`, `round`, `backdrop`, `elevation`, `disabled`)
+собирается в два dist-файла (`scripts/build-contracts.ts`, часть `theme:build`):
+
+- `@use '@ui0/theme/size'` → `dist/size.scss` — scss-миксины контракта;
+- `@value sized, sizeM from '@ui0/theme/size.module.css'` →
+  `dist/size.module.css` — `@value className: classHash;` на класс:
+  имена вида `si_81de` (детерминированный хеш от имени класса), совпадают с
+  теми, что получают TS-импорты контрактных `*.module.css`.
+
+Работу делает плагин `@ui0/vite/css-modules`
+(`ui0CssModulesHash`, в tsdown/vitest-конфигах theme; standalone-обёртка —
+`scripts/build-contracts.ts`). Тот же плагин подключается к пакетам
+компонентов: `ui0CssModulesHash({ entries: ['src/components'] })` —
+каждая папка с `<component>.module.css` соберётся в такие же dist-артефакты.
+Общие scss-утилиты (`src/styles`) дистиллируются туда же (`extraScss`) и
+импортируются так же: `@use '@ui0/theme/is' as is; @use '@ui0/theme/theme';`.
+
+## Разработка пакета
+
+```bash
+pnpm gen:theme-default    # зеркало встроенной темы (src/generator/theme.default.css)
+pnpm gen:theme-contracts  # dist-артефакты контрактов (dist/<name>.scss + .module.css)
+```
+
+Скрипты применяются автоматически: `prepare` (после install), `theme:build`
+(gen-theme-default → tsdown → build-contracts). Проверки: `theme:test`,
+`theme:typecheck`. См. `src/index.md` — карта файлов.

package/dist/backdrop.module.css

@@ -0,0 +1 @@
+@value backdrop: ba_d486;

package/dist/backdrop.scss

@@ -0,0 +1,7 @@
+// the backdrop contract's scss endpoint: apply any backdrop-filter function
+// with the configured default (mirrors the generated setter classes).
+@mixin use($function: blur, $value: var(--0-backdrop-blur, 4px)) {
+  backdrop-filter: #{$function}(#{$value});
+  -webkit-backdrop-filter: #{$function}(#{$value});
+  will-change: backdrop-filter;
+}

package/dist/color.inject.module.css

@@ -0,0 +1,7 @@
+@value colored: co_ca8c;
+@value filled: fi_8a2f;
+@value gradiented: gr_9658;
+
+.co_ca8c { /* slot marker */ }
+.fi_8a2f { /* slot marker */ }
+.gr_9658 { /* slot marker */ }

package/dist/color.module.css

@@ -0,0 +1,3 @@
+@value colored: co_ca8c;
+@value filled: fi_8a2f;
+@value gradiented: gr_9658;

package/dist/color.scss

@@ -0,0 +1,84 @@
+// Composed component slots + the opacity selection bridges.
+//
+// The deal delivers every opacity context as an ELEMENT INLINE var:
+//   --0-{c|f}-src            ungated (both schemes, no pseudo)
+//   --0-{c|f}-src-l|-d       scheme only
+//   --0-{c|f}-src-{hover|active|focus}          pseudo only
+//   --0-{c|f}-src-{l|d}-{hover|active|focus}    scheme + pseudo
+// Inline styles are unconditional - only a stylesheet can select by scheme
+// or pseudo state, so use() emits the picker: per context a rule re-declares
+// the selected --0-{c|f}-o, and the composed cur reads it. src vars are
+// reset to `initial` per element so a translucent parent does not paint its
+// children (custom property `initial` is guaranteed-invalid, so var()
+// fallbacks keep working). The generated theme css carries NO opacity rules.
+@mixin use {
+  @include _slot('c');
+  @include _slot('f');
+  // gradients arrive as an element inline style - redeclare to stop them
+  // inheriting into children (initial = no background-image)
+  --0-g-cur: initial;
+}
+@mixin use-state {
+}
+
+@mixin _slot($x) {
+  // context sources (set inline by the contract; initial = unset)
+  --0-#{$x}-src: initial;
+  --0-#{$x}-src-l: initial;
+  --0-#{$x}-src-d: initial;
+  --0-#{$x}-src-hover: initial;
+  --0-#{$x}-src-active: initial;
+  --0-#{$x}-src-focus: initial;
+  --0-#{$x}-src-l-hover: initial;
+  --0-#{$x}-src-l-active: initial;
+  --0-#{$x}-src-l-focus: initial;
+  --0-#{$x}-src-d-hover: initial;
+  --0-#{$x}-src-d-active: initial;
+  --0-#{$x}-src-d-focus: initial;
+
+  // selection bridges - the fallback chain never crosses schemes: a
+  // scheme-tagged source applies to that scheme only, the default is 1.
+  // :global(...) keeps the theme's scheme classes unscoped - component
+  // module styles hash every bare class literal.
+  --0-#{$x}-o: var(--0-#{$x}-src, var(--0-#{$x}-src-l, 1));
+  --0-#{$x}-cur: rgb(var(--0-#{$x}-cur-v) / var(--0-#{$x}-o));
+  :global(.theme_dark) & {
+    --0-#{$x}-o: var(--0-#{$x}-src-d, var(--0-#{$x}-src, 1));
+  }
+  &:hover {
+    --0-#{$x}-o: var(--0-#{$x}-src-hover, var(--0-#{$x}-src, var(--0-#{$x}-src-l, 1)));
+  }
+  &:active {
+    --0-#{$x}-o: var(--0-#{$x}-src-active, var(--0-#{$x}-src, var(--0-#{$x}-src-l, 1)));
+  }
+  &:focus {
+    --0-#{$x}-o: var(--0-#{$x}-src-focus, var(--0-#{$x}-src, var(--0-#{$x}-src-l, 1)));
+  }
+  :global(.theme_dark) &:hover {
+    --0-#{$x}-o: var(--0-#{$x}-src-d-hover, var(--0-#{$x}-src-hover, var(--0-#{$x}-src-d, var(--0-#{$x}-src, 1))));
+  }
+  :global(.theme_dark) &:active {
+    --0-#{$x}-o: var(--0-#{$x}-src-d-active, var(--0-#{$x}-src-active, var(--0-#{$x}-src-d, var(--0-#{$x}-src, 1))));
+  }
+  :global(.theme_dark) &:focus {
+    --0-#{$x}-o: var(--0-#{$x}-src-d-focus, var(--0-#{$x}-src-focus, var(--0-#{$x}-src-d, var(--0-#{$x}-src, 1))));
+  }
+}
+
+@mixin color {
+  color: var(--0-c-cur);
+}
+
+@mixin fill {
+  background-color: var(--0-f-cur);
+}
+
+@mixin gradient {
+  background-image: var(--0-g-cur);
+}
+
+@mixin apply {
+  @include color();
+  @include fill();
+  @include gradient();
+}

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ThemeProvider } from './theme-provider.vue';
+export * from './theme-provider.keys';
+export type * from './theme-provider.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC/D,cAAc,uBAAuB,CAAA;AACrC,mBAAmB,wBAAwB,CAAA"}

package/dist/components/index.js

@@ -0,0 +1,53 @@
+import { defineComponent as i, useAttrs as m, useCssModule as d, reactive as u, computed as h, openBlock as f, createBlock as _, unref as n, normalizeClass as v, withCtx as y, renderSlot as g, normalizeProps as P, guardReactiveProps as k } from "vue";
+import { provideHost as x } from "@ui0/composable";
+import { Slot as C } from "@ui0/core";
+const M = Symbol("ThemeProviderKey"), S = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "theme-provider",
+  props: {
+    appearance: {},
+    preset: {}
+  },
+  setup(s, { expose: a }) {
+    const t = s, o = m(), p = d(), e = u({
+      provided: !0,
+      appearance: "light",
+      preset: "default"
+    });
+    t.preset && (e.preset = t.preset), t.appearance && (e.appearance = t.appearance);
+    const l = h(
+      () => e.provided ? [p.theme, "theme-" + e.preset, "theme_" + e.appearance] : []
+    ), c = {
+      appearance(r) {
+        e.appearance = r;
+      },
+      preset(r) {
+        e.preset = r;
+      },
+      toggle() {
+        e.appearance = e.appearance === "dark" ? "light" : "dark";
+      }
+    };
+    return x(M, c), a(c), (r, A) => (f(), _(n(C), {
+      class: v([...l.value, n(o).class])
+    }, {
+      default: y(() => [
+        g(r.$slots, "default", P(k(c)))
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), T = "th_3cb8", $ = {
+  theme: T
+}, b = (s, a) => {
+  const t = s.__vccOpts || s;
+  for (const [o, p] of a)
+    t[o] = p;
+  return t;
+}, z = {
+  $style: $
+}, H = /* @__PURE__ */ b(S, [["__cssModules", z]]);
+export {
+  H as ThemeProvider,
+  M as ThemeProviderKey
+};

package/dist/components/style.css

@@ -0,0 +1 @@
+@layer theme,ui0,ui0.theme-provider;@layer ui0.theme-provider{.th_3cb8{--0-c-src: initial;--0-c-src-l: initial;--0-c-src-d: initial;--0-c-src-hover: initial;--0-c-src-active: initial;--0-c-src-focus: initial;--0-c-src-l-hover: initial;--0-c-src-l-active: initial;--0-c-src-l-focus: initial;--0-c-src-d-hover: initial;--0-c-src-d-active: initial;--0-c-src-d-focus: initial;--0-c-o: var(--0-c-src, var(--0-c-src-l, 1));--0-c-cur: rgb(var(--0-c-cur-v) / var(--0-c-o))}.theme_dark .th_3cb8{--0-c-o: var(--0-c-src-d, var(--0-c-src, 1))}.th_3cb8:hover{--0-c-o: var(--0-c-src-hover, var(--0-c-src, var(--0-c-src-l, 1)))}.th_3cb8:active{--0-c-o: var(--0-c-src-active, var(--0-c-src, var(--0-c-src-l, 1)))}.th_3cb8:focus{--0-c-o: var(--0-c-src-focus, var(--0-c-src, var(--0-c-src-l, 1)))}.theme_dark .th_3cb8:hover{--0-c-o: var(--0-c-src-d-hover, var(--0-c-src-hover, var(--0-c-src-d, var(--0-c-src, 1))))}.theme_dark .th_3cb8:active{--0-c-o: var(--0-c-src-d-active, var(--0-c-src-active, var(--0-c-src-d, var(--0-c-src, 1))))}.theme_dark .th_3cb8:focus{--0-c-o: var(--0-c-src-d-focus, var(--0-c-src-focus, var(--0-c-src-d, var(--0-c-src, 1))))}.th_3cb8{--0-f-src: initial;--0-f-src-l: initial;--0-f-src-d: initial;--0-f-src-hover: initial;--0-f-src-active: initial;--0-f-src-focus: initial;--0-f-src-l-hover: initial;--0-f-src-l-active: initial;--0-f-src-l-focus: initial;--0-f-src-d-hover: initial;--0-f-src-d-active: initial;--0-f-src-d-focus: initial;--0-f-o: var(--0-f-src, var(--0-f-src-l, 1));--0-f-cur: rgb(var(--0-f-cur-v) / var(--0-f-o))}.theme_dark .th_3cb8{--0-f-o: var(--0-f-src-d, var(--0-f-src, 1))}.th_3cb8:hover{--0-f-o: var(--0-f-src-hover, var(--0-f-src, var(--0-f-src-l, 1)))}.th_3cb8:active{--0-f-o: var(--0-f-src-active, var(--0-f-src, var(--0-f-src-l, 1)))}.th_3cb8:focus{--0-f-o: var(--0-f-src-focus, var(--0-f-src, var(--0-f-src-l, 1)))}.theme_dark .th_3cb8:hover{--0-f-o: var(--0-f-src-d-hover, var(--0-f-src-hover, var(--0-f-src-d, var(--0-f-src, 1))))}.theme_dark .th_3cb8:active{--0-f-o: var(--0-f-src-d-active, var(--0-f-src-active, var(--0-f-src-d, var(--0-f-src, 1))))}.theme_dark .th_3cb8:focus{--0-f-o: var(--0-f-src-d-focus, var(--0-f-src-focus, var(--0-f-src-d, var(--0-f-src, 1))))}.th_3cb8{--0-g-cur: initial;color:var(--0-c-cur);background-color:var(--0-f-cur);background-image:var(--0-g-cur);font-size:var(--0-fs-m)}}

package/dist/components/theme-provider.keys.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { ThemeProviderActions } from './theme-provider.types';
+export declare const ThemeProviderKey: InjectionKey<ThemeProviderActions>;
+//# sourceMappingURL=theme-provider.keys.d.ts.map

package/dist/components/theme-provider.keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.keys.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider/theme-provider.keys.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAElE,eAAO,MAAM,gBAAgB,EAAiC,YAAY,CAAC,oBAAoB,CAAC,CAAA"}

package/dist/components/theme-provider.module.css

@@ -0,0 +1 @@
+@value theme: th_3cb8;

package/dist/components/theme-provider.types.d.ts

@@ -0,0 +1,18 @@
+import { Ui0ThemeName, Ui0ThemeSchemeName, ThemeAppearance, ThemePresetName } from '@ui0/types';
+export interface ThemeProviderProps extends ThemeProviderDefaults {
+    /** theme appearance — typed to generated Ui0ThemeSchemeNames */
+    appearance?: Ui0ThemeSchemeName;
+    /** preset name — typed to generated Ui0ThemeNames */
+    preset?: Ui0ThemeName;
+}
+export interface ThemeProviderDefaults {
+}
+export interface ThemeProviderActions {
+    toggle: () => void;
+    appearance: (d: ThemeAppearance) => void;
+    preset: (d: ThemePresetName) => void;
+}
+export interface ThemeProviderSlots {
+    default: (actions: ThemeProviderActions) => void;
+}
+//# sourceMappingURL=theme-provider.types.d.ts.map

package/dist/components/theme-provider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.types.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider/theme-provider.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAElE,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,gEAAgE;IAChE,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED,MAAM,WAAW,qBAAqB;CAAG;AAEzC,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAA;IACxC,MAAM,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAA;CACrC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,IAAI,CAAA;CACjD"}

package/dist/components/theme-provider.vue.d.ts

@@ -0,0 +1,19 @@
+import { ComponentOptionsMixin, DefineComponent, PublicProps, SlotsType } from 'vue';
+import { ThemeProviderActions, ThemeProviderProps, ThemeProviderSlots } from './theme-provider.types';
+declare const ThemeProvider: DefineComponent<
+  ThemeProviderProps,
+  {},
+  {},
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  {},
+  string,
+  PublicProps,
+  Readonly<ThemeProviderProps> & Readonly<{}>,
+  {},
+  SlotsType<ThemeProviderSlots>
+>
+export default ThemeProvider
+export type { ThemeProviderActions }

package/dist/config.default.d.mts

@@ -0,0 +1,4 @@
+import { ThemePluginConfig } from "@ui0/types";
+declare const config: ThemePluginConfig;
+export { config as default };
+//# sourceMappingURL=config.default.d.mts.map

package/dist/config.default.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.default.d.mts","names":[],"sources":["../src/config.default.ts"],"mappings":";cAKM,QAAQ"}

package/dist/config.default.mjs

@@ -0,0 +1,73 @@
+// src/config.default.ts
+const config = {
+	default: "default",
+	contracts: {
+		backdrop: {},
+		color: {},
+		round: { baseline: "height" },
+		typography: {
+			fontSize: 20,
+			fontSizeHeading: 22,
+			headingRatio: 1.2
+		},
+		display: { breakpoints: {
+			xxs: 320,
+			xs: 480,
+			sm: 640,
+			md: 832,
+			lg: 1024,
+			hd: 1280,
+			xl: 1440,
+			xxl: 1680,
+			fhd: 1920,
+			qhd: 2560,
+			uhd: 3840
+		} }
+	},
+	presets: { default: {
+		default: {
+			style: {
+				raw: { framework: "ui0" },
+				vars: { version: "1.0.0" }
+			},
+			size: {
+				control: "32px",
+				child: "26px"
+			},
+			backdrop: {
+				blur: "4px",
+				brightness: .5,
+				contrast: .5,
+				"drop-shadow": "0 4px 8px rgba(0, 0, 0, 0.5)",
+				grayscale: 1,
+				"hue-rotate": "90deg",
+				invert: 1,
+				opacity: "0.5",
+				saturate: "0.5",
+				sepia: "1"
+			},
+			elevation: { steps: 16 },
+			color: {
+				foreground: "#000",
+				background: "#FFF",
+				success: "#388822",
+				error: "#884622",
+				warning: "#ffb921",
+				highlight: "#16e3c5",
+				white: "#FFF",
+				black: "#000"
+			}
+		},
+		light: { color: {
+			foreground: "#000",
+			background: "#FFF"
+		} },
+		dark: { color: {
+			foreground: "#FFF",
+			background: "#000"
+		} }
+	} }
+};
+export { config as default };
+
+//# sourceMappingURL=config.default.mjs.map

package/dist/config.default.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.default.mjs","names":[],"sources":["../src/config.default.ts"],"sourcesContent":["import type { ThemePluginConfig } from '@ui0/types'\n\n// The built-in default theme. Every setting a consumer preset can omit has a\n// baseline here (merged UNDER each preset by withDefaults), so the generated\n// mirror (theme.default.css) always provides a coherent --0-* set.\nconst config: ThemePluginConfig = {\n  default: 'default',\n  contracts: {\n    backdrop: {\n      // 'drop-shadow': false,\n      // 'hue-rotate': false\n    },\n    color: {},\n    round: {\n      baseline: 'height'\n    },\n    typography: {\n      fontSize: 20,\n      fontSizeHeading: 22,\n      headingRatio: 1.2\n    },\n    display: {\n      breakpoints: {\n        xxs: 320,\n        xs: 480,\n        sm: 640,\n        md: 832,\n        lg: 1024,\n        hd: 1280,\n        xl: 1440,\n        xxl: 1680,\n        fhd: 1920,\n        qhd: 2560,\n        uhd: 3840\n      }\n    }\n  },\n  presets: {\n    default: {\n      default: {\n        style: {\n          raw: {\n            framework: 'ui0'\n          },\n          vars: {\n            version: '1.0.0'\n          }\n        },\n        size: {\n          control: '32px',\n          child: '26px'\n        },\n        backdrop: {\n          blur: '4px',\n          brightness: 0.5,\n          contrast: 0.5,\n          'drop-shadow': '0 4px 8px rgba(0, 0, 0, 0.5)',\n          grayscale: 1,\n          'hue-rotate': '90deg',\n          invert: 1,\n          opacity: '0.5',\n          saturate: '0.5',\n          sepia: '1'\n        },\n        elevation: {\n          steps: 16\n        },\n        color: {\n          foreground: '#000',\n          background: '#FFF',\n          success: '#388822',\n          error: '#884622',\n          warning: '#ffb921',\n          highlight: '#16e3c5',\n          white: '#FFF',\n          black: '#000'\n        }\n      },\n      light: {\n        color: {\n          foreground: '#000',\n          background: '#FFF'\n        }\n      },\n      dark: {\n        color: {\n          foreground: '#FFF',\n          background: '#000'\n        }\n      }\n    }\n  }\n}\nexport default config\n"],"mappings":";AAKA,MAAM,SAA4B;CAChC,SAAS;CACT,WAAW;EACT,UAAU,CAGV;EACA,OAAO,CAAC;EACR,OAAO,EACL,UAAU,SACZ;EACA,YAAY;GACV,UAAU;GACV,iBAAiB;GACjB,cAAc;EAChB;EACA,SAAS,EACP,aAAa;GACX,KAAK;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP,EACF;CACF;CACA,SAAS,EACP,SAAS;EACP,SAAS;GACP,OAAO;IACL,KAAK,EACH,WAAW,MACb;IACA,MAAM,EACJ,SAAS,QACX;GACF;GACA,MAAM;IACJ,SAAS;IACT,OAAO;GACT;GACA,UAAU;IACR,MAAM;IACN,YAAY;IACZ,UAAU;IACV,eAAe;IACf,WAAW;IACX,cAAc;IACd,QAAQ;IACR,SAAS;IACT,UAAU;IACV,OAAO;GACT;GACA,WAAW,EACT,OAAO,GACT;GACA,OAAO;IACL,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,OAAO;IACP,SAAS;IACT,WAAW;IACX,OAAO;IACP,OAAO;GACT;EACF;EACA,OAAO,EACL,OAAO;GACL,YAAY;GACZ,YAAY;EACd,EACF;EACA,MAAM,EACJ,OAAO;GACL,YAAY;GACZ,YAAY;EACd,EACF;CACF,EACF;AACF"}

package/dist/disabled.inject.module.css

@@ -0,0 +1,5 @@
+@value disabled: di_17eb;
+
+.di_17eb {
+  opacity: var(--0-dis-o, 0.5);
+}

package/dist/disabled.module.css

@@ -0,0 +1 @@
+@value disabled: di_17eb;

package/dist/disabled.scss

@@ -0,0 +1,3 @@
+@mixin filter {
+  filter: grayscale(80%) opacity(70%);
+}

package/dist/display.module.css

@@ -0,0 +1,2 @@
+@value displayed: di_e228;
+@value displayNormal: di_bf77;

package/dist/display.scss

@@ -0,0 +1,63 @@
+
+// Component-namespace wiring for the display contract: the generator emits
+// `--0-display-base` on the theme blocks; this mixin mirrors it into the
+// component namespace so a component can consume (and locally override) it.
+@mixin use() {
+  --0c-display: var(--0-display-base, initial);
+}
+
+@mixin wh($width, $height) {
+  $max-w: ' and (max-width: #{$width})';
+  $max-h: ' and (max-height: #{$height})';
+  @media only screen#{$max-h}#{$max-w} {
+    @content;
+  }
+}
+@mixin w-between($max, $min) {
+  $min-w: ' and (min-width: #{$min})';
+  $max-w: ' and (max-width: #{$max})';
+  @if $max == 0 and $min == 0 {
+  } @else {
+    @if $max == 0 {
+      $max-w: ' ';
+    }
+    @media only screen#{$min-w}#{$max-w} {
+      @content;
+    }
+  }
+}
+
+@mixin w-greater($val) {
+  @include w-between(0, $val) {
+    @content;
+  }
+}
+
+@mixin w-less($val) {
+  @include w-between($val, 0) {
+    @content;
+  }
+}
+@mixin h-between($max, $min) {
+  $minh: ' and (min-height: #{$min})';
+  $maxh: ' and (max-height: #{$max})';
+  @if $max == 0 and $min == 0 {
+  } @else {
+    @if $max == 0 {
+      $maxh: ' ';
+    }
+    @media only screen#{$minh}#{$maxh} {
+      @content;
+    }
+  }
+}
+@mixin h-greater($val) {
+  @include h-between(0, $val) {
+    @content;
+  }
+}
+@mixin h-less($val) {
+  @include h-between($val, 0) {
+    @content;
+  }
+}

package/dist/duration.scss

@@ -0,0 +1,17 @@
+@mixin use {
+  --0-d-superfast: 40ms;
+  --0-d-faster: 75ms;
+  --0-d-fast: 90ms;
+  --0-d-gently: 144ms;
+  --0-d-basic: 200ms;
+  --0-d-slow: 400ms;
+  --0-d-superslow: 1000ms;
+}
+
+$duration-superfast: var(--0-d-superfast);
+$duration-faster: var(--0-d-faster);
+$duration-fast: var(--0-d-fast);
+$duration-gently: var(--0-d-gently);
+$duration-basic: var(--0-d-basic);
+$duration-slow: var(--0-d-slow);
+$duration-superslow: var(--0-d-superslow);

package/dist/elevation.module.css

@@ -0,0 +1,33 @@
+@value elv: el_b4e0;
+@value elv1: el_5e0f;
+@value elv1n: el_5995;
+@value elv2: el_fb8f;
+@value elv2n: el_af23;
+@value elv3: el_8867;
+@value elv3n: el_6c3d;
+@value elv4: el_4d5e;
+@value elv4n: el_a211;
+@value elv5: el_1ab1;
+@value elv5n: el_2df9;
+@value elv6: el_56bd;
+@value elv6n: el_b036;
+@value elv7: el_61ea;
+@value elv7n: el_8003;
+@value elv8: el_8924;
+@value elv8n: el_7bc0;
+@value elv9: el_1bb1;
+@value elv9n: el_734f;
+@value elv10: el_40d4;
+@value elv10n: el_ef94;
+@value elv11: el_a016;
+@value elv11n: el_fcd8;
+@value elv12: el_1c39;
+@value elv12n: el_ba0c;
+@value elv13: el_5602;
+@value elv13n: el_d306;
+@value elv14: el_3f15;
+@value elv14n: el_ece8;
+@value elv15: el_3130;
+@value elv15n: el_5599;
+@value elv16: el_c651;
+@value elv16n: el_f2d2;

package/dist/elevation.scss

@@ -0,0 +1,46 @@
+// Elevation: ONE base class carries the box-shadow assembled from the
+// --0-elv-* css vars; the per-step classes (.elv1..$steps, .elv1n..stepsn for
+// inset) only fill in the var values for their step - no shadow math is
+// repeated per class. This file mirrors what elevation.generator.ts emits
+// (the generator compiles this pattern with $steps from the theme config).
+
+// the shared shadow: a fixed highlight ring + three layers assembled from the
+// --0-elv-* vars (zero/fallback values until a step class is applied)
+@mixin use() {
+  box-shadow:
+    0 0 0 1px rgba(255 255 255 / 0.1),
+    var(--0-elv-i,) 0px 1px 1px rgba(var(--0-elv-c, 0 0 0) / 0.1),
+    var(--0-elv-i,) var(--0-elv-x1, 0px) var(--0-elv-y1, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.095),
+    var(--0-elv-i,) var(--0-elv-x2, 0px) var(--0-elv-y2, 0px) rgba(var(--0-elv-c, 0 0 0) / 0.13);
+}
+
+@mixin elv($i, $inset: false) {
+  --0-elv-x1: #{$i}px;
+  --0-elv-y1: #{3 * $i}px;
+  --0-elv-x2: #{1.5 * $i}px;
+  --0-elv-y2: #{1.5 * $i}px;
+  @if $inset {
+    --0-elv-i: inset;
+  }
+}
+
+@mixin elevator($elevation, $color-value: #000) {
+  // legacy helper - kept for hand-written component styles; the generated
+  // classes use the var pattern above (@include use + @include elv)
+  $inset: 0;
+  @if $elevation < 0 {
+    $elevation: $elevation * -1;
+    $inset: inset 0;
+  } @else {
+    $inset: 0;
+  }
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    $inset 0px 1px 1px rgba($color-value, 0.1),
+    $inset #{1 * $elevation}px #{3 * $elevation}px rgba($color-value, 0.095),
+    $inset #{1.5 * $elevation}px #{1.5 * $elevation}px rgba($color-value, 0.13);
+}
+
+@function stroke() {
+  @return 0 0 0 1px rgba(255, 255, 255, 0.1);
+}