@ui0/theme 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,101 @@
+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 createSizeGenerator from './size.generator'
+
+const ctx = (config: Ui0ThemePresetAppearanceConfig = {}): ContractContext => ({
+  presetName: 'test' as ThemePresetName,
+  config,
+  settings: {},
+  hash: hashClassName
+})
+
+describe('createSizeGenerator - vars', () => {
+  it('expands control/child base heights into the height scales and derived unit scales', () => {
+    const g = createSizeGenerator(ctx({ size: { control: 42, child: 24 } }))
+    const vars = g.vars()
+    expect(vars.s.m).toBe('42px')
+    expect(vars.s.l).toBe('50px')
+    expect(vars.sc.m).toBe('24px')
+    expect(vars.uc[1]).toBe('calc(var(--0-s-m) * var(--0-s-density, 1) / 14)')
+    expect(vars.ucc[1]).toBe('calc(var(--0-sc-m) * var(--0-s-density, 1) / 10)')
+  })
+
+  it('emits the density base whenever the contract sizes anything', () => {
+    const g = createSizeGenerator(ctx({ size: { control: '2.5rem' } }))
+    expect(g.vars().s.density).toBe(1)
+    const empty = createSizeGenerator(ctx({}))
+    expect(empty.vars().s).toBeUndefined()
+  })
+
+  it('passes string sizes through verbatim', () => {
+    const g = createSizeGenerator(ctx({ size: { control: '2.5rem' } }))
+    expect(g.vars().s.m).toBe('2.5rem')
+  })
+
+  it('has no per-scheme values', () => {
+    const g = createSizeGenerator(ctx({ size: { control: 42 } }))
+    expect(g.vars('dark')).toEqual({})
+    expect(g.vars('light')).toEqual({})
+  })
+})
+
+describe('createSizeGenerator - css', () => {
+  it('emits a setter class per scale step pointing --0-s at the step', () => {
+    // the setters ship in size.inject.module.scss (sass-expanded formatting);
+    // flatten the whitespace to assert rule-shaped output
+    const flat = createSizeGenerator(ctx()).css().replace(/\s+/g, ' ')
+    expect(flat).toContain(`.${hashClassName('sizeXl')} { --0-s: var(--0-s-xl); }`)
+    expect(flat).toContain(`.${hashClassName('sizeXxxs')} { --0-s: var(--0-s-xxxs); }`)
+    expect(flat).toContain(`.${hashClassName('sizeM')} { --0-s: var(--0-s-m); }`)
+    expect(flat).toContain(`.${hashClassName('sizeCustom')} { --0-s: var(--0-s-custom); }`)
+  })
+
+  it('does not depend on the preset config (setters resolve through vars)', () => {
+    const a = createSizeGenerator(ctx({ size: { control: 42 } })).css()
+    const b = createSizeGenerator(ctx({})).css()
+    expect(a).toBe(b)
+  })
+})
+
+describe('createSizeGenerator - class/styles', () => {
+  it('maps every logical class name to the hashed dist name', () => {
+    const classes = createSizeGenerator(ctx()).class()
+    expect(Object.keys(classes)).toEqual(
+      expect.arrayContaining([
+        'sizeXxxs',
+        'sizeXxs',
+        'sizeXs',
+        'sizeS',
+        'sizeM',
+        'sizeL',
+        'sizeXl',
+        'sizeXxl',
+        'sizeXxxl',
+        'sizeCustom',
+        'sized',
+        'child',
+        'fontSizing'
+      ])
+    )
+    for (const [name, hashed] of Object.entries(classes)) {
+      expect(hashed).toBe(hashClassName(name))
+    }
+  })
+
+  it('stays in lockstep with the @ui0/vite distiller hasher', () => {
+    const classes = createSizeGenerator(ctx()).class()
+    for (const [name, hashed] of Object.entries(classes)) {
+      expect(hashed).toBe(viteHashClassName(name))
+    }
+  })
+
+  it('exposes the s namespace and no inline styles', () => {
+    const g = createSizeGenerator(ctx())
+    expect(g.namespace).toBe('s')
+    expect(g.styles()).toEqual({})
+  })
+})

package/src/contracts/size/size.generator.ts

