@dnanpm/ui-components 0.5.0 → 0.7.0

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

@@ -0,0 +1,13 @@
+import './overlay.css';
+const overlayStrong = "_overlayStrong_1w2h3_1";
+const overlayClosing = "_overlayClosing_1w2h3_19";
+const overlayStyles = {
+  overlayStrong,
+  overlayClosing
+};
+export {
+  overlayStyles as default,
+  overlayClosing,
+  overlayStrong
+};
+//# sourceMappingURL=overlay.module.css.js.map

package/dist/styles/utils/overlay.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/styles/utils/text-decoration.css

@@ -1,4 +1,11 @@
-@layer dds-components {._underlineLink_1nw3t_1 {
+@layer dds-components {._underlineLink_o1ngy_1 {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: from-font;
+}
+
+._underlineLinkOnHover_o1ngy_8:hover {
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-skip-ink: auto;

package/dist/styles/utils/text-decoration.module.css.cjs

@@ -1,10 +1,13 @@
 require('./text-decoration.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const underlineLink = "_underlineLink_1nw3t_1";
+const underlineLink = "_underlineLink_o1ngy_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_o1ngy_8";
 const textDecorationStyles = {
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 exports.default = textDecorationStyles;
 exports.underlineLink = underlineLink;
+exports.underlineLinkOnHover = underlineLinkOnHover;
 //# sourceMappingURL=text-decoration.module.css.cjs.map

package/dist/styles/utils/text-decoration.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-decoration.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"text-decoration.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/styles/utils/text-decoration.module.css.js

@@ -1,10 +1,13 @@
 import './text-decoration.css';
-const underlineLink = "_underlineLink_1nw3t_1";
+const underlineLink = "_underlineLink_o1ngy_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_o1ngy_8";
 const textDecorationStyles = {
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 export {
   textDecorationStyles as default,
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 //# sourceMappingURL=text-decoration.module.css.js.map

package/dist/styles/utils/text-decoration.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-decoration.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"text-decoration.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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,168 @@
   --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;
-}
+/* ==========================================================================
+   Extended typography tokens (hand-authored, CSS only)
 
-html {
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 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:
 
-    scroll-behavior: smooth;
-}
-html,
-body {
-    margin: 0;
-    padding: 0;
-}
+   - 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
 
-img,
-picture,
-svg,
-video {
-    display: block;
-    max-width: 100%;
-}
-}
-
-@layer dds-base {
-
-/* ==========================================================================
-   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;
+}
+
+body.dds-un-scrollable {
+    overflow: hidden;
+}
+
+@media screen and (min-width: 1024px) {
+    body.dds-un-scrollable {
+        overflow: initial;
+    }
+}
+
+img,
+picture,
+svg,
+video {
+    display: block;
+    max-width: 100%;
+}
+}
+
+@layer dds-base {
+
 /* ==========================================================================
    Base typography styles
 
@@ -276,12 +314,21 @@ 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 {
     font: var(--typography-body-md);
 }
 
+body {
+    background-color: var(--color-semantic-surface-neutral-soft);
+    color: var(--color-semantic-foreground-default);
+}
+
 h1,
 h2,
 h3,
@@ -420,14 +467,16 @@ ol {
 /* ─── Dark color scheme ─── */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    .dds-prose {
-        a {
-            color: var(--color-semantic-foreground-link-inverse);
+    :scope {
+        color: var(--color-semantic-foreground-inverse);
+    }
 
-            &:hover {
-                color: var(--color-semantic-foreground-link-inverse-hover);
-            }
-        }
+    :where(a) {
+        color: var(--color-semantic-foreground-link-inverse);
+    }
+
+    :where(a:hover) {
+        color: var(--color-semantic-foreground-link-inverse-hover);
     }
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",
@@ -27,6 +27,7 @@
         "build": "tsc --project tsconfig.build.json && vite build",
         "dev": "vite build --watch",
         "gen:component": "plop --plopfile ./scripts/template-generators/plopfile.mjs component",
+        "tokens:check-css-vars": "bash scripts/check-token-css-vars.sh",
         "test": "vitest run --coverage",
         "test:watch": "vitest",
         "format": "prettier --write .",