@nordcode/ui 1.3.2 → 2.0.1

package/out/complete_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) {
@@ -993,7 +993,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);
     --color-hover: var(--color-text-on-emphasis);
@@ -1026,7 +1026,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);
     --color-hover: var(--color-text-on-emphasis);
@@ -1221,7 +1221,7 @@
   :where(.nc-alert) {
     background: var(--surface);
     color: var(--text);
-    gap: .75em;
+    gap: var(--control-spacing-base, .75em);
   }
 
   :where(.nc-alert) > .nc-icon {
@@ -1247,9 +1247,8 @@
     border: var(--border-width-thin) solid var(--text, var(--color-text-base));
     border-radius: var(--border-radius-small);
     background: var(--surface, transparent);
+    padding: var(--control-spacing-minimal, .125em) var(--control-spacing-near, .5em);
     inline-size: max-content;
-    padding: .5em;
-    line-height: 1;
   }
 }
 
@@ -1270,10 +1269,10 @@
   }
 
   :where(.nc-breadcrumb-item):not(:last-child):after {
+    padding-inline: var(--control-spacing-near, .5em);
     color: inherit;
     content: "›";
     font-size: inherit;
-    padding-inline: .5em;
   }
 
   :where(.nc-breadcrumb-link) {
@@ -1309,13 +1308,13 @@
     --_button-border-color-hover: var(--button-border-color-hover, var(--border));
     --_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, .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);
     font-family: var(--font-family-button);
     letter-spacing: var(--tracking-tight);
     font-weight: var(--font-weight-default);
@@ -1406,8 +1405,8 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
-    --_button-padding-inline: .5em;
-    min-block-size: var(--button-height-small);
+    --_button-padding-inline: var(--control-spacing-near, .5em);
+    min-block-size: var(--control-height-small);
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-round {
@@ -1415,8 +1414,8 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-offset {
-    --_button-offset-distance: var(--button-offset-distance, -.15em);
-    --_button-offset-distance-hover: var(--button-offset-distance-hover, -.075em);
+    --_button-offset-distance: var(--button-offset-distance, calc(-1 * var(--control-spacing-minimal)));
+    --_button-offset-distance-hover: var(--button-offset-distance-hover, calc(-.5 * var(--control-spacing-minimal)));
     --_button-transform: translate(var(--_button-offset-distance), var(--_button-offset-distance));
     --_button-hover-transform: translate(var(--_button-offset-distance-hover), var(--_button-offset-distance-hover));
     --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color), calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
@@ -1431,7 +1430,7 @@
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):has(svg) {
-    gap: .25em;
+    gap: var(--control-spacing-tiny, .25em);
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon {
@@ -1443,15 +1442,15 @@
 
   :is(:where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon):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;
     z-index: -1;
     pointer-events: all;
     border-radius: 100%;
     position: absolute;
-    inset-block-start: calc(-.5 * (var(--button-height-base)  - 100%));
-    inset-inline-start: calc(-.5 * (var(--button-height-base)  - 100%));
+    inset-block-start: calc(-.5 * (var(--control-height-base)  - 100%));
+    inset-inline-start: calc(-.5 * (var(--control-height-base)  - 100%));
   }
 
   :is(:where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button)[aria-label], :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-icon) > svg {
@@ -1470,9 +1469,10 @@
     color: var(--_input-color);
     background-color: var(--_input-background);
     border: var(--_input-border);
-    min-block-size: var(--button-height-base);
+    min-block-size: var(--control-height-base);
     border-radius: var(--_input-border-radius);
-    padding-inline: 0 .5em;
+    padding-inline-start: 0;
+    padding-inline-end: var(--contol-spacing-near, .5em);
   }
 
   :where(input[type="file"]:not([class]))::-webkit-file-upload-button {
@@ -1481,12 +1481,12 @@
     padding-inline: var(--_button-padding-inline);
     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);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
-    margin-inline-end: .5em;
+    margin-inline-end: var(--contol-spacing-near, .5em);
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
@@ -1498,12 +1498,12 @@
     padding-inline: var(--_button-padding-inline);
     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);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
-    margin-inline-end: .5em;
+    margin-inline-end: var(--contol-spacing-near, .5em);
     inset-block-start: 0;
     inset-inline-start: 0;
     transform: none;
