@dnanpm/ui-components 0.5.0 → 0.6.0

package/dist/styles/utils/focus.css

@@ -1,12 +1,12 @@
-@layer dds-components {._focusable_ikczm_1 {
+@layer dds-components {._focusable_azt70_1 {
     /* Marker class for shared focus treatment */
 }
 
-._focusable_ikczm_1:focus {
+._focusable_azt70_1:focus {
     outline-color: transparent;
 }
 
-._focusable_ikczm_1:focus-visible {
+._focusable_azt70_1:focus-visible {
     /* Transparent outline ensures a visible ring fallback in forced colors. */
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -16,21 +16,21 @@
 }
 
 @media (forced-colors: active) {
-    ._focusable_ikczm_1:focus-visible {
+    ._focusable_azt70_1:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusableInset_ikczm_25 {
+._focusableInset_azt70_25 {
     /* Marker class for inset focus treatment (ring stays inside the element boundary) */
 }
 
-._focusableInset_ikczm_25:focus {
+._focusableInset_azt70_25:focus {
     outline-color: transparent;
 }
 
-._focusableInset_ikczm_25:focus-visible {
+._focusableInset_azt70_25:focus-visible {
     outline: 2px solid transparent;
     box-shadow:
         inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
@@ -38,34 +38,34 @@
 }
 
 @media (forced-colors: active) {
-    ._focusableInset_ikczm_25:focus-visible {
+    ._focusableInset_azt70_25:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._focusable_ikczm_1:focus-visible {
+    ._focusable_azt70_1:focus-visible {
         box-shadow:
             0 0 0 2px var(--color-semantic-utility-focus-strong),
             0 0 0 4px var(--color-semantic-utility-focus-soft);
     }
 
-    ._focusableInset_ikczm_25:focus-visible {
+    ._focusableInset_azt70_25:focus-visible {
         box-shadow:
             inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
             inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
     }
 
     @media (forced-colors: active) {
-        ._focusable_ikczm_1:focus-visible,
-        ._focusableInset_ikczm_25:focus-visible {
+        ._focusable_azt70_1:focus-visible,
+        ._focusableInset_azt70_25:focus-visible {
             box-shadow: none;
         }
     }
 }
 
-._focusClipGuard_ikczm_68 {
+._focusClipGuard_azt70_68 {
     /*
      * Prevents focus rings from being clipped when the container uses overflow: hidden.
      *
@@ -73,7 +73,7 @@
      * - Apply this class to the clipping container.
      * - Override --focus-clip-guard-bleed-inline when a component needs a custom bleed amount.
      */
-    --focus-clip-guard-bleed-inline: var(--spacing-ui-xxs);
+    --focus-clip-guard-bleed-inline: var(--spacing-space-4);
     margin-inline: calc(var(--focus-clip-guard-bleed-inline) * -1);
     padding-inline: var(--focus-clip-guard-bleed-inline);
 }

package/dist/styles/utils/focus.module.css.cjs

@@ -1,9 +1,9 @@
 require('./focus.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const focusable = "_focusable_ikczm_1";
-const focusableInset = "_focusableInset_ikczm_25";
-const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusable = "_focusable_azt70_1";
+const focusableInset = "_focusableInset_azt70_25";
+const focusClipGuard = "_focusClipGuard_azt70_68";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles/utils/focus.module.css.js

@@ -1,7 +1,7 @@
 import './focus.css';
-const focusable = "_focusable_ikczm_1";
-const focusableInset = "_focusableInset_ikczm_25";
-const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusable = "_focusable_azt70_1";
+const focusableInset = "_focusableInset_azt70_25";
+const focusClipGuard = "_focusClipGuard_azt70_68";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles.css

@@ -90,23 +90,6 @@
   --color-semantic-interactive-auxiliary-focus: #ffb557;
   --color-semantic-interactive-auxiliary-active: #ffdbad;
   --color-semantic-interactive-auxiliary-disabled: rgba(255, 219, 173, 0.3);
-  --spacing-ui-md: 16px;
-  --spacing-ui-lg: 20px;
-  --spacing-ui-sm: 12px;
-  --spacing-ui-xl: 24px;
-  --spacing-ui-xs: 8px;
-  --spacing-ui-xxs: 4px;
-  --spacing-ui-xxl: 32px;
-  --spacing-ui-none: 0px;
-  --spacing-ui-xxxl: 40px;
-  --spacing-layout-none: 0px;
-  --spacing-layout-xxs: 16px;
-  --spacing-layout-xs: 32px;
-  --spacing-layout-sm: 48px;
-  --spacing-layout-md: 64px;
-  --spacing-layout-lg: 80px;
-  --spacing-layout-xl: 96px;
-  --spacing-layout-xxl: 112px;
   --radius-semantic-none: 0px;
   --radius-semantic-sm: 4px;
   --radius-semantic-md: 8px;
@@ -119,6 +102,23 @@
   --borderwidth-semantic-xl: 5px;
   --borderwidth-semantic-xxl: 6px;
   --borderwidth-semantic-sm: 2px;
+  --spacing-space-0: 0px;
+  --spacing-space-4: 4px;
+  --spacing-space-8: 8px;
+  --spacing-space-12: 12px;
+  --spacing-space-16: 16px;
+  --spacing-space-20: 20px;
+  --spacing-space-24: 24px;
+  --spacing-space-32: 32px;
+  --spacing-space-40: 40px;
+  --spacing-space-48: 48px;
+  --spacing-space-64: 64px;
+  --spacing-space-80: 80px;
+  --spacing-space-96: 96px;
+  --spacing-space-112: 112px;
+  --spacing-space-128: 128px;
+  --spacing-space-144: 144px;
+  --spacing-space-160: 160px;
   --typography-font-size-heading-xxl: 48px;
   --typography-font-size-heading-xl: 40px;
   --typography-font-size-heading-lg: 34px;
@@ -136,7 +136,7 @@
   --typography-font-weight-black: 900;
   --typography-font-weight-demi-bold: 600;
   --typography-line-height-xs: 1;
-  --typography-line-height-sm: 1.1;
+  --typography-line-height-sm: 1.15;
   --typography-line-height-md: 1.25;
   --typography-line-height-lg: 1.5;
   --typography-letter-spacing-tight: -0.02em;
@@ -144,130 +144,158 @@
   --typography-letter-spacing-wide: 0.02em;
   --typography-font-family-heading: DNA Heading;
   --typography-font-family-text: DNA Text;
+  --elevation-semantic-elevation-low-color: rgba(18, 18, 18, 0.06);
+  --elevation-semantic-elevation-low-offset-x: 0px;
+  --elevation-semantic-elevation-low-offset-y: 2px;
+  --elevation-semantic-elevation-low-blur: 16px;
+  --elevation-semantic-elevation-low-spread: 0px;
+  --elevation-semantic-elevation-medium-color: rgba(18, 18, 18, 0.08);
+  --elevation-semantic-elevation-medium-offset-x: 0px;
+  --elevation-semantic-elevation-medium-offset-y: 4px;
+  --elevation-semantic-elevation-medium-blur: 24px;
+  --elevation-semantic-elevation-medium-spread: 0px;
+  --elevation-semantic-elevation-high-color: rgba(18, 18, 18, 0.16);
+  --elevation-semantic-elevation-high-offset-x: 0px;
+  --elevation-semantic-elevation-high-offset-y: 8px;
+  --elevation-semantic-elevation-high-blur: 64px;
+  --elevation-semantic-elevation-high-spread: 0px;
 }
 }
 
 @layer dds-base {
 
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-html {
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
-
-    scroll-behavior: smooth;
-}
-html,
-body {
-    margin: 0;
-    padding: 0;
-}
+/* ==========================================================================
+   Extended typography tokens (hand-authored, CSS only)
 
-img,
-picture,
-svg,
-video {
-    display: block;
-    max-width: 100%;
-}
-}
+   Figma is the single source of truth for the generated tokens in tokens.css,
+   and that output is kept 1-1 with the Figma export. The variables below cannot
+   be expressed in Figma, so they are authored here instead:
 
-@layer dds-base {
+   - font shorthand presets compose values across token categories
+     (font-weight + font-size/line-height + font-family)
+   - heading presets use clamp() for fluid typography
+   - font-family tokens in Figma hold only the primary family, without fallbacks
 
-/* ==========================================================================
-   Typography shorthand variables
+   These are additive: they never redeclare a variable emitted by tokens.css.
+   They are delivered as CSS custom properties only — the values are CSS
+   expressions with no meaningful JavaScript equivalent — so unlike the
+   generated tokens there is no JS counterpart.
 
-   Each variable holds a complete CSS font shorthand value:
-   weight size/line-height family
+   Requires tokens.css, which defines the referenced font-size, font-weight,
+   line-height and font-family variables.
 
    Usage: font: var(--typography-heading-xxl);
-
-   Figma doesn't support composing typography tokens from multiple 
-   design token categories, so we need to define these shorthands in CSS. 
-   This also allows us to use the clamp() function for fluid typography, 
-   which isn't possible to do in Figma tokens.
    ========================================================================== */
 
 :root {
-    /* Font-family with fallbacks — Figma tokens only contain the primary font name,
-       so we override here to add the full fallback stack for CSS. */
-    --typography-font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --typography-font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    /* Full family stacks. Primary family comes from the Figma token. */
+    --typography-font-family-heading-with-fallback:
+        var(--typography-font-family-heading), 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --typography-font-family-text-with-fallback:
+        var(--typography-font-family-text), 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
     /* Headings */
     --typography-heading-xxl: var(--typography-font-weight-black)
         clamp(2.25rem, 2rem + 1.25cqw, 3rem)/var(--typography-line-height-sm)
-        var(--typography-font-family-heading);
+        var(--typography-font-family-heading-with-fallback);
     --typography-heading-xl: var(--typography-font-weight-black)
         clamp(2rem, 1.833rem + 0.833cqw, 2.5rem)/var(--typography-line-height-sm)
-        var(--typography-font-family-heading);
+        var(--typography-font-family-heading-with-fallback);
     --typography-heading-lg: var(--typography-font-weight-black)
         clamp(1.625rem, 1.458rem + 0.833cqw, 2.125rem)/var(--typography-line-height-sm)
-        var(--typography-font-family-heading);
+        var(--typography-font-family-heading-with-fallback);
     --typography-heading-md: var(--typography-font-weight-bold)
         clamp(1.375rem, 1.25rem + 0.625cqw, 1.75rem)/var(--typography-line-height-md)
-        var(--typography-font-family-heading);
+        var(--typography-font-family-heading-with-fallback);
     --typography-heading-sm: var(--typography-font-weight-bold)
         clamp(1.25rem, 1.167rem + 0.417cqw, 1.5rem)/var(--typography-line-height-md)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-heading-xs: var(--typography-font-weight-bold)
         clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-md)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-heading-xxs: var(--typography-font-weight-bold)
         clamp(1.0625rem, 1.042rem + 0.104cqw, 1.125rem)/var(--typography-line-height-md)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
 
     /* Body */
     --typography-body-lg: var(--typography-font-weight-regular)
         clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-lg-medium: var(--typography-font-weight-medium)
         clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-md: var(--typography-font-weight-regular)
         var(--typography-font-size-text-md)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-md-medium: var(--typography-font-weight-medium)
         var(--typography-font-size-text-md)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-md-bold: var(--typography-font-weight-bold)
         var(--typography-font-size-text-md)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-sm: var(--typography-font-weight-regular)
         var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-sm-medium: var(--typography-font-weight-medium)
         var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
     --typography-body-xs: var(--typography-font-weight-medium)
         var(--typography-font-size-text-xs)/var(--typography-line-height-lg)
-        var(--typography-font-family-text);
+        var(--typography-font-family-text-with-fallback);
 
     /* Labels */
     --typography-label-lg: var(--typography-font-weight-medium)
-        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
-        var(--typography-font-family-text);
+        var(--typography-font-size-text-md)/var(--typography-line-height-sm)
+        var(--typography-font-family-text-with-fallback);
     --typography-label-lg-bold: var(--typography-font-weight-bold)
-        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
-        var(--typography-font-family-text);
+        var(--typography-font-size-text-md)/var(--typography-line-height-sm)
+        var(--typography-font-family-text-with-fallback);
     --typography-label-md: var(--typography-font-weight-medium)
-        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
-        var(--typography-font-family-text);
+        var(--typography-font-size-text-sm)/var(--typography-line-height-sm)
+        var(--typography-font-family-text-with-fallback);
     --typography-label-md-bold: var(--typography-font-weight-bold)
-        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
-        var(--typography-font-family-text);
+        var(--typography-font-size-text-sm)/var(--typography-line-height-sm)
+        var(--typography-font-family-text-with-fallback);
     --typography-label-sm: var(--typography-font-weight-medium)
-        var(--typography-font-size-text-xs)/var(--typography-line-height-xs)
-        var(--typography-font-family-text);
+        var(--typography-font-size-text-xs)/var(--typography-line-height-sm)
+        var(--typography-font-family-text-with-fallback);
+}
+}
+
+@layer dds-base {
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+
+    scroll-behavior: smooth;
+}
+html,
+body {
+    margin: 0;
+    padding: 0;
 }
 
+img,
+picture,
+svg,
+video {
+    display: block;
+    max-width: 100%;
+}
+}
+
+@layer dds-base {
+
 /* ==========================================================================
    Base typography styles
 
@@ -276,6 +304,10 @@ video {
    properties are set consistently, and they can be overridden by utility
    classes for specific use cases.
 
+    The font shorthand presets used here (--typography-heading-*,
+    --typography-body-*, --typography-label-*) ship from
+    '@dnanpm/design-tokens/css/typography'.
+
    ========================================================================== */
 
 html {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",