@@ -0,0 +1,51 @@
+// The size contract's generator endpoint: turns the preset's size settings
+// (Ui0ThemeConfig.size: control/child base heights) into the contract's css
+// vars - the --0-s-*/--0-sc-* height scales and the derived --0-uc*/--0-ucc*
+// unit scales. The `size` prop setters are static - they ship in
+// size.inject.module.scss (compiled + hashed at build); class() re-exports
+// the registry map from size.module.css, so prop values resolve to the same
+// hashed names the distiller publishes.
+import type { CSSModuleClassList, VarList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import { renderScale, renderUnits, SCALE_RATIO } from '../../generator/scales'
+import type { ContractContext, ContractFactory } from '../generator'
+
+import sizeCss from './size.inject.module.scss'
+import $size from './size.module.css'
+
+const CONTROL_UNIT_DIVIDER = 14
+const CONTROL_CHILD_UNIT_DIVIDER = 10
+
+const sizeGenerator: ContractFactory = (ctx: ContractContext): ThemeContractGenerator => {
+  const { config } = ctx
+
+  function vars(): Record<string, VarList> {
+    const out: Record<string, VarList> = {}
+    const size = config.size
+    if (size?.control !== undefined) {
+      out.s = renderScale(size.control, SCALE_RATIO)
+      out.uc = renderUnits('uc', `calc(var(--0-s-m) * var(--0-s-density, 1) / ${CONTROL_UNIT_DIVIDER})`, 8)
+    }
+    if (size?.child !== undefined) {
+      out.sc = renderScale(size.child)
+      out.ucc = renderUnits('ucc', `calc(var(--0-sc-m) * var(--0-s-density, 1) / ${CONTROL_CHILD_UNIT_DIVIDER})`, 4)
+    }
+    // base density multiplier; the global .density-* classes flip it at
+    // runtime. (a per-theme density setting returns with the density contract)
+    if (size?.control !== undefined || size?.child !== undefined) {
+      out.s = { ...out.s, density: 1 }
+    }
+    return out
+  }
+
+  return {
+    namespace: 's',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => sizeCss,
+    class: (): CSSModuleClassList => ({ ...$size }),
+    styles: () => ({})
+  }
+}
+
+export default sizeGenerator

package/src/contracts/size/size.inject.module.scss

@@ -0,0 +1,12 @@
+@use 'sass:string';
+
+@value sizeXxxs, sizeXxs, sizeXs, sizeS, sizeM, sizeL, sizeXl, sizeXxl, sizeXxxl, sizeCustom from './size.module.css';
+
+@each $step in (xxxs, xxs, xs, s, m, l, xl, xxl, xxxl) {
+  .size#{string.to-upper-case(string.slice($step, 1, 1))}#{string.slice($step, 2)} {
+    --0-s: var(--0-s-#{$step});
+  }
+}
+.sizeCustom {
+  --0-s: var(--0-s-custom);
+}

package/src/contracts/size/size.keys.ts

@@ -0,0 +1,8 @@
+import type { ThemeContractDeal } from '@ui0/types'
+import type { InjectionKey, Ref } from 'vue'
+
+import type { Size, SizeDensity } from './size.types'
+
+export const SizeRefKey = Symbol('SizeRefKey') as InjectionKey<Ref<Size>>
+export const SizeDensityRefKey = Symbol('DensityRefKey') as InjectionKey<Ref<SizeDensity>>
+export const SizeContractKey = Symbol('SizeContractKey') as InjectionKey<ThemeContractDeal>

package/src/contracts/size/size.module.css

@@ -0,0 +1,15 @@
+.sizeXl,
+.sizeM,
+.sizeXs,
+.sizeS,
+.sizeL,
+.sizeXxs,
+.sizeXxxs,
+.sizeXxxl,
+.sizeXxl,
+.sizeCustom,
+.sized,
+.child,
+.fontSizing {
+  /*@*/
+}

package/src/contracts/size/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/src/contracts/size/size.types.ts

@@ -0,0 +1,63 @@
+import type { MaybeUnits, InheritValue, LiteralUnion } from '@ui0/types'
+
+/* -------------------------------------------------------------------------- */
+/* Size                                                                       */
+/* -------------------------------------------------------------------------- */
+
+export type SizeXXXS = 'xxx-small' | 'xxxs'
+export type SizeXXS = 'xx-small' | 'xxs'
+export type SizeXS = 'x-small' | 'xs'
+export type SizeS = 'small' | 's'
+export type SizeM = 'medium' | 'm'
+export type SizeL = 'large' | 'l'
+export type SizeXL = 'x-large' | 'xl'
+export type SizeXXL = 'xx-large' | 'xxl'
+export type SizeXXXL = 'xxx-large' | 'xxxl'
+
+export type Size =
+  | SizeXXXS
+  | SizeXXS
+  | SizeXS
+  | SizeS
+  | SizeM
+  | SizeL
+  | SizeXL
+  | SizeXXL
+  | SizeXXXL
+  | 'custom'
+  | 'smaller'
+  | 'larger'
+  | InheritValue
+
+export type SizeDensity = LiteralUnion<'normal' | 'compact' | 'child'>
+
+export interface SizeProps {
+  size?: Size
+}
+
+export interface DensityProps {
+  density?: SizeDensity
+}
+
+/** the size contract's settings inside a theme preset (appearance config) */
+export interface SizeThemeAppearanceConfig {
+  /** the control's base height -> expands into the --0-s-* scale */
+  control?: MaybeUnits
+  /** a control's child (icon etc.) base height -> the --0-sc-* scale */
+  child?: MaybeUnits
+}
+
+/** the absolute scale steps a `size` prop can pick (long and short spellings) */
+export const SizeValuesAbsolute: Size[] = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']
+
+// 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 {
+    size?: SizeThemeAppearanceConfig
+  }
+  interface Ui0ThemeContractSettings {
+    size?: boolean
+  }
+  interface Ui0ThemeContracts extends SizeProps, DensityProps {}
+}

