@nordcode/ui 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 2.0.3 (2025-09-11)
+
+### improvements
+
+- add :active state to buttons
+- use more accessbile emhpasis color for selections
+
+### removals
+
+- remove unused .buttonReset class
+
+## 2.0.2 (2025-05-10)
+
+### improvements
+
+- increase focus-visible visibility
+- small utility tweaks
+
 ## 2.0.1 (2025-05-04)
 
 ### improvements

package/out/bundle.css

@@ -328,8 +328,9 @@
   }
 
   :where(:not(:active):focus-visible) {
-    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: var(--control-spacing-near, .5em);
+    outline: 2px solid var(--color-brand-primary-base);
+    box-shadow: 0 0 0 2px var(--color-surface-base);
+    outline-offset: 2px;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
     display: block;
   }
 
+  :where(svg) {
+    flex: none;
+  }
+
   :where(img, svg, video) {
     block-size: auto;
     max-inline-size: 100%;
@@ -612,12 +617,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -628,7 +633,7 @@
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
     text-decoration: underline;
-    text-decoration-thickness: from-font;
+    text-decoration-thickness: .1em;
   }
 
   :where(a, .nc-link):visited {

package/out/bundle_configless.css

@@ -110,8 +110,9 @@
   }
 
   :where(:not(:active):focus-visible) {
-    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: var(--control-spacing-near, .5em);
+    outline: 2px solid var(--color-brand-primary-base);
+    box-shadow: 0 0 0 2px var(--color-surface-base);
+    outline-offset: 2px;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
     display: block;
   }
 
+  :where(svg) {
+    flex: none;
+  }
+
   :where(img, svg, video) {
     block-size: auto;
     max-inline-size: 100%;
@@ -394,12 +399,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -410,7 +415,7 @@
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
     text-decoration: underline;
-    text-decoration-thickness: from-font;
+    text-decoration-thickness: .1em;
   }
 
   :where(a, .nc-link):visited {

package/out/complete.css

@@ -328,8 +328,9 @@
   }
 
   :where(:not(:active):focus-visible) {
-    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: var(--control-spacing-near, .5em);
+    outline: 2px solid var(--color-brand-primary-base);
+    box-shadow: 0 0 0 2px var(--color-surface-base);
+    outline-offset: 2px;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -377,6 +378,10 @@
     display: block;
   }
 
+  :where(svg) {
+    flex: none;
+  }
+
   :where(img, svg, video) {
     block-size: auto;
     max-inline-size: 100%;
@@ -612,12 +617,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -628,7 +633,7 @@
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
     text-decoration: underline;
-    text-decoration-thickness: from-font;
+    text-decoration-thickness: .1em;
   }
 
   :where(a, .nc-link):visited {
@@ -1509,12 +1514,6 @@
 }
 
 @layer components.buttons {
-  .buttonReset {
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
     --_button-background: var(--button-background, var(--surface-hover));
     --_button-color: var(--button-color, var(--text-hover));
@@ -1546,6 +1545,7 @@
     box-shadow: var(--_button-box-shadow);
     -webkit-user-select: none;
     user-select: none;
+    text-box: cap alphabetic;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
@@ -1570,8 +1570,14 @@
     transform: none;
   }
 
-  :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):active {
+  :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):is(:active, .-active) {
+    background-color: var(--_button-background-hover);
+    color: var(--_button-color-hover);
+    border-color: var(--_button-border-color-hover);
     box-shadow: none;
+    filter: contrast(1.2) saturate(1.1);
+    -webkit-backdrop-filter: contrast(2);
+    backdrop-filter: contrast(2);
     transform: none;
   }
 
@@ -1588,14 +1594,6 @@
     transform: none !important;
   }
 
-  :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).-active {
-    background-color: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    box-shadow: none;
-    transform: none;
-  }
-
   :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).-outline {
     color: var(--text);
     border-color: var(--border);
@@ -1612,8 +1610,6 @@
     color: var(--text);
     background-color: #0000;
     border-color: #0000;
-    box-shadow: none !important;
-    transform: none !important;
   }
 
   :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).-stealth:hover {
@@ -1622,6 +1618,11 @@
     border-color: #0000;
   }
 
+  :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).-stealth {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+
   :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: var(--control-spacing-near, .5em);
     min-block-size: var(--control-height-small);
@@ -1748,6 +1749,20 @@
     --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
     --_card-padding-block: var(--card-padding-block, var(--spacing-far));
     --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
+  }
+
+  :where(.nc-card)[data-size="xs"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
+    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+  }
+
+  :where(.nc-card)[data-size="sm"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
+  }
+
+  :where(.nc-card) {
     box-sizing: border-box;
     inline-size: 100%;
     padding-inline: var(--_card-padding-inline);
@@ -1763,24 +1778,13 @@
     overflow: hidden;
   }
 
-  :where(.nc-card)[data-size="xs"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
-  }
-
-  :where(.nc-card)[data-size="sm"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
-  }
-
-  @media (min-width: 480px) {
+  @media (width >= 480px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (width >= 1024px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
     }
@@ -1852,7 +1856,7 @@
     overflow: clip;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     :where(.nc-dialog) {
       --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
       inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));

package/out/complete_configless.css

@@ -110,8 +110,9 @@
   }
 
   :where(:not(:active):focus-visible) {
-    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-    outline-offset: var(--control-spacing-near, .5em);
+    outline: 2px solid var(--color-brand-primary-base);
+    box-shadow: 0 0 0 2px var(--color-surface-base);
+    outline-offset: 2px;
   }
 
   :where(:focus:not(:focus-visible)) {
@@ -159,6 +160,10 @@
     display: block;
   }
 
