@nordcode/ui 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,56 +1,55 @@
+## 1.3.0 (2025-04-18)
 
-## v1.0.4 (2024-09-15)
+### improvements
 
-### New Features
+- Switch from ch (and in some cases lh) to em for more consistent sizing and to prevent possible CLS due to font switching
+- Add new typography token: `--font-size-medium` to provide a token for slightly larger text
 
-- Added `.nc-alert` class, an alert and utility class for notifications.
-- Added `-aligned` variant to `.nc-button`, which applies negative margin, so you can visually align stealth buttons
+## 1.2.0 (2025-04-03)
 
-### Fixes
+### Improvements
 
-- Fixed Webkit `<detail>` style
-- Shadows not working using `light-dark`
+- Add clickable card class
 
-## v1.0.5 (2024-11-28)
+## 1.1.6 (2025-01-09)
 
-### Features
+### Improvements
 
-Make fieldset-based inputs more accessible by adding legends. This affects:
-- `nc-tag-select`
-- `nc-segmented-control`
-- `nc-radio-field`
-- `nc-checkbox-field`
+- Small changes to spacings.
 
-Be sure to checkout the updated markup for these components in the documentation.
+## 1.1.5 (2025-01-09)
 
-## v1.0.5 (2024-11-28)
+### Improvements
+
+- Add `themed` class to apply `var(--text)` and `var(--surface)` colors
 
 ### Fixes
 
-- Fix fields not compiling
+- Fix text colors for `<ins>` and `<del>`
 
-## 1.0.8 (2024-12-27)
+## 1.1.4 (2025-01-04)
 
-### Improvements
+### Fixes
 
-- Tweak Dialog Styles
-- Disable scroll when modal dialog is open
+- Fix summary border-radius by using a border-radius token
+
+## 1.1.3 (2025-01-04)
 
 ### Fixes
 
-- Fix user selection styles
+- Small design fixes and improvements
 
-## 1.0.9 (2024-12-27)
+## 1.1.2 (2025-01-03)
 
-### Improvements
+### Fixes
 
-- Tweak Dialog Radius and mobile styles
+- Fix switch component not working
 
-## 1.0.10 (2024-12-27)
+## 1.1.1 (2025-01-03)
 
 ### Fixes
 
-- Fix radius for real
+- Made details full width again
 
 ## 1.1.0 (2025-01-03)
 
@@ -62,48 +61,55 @@ Lots of spring cleaning
 - Changed default styling for details
 - Cleanup unused styles
 
-## 1.1.1 (2025-01-03)
+## 1.0.10 (2024-12-27)
 
 ### Fixes
 
-- Made details full width again
-
-## 1.1.2 (2025-01-03)
+- Fix radius for real
 
-### Fixes
+## 1.0.9 (2024-12-27)
 
-- Fix switch component not working
+### Improvements
 
-## 1.1.3 (2025-01-04)
+- Tweak Dialog Radius and mobile styles
 
-### Fixes
+## 1.0.8 (2024-12-27)
 
-- Small design fixes and improvements
+### Improvements
 
-## 1.1.4 (2025-01-04)
+- Tweak Dialog Styles
+- Disable scroll when modal dialog is open
 
 ### Fixes
 
-- Fix summary border-radius by using a border-radius token
+- Fix user selection styles
 
-## 1.1.5 (2025-01-09)
+## v1.0.5 (2024-11-28)
 
-### Improvements
+### Fixes
 
-- Add `themed` class to apply `var(--text)` and `var(--surface)` colors
+- Fix fields not compiling
 
-### Fixes
+## v1.0.5 (2024-11-28)
 
-- Fix text colors for `<ins>` and `<del>`
+### Features
 
-## 1.1.6 (2025-01-09)
+Make fieldset-based inputs more accessible by adding legends. This affects:
+- `nc-tag-select`
+- `nc-segmented-control`
+- `nc-radio-field`
+- `nc-checkbox-field`
 
-### Improvements
+Be sure to checkout the updated markup for these components in the documentation.
 
-- Small changes to spacings.
+## v1.0.4 (2024-09-15)
 
-## 1.2.0 (2025-04-03)
+### New Features
 