package/src/contracts/size/units.scss

@@ -0,0 +1,17 @@
+@mixin use {
+  // based on a input size of a component
+  --0c-u1: calc(var(--0c-s) / 14);
+  --0c-u2: calc(var(--0c-u1) * 2);
+  --0c-u3: calc(var(--0c-u1) * 3);
+  --0c-u4: calc(var(--0c-u1) * 4);
+  --0c-u5: calc(var(--0c-u1) * 5);
+  --0c-u6: calc(var(--0c-u1) * 6);
+  --0c-u7: calc(var(--0c-u1) * 7);
+  --0c-u8: calc(var(--0c-u1) * 8);
+
+  // child units (e.g. an icon inside a button)
+  --0c-uc1: calc(var(--0c-sc) / 10);
+  --0c-uc2: calc(var(--0c-uc1) * 2);
+  --0c-uc3: calc(var(--0c-uc1) * 3);
+  --0c-uc4: calc(var(--0c-uc1) * 4);
+}

package/src/contracts/style/index.ts

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

package/src/contracts/style/style.generator.ts

@@ -0,0 +1,36 @@
+// The style contract's generator endpoint: passes arbitrary css through from
+// the preset config - `style.vars` become `--0-style-*` custom properties on
+// the theme block, `style.raw` lands as plain declarations. No classes of its
+// own.
+import type { CSSModuleClassList, StyleList, VarList } from '@ui0/types'
+import type { ThemeContractGenerator } from '@ui0/types'
+
+import type { ContractFactory } from '../generator'
+
+const styleGenerator: ContractFactory = (ctx): ThemeContractGenerator => {
+  const { config } = ctx
+
+  function vars(): Record<string, VarList> {
+    const style = config.style
+    if (!style?.vars) return {}
+    return {
+      style: Object.fromEntries(Object.entries(style.vars))
+    }
+  }
+
+  function styles(): StyleList {
+    const style = config.style
+    if (!style?.raw) return {}
+    return { ...style.raw }
+  }
+
+  return {
+    namespace: 'style',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => '',
+    class: (): CSSModuleClassList => ({}),
+    styles: (scheme) => (scheme ? {} : styles())
+  }
+}
+
+export default styleGenerator

package/src/contracts/style/style.key.ts

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

package/src/contracts/style/style.types.ts

@@ -0,0 +1,16 @@
+import type { StyleList } from '@ui0/types'
+
+declare module '@ui0/types/theme' {
+  interface Ui0ThemePresetAppearanceConfig {
+    style?: {
+      vars?: StyleList
+      raw?: StyleList
+    }
+  }
+  interface Ui0ThemeContractSettings {
+    style?: boolean
+  }
+  interface Ui0ThemeContracts {
+    style?: StyleList
+  }
+}

package/src/contracts/typography/index.ts

@@ -0,0 +1,26 @@
+// The typography contract's registry entry, generated from
+// 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 { 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 type * from './typography.types'
+export * from './typography.keys'
+
+export const TypographyPropsKeys: ReadonlyArray<keyof TypographyProps> = [
+  'typography'
+]
+
+export const typography: ThemeContract = {
+  key: TypographyContractKey,
+  name: 'typography',
+  ref: TypographyRefKey,
+  deal: typographyDeal,
+  flag: ThemeContractFlags.dealer + ThemeContractFlags.generator,
+  props: TypographyPropsKeys
+}

