@ui0/theme 0.0.0-stage → 0.1.0

package/src/contracts/backdrop/backdrop.types.ts

@@ -0,0 +1,45 @@
+import type { MaybeAngle, MaybePercents, MaybeUnits, Numberish } from '@ui0/types'
+
+/** the backdrop-filter functions the backdrop prop selects from */
+export type BackdropFunction =
+  | 'blur'
+  | 'brightness'
+  | 'contrast'
+  | 'drop-shadow'
+  | 'grayscale'
+  | 'hue-rotate'
+  | 'invert'
+  | 'opacity'
+  | 'saturate'
+  | 'sepia'
+
+export interface BackdropProps {
+  backdrop?: BackdropFunction | `${BackdropFunction}@${Numberish}`
+}
+
+/** per-function default values the generator turns into setter classes */
+export interface BackdropThemeAppearanceConfig {
+  blur?: MaybeUnits
+  brightness?: MaybePercents
+  contrast?: MaybePercents
+  'drop-shadow'?: string
+  grayscale?: MaybePercents
+  'hue-rotate'?: MaybeAngle
+  invert?: MaybePercents
+  opacity?: MaybePercents
+  saturate?: MaybePercents
+  sepia?: MaybePercents
+}
+
+// registration: the contract announces itself to the package registries
+// (interface merging - no central import of the contracts anywhere)
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    backdrop?: BackdropThemeAppearanceConfig
+  }
+  interface Ui0ThemeContracts extends BackdropProps {}
+  interface Ui0ThemeContractSettings {
+    /** `false` disables the contract entirely; otherwise per-function toggles */
+    backdrop?: false | Partial<Record<BackdropFunction, boolean>>
+  }
+}

package/src/contracts/backdrop/index.ts

@@ -0,0 +1,21 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { backdropDeal } from './backdrop.contract'
+import { BackdropContractKey, BackdropRefKey } from './backdrop.keys'
+import type { BackdropProps } from './backdrop.types'
+
+export { default as $style } from './backdrop.module.css'
+export type * from './backdrop.types'
+export * from './backdrop.keys'
+
+export const BackdropPropsKeys: ReadonlyArray<keyof BackdropProps> = ['backdrop']
+
+export const backdrop: ThemeContract = {
+  name: 'backdrop',
+  key: BackdropContractKey,
+  ref: BackdropRefKey,
+  deal: backdropDeal,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  props: BackdropPropsKeys
+}

package/src/contracts/color/color.contract.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest'
+
+import { hashClassName } from '../../generator/hash'
+import { ThemeContractInstance } from '../contract'
+import { color } from './index'
+
+function setup(props: Record<string, unknown>) {
+  const provider = new ThemeContractInstance('test', props, {})
+  provider.add(color)
+  return provider
+}
+
+describe('colorDeal - v2', () => {
+  it('delivers opacity as inline source vars, swatches as classes', () => {
+    const provider = setup({ color: 'error@40', fill: 'black@50' })
+    const classes = provider.classes()
+    expect(classes).toContain(hashClassName('c-error'))
+    expect(classes).toContain(hashClassName('f-black'))
+    expect(classes).not.toContain(hashClassName('co-40'))
+    const styles = provider.styles()
+    expect(styles['--0-c-src']).toBe('0.4')
+    expect(styles['--0-f-src']).toBe('0.5')
+    expect(classes).toContain(hashClassName('colored'))
+    expect(classes).toContain(hashClassName('filled'))
+  })
+
+  it('maps a positional pair onto scheme-gated classes + scheme source vars', () => {
+    const provider = setup({ color: 'white/success@50' })
+    const classes = provider.classes()
+    expect(classes).toContain(hashClassName('light-c-white'))
+    expect(classes).toContain(hashClassName('dark-c-success'))
+    expect(provider.styles()['--0-c-src-d']).toBe('0.5')
+  })
+
+  it('maps pseudo overrides from the same prop', () => {
+    const provider = setup({ color: 'success hover:warning@90' })
+    const classes = provider.classes()
+    expect(classes).toContain(hashClassName('c-success'))
+    expect(classes).toContain(hashClassName('hover-c-warning'))
+    expect(provider.styles()['--0-c-src-hover']).toBe('0.9')
+  })
+
+  it('maps a scheme+pseudo combo onto the combined source var', () => {
+    const provider = setup({ color: 'dark:focus:warning@60' })
+    expect(provider.classes()).toContain(hashClassName('dark-focus-c-warning'))
+    expect(provider.styles()['--0-c-src-d-focus']).toBe('0.6')
+  })
+
+  it('resolves the gradient prop onto the --0-g-cur style', () => {
+    const provider = setup({ gradient: 'to-right error->success@80' })
+    const stylesFirst = provider.styles()
+    const classes = provider.classes()
+    expect(stylesFirst['--0-g-cur']).toBe(
+      'linear-gradient(to right, rgb(var(--0-c-error-v) / 1), rgb(var(--0-c-success-v) / 0.8))'
+    )
+    expect(classes).toContain(hashClassName('gradiented'))
+  })
+
+  it('serves classes and styles from one compute, either call first', () => {
+    const provider = setup({ color: 'error' })
+    expect(provider.styles()).toEqual({})
+    expect(provider.classes()).toContain(hashClassName('c-error'))
+  })
+
+  it('recomputes when the prop or the inherit context changes', () => {
+    const props = { color: 'inherit' as any }
+    const provider = setup(props)
+    const context = { value: 'highlight' }
+    provider.setContext({ color: context as any })
+
+    expect(provider.classes()).toContain(hashClassName('c-highlight'))
+    context.value = 'error'
+    expect(provider.classes()).toContain(hashClassName('c-error'))
+  })
+})

