@nordcode/ui 1.1.6 → 1.2.0

package/out/src/styles/utils/reset.css

@@ -0,0 +1,145 @@
+@layer reset {
+    *,
+    :after,
+    :before {
+        box-sizing: border-box;
+    }
+
+    :where(:not(dialog)) {
+        margin: 0;
+    }
+
+    :where(:not(fieldset, progress, meter)) {
+        border-width: 0;
+        border-style: solid;
+        background-origin: border-box;
+        background-repeat: no-repeat;
+    }
+
+    @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(:not(:active):focus-visible) {
+        outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+        outline-offset: 1ch;
+    }
+
+    :where(:focus:not(:focus-visible)) {
+        outline: none;
+    }
+
+    :where(:root) {
+        -moz-text-size-adjust: none;
+        -webkit-text-size-adjust: none;
+        text-size-adjust: none;
+        block-size: 100%;
+        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;
+
+        interpolate-size: allow-keywords;
+
+        font-kerning: normal;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    :where(body) {
+        min-block-size: 100vh;
+    }
+
+    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+    :where(ul[role="list"], ol[role="list"]) {
+        list-style: none;
+    }
+
+    /* Balance text wrapping on headings */
+    :where(h1, h2, h3, h4) {
+        text-wrap: balance;
+    }
+
+    /* A elements that don't have a class get default styles */
+    :where(a:not([class])) {
+        text-decoration-skip-ink: auto;
+        color: currentColor;
+    }
+
+    :where(img, svg, video, canvas, audio, iframe, embed, object) {
+        display: block;
+    }
+
+    :where(img, svg, video) {
+        max-inline-size: 100%;
+        block-size: auto;
+    }
+
+    :where(figure) {
+        display: grid;
+        place-content: center;
+        grid-template-rows: 1fr auto;
+        gap: 0;
+    }
+
+    :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;
+    }
+
+    :where(input, button, textarea, select),
+    :where(input[type="file"])::-webkit-file-upload-button {
+        font: inherit;
+        color: inherit;
+        letter-spacing: inherit;
+    }
+
+    :where(p) {
+        text-wrap: pretty;
+        max-inline-size: var(--measure-base);
+    }
+
+    :where(html):has(dialog:modal) {
+        scrollbar-gutter: stable;
+        overflow: hidden;
+    }
+}

package/out/src/styles/utils/theme.css