-### Improvements
+- Added `.nc-alert` class, an alert and utility class for notifications.
+- Added `-aligned` variant to `.nc-button`, which applies negative margin, so you can visually align stealth buttons
 
-- Add clickable card class
+### Fixes
+
+- Fixed Webkit `<detail>` style
+- Shadows not working using `light-dark`

package/out/bundle.css

@@ -12,14 +12,15 @@
     --line-height-base: 1.55;
     --line-height-small: 1.1;
     --tracking-base: normal;
-    --tracking-tight: -.04ch;
-    --tracking-wide: .06ch;
-    --measure-large: 88ch;
-    --measure-base: 72ch;
-    --measure-small: 44ch;
+    --tracking-tight: -.02em;
+    --tracking-wide: .03em;
+    --measure-large: 44em;
+    --measure-base: 36em;
+    --measure-small: 22em;
     --font-size-smallest: max(.75rem, 12px);
     --font-size-small: max(.875rem, 14px);
     --font-size-base: 1rem;
+    --font-size-medium: 1.125rem;
     --font-size-large: 1.25rem;
     --font-size-largest: 1.5rem;
     --font-size-display: 3.5rem;
@@ -330,7 +331,7 @@
 
   :where(:not(:active):focus-visible) {
     outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: 1ch;
+    outline-offset: .5em;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -460,7 +461,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 2ch;
+      padding-inline-end: 1em;
     }
 
     :where(dt):not(:last-of-type) {
@@ -496,19 +497,19 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .25lh 1ch;
+    padding: .35em .5em;
     display: block;
   }
 
   :where(details) {
-    --p-x-details: 2ch;
-    --p-y-details: .75lh;
+    --p-x-details: 1em;
+    --p-y-details: 1em;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
-    border: var(--border-width-thin) solid var(--color-border-base);
     padding: var(--p-y-details) var(--p-x-details);
     inline-size: 100%;
+    box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
   }
 
   :where(details) > summary {
@@ -517,7 +518,7 @@
     font-weight: var(--font-weight-heading);
     border-radius: var(--b-r-details);
     padding: var(--p-y-details) var(--p-x-details);
-    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details)  + var(--border-width-thin));
+    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
   }
 
   :where(details)[open] > summary {
@@ -534,7 +535,7 @@
     font-size: var(--font-size-large);
     margin-inline: 0;
     padding: 0;
-    padding-inline-start: 2ch;
+    padding-inline-start: 1em;
     position: relative;
   }
 
@@ -561,7 +562,7 @@
 
   :is(.note, blockquote) cite:before {
     content: "—";
-    margin-inline-end: .5ch;
+    margin-inline-end: .5em;
   }
 
   cite {
@@ -624,7 +625,7 @@
   :where(a, .nc-link) {
     color: inherit;
     font-family: var(--font-family-link);
-    text-underline-offset: .25lh;
+    text-underline-offset: .35em;
     font-weight: var(--font-weight-default);
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
@@ -675,7 +676,7 @@
     line-height: inherit;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    padding-inline: .5ch;
+    padding-inline: .25em;
   }
 
   :where(code, kbd, var) {
@@ -689,7 +690,7 @@
     word-spacing: normal;
     overflow-wrap: normal;
     max-inline-size: fit-content;
-    padding-block: .125lh;
+    padding-block: .2em;
     font-style: normal;
   }
 
@@ -716,7 +717,7 @@
     border-radius: var(--border-radius-medium);
     background: var(--color-surface-subtle);
     -webkit-overflow-scrolling: touch;
-    padding: .5lh 2ch;
+    padding: 1em;
     overflow-x: auto;
   }
 
@@ -757,7 +758,7 @@
     line-height: var(--line-height-small);
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    padding: .4lh 1ch;
+    padding: .5em;
   }
 
   :where(td), :where(thead th) {
@@ -827,15 +828,11 @@
   }
 
   :where(ul, ol) {
-    padding-inline-start: 2ch;
-  }
-
-  :where(li + li) {
-    margin-block-start: .5lh;
+    padding-inline-start: 1em;
   }
 