package/src/contracts/color/color.contract.ts

@@ -0,0 +1,97 @@
+// The color contract's processing endpoint (v2): resolves the color/fill
+// props onto hashed setter classes (via the token parser + serializer) and
+// the gradient prop onto the `--0-g-cur` inline style. One parse pass per
+// prop change, shared by classes() and styles().
+import type { ClassList, StyleList } from '@ui0/types'
+import type { ContractProvider, ThemeContractDeal } from '@ui0/types'
+import { isString, mergeCssModulesStyles } from '@ui0/util'
+
+import { gradientStyle } from './color.gradient'
+import { serializeTokens } from './color.serialize'
+import { parseColorProp } from './color.token'
+import type { ColorProps, FillProps, GradientProps } from './color.types'
+
+import $color from './color.module.css'
+
+type Painted = ColorProps & FillProps & GradientProps
+
+export function colorDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  // one parse pass per prop change, shared by classes() and styles() -
+  // either may be called first; the key also carries the inherited context
+  // values so an `inherit` prop follows a context change
+  let cache: { key: string; value: { classes: ClassList; styles: StyleList } } | undefined
+
+  const norm = (v: unknown) => (isString(v) ? v : Array.isArray(v) ? v.join(' ') : '')
+
+  const ensure = () => {
+    const key = [
+      norm(props.color),
+      norm(props.fill),
+      norm(props.gradient),
+      norm(instance.context?.color?.value),
+      norm(instance.context?.fill?.value)
+    ].join('|')
+    if (cache && cache.key === key) return cache.value
+    const value = paint(resolveProps())
+    cache = { key, value }
+    return value
+  }
+
+  // the `inherit` passthrough: an `inherit` prop re-reads the provided
+  // context ref (a parent's prop), everything else resolves its own value
+  const resolveProps = (): Painted => {
+    const out: Record<string, any> = {}
+    const color = props.color
+    const fill = props.fill
+
+    if (isString(color) && color.split(' ')[0] === 'inherit') {
+      const v = instance.context?.color?.value
+      if (v) out['color'] = v
+    } else if (color) {
+      out['color'] = color
+    }
+    if (isString(fill) && fill.split(' ')[0] === 'inherit') {
+      const v = instance.context?.fill?.value
+      if (v) out['fill'] = v
+    } else if (fill) {
+      out['fill'] = fill
+    }
+    if (props.gradient) out['gradient'] = props.gradient
+    return out as Painted
+  }
+
+  const paint = (p: Painted): { classes: ClassList; styles: StyleList } => {
+    const classes: ClassList = []
+    const styles: StyleList = {}
+    const $ = mergeCssModulesStyles($color, instance.$styles)
+
+    if (p.color) {
+      const out = serializeTokens(parseColorProp(p.color), 'c', $)
+      classes.push(...out.classes)
+      Object.assign(styles, out.styles)
+      classes.push($.colored)
+    }
+    if (p.fill) {
+      const out = serializeTokens(parseColorProp(p.fill), 'f', $)
+      classes.push(...out.classes)
+      Object.assign(styles, out.styles)
+      classes.push($.filled)
+    }
+    if (p.gradient) {
+      const g = gradientStyle(p.gradient)
+      if (g) {
+        styles['--0-g-cur'] = g
+        classes.push($.gradiented)
+      }
+    }
+    return { classes, styles }
+  }
+
+  return {
+    classes: () =>
+      props.color || props.fill || props.gradient ? instance.inject(ensure().classes) : instance.inject([]),
+    styles: () => instance.inject(ensure().styles)
+  }
+}

