@ui0/theme 0.0.0-stage → 0.1.1

package/dist/round.scss

@@ -0,0 +1,90 @@
+// Corner radius application for a component.
+//
+// Rounding names (--0-r-none/hard/basic/smooth/full) are a THEME concern: the
+// generator emits whatever the config's `roundings` section declares, on the
+// .theme-* rule. This mixin provides a COMPUTED default for each name (a
+// proportion of the control's current height) and resolves it into the
+// --0c-r-* component namespace with the theme value winning via the var()
+// fallback. The resolved defaults MUST live under --0c-r-* (not --0-r-*):
+// a self-referential `--0-r-x: var(--0-r-x, …)` on the element is a CSS cycle
+// (guaranteed-invalid at computed-value time) and kills every consumer - the
+// setter classes read the --0c-r-* names.
+
+@mixin init {
+  @property --0-r-tl {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-tr {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-bl {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+  @property --0-r-br {
+    syntax: '<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?';
+    inherits: false;
+    initial-value: 0;
+  }
+}
+
+@mixin use() {
+  border-start-start-radius: var(--0-r-tl, 0px);
+  border-start-end-radius: var(--0-r-tr, 0px);
+  border-end-start-radius: var(--0-r-bl, 0px);
+  border-end-end-radius: var(--0-r-br, 0px);
+}
+
+// $basic - the size the proportions are taken from; defaults to the control's
+// current (density-aware) height.
+@mixin apply($basic: null) {
+  @if $basic == null {
+    $basic: calc(var(--0-s-cur, 42px) * var(--0-s-density, 1));
+  }
+
+  // computed defaults in the component namespace; a theme-declared --0-r-*
+  // wins over each via the var() fallback (element-level --0-r-* would be a
+  // self-referential cycle, so the names must differ)
+  --0c-r-full: var(--0-r-full, calc(#{$basic} / 2));
+  --0c-r-smooth: var(--0-r-smooth, calc(#{$basic} / 4));
+  --0c-r-basic: var(--0-r-basic, calc(#{$basic} / 8));
+  --0c-r-hard: var(--0-r-hard, calc(#{$basic} / 14));
+  --0c-r-none: var(--0-r-none, 0px);
+  // @include reset();
+}
+
+@mixin full() {
+  --0-r-tl: var(--0c-r-full, var(--0-r-full));
+  --0-r-tr: var(--0c-r-full, var(--0-r-full));
+  --0-r-bl: var(--0c-r-full, var(--0-r-full));
+  --0-r-br: var(--0c-r-full, var(--0-r-full));
+}
+@mixin smooth() {
+  --0-r-tl: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-tr: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-bl: var(--0c-r-smooth, var(--0-r-smooth));
+  --0-r-br: var(--0c-r-smooth, var(--0-r-smooth));
+}
+@mixin basic() {
+  --0-r-tl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-tr: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-bl: var(--0c-r-basic, var(--0-r-basic));
+  --0-r-br: var(--0c-r-basic, var(--0-r-basic));
+}
+@mixin hard() {
+  --0-r-tl: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-tr: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-bl: var(--0c-r-hard, var(--0-r-hard));
+  --0-r-br: var(--0c-r-hard, var(--0-r-hard));
+}
+@mixin reset() {
+  --0-r-tl: 0px;
+  --0-r-tr: 0px;
+  --0-r-bl: 0px;
+  --0-r-br: 0px;
+}

package/dist/size.inject.module.css

@@ -0,0 +1,50 @@
+@value sizeXxxs: si_bce5;
+@value sizeXxs: si_87d4;
+@value sizeXs: si_0820;
+@value sizeS: si_9329;
+@value sizeM: si_96e7;
+@value sizeL: si_05f9;
+@value sizeXl: si_81de;
+@value sizeXxl: si_d16b;
+@value sizeXxxl: si_5136;
+@value sizeCustom: si_e681;
+
+.si_bce5 {
+  --0-s: var(--0-s-xxxs);
+}
+
+.si_87d4 {
+  --0-s: var(--0-s-xxs);
+}
+
+.si_0820 {
+  --0-s: var(--0-s-xs);
+}
+
+.si_9329 {
+  --0-s: var(--0-s-s);
+}
+
+.si_96e7 {
+  --0-s: var(--0-s-m);
+}
+
+.si_05f9 {
+  --0-s: var(--0-s-l);
+}
+
+.si_81de {
+  --0-s: var(--0-s-xl);
+}
+
+.si_d16b {
+  --0-s: var(--0-s-xxl);
+}
+
+.si_5136 {
+  --0-s: var(--0-s-xxxl);
+}
+
+.si_e681 {
+  --0-s: var(--0-s-custom);
+}

package/dist/size.module.css

@@ -0,0 +1,13 @@
+@value sizeXl: si_81de;
+@value sizeM: si_96e7;
+@value sizeXs: si_0820;
+@value sizeS: si_9329;
+@value sizeL: si_05f9;
+@value sizeXxs: si_87d4;
+@value sizeXxxs: si_bce5;
+@value sizeXxxl: si_5136;
+@value sizeXxl: si_d16b;
+@value sizeCustom: si_e681;
+@value sized: si_3f5b;
+@value child: ch_ddc9;
+@value fontSizing: fo_5e6f;

package/dist/size.scss

@@ -0,0 +1,28 @@
+/*
+  --0-s - own size(height)
+  --0-sc - size of a child component in complex component
+*/
+@mixin use() {
+  --0-s: calc(var(--0-s, var(--0-s-m)) * var(--0-s-density, 1));
+  --0-sc: calc(var(--0-sc, var(--0-sc-m)) * var(--0-s-density, 1));
+}
+
+$size-current: calc(var(--0-s, var(--0-s-m)) * var(--0-s-density, 1));
+
+@mixin apply {
+  height: var(--0-s);
+}
+
+@mixin follow {
+  height: var(--0-s);
+}
+@mixin size {
+  height: var(--0-s);
+}
+@mixin child-size {
+  height: var(--0-sc);
+}
+@mixin sizeable($h: var(--0-s, var(--0-s-m)), $hc: var(--0-sc, var(--0-sc-m))) {
+  --0-s: calc(#{$h} * var(--0-s-density, 1));
+  --0-sc: calc(#{$hc} * var(--0-s-density, 1));
+}

package/dist/theme.scss

@@ -0,0 +1,16 @@
+@use '@ui0/theme/color';
+@mixin isDark {
+  :global(.theme_dark) & {
+    @content;
+  }
+}
+@mixin isLight {
+  :global(.theme_light) & {
+    @content;
+  }
+}
+
+@mixin apply {
+  @include color.use();
+  @include color.apply();
+}

package/dist/typography.inject.module.css

@@ -0,0 +1,81 @@
+@value fw100: fw_f5d2;
+@value fw200: fw_25c0;
+@value fw300: fw_de2b;
+@value fw400: fw_a02f;
+@value fw500: fw_c057;
+@value fw600: fw_aee5;
+@value fw700: fw_3207;
+@value fw800: fw_d808;
+@value fw900: fw_bb66;
+@value tt-uppercase: tt_c60d;
+@value tt-lowercase: tt_56d5;
+@value tt-capitalize: tt_ce2a;
+@value tt-none: tt_1ff4;
+@value tt-full: tt_59a5;
+@value tt-full-size-kana: tt_50f0;
+@value ta-start: ta_c49e;
+@value ta-end: ta_e1d2;
+@value ta-center: ta_d725;
+@value ta-left: ta_3342;
+@value ta-right: ta_e5b8;
+@value ta-justify: ta_010c;
+@value ta-match-parent: ta_0241;
+@value to-mixed: to_a88e;
+@value to-sideways: to_4919;
+@value to-sideways-right: to_2640;
+@value to-use-glyph-orientation: to_de51;
+@value to-upright: to_35e5;
+@value tw-nowrap: tw_83bf;
+@value tw-wrap: tw_d03a;
+@value tw-balance: tw_4fdb;
+@value tw-pretty: tw_f5a3;
+@value tw-stable: tw_698e;
+
+.fw_f5d2 { font-weight: 100 }
+.fw_25c0 { font-weight: 200 }
+.fw_de2b { font-weight: 300 }
+.fw_a02f { font-weight: 400 }
+.fw_c057 { font-weight: 500 }
+.fw_aee5 { font-weight: 600 }
+.fw_3207 { font-weight: 700 }
+.fw_d808 { font-weight: 800 }
+.fw_bb66 { font-weight: 900 }
+
+.tt_c60d { text-transform: uppercase }
+.tt_56d5 { text-transform: lowercase }
+.tt_ce2a { text-transform: capitalize }
+.tt_1ff4 { text-transform: none }
+.tt_59a5 { text-transform: full-width }
+.tt_50f0 { text-transform: full-size-kana }
+
+.ta_c49e { text-align: start }
+.ta_e1d2 { text-align: end }
+.ta_d725 { text-align: center }
+.ta_3342 { text-align: left }
+.ta_e5b8 { text-align: right }
+.ta_010c { text-align: justify }
+.ta_0241 { text-align: match-parent }
+
+.to_a88e { text-orientation: mixed }
+.to_4919 { text-orientation: sideways }
+.to_2640 { text-orientation: sideways-right }
+.to_de51 { text-orientation: use-glyph-orientation }
+.to_35e5 { text-orientation: upright }
+
+.tw_83bf { text-wrap: nowrap }
+.tw_d03a { text-wrap: wrap }
+.tw_4fdb { text-wrap: balance }
+.tw_f5a3 { text-wrap: pretty }
+.tw_698e { text-wrap: stable }
+h1, h2, h3, h4, h5, h6 {
+    --0-typo-step: 0.25rem; /* шаг (длина) */
+    font-size: calc(var(--0-typo-h-fs, var(--0-typo-fs, 1rem)) + var(--0-typo-step) * var(--0-typo-x));
+    line-height: calc(1 + 1 / var(--0-typo-x));
+
+}
+h1 { --0-typo-x: 6; }
+h2 { --0-typo-x: 5; }
+h3 { --0-typo-x: 4; }
+h4 { --0-typo-x: 3; }
+h5 { --0-typo-x: 2; }
+h6 { --0-typo-x: 1; }

package/dist/typography.module.css

@@ -0,0 +1,32 @@
+@value fw100: fw_f5d2;
+@value fw200: fw_25c0;
+@value fw300: fw_de2b;
+@value fw400: fw_a02f;
+@value fw500: fw_c057;
+@value fw600: fw_aee5;
+@value fw700: fw_3207;
+@value fw800: fw_d808;
+@value fw900: fw_bb66;
+@value tt-uppercase: tt_c60d;
+@value tt-lowercase: tt_56d5;
+@value tt-capitalize: tt_ce2a;
+@value tt-none: tt_1ff4;
+@value tt-full: tt_59a5;
+@value tt-full-size-kana: tt_50f0;
+@value ta-center: ta_d725;
+@value ta-end: ta_e1d2;
+@value ta-justify: ta_010c;
+@value ta-left: ta_3342;
+@value ta-match-parent: ta_0241;
+@value ta-right: ta_e5b8;
+@value ta-start: ta_c49e;
+@value to-mixed: to_a88e;
+@value to-sideways: to_4919;
+@value to-sideways-right: to_2640;
+@value to-use-glyph-orientation: to_de51;
+@value to-upright: to_35e5;
+@value tw-nowrap: tw_83bf;
+@value tw-wrap: tw_d03a;
+@value tw-balance: tw_4fdb;
+@value tw-pretty: tw_f5a3;
+@value tw-stable: tw_698e;

package/dist/typography.scss

@@ -0,0 +1,21 @@
+// Component-namespace wiring for the typography contract: the generator emits
+// `--0-typography-base` on the theme blocks; this mixin mirrors it into the
+// component namespace so a component can consume (and locally override) it.
+@mixin init() {
+  --0-typo-base: 1.2;
+
+  code {
+    //background-color: rgba(var(--r-c-foreground-v), 0.2);
+    border-radius: 0;
+  }
+  h1, h2, h3, h4, h5, h6 {
+      font-size: calc(var(--0-typo-h-fs, var(--0-typo-fs)) * var(--0-typo-h-ratio, 1) * var(--0-typo-x, 1));
+  }
+  h1 { --0-typo-x: 6; }
+  h2 { --0-typo-x: 5; }
+  h3 { --0-typo-x: 4; }
+  h4 { --0-typo-x: 3; }
+  h5 { --0-typo-x: 2; }
+  h6 { --0-typo-x: 1; }
+  body { font-size: var(--0-typo-font-size); }
+}

package/dist/util.scss

@@ -0,0 +1,78 @@
+@mixin repeat-layer {
+  align-items: inherit;
+  border-radius: inherit;
+  display: inherit;
+  height: 100%;
+  justify-content: inherit;
+  position: inherit;
+  width: 100%;
+  @content;
+}
+@mixin startingStyle {
+  @starting-style {
+    @content
+  }
+}
+@mixin elevator($elevation, $color-value: #000) {
+  $inset: 0;
+  @if $elevation < 0 {
+    $elevation: $elevation * -1;
+    $inset: inset 0;
+  } @else {
+    $inset: 0;
+  }
+  box-shadow: $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);
+}
+@mixin pseudobox-props {
+  //background-clip: text;
+  bottom: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  content: ' ';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+@mixin pseudobox-b {
+  &::before {
+    @include pseudobox-props;
+    @content;
+  }
+}
+
+@mixin pseudobox-a {
+  &::after {
+    @include pseudobox-props;
+    @content;
+  }
+}
+
+@function gradientBackground(
+  $color: --r-c-v,
+  $color2: --r-c2-v,
+  $opacity: 1,
+  $opacity2: 1,
+  $deg: var(--r-gradient-angle)
+) {
+  @return linear-gradient(
+                  $deg,
+                  rgba(var($color), $opacity) 0%,
+                  rgba(var($color), $opacity) 30%,
+                  rgba(var($color2), $opacity2) 65%,
+                  rgba(var($color2), $opacity2) 100%
+  );
+}
+@function gradientBackgroundRipple($opacity: 1, $opacity2: 1) {
+  @return linear-gradient(
+                  135deg,
+                  rgba(var(--r-c-v), $opacity) 40%,
+                  rgba(var(--r-c2-v), $opacity2) 60%
+  );
+}

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "@ui0/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Generates themeable CSS custom properties from a theme config (library + Vite plugin + CLI)",
+  "keywords": [
+    "css-variables",
+    "design-tokens",
+    "theme",
+    "ui0",
+    "vite",
+    "vite-plugin"
+  ],
+  "bin": {
+    "ui0-theme": "./dist/generator/cli.mjs"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "src/contracts",
+    "src/styles",
+    "src/generator/theme.default.css"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./vite": {
+      "types": "./dist/generator/vite.d.mts",
+      "import": "./dist/generator/vite.mjs"
+    },
+    "./backdrop": "./dist/backdrop.scss",
+    "./backdrop/classes": "./dist/backdrop.module.css",
+    "./color": "./dist/color.scss",
+    "./vars": "./dist/vars.scss",
+    "./vars.scss": "./dist/vars.scss",
+    "./color/classes": "./dist/color.module.css",
+    "./round": "./dist/round.scss",
+    "./util": "./dist/util.scss",
+    "./round/classes": "./dist/round.module.css",
+    "./size": "./dist/size.scss",
+    "./size/classes": "./dist/size.module.css",
+    "./styles": "./dist/size.module.css",
+    "./elevation": "./dist/elevation.scss",
+    "./elevation/classes": "./dist/elevation.module.css",
+    "./elevation/elevation.module.css": "./dist/elevation.module.css",
+    "./ripple": "./dist/ripple.scss",
+    "./disabled": "./dist/disabled.scss",
+    "./disabled/classes": "./dist/disabled.module.css",
+    "./theme.default.css": "./src/generator/theme.default.css",
+    "./config.default": {
+      "types": "./dist/config.default.d.mts",
+      "import": "./dist/config.default.mjs"
+    },
+    "./is": "./dist/is.scss",
+    "./duration": "./dist/duration.scss",
+    "./theme": "./dist/theme.scss",
+    "./package.json": "./package.json",
+    "./theme-provider": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
+    },
+    "./theme-provider/style.css": "./dist/components/style.css",
+    "./theme-provider.module.css": "./dist/components/theme-provider.module.css"
+  },
+  "scripts": {
+    "theme:build": "node ../../scripts/gen-theme-default.ts && tsdown && node ../../scripts/build-contracts.ts && vite build",
+    "theme:dev": "node ../../scripts/build-contracts.ts --watch & node ../../scripts/gen-theme-default.ts --watch & tsdown --watch & vite build --watch",
+    "theme:typecheck": "tsc -p tsconfig.json --noEmit",
+    "theme:gen-default": "node ../../scripts/gen-theme-default.ts",
+    "theme:test": "vitest run"
+  },
+  "dependencies": {
+    "@ui0/composable": "0.1.1",
+    "@ui0/types": "0.1.1",
+    "@ui0/util": "0.0.2",
+    "esbuild": "^0.27.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@ui0/vite": "0.1.1",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "sass-embedded": "^1.80.0",
+    "vite-plugin-dts": "^5.1.2",
+    "vue": "^3.5.45"
+  },
+  "peerDependencies": {
+    "@ui0/core": "0.1.1",
+    "@ui0/shared": "0.0.601",
+    "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+    "vue": "^3.5.45"
+  }
+}

package/src/contracts/backdrop/backdrop.contract.ts

@@ -0,0 +1,44 @@
+import { AT_SIGN } from '@ui0/shared'
+// The backdrop contract's processing endpoint: the backdrop prop selects a
+// backdrop-filter function; the deal resolves the prop value to the hashed
+// setter class from the module map (merged with the component's own $style).
+import type { ClassList, CSSModuleClassList, StyleList } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { isArray, isString, mergeCssModulesStyles } from '@ui0/util'
+
+import type { BackdropProps } from './backdrop.types'
+
+import $backdrop from './backdrop.module.css'
+
+function backdropClasses(p: BackdropProps, s?: CSSModuleClassList): ClassList {
+  const $ = mergeCssModulesStyles($backdrop, s)
+  console.log('$', $)
+
+  if (p.backdrop) return [$['backdrop']]
+  return []
+}
+
+export function backdropDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  return {
+    classes: () => instance.inject(backdropClasses(props, instance.$styles)),
+    styles() {
+      const out: StyleList = {}
+      const val = props.backdrop
+      if (val) {
+        if (isArray(val)) {
+        } else if (isString(val)) {
+          const split = val.split(AT_SIGN)
+          if (split[1]) {
+            out['--0-backdrop-' + split[0]] = split[1]
+            out['--0-backdrop'] = `${split[0]}(var(--0-backdrop-${split[0]}))`
+          } else {
+            out['--0-backdrop'] = `${props.backdrop}(var(--0-backdrop-${props.backdrop}))`
+          }
+        }
+      }
+      return instance.inject(out)
+    }
+  }
+}

package/src/contracts/backdrop/backdrop.generator.ts

@@ -0,0 +1,82 @@
+// The backdrop contract's generator endpoint: one setter class per
+// backdrop-filter function the config enables. The backdrop prop selects
+// which function a component gets; the configured default lands on the theme
+// block as `--0-backdrop-*` and doubles as the setter's var fallback.
+import type { CSSModuleClassList, VarList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import type { ContractFactory } from '../generator'
+import type { BackdropFunction } from './backdrop.types'
+
+import $backdrop from './backdrop.module.css'
+
+/** every backdrop-filter function the prop can select */
+export const BACKDROP_FUNCTIONS: ReadonlyArray<BackdropFunction> = [
+  'blur',
+  'brightness',
+  'contrast',
+  'drop-shadow',
+  'grayscale',
+  'hue-rotate',
+  'invert',
+  'opacity',
+  'saturate',
+  'sepia'
+]
+
+/** fallback value per function when the config omits the value */
+const DEFAULTS: Record<BackdropFunction, string> = {
+  blur: '4px',
+  brightness: '0.5',
+  contrast: '0.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'
+}
+
+const backdropGenerator: ContractFactory = (ctx): ThemeContractGenerator => {
+  const { hash } = ctx
+  const config = ctx.config.backdrop
+  // which functions ship: the appearance config's keys by default, plus any
+  // function the settings turn on; a `false` in the settings always wins.
+  // (a whole-contract `false` never reaches here - the orchestrator skips
+  // disabled contracts; narrowed defensively anyway)
+  const backdropSettings = ctx.settings.backdrop
+  const fnSettings: Partial<Record<BackdropFunction, boolean>> =
+    backdropSettings === false ? {} : (backdropSettings ?? {})
+  const fromConfig: BackdropFunction[] = config ? (Object.keys(config) as BackdropFunction[]) : ['blur']
+  const enabled = [
+    ...new Set([...fromConfig, ...(Object.keys(fnSettings) as BackdropFunction[]).filter((fn) => fnSettings[fn])])
+  ].filter((fn) => fnSettings[fn] !== false)
+
+  function vars(): Record<string, VarList> {
+    const backdrop: VarList = {}
+    for (const fn of enabled) {
+      backdrop[fn] = `${config?.[fn] ?? DEFAULTS[fn]}`
+    }
+    return { backdrop }
+  }
+  console.log('hash', $backdrop.backdrop)
+
+  return {
+    namespace: 'bd',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => {
+      return (
+        `.${$backdrop.backdrop} {\n` +
+        `  backdrop-filter: var(--0-backdrop);\n` +
+        `  -webkit-backdrop-filter: var(--0-backdrop);\n` +
+        `  will-change: backdrop-filter;\n` +
+        `}`
+      )
+    },
+    class: (): CSSModuleClassList => ({ ...$backdrop }),
+    styles: () => ({})
+  }
+}
+
+export default backdropGenerator

package/src/contracts/backdrop/backdrop.keys.ts

@@ -0,0 +1,7 @@
+import type { ThemeContractDeal } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+import type { BackdropProps } from './backdrop.types'
+
+export const BackdropRefKey = Symbol('BackdropRefKey') as InjectionKey<Ref<BackdropProps['backdrop']>>
+export const BackdropContractKey = Symbol('BackdropContractKey') as InjectionKey<ThemeContractDeal>

package/src/contracts/backdrop/backdrop.module.css

@@ -0,0 +1,3 @@
+.backdrop {
+  /*@*/
+}

package/src/contracts/backdrop/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;
+}