package/src/contracts/typography/typography.contract.ts

@@ -0,0 +1,52 @@
+// The typography contract's processing endpoint: closes over the provider and
+// returns the deal that maps the `typography` prop onto classes/styles at
+// runtime, resolving `inherit` against the provided context ref.
+import type { ClassList, CSSModuleClassList } from '@ui0/types'
+import type { Ref } from 'vue'
+
+import { EMPTY_OBJ } from '../../constants'
+import type { ContractProvider, ThemeContractDeal } from '../../types'
+import { mergeCssModulesStyles } from '@ui0/util'
+
+import type { TypographyProps } from './typography.types'
+import $typography from './typography.module.css'
+
+// the prop -> class wiring: the prop value IS the logical class name from the
+// registry (e.g. `typography="fw700"`), resolved to its hashed form from the
+// module map (merged with the component's own $style)
+function typographyClasses(
+  props: TypographyProps,
+  styles?: CSSModuleClassList
+): ClassList {
+  const $ = mergeCssModulesStyles($typography, styles)
+  const out: ClassList = []
+  if (props.typography && $[props.typography]) out.push($[props.typography])
+  return out
+}
+
+export function typographyDeal(instance: ContractProvider): ThemeContractDeal {
+  const props = instance.props
+
+  return {
+    classes: () => {
+      if (!props.typography) return instance.inject([])
+
+      if (props.typography === 'inherit') {
+        const ctx = instance.context as Record<
+          string,
+          Ref<any> | undefined
+        > | null
+        if (ctx?.typography) {
+          return instance.inject(
+            typographyClasses({ typography: ctx.typography.value }, instance.$styles)
+          )
+        }
+      }
+
+      return instance.inject(
+        typographyClasses(props as TypographyProps, instance.$styles)
+      )
+    },
+    styles: () => instance.inject(EMPTY_OBJ)
+  }
+}

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

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+
+import { hashClassName } from '../../generator/hash'
+import type { ThemePresetName } from '../../types'
+import type { ContractContext } from '../generator'
+import createTypographyGenerator from './typography.generator'
+
+const ctx = (config = {}): ContractContext => ({
+  presetName: 'test' as ThemePresetName,
+  config,
+  settings: {},
+  hash: hashClassName
+})
+
+describe('createTypographyGenerator', () => {
+  it('emits a var for the configured base', () => {
+    const vars = createTypographyGenerator(
+      ctx({ typography: { base: '4px' } })
+    ).vars()
+    expect(vars.typography.base).toBe('4px')
+  })
+
+  it('emits nothing without config', () => {
+    expect(createTypographyGenerator(ctx()).vars()).toEqual({})
+  })
+
+  it('maps the registry class names onto the hashed dist names', () => {
+    const classes = createTypographyGenerator(ctx()).class()
+    expect(classes.fw100).toBe(hashClassName('fw100'))
+    expect(classes['tt-uppercase']).toBe(hashClassName('tt-uppercase'))
+    expect(classes['tw-stable']).toBe(hashClassName('tw-stable'))
+    expect(Object.keys(classes)).toHaveLength(32)
+  })
+
+  it('ships the contract css from the inject module, hashed', () => {
+    const css = createTypographyGenerator(ctx()).css()
+    expect(css).toContain(`.${hashClassName('fw700')} { font-weight: 700 }`)
+    expect(css).toContain(`.${hashClassName('ta-center')} { text-align: center }`)
+    expect(css).not.toContain('@value')
+    expect(css).not.toContain('.fw700')
+  })
+
+  it('has no per-scheme values', () => {
+    const g = createTypographyGenerator(ctx({ typography: { base: '4px' } }))
+    expect(g.vars('dark')).toEqual({})
+    expect(g.namespace).toBe('t')
+  })
+})

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

