@cas-smartdesign/button 7.0.1 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cas-smartdesign/button",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "A button element which encloses the look and feel of the smartdesign button",
   "license": "SEE LICENSE IN LICENSE",
   "files": [
@@ -17,12 +17,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@cas-smartdesign/image-embed": "^1.0.1",
+    "@cas-smartdesign/image-embed": "^1.0.2",
     "@cas-smartdesign/element-base": "^6.0.0"
   },
   "devDependencies": {
-    "@cas-smartdesign/element-preview": "^1.1.0",
-    "@cas-smartdesign/license-generator": "^1.10.0"
+    "@cas-smartdesign/license-generator": "^1.10.0",
+    "@cas-smartdesign/element-preview": "^1.1.0"
   },
   "peerDependencies": {
     "@cas-smartdesign/design-tokens": "^3.0.1"

package/readme.md

@@ -17,7 +17,7 @@ For a web app / web widget, refer to the official documentation about design tok
 - `type`: string
   - Can be set to either `submit` or `reset` to make the button act like a HTML form button.
 - `variant`: string
-  - Defines the visual style of the button. One of `primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`. Defaults to `standard` when unset or set to an unknown value.
+  - Defines the visual style of the button. One of `primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection`, `custom` or `contrast`. Defaults to `standard` when unset or set to an unknown value.
 - `aria-pressed`: boolean
   - Marks a `selection` button as selected (standard toggle-button semantics). When the variant is set to `selection` and the attribute is absent, the button initializes it to `false` so assistive tools announce it as a toggle; the consumer flips it to `true`/`false`.
 
@@ -26,7 +26,7 @@ For a web app / web widget, refer to the official documentation about design tok
 - `disabled`: boolean
   - Makes the button looks like it is disabled & also prevents click events but used with a classname so mouse events are still triggered thus allowing for example tooltip usage in all browsers.
 - `variant`: ButtonVariant
-  - Gets or sets the button's visual style (`primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection` or `custom`). Reading it returns `standard` when the `variant` attribute is missing or invalid.
+  - Gets or sets the button's visual style (`primary`, `outline`, `standard`, `ghost`, `outline-danger`, `ghost-danger`, `selection`, `custom` or `contrast`). Reading it returns `standard` when the `variant` attribute is missing or invalid.
 
 ## CSS Custom Properties
 
@@ -45,6 +45,12 @@ For the `custom` variant you only need to set the two rest colors — `--sd-butt
 
 Mind the color contrast when relying on the derived states: because the background darkens while the text color is kept, a `--sd-button-color` that contrasts well against the rest background may fall below the required contrast ratio against the darker hover/pressed background. If the derived states do not meet your contrast requirements, set `--sd-button-color-hover` and `--sd-button-color-pressed` (and the matching background properties) explicitly.
 
+The `contrast` variant is transparent at rest and derives its foreground automatically from the surface it sits on. Point `--sd-button-contrast-source` at the color behind the button (it defaults to the themed page background `--color-bg-default`, so it already follows the light/dark theme). The derived color is exposed as `--sd-button-contrast-color` and kept across every state — the foreground never changes.
+
+- `--sd-button-contrast-source`
+  - (`contrast` variant) The surface color behind the button, used to derive a legible foreground and the hover/pressed shades. Defaults to `--color-bg-default`.
+- `--sd-button-contrast-color`
+  - (`contrast` variant) The derived foreground color (computed from `--sd-button-contrast-source`). Used for the text/icon color in every state. Override to pin the foreground.
 - `--sd-button-background-color`
   - Background color in the default (rest) state.
 - `--sd-button-color`

package/scss/_button.scss

@@ -19,6 +19,7 @@
 	box-sizing: border-box;
 	vertical-align: middle;
 	min-height: 36px;
+	height: min-content;
 	padding: var(--spacing-x3, 6px) var(--spacing-x4, 8px);
 	border-radius: var(--radius-s, 4px);
 	cursor: pointer;

package/scss/_config.scss

@@ -4,6 +4,33 @@
 // and the public mixins (_button.scss). Keep selector-agnostic: declarations only,
 // callers provide the selector (`:host(...)` for the component, `&` for consumers).
 
+// Returns a foreground color that stays legible on `$variable` (a color or a
+// custom property holding one): near-black on light backgrounds, white on dark
+// ones. It reads the source's relative-color `y` (XYZ luminance) to pick each
+// channel, so the whole expression must reach the browser verbatim — it is
+// interpolated as an unquoted string so Sass does not try to evaluate the CSS
+// round()/min()/max() or the `y` keyword at compile time.
+@function get-contrast-color($variable) {
+	// 0.18 is the geometric mean between black and white in XYZ color space.
+	$mid-gray: 0.18;
+	$lightening-factor: 17.6%;
+	$channel: "round(up, min(1, max(0, #{$mid-gray} - y)), 1)";
+	@return #{"color-mix(in oklab, color(from #{$variable} xyz #{$channel} #{$channel} #{$channel}), #fff #{$lightening-factor})"};
+}
+
+// Hover/pressed fill for the contrast variant: a lighter-or-darker shade of the
+// surface, made by stepping its OKLab lightness by a fixed perceptual amount
+// (`$shift`) toward whichever extreme reads as higher contrast. A constant
+// lightness step beats a fixed percentage mix toward the foreground: a vivid
+// mid-toned surface like #e2001a sits close to its near-white foreground, so a
+// 10% mix barely shows, whereas a fixed L step stays equally visible on pale,
+// vivid and dark surfaces alike. `a`/`b` are kept, so it is the same hue at a
+// new lightness. Interpolated as a string so Sass passes the relative color,
+// sign() and calc() through verbatim.
+@function get-contrast-fill($variable, $shift) {
+	@return #{"oklab(from #{$variable} calc(l + sign(0.5 - l) * #{$shift}) a b)"};
+}
+
 // Neutral (standard variant) colors per interactive state. These are the fallbacks
 // the engine paints with when no variant overrides the corresponding --sd-button-*.
 $neutral: (
@@ -31,6 +58,11 @@ $neutral: (
 $_custom-bg: var(--sd-button-background-color, #{map.get(map.get($neutral, "base"), "bg")});
 $_custom-fg: var(--sd-button-color, #{map.get(map.get($neutral, "base"), "fg")});
 
+// Contrast variant source: the surface color the button sits on. The variant
+// derives a legible foreground from it, defaulting to the themed page background
+// so it adapts to light/dark themes without any consumer override.
+$_contrast-source: var(--sd-button-contrast-source, var(--color-bg-default, #ffffff));
+
 // Per-variant --sd-button-* values. Adding a variant is a single map entry.
 $variants: (
 	"primary": (
@@ -104,11 +136,29 @@ $variants: (
 	// and --sd-button-color, and hover/pressed are derived from them automatically.
 	// Any state can still be pinned by overriding the matching --sd-button-* property.
 	"custom": (
-			"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 12%),
+			"background-color-hover": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 10%),
 			"color-hover": $_custom-fg,
-			"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 22%),
+			"background-color-pressed": color-mix(in oklab, $_custom-bg, var(--color-fg-default, #111111) 20%),
 			"color-pressed": $_custom-fg,
 		),
+	// Transparent at rest with a foreground auto-derived from the surface behind
+	// the button (--sd-button-contrast-source) so it stays legible on light or
+	// dark backgrounds. The derived color is computed once into the intermediate
+	// --sd-button-contrast-color and kept across every state (the foreground never
+	// changes). Hover/pressed fill the background with a lighter-or-darker shade of
+	// the surface via a perceptually-uniform OKLab lightness step, so the feedback
+	// reads equally on pale, vivid and dark surfaces. Pin the foreground by
+	// overriding --sd-button-contrast-color, or any --sd-button-* for one state.
+	"contrast": (
+			"contrast-color": get-contrast-color($_contrast-source),
+			"background-color": transparent,
+			"color": var(--sd-button-contrast-color),
+			"background-color-hover": get-contrast-fill($_contrast-source, 0.1),
+			"color-hover": var(--sd-button-contrast-color),
+			"background-color-pressed": get-contrast-fill($_contrast-source, 0.2),
+			"color-pressed": var(--sd-button-contrast-color),
+			"background-color-disabled": transparent,
+		),
 );
 
 // Paint one interactive state: reads the public --sd-button-* override with the