@nordcode/ui 1.3.2 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 2.0.0 (2025-05-02)
+
+### BREAKING CHANGES
+
+Rename tokens:
+
+--control-height-base: Used to be --button-height-base. Renamed for clarity, because it also affects inputs.
+--control-height-small: Used to be --button-height-small. Renamed for clarity, because it also affects inputs.
+
+Add new design tokens:
+
+--control-spacing-minimal
+--control-spacing-tiny
+--control-spacing-nearest
+--control-spacing-near
+--control-spacing-base
+--control-spacing-far
+--control-spacing-farthest
+
+These tokens are `em` based and are used to style the control elements, mostly inputs and buttons, but also other styled elements like your lists and details. Changing the spacings can be used for a more dense or more spacious layout.
+
 ## 1.3.2 (2025-04-18)
 
 ### improvements

package/out/bundle.css

@@ -211,12 +211,10 @@
   }
 
   :where(html) {
-    --button-height-base: 2.5rem;
-    --button-height-small: 2rem;
+    --control-height-base: var(--button-height-base);
+    --control-height-small: var(--button-height-small);
     --font-family-link: var(--font-family-default);
     --font-family-button: var(--font-family-default);
-    --input-height-base: 2.5rem;
-    --input-height-small: 2rem;
   }
 }
 