-  :where(li > :is(ul, ol)) {
-    margin-block-start: .25lh;
+  :where(li + li), :where(li > :is(ul, ol)) {
+    margin-block-start: .5em;
   }
 
   @supports (font-variant-position: sub) {
@@ -869,7 +866,7 @@
     content: close-quote;
     content: "“";
     content: "”";
-    margin-inline-start: -.87ch;
+    margin-inline-start: -.5em;
   }
 
   :where(.quoted p) {
@@ -962,11 +959,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 72ch);
+    max-inline-size: var(--flow-base-meassure, 36em);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 32ch);
+    max-inline-size: var(--flow-headline-meassure, 16em);
     --flow-gap: 1.5lh;
   }
 

package/out/bundle_configless.css

@@ -111,7 +111,7 @@
 
   :where(:not(:active):focus-visible) {
     outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: 1ch;
+    outline-offset: .5em;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -241,7 +241,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 2ch;
+      padding-inline-end: 1em;
     }
 
     :where(dt):not(:last-of-type) {
@@ -277,19 +277,19 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .25lh 1ch;
+    padding: .35em .5em;
     display: block;
   }
 
   :where(details) {
-    --p-x-details: 2ch;
-    --p-y-details: .75lh;
+    --p-x-details: 1em;
+    --p-y-details: 1em;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
-    border: var(--border-width-thin) solid var(--color-border-base);
     padding: var(--p-y-details) var(--p-x-details);
     inline-size: 100%;
+    box-shadow: 0 0 0 var(--border-width-thin) var(--color-border-base);
   }
 
   :where(details) > summary {
@@ -298,7 +298,7 @@
     font-weight: var(--font-weight-heading);
     border-radius: var(--b-r-details);
     padding: var(--p-y-details) var(--p-x-details);
-    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details)  + var(--border-width-thin));
+    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details));
   }
 
   :where(details)[open] > summary {
@@ -315,7 +315,7 @@
     font-size: var(--font-size-large);
     margin-inline: 0;
     padding: 0;
-    padding-inline-start: 2ch;
+    padding-inline-start: 1em;
     position: relative;
   }
 
@@ -342,7 +342,7 @@
 
   :is(.note, blockquote) cite:before {
     content: "—";
-    margin-inline-end: .5ch;
+    margin-inline-end: .5em;
   }
 
   cite {
@@ -405,7 +405,7 @@
   :where(a, .nc-link) {
     color: inherit;
     font-family: var(--font-family-link);
-    text-underline-offset: .25lh;
+    text-underline-offset: .35em;
     font-weight: var(--font-weight-default);
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
@@ -456,7 +456,7 @@
     line-height: inherit;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    padding-inline: .5ch;
+    padding-inline: .25em;
   }
 
   :where(code, kbd, var) {
@@ -470,7 +470,7 @@
     word-spacing: normal;
     overflow-wrap: normal;
     max-inline-size: fit-content;
-    padding-block: .125lh;
+    padding-block: .2em;
     font-style: normal;
   }
 
@@ -497,7 +497,7 @@
     border-radius: var(--border-radius-medium);
     background: var(--color-surface-subtle);
     -webkit-overflow-scrolling: touch;
-    padding: .5lh 2ch;
+    padding: 1em;
     overflow-x: auto;
   }
 
@@ -538,7 +538,7 @@
     line-height: var(--line-height-small);
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    padding: .4lh 1ch;
+    padding: .5em;
   }
 
   :where(td), :where(thead th) {
@@ -608,15 +608,11 @@
   }
 
   :where(ul, ol) {
-    padding-inline-start: 2ch;
-  }
-
-  :where(li + li) {
-    margin-block-start: .5lh;
+    padding-inline-start: 1em;
   }
 
-  :where(li > :is(ul, ol)) {
-    margin-block-start: .25lh;
+  :where(li + li), :where(li > :is(ul, ol)) {
+    margin-block-start: .5em;
   }
 
   @supports (font-variant-position: sub) {
@@ -650,7 +646,7 @@
     content: close-quote;
     content: "“";
     content: "”";
-    margin-inline-start: -.87ch;
+    margin-inline-start: -.5em;
   }
 
   :where(.quoted p) {
@@ -743,11 +739,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 72ch);
+    max-inline-size: var(--flow-base-meassure, 36em);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 32ch);
+    max-inline-size: var(--flow-headline-meassure, 16em);
     --flow-gap: 1.5lh;
   }