@ossy/design-system 3.25.0 → 3.27.0

package/src/fields/CronField.jsx

@@ -102,7 +102,7 @@ export function CronField ({
 
       {showHourlyMinute ? (
         <View gap="xs">
-          <Text variant="small" style={{ fontWeight: 600 }} text="design-system.fields.cronMinute" />
+          <Text variant="small" weight="bold" text="design-system.fields.cronMinute" />
           <Select
             name={`${name}.minute`}
             value={String(parts.minute)}
@@ -122,7 +122,7 @@ export function CronField ({
 
       {showTime ? (
         <View gap="xs">
-          <Text variant="small" style={{ fontWeight: 600 }} text="design-system.fields.cronTime" />
+          <Text variant="small" weight="bold" text="design-system.fields.cronTime" />
           <TimeField
             name={`${name}.time`}
             value={`${String(parts.hour).padStart(2, '0')}:${String(parts.minute).padStart(2, '0')}`}
@@ -137,7 +137,7 @@ export function CronField ({
 
       {showWeekday ? (
         <View gap="xs">
-          <Text variant="small" style={{ fontWeight: 600 }} text="design-system.fields.cronWeekday" />
+          <Text variant="small" weight="bold" text="design-system.fields.cronWeekday" />
           <Select
             name={`${name}.dayOfWeek`}
             value={String(parts.dayOfWeek)}
@@ -161,7 +161,7 @@ export function CronField ({
 
       {showDayOfMonth ? (
         <View gap="xs">
-          <Text variant="small" style={{ fontWeight: 600 }} text="design-system.fields.cronDayOfMonth" />
+          <Text variant="small" weight="bold" text="design-system.fields.cronDayOfMonth" />
           <Select
             name={`${name}.dayOfMonth`}
             value={String(parts.dayOfMonth < 2 ? 2 : parts.dayOfMonth)}
@@ -201,7 +201,8 @@ export function CronField ({
             disabled={disabled}
             placeholder="design-system.fields.cronCustomPlaceholder"
             aria-label={t('design-system.fields.cronCustom')}
-            style={{ ...fieldInputStyle, fontFamily: 'var(--font-mono, monospace)' }}
+            family="mono"
+            style={fieldInputStyle}
           />
         </View>
       ) : null}

package/src/fields/DatePicker.jsx

@@ -27,7 +27,7 @@ const dateTriggerStyles = `
     text-align: left;
   }
   button[data-component="input"][data-date-trigger][data-empty="true"] {
-    color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
+    color: color-mix(in srgb, var(--foreground, CanvasText) 42%, transparent);
   }
   [data-date-calendar] select[data-component="input"] {
     background-color: transparent;
@@ -59,7 +59,7 @@ const calendarPanelStyle = {
   left: 0,
   zIndex: 101,
   minWidth: 288,
-  border: '1px solid var(--separator-primary)',
+  border: '1px solid var(--separator)',
   boxShadow: '0 12px 32px hsla(0, 0%, 0%, 0.28)',
 }
 
@@ -198,6 +198,7 @@ export function DatePicker({
         data-date-field
         data-date-trigger
         data-empty={ms == null ? 'true' : 'false'}
+        data-variant="input-default"
         disabled={disabled}
         onClick={(event) => {
           event.stopPropagation()

package/src/fields/Fields.jsx

@@ -119,11 +119,11 @@ const DateRangeField = ({ name, label, value, onChange, style = {}, ...rest }) =
   return (
     <View gap="m" style={style} {...rest}>
       <View gap="s">
-        <Text variant="small" style={{ fontWeight: 600 }}>{t('design-system.fields.dateRangeStart')}</Text>
+        <Text variant="small" weight="bold">{t('design-system.fields.dateRangeStart')}</Text>
         <DatePicker name={`${name}.start`} value={range.start} onChange={onStartChange} />
       </View>
       <View gap="s">
-        <Text variant="small" style={{ fontWeight: 600 }}>{t('design-system.fields.dateRangeEnd')}</Text>
+        <Text variant="small" weight="bold">{t('design-system.fields.dateRangeEnd')}</Text>
         <DatePicker name={`${name}.end`} value={range.end} onChange={onEndChange} />
       </View>
     </View>
@@ -178,7 +178,7 @@ const DateRangesField = ({ name, label, value, onChange, style = {}, ...rest })
           inset="s"
         >
           <View layout="row" justifyContent="space-between" alignItems="center">
-            <Text variant="small" style={{ fontWeight: 600 }}>
+            <Text variant="small" weight="bold">
               {t('design-system.fields.dateRangeItem', { index: index + 1 })}
             </Text>
             <Button
@@ -394,7 +394,7 @@ const MultiselectTagsField = ({ name, label, options = [], value, onChange, styl
       {cloudTags.length > 0 ? (
         <Tags tags={cloudTags} activeTags={selected} onSelect={toggleTag} size="s" gap="xs" />
       ) : (
-        <Text as="span" style={{ fontSize: 14, opacity: 0.7 }}>
+        <Text as="span" font="s" style={{ opacity: 0.7 }}>
           {t('design-system.fields.noTagSuggestions')}
         </Text>
       )}
@@ -454,7 +454,7 @@ const checkboxFieldStyles = `
     box-sizing: border-box;
     border-width: 1px;
     border-style: solid;
-    border-color: var(--separator-primary);
+    border-color: var(--separator);
     border-radius: var(--space-xs, 6px);
     background-color: var(--surface-primary);
     transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
@@ -463,13 +463,13 @@ const checkboxFieldStyles = `
 
   [data-ossy-field-checkbox-track] input:focus-visible + [data-ossy-field-checkbox-box] {
     outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent);
+    border-color: var(--surface-accent);
+    box-shadow: 0 0 0 1px var(--surface-accent);
   }
 
   [data-ossy-field-checkbox-track] input:checked + [data-ossy-field-checkbox-box] {
-    background-color: var(--color-accent);
-    border-color: var(--color-accent);
+    background-color: var(--surface-accent);
+    border-color: var(--surface-accent);
   }
 
   [data-ossy-field-checkbox-mark] {
@@ -528,10 +528,8 @@ const BooleanField = ({ name, label, value, onChange, style = {}, disabled, ...r
       </span>
       <Text
         as="span"
+        leading="s"
         style={{
-          fontSize: 'var(--text-default-font-size, 16px)',
-          fontFamily: 'var(--text-default-font-family, sans-serif)',
-          lineHeight: 1.2,
           color: value
             ? 'var(--text-default-color, CanvasText)'
             : 'color-mix(in srgb, var(--text-default-color, CanvasText) 52%, transparent)',
@@ -637,7 +635,7 @@ function FormFieldRow({ field, data, onChange, schemaId }) {
 
   return (
     <View gap="s">
-      <Text as="label" htmlFor={name} variant="small" style={{ fontWeight: 'bold' }}>
+      <Text as="label" htmlFor={name} variant="small" weight="bold">
         {displayLabel}
         {required ? ' *' : ''}
       </Text>

package/src/fields/Fields.stories.jsx

@@ -19,10 +19,10 @@ const mutedTextStyle = {
 const dataPreviewStyle = {
   margin: 0,
   padding: 'var(--space-s)',
-  background: 'var(--color-secondary)',
+  background: 'var(--surface-secondary)',
   color: 'var(--text-default-color, CanvasText)',
   borderRadius: 'var(--space-xs)',
-  border: '1px solid var(--separator-primary)',
+  border: '1px solid var(--separator)',
   fontSize: 12,
   overflow: 'auto',
 }

package/src/fields/TimeField.jsx

@@ -124,6 +124,7 @@ export function TimeField ({
               data-component="input"
               data-input-variant="default"
               data-select-trigger
+              data-variant="input-default"
               disabled={disabled}
               aria-label={label ?? t('design-system.fields.cronTime')}
               aria-haspopup="listbox"

package/src/form/Form.stories.jsx

@@ -6,10 +6,10 @@ import { Form, FieldFactory, FormStatus } from './index.js'
 const dataPreviewStyle = {
   margin: 0,
   padding: 'var(--space-s)',
-  background: 'var(--color-secondary)',
+  background: 'var(--surface-secondary)',
   color: 'var(--text-default-color, CanvasText)',
   borderRadius: 'var(--space-xs)',
-  border: '1px solid var(--separator-primary)',
+  border: '1px solid var(--separator)',
   fontSize: 12,
   overflow: 'auto',
 }

package/src/grid-view/GridView.jsx

@@ -72,8 +72,8 @@ export function GridViewItem ({
         color: 'inherit',
         cursor: onClick || href ? 'pointer' : undefined,
         border: selected
-          ? '1px solid var(--foreground-active, var(--separator-primary))'
-          : '1px solid var(--separator-primary)',
+          ? '1px solid var(--foreground-active, var(--separator))'
+          : '1px solid var(--separator)',
         boxSizing: 'border-box',
         position: 'relative',
       }}
@@ -100,8 +100,8 @@ export function GridViewItem ({
         ? (
           <Text
             variant="small"
+            weight="bold"
             style={{
-              fontWeight: 'bold',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',

package/src/icons/Icon.stories.jsx

@@ -38,7 +38,7 @@ export const Library = {
             surface="primary"
             inset="m"
             roundness="s"
-            style={{ border: '1px solid var(--separator-primary)' }}
+            style={{ border: '1px solid var(--separator)' }}
           >
             <Icon name={name} size={size} />
           </View>

package/src/inputs/FileField.jsx

@@ -136,7 +136,7 @@ export function FileField({
         <View gap="s" style={style} data-ossy-file-dropzone {...rest}>
           {refs.map(ref => (
             <View key={ref.resourceId} layout="row" gap="s" alignItems="center">
-              <Text style={{ flex: 1, fontSize: 14 }}>{ref.resourceId}</Text>
+              <Text font="s" style={{ flex: 1 }}>{ref.resourceId}</Text>
               <Button
                 type="button"
                 variant="command-danger"
@@ -151,7 +151,7 @@ export function FileField({
           {localFiles.map((file, index) => (
             <View key={`${file.name}-${index}`} layout="row" gap="s" alignItems="center">
               <LocalFilePreview file={file} />
-              <Text style={{ flex: 1, fontSize: 14 }}>{file.name}</Text>
+              <Text font="s" style={{ flex: 1 }}>{file.name}</Text>
               <Button
                 type="button"
                 variant="command-danger"
@@ -174,9 +174,9 @@ export function FileField({
             />
           )}
           {acceptError && (
-            <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>{acceptError}</Text>
+            <Text font="xs" style={{ color: 'var(--surface-danger, crimson)' }}>{acceptError}</Text>
           )}
-          <Text style={{ fontSize: 12, opacity: 0.65 }}>
+          <Text font="xs" style={{ opacity: 0.65 }}>
             Stub field — register <code>@ossy/design-system/input/file</code> for upload.
           </Text>
         </View>
@@ -193,10 +193,10 @@ export function FileField({
           <View layout="row" gap="s" alignItems="center">
             {localFile && <LocalFilePreview file={localFile} size="48px" />}
             {resourceId && !localFile && (
-              <Text style={{ fontSize: 14 }}>{resourceId}</Text>
+              <Text font="s">{resourceId}</Text>
             )}
             {localFile && (
-              <Text style={{ flex: 1, fontSize: 14 }}>{localFile.name}</Text>
+              <Text font="s" style={{ flex: 1 }}>{localFile.name}</Text>
             )}
           </View>
         )}
@@ -209,12 +209,12 @@ export function FileField({
           onChange={onSinglePick}
         />
         {acceptError && (
-          <Text style={{ fontSize: 12, color: 'var(--color-danger, crimson)' }}>
+          <Text font="xs" style={{ color: 'var(--surface-danger, crimson)' }}>
             File not accepted: {acceptError}
           </Text>
         )}
         {!resourceId && (
-          <Text style={{ fontSize: 12, opacity: 0.65 }}>
+          <Text font="xs" style={{ opacity: 0.65 }}>
             Stub field — register <code>@ossy/design-system/input/file</code> for upload.
           </Text>
         )}

package/src/inputs/Input.jsx

@@ -4,6 +4,7 @@ import { Text } from '../text'
 import { Button } from '../button'
 import { useLocale } from '../locale/index.js'
 import { inputStyles, inputVariantStyles } from './inputStyles.js'
+import { patternOverrideStyle } from '../view/resolveVariant.js'
 
 export { inputStyles, inputVariantStyles } from './inputStyles.js'
 
@@ -11,6 +12,12 @@ export const Input = ({
   variant = 'default',
   placeholder,
   'aria-label': ariaLabel,
+  font,
+  family,
+  weight,
+  leading,
+  tracking,
+  style,
   ...props
 }) => {
   const { t } = useLocale()
@@ -25,8 +32,15 @@ export const Input = ({
     <input
       data-component="input"
       data-input-variant={variant}
+      data-variant={`input-${variant}`}
+      data-font={font}
+      data-family={family}
+      data-weight={weight}
+      data-leading={leading}
+      data-tracking={tracking}
       placeholder={placeholder != null ? t(placeholder) : undefined}
       aria-label={ariaLabel != null ? t(ariaLabel) : undefined}
+      style={{ ...patternOverrideStyle({ font, family, weight, leading, tracking }), ...style }}
       {...props}
     />
   </>
@@ -37,30 +51,31 @@ export const InputTitle = ({ variant = 'breadcrumb', ...props }) => (
   <>
     <style href={`@ossy/design-system/input-title/${variant}`} precedence='high'>
     {`
-      [data-component="input-title"][data-input-title-variant="${variant}"] {
+      [data-component="input-title"] {
         box-sizing: border-box;
         max-width: 100%;
         min-width: 0;
-        font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
-        line-height: var(--text-${variant}-line-height, 1);
-        font-size: var(--text-${variant}-font-size, 18px);
-        font-weight: var(--text-${variant}-font-weight, 500);
-        letter-spacing: var(--text-${variant}-letter-spacing, 0);
-        color: var(--text-${variant}-color, var(--text-default-color));
+        font-family: var(--view-family, inherit);
+        color: var(--foreground, CanvasText);
         border: none;
         background-color: transparent;
       }
 
-      [data-component="input-title"][data-input-title-variant="${variant}"]::placeholder {
-        color: color-mix(in srgb, var(--text-default-color) 45%, transparent);
+      [data-component="input-title"]::placeholder {
+        color: color-mix(in srgb, var(--foreground, CanvasText) 45%, transparent);
       }
 
-      [data-component="input-title"][data-input-title-variant="${variant}"]:focus {
+      [data-component="input-title"]:focus {
         outline: none;
       }
     `}
     </style>
-    <input data-component="input-title" data-input-title-variant={variant} {...props}/>
+    <input
+      data-component="input-title"
+      data-input-title-variant={variant}
+      data-variant={`text-${variant}`}
+      {...props}
+    />
   </>
 )
 
@@ -73,34 +88,34 @@ export const Textarea = props => (
         height: 120px;
         width: 100%;
         max-width: 100%;
-        font-family: var(--text-default-font-family, sans-serif);
-        padding: var(--space-s, 8px) var(--space-m, 16px);
-        border-width: 1px;
+        font-family: inherit;
+        padding: var(--inset-s-m, var(--space-s) var(--space-m));
+        border-width: var(--border-s, 1px);
         border-style: solid;
-        border-color: var(--separator-primary);
-        border-radius: var(--space-m, 16px);
-        font-size: var(--text-default-font-size, 16px);
-        font-weight: var(--text-default-font-weight, 400);
-        line-height: var(--text-default-line-height, 1.5);
-        color: var(--text-default-color, CanvasText);
+        border-color: var(--separator);
+        border-radius: var(--roundness-m, var(--space-m));
+        font-size: var(--font-m, 16px);
+        font-weight: var(--weight-regular, 400);
+        line-height: var(--leading-xl, 1.5);
+        color: var(--foreground, CanvasText);
         background-color: var(--surface-primary);
         resize: vertical;
       }
 
       [data-component="textarea"]::placeholder {
-        color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
+        color: color-mix(in srgb, var(--foreground, CanvasText) 42%, transparent);
       }
       
       [data-component="textarea"]:focus {
         outline: none;
-        border-color: var(--color-accent);
-        box-shadow: 0 0 0 1px var(--color-accent);
+        border-color: var(--surface-accent);
+        box-shadow: 0 0 0 1px var(--surface-accent);
       }
 
       [data-component="textarea"]:disabled {
         cursor: not-allowed;
         opacity: 0.55;
-        color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
+        color: color-mix(in srgb, var(--foreground, CanvasText) 65%, transparent);
         background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
       }
     `}

package/src/inputs/LocalFilePreview.jsx

@@ -33,7 +33,7 @@ export function LocalFilePreview({ file, size = '32px', style = {} }) {
           alignItems: 'center',
           justifyContent: 'center',
           borderRadius: 'var(--space-s)',
-          background: 'var(--color-secondary)',
+          background: 'var(--surface-secondary)',
           fontSize: 10,
           overflow: 'hidden',
           ...style,
@@ -55,7 +55,7 @@ export function LocalFilePreview({ file, size = '32px', style = {} }) {
       style={{
         objectFit: 'cover',
         borderRadius: 'var(--space-s)',
-        background: 'var(--color-secondary)',
+        background: 'var(--surface-secondary)',
         ...style,
       }}
     />

package/src/inputs/Select.jsx

@@ -159,6 +159,7 @@ export const Select = ({
               data-component="input"
               data-input-variant={variant}
               data-select-trigger
+              data-variant={`input-${variant}`}
               disabled={disabled}
               aria-label={resolvedAriaLabel}
               aria-haspopup="listbox"

package/src/inputs/inputStyles.js

@@ -1,93 +1,50 @@
+import { patternCss } from '../view/resolveVariant.js'
+
 /**
  * Shared structural + state styles for `data-component="input"`.
- * Visual sizing (padding, type, width) comes from {@link inputVariantStyles},
- * mirroring `Button`'s `--button-${variant}-*` convention.
+ * Size, type, surface, and radius come from `theme.variants.input[variant]`.
  */
 export const inputStyles = `
+  ${patternCss}
   [data-component="input"] {
     box-sizing: border-box;
     max-width: 100%;
     min-width: 0;
-    border-width: 1px;
-    border-style: solid;
-    box-shadow: none;
+    font-family: var(--view-family, inherit);
   }
 
   [data-component="input"]::placeholder {
-    color: color-mix(in srgb, var(--text-default-color) 42%, transparent);
+    color: color-mix(in srgb, var(--foreground, CanvasText) 42%, transparent);
   }
 
   [data-component="input"]:focus {
     outline: none;
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 1px var(--color-accent);
+    border-color: var(--surface-accent);
+    box-shadow: 0 0 0 1px var(--surface-accent);
   }
 
   [data-component="input"]:disabled {
     cursor: not-allowed;
     opacity: 0.55;
-    color: color-mix(in srgb, var(--text-default-color) 65%, transparent);
+    color: color-mix(in srgb, var(--foreground, CanvasText) 65%, transparent);
     background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
-    border-color: var(--separator-primary);
+    border-color: var(--separator);
   }
 `
 
-const VARIANT_FALLBACKS = {
-  default: {
-    padding: 'var(--space-s, 8px) var(--space-m, 16px)',
-    fontSize: 'var(--text-default-font-size, 16px)',
-    fontWeight: 'var(--text-default-font-weight, 400)',
-    width: 'auto',
-    maxWidth: '100%',
-    minWidth: '0',
-  },
-  compact: {
-    padding: 'var(--space-xs, 4px) var(--space-s, 8px)',
-    fontSize: '14px',
-    fontWeight: '400',
-    width: '10rem',
-    maxWidth: '10rem',
-    minWidth: '0',
-  },
-}
-
 /**
- * Variant stylesheet for inputs / select triggers.
- * Themes set `--input-${variant}-*` (see `packages/themes`); per-variant
- * fallbacks keep default and compact usable without a theme update.
- *
- * Size props resolve `--input-${variant}-*` → variant fallback (not through
- * `--input-default-*`) so compact cannot accidentally inherit default padding.
+ * Compact inputs keep a fixed control width. Padding and type come from the variant.
  *
  * @param {string} [variant='default']
  */
 export function inputVariantStyles (variant = 'default') {
-  const fallbacks = VARIANT_FALLBACKS[variant] ?? VARIANT_FALLBACKS.default
-
+  if (variant !== 'compact') return ''
   return `
-    [data-component="input"][data-input-variant="${variant}"] {
-      padding: var(--input-${variant}-padding, ${fallbacks.padding});
-      border-color: var(--input-${variant}-border-color, var(--input-default-border-color, var(--separator-primary)));
-      border-radius: var(--input-${variant}-border-radius, var(--input-default-border-radius, var(--roundness-rounded, 99999px)));
-      font-size: var(--input-${variant}-font-size, ${fallbacks.fontSize});
-      font-family: var(--input-${variant}-font-family, var(--input-default-font-family, var(--text-default-font-family, sans-serif)));
-      font-weight: var(--input-${variant}-font-weight, ${fallbacks.fontWeight});
-      line-height: var(--input-${variant}-line-height, var(--input-default-line-height, 1));
-      color: var(--input-${variant}-color, var(--input-default-color, var(--text-default-color, CanvasText)));
-      background-color: var(--input-${variant}-background, var(--input-default-background, var(--surface-primary)));
-    }
-
-    /* Width on the control itself — skip Select triggers (they stay 100% of [data-select]). */
-    [data-component="input"][data-input-variant="${variant}"]:not([data-select-trigger]) {
-      width: var(--input-${variant}-width, ${fallbacks.width});
-      max-width: var(--input-${variant}-max-width, ${fallbacks.maxWidth});
-      min-width: var(--input-${variant}-min-width, ${fallbacks.minWidth});
-    }
-
-    [data-select][data-input-variant="${variant}"] {
-      width: var(--input-${variant}-width, ${fallbacks.width});
-      max-width: var(--input-${variant}-max-width, ${fallbacks.maxWidth});
-      min-width: var(--input-${variant}-min-width, ${fallbacks.minWidth});
+    [data-component="input"][data-input-variant="compact"]:not([data-select-trigger]),
+    [data-select][data-input-variant="compact"] {
+      width: 160px;
+      max-width: 160px;
+      min-width: 0;
     }
   `
 }