@stnd/styles 0.10.0 → 0.10.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/styles
 
+## 0.10.2
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
+## 0.10.1
+
+### Patch Changes
+
+- Auto-bumped @stnd/styles due to modified code.
+
 ## 0.10.0
 
 ### Minor Changes

package/_standard-00-variables.scss

@@ -60,7 +60,7 @@ $rhythm-tags: $rhythm-simple-tags + ", div, " + $rhythm-double-tags;
 %surface {
   border: none;
   /* Raised effect for all surfaces */
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   background: var(--color-surface);
   border-radius: var(--radius);
 }

package/_standard-01-token.scss

@@ -188,10 +188,13 @@
   --shadow-raised:
     inset 0 1px 0 0 var(--color-highlight), 0 0 0 1px var(--color-border),
     var(--shadow-ambient);
-  --shadow: var(--shadow-ambient);
+
   --shadow-lg: var(--shadow-ambient), var(--shadow-lift);
   --shadow-xl: var(--shadow-ambient), var(--shadow-lift), var(--shadow-glow);
 
+  --shadow: var(--shadow-raised);
+  --shadow-hover: var(--shadow-raised), var(--shadow-lg);
+
   /**
    * @name Mathematical Ratios
    * @description Proportional ratios driving modular scales, typographic scaling, and harmonic layout proportions.

package/_standard-03-typography.scss

@@ -325,7 +325,7 @@ kbd {
   background-image: var(--effect-grain);
   border: none;
   border-radius: var(--radius);
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   padding: var(--space-d6) var(--space-d3);
   font-family: var(--font-monospace);
   font-size: var(--size-xs);

package/_standard-08-media.scss

@@ -23,7 +23,7 @@ iframe,
 .video {
   max-width: 100%;
   border-radius: var(--radius);
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   background: var(--color-surface);
   max-height: 80vh;
   border: var(--border);
@@ -39,7 +39,7 @@ iframe,
   max-width: 100%;
   overflow: hidden;
   border-radius: var(--radius);
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   border: var(--border);
   background: var(--color-surface);
 

package/_standard-11-forms.scss

@@ -80,8 +80,8 @@ textarea {
   color: var(--color-foreground);
   background: var(--color-surface);
   /* shadcn-style raised effect. */
-  border: var(--border);
-  box-shadow: var(--shadow-raised);
+  border: none;
+  box-shadow: var(--shadow);
   /* Transparent outline at full width reserves the space a real focus
      outline (set on :focus below) will need — prevents layout shift when
      the outline color actually appears. */
