@nordcode/ui 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 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

package/out/bundle.css

@@ -617,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) {

package/out/bundle_configless.css

@@ -399,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) {

package/out/complete.css

@@ -617,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) {
@@ -1514,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));
@@ -1551,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);
@@ -1575,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;
   }
 
@@ -1593,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);
@@ -1617,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 {
@@ -1627,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);
@@ -1753,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);
@@ -1768,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));
     }
@@ -1857,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

@@ -399,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) {
@@ -1296,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));
@@ -1333,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);
@@ -1357,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;
   }
 
@@ -1375,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);
@@ -1399,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 {
@@ -1409,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);
@@ -1535,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);
@@ -1550,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));
     }
@@ -1639,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.2",
+  "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) {