@ui0/theme 0.1.4 → 0.1.6

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

@@ -11,6 +11,7 @@
 // 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 { SPACES } from '@ui0/util'
 
 import { buildPool, resolvePool } from '../../generator/pool'
 import type { ContractFactory } from '../generator'
@@ -66,6 +67,12 @@ const colorGenerator: ContractFactory = (ctx): ThemeContractGenerator => {
     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))'
+    // the background-relative contrast flip: same hsl lightness comparison
+    // the c/s ramps use - dark backgrounds read against white, light ones
+    // against black; nothing is emitted without a background to flip
+    if ('background' in base) {
+      c['theme-contrast-v'] = SPACES.hsl.lightnessOf(base.background) < 50 ? '255 255 255' : '0 0 0'
+    }
     return { c, f }
   }
 

package/src/contracts/color/index.ts

@@ -5,7 +5,7 @@ import { colorDeal } from './color.contract'
 import { ColorContractKey, ColorRefKey } from './color.keys'
 import type { ColorProps, GradientProps, FillProps } from './color.types'
 
-export { default as $style } from './color.module.css'
+export { default as $color } from './color.module.css'
 export type * from './color.types'
 export * from './color.keys'
 

package/src/contracts/contract.ts

@@ -1,6 +1,8 @@
+import { RegistryFlags } from '@ui0/shared'
 import type { AnyProps, ClassList, CSSModuleClassList, Indexed, StyleList } from '@ui0/types'
 import type { ContractProvider, ContractRefs, ThemeContract, ThemeContractName, Ui0ThemeContracts } from '@ui0/types'
 import { isArray, isString } from '@ui0/util'
+import { ThemeContractFlags } from '../constants'
 function createProviderInstance(name: string, props?: Ui0ThemeContracts, styles?: CSSModuleClassList) {
   const provider = {}
 }
@@ -35,7 +37,9 @@ export class ThemeContractInstance implements ContractProvider {
       if (isArray(name)) {
         name.forEach((n) => {
           if (contract.props?.includes(n)) {
-            jobs[contract.name] = contract.deal
+            if (contract.flag & ThemeContractFlags.dealer) {
+              jobs[contract.name] = contract.deal
+            }
           }
         })
       } else if (isString(name)) {

package/src/contracts/disabled/index.ts

@@ -5,7 +5,7 @@ import { disabledDeal } from './disabled.contract'
 import { DisabledContractKey, DisabledRefKey } from './disabled.keys'
 import type { DisabledProps } from './disabled.types'
 
-export { default as $style } from './disabled.module.css'
+export { default as $disabled } from './disabled.module.css'
 export type * from './disabled.types'
 export * from './disabled.keys'
 

package/src/contracts/display/display.contract.ts

@@ -7,34 +7,23 @@ import { mergeCssModulesStyles } from '@ui0/util'
 import type { Ref } from 'vue'
 
 import { EMPTY_OBJ } from '../../constants'
-import type { DisplayProps } from './display.types'
 
 import $display from './display.module.css'
 
-// the prop -> class wiring: resolves the prop value to the hashed class from
-// the module map (merged with the component's own $style)
-function displayClasses(props: DisplayProps, styles?: CSSModuleClassList): ClassList {
-  const $ = mergeCssModulesStyles($display, styles)
-  const out: ClassList = []
-  if (props.display && $.displayed) out.push($.displayed)
-  return out
-}
-
 export function displayDeal(instance: ContractProvider): ThemeContractDeal {
-  const props = instance.props
-
   return {
     classes: () => {
-      if (!props.display) return instance.inject([])
-
-      if (props.display === 'inherit') {
-        const ctx = instance.context as Record<string, Ref<any> | undefined> | null
-        if (ctx?.display) {
-          return instance.inject(displayClasses({ display: ctx.display.value }, instance.$styles))
-        }
-      }
-
-      return instance.inject(displayClasses(props as DisplayProps, instance.$styles))
+      return []
+      //       if (!props.display) return instance.inject([])
+      //
+      //       if (props.display === 'inherit') {
+      //         const ctx = instance.context as Record<string, Ref<any> | undefined> | null
+      //         if (ctx?.display) {
+      //           return instance.inject(displayClasses({ display: ctx.display.value }, instance.$styles))
+      //         }
+      //       }
+      //
+      //       return instance.inject(displayClasses(props as DisplayProps, instance.$styles))
     },
     styles: () => instance.inject(EMPTY_OBJ)
   }

package/src/contracts/display/display.scss

@@ -2,9 +2,6 @@
 // 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})';

package/src/contracts/display/index.ts

@@ -9,7 +9,7 @@ import { displayDeal } from './display.contract'
 import { DisplayContractKey, DisplayRefKey } from './display.keys'
 import type { DisplayProps } from './display.types'
 
-export { default as $style } from './display.module.css'
+export { default as $duration } from './display.module.css'
 export type * from './display.types'
 export * from './display.keys'
 

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { hashClassName } from '../../generator/hash'
+import type { ThemePresetName } from '../../types'
+import type { ContractContext } from '../generator'
+import createDurationGenerator from './duration.generator'
+
+const ctx = (config = {}): ContractContext => ({
+  presetName: 'test' as ThemePresetName,
+  config,
+  settings: {},
+  hash: hashClassName
+})
+
+describe('createDurationGenerator', () => {})

package/src/contracts/duration/duration.generator.ts

@@ -0,0 +1,40 @@
+import type { CSSModuleClassList, VarList, ThemeContractGenerator, StyleList } from '@ui0/types'
+import { toUnits } from '@ui0/util'
+
+import type { ContractContext, ContractFactory } from '../generator'
+
+const durationGenerator: ContractFactory = (ctx: ContractContext): ThemeContractGenerator => {
+  const { settings } = ctx
+
+  function vars(): Record<string, VarList> {
+    const { duration } = settings
+
+    if (duration) {
+      return {
+        d: Object.fromEntries(Object.entries(duration).map(([k, v]) => [k, `${v}ms`]))
+      }
+    }
+    return {}
+  }
+
+  return {
+    namespace: 'd',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => '',
+    class: (): CSSModuleClassList => ({}),
+    localScss: () => {
+      const dur = ctx.settings.duration
+      const out: StyleList = {}
+
+      if (dur) {
+        Object.keys(dur).forEach((k) => {
+          out[`$d-${k}`] = toUnits(dur[k], 'ms')
+        })
+      }
+      return out
+    },
+    styles: () => ({})
+  }
+}
+
+export default durationGenerator

package/src/contracts/duration/duration.keys.ts

@@ -0,0 +1,4 @@
+import type { ThemeContract } from '@ui0/types'
+import type { InjectionKey } from 'vue'
+
+export const DurationContractKey = Symbol('DurationContractKey') as InjectionKey<ThemeContract>

package/src/{styles → contracts/duration}/duration.scss

@@ -1,13 +1,3 @@
-@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);

package/src/contracts/duration/duration.types.ts

@@ -0,0 +1,16 @@
+import type { LiteralUnion, MaybeUnits } from '@ui0/types'
+
+export type DurationProp = LiteralUnion<
+  'superslow' | 'fast' | 'slow' | 'basic' | 'gently' | 'faster' | 'superfast' | 'values'
+>
+
+export interface DurationThemeAppearanceConfig {}
+
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    duration?: DurationThemeAppearanceConfig
+  }
+  interface Ui0ThemeContractSettings {
+    duration?: Record<DurationProp, MaybeUnits>
+  }
+}