@@ -106,8 +106,8 @@ select {
   border-radius: var(--radius-sm);
   color: var(--color-muted);
   background-color: var(--color-surface);
-  border: var(--border);
-  box-shadow: var(--shadow-raised);
+  border: none;
+  box-shadow: var(--shadow);
   outline: none;
   transition: all var(--transition-fast);
   cursor: pointer;
@@ -188,7 +188,7 @@ input[type="radio"] {
   box-sizing: content-box;
   width: calc(var(--space-d8));
   height: calc(var(--space-d2));
-  border: var(--border);
+  border: none;
   border-radius: var(--radius);
   background-color: var(--color-surface);
   cursor: pointer;
@@ -196,14 +196,14 @@ input[type="radio"] {
   margin-inline-end: var(--space-d2);
 
   /* Subtle inset with border */
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   outline: 0;
   transition: all var(--transition-fast);
 
   &:hover {
     /* Add subtle glow on hover */
     background-color: var(--color-surface-high);
-    box-shadow: var(--shadow-raised);
+    box-shadow: var(--shadow);
   }
 
   &:active {
@@ -221,11 +221,11 @@ input[type="radio"] {
   &:checked {
     background-color: var(--color-accent);
     /* Raised effect when checked, with accent border for clarity */
-    box-shadow: var(--shadow-raised);
+    box-shadow: var(--shadow);
   }
 
   &:checked:hover {
-    box-shadow: var(--shadow-raised);
+    box-shadow: var(--shadow);
   }
 
   /* Checkmark using pseudo-element */
@@ -386,7 +386,7 @@ input[type="range"]::-webkit-slider-thumb {
 
   background: var(--color-surface-high);
   /* Raised effect for better grip affordance */
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
 
   /* Vertical alignment logic for Webkit:
      (Thumb Height / 2) - (Track Height / 2) * -1
@@ -396,6 +396,6 @@ input[type="range"]::-webkit-slider-thumb {
 
 input[type="range"]:hover::-webkit-slider-thumb {
   background: var(--color-accent);
-  box-shadow: var(--shadow-raised), var(--shadow-lg);
+  box-shadow: var(--shadow-hover);
   cursor: pointer;
 }

package/_standard-13-components.scss

@@ -28,7 +28,7 @@ kbd {
   background-color: var(--color-surface);
   border: none;
   border-radius: 15%;
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   padding: var(--space-d4) var(--space-d4);
   font-family: var(--font-monospace);
   font-size: var(--size-2xs);
@@ -88,8 +88,8 @@ a.btn {
   min-height: 1em;
 
   /* shadcn-style raised effect */
-  box-shadow: var(--shadow-raised);
-  border: var(--border);
+  box-shadow: var(--shadow);
+  border: none;
 
   transition: all var(--transition-fast);
 
@@ -102,7 +102,7 @@ a.btn {
     background-color: var(--color-surface-highest);
     /* Lift shadow slightly on hover */
     color: var(--color-foreground);
-    box-shadow: var(--shadow-raised), var(--shadow-lg);
+    box-shadow: var(--shadow-hover);
   }
 
   &:active {
@@ -166,7 +166,7 @@ a.btn.link {
 a.btn.outline {
   background-color: transparent;
   backdrop-filter: var(--filter-blur);
-  color: var(--color-subtle);
+  color: var(--color-foreground);
 
   &:hover {
     color: var(--color-foreground);
@@ -191,7 +191,7 @@ a.btn.ghost {
   &:hover {
     color: var(--color-foreground);
     background-color: var(--color-surface-higher);
-    box-shadow: var(--shadow-raised), var(--shadow-lg);
+    box-shadow: var(--shadow-hover);
   }
 
   &:active {
@@ -261,6 +261,7 @@ a.btn:disabled {
   border-radius: 999px;
   border: var(--stroke-width) solid
     color-mix(in oklch, currentColor 30%, transparent);
+  border: none;
   font-size: var(--size-xs);
   display: inline-flex;
   align-items: center;
@@ -383,7 +384,7 @@ a.badge.secondary:hover,
   background: oklch(from var(--color-alert) l c h / 0.1);
   border-left: var(--stroke-width) solid
     oklch(from var(--color-alert) l c h / 0.5);
-  box-shadow: var(--shadow-raised);
+  box-shadow: var(--shadow);
   text-shadow: none !important;
 }
 
@@ -533,7 +534,7 @@ a.badge.secondary:hover,
   background-color: var(--color-surface);
   transition: all var(--transition);
   border-radius: var(--radius);
-  border: var(--border);
+  border: none;
 
   &.hero {
     border-radius: 0;
@@ -909,7 +910,7 @@ details .callout-fold {
   font-size: var(--size-sm);
 
   .comment {
-    border: var(--border);
+    border: none;
     box-shadow: var(--shadow);
     border-radius: var(--radius);
     background: var(--color-surface);
@@ -1111,7 +1112,7 @@ a.skip-link {
 
   &:hover:not(.disabled) {
     background: var(--color-surface-highest);
-    box-shadow: var(--shadow-raised);
+    box-shadow: var(--shadow);
   }
 
   &:active:not(.disabled) {

package/app.scss

@@ -17,6 +17,7 @@
  * @property --window-radius The OS window's own corner radius.
  * @property --window-inset Gap between the window edge and a floating pane.
  * @property --pane-radius Corner of a pane floating inside the window.
+ * @property --titlebar-height Band centred on the OS traffic lights.
  */
 :root {
   /* ---- Type ------------------------------------------------------------
@@ -78,4 +79,11 @@
   --window-radius: 17px;
   --window-inset: 8px;
   --pane-radius: calc(var(--window-radius) - var(--window-inset));
+
+  /* The title-bar band, from the window's top edge. Everything that sits
+     beside the traffic lights (sidebar icons, wordmark, toolbar) centres in
+     this band, so it lines up with them. The lights are placed by macOS,
+     so this is MEASURED, not chosen: their centre sits 20.75pt below the
+     window top (same capture as --window-radius), band = twice that. */
+  --titlebar-height: 41.5px;
 }

package/package.json

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