package/src/contracts/color/color.generator.spec.ts

@@ -0,0 +1,73 @@
+import type { ThemePresetName, Ui0ThemePresetAppearanceConfig } from '@ui0/types'
+import { hashClassName as viteHashClassName } from '@ui0/vite/css-modules'
+import { describe, expect, it } from 'vitest'
+
+import { hashClassName } from '../../generator/hash'
+import type { ContractContext } from '../generator'
+import createColorGenerator from './color.generator'
+
+const ctx = (
+  config: Ui0ThemePresetAppearanceConfig = {},
+  settings: ContractContext['settings'] = {}
+): ContractContext => ({
+  presetName: 'test' as ThemePresetName,
+  config,
+  settings,
+  hash: hashClassName
+})
+
+describe('createColorGenerator - setters', () => {
+  it('emits swatch setters per slot and scheme gating, one line per rule', () => {
+    const css = createColorGenerator(ctx({ color: { error: '#f00' } })).css()
+    expect(css).toContain(`.${hashClassName('c-error')} { --0-c-cur-v: var(--0-c-error-v); }`)
+    expect(css).toContain(`.${hashClassName('f-error')} { --0-f-cur-v: var(--0-c-error-v); }`)
+    expect(css).toContain(`.theme_dark .${hashClassName('dark-c-error')} { --0-c-cur-v: var(--0-c-error-v); }`)
+  })
+
+  it('emits pseudo setters with pseudo-class selectors', () => {
+    const css = createColorGenerator(ctx({ color: { error: '#f00' } })).css()
+    expect(css).toContain(`.${hashClassName('hover-c-error')}:hover { --0-c-cur-v: var(--0-c-error-v); }`)
+    expect(css).toContain(
+      `.theme_dark .${hashClassName('dark-active-f-error')}:active { --0-f-cur-v: var(--0-c-error-v); }`
+    )
+  })
+
+  it('carries NO opacity rules - values ride element inline styles', () => {
+    const css = createColorGenerator(ctx({ color: { error: '#f00' } })).css()
+    expect(css).not.toContain('--0-c-cur-o:')
+    expect(css).not.toContain('--0-f-cur-o:')
+    expect(css).not.toContain('co-40')
+    const classes = createColorGenerator(ctx({ color: { error: '#f00' } })).class()
+    expect(Object.keys(classes).some((k) => k.includes('co-'))).toBe(false)
+  })
+
+  it('registers the swatch grid in the class map, in distiller lockstep', () => {
+    const classes = createColorGenerator(ctx({ color: { error: '#f00' } })).class()
+    for (const name of [
+      'colored',
+      'filled',
+      'gradiented',
+      'c-error',
+      'light-c-error',
+      'dark-hover-c-error',
+      'focus-f-error'
+    ]) {
+      expect(classes[name]).toBe(hashClassName(name))
+      expect(classes[name]).toBe(viteHashClassName(name))
+    }
+  })
+
+  it('emits the current slots from foreground/background', () => {
+    const vars = createColorGenerator(ctx({ color: { foreground: '#111', background: '#fff' } })).vars()
+    expect(vars.c['cur-v']).toBe('var(--0-c-foreground-v)')
+    expect(vars.f['cur-v']).toBe('var(--0-c-background-v)')
+  })
+
+  it('emits only markers for an empty pool', () => {
+    const gen = createColorGenerator(ctx())
+    expect(gen.css()).toBe(
+      ['colored', 'filled', 'gradiented'].map((n) => `.${hashClassName(n)} { /* slot marker */ }`).join('\n')
+    )
+    expect(Object.keys(gen.class())).toEqual(['colored', 'filled', 'gradiented'])
+  })
+})

package/src/contracts/color/color.generator.ts