@@ -1590,7 +1590,7 @@
     text-decoration: none;
   }
 
-  :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
+  :where(.nc-clickable-card) a[data-link="main"]:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
     outline: none;
   }
 
@@ -1609,7 +1609,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));
     --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
     --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
@@ -1623,7 +1623,7 @@
     max-inline-size: var(--_dialog-max-inline-size);
     background: var(--color-surface-base);
     border-radius: var(--_dialog-radius);
-    overflow-clip-margin: 1em;
+    overflow-clip-margin: var(--control-spacing-far, 1em);
     pointer-events: all;
     max-block-size: 100dvh;
     margin: auto 0;
@@ -1663,7 +1663,7 @@
     block-size: max-content;
     inline-size: 100%;
     max-block-size: var(--_dialog-max-block-size);
-    overflow-clip-margin: 1em;
+    overflow-clip-margin: var(--control-spacing-far, 1em);
     grid-template: "header header"
                    "content content" 1fr
                    "footer footer"
@@ -1758,9 +1758,9 @@
   }
 
   :where(.nc-form-hint) {
+    margin-block: var(--control-spacing-base, .75em);
     font-size: var(--font-size-large);
     color: var(--color-text-muted);
-    margin-block: .75em;
   }
 
   :where(fieldset:not([class]), .nc-fieldset) {
@@ -1778,12 +1778,12 @@
   }
 
   :where(legend:not([class]), .nc-legend) + * {
-    margin-block-start: var(--nc-legend-spacing, 1em);
+    margin-block-start: var(--nc-legend-spacing, var(--control-spacing-far, 1em));
   }
 
   :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
-    --nc-legend-spacing: .2em;
-    margin-block-end: .75em;
+    --nc-legend-spacing: var(--control-spacing-tiny, .25em);
+    margin-block: var(--control-spacing-base, .75em);
   }
 }
 
@@ -1872,7 +1872,7 @@
   }
 
   :where(.nc-icon)[data-size="button"] {
-    --icon-size: var(--button-height-base);
+    --icon-size: var(--control-height-base);
   }
 
   :where(.nc-icon)[data-animation="spinning"] {
@@ -1915,8 +1915,8 @@
     --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
     --_input-outline: var(--input-outline, var(--border-width-medium) solid var(--color-brand-primary-base));
     --_input-disabled-filter: var(--input-disabled-filter, contrast(.72) opacity(.72));
-    --_input-padding-block: var(--input-padding-block, .125lh);
-    --_input-padding-inline: var(--input-padding-inline, 1ch);
+    --_input-padding-block: var(--input-padding-block, var(--control-spacing-tiny, .25em));
+    --_input-padding-inline: var(--input-padding-inline, var(--control-spacing-base, .75em));
     --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
   }
 
@@ -1929,7 +1929,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);
@@ -2051,7 +2051,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, .125em);
   }
 
   :where(input[type="date"], .nc-input-date) {
@@ -2064,8 +2064,8 @@
 
   :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb {
     appearance: none;
-    inline-size: calc(var(--button-height-base) * .7);
-    block-size: calc(var(--button-height-base) * .7);
+    inline-size: calc(var(--control-height-base) * .625);
+    block-size: calc(var(--control-height-base) * .625);
     border-radius: var(--_input-border-radius);
     border: var(--_input-border);
     border-color: var(--color-text-base);
@@ -2081,8 +2081,8 @@
 
   :where(input[type="range"], .nc-input-range)::-moz-range-thumb {
     appearance: none;
-    inline-size: calc(var(--button-height-base) * .7);
-    block-size: calc(var(--button-height-base) * .7);
+    inline-size: calc(var(--control-height-base) * .625);
+    block-size: calc(var(--control-height-base) * .625);
     border-radius: var(--_input-border-radius);
     border: var(--_input-border);
     border-color: var(--color-text-base);
@@ -2100,11 +2100,11 @@
     --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
     --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
     --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-    --nc-legend-spacing: .35em;
+    --nc-legend-spacing: var(--control-spacing-near, .5em);
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
-    outline-offset: .5em;
+    outline-offset: var(--controls-spacing-near, .5em);
     outline: var(--_input-outline);
     border-radius: var(--_tag-select-border-radius);
   }
@@ -2136,12 +2136,12 @@
 
 @layer components.input-fields {
   :where(.nc-input-field) {
+    gap: var(--control-spacing-near, .5em);
     inline-size: 100%;
     min-inline-size: var(--input-field-min-inline-size);
     max-inline-size: var(--input-field-max-inline-size);
     grid-template-columns: minmax(0, 1fr);
     place-items: start;
-    gap: .35em;
     display: grid;
   }
 
@@ -2150,7 +2150,7 @@
   }
 
   :where(.nc-input-field) > .nc-cluster {
-    gap: .5em;
+    gap: var(--control-spacing-base, .75em);
   }
 
   :where(.nc-input-error) {
@@ -2171,7 +2171,7 @@
     align-items: center;
     block-size: 1em;
     inline-size: 1em;
-    margin-inline-end: .5em;
+    margin-inline-end: var(--control-spacing-base, .75em);
     display: inline-flex;
   }
 
@@ -2185,7 +2185,7 @@
 
   :where(.nc-checkbox-wrapper) > [data-label] {
     grid-area: label;
-    padding-inline-start: .5em;
+    padding-inline-start: var(--control-spacing-base, .75em);
   }
 
   :where(.nc-checkbox-wrapper) .nc-input-label {
@@ -2205,7 +2205,7 @@
   }
 
   :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
-    margin-block-start: .75em;
+    margin-block-start: var(--control-spacing-far, .75em);
   }
 }
 
