@nordcode/ui 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 2.1.7 (2025-12-18)
+
+### features
+
+- add subtle transitions to buttons and clickable cards
+- update old transitions for active buttons and radios and checkboxes
+
+## 2.1.6 (2025-12-12)
+
+### fixes
+
+- fix required checkboxes looking broken
+
+### features
+
+- add style for required markers
+
 ## 2.1.5 (2025-12-12)
 
 ### fixes

package/out/complete.css

@@ -1566,7 +1566,7 @@
     font-size: inherit;
     cursor: pointer;
     text-align: center;
-    transition: var(--transition-duration-quick-2) var(--ease-2);
+    transition: var(--transition-duration-quick-1) var(--ease-2);
     -webkit-text-decoration: unset;
     text-decoration: unset;
     box-shadow: var(--_button-box-shadow);
@@ -1579,7 +1579,7 @@
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
     padding-block: 0;
-    transition-property: box-shadow, transform;
+    transition-property: box-shadow, transform, scale;
     display: inline-flex;
     position: relative;
   }
@@ -1605,11 +1605,7 @@
     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;
+    scale: .98;
   }
 
   :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline {
@@ -1821,6 +1817,7 @@
 
   :where(.nc-clickable-card) {
     cursor: pointer;
+    transition: scale var(--transition-duration-quick-2) var(--ease-2);
     position: relative;
   }
 
@@ -1846,6 +1843,10 @@
   :where(.nc-clickable-card) a[data-link="extra"] {
     position: relative;
   }
+
+  :where(.nc-clickable-card):has(a[data-link="main"]:active) {
+    transform: scale(.99);
+  }
 }
 
 @layer components.dialogs {
@@ -2194,10 +2195,6 @@
     background-color: var(--_input-hover-background);
   }
 
-  :where(input, textarea, select, .nc-input)[required] {
-    border-inline-start-width: var(--border-width-thick);
-  }
-
   :where(input, textarea, select, .nc-input)::placeholder {
     color: var(--color-text-subtle);
   }
@@ -2279,11 +2276,11 @@
     align-items: center;
     line-height: 1;
     display: inline-flex;
-    transform: scale(.8)translateY(2em);
+    transform: scale(.85)translateX(2em);
   }
 
   :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
-    transform: scale(1)translateY(0%);
+    transform: scale(1)translateX(0%);
   }
 
   :where(input[type="radio"], .nc-input-radio) {
@@ -2299,11 +2296,11 @@
     inline-size: 50%;
     transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
     display: inline-flex;
-    transform: scale(.8)translateY(2em);
+    transform: scale(.85)translateX(2em);
   }
 
   :where(input[type="radio"], .nc-input-radio):checked:before {
-    transform: scale(1)translateY(0%);
+    transform: scale(1)translateX(0%);
   }
 
   :where(input[type="color"], .nc-input-color) {
@@ -2432,6 +2429,11 @@
   :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
     margin-block-start: var(--control-spacing-far, .75em);
   }
+
+  :where(.nc-input-required-mark) {
+    color: var(--color-status-danger-emphasis);
+    font-size: 1.25em;
+  }
 }
 
 @layer components.inputs-segmented {

package/out/complete_configless.css

@@ -1350,7 +1350,7 @@
     font-size: inherit;
     cursor: pointer;
     text-align: center;
-    transition: var(--transition-duration-quick-2) var(--ease-2);
+    transition: var(--transition-duration-quick-1) var(--ease-2);
     -webkit-text-decoration: unset;
     text-decoration: unset;
     box-shadow: var(--_button-box-shadow);
@@ -1363,7 +1363,7 @@
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
     padding-block: 0;
-    transition-property: box-shadow, transform;
+    transition-property: box-shadow, transform, scale;
     display: inline-flex;
     position: relative;
   }
@@ -1389,11 +1389,7 @@
     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;
+    scale: .98;
   }
 
   :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"], .nc-button).-outline {
@@ -1605,6 +1601,7 @@
 
   :where(.nc-clickable-card) {
     cursor: pointer;
+    transition: scale var(--transition-duration-quick-2) var(--ease-2);
     position: relative;
   }
 
@@ -1630,6 +1627,10 @@
   :where(.nc-clickable-card) a[data-link="extra"] {
     position: relative;
   }