package/src/contracts/duration/duration.util.ts

@@ -0,0 +1,12 @@
+import type { DurationProp } from './duration.types'
+
+export const DurationKeys: ReadonlyArray<DurationProp> = [
+  'superslow',
+  'fast',
+  'slow',
+  'basic',
+  'gently',
+  'faster',
+  'superfast',
+  'values'
+]

package/src/contracts/duration/index.ts

@@ -0,0 +1,13 @@
+import type { ThemeContract } from '@ui0/types'
+
+import { ThemeContractFlags } from '../../constants'
+import { DurationContractKey } from './duration.keys'
+
+export type * from './duration.types'
+export * from './duration.keys'
+
+export const duration: ThemeContract = {
+  key: DurationContractKey,
+  name: 'duration',
+  flag: ThemeContractFlags.generator
+}

package/src/contracts/elevation/index.ts

@@ -5,7 +5,7 @@ import { elevationDeal } from './elevation.contract'
 import { ElevationContractKey, ElevationRefKey } from './elevation.keys'
 import type { ElevationProps } from './elevation.types'
 
-export { default as $style } from './elevation.module.css'
+export { default as $elevation } from './elevation.module.css'
 export type * from './elevation.types'
 export * from './elevation.keys'
 export const ElevationPropsKeys: ReadonlyArray<keyof ElevationProps> = ['elevation']

package/src/contracts/index.ts

@@ -4,6 +4,7 @@ import { backdrop, BackdropPropsKeys } from './backdrop'
 import { color, ColorPropsKeys } from './color'
 import { disabled, DisabledPropsKeys } from './disabled'
 import { display } from './display'
+import { duration } from './duration'
 import { elevation, ElevationPropsKeys } from './elevation'
 import { round, RoundPropsKeys } from './round'
 import { size, SizePropsKeys } from './size'