@@ -0,0 +1,44 @@
+// The typography contract's generator endpoint: turns the contract's slice of
+// the appearance config (TypographyThemeAppearanceConfig) into css vars and
+// ships the contract's own static css (the font-weight / text-transform /
+// text-align / text-orientation / text-wrap utility setters). The setter css
+// lives in typography.inject.module.css - the ui0 css-modules pipeline
+// compiles it and hashes the selectors at build; class() re-exports the
+// registry map from typography.module.css, so logical names resolve to the
+// same hashes everywhere.
+import type { CSSModuleClassList, ThemeContractGenerator, VarList } from '@ui0/types'
+import { toUnits, tryToUnits } from '@ui0/util'
+
+import type { ContractContext, ContractFactory } from '../generator'
+
+import typographyCss from './typography.inject.module.css'
+import $typography from './typography.module.css'
+
+const typographyGenerator: ContractFactory = (ctx: ContractContext): ThemeContractGenerator => {
+  function vars(): Record<string, VarList> {
+    // after registration (see typography.types.ts) this reads
+    // `config.typography`; typed loosely until the contract is named.
+
+    if (ctx.settings.typography) {
+      const { headingRatio, fontSizeHeading, fontSize } = ctx.settings.typography
+      return {
+        typo: {
+          fs: tryToUnits(fontSize),
+          'h-ratio': headingRatio,
+          'h-fs': toUnits(fontSizeHeading) || tryToUnits(fontSize)
+        }
+      }
+    }
+    return {}
+  }
+
+  return {
+    namespace: 't',
+    vars: (scheme) => (scheme ? {} : vars()),
+    css: () => typographyCss,
+    class: (): CSSModuleClassList => ({ ...$typography }),
+    styles: () => ({})
+  }
+}
+
+export default typographyGenerator

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

@@ -0,0 +1,54 @@
+@value fw100, fw200, fw300, fw400, fw500, fw600, fw700, fw800, fw900 from './typography.module.css';
+@value tt-uppercase, tt-lowercase, tt-capitalize, tt-none, tt-full, tt-full-size-kana from './typography.module.css';
+@value ta-start, ta-end, ta-center, ta-left, ta-right, ta-justify, ta-match-parent from './typography.module.css';
+@value to-mixed, to-sideways, to-sideways-right, to-use-glyph-orientation, to-upright from './typography.module.css';
+@value tw-nowrap, tw-wrap, tw-balance, tw-pretty, tw-stable from './typography.module.css';
+
+.fw100 { font-weight: 100 }
+.fw200 { font-weight: 200 }
+.fw300 { font-weight: 300 }
+.fw400 { font-weight: 400 }
+.fw500 { font-weight: 500 }
+.fw600 { font-weight: 600 }
+.fw700 { font-weight: 700 }
+.fw800 { font-weight: 800 }
+.fw900 { font-weight: 900 }
+
+.tt-uppercase { text-transform: uppercase }
+.tt-lowercase { text-transform: lowercase }
+.tt-capitalize { text-transform: capitalize }
+.tt-none { text-transform: none }
+.tt-full { text-transform: full-width }
+.tt-full-size-kana { text-transform: full-size-kana }
+
+.ta-start { text-align: start }
+.ta-end { text-align: end }
+.ta-center { text-align: center }
+.ta-left { text-align: left }
+.ta-right { text-align: right }
+.ta-justify { text-align: justify }
+.ta-match-parent { text-align: match-parent }
+
+.to-mixed { text-orientation: mixed }
+.to-sideways { text-orientation: sideways }
+.to-sideways-right { text-orientation: sideways-right }
+.to-use-glyph-orientation { text-orientation: use-glyph-orientation }
+.to-upright { text-orientation: upright }
+
+.tw-nowrap { text-wrap: nowrap }
+.tw-wrap { text-wrap: wrap }
+.tw-balance { text-wrap: balance }
+.tw-pretty { text-wrap: pretty }
+.tw-stable { 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/src/contracts/typography/typography.keys.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey, Ref } from 'vue'
+
+import type { ThemeContract } from '../../types'
+import type { TypographyProp } from './typography.types'
+
+/** context key the deal resolves `inherit` against (see useThemeContract) */
+export const TypographyRefKey = Symbol('TypographyRefKey') as InjectionKey<
+  Ref<TypographyProp | undefined>
+>
+export const TypographyContractKey = Symbol(
+  'TypographyContractKey'
+) as InjectionKey<ThemeContract>

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

@@ -0,0 +1,36 @@
+
+.fw100,
+.fw200,
+.fw300,
+.fw400,
+.fw500,
+.fw600,
+.fw700,
+.fw800,
+.fw900,
+.tt-uppercase,
+.tt-lowercase,
+.tt-capitalize,
+.tt-none,
+.tt-full,
+.tt-full-size-kana,
+.ta-center,
+.ta-end,
+.ta-justify,
+.ta-left,
+.ta-match-parent,
+.ta-right,
+.ta-start,
+.to-mixed,
+.to-sideways,
+.to-sideways-right,
+.to-use-glyph-orientation,
+.to-upright,
+.tw-nowrap,
+.tw-wrap,
+.tw-balance,
+.tw-pretty,
+.tw-stable,
+{
+  /*@shared*/
+}

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