@nordcode/ui 1.0.12 → 1.1.0

package/src/styles/config/extras.css

@@ -8,11 +8,5 @@
 
         --input-height-base: 2.5rem;
         --input-height-small: 2rem;
-
-        --triangle-down-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%23fff4f5'/%3E%3C/svg%3E");
-        --triangle-up-url-dark: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%23fff4f5'/%3E%3C/svg%3E%0A");
-
-        --triangle-down-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 84L12.7609 19.5L87.2391 19.5L50 84Z' fill='%231a0004'/%3E%3C/svg%3E");
-        --triangle-up-url-light: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 16L87.2391 80.5H12.7609L50 16Z' fill='%231a0004'/%3E%3C/svg%3E%0A");
     }
 }

package/src/styles/theme/colors.css

@@ -11,7 +11,7 @@
         color-scheme: dark;
     }
 
-    :where(*) {
+    :where(:root) {
         --l-brand-primary: light-dark(var(--l-brand-primary-light), var(--l-brand-primary-dark));
 
         --color-brand-primary-emphasis: light-dark(var(--color-brand-primary-emphasis-light),

package/src/styles/utils/base.css

@@ -1,4 +1,10 @@
 @layer base {
+    :where(:root) {
+        accent-color: var(--color-brand-primary-base);
+        caret-color: var(--color-brand-primary-base);
+        scrollbar-color: var(--color-text-subtle) transparent;
+    }
+
     :where(dt) {
         font-weight: var(--font-weight-active);
         color: var(--color-text-base);
@@ -69,9 +75,6 @@
 
     :where(figcaption) {
         display: block;
-        font-family: var(--font-family-sans);
-        font-weight: var(--font-weight-default);
-        line-height: var(--line-height-base);
         color: var(--color-surface-subtle);
         background-color: var(--color-text-base);
         padding: 0.3lh 1ch;
@@ -79,33 +82,26 @@
 
     :where(details) {
         --p-x-details: 2ch;
-        --p-y-details: 0.75lh;
+        --p-y-details: 0.8lh;
 
-        inline-size: 100%;
-        background-color: var(--color-surface-subtle);
+        background-color: var(--color-surface-muted);
         border-radius: var(--border-radius-medium);
         border: var(--border-width-thin) solid var(--color-border-base);
-
-        &>* {
-            padding-inline: var(--p-x-details);
-        }
-
-        &>*:last-child {
-            padding-block-end: var(--p-y-details);
-        }
-
-        &>summary::-webkit-details-marker {
-            display: none;
-        }
+        padding: var(--p-y-details) var(--p-x-details);
 
         &>summary {
-            list-style: none;
-            cursor: pointer;
             color: var(--color-text-base);
-            inline-size: 100%;
-            font-weight: var(--font-weight-strong);
-            padding-inline: var(--p-x-details);
-            padding-block: var(--p-y-details);
+            background: var(--color-surface-subtle);
+            border-radius: var(--border-radius-medium);
+            font-weight: var(--font-weight-heading);
+            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));
+        }
+
+        &[open]>summary {
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
+            margin-block-end: var(--p-y-details);
         }
     }
 
@@ -157,8 +153,9 @@
 
     :where(hr) {
         inline-size: 100%;
-        block-size: 0;
-        border-top: var(--border-width-medium) solid var(--color-border-base);
+        block-size: var(--border-width-medium);
+        background: var(--color-border-base);
+        border-block-start: 0;
     }
 
     :where(h1, h2, h3, h4, h5, h6) {
@@ -236,6 +233,10 @@
         font-weight: var(--font-weight-default);
     }
 
+    :where(abbr) {
+        text-decoration-color: var(--color-brand-primary-base);
+    }
+
     :where([aria-disabled="true"], .disabled, :disabled) {
         color: inherit;
         opacity: 1;
@@ -402,10 +403,10 @@
     }
 
     :where(li + li) {
-        margin-top: 0.5lh;
+        margin-block-start: 0.5lh;
     }
 
     :where(li > :is(ul, ol)) {
-        margin-top: 0.5lh;
+        margin-block-start: 0.3lh;
     }
 }

package/src/styles/utils/layouts.css

@@ -55,7 +55,7 @@
 
     :where(.nc-flow) {
         >*+* {
-            margin-block-start: var(--flow-gap, 0.6lh);
+            margin-block-start: var(--flow-gap, 0.8lh);
         }
 
         >* {
@@ -67,17 +67,12 @@
             --flow-gap: 1.3lh;
         }
 
-        >*:is(h1, h2, h3, h4, h5, h6)+p {
-            --flow-gap: 0.5lh;
-        }
-
-        >p+p {
-            --flow-gap: 0.8lh;
+        >*:is(h1, h2, h3, h4, h5, h6)+ :not([class]) {
+            --flow-gap: 0.3lh;
         }
 
         >figure {
             margin-inline: 0;
-            margin-block: 1lh;
         }
 
         .breakAfter {

package/src/styles/utils/reset.css

@@ -1,13 +1,8 @@
 @layer reset {
-
     *,
     :after,
     :before {
         box-sizing: border-box;
-        accent-color: var(--color-brand-primary-base);
-        font-kerning: normal;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
     }
 
     :where(:not(dialog)) {
@@ -21,11 +16,17 @@
         background-repeat: no-repeat;
     }
 
-    :where(:focus-visible) {
-        transition: outline-offset var(--transition-duration-short) var(--ease-2);
+    @media (prefers-reduced-motion: no-preference) {
+        :where(:focus-visible) {
+            transition: outline-offset var(--transition-duration-short) var(--ease-2);
+        }
+
+        :where(:not(:active):focus-visible) {
+            transition-duration: var(--transition-duration-base);
+        }
     }
 
-    :where(:focus-visible, :focus) {
+    :where(:not(:active):focus-visible) {
         outline: var(--border-width-medium) solid var(--color-brand-primary-base);
         outline-offset: 1ch;
     }
@@ -34,26 +35,27 @@
         outline: none;
     }
 
-    :where(html) {
+    :where(:root) {
         -moz-text-size-adjust: none;
         -webkit-text-size-adjust: none;
         text-size-adjust: none;
         block-size: 100%;
-    }
-
-    :where(body) {
+        color: var(--color-text-base);
+        background-color: var(--color-surface-muted);
         font-family: var(--font-family-default);
+        line-height: var(--line-height-base);
         font-weight: var(--font-weight-default);
         font-size-adjust: from-font;
-        line-height: var(--line-height-base);
-        color: var(--color-text-base);
-        background-color: var(--color-surface-muted);
-        min-block-size: 100vh;
+
+        interpolate-size: allow-keywords;
+
+        font-kerning: normal;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
     }
 
-    /* Remove default margin in favour of better control in authored CSS */
-    :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
-        margin: 0;
+    :where(body) {
+        min-block-size: 100vh;
     }
 
     /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
@@ -82,21 +84,44 @@
     }
 
     :where(figure) {
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        place-content: center;
+        grid-template-rows: 1fr auto;
         gap: 0;
     }
 
-    :where(a[href],
-        area,
-        button,
-        input,
-        label[for],
-        select,
-        summary,
-        textarea,
-        [tabindex]:not([tabindex*="-"])) {
+    :where(
+            a[href],
+            area,
+            button,
+            input:not(
+                    [type="text"],
+                    [type="email"],
+                    [type="number"],
+                    [type="password"],
+                    [type=""],
+                    [type="tel"],
+                    [type="url"]
+                ),
+            label[for],
+            select,
+            summary,
+            [tabindex]:not([tabindex*="-"], pre)
+        ) {
         cursor: pointer;
+    }
+
+    :where(
+            a[href],
+            area,
+            button,
+            input,
+            label[for],
+            select,
+            summary,
+            textarea,
+            [tabindex]:not([tabindex*="-"])
+        ) {
         touch-action: manipulation;
         -webkit-tap-highlight-color: transparent;
     }
@@ -108,19 +133,10 @@
         letter-spacing: inherit;
     }
 
-    :where(label:not(class) + input, label:not(class) + select, label:not(class) + textarea) {
-        display: block;
-    }
-
-    :where(p, summary) {
-        max-inline-size: var(--measure-base);
-        font-size: inherit;
-        line-height: var(--line-height-base);
-        margin: 0;
-    }
-
     :where(p) {
+        text-wrap: balance;
         text-wrap: pretty;
+        max-inline-size: var(--measure-base);
     }
 
     :where(html):has(dialog:modal) {