+
+  :where(.nc-clickable-card):has(a[data-link="main"]:active) {
+    transform: scale(.99);
+  }
 }
 
 @layer components.dialogs {
@@ -1978,10 +1979,6 @@
     background-color: var(--_input-hover-background);
   }
 
-  :where(input, textarea, select, .nc-input)[required] {
-    border-inline-start-width: var(--border-width-thick);
-  }
-
   :where(input, textarea, select, .nc-input)::placeholder {
     color: var(--color-text-subtle);
   }
@@ -2063,11 +2060,11 @@
     align-items: center;
     line-height: 1;
     display: inline-flex;
-    transform: scale(.8)translateY(2em);
+    transform: scale(.85)translateX(2em);
   }
 
   :where(input[type="checkbox"], .nc-input-checkbox):checked:before {
-    transform: scale(1)translateY(0%);
+    transform: scale(1)translateX(0%);
   }
 
   :where(input[type="radio"], .nc-input-radio) {
@@ -2083,11 +2080,11 @@
     inline-size: 50%;
     transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
     display: inline-flex;
-    transform: scale(.8)translateY(2em);
+    transform: scale(.85)translateX(2em);
   }
 
   :where(input[type="radio"], .nc-input-radio):checked:before {
-    transform: scale(1)translateY(0%);
+    transform: scale(1)translateX(0%);
   }
 
   :where(input[type="color"], .nc-input-color) {
@@ -2216,6 +2213,11 @@
   :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
     margin-block-start: var(--control-spacing-far, .75em);
   }
+
+  :where(.nc-input-required-mark) {
+    color: var(--color-status-danger-emphasis);
+    font-size: 1.25em;
+  }
 }
 
 @layer components.inputs-segmented {

package/package.json

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

package/src/styles/components/buttons.css

@@ -35,8 +35,8 @@
         justify-content: center;
         text-align: center;
         position: relative;
-        transition: var(--transition-duration-quick-2) var(--ease-2);
-        transition-property: box-shadow, transform;
+        transition: var(--transition-duration-quick-1) var(--ease-2);
+        transition-property: box-shadow, transform, scale;
         text-decoration: unset;
         box-shadow: var(--_button-box-shadow);
         user-select: none;
@@ -69,11 +69,7 @@
             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);
+            scale: 0.98;
         }
 
         &.-outline {

package/src/styles/components/card.css

@@ -56,6 +56,7 @@
     :where(.nc-clickable-card) {
         cursor: pointer;
         position: relative;
+        transition: scale var(--transition-duration-quick-2) var(--ease-2);
 
         &:focus-within,
         &:hover {
@@ -82,5 +83,9 @@
         & a[data-link="extra"] {
             position: relative;
         }
+
+        &:has(a[data-link="main"]:active) {
+            transform: scale(0.99);
+        }
     }
 }

package/src/styles/components/inputs/base.css

@@ -63,10 +63,6 @@
             background-color: var(--_input-hover-background);
         }
 
-        &[required] {
-            border-inline-start-width: var(--border-width-thick);
-        }
-
         &::placeholder {
             color: var(--color-text-subtle);
         }
@@ -147,7 +143,7 @@
             inline-size: 0.75lh;
             block-size: 0.75lh;
             background-color: var(--color-brand-primary-contrast);
-            transform: scale(0.8) translateY(2em);
+            transform: scale(0.85) translateX(2em);
             transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
             font-family: var(--font-family-sans);
             --font-weight: var(--font-weight-active);
@@ -157,7 +153,7 @@
         }
 
         &:checked:before {
-            transform: scale(1) translateY(0%);
+            transform: scale(1) translateX(0%);
         }
     }
 
@@ -171,13 +167,13 @@
             block-size: 50%;
             inline-size: 50%;
             border-radius: var(--border-radius-round);
-            transform: scale(0.8) translateY(2em);
+            transform: scale(0.85) translateX(2em);
             background-color: var(--color-brand-primary-contrast);
             transition: transform var(--ease-out-2) var(--transition-duration-quick-1);
         }
 
         &:checked:before {
-            transform: scale(1) translateY(0%);
+            transform: scale(1) translateX(0%);
         }
     }
 

package/src/styles/components/inputs/fields.css

@@ -81,4 +81,9 @@
             margin-block-start: var(--control-spacing-far, 0.75em);
         }
     }
+
+    :where(.nc-input-required-mark) {
+        color: var(--color-status-danger-emphasis);
+        font-size: 1.25em;
+    }
 }