@nordcode/ui 1.3.2 → 2.0.1

package/src/styles/components/buttons.css

@@ -32,14 +32,14 @@
         --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
         --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
 
-        --_button-padding-inline: var(--button-padding-inline, 1ch);
+        --_button-padding-inline: var(--button-padding-inline, var(--control-spacing-base, 0.75em));
 
         background-color: var(--_button-background);
         color: var(--_button-color);
         border: var(--border-width-thin) solid var(--_button-border-color);
         border-radius: var(--_button-border-radius);
         padding-inline: var(--_button-padding-inline);
-        min-block-size: var(--button-height-base);
+        min-block-size: var(--control-height-base);
         padding-block: 0;
         font-family: var(--font-family-button);
         letter-spacing: var(--tracking-tight);
@@ -140,8 +140,8 @@
         }
 
         &.-small {
-            --_button-padding-inline: 0.5em;
-            min-block-size: var(--button-height-small);
+            --_button-padding-inline: var(--control-spacing-near, 0.5em);
+            min-block-size: var(--control-height-small);
         }
 
         &.-round {
@@ -149,8 +149,14 @@
         }
 
         &.-offset {
-            --_button-offset-distance: var(--button-offset-distance, -0.15em);
-            --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.075em);
+            --_button-offset-distance: var(
+                --button-offset-distance,
+                calc(-1 * var(--control-spacing-minimal))
+            );
+            --_button-offset-distance-hover: var(
+                --button-offset-distance-hover,
+                calc(-0.5 * var(--control-spacing-minimal))
+            );
 
             --_button-transform: translate(
                 var(--_button-offset-distance),
@@ -188,7 +194,7 @@
          */
 
         &:has(svg) {
-            gap: 0.25em;
+            gap: var(--control-spacing-tiny, 0.25em);
         }
 
         /*
@@ -206,12 +212,12 @@
 
             &:after {
                 content: "";
-                inline-size: max(var(--button-height-base), 100%);
-                block-size: max(var(--button-height-base), 100%);
+                inline-size: max(var(--control-height-base), 100%);
+                block-size: max(var(--control-height-base), 100%);
                 aspect-ratio: 1;
                 border-radius: 100%;
-                inset-inline-start: calc(-0.5 * (var(--button-height-base) - 100%));
-                inset-block-start: calc(-0.5 * (var(--button-height-base) - 100%));
+                inset-inline-start: calc(-0.5 * (var(--control-height-base) - 100%));
+                inset-block-start: calc(-0.5 * (var(--control-height-base) - 100%));
                 position: absolute;
                 z-index: -1;
                 pointer-events: all;
@@ -235,8 +241,8 @@
         color: var(--_input-color);
         background-color: var(--_input-background);
         border: var(--_input-border);
-        min-block-size: var(--button-height-base);
-        padding-inline-end: 0.5em;
+        min-block-size: var(--control-height-base);
+        padding-inline-end: var(--contol-spacing-near, 0.5em);
         padding-inline-start: 0;
         border-radius: var(--_input-border-radius);
     }
@@ -246,10 +252,10 @@
         background-color: var(--_button-background);
         color: var(--_button-color);
         padding-inline: var(--_button-padding-inline);
-        margin-inline-end: 0.5em;
+        margin-inline-end: var(--contol-spacing-near, 0.5em);
         cursor: pointer;
         box-shadow: none;
-        min-block-size: calc(var(--button-height-base) - var(--border-width-thin));
+        min-block-size: calc(var(--control-height-base) - var(--border-width-thin));
         border: none;
         border-inline-end: var(--border-width-thin) solid var(--color-border-base);
         transform: none;

package/src/styles/components/card.css

@@ -66,6 +66,7 @@
             text-decoration: none;
             font: inherit;
 
+            &:focus-visible,
             &:focus-within:focus-visible,
             &:hover {
                 outline: none;

package/src/styles/components/dialogs.css

@@ -2,7 +2,7 @@
     :where(.nc-dialog) {
         --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
         --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
-        --_dialog-close-size: var(--dialog-close-size, var(--button-height-base));
+        --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
         --_dialog-transition-duration: var(
             --dialog-transition-duration,
             var(--transition-duration-base)
@@ -28,7 +28,7 @@
         padding: 0;
         border-radius: var(--_dialog-radius);
         overflow: clip;
-        overflow-clip-margin: 1em;
+        overflow-clip-margin: var(--control-spacing-far, 1em);
         pointer-events: all;
 
         @media (min-width: 36rem) {
@@ -63,7 +63,7 @@
             block-size: max-content;
             max-block-size: var(--_dialog-max-block-size);
             overflow: clip;
-            overflow-clip-margin: 1em;
+            overflow-clip-margin: var(--control-spacing-far, 1em);
 
             & > *:first-child {
                 border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;

package/src/styles/components/forms.css

@@ -11,7 +11,7 @@
     }
 
     :where(.nc-form-hint) {
-        margin-block: 0.75em;
+        margin-block: var(--control-spacing-base, 0.75em);
         font-size: var(--font-size-large);
         color: var(--color-text-muted);
     }
@@ -30,7 +30,7 @@
         inline-size: 100%;
 
         & + * {
-            margin-block-start: var(--nc-legend-spacing, 1em);
+            margin-block-start: var(--nc-legend-spacing, var(--control-spacing-far, 1em));
         }
     }
 
@@ -41,7 +41,7 @@
                 > :is(legend:not([class]), .nc-legend)
                 + .nc-hint
         ) {
-        --nc-legend-spacing: .2em;
-        margin-block-end: 0.75em;
+        --nc-legend-spacing: var(--control-spacing-tiny, 0.25em);
+        margin-block: var(--control-spacing-base, 0.75em);
     }
 }

package/src/styles/components/icons.css

@@ -36,7 +36,7 @@
         }
 
         &[data-size="button"] {
-            --icon-size: var(--button-height-base);
+            --icon-size: var(--control-height-base);
         }
 
         &[data-animation="spinning"] {
@@ -44,7 +44,7 @@
         }
     }
 
-    :where(button, .nc-button)>.nc-icon {
+    :where(button, .nc-button) > .nc-icon {
         --icon-size: 2ex;
     }
 

package/src/styles/components/inputs/base.css

@@ -61,8 +61,8 @@
         );
         --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
 
-        --_input-padding-block: var(--input-padding-block, 0.125lh);
-        --_input-padding-inline: var(--input-padding-inline, 1ch);
+        --_input-padding-block: var(--input-padding-block, var(--control-spacing-tiny, 0.25em));
+        --_input-padding-inline: var(--input-padding-inline, var(--control-spacing-base, 0.75em));
         --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
     }
 
@@ -96,7 +96,7 @@
         background-color: var(--_input-background);
         border: var(--_input-border);
         border-radius: var(--_input-border-radius);
-        block-size: var(--button-height-base);
+        block-size: var(--control-height-base);
         padding-inline: var(--_input-padding-inline);
         box-shadow: var(--_input-box-shadow);
         inline-size: var(--input-inline-size, auto);
@@ -226,7 +226,7 @@
     :where(input[type="color"], .nc-input-color) {
         aspect-ratio: 1;
         inline-size: auto;
-        padding: calc(var(--button-height-base) / 12);
+        padding: var(--control-spacing-minimal, 0.125em);
     }
 
     :where(input[type="date"], .nc-input-date) {
@@ -241,8 +241,8 @@
         &::-webkit-slider-thumb,
         &::-moz-range-thumb {
             appearance: none;
-            inline-size: calc(var(--button-height-base) * 0.7);
-            block-size: calc(var(--button-height-base) * 0.7);
+            inline-size: calc(var(--control-height-base) * 0.625);
+            block-size: calc(var(--control-height-base) * 0.625);
             border-radius: var(--_input-border-radius);
             border: var(--_input-border);
             border-color: var(--color-text-base);

package/src/styles/components/inputs/fields.css

@@ -1,7 +1,7 @@
 @layer components.input-fields {
     :where(.nc-input-field) {
         display: grid;
-        gap: 0.35em;
+        gap: var(--control-spacing-near, 0.5em);
         grid-template-columns: minmax(0, 1fr);
         inline-size: 100%;
         min-inline-size: var(--input-field-min-inline-size);
@@ -14,7 +14,7 @@
         }
 
         & > .nc-cluster {
-            gap: 0.5em;
+            gap: var(--control-spacing-base, 0.75em);
         }
     }
 
@@ -33,7 +33,7 @@
             justify-content: center;
             background-color: var(--color-base);
             color: var(--color-surface-subtle);
-            margin-inline-end: 0.5em;
+            margin-inline-end: var(--control-spacing-base, 0.75em);
             inline-size: 1em;
             block-size: 1em;
             flex-shrink: 0;
@@ -50,7 +50,7 @@
 
         & > [data-label] {
             grid-area: label;
-            padding-inline-start: 0.5em;
+            padding-inline-start: var(--control-spacing-base, 0.75em);
         }
 
         & .nc-input-label {
@@ -70,7 +70,7 @@
         gap: 0;
 
         > *:not(:first-child) {
-            margin-block-start: 0.75em;
+            margin-block-start: var(--control-spacing-far, 0.75em);
         }
     }
 }

package/src/styles/components/inputs/segmented.css

@@ -15,7 +15,7 @@
 
         container: segmented-control / inline-size;
 
-        --nc-legend-spacing: 0.35em;
+        --nc-legend-spacing: var(--control-spacing-near, 0.5em);
     }
 
     :where(.nc-segmented-control) {
@@ -43,7 +43,7 @@
             display: flex;
             padding-inline: var(--_input-padding-inline);
             padding-block: var(--_input-padding-block);
-            min-block-size: var(--segmented-control-min-height, var(--button-height-base));
+            min-block-size: var(--segmented-control-min-height, var(--control-height-base));
             color: var(--_input-color);
             border: var(--_input-border);
             align-items: center;

package/src/styles/components/inputs/tag-select.css

@@ -9,10 +9,11 @@
             var(--color-brand-primary-base)
         );
         --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-        --nc-legend-spacing: 0.35em;
+
+        --nc-legend-spacing: var(--control-spacing-near, 0.5em);
 
         &:focus-within:has(:focus-visible) {
-            outline-offset: 0.5em;
+            outline-offset: var(--controls-spacing-near, 0.5em);
             outline: var(--_input-outline);
             border-radius: var(--_tag-select-border-radius);
         }

package/src/styles/components/lists.css

@@ -11,7 +11,7 @@
         inline-size: 100%;
 
         &:not(:last-child) {
-            margin-block-end: 0.5em;
+            margin-block-end: var(--control-spacing-base, 0.75em);
         }
     }
 
@@ -22,7 +22,7 @@
             &:not(:last-child):after {
                 content: "";
                 border-right: var(--border-width-medium) solid var(--color-border-muted);
-                margin: 0 0.5em;
+                margin: 0 var(--control-spacing-base, 0.75em);
                 transform: calc(var(--border-width-medium) / 2);
             }
         }

package/src/styles/components/notifications.css

@@ -62,7 +62,7 @@
     }
 
     :where(.nc-notification) {
-        padding: 0.5em 1em;
+        padding: var(--control-spacing-near, 0.5em) var(--control-spacing-base, 0.75em);
         background: var(--color-surface-base);
         border: var(--border-width-thin) solid var(--_notification-border-color);
         display: flex;
@@ -99,7 +99,7 @@
         justify-content: space-between;
         align-items: flex-end;
         inline-size: 100%;
-        margin-block-start: 0.25em;
+        margin-block-start: var(--control-spacing-tiny, 0.25em);
     }
 
     :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {

package/src/styles/config/extras.css

@@ -1,12 +1,9 @@
 @layer config {
     :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;
     }
 }

package/src/styles/utils/base.css

@@ -15,7 +15,7 @@
         color: var(--color-text-base);
 
         &:not(:last-of-type) {
-            padding-block-end: 0.5lh;
+            padding-block-end: var(--control-spacing-base, 0.75em);
             border-bottom: var(--border-width-thin) solid var(--color-border-muted);
         }
     }
@@ -28,7 +28,7 @@
         align-items: flex-start;
         overflow-wrap: anywhere;
         container: description-list / inline-size;
-        row-gap: 0.5lh;
+        row-gap: var(--control-spacing-base, 0.75em);
     }
 
     :where(dd, dt) {
@@ -44,7 +44,7 @@
             min-block-size: 100%;
 
             &:not(:last-of-type) {
-                padding-block-end: 0.5lh;
+                padding-block-end: var(--control-spacing-base, 0.75em);
                 border-bottom: var(--border-width-thin) solid var(--color-border-muted);
             }
         }
@@ -78,12 +78,12 @@
         display: block;
         color: var(--color-surface-subtle);
         background-color: var(--color-text-base);
-        padding: 0.35em 0.5em;
+        padding: var(--control-spacing-nearest, 0.375em) var(--control-spacing-base, 0.75em);
     }
 
     :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);
@@ -112,7 +112,7 @@
     .note,
     blockquote {
         padding: 0;
-        padding-inline-start: 1em;
+        padding-inline-start: var(--control-spacing-far, 1em);
         inline-size: 100%;
         color: var(--color-text-base);
         position: relative;
@@ -148,7 +148,7 @@
 
         & cite:before {
             content: "—";
-            margin-inline-end: 0.5em;
+            margin-inline-end: var(--control-spacing-near, 0.5em);
         }
     }
 
@@ -209,7 +209,7 @@
         color: inherit;
         font-family: var(--font-family-link);
         text-decoration: underline;
-        text-underline-offset: 0.35em;
+        text-underline-offset: var(--control-spacing-nearest, 0.375em);
         text-decoration-thickness: from-font;
         font-weight: var(--font-weight-default);
         text-decoration-color: currentColor;
@@ -254,7 +254,7 @@
     }
 
     :where(del, ins, mark, code, kbd, var) {
-        padding-inline: 0.25em;
+        padding-inline: var(--control-spacing-tiny, 0.25em);
         border-radius: var(--border-radius-small);
         line-height: inherit;
         box-decoration-break: clone;
@@ -265,7 +265,7 @@
         font-family: var(--font-family-mono);
         letter-spacing: 0;
         font-weight: var(--font-weight-default);
-        padding-block: 0.2em;
+        padding-block: var(--control-spacing-minimal, 0.125em);
         max-inline-size: fit-content;
         hyphens: none;
         tab-size: 4;
@@ -292,7 +292,7 @@
     }
 
     :where(pre) {
-        padding: 1em;
+        padding: var(--control-spacing-far, 1em);
         inline-size: 100%;
         overflow-x: auto;
         color: var(--color-text-base);
@@ -336,7 +336,7 @@
     }
 
     :where(td, th) {
-        padding: 0.5em;
+        padding: var(--control-spacing-near, 0.5em);
         line-height: var(--line-height-small);
         white-space: nowrap;
         font-variant-numeric: tabular-nums;
@@ -411,15 +411,15 @@
     }
 
     :where(ul, ol) {
-        padding-inline-start: 1em;
+        padding-inline-start: var(--control-spacing-farthest, 1.5em);
     }
 
     :where(li + li) {
-        margin-block-start: 0.5em;
+        margin-block-start: var(--control-spacing-near, 0.5em);
     }
 
     :where(li > :is(ul, ol)) {
-        margin-block-start: 0.5em;
+        margin-block-start: var(--control-spacing-near, 0.5em);
     }
 
     @supports (font-variant-position: sub) {
@@ -465,7 +465,7 @@
     }
 
     :where(.quoted p:first-of-type::before) {
-        margin-inline-start: -0.5em;
+        margin-inline-start: calc(-1 * var(--control-spacing-near, 0.5em));
     }
     :where(.quoted p) {
         hanging-punctuation: first last;

package/src/styles/utils/reset.css

@@ -28,7 +28,7 @@
 
     :where(:not(:active):focus-visible) {
         outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-        outline-offset: 0.5em;
+        outline-offset: var(--control-spacing-near, 0.5em);
     }
 
     :where(:focus:not(:focus-visible)) {

package/src/styles/utils/theme.css

@@ -2,7 +2,7 @@
     * {
         --text: var(--color-text-muted);
         --color: var(--color-text-muted);
-        --surface: transparent;
+        --surface: var(--color-surface-base);
         --border: var(--color-border-muted);
 
         --text-hover: var(--color-text-on-emphasis);
@@ -38,7 +38,7 @@
     .-neutral {
         --text: var(--color-text-muted);
         --color: var(--color-text-muted);
-        --surface: transparent;
+        --surface: var(--color-surface-base);
         --border: var(--color-border-muted);
 
         --text-hover: var(--color-text-on-emphasis);