@@ -331,7 +329,7 @@
 
   :where(:not(:active):focus-visible) {
     outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: .5em;
+    outline-offset: var(--control-spacing-near, .5em);
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -437,14 +435,14 @@
 
   :where(dd):not(:last-of-type) {
     border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-    padding-block-end: .5lh;
+    padding-block-end: var(--control-spacing-base, .75em);
   }
 
   :where(dl:not([class]), .nc-description-list) {
     overflow-wrap: anywhere;
-    grid-template-columns: .25fr .75fr;
     align-items: flex-start;
-    row-gap: .5lh;
+    row-gap: var(--control-spacing-base, .75em);
+    grid-template-columns: .25fr .75fr;
     inline-size: 100%;
     max-inline-size: 100%;
     display: grid;
@@ -466,7 +464,7 @@
 
     :where(dt):not(:last-of-type) {
       border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-      padding-block-end: .5lh;
+      padding-block-end: var(--control-spacing-base, .75em);
     }
 
     :where(dd) {
@@ -497,13 +495,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .35em .5em;
+    padding: var(--control-spacing-nearest, .375em) var(--control-spacing-base, .75em);
     display: block;
   }
 
   :where(details) {
-    --p-x-details: 1em;
-    --p-y-details: 1em;
+    --p-x-details: var(--control-spacing-far, 1em);
+    --p-y-details: var(--control-spacing-far, 1em);
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -535,7 +533,7 @@
     font-size: var(--font-size-large);
     margin-inline: 0;
     padding: 0;
-    padding-inline-start: 1em;
+    padding-inline-start: var(--control-spacing-far, 1em);
     position: relative;
   }
 
@@ -562,7 +560,7 @@
 
   :is(.note, blockquote) cite:before {
     content: "—";
-    margin-inline-end: .5em;
+    margin-inline-end: var(--control-spacing-near, .5em);
   }
 
   cite {
@@ -625,7 +623,7 @@
   :where(a, .nc-link) {
     color: inherit;
     font-family: var(--font-family-link);
-    text-underline-offset: .35em;
+    text-underline-offset: var(--control-spacing-nearest, .375em);
     font-weight: var(--font-weight-default);
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
@@ -672,17 +670,18 @@
   }
 
   :where(del, ins, mark, code, kbd, var) {
+    padding-inline: var(--control-spacing-tiny, .25em);
     border-radius: var(--border-radius-small);
     line-height: inherit;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    padding-inline: .25em;
   }
 
   :where(code, kbd, var) {
     font-family: var(--font-family-mono);
     letter-spacing: 0;
     font-weight: var(--font-weight-default);
+    padding-block: var(--control-spacing-minimal, .125em);
     -webkit-hyphens: none;
     hyphens: none;
     tab-size: 4;
@@ -690,7 +689,6 @@
     word-spacing: normal;
     overflow-wrap: normal;
     max-inline-size: fit-content;
-    padding-block: .2em;
     font-style: normal;
   }
 
@@ -711,13 +709,13 @@
   }
 
   :where(pre) {
+    padding: var(--control-spacing-far, 1em);
     inline-size: 100%;
     color: var(--color-text-base);
     border: var(--border-width-medium) solid var(--color-border-base);
     border-radius: var(--border-radius-medium);
     background: var(--color-surface-subtle);
     -webkit-overflow-scrolling: touch;
-    padding: 1em;
     overflow-x: auto;
   }
 
@@ -755,10 +753,10 @@
   }
 
   :where(td, th) {
+    padding: var(--control-spacing-near, .5em);
     line-height: var(--line-height-small);
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    padding: .5em;
   }
 
   :where(td), :where(thead th) {
@@ -828,11 +826,11 @@
   }
 
   :where(ul, ol) {
-    padding-inline-start: 1em;
+    padding-inline-start: var(--control-spacing-farthest, 1.5em);
   }
 
   :where(li + li), :where(li > :is(ul, ol)) {
-    margin-block-start: .5em;
+    margin-block-start: var(--control-spacing-near, .5em);
   }
 
   @supports (font-variant-position: sub) {
@@ -866,7 +864,7 @@
     content: close-quote;
     content: "“";
     content: "”";
-    margin-inline-start: -.5em;
+    margin-inline-start: calc(-1 * var(--control-spacing-near, .5em));
   }
 
   :where(.quoted p) {

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: .5em;
+    outline-offset: var(--control-spacing-near, .5em);
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -217,14 +217,14 @@
 
   :where(dd):not(:last-of-type) {
     border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-    padding-block-end: .5lh;
+    padding-block-end: var(--control-spacing-base, .75em);
   }
 
   :where(dl:not([class]), .nc-description-list) {
     overflow-wrap: anywhere;
-    grid-template-columns: .25fr .75fr;
     align-items: flex-start;
-    row-gap: .5lh;
+    row-gap: var(--control-spacing-base, .75em);
+    grid-template-columns: .25fr .75fr;
     inline-size: 100%;
     max-inline-size: 100%;
     display: grid;
@@ -246,7 +246,7 @@
 
     :where(dt):not(:last-of-type) {
       border-bottom: var(--border-width-thin) solid var(--color-border-muted);
-      padding-block-end: .5lh;
+      padding-block-end: var(--control-spacing-base, .75em);
     }
 
     :where(dd) {
@@ -277,13 +277,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .35em .5em;
+    padding: var(--control-spacing-nearest, .375em) var(--control-spacing-base, .75em);
     display: block;
   }
 
   :where(details) {
-    --p-x-details: 1em;
-    --p-y-details: 1em;
+    --p-x-details: var(--control-spacing-far, 1em);
+    --p-y-details: var(--control-spacing-far, 1em);
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -315,7 +315,7 @@
     font-size: var(--font-size-large);
     margin-inline: 0;
     padding: 0;
-    padding-inline-start: 1em;
+    padding-inline-start: var(--control-spacing-far, 1em);
     position: relative;
   }
 
@@ -342,7 +342,7 @@
 
   :is(.note, blockquote) cite:before {
     content: "—";
-    margin-inline-end: .5em;
+    margin-inline-end: var(--control-spacing-near, .5em);
   }
 
   cite {
@@ -405,7 +405,7 @@
   :where(a, .nc-link) {
     color: inherit;
     font-family: var(--font-family-link);
-    text-underline-offset: .35em;
+    text-underline-offset: var(--control-spacing-nearest, .375em);
     font-weight: var(--font-weight-default);
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
@@ -452,17 +452,18 @@
   }
 
   :where(del, ins, mark, code, kbd, var) {
+    padding-inline: var(--control-spacing-tiny, .25em);
     border-radius: var(--border-radius-small);
     line-height: inherit;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    padding-inline: .25em;
   }
 
   :where(code, kbd, var) {
     font-family: var(--font-family-mono);
     letter-spacing: 0;
     font-weight: var(--font-weight-default);
+    padding-block: var(--control-spacing-minimal, .125em);
     -webkit-hyphens: none;
     hyphens: none;
     tab-size: 4;
@@ -470,7 +471,6 @@
     word-spacing: normal;
     overflow-wrap: normal;
     max-inline-size: fit-content;
-    padding-block: .2em;
     font-style: normal;
   }
 
@@ -491,13 +491,13 @@
   }
 
   :where(pre) {
+    padding: var(--control-spacing-far, 1em);
     inline-size: 100%;
     color: var(--color-text-base);
     border: var(--border-width-medium) solid var(--color-border-base);
     border-radius: var(--border-radius-medium);
     background: var(--color-surface-subtle);
     -webkit-overflow-scrolling: touch;
-    padding: 1em;
     overflow-x: auto;
   }
 
@@ -535,10 +535,10 @@
   }
 
   :where(td, th) {
+    padding: var(--control-spacing-near, .5em);
     line-height: var(--line-height-small);
     white-space: nowrap;
     font-variant-numeric: tabular-nums;
-    padding: .5em;
   }
 
   :where(td), :where(thead th) {
@@ -608,11 +608,11 @@
   }
 
   :where(ul, ol) {
-    padding-inline-start: 1em;
+    padding-inline-start: var(--control-spacing-farthest, 1.5em);
   }
 
   :where(li + li), :where(li > :is(ul, ol)) {
-    margin-block-start: .5em;
+    margin-block-start: var(--control-spacing-near, .5em);
   }
 
   @supports (font-variant-position: sub) {
@@ -646,7 +646,7 @@
     content: close-quote;
     content: "“";
     content: "”";
-    margin-inline-start: -.5em;
+    margin-inline-start: calc(-1 * var(--control-spacing-near, .5em));
   }
 
   :where(.quoted p) {