@@ -2214,7 +2214,7 @@
     --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
     --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
     --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
-    --nc-legend-spacing: .35em;
+    --nc-legend-spacing: var(--control-spacing-near, .5em);
     container: segmented-control / inline-size;
   }
 
@@ -2242,7 +2242,7 @@
   :where(.nc-segmented-control) label {
     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);
     justify-content: center;
@@ -2371,7 +2371,7 @@
   }
 
   :where(.nc-meta-list-item):not(:last-child) {
-    margin-block-end: .5em;
+    margin-block-end: var(--control-spacing-base, .75em);
   }
 
   @container metalist (width >= 20rem) {
@@ -2382,8 +2382,8 @@
     :where(.nc-meta-list-item):not(:last-child):after {
       content: "";
       border-right: var(--border-width-medium) solid var(--color-border-muted);
+      margin: 0 var(--control-spacing-base, .75em);
       transform: calc(var(--border-width-medium) / 2);
-      margin: 0 .5em;
     }
   }
 
@@ -2459,6 +2459,7 @@
   }
 
   :where(.nc-notification) {
+    padding: var(--control-spacing-near, .5em) var(--control-spacing-base, .75em);
     background: var(--color-surface-base);
     border: var(--border-width-thin) solid var(--_notification-border-color);
     border-radius: var(--border-radius-small);
@@ -2468,7 +2469,6 @@
     color: var(--color-text-base);
     pointer-events: all;
     flex-direction: column;
-    padding: .5em 1em;
     display: flex;
   }
 
@@ -2492,10 +2492,10 @@
   }
 
   :where(.nc-notification-footer) {
+    inline-size: 100%;
     justify-content: space-between;
     align-items: flex-end;
-    inline-size: 100%;
-    margin-block-start: .25em;
+    margin-block-start: var(--control-spacing-tiny, .25em);
     display: flex;
   }
 

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "1.3.2",
+  "version": "2.0.1",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/alerts.css

@@ -2,7 +2,7 @@
     :where(.nc-alert) {
         background: var(--surface);
         color: var(--text);
-        gap: 0.75em;
+        gap: var(--control-spacing-base, 0.75em);
     }
 
     :where(.nc-alert) > .nc-icon {

package/src/styles/components/badges.css

@@ -7,8 +7,7 @@
         border: var(--border-width-thin) solid var(--text, var(--color-text-base));
         border-radius: var(--border-radius-small);
         background: var(--surface, transparent);
-        padding: 0.5em;
+        padding: var(--control-spacing-minimal, 0.125em) var(--control-spacing-near, 0.5em);
         inline-size: max-content;
-        line-height: 1;
     }
 }

package/src/styles/components/breadcrumbs.css

@@ -14,7 +14,7 @@
         }
 
         &:not(:last-child):after {
-            padding-inline: 0.5em;
+            padding-inline: var(--control-spacing-near, 0.5em);
             color: inherit;
             content: "›";
             font-size: inherit;