@@ -21,13 +22,14 @@ export const contracts: Record<ThemeContractName, ThemeContract> = {
   backdrop,
   round,
   elevation,
+  duration,
   style,
   disabled,
   display,
   typography,
   size
 }
-export const props = [
+export const props: Array<string> = [
   ColorPropsKeys,
   RoundPropsKeys,
   SizePropsKeys,

package/src/contracts/round/index.ts

@@ -5,7 +5,7 @@ import { roundDeal } from './round.contract'
 import { RoundContractKey, RoundRefKey } from './round.keys'
 import type { RoundProps } from './round.types'
 
-export { default as $style } from './round.module.css'
+export { default as $round } from './round.module.css'
 export type * from './round.types'
 export * from './round.keys'
 

package/src/contracts/round/round.types.ts

@@ -2,7 +2,7 @@ import type { InheritValue, LiteralUnion } from '@ui0/types'
 
 export interface RoundProps {
   round?: Round
-  roundTarget?: RoundTarget
+  'round-target'?: RoundTarget
 }
 
 export interface RoundThemeAppearanceConfig {

package/src/contracts/size/index.ts

@@ -5,7 +5,7 @@ import { sizeDeal } from './size.contract'
 import { SizeContractKey, SizeRefKey } from './size.keys'
 import type { DensityProps, SizeProps } from './size.types'
 
-export { default as $style } from './size.module.css'
+export { default as $size } from './size.module.css'
 export type * from './size.types'
 export * from './size.keys'
 export { default as sizeGenerator } from './size.generator'

package/src/contracts/typography/index.ts

@@ -2,19 +2,18 @@
 // packages/templates/contract. Wiring left (see the generator output):
 //   1. add `typography` to src/contracts/index.ts (next to round/size/...)
 //   2. add typographyGenerator to src/generator.ts (contractGenerators)
+import type { ThemeContract } from '@ui0/types'
+
 import { ThemeContractFlags } from '../../constants'
-import type { ThemeContract } from '../../types'
 import { typographyDeal } from './typography.contract'
 import { TypographyContractKey, TypographyRefKey } from './typography.keys'
 import type { TypographyProps } from './typography.types'
 
-export { default as $style } from './typography.module.css'
+export { default as $typography } from './typography.module.css'
 export type * from './typography.types'
 export * from './typography.keys'
 
-export const TypographyPropsKeys: ReadonlyArray<keyof TypographyProps> = [
-  'typography'
-]
+export const TypographyPropsKeys: ReadonlyArray<keyof TypographyProps> = ['typography']
 
 export const typography: ThemeContract = {
   key: TypographyContractKey,

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

@@ -5,19 +5,21 @@ import type { ThemePresetName } from '../../types'
 import type { ContractContext } from '../generator'
 import createTypographyGenerator from './typography.generator'
 
-const ctx = (config = {}): ContractContext => ({
+const ctx = (config = {}, settings = {}): ContractContext => ({
   presetName: 'test' as ThemePresetName,
   config,
-  settings: {},
+  settings,
   hash: hashClassName
 })
 
 describe('createTypographyGenerator', () => {
-  it('emits a var for the configured base', () => {
+  it('emits vars from the contract settings', () => {
     const vars = createTypographyGenerator(
-      ctx({ typography: { base: '4px' } })
+      ctx({}, { typography: { fontSize: 20, fontSizeHeading: 22, headingRatio: 1.2 } })
     ).vars()
-    expect(vars.typography.base).toBe('4px')
+    expect(vars).toEqual({
+      typo: { fs: '20px', 'h-ratio': 1.2, 'h-fs': '22px' }
+    })
   })
 
   it('emits nothing without config', () => {

package/src/contracts/typography/typography.module.css

@@ -30,7 +30,7 @@
 .tw-wrap,
 .tw-balance,
 .tw-pretty,
-.tw-stable,
+.tw-stable
 {
   /*@shared*/
 }

package/src/contracts/typography/typography.types.ts

@@ -1,24 +1,5 @@
-// ---------------------------------------------------------------------------
-// CONTRACT TEMPLATE - a skeleton for new theme contracts, consumed by
-// scripts/gen-contract.ts in the templates package:
-//
-//   pnpm contract:gen
-//
-// The generator copies this folder into <package>/src/contracts/<name>/
-// (the theme package ships the contracts folder), substituting typography /
-// Typography / typography / t in file bodies and names. After generation:
-//
-//   1. add the contract to src/contracts/index.ts (registry)
-//   2. add <kebab>Generator to src/generator.ts (contractGenerators)
-//   3. fill in the prop values / appearance config below
-//
-// The package itself stays unaware of the contract - types land in the
-// registries via interface merging only.
-// ---------------------------------------------------------------------------
-import type { LiteralUnion, MaybeUnits, Numberish } from '@ui0/types'
+import type { LiteralUnion, MaybeUnits } from '@ui0/types'
 
-// 1. the values the prop accepts - the logical utility class names from
-//    typography.module.css (hashed onto the theme's setter classes)
 export type TypographyProp = LiteralUnion<
   | 'fw100'
   | 'fw200'
@@ -54,15 +35,10 @@ export type TypographyProp = LiteralUnion<
   | 'tw-stable'
 >
 
-// 2. the props this contract supplies to components
 export interface TypographyProps {
   typography?: TypographyProp
 }
-
-// 3. the contract's settings inside a theme preset (appearance config) -
-//    what the generator turns into css vars
 export interface TypographyThemeAppearanceConfig {
-  /** e.g. a base value the generator emits as a css var */
   fontSize?: MaybeUnits
 
   // base of h6?
@@ -70,7 +46,6 @@ export interface TypographyThemeAppearanceConfig {
   headingRatio?: number
 }
 export interface TypographyContractSettings {
-  /** e.g. a base value the generator emits as a css var */
   fontSize?: MaybeUnits
 
   // base of h6?
@@ -78,7 +53,6 @@ export interface TypographyContractSettings {
   headingRatio?: number
 }
 
-// 4. registration: announces this contract to the package registries.
 declare module '@ui0/types/theme' {
   interface Ui0ThemePresetAppearanceConfig {
     typography?: TypographyThemeAppearanceConfig

package/src/generator/theme.default.css

@@ -51,6 +51,7 @@ body {
   --0-c-black-v: 0 0 0;
   --0-c-cur-v: var(--0-c-foreground-v);
   --0-c-cur: rgb(var(--0-c-cur-v, var(--0-c-foreground-v)) / var(--0-c-o, 1));
+  --0-c-theme-contrast-v: 0 0 0;
   --0-f-cur-v: var(--0-c-background-v);
   --0-f-cur: rgb(var(--0-f-cur-v, var(--0-c-background-v)) / var(--0-f-o, 1));
 }
@@ -103,6 +104,16 @@ body {
   --0-typo-h-ratio: 1.2;
   --0-typo-h-fs: 22px;
 }
+.theme-default {
+  /* duration */
+  --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;
+}
 .theme-default {
   /* style */
   --0-style-version: 1.0.0;
@@ -115,58 +126,11 @@ body {
   /* color */
   --0-c-foreground-v: 255 255 255;
   --0-c-background-v: 0 0 0;
-}
-.theme-default.theme_dark {
-  /* dark additions */
-  --0-elv-x1: 1px;
-  --0-elv-y1: calc(var(--0-elv-x1) * 3);
-  --0-elv-x2: calc(var(--0-elv-x1) * 1.5);
-  --0-elv-y2: calc(var(--0-elv-x1) * 1.5);
-  --0-r-base: 4px;
-  --0-r-tl: 0px;
-  --0-r-tr: 0px;
-  --0-r-bl: 0px;
-  --0-r-basic: calc(var(--0-s-m, 42px) * var(--0-s-density, 1));
-  --0-r-br: 0px;
-  --0-display-xxs: 320px;
-  --0-display-xs: 480px;
-  --0-display-sm: 640px;
-  --0-display-md: 832px;
-  --0-display-lg: 1024px;
-  --0-display-hd: 1280px;
-  --0-display-xl: 1440px;
-  --0-display-xxl: 1680px;
-  --0-display-fhd: 1920px;
-  --0-display-qhd: 2560px;
-  --0-display-uhd: 3840px;
+  --0-c-theme-contrast-v: 255 255 255;
 }
 .theme-default.theme_light {
   color-scheme: light;
 }
-.theme-default.theme_light {
-  /* light additions */
-  --0-elv-x1: 1px;
-  --0-elv-y1: calc(var(--0-elv-x1) * 3);
-  --0-elv-x2: calc(var(--0-elv-x1) * 1.5);
-  --0-elv-y2: calc(var(--0-elv-x1) * 1.5);
-  --0-r-base: 4px;
-  --0-r-tl: 0px;
-  --0-r-tr: 0px;
-  --0-r-bl: 0px;
-  --0-r-basic: calc(var(--0-s-m, 42px) * var(--0-s-density, 1));
-  --0-r-br: 0px;
-  --0-display-xxs: 320px;
-  --0-display-xs: 480px;
-  --0-display-sm: 640px;
-  --0-display-md: 832px;
-  --0-display-lg: 1024px;
-  --0-display-hd: 1280px;
-  --0-display-xl: 1440px;
-  --0-display-xxl: 1680px;
-  --0-display-fhd: 1920px;
-  --0-display-qhd: 2560px;
-  --0-display-uhd: 3840px;
-}
 .si_bce5 {
   --0-s: var(--0-s-xxxs);
 }