@@ -0,0 +1,125 @@
+@layer helpers.theme {
+    * {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+        --border: var(--color-border-muted);
+
+        --text-hover: var(--color-text-on-emphasis);
+        --color-hover: var(--color-text-on-emphasis);
+        --surface-hover: var(--color-surface-emphasis);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-primary {
+        --text: var(--color-brand-primary-emphasis);
+        --color: var(--color-brand-primary-base);
+        --surface: var(--color-brand-primary-surface);
+        --border: var(--color-brand-primary-base);
+
+        --text-hover: var(--color-brand-primary-contrast);
+        --color-hover: var(--color-brand-primary-contrast);
+        --surface-hover: var(--color-brand-primary-base);
+        --border-hover: var(--color-brand-primary-base);
+    }
+
+    .-secondary {
+        --text: var(--color-brand-secondary-emphasis);
+        --color: var(--color-brand-secondary-base);
+        --surface: var(--color-brand-secondary-surface);
+        --border: var(--color-brand-secondary-base);
+
+        --text-hover: var(--color-brand-secondary-contrast);
+        --color-hover: var(--color-brand-secondary-contrast);
+        --surface-hover: var(--color-brand-secondary-base);
+        --border-hover: var(--color-brand-secondary-base);
+    }
+
+    .-neutral {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+        --border: var(--color-border-muted);
+
+        --text-hover: var(--color-text-on-emphasis);
+        --color-hover: var(--color-text-on-emphasis);
+        --surface-hover: var(--color-surface-emphasis);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-muted {
+        --text: var(--color-text-muted);
+        --color: var(--color-text-muted);
+        --surface: transparent;
+
+        --text-hover: var(--color-text-base);
+        --color-hover: var(--color-text-base);
+        --surface-hover: var(--color-surface-subtle);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-emphasis {
+        --text: var(--color-text-on-emphasis);
+        --color: var(--color-text-on-emphasis);
+        --surface: var(--color-surface-emphasis);
+        --border: var(--color-surface-emphasis);
+
+        --text-hover: var(--color-text-base);
+        --color-hover: var(--color-text-base);
+        --surface-hover: var(--color-surface-subtle);
+        --border-hover: var(--color-border-base);
+    }
+
+    .-info {
+        --text: var(--color-status-info-emphasis);
+        --color: var(--color-status-info-base);
+        --surface: var(--color-status-info-surface);
+        --border: var(--color-status-info-base);
+
+        --text-hover: var(--color-status-info-contrast);
+        --color-hover: var(--color-status-info-contrast);
+        --surface-hover: var(--color-status-info-base);
+        --border-hover: var(--color-status-info-base);
+    }
+
+    .-warning {
+        --text: var(--color-status-warning-emphasis);
+        --color: var(--color-status-warning-base);
+        --surface: var(--color-status-warning-surface);
+        --border: var(--color-status-warning-base);
+
+        --text-hover: var(--color-status-warning-contrast);
+        --color-hover: var(--color-status-warning-contrast);
+        --surface-hover: var(--color-status-warning-base);
+        --border-hover: var(--color-status-warning-base);
+    }
+
+    .-danger {
+        --text: var(--color-status-danger-emphasis);
+        --color: var(--color-status-danger-base);
+        --surface: var(--color-status-danger-surface);
+        --border: var(--color-status-danger-base);
+
+        --text-hover: var(--color-status-danger-contrast);
+        --color-hover: var(--color-status-danger-contrast);
+        --surface-hover: var(--color-status-danger-base);
+        --border-hover: var(--color-status-danger-base);
+    }
+
+    .-success {
+        --text: var(--color-status-success-emphasis);
+        --color: var(--color-status-success-base);
+        --surface: var(--color-status-success-surface);
+        --border: var(--color-status-success-base);
+
+        --text-hover: var(--color-status-success-contrast);
+        --color-hover: var(--color-status-success-contrast);
+        --surface-hover: var(--color-status-success-base);
+        --border-hover: var(--color-status-success-base);
+    }
+
+    .themed {
+        background: var(--surface);
+        color: var(--text);
+    }
+}

package/package.json

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

package/src/styles/components/card.css

@@ -52,4 +52,33 @@
             }
         }
     }
+
+    :where(.nc-clickable-card) {
+        cursor: pointer;
+        position: relative;
+
+        &:focus-within,
+        &:hover {
+            outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+        }
+
+        & a[data-link="main"] {
+            text-decoration: none;
+
+            &:focus-within:focus-visible,
+            &:hover {
+                outline: none;
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                inset: 0;
+            }
+        }
+
+        & a[data-link="extra"] {
+            position: relative;
+        }
+    }
 }

package/src/styles/exceptions/typography.css

@@ -16,6 +16,21 @@
     text-transform: capitalize;
 }
 
+.centered {
+    text-align: center;
+    text-wrap: balance;
+}
+
+.uppercase {
+    text-transform: uppercase;
+    --opentype-case: on;
+}
+
+.smallcaps {
+    font-variant-caps: all-small-caps;
+    font-variant-numeric: oldstyle-nums;
+}
+
 .strong {
     font-weight: var(--font-weight-strong);
 }

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;
     }
@@ -92,16 +92,17 @@
         padding: var(--p-y-details) var(--p-x-details);
         inline-size: 100%;
 
-        &>summary {
+        & > summary {
             color: var(--color-text-base);
             background: var(--color-surface-subtle);
             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) + var(--border-width-thin));
         }
 
