@nordcode/ui 1.1.7 → 1.3.0

package/src/styles/components/lists.css

@@ -11,7 +11,7 @@
         inline-size: 100%;
 
         &:not(:last-child) {
-            margin-block-end: 1ch;
+            margin-block-end: 0.5em;
         }
     }
 
@@ -20,9 +20,9 @@
             inline-size: auto;
 
             &:not(:last-child):after {
-                content: '';
+                content: "";
                 border-right: var(--border-width-medium) solid var(--color-border-muted);
-                margin: 0 1ch;
+                margin: 0 0.5em;
                 transform: calc(var(--border-width-medium) / 2);
             }
         }

package/src/styles/components/notifications.css

@@ -3,9 +3,10 @@
         --_notification-max-width: var(--notifications-max-width, 20rem);
         --_notification-gap: var(--notification-gap, var(--spacing-base));
         --_notification-border-color: var(--notification-border-color, var(--color-border-base));
-        --_notification-center-background: var(--notification-center-background,
-                color-mix(in oklch, var(---color-surface-subtle), transparent 95%);
-            );
+        --_notification-center-background: var(
+            --notification-center-background,
+            color-mix(in oklch, var(---color-surface-subtle), transparent 95%)
+        );
     }
 
     :where(.nc-notification-center, .nc-notification-output) {
@@ -61,7 +62,7 @@
     }
 
     :where(.nc-notification) {
-        padding: 0.5lh 2ch;
+        padding: 0.5em 1em;
         background: var(--color-surface-base);
         border: var(--border-width-thin) solid var(--_notification-border-color);
         display: flex;
@@ -98,7 +99,7 @@
         justify-content: space-between;
         align-items: flex-end;
         inline-size: 100%;
-        margin-block-start: 0.5ch;
+        margin-block-start: 0.25em;
     }
 
     :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
