@nordcode/ui 1.0.11 → 1.1.0

package/out/bundle_configless.css

@@ -26,7 +26,7 @@
     color-scheme: dark;
   }
 
-  :where(*) {
+  :where(:root) {
     --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
     --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
     --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
@@ -86,10 +86,6 @@
 @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)) {
@@ -103,11 +99,17 @@
     border-width: 0;
   }
 
-  :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;
   }
@@ -116,28 +118,25 @@
     outline: none;
   }
 
-  :where(html) {
+  :where(:root) {
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     text-size-adjust: none;
-    inline-size: 100%;
-    text-rendering: optimizeSpeed;
     block-size: 100%;
-    min-block-size: 100vh;
-  }
-
-  :where(body) {
-    font-weight: var(--font-weight-default);
     color: var(--color-text-base);
     background-color: var(--color-surface-muted);
     font-family: var(--font-family-default);
     line-height: var(--line-height-base);
-    min-block-size: 100%;
-    font-style: normal;
+    font-weight: var(--font-weight-default);
+    font-size-adjust: from-font;
+    interpolate-size: allow-keywords;
+    font-kerning: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
   }
 
-  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
-    margin: 0;
+  :where(body) {
+    min-block-size: 100vh;
   }
 
   :where(ul[role="list"], ol[role="list"]) {
@@ -164,13 +163,17 @@
   }
 
   :where(figure) {
-    place-items: center;
+    grid-template-rows: 1fr auto;
+    place-content: center;
     gap: 0;
     display: grid;
   }
 
-  :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;
   }
@@ -187,19 +190,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) {
@@ -209,6 +203,12 @@
 }
 
 @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);
@@ -278,9 +278,6 @@
   }
 
   :where(figcaption) {
-    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: .3lh 1ch;
@@ -289,33 +286,26 @@
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .75lh;
-    background-color: var(--color-surface-subtle);
+    --p-y-details: .8lh;
+    background-color: var(--color-surface-muted);
     border-radius: var(--border-radius-medium);
     border: var(--border-width-thin) solid var(--color-border-base);
-    inline-size: 100%;
-  }
-
-  :where(details) > * {
-    padding-inline: var(--p-x-details);
-  }
-
-  :where(details) > :last-child {
-    padding-block-end: var(--p-y-details);
-  }
-
-  :where(details) > summary::-webkit-details-marker {
-    display: none;
+    padding: var(--p-y-details) var(--p-x-details);
   }
 
   :where(details) > summary {
-    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);
-    list-style: none;
+    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));
+  }
+
+  :where(details)[open] > summary {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    margin-block-end: var(--p-y-details);
   }
 
   .note, blockquote {
@@ -362,9 +352,10 @@
   }
 
   :where(hr) {
-    border-top: var(--border-width-medium) solid var(--color-border-base);
-    block-size: 0;
     inline-size: 100%;
+    block-size: var(--border-width-medium);
+    background: var(--color-border-base);
+    border-block-start: 0;
   }
 
   :where(h1, h2, h3, h4, h5, h6) {
@@ -446,6 +437,11 @@
     font-weight: var(--font-weight-default);
   }
 
+  :where(abbr) {
+    -webkit-text-decoration-color: var(--color-brand-primary-base);
+    text-decoration-color: var(--color-brand-primary-base);
+  }
+
   :where([aria-disabled="true"], .disabled, :disabled) {
     color: inherit;
     opacity: 1;
@@ -610,8 +606,12 @@
     padding-inline-start: 2ch;
   }
 
-  :where(li + li), :where(li > :is(ul, ol)) {
-    margin-top: .5lh;
+  :where(li + li) {
+    margin-block-start: .5lh;
+  }
+
+  :where(li > :is(ul, ol)) {
+    margin-block-start: .3lh;
   }
 }
 
@@ -669,7 +669,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .6lh);
+    margin-block-start: var(--flow-gap, .8lh);
   }
 
   :where(.nc-flow) > * {
@@ -681,16 +681,11 @@
     --flow-gap: 1.3lh;
   }
 
-  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + p {
-    --flow-gap: .5lh;
-  }
-
-  :where(.nc-flow) > p + p {
-    --flow-gap: .8lh;
+  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
+    --flow-gap: .3lh;
   }
 
   :where(.nc-flow) > figure {
-    margin-block: 1lh;
     margin-inline: 0;
   }
 

package/out/colors.css

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