-        &[open]>summary {
+        &[open] > summary {
             border-end-start-radius: 0;
             border-end-end-radius: 0;
             margin-block-end: var(--p-y-details);
@@ -138,9 +139,11 @@
             margin-block-start: var(--spacing-near);
             font-size: var(--font-size-base);
             max-inline-size: max-content;
-            color: color-mix(in oklch,
-                    currentColor calc(var(--transparency-weaker) * 100%),
-                    transparent);
+            color: color-mix(
+                in oklch,
+                currentColor calc(var(--transparency-weaker) * 100%),
+                transparent
+            );
         }
 
         & cite:before {
@@ -238,6 +241,9 @@
 
     :where(abbr) {
         text-decoration-color: var(--color-brand-primary-base);
+        font-variant-caps: all-small-caps;
+        font-variant-numeric: oldstyle-nums;
+        font-size: 110%;
     }
 
     :where([aria-disabled="true"], .disabled, :disabled) {
@@ -265,8 +271,7 @@
         tab-size: 4;
         text-align: left;
         word-spacing: normal;
-        word-break: normal;
-        word-wrap: normal;
+        overflow-wrap: normal;
         font-style: normal;
     }
 
@@ -380,6 +385,10 @@
         background-color: var(--color-surface-muted);
     }
 
+    :where(td, math, time[datetime*=":"]) {
+        font-variant-numeric: tabular-nums lining-nums slashed-zero;
+    }
+
     :target {
         scroll-margin-block-start: 2ex;
     }
@@ -412,4 +421,89 @@
     :where(li > :is(ul, ol)) {
         margin-block-start: 0.25lh;
     }
+
+    @supports (font-variant-position: sub) {
+        :where(sub) {
+            vertical-align: baseline;
+            font-size: 100%;
+            line-height: inherit;
+            font-variant-position: sub;
+        }
+    }
+    @supports (font-variant-position: super) {
+        :where(sup) {
+            vertical-align: baseline;
+            font-size: 100%;
+            line-height: inherit;
+            font-variant-position: super;
+        }
+    }
+
+    /*
+    11. Quotes
+    */
+
+    :lang(en) > * {
+        quotes: "“" "”" "‘" "’";
+    }
+    :lang(de) > * {
+        quotes: "„" "“" "‚" "‘";
+    }
+
+    :where(q::before) {
+        content: open-quote;
+    }
+    :where(q::after) {
+        content: close-quote;
+    }
+
+    :where(.quoted p:first-of-type::before) {
+        content: "“";
+    }
+    :where(.quoted p:last-of-type::after) {
+        content: "”";
+    }
+
+    :where(.quoted p:first-of-type::before) {
+        margin-inline-start: -0.87ch;
+    }
+    :where(.quoted p) {
+        hanging-punctuation: first last;
+    }
+    @supports (hanging-punctuation: first last) {
+        :where(.quoted p:first-of-type::before) {
+            margin-inline-start: 0;
+        }
+    }
+
+    :where(.prose) {
+        hyphens: auto;
+        hyphenate-limit-chars: 7 4 3;
+        hyphenate-limit-lines: 2;
+        hyphenate-limit-zone: 8%;
+        hyphenate-limit-last: always;
+        text-wrap: pretty;
+    }
+
+    :where(.prose p) {
+        text-wrap: pretty;
+        font-variant-numeric: oldstyle-nums proportional-nums;
+        max-inline-size: var(--measure-base);
+    }
+
+    :where(
+            .prose pre,
+            .prose code,
+            .prose var,
+            .prose samp,
+            .prose kbd,
+            .prose h1,
+            .prose h2,
+            .prose h3,
+            .prose h4,
+            .prose h5,
+            .prose h6
+        ) {
+        hyphens: manual;
+    }
 }

package/src/styles/utils/reset.css

@@ -56,6 +56,10 @@
 
     :where(body) {
         min-block-size: 100vh;
+
+        text-decoration-skip-ink: auto;
+        font-optical-sizing: auto;
+        font-kerning: normal;
     }
 
     /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
@@ -70,7 +74,6 @@
 
     /* A elements that don't have a class get default styles */
     :where(a:not([class])) {
-        text-decoration-skip-ink: auto;
         color: currentColor;
     }
 
@@ -133,11 +136,6 @@
         letter-spacing: inherit;
     }
 
-    :where(p) {
-        text-wrap: pretty;
-        max-inline-size: var(--measure-base);
-    }
-
     :where(html):has(dialog:modal) {
         scrollbar-gutter: stable;
         overflow: hidden;