@@ -0,0 +1,122 @@
+// The color contract's generator endpoint (v2): turns the preset's color
+// pool into the --0-c-* swatch vars + ramps and the swatch setter classes the
+// runtime resolves against. Setter family:
+//   [scheme-][pseudo-]{c|f}-<name>   re-points the current slot
+// gating: ungated (both schemes / no pseudo), .theme_light, .theme_dark for
+// schemes; :hover/:active/:focus pseudo-classes for pseudos. The full grid
+// ships per pool name (the used-tokens resolver is planned to prune it).
+// Opacity VALUES never appear here - they ride element inline styles and the
+// color.use() scss bridges pick the active context (see color.scss). The
+// slot marker classes are static - they ship in color.inject.module.css;
+// class() re-exports the registry map plus the config-generated grid.
+import type { CSSModuleClassList, RgbTuple, VarList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import { buildPool, resolvePool } from '../../generator/pool'
+import type { ContractFactory } from '../generator'
+import { ColorPseudoValues, ColorSchemeValues } from './color.token'
+import type { ColorThemeAppearanceConfig, ThemeColorPool } from './color.types'
+
+import colorCss from './color.inject.module.css'
+import $color from './color.module.css'
+
+// the ramp math (hsl/oklch) yields fractional channels - the css space-
+// separated syntax wants integers (also what hexToRgb/named colors produce)
+function channels(rgb: RgbTuple): string {
+  return rgb.map((v) => Math.round(v)).join(' ')
+}
+
+const PSEUDOS: ReadonlyArray<string | undefined> = [undefined, ...ColorPseudoValues]
+const GATINGS: ReadonlyArray<{ prefix: string; selector: string }> = [
+  { prefix: '', selector: '' },
+  ...ColorSchemeValues.map((s) => ({
+    prefix: `${s}-`,
+    selector: `.theme_${s} `
+  }))
+]
+const SLOTS = ['c', 'f'] as const
+
+const colorGenerator: ContractFactory = (ctx): ThemeContractGenerator => {
+  const { config, hash } = ctx
+
+  function vars(): Record<string, VarList> {
+    const pool = (config as { color?: ColorThemeAppearanceConfig }).color
+    const merged: ThemeColorPool = buildPool(pool, undefined)
+    if (!Object.keys(merged).length) return {}
+
+    const { base, ramps } = resolvePool(merged)
+    const c: VarList = {}
+    // every pool entry, foreground/background like any other - full word
+    for (const [name, rgb] of Object.entries(base)) {
+      c[`${name}-v`] = channels(rgb)
+      const ramp = ramps[name]
+      if (!ramp) continue
+      for (const [type, steps] of Object.entries(ramp)) {
+        steps?.forEach((rgbStep, i) => {
+          c[`${name}-${type}${i + 1}-v`] = channels(rgbStep)
+        })
+      }
+    }
+    // the composed current slots a component consumes (color.scss mixins).
+    // The base theme block assigns the current channel slots from the
+    // foreground/background values; a .c-*/.f-* setter re-declares the -v slot
+    // on its element to override
+    if ('foreground' in base) c['cur-v'] = 'var(--0-c-foreground-v)'
+    c.cur = 'rgb(var(--0-c-cur-v, var(--0-c-foreground-v)) / var(--0-c-o, 1))'
+    const f: VarList = {}
+    if ('background' in base) f['cur-v'] = 'var(--0-c-background-v)'
+    f.cur = 'rgb(var(--0-f-cur-v, var(--0-c-background-v)) / var(--0-f-o, 1))'
+    return { c, f }
+  }
+
+  function css(): string {
+    const pool = (config as { color?: ColorThemeAppearanceConfig }).color
+    const names = Object.keys(buildPool(pool, undefined))
+    if (!names.length) return colorCss
+
+    const lines: string[] = []
+    for (const { prefix, selector } of GATINGS) {
+      for (const pseudo of PSEUDOS) {
+        const pseudoPrefix = pseudo ? `${pseudo}-` : ''
+        const pseudoSuffix = pseudo ? `:${pseudo}` : ''
+        for (const name of names) {
+          for (const slot of SLOTS) {
+            const cls = `${prefix}${pseudoPrefix}${slot}-${name}`
+            const ns = slot === 'c' ? '--0-c' : '--0-f'
+            lines.push(`${selector}.${hash(cls)}${pseudoSuffix} { ${ns}-cur-v: var(--0-c-${name}-v); }`)
+          }
+        }
+      }
+    }
+    return `${colorCss}\n${lines.join('\n')}`
+  }
+
+  function classes(): CSSModuleClassList {
+    // the slot markers come from the registry map; the swatch grid is
+    // config-generated and rides the same name-only hasher
+    const out: CSSModuleClassList = { ...$color }
+    const pool = (config as { color?: ColorThemeAppearanceConfig }).color
+    const names = Object.keys(buildPool(pool, undefined))
+    for (const { prefix } of GATINGS) {
+      for (const pseudo of PSEUDOS) {
+        const pseudoPrefix = pseudo ? `${pseudo}-` : ''
+        for (const name of names) {
+          for (const slot of SLOTS) {
+            out[`${prefix}${pseudoPrefix}${slot}-${name}`] = hash(`${prefix}${pseudoPrefix}${slot}-${name}`)
+          }
+        }
+      }
+    }
+    return out
+  }
+
+  return {
+    namespace: 'c',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css,
+    class: classes,
+    styles: () => ({})
+  }
+}
+
+export default colorGenerator

package/src/contracts/color/color.gradient.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import { gradientStyle } from './color.gradient'
+
+describe('gradientStyle', () => {
+  it('composes two stops with the default direction', () => {
+    expect(gradientStyle('error->success')).toBe(
+      'linear-gradient(to bottom, rgb(var(--0-c-error-v) / 1), rgb(var(--0-c-success-v) / 1))'
+    )
+  })
+
+  it('supports a direction keyword and stop opacity', () => {
+    expect(gradientStyle('to-br error->success@80->highlight')).toBe(
+      'linear-gradient(to bottom right, rgb(var(--0-c-error-v) / 1), rgb(var(--0-c-success-v) / 0.8), rgb(var(--0-c-highlight-v) / 1))'
+    )
+  })
+
+  it('tolerates spaces around arrows', () => {
+    expect(gradientStyle('to-right error -> success')).toBe(
+      'linear-gradient(to right, rgb(var(--0-c-error-v) / 1), rgb(var(--0-c-success-v) / 1))'
+    )
+  })
+  it('returns undefined for an empty value', () => {
+    expect(gradientStyle('')).toBeUndefined()
+    expect(gradientStyle(undefined)).toBeUndefined()
+  })
+
+  it('throws on a single stop or an unknown direction', () => {
+    expect(() => gradientStyle('error')).toThrow()
+    expect(() => gradientStyle('to-diagonal error->success')).toThrow()
+  })
+})

package/src/contracts/color/color.gradient.ts

@@ -0,0 +1,52 @@
+// the `gradient` prop -> the `--0-g-cur` value (a linear-gradient()
+// composed of live var() references to pool channels). Delivered as an
+// element inline style, NOT a class: a gradient is a composition of values,
+// and class-per-combination would explode combinatorially. The references
+// stay live - a scheme block revalues the underlying --0-c-* channels and
+// the gradient re-paints without any gradient-specific rule.
+//
+//   gradient="error->success"
+//   gradient="to-br error->success@80->highlight"
+import { isString } from '@ui0/util'
+
+import { parseRef } from './color.token'
+
+const DIRECTIONS: Record<string, string> = {
+  right: 'to right',
+  left: 'to left',
+  top: 'to top',
+  bottom: 'to bottom',
+  tr: 'to top right',
+  tl: 'to top left',
+  br: 'to bottom right',
+  bl: 'to bottom left'
+}
+
+/** compile a gradient prop value into a `linear-gradient(...)` string */
+export function gradientStyle(value: string | undefined | null): string | undefined {
+  if (!isString(value) || !value.trim()) return undefined
+  const parts = value.trim().split(/\s+/)
+
+  let direction = DIRECTIONS.bottom
+  if (parts[0]?.startsWith('to-')) {
+    const css = DIRECTIONS[parts[0].slice(3)]
+    if (!css)
+      throw new Error(
+        `ui0 gradient: unknown direction "${parts[0]}" (expected to-right|to-left|to-top|to-bottom|to-tr|to-tl|to-br|to-bl)`
+      )
+    direction = css
+    parts.shift()
+  }
+
+  // rejoin so spaced arrows (`error -> success`) compile too
+  const stops = parts
+    .join('')
+    .split('->')
+    .map((s) => parseRef(s))
+    .filter((s) => s.ref)
+
+  if (stops.length < 2) throw new Error(`ui0 gradient: "${value}" needs at least two stops (ref[->ref...])`)
+
+  const paint = stops.map((s) => `rgb(var(--0-c-${s.ref}-v) / ${s.opacity ?? 1})`).join(', ')
+  return `linear-gradient(${direction}, ${paint})`
+}

package/src/contracts/color/color.inject.module.css

@@ -0,0 +1,5 @@
+@value colored, filled, gradiented from './color.module.css';
+
+.colored { /* slot marker */ }
+.filled { /* slot marker */ }
+.gradiented { /* slot marker */ }

package/src/contracts/color/color.keys.ts

@@ -0,0 +1,7 @@
+import type { ComponentColor } from '@ui0/types'
+import type { ThemeContractDeal } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+export const ColorContractKey = Symbol('ColorContractKey') as InjectionKey<ThemeContractDeal>
+export const ColorRefKey = Symbol('ColorRefKey') as InjectionKey<Ref<ComponentColor>>
+export const FillRefKey = Symbol('FillRefKey') as InjectionKey<Ref<ComponentColor>>

package/src/contracts/color/color.module.css

@@ -0,0 +1,5 @@
+.colored,
+.filled,
+.gradiented {
+  /*@*/
+}

package/src/contracts/color/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();
+}