+  :where(svg) {
+    flex: none;
+  }
+
   :where(img, svg, video) {
     block-size: auto;
     max-inline-size: 100%;
@@ -394,12 +399,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -410,7 +415,7 @@
     cursor: pointer;
     letter-spacing: var(--tracking-tight);
     text-decoration: underline;
-    text-decoration-thickness: from-font;
+    text-decoration-thickness: .1em;
   }
 
   :where(a, .nc-link):visited {
@@ -1291,12 +1296,6 @@
 }
 
 @layer components.buttons {
-  .buttonReset {
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
     --_button-background: var(--button-background, var(--surface-hover));
     --_button-color: var(--button-color, var(--text-hover));
@@ -1328,6 +1327,7 @@
     box-shadow: var(--_button-box-shadow);
     -webkit-user-select: none;
     user-select: none;
+    text-box: cap alphabetic;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
@@ -1352,8 +1352,14 @@
     transform: none;
   }
 
-  :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):active {
+  :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):is(:active, .-active) {
+    background-color: var(--_button-background-hover);
+    color: var(--_button-color-hover);
+    border-color: var(--_button-border-color-hover);
     box-shadow: none;
+    filter: contrast(1.2) saturate(1.1);
+    -webkit-backdrop-filter: contrast(2);
+    backdrop-filter: contrast(2);
     transform: none;
   }
 
@@ -1370,14 +1376,6 @@
     transform: none !important;
   }
 
-  :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).-active {
-    background-color: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    box-shadow: none;
-    transform: none;
-  }
-
   :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).-outline {
     color: var(--text);
     border-color: var(--border);
@@ -1394,8 +1392,6 @@
     color: var(--text);
     background-color: #0000;
     border-color: #0000;
-    box-shadow: none !important;
-    transform: none !important;
   }
 
   :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).-stealth:hover {
@@ -1404,6 +1400,11 @@
     border-color: #0000;
   }
 
+  :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).-stealth {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+
   :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: var(--control-spacing-near, .5em);
     min-block-size: var(--control-height-small);
@@ -1530,6 +1531,20 @@
     --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
     --_card-padding-block: var(--card-padding-block, var(--spacing-far));
     --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
+  }
+
+  :where(.nc-card)[data-size="xs"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
+    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+  }
+
+  :where(.nc-card)[data-size="sm"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
+  }
+
+  :where(.nc-card) {
     box-sizing: border-box;
     inline-size: 100%;
     padding-inline: var(--_card-padding-inline);
@@ -1545,24 +1560,13 @@
     overflow: hidden;
   }
 
-  :where(.nc-card)[data-size="xs"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
-  }
-
-  :where(.nc-card)[data-size="sm"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
-  }
-
-  @media (min-width: 480px) {
+  @media (width >= 480px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (width >= 1024px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
     }
@@ -1634,7 +1638,7 @@
     overflow: clip;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     :where(.nc-dialog) {
       --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
       inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));

package/package.json

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

package/src/styles/components/buttons.css

@@ -1,10 +1,4 @@
 @layer components.buttons {
-    .buttonReset {
-        padding: 0;
-        border: none;
-        background: none;
-    }
-
     :where(
             button:not([class]),
             button[type]:not([class]),
@@ -57,6 +51,7 @@
         text-decoration: unset;
         box-shadow: var(--_button-box-shadow);
         user-select: none;
+        text-box: cap alphabetic;
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
 
@@ -71,6 +66,7 @@
             input[type="reset"]:not([class]),
             .nc-button
         ) {
+
         &:hover {
             background: var(--_button-background-hover);
             color: var(--_button-color-hover);
@@ -84,9 +80,15 @@
             font-weight: var(--font-weight-active);
         }
 
-        &:active {
+        &:is(:active, .-active) {
+            background-color: var(--_button-background-hover);
+            color: var(--_button-color-hover);
+            border-color: var(--_button-border-color-hover);
+
             box-shadow: none;
             transform: none;
+            filter: contrast(1.2) saturate(1.1);
+            backdrop-filter: contrast(2);
         }
 
         &[disabled] {
@@ -103,15 +105,6 @@
             cursor: not-allowed;
         }
 
-        &.-active {
-            background-color: var(--_button-background-hover);
-            color: var(--_button-color-hover);
-            border-color: var(--_button-border-color-hover);
-
-            box-shadow: none;
-            transform: none;
-        }
-
         &.-outline {
             background-color: transparent;
             color: var(--text);

package/src/styles/utils/base.css

@@ -202,7 +202,7 @@
     ::selection,
     ::target-text {
         background-color: var(--color-brand-primary-base);
-        color: var(--color-surface-base);
+        color: var(--color-brand-primary-emphasis);
     }
 
     :where(a, .nc-link) {
@@ -210,7 +210,7 @@
         font-family: var(--font-family-link);
         text-decoration: underline;
         text-underline-offset: var(--control-spacing-nearest, 0.375em);
-        text-decoration-thickness: from-font;
+        text-decoration-thickness: 0.1em;
         font-weight: var(--font-weight-default);
         text-decoration-color: currentColor;
         cursor: pointer;

package/src/styles/utils/reset.css

@@ -27,8 +27,9 @@
     }
 
     :where(:not(:active):focus-visible) {
-        outline: var(--border-width-medium) solid var(--color-brand-primary-base);
-        outline-offset: var(--control-spacing-near, 0.5em);
+        outline: 2px solid var(--color-brand-primary-base);
+        box-shadow: 0 0 0 2px var(--color-surface-base);
+        outline-offset: 2px;
     }
 
     :where(:focus:not(:focus-visible)) {
@@ -81,6 +82,10 @@
         display: block;
     }
 
+    :where(svg) {
+        flex: none;
+    }
+
     :where(img, svg, video) {
         max-inline-size: 100%;
         block-size: auto;