@@ -107,7 +108,8 @@
     }
 
     :where(.nc-notification.-closing) {
-        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
+        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
+            forwards;
     }
 
     @keyframes pop-in {

package/src/styles/config/config.css

@@ -17,16 +17,17 @@
         --line-height-small: 1.1;
 
         --tracking-base: normal;
-        --tracking-tight: -0.04ch;
-        --tracking-wide: 0.06ch;
+        --tracking-tight: -0.02em;
+        --tracking-wide: 0.03em;
 
-        --measure-large: 88ch;
-        --measure-base: 72ch;
-        --measure-small: 44ch;
+        --measure-large: 44em;
+        --measure-base: 36em;
+        --measure-small: 22em;
 
         --font-size-smallest: max(0.75rem, 12px);
         --font-size-small: max(0.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;

package/src/styles/utils/base.css

@@ -26,7 +26,7 @@
         inline-size: 100%;
         max-inline-size: 100%;
         align-items: flex-start;
-        word-break: break-word;
+        overflow-wrap: anywhere;
         container: description-list / inline-size;
         row-gap: 0.5lh;
     }
@@ -39,7 +39,7 @@
     @container description-list (min-width: 30rem) {
         :where(dt) {
             grid-column: 1 / 1;
-            padding-inline-end: 2ch;
+            padding-inline-end: 1em;
             padding-block-end: 0;
             min-block-size: 100%;
 
@@ -78,19 +78,20 @@
         display: block;
         color: var(--color-surface-subtle);
         background-color: var(--color-text-base);
-        padding: 0.25lh 1ch;
+        padding: 0.35em 0.5em;
     }
 
     :where(details) {
-        --p-x-details: 2ch;
-        --p-y-details: 0.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);
+        /* 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);
 
         & > summary {
             color: var(--color-text-base);
@@ -98,8 +99,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));
         }
 
         &[open] > summary {
@@ -112,7 +112,7 @@
     .note,
     blockquote {
         padding: 0;
-        padding-inline-start: 2ch;
+        padding-inline-start: 1em;
         inline-size: 100%;
         color: var(--color-text-base);
         position: relative;
@@ -148,7 +148,7 @@
 
         & cite:before {
             content: "—";
-            margin-inline-end: 0.5ch;
+            margin-inline-end: 0.5em;
         }
     }
 
@@ -209,7 +209,7 @@
         color: inherit;
         font-family: var(--font-family-link);
         text-decoration: underline;
-        text-underline-offset: 0.25lh;
+        text-underline-offset: 0.35em;
         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.5ch;
+        padding-inline: 0.25em;
         border-radius: var(--border-radius-small);
         line-height: inherit;
         box-decoration-break: clone;
@@ -265,14 +265,13 @@
         font-family: var(--font-family-mono);
         letter-spacing: 0;
         font-weight: var(--font-weight-default);
-        padding-block: 0.125lh;
+        padding-block: 0.2em;
         max-inline-size: fit-content;
         hyphens: none;
         tab-size: 4;
         text-align: left;
         word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
+        overflow-wrap: normal;
         font-style: normal;
     }
 
@@ -293,7 +292,7 @@
     }
 
     :where(pre) {
-        padding: 0.5lh 2ch;
+        padding: 1em;
         inline-size: 100%;
         overflow-x: auto;
         color: var(--color-text-base);
@@ -337,7 +336,7 @@
     }
 
     :where(td, th) {
-        padding: 0.4lh 1ch;
+        padding: 0.5em;
         line-height: var(--line-height-small);
         white-space: nowrap;
         font-variant-numeric: tabular-nums;
@@ -412,15 +411,15 @@
     }
 
     :where(ul, ol) {
-        padding-inline-start: 2ch;
+        padding-inline-start: 1em;
     }
 
     :where(li + li) {
-        margin-block-start: 0.5lh;
+        margin-block-start: 0.5em;
     }
 
     :where(li > :is(ul, ol)) {
-        margin-block-start: 0.25lh;
+        margin-block-start: 0.5em;
     }
 
     @supports (font-variant-position: sub) {
@@ -466,7 +465,7 @@
     }
 
     :where(.quoted p:first-of-type::before) {
-        margin-inline-start: -0.87ch;
+        margin-inline-start: -0.5em;
     }
     :where(.quoted p) {
         hanging-punctuation: first last;

package/src/styles/utils/layouts.css

@@ -1,5 +1,4 @@
 @layer utils {
-
     /* Layout classes that handle 80% of the layout*/
     :where(.nc-box) {
         padding: var(--spacing-base);
@@ -43,35 +42,35 @@
         &.-stretched {
             inline-size: 100%;
 
-            &>* {
+            & > * {
                 inline-size: 100%;
             }
         }
 
-        &.-contained>* {
+        &.-contained > * {
             max-inline-size: 100%;
         }
     }
 
     :where(.nc-flow) {
-        >*+* {
+        > * + * {
             margin-block-start: var(--flow-gap, 1lh);
         }
 
-        >* {
-            max-inline-size: var(--flow-base-meassure, 72ch);
+        > * {
+            max-inline-size: var(--flow-base-meassure, 36em);
         }
 
-        >*:is(h1, h2, h3, h4, h5, h6) {
-            max-inline-size: var(--flow-headline-meassure, 32ch);
+        > *:is(h1, h2, h3, h4, h5, h6) {
+            max-inline-size: var(--flow-headline-meassure, 16em);
             --flow-gap: 1.5lh;
         }
 
-        >*:is(h1, h2, h3, h4, h5, h6)+ :not([class]) {
+        > *:is(h1, h2, h3, h4, h5, h6) + :not([class]) {
             --flow-gap: 0.5lh;
         }
 
-        >figure {
+        > figure {
             margin-inline: 0;
         }
 
@@ -126,13 +125,13 @@
         align-items: flex-start;
         gap: var(--with-sidebar-gap, var(--spacing-far));
 
-        &>[data-aside] {
+        & > [data-aside] {
             flex-grow: 1;
             min-width: min-content;
             flex-basis: var(--with-sidebar-target-width, 20rem);
         }
 
-        &>[data-grow] {
+        & > [data-grow] {
             flex-basis: 0;
             flex-grow: 999;
             min-width: var(--with-sidebar-min-size, 50%);
@@ -165,8 +164,10 @@
     */
     :where(.nc-grid) {
         display: grid;
-        grid-template-columns: repeat(var(--grid-placement, auto-fill),
-                minmax(var(--grid-min-item-size, 16rem), 1fr));
+        grid-template-columns: repeat(
+                var(--grid-placement, auto-fill),
+                minmax(var(--grid-min-item-size, 16rem), 1fr)
+            );
         gap: var(--grid-gap, var(--spacing-base));
 
         /* A split 50/50 layout */
@@ -206,7 +207,7 @@
         gap: var(--switcher-gap, var(--spacing-base));
         align-items: var(--switcher-vertical-alignment, flex-start);
 
-        &>* {
+        & > * {
             flex-grow: 1;
             flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
         }
@@ -214,7 +215,7 @@
         /* Max 2 items,
         so anything greater than 2 is ful width */
 
-        &> :nth-child(n + 4) {
+        & > :nth-child(n + 4) {
             flex-basis: 100%;
         }
     }
@@ -227,7 +228,7 @@
         place-items: center;
         grid: [pile] 1fr / [pile] 1fr;
 
-        &>* {
+        & > * {
             grid-area: pile;
         }
     }
@@ -241,11 +242,21 @@
 
         display: grid;
         gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
-        grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count),
-                minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+        grid-template-columns: repeat(
+                var(--_nc-ram-grid-repeat-count),
+                minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr)
+            );
     }
 
-    :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid) {
+    :where(
+            .nc-stack,
+            .nc-cluster,
+            .nc-with-sidebar,
+            .nc-grid,
+            .nc-gallery,
+            .nc-switcher,
+            .nc-ram-grid
+        ) {
         &.-inherit {
             gap: inherit;
         }

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: 1ch;
+        outline-offset: 0.5em;
     }
 
     :where(:focus:not(:focus-visible)) {

package/transform.js

@@ -1,6 +1,6 @@
 import fs from 'node:fs';
 import browserslist from 'browserslist';
-import { browserslistToTargets, bundle, Features } from 'lightningcss';
+import { browserslistToTargets, bundle } from 'lightningcss';
 
 const browserlistTargtsWidelyAvailable = [
     'Chrome > 0 and last 2.5 years',
@@ -15,44 +15,56 @@ const browserlistTargtsWidelyAvailable = [
 
 const targets = browserslistToTargets(browserslist(browserlistTargtsWidelyAvailable));
 
-const config = {
+const { code: colors } = bundle({
+    // ...
     targets,
     drafts: {
         customMedia: true,
     },
-    exclude: Features.LightDark
-};
-
-const { code: colors } = bundle({
-    ...config,
     filename: 'src/styles/theme/colors.css',
 });
 
 fs.writeFileSync('out/colors.css', colors);
 
 const { code } = bundle({
-    ...config,
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
     filename: 'src/styles/bundle.css',
 });
 
 fs.writeFileSync('out/bundle.css', code);
 
 const { code: bundleConfigless } = bundle({
-    ...config,
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
     filename: 'src/styles/bundle_configless.css',
 });
 
 fs.writeFileSync('out/bundle_configless.css', bundleConfigless);
 
 const { code: codeComplete } = bundle({
-    ...config,
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
     filename: 'src/styles/complete.css',
 });
 
 fs.writeFileSync('out/complete.css', codeComplete);
 
 const { code: codeCompleteConfigless } = bundle({
-    ...config,
+    // ...
+    targets,
+    drafts: {
+        customMedia: true,
+    },
     filename: 'src/styles/complete_configless.css',
 });