@ossy/design-system 3.25.0 → 3.27.0

package/src/theme/createCss.js

@@ -1,8 +1,9 @@
 import { toHsl } from './toHsl'
+import { patternRef, resolveVariant } from '../view/resolveVariant.js'
 
 const createSurfacesCss = (theme, scope) => css => {
   const surfaces = theme.surfaces
-  if (!surfaces) return ''
+  if (!surfaces) return css
   const surfacePrefix = scope === ':root' ? '' : `${scope} `
   return Object.entries(surfaces)
     .reduce((css, [surfaceName, rules]) => {
@@ -16,10 +17,40 @@ ${surfacePrefix}[data-surface="${surfaceName}"] {
 )}, css)
 }
 
-const createSpacingCss = (theme, scope) => css => {
-  const { space } = theme
-  if (!space) return ''
-  const vars = createCssVars(Object.entries(space).reduce((acc, [key, value]) => ({...acc, [`space-${key}`]: value}), {}))
+const scaleVars = (scale, prefix) => {
+  if (!scale || typeof scale !== 'object') return ''
+  return Object.entries(scale)
+    .filter(([, value]) => value != null && typeof value !== 'object')
+    .map(([key, value]) => `--${prefix}-${String(key).replace(/\s+/g, '-')}: ${value};`)
+    .join('\n    ')
+}
+
+/** `theme.patterns` keeps layout scales together. CSS names stay --space-*, --max-width-*, --font-*. */
+const patternSource = (theme) => {
+  if (theme?.patterns && typeof theme.patterns === 'object') return theme.patterns
+  return {
+    space: theme?.space,
+    'max-width': theme?.maxWidth || theme?.['max-width'],
+    font: theme?.font,
+  }
+}
+
+const patternGroupPrefix = (group) => (group === 'maxWidth' ? 'max-width' : group)
+
+const createPatternVarLines = (patterns) => {
+  if (!patterns || typeof patterns !== 'object') return ''
+  return Object.entries(patterns)
+    .map(([group, scale]) => scaleVars(scale, patternGroupPrefix(group)))
+    .filter(Boolean)
+    .join('\n    ')
+}
+
+const createPatternCss = (theme, scope) => css => {
+  const patterns = patternSource(theme)
+  const lines = [createPatternVarLines(patterns)]
+  if (patterns?.family?.sans != null) lines.push('font-family: var(--family-sans);')
+  const vars = lines.filter(Boolean).join('\n    ')
+  if (!vars) return css
   return css + (
 `
   ${scope} {
@@ -29,31 +60,109 @@ const createSpacingCss = (theme, scope) => css => {
   )
 }
 
-const createMaxWidthCss = (theme, scope) => css => {
-  const maxWidths = theme.maxWidth || theme['max-width']
-  if (!maxWidths) return ''
-  const vars = createCssVars(Object.entries(maxWidths).reduce((acc, [key, value]) => ({...acc, [`max-width-${key}`]: value}), {}))
-  return css + (
-`
-  ${scope} {
-    ${vars}
+const variantPatternLines = (resolved) => {
+  const lines = []
+  for (const key of ['roundness', 'inset', 'weight', 'leading', 'tracking', 'font', 'family', 'shadow']) {
+    if (resolved[key] != null) lines.push(`--view-${key}: ${patternRef(key, resolved[key])};`)
+  }
+  if (resolved.gap != null) lines.push(`--view-gap: var(--space-${resolved.gap});`)
+  if (resolved.border === 'none') {
+    lines.push('--view-border: 0;')
+    lines.push('--view-border-style: none;')
+  } else if (resolved.border != null) {
+    lines.push(`--view-border: ${patternRef('border', resolved.border)};`)
+    lines.push('--view-border-style: solid;')
+  }
+  return lines
+}
+
+const surfaceLinesForVariant = (theme, surfaceName) => {
+  if (!surfaceName || surfaceName === 'neutral') {
+    return [
+      '--background: transparent;',
+      '--background-hover: color-mix(in srgb, var(--foreground, currentColor) 8%, transparent);',
+      '--background-active: color-mix(in srgb, var(--foreground, currentColor) 8%, transparent);',
+      '--backdropFilter: none;',
+    ].join('\n    ')
   }
+  const surface = theme?.surfaces?.[surfaceName]
+  if (!surface || typeof surface !== 'object') return ''
+  return createCssVars(addSurfaceDefaults(surface)).trim()
+}
+
+/**
+ * Custom properties inherit. A text variant that does not set inset would otherwise
+ * reuse a parent card's `--view-inset` and paint it as padding.
+ * This rule comes first; a later variant rule replaces only the steps it picks.
+ */
+const VARIANT_VARIABLE_RESET = [
+  '--view-roundness: 0;',
+  '--view-inset: 0;',
+  '--view-weight: inherit;',
+  '--view-leading: inherit;',
+  '--view-tracking: inherit;',
+  '--view-font: inherit;',
+  '--view-family: inherit;',
+  '--view-shadow: none;',
+  '--view-gap: 0;',
+  '--view-border: 0;',
+  '--view-border-style: none;',
+].join('\n    ')
+
+/**
+ * One hoisted rule per component variant. The element carries `data-variant="button-cta"`.
+ * Surface rules are emitted later, so an explicit `data-surface` replaces the variant's surface.
+ */
+const createVariantCss = (theme, scope) => css => {
+  const groups = theme?.variants
+  if (!groups || typeof groups !== 'object') return css
+  const prefix = scope === ':root' ? '' : `${scope} `
+  let block = `
+${prefix}[data-variant] {
+    ${VARIANT_VARIABLE_RESET}
+}
 `
-  )
+  for (const group of Object.keys(groups)) {
+    const variants = groups[group]
+    if (!variants || typeof variants !== 'object') continue
+    for (const name of Object.keys(variants)) {
+      if (!variants[name] || typeof variants[name] !== 'object') continue
+      const resolved = resolveVariant(`${group}-${name}`, {}, theme)
+      const lines = [variantPatternLines(resolved).join('\n    '), surfaceLinesForVariant(theme, resolved.surface)]
+        .filter(Boolean)
+        .join('\n    ')
+      if (!lines) continue
+      block += `
+${prefix}[data-variant="${group}-${name}"] {
+    ${lines}
+}
+`
+    }
+  }
+  return css + block
 }
 
 const createSurfaceVars = (theme, scope) => css => {
   const surfaces = theme.surfaces
-  if (!surfaces) return ''
+  if (!surfaces) return css
   const vars = Object.entries(surfaces)
-    .filter(([, rules]) => rules && typeof rules.background === 'string')
-    .map(([name, rules]) => `--surface-${name}: ${rules.background};`)
-    .join('\n    ')
-  if (!vars) return ''
+    .filter(([, rules]) => rules && typeof rules === 'object')
+    .flatMap(([name, rules]) => {
+      const lines = []
+      if (typeof rules.background === 'string') lines.push(`--surface-${name}: ${rules.background};`)
+      if (typeof rules.foreground === 'string') lines.push(`--surface-${name}-foreground: ${rules.foreground};`)
+      if (typeof rules.solid === 'string') lines.push(`--surface-${name}-solid: ${rules.solid};`)
+      return lines
+    })
+  if (typeof surfaces.base?.separator === 'string') {
+    vars.push(`--separator: ${surfaces.base.separator};`)
+  }
+  const rendered = vars.join('\n    ')
+  if (!rendered) return ''
   return css + (
 `
   ${scope} {
-    ${vars}
+    ${rendered}
   }
 `
   )
@@ -61,11 +170,10 @@ const createSurfaceVars = (theme, scope) => css => {
 
 const createRestVars = (theme, scope) => css => {
   const vars = createCssVars(theme)
-  const separatorAlias = theme.separator ? '    --separator: var(--separator-primary);\n' : ''
   return css + (
 `
   ${scope} {
-    ${separatorAlias}${vars}
+    ${vars}
   }
 `
   )
@@ -73,14 +181,18 @@ const createRestVars = (theme, scope) => css => {
 
 /**
  * Emits `@media` blocks that redeclare CSS variables from a partial theme tree.
- * Theme authors set `media: { '(max-width: 900px)': { text: { … } } }`.
+ * Theme authors set `media: { '(max-width: 900px)': { patterns: { font: { … } } } }`.
  */
 const createMediaCss = (theme, scope) => css => {
   const media = theme.media
   if (!media || typeof media !== 'object') return css
   return Object.entries(media).reduce((acc, [query, portion]) => {
     if (!portion || typeof portion !== 'object') return acc
-    const vars = createCssVars(portion)
+    const rest = { ...portion }
+    const patterns = rest.patterns
+    delete rest.patterns
+    delete rest.variants
+    const vars = [createPatternVarLines(patterns), createCssVars(rest)].filter(Boolean).join('\n    ')
     if (!vars) return acc
     return acc + (
 `
@@ -96,19 +208,26 @@ const createMediaCss = (theme, scope) => css => {
 
 export const createCss = (theme, scope = ':root') => {
   if (!theme) return ''
-  const restTheme = {
-    ...theme,
-    maxWidth: undefined,
-    'max-width': undefined,
-    surfaces: undefined,
-    space: undefined,
-    surface: undefined,
-    media: undefined,
+  const restTheme = { ...theme }
+  for (const key of [
+    'patterns',
+    'variants',
+    'maxWidth',
+    'max-width',
+    'font',
+    'surfaces',
+    'space',
+    'surface',
+    'color',
+    'separator',
+    'media',
+  ]) {
+    delete restTheme[key]
   }
   return [
-    createSpacingCss(theme, scope),
-    createMaxWidthCss(theme, scope),
+    createPatternCss(theme, scope),
     createSurfaceVars(theme, scope),
+    createVariantCss(theme, scope),
     createSurfacesCss(theme, scope),
     createRestVars(restTheme, scope),
     createMediaCss(theme, scope),

package/src/theme/createCss.spec.js

@@ -4,36 +4,61 @@ import { CloudDark } from '../../../themes/src/cloud-dark.js'
 import { CloudLight } from '../../../themes/src/cloud-light.js'
 
 describe('createCss', () => {
-  it('emits CSS variables for text tokens', () => {
+  it('keeps a parent inset off nested text', () => {
     const css = createCss({
-      text: {
-        default: { 'font-size': '1rem' },
-        'heading-primary': { 'font-size': '2rem' },
+      variants: {
+        text: { m: { font: 's' } },
+        card: { default: { inset: 'l' } },
+      },
+    })
+    const resetAt = css.indexOf('[data-variant] {')
+    const textAt = css.indexOf('[data-variant="text-m"]')
+    const cardAt = css.indexOf('[data-variant="card-default"]')
+    expect(resetAt).toBeGreaterThan(-1)
+    expect(textAt).toBeGreaterThan(resetAt)
+    expect(cardAt).toBeGreaterThan(resetAt)
+    const reset = css.slice(resetAt, textAt)
+    expect(reset).toContain('--view-inset: 0;')
+    expect(reset).toContain('--view-gap: 0;')
+    const textRule = css.slice(textAt, css.indexOf('}', textAt))
+    expect(textRule).toContain('--view-font: var(--font-s);')
+    expect(textRule).not.toContain('--view-inset:')
+    expect(css.slice(cardAt, css.indexOf('}', cardAt))).toContain('--view-inset: var(--inset-l, var(--space-l));')
+  })
+
+  it('emits CSS variables for groups that are not variants', () => {
+    const css = createCss({
+      resume: { background: 'white' },
+      variants: {
+        text: { display: { font: '4xl' } },
+        badge: { default: { font: 's', family: 'mono' } },
       },
     })
 
-    expect(css).toContain('--text-default-font-size: 1rem;')
-    expect(css).toContain('--text-heading-primary-font-size: 2rem;')
+    expect(css).toContain('--resume-background: white;')
+    expect(css).toContain('[data-variant="text-display"]')
+    expect(css).toContain('[data-variant="badge-default"]')
+    expect(css).toContain('--view-font: var(--font-4xl);')
+    expect(css).toContain('--view-family: var(--family-mono);')
+    expect(css).not.toContain('--text-display-font:')
   })
 
   it('emits media-query overrides without leaking media into root vars', () => {
     const css = createCss({
-      text: {
-        'heading-primary': { 'font-size': '2rem' },
-      },
+      resume: { background: 'white' },
       media: {
         '(max-width: 900px)': {
-          text: {
-            'heading-primary': { 'font-size': '1.5rem' },
-          },
+          resume: { background: 'transparent' },
+          variants: { text: { display: { font: '3xl' } } },
         },
       },
     })
 
     expect(css).toContain('@media (max-width: 900px)')
     expect(css).toMatch(
-      /@media \(max-width: 900px\)\s*\{\s*:root\s*\{[\s\S]*--text-heading-primary-font-size: 1\.5rem;/
+      /@media \(max-width: 900px\)\s*\{\s*:root\s*\{[\s\S]*--resume-background: transparent;/
     )
+    expect(css).not.toContain('--text-display-font:')
     expect(css).not.toContain('--media-')
   })
 
@@ -45,10 +70,10 @@ describe('createCss', () => {
   it('scopes media overrides to an isolated theme selector', () => {
     const css = createCss(
       {
-        text: { 'heading-primary': { 'font-size': '2rem' } },
+        resume: { background: 'white' },
         media: {
           '(max-width: 900px)': {
-            text: { 'heading-primary': { 'font-size': '1.5rem' } },
+            resume: { background: 'transparent' },
           },
         },
       },
@@ -56,8 +81,68 @@ describe('createCss', () => {
     )
 
     expect(css).toMatch(
-      /@media \(max-width: 900px\)\s*\{\s*\[data-theme-scope="x"\]\s*\{[\s\S]*--text-heading-primary-font-size: 1\.5rem;/,
+      /@media \(max-width: 900px\)\s*\{\s*\[data-theme-scope="x"\]\s*\{[\s\S]*--resume-background: transparent;/,
+    )
+  })
+
+  it('emits semantic surfaces and the opaque primary', () => {
+    const light = createCss(CloudLight)
+    const dark = createCss(CloudDark)
+    for (const css of [light, dark]) {
+      expect(css).toContain('--surface-warning: hsl(38, 92%, 44%);')
+      expect(css).toContain('--surface-danger: hsl(0, 89%, 43%);')
+      expect(css).toContain('--surface-accent-foreground:')
+      expect(css).not.toMatch(/--color-/)
+    }
+    expect(light).toContain('--surface-primary-solid: hsl(0, 0%, 100%);')
+    expect(light).toContain('--surface-secondary: hsl(0, 0%, 95%);')
+    expect(dark).toContain('--surface-primary-solid: hsl(199, 28%, 14%);')
+    expect(dark).toContain('--surface-secondary: hsl(199, 22%, 18%);')
+    expect(dark).toMatch(/\[data-variant="button-cta"\]\s*\{[^}]*hsla\(167, 89%, 43%, \.22\)/)
+    expect(dark).toMatch(/\[data-variant="button-tag-active"\]\s*\{[^}]*hsla\(167, 89%, 43%, \.22\)/)
+    const ctaAt = dark.indexOf('[data-variant="button-cta"]')
+    const accentSurfaceAt = dark.indexOf('[data-surface="accent-tint"]')
+    expect(ctaAt).toBeGreaterThan(-1)
+    expect(accentSurfaceAt).toBeGreaterThan(ctaAt)
+  })
+
+  it('emits the px type scale and shrinks the large steps under 900px', () => {
+    const css = createCss(CloudLight)
+    expect(css).toContain('--font-m: 16px;')
+    expect(css).toContain('--font-4xl: 48px;')
+    expect(css).toContain('--family-sans: Roboto, sans-serif;')
+    expect(css).toContain('--family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;')
+    expect(css).toContain('font-family: var(--family-sans);')
+    expect(css).toContain('--view-family: var(--family-sans);')
+    expect(css).toContain('[data-variant="text-display"]')
+    expect(css).toContain('--view-font: var(--font-4xl);')
+    expect(css).toContain('[data-variant="button-cta"]')
+    expect(css).not.toContain('--text-display-font:')
+    expect(css).not.toContain('--button-default-surface:')
+    expect(css).not.toContain('--input-default-inset:')
+    expect(css).toContain('--max-width-xl: 1440px;')
+    expect(css).toContain('--weight-black: 900;')
+    expect(css).toContain('--leading-m: 1.3;')
+    expect(css).toContain('--tracking-l: 1px;')
+    expect(css).toContain('--border-s: 1px;')
+    expect(css).toContain('--shadow-s: 3px 0 10px hsla(0, 0%, 85%, .75);')
+    expect(css).toContain('--inset-l-m: var(--space-l) var(--space-m);')
+    expect(css).toContain('--roundness-rounded: 99999px;')
+    expect(css).not.toContain('--max-width-xs:')
+    expect(css).not.toContain('--max-width-xxl:')
+    expect(css).toMatch(
+      /@media \(max-width: 900px\)\s*\{\s*:root\s*\{[\s\S]*--font-4xl: 32px;/,
     )
+    expect(css).not.toContain('--patterns-')
+    expect(css).not.toContain('--card-default-surface:')
+    expect(css).not.toMatch(/\drem|vw/)
+  })
+
+  it('emits the base surface separator on the root', () => {
+    const css = createCss(CloudLight)
+    expect(css).toContain('--separator: hsl(0, 0%, 95%);')
+    expect(css).not.toContain('--separator-primary:')
+    expect(css).not.toContain('--separator-accent:')
   })
 
   it('emits the day-off surface for light and dark themes', () => {
@@ -70,7 +155,7 @@ describe('createCss', () => {
   })
 
   it('ignores empty media maps and non-object portions', () => {
-    expect(createCss({ text: { default: { 'font-size': '1rem' } }, media: {} }))
+    expect(createCss({ resume: { background: 'white' }, media: {} }))
       .not.toContain('@media')
     expect(createCss({
       text: { default: { 'font-size': '1rem' } },

package/src/view/View.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import { patternCss, patternOverrideStyle } from './resolveVariant.js'
 
 export const ViewItem = ({
   fill,
@@ -15,7 +16,8 @@ export const ViewItem = ({
 )
 
 export const View = forwardRef(function View ({
-  surface = 'neutral',
+  variant,
+  surface,
   selectable,
   layout = 'column',
   stack,
@@ -26,6 +28,13 @@ export const View = forwardRef(function View ({
   gap,
   roundness,
   inset,
+  weight,
+  leading,
+  tracking,
+  border,
+  shadow,
+  font,
+  family,
   as: Container = 'div',
   style = {},
   ...props
@@ -33,7 +42,6 @@ export const View = forwardRef(function View ({
   const resolvedLayout = stack
     ? (horizontal ? 'row' : 'column')
     : layout
-
   return (
     <>
       <style href="@ossy/design-system/view" precedence="high">
@@ -55,7 +63,7 @@ export const View = forwardRef(function View ({
           }
 
           [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item {
-            border-top: 1px solid var(--separator-primary);
+            border-top: 1px solid var(--separator);
           }
 
           [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item:first-child {
@@ -63,7 +71,7 @@ export const View = forwardRef(function View ({
           }
 
           [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item {
-            border-left: 1px solid var(--separator-primary);
+            border-left: 1px solid var(--separator);
           }
 
           [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item:first-child {
@@ -74,44 +82,7 @@ export const View = forwardRef(function View ({
       )}
       <style href="@ossy/design-system/patterns" precedence="high">
       {`
-          [data-roundness="none"] { border-radius: var(--roundness-none, 0) }
-          [data-roundness="xs"] { border-radius: var(--roundness-xs, var(--space-xs)) }
-          [data-roundness="s"] { border-radius: var(--roundness-s, var(--space-s)) }
-          [data-roundness="m"] { border-radius: var(--roundness-m, var(--space-m)) }
-          [data-roundness="l"] { border-radius: var(--roundness-l, var(--space-l)) }
-          [data-roundness="rounded"] { border-radius: var(--roundness-rounded, 99999px) }
-
-          [data-inset="none"] { padding: var(--space-none) }
-          [data-inset="xs"] { padding: var(--space-xs) }
-          [data-inset="s"] { padding: var(--space-s) }
-          [data-inset="m"] { padding: var(--space-m) }
-          [data-inset="l m"] { padding: var(--space-l) var(--space-m) }
-          [data-inset="stretch-m"] { padding: var(--space-s) var(--space-m) }
-          [data-inset="list-row"] {
-            padding:
-              calc(var(--space-s) + var(--space-xs))
-              var(--space-s)
-              calc(var(--space-s) + var(--space-xs))
-              calc(var(--space-m) + var(--space-xs));
-          }
-          [data-inset="list-row-leading"] {
-            padding:
-              calc(var(--space-s) + var(--space-xs))
-              0
-              calc(var(--space-s) + var(--space-xs))
-              calc(var(--space-m) + var(--space-xs));
-          }
-          [data-inset="list-row-trailing"] {
-            padding:
-              calc(var(--space-s) + var(--space-xs))
-              var(--space-s)
-              calc(var(--space-s) + var(--space-xs))
-              0;
-          }
-          [data-inset="l"] { padding: var(--space-l) }
-          [data-inset="xl"] { padding: var(--space-xl) }
-          [data-inset="xxl"] { padding: var(--space-xxl) }
-
+          ${patternCss}
           [data-scroll] {
             scrollbar-width: none;
           }
@@ -532,18 +503,26 @@ export const View = forwardRef(function View ({
       <Container
         ref={ref}
         data-view
+        data-variant={variant}
         data-surface={surface}
-        data-selectable={selectable}
         data-roundness={roundness}
-        data-layout={resolvedLayout}
         data-inset={inset}
+        data-weight={weight}
+        data-leading={leading}
+        data-tracking={tracking}
+        data-border={border}
+        data-shadow={shadow}
+        data-font={font}
+        data-family={family}
+        data-selectable={selectable}
+        data-layout={resolvedLayout}
         {...(stack ? {
           'data-stack': true,
           'data-horizontal': horizontal,
           'data-bordered': bordered,
         } : {})}
         style={{
-          gap: gap ? `var(--space-${gap})` : undefined,
+          ...patternOverrideStyle({ roundness, inset, weight, leading, tracking, border, shadow, font, family, gap }),
           alignItems,
           justifyContent,
           minWidth: '0',