@scalewing/react 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @scalewing/react
 
+## 1.7.0
+
+### Minor Changes
+
+- 2444ec5: Button `variant="tertiary"` is a solid fill on `--sw-color-tertiary` with
+  `--sw-color-onTertiary`. `secondary` now fills with `--sw-color-secondary`
+  and draws `--sw-button-secondary-border`, which stays the hairline unless a
+  palette fills the secondary action (for example `signal`). The stylesheet
+  emits the new semantic colour properties. Default and cerulean themes look
+  unchanged.
+- 622ab77: `Card variant="filled"` (`.sw-card-filled`) is a quiet `--sw-color-subtle`
+  fill with no border, for plain information apart from pressable rows.
+
+### Patch Changes
+
+- Updated dependencies [b5a56b7]
+- Updated dependencies [2444ec5]
+- Updated dependencies [622ab77]
+  - @scalewing/tokens@1.3.0
+
 ## 1.6.1
 
 ### Patch Changes

package/README.md

@@ -66,6 +66,8 @@ Import the CSS once at the application entry. Do not copy it into your source tr
 
 `Separator` divides sections with a token-colored line. It is horizontal by default; use `orientation="vertical"` in a flex row. Set `decorative` when the line only supports layout so assistive technology ignores it.
 
+`Card` defaults to `glass`; `outlined` and `elevated` are solid surfaces, and `filled` is a quiet `--sw-color-subtle` fill with no border for plain information apart from pressable rows.
+
 `Text` steps `display` and `heading` down to the compact token sizes below the `md` breakpoint; consumers do not size type per viewport.
 
 `Text` takes an optional `align` (`start`, `center`, `end`) mapped to generated `sw-text-align-*` classes, for a heading that must stay centered when it wraps.

package/dist/css/css-button.js

@@ -11,7 +11,8 @@ export function buttonClassNames(options) {
 function variantRules() {
     return [
         `.sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }`,
-        `.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }`,
+        `.sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }`,
+        `.sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }`,
         `.sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }`,
         `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
     ].join('\n');

package/dist/css/css-components.js

@@ -74,6 +74,11 @@ export function cssComponentClasses() {
   box-shadow: var(--sw-elevation-sm);
 }
 
+/* Plain information on a quiet fill, apart from rows that press. */
+.sw-card-filled {
+  background: var(--sw-color-subtle);
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
   .sw-app-header,

package/dist/css/css-palettes.js

@@ -1,4 +1,4 @@
-import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, semanticColorKeys, } from '@scalewing/tokens';
+import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 function paletteCustomProperties(id, scheme) {
     const overlay = colorsForPalette(id, scheme);
     const theme = createTheme({ colorScheme: scheme, palette: id });
@@ -8,6 +8,10 @@ function paletteCustomProperties(id, scheme) {
             lines.push(`  --sw-color-${key}: ${theme.colors[key]};`);
         }
     }
+    // The secondary outline derives from these three, so it follows them.
+    if (overlay.secondary || overlay.surface || overlay.border) {
+        lines.push(`  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`);
+    }
     lines.push(`  --sw-glass-blur: ${theme.glass.blur}px;`);
     lines.push(`  --sw-glass-saturate: ${theme.glass.saturate};`);
     lines.push(`  --sw-glass-fill: ${theme.glass.fill};`);

package/dist/css/css-variables.js

@@ -1,8 +1,9 @@
-import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, secondaryActionBorder, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
 function colorDeclarations(theme) {
-    return semanticColorKeys
-        .map((key) => `  --sw-color-${key}: ${theme.colors[key]};`)
-        .join('\n');
+    return [
+        ...semanticColorKeys.map((key) => `  --sw-color-${key}: ${theme.colors[key]};`),
+        `  --sw-button-secondary-border: ${secondaryActionBorder(theme.colors)};`,
+    ].join('\n');
 }
 function glassDeclarations(theme) {
     return `  --sw-glass-blur: ${theme.glass.blur}px;

package/dist/palette/harvest.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #3E3E24;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #C9C2AE;
+  --sw-button-secondary-border: #C9C2AE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #CEA453;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3D5238;
+  --sw-button-secondary-border: #3D5238;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(60, 52, 40, 0.72);

package/dist/palette/mocha.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #473333;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E0CBA8;
+  --sw-button-secondary-border: #E0CBA8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #E8C69F;
   --sw-color-onAccent: #101214;
   --sw-color-border: #6B5353;
+  --sw-button-secondary-border: #6B5353;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(65, 59, 53, 0.72);

package/dist/palette/postcard.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #A33B2B;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #D0D0B8;
+  --sw-button-secondary-border: #D0D0B8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #EEAF90;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3A4158;
+  --sw-button-secondary-border: #3A4158;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(66, 54, 51, 0.72);

package/dist/palette/signal.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #1D1D1F;
+  --sw-color-onSecondary: #FFFFFF;
+  --sw-color-tertiary: #7C5CD6;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-button-secondary-border: #1D1D1F;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-color-secondary: #F5F5F7;
+  --sw-color-onSecondary: #101214;
+  --sw-color-tertiary: #C4B5FD;
+  --sw-color-onTertiary: #101214;
+  --sw-button-secondary-border: #F5F5F7;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}

package/dist/palette/sunburst.css

@@ -8,6 +8,7 @@
   --sw-color-accent: #A33B20;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E5C48A;
+  --sw-button-secondary-border: #E5C48A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -23,6 +24,7 @@
   --sw-color-accent: #FAA968;
   --sw-color-onAccent: #101214;
   --sw-color-border: #1A5A70;
+  --sw-button-secondary-border: #1A5A70;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 53, 43, 0.72);

package/dist/palette/synthwave.css

@@ -18,6 +18,7 @@
   --sw-color-accent: #FF2A6D;
   --sw-color-onAccent: #101214;
   --sw-color-border: #4A2C6A;
+  --sw-button-secondary-border: #4A2C6A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(69, 31, 44, 0.72);

package/dist/styles.css

@@ -7,11 +7,17 @@
   --sw-color-muted: #6E6E73;
   --sw-color-accent: #5B3DF5;
   --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #FFFFFF;
+  --sw-color-onSecondary: #1D1D1F;
+  --sw-color-tertiary: #48484A;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-color-subtle: #F2F2F5;
   --sw-color-danger: #B42318;
   --sw-color-onDanger: #FFFFFF;
   --sw-color-success: #087443;
   --sw-color-warning: #B54708;
   --sw-color-border: #D2D2D7;
+  --sw-button-secondary-border: #D2D2D7;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -64,11 +70,17 @@
   --sw-color-muted: #A1A1A6;
   --sw-color-accent: #A78BFA;
   --sw-color-onAccent: #101214;
+  --sw-color-secondary: #1C1C1E;
+  --sw-color-onSecondary: #F5F5F7;
+  --sw-color-tertiary: #D1D1D6;
+  --sw-color-onTertiary: #101214;
+  --sw-color-subtle: #2C2C2E;
   --sw-color-danger: #F97066;
   --sw-color-onDanger: #101214;
   --sw-color-success: #5BE0A0;
   --sw-color-warning: #FDB022;
   --sw-color-border: #3A3A3C;
+  --sw-button-secondary-border: #3A3A3C;
   --sw-space-0: 0px;
   --sw-space-1: 4px;
   --sw-space-2: 8px;
@@ -134,6 +146,36 @@
   --sw-glass-specular: rgba(222, 244, 254, 0.28);
 }
 
+[data-theme='light'][data-palette='signal'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-secondary: #1D1D1F;
+  --sw-color-onSecondary: #FFFFFF;
+  --sw-color-tertiary: #7C5CD6;
+  --sw-color-onTertiary: #FFFFFF;
+  --sw-button-secondary-border: #1D1D1F;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'][data-palette='signal'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-color-secondary: #F5F5F7;
+  --sw-color-onSecondary: #101214;
+  --sw-color-tertiary: #C4B5FD;
+  --sw-color-onTertiary: #101214;
+  --sw-button-secondary-border: #F5F5F7;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}
+
 [data-theme='light'][data-palette='navy'] {
   --sw-color-accent: #0A2540;
   --sw-color-onAccent: #FFFFFF;
@@ -342,6 +384,7 @@
   --sw-color-accent: #A33B20;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E5C48A;
+  --sw-button-secondary-border: #E5C48A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -357,6 +400,7 @@
   --sw-color-accent: #FAA968;
   --sw-color-onAccent: #101214;
   --sw-color-border: #1A5A70;
+  --sw-button-secondary-border: #1A5A70;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(68, 53, 43, 0.72);
@@ -372,6 +416,7 @@
   --sw-color-accent: #3E3E24;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #C9C2AE;
+  --sw-button-secondary-border: #C9C2AE;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -387,6 +432,7 @@
   --sw-color-accent: #CEA453;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3D5238;
+  --sw-button-secondary-border: #3D5238;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(60, 52, 40, 0.72);
@@ -402,6 +448,7 @@
   --sw-color-accent: #A33B2B;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #D0D0B8;
+  --sw-button-secondary-border: #D0D0B8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -417,6 +464,7 @@
   --sw-color-accent: #EEAF90;
   --sw-color-onAccent: #101214;
   --sw-color-border: #3A4158;
+  --sw-button-secondary-border: #3A4158;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(66, 54, 51, 0.72);
@@ -432,6 +480,7 @@
   --sw-color-accent: #473333;
   --sw-color-onAccent: #FFFFFF;
   --sw-color-border: #E0CBA8;
+  --sw-button-secondary-border: #E0CBA8;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1;
   --sw-glass-fill: rgba(255, 255, 255, 1);
@@ -447,6 +496,7 @@
   --sw-color-accent: #E8C69F;
   --sw-color-onAccent: #101214;
   --sw-color-border: #6B5353;
+  --sw-button-secondary-border: #6B5353;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(65, 59, 53, 0.72);
@@ -472,6 +522,7 @@
   --sw-color-accent: #FF2A6D;
   --sw-color-onAccent: #101214;
   --sw-color-border: #4A2C6A;
+  --sw-button-secondary-border: #4A2C6A;
   --sw-glass-blur: 24px;
   --sw-glass-saturate: 1.8;
   --sw-glass-fill: rgba(69, 31, 44, 0.72);
@@ -700,6 +751,11 @@ body {
   box-shadow: var(--sw-elevation-sm);
 }
 
+/* Plain information on a quiet fill, apart from rows that press. */
+.sw-card-filled {
+  background: var(--sw-color-subtle);
+}
+
 @media (prefers-reduced-transparency: reduce) {
   .sw-card-glass,
   .sw-app-header,
@@ -779,7 +835,8 @@ body {
 }
 
 .sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }
-.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }
+.sw-button-secondary { background: var(--sw-color-secondary); border-color: var(--sw-button-secondary-border); color: var(--sw-color-onSecondary); }
+.sw-button-tertiary { background: var(--sw-color-tertiary); border-color: transparent; color: var(--sw-color-onTertiary); }
 .sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }
 .sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }

package/dist/theme/ThemeProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, } from 'react';
-import { createTheme, semanticColorKeys, } from '@scalewing/tokens';
+import { createTheme, secondaryActionBorder, semanticColorKeys, } from '@scalewing/tokens';
 const ThemeContext = createContext(null);
 function schemeFromMedia() {
     if (typeof window === 'undefined' ||
@@ -16,6 +16,7 @@ function themeCssVars(theme) {
     for (const key of semanticColorKeys) {
         vars[`--sw-color-${key}`] = theme.colors[key];
     }
+    vars['--sw-button-secondary-border'] = secondaryActionBorder(theme.colors);
     vars['--sw-glass-blur'] = `${theme.glass.blur}px`;
     vars['--sw-glass-saturate'] = String(theme.glass.saturate);
     vars['--sw-glass-fill'] = theme.glass.fill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "^1.2.0"
+    "@scalewing/tokens": "^1.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",