@stnd/styles 0.10.11 → 0.10.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.10.13
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.10.12
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.10.11
 
 ### Patch Changes

package/_standard-01-token.scss

@@ -103,7 +103,7 @@
    */
   --gap: calc(var(--space));
   --gap-compact: var(--trim);
-  --page-padding: clamp(1rem, 3vw, 3rem);
+  --page-padding: clamp(1rem, 6vw, 4rem);
   --gap-grid-img: var(--space-half);
   --rhythm-block-scale: 2;
 
@@ -293,18 +293,18 @@
      (each step = previous * --optical-ratio). Below base (d5..d2) the
      scale steps down by fractional power increments (ratio^-0.5, ratio^-1,
      ratio^-1.5, ratio^-2) floored at 9px so micro text stays legible and distinct. */
-  --scale-d5: max(calc(var(--font-size) * pow(var(--optical-ratio), -2)), 9px);
-  --scale-d4: max(calc(var(--font-size) * pow(var(--optical-ratio), -1.5)), 9px);
-  --scale-d3: max(calc(var(--font-size) * pow(var(--optical-ratio), -1)), 9px);
-  --scale-d2: max(calc(var(--font-size) * pow(var(--optical-ratio), -0.5)), 9px);
+  --scale-d5: max(calc(var(--font-size) * pow(var(--optical-ratio), -4)), 9px);
+  --scale-d4: max(calc(var(--font-size) * pow(var(--optical-ratio), -3)), 9px);
+  --scale-d3: max(calc(var(--font-size) * pow(var(--optical-ratio), -2)), 9px);
+  --scale-d2: max(calc(var(--font-size) * pow(var(--optical-ratio), -1)), 9px);
   --scale: var(--font-size);
-  --scale-2: calc(var(--font-size) * var(--optical-ratio));
-  --scale-3: calc(var(--scale-2) * var(--optical-ratio));
-  --scale-4: calc(var(--scale-3) * var(--optical-ratio));
-  --scale-5: calc(var(--scale-4) * var(--optical-ratio));
-  --scale-6: calc(var(--scale-5) * var(--optical-ratio));
-  --scale-7: calc(var(--scale-6) * var(--optical-ratio));
-  --scale-8: calc(var(--scale-7) * var(--optical-ratio));
+  --scale-2: min(calc(var(--font-size) * pow(var(--optical-ratio), 1)), 96px);
+  --scale-3: min(calc(var(--font-size) * pow(var(--optical-ratio), 2)), 96px);
+  --scale-4: min(calc(var(--font-size) * pow(var(--optical-ratio), 3)), 96px);
+  --scale-5: min(calc(var(--font-size) * pow(var(--optical-ratio), 4)), 96px);
+  --scale-6: min(calc(var(--font-size) * pow(var(--optical-ratio), 5)), 96px);
+  --scale-7: min(calc(var(--font-size) * pow(var(--optical-ratio), 6)), 96px);
+  --scale-8: min(calc(var(--font-size) * pow(var(--optical-ratio), 7)), 96px);
 
   /**
    * @name Mobile Settings

package/_standard-11-forms.scss

@@ -121,7 +121,6 @@ select {
   background-repeat: no-repeat;
   background-position: right var(--space-d8) center;
   background-size: 1em;
-  padding-right: var(--space); /* Make space for the icon */
 
   &:hover,
   &:focus {

package/_standard-13-components.scss

@@ -29,9 +29,9 @@ kbd {
   border: none;
   border-radius: 15%;
   box-shadow: var(--shadow);
-  padding: var(--space-d4) var(--space-d4);
+  padding: var(--trim);
   font-family: var(--font-monospace);
-  font-size: var(--scale-d4);
+  font-size: var(--scale-d2);
   color: var(--color-foreground);
   pointer-events: none;
 }
@@ -99,7 +99,7 @@ a.btn {
   text-decoration: none !important;
 
   &:hover {
-    background-color: var(--color-surface-light-2);
+    background-color: var(--color-surface-dark-1);
     /* Lift shadow slightly on hover */
     color: var(--color-foreground);
     box-shadow: var(--shadow-hover);
@@ -130,17 +130,19 @@ a.btn.destructive {
 
 :where(button).secondary,
 a.btn.secondary {
-  background-color: var(--color-accent);
-  color: var(--color-on-accent);
+    color: color-mix(in oklch, var(--color-accent) 90%, var(--color-foreground));
+    background-color: var(--color-surface-dark-1);
 
   &:hover {
-    color: var(--color-accent);
-    background-color: var(--color-surface-light-2);
+    background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-dark-1));
+    color: var(--color-foreground);
     box-shadow: var(--shadow-raised), var(--shadow-glow);
+
   }
 
   &:active {
-    background-color: var(--color-surface-dark-1);
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
     /* Flatten shadow on press */
     box-shadow: var(--shadow-inset), var(--shadow-ring), var(--shadow-glow);
   }
@@ -170,7 +172,7 @@ a.btn.outline {
 
   &:hover {
     color: var(--color-foreground);
-    background-color: var(--color-surface-light-1);
+    background-color: var(--color-surface-dark-1);
   }
 
   &:active {
@@ -190,7 +192,7 @@ a.btn.ghost {
 
   &:hover {
     color: var(--color-foreground);
-    background-color: var(--color-surface-light-1);
+    background-color: var(--color-surface-dark-1);
     box-shadow: var(--shadow-hover);
   }
 
@@ -275,18 +277,16 @@ a.btn:disabled {
   color: var(--color-accent);
   border-radius: 999px;
   border: none;
-  box-shadow: var(--shadow-ring);
+  box-shadow: var(--shadow);
   text-decoration: none;
   user-select: none;
   transition: all var(--transition-fast);
 
   &.small {
-    padding: calc(var(--space-d5) / 2) var(--space-d4) !important;
     font-size: var(--scale-d3);
   }
 
   &.smaller {
-    padding: calc(var(--space-d5) / 2) var(--space-d4) !important;
     font-size: var(--scale-d4);
   }
 
@@ -330,7 +330,7 @@ a.badge.secondary:hover,
   &:hover,
   a:hover {
     color: var(--color-foreground);
-    background: var(--color-surface-light-1);
+    background: var(--color-surface-dark-1);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/styles",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "type": "module",
   "author": "Francis Fontaine",
   "license": "MIT",