@filip.mazev/blocks 1.4.10 → 1.4.12

package/README.md

@@ -18,7 +18,7 @@ ng add @filip.mazev/blocks
 
 When you run the command above, the Angular CLI will execute our custom schematic to handle the boilerplate for you:
 
-* Theme selection: White is the CLI default; Blue, Purple, Orange, Red, Green and Cyberpunk are also available. Use `--theme=blue` for the Blue palette based on `#217eff`.
+* Palette selection: Graphite / Sky Blue is the CLI default. Azure / Coral, Violet / Teal, Tangerine / Indigo, Scarlet / Cyan, Lime / Violet, and Cyberpunk are also available. Use `--theme=azure-coral` to select Azure / Coral.
 * Dependency Management: Automatically adds the latest versions of the Blocks ecosystem to your package.json and runs npm install.
 * SCSS Injection: Intelligently locates your project's global stylesheet (styles.scss or styles.sass) and injects the required @use statements, mixins, and both light/dark mode CSS variables based on your theme selection.
 
@@ -37,16 +37,28 @@ Then, manually configure your styles.scss:
 
 @layer base {
     :root {
-        @include bx-theme($white-light-theme);
+        @include bx-theme($graphite-sky-blue-light-theme);
     }
 
     [data-theme='dark'] {
-        @include bx-theme($white-dark-theme);
+        @include bx-theme($graphite-sky-blue-dark-theme);
     }
 }
 ```
 
 
+## Palettes
+
+Use paired palette IDs consistently in the CLI and `ThemingService.setPalette()`. For example:
+
+```sh
+ng add @filip.mazev/blocks --theme=azure-coral
+```
+
+The Sass exports use the same names: `$azure-coral-light-theme` and `$azure-coral-dark-theme`. Graphite / Sky Blue is the installer default; the playground starts with Graphite / Sky Blue. Previous IDs and Sass names remain aliases.
+
+Buttons and tabs accept `color="accent"` for the second tone. Icons and custom components can use semantic tokens such as `text-accent`, `accent-subtle`, `on-accent`, and `border-accent`. Canvas backgrounds stay neutral; status roles keep their meaning. See [the palette reference](../../documentation/appearance/README.md#palettes) for all seven pairs.
+
 ## Appearance
 
 Version 1.4.0 integrates glass throughout Blocks using its existing semantic theme. Configure it application-wide through `ThemingService.setAppearance({ glassiness: 0.5 })`; use `resetAppearance()` for defaults. Existing controls receive their material automatically, including menus, dialogs and notifications.

package/core/styles/_choice-finish.scss

@@ -0,0 +1,49 @@
+@mixin choice-well {
+    background-image: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--bx-border-strong) 24%, var(--bx-glass-surface)),
+        var(--bx-glass-surface) 55%,
+        color-mix(in srgb, var(--bx-border-strong) 10%, var(--bx-glass-surface))
+    ) !important;
+    border-top-color: var(--bx-border-strong);
+    border-bottom-color: var(--bx-border-default);
+}
+
+@mixin choice-accent-face {
+    background-image: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--bx-color-accent-50) 24%, var(--bx-accent)),
+        var(--bx-accent) 42%,
+        var(--bx-accent) 65%,
+        color-mix(in srgb, var(--bx-border-accent) 18%, var(--bx-accent))
+    ) !important;
+    border-top-color: color-mix(in srgb, var(--bx-color-accent-100) 60%, var(--bx-accent));
+    border-inline-color: var(--bx-accent);
+    border-bottom-color: var(--bx-border-accent);
+}
+
+@mixin choice-thumb {
+    background-image: radial-gradient(
+        circle at 32% 22%,
+        var(--bx-color-accent-50),
+        var(--bx-color-accent-100) 38%,
+        var(--bx-color-accent-300) 80%,
+        var(--bx-color-accent-400)
+    ) !important;
+    border-top-color: var(--bx-color-accent-50);
+    border-inline-color: var(--bx-color-accent-200);
+    border-bottom-color: var(--bx-color-accent-500);
+}
+
+@mixin choice-flat-accessibility {
+    :host-context(.high-contrast) &,
+    :host-context(.bx-high-contrast-scope) & {
+        background-image: none !important;
+        border-color: var(--bx-glass-edge);
+    }
+
+    @media (forced-colors: active) {
+        background-image: none !important;
+        border-color: ButtonText;
+    }
+}

package/core/styles/_helpers.scss

@@ -4,3 +4,4 @@
 @forward 'palettes';
 @forward 'motion';
 @forward 'field-state';
+@forward 'choice-finish';

package/core/styles/_index.scss

@@ -4,6 +4,12 @@
 @forward 'palettes';
 @forward 'theme-engine';
 @forward 'a11y';
+@forward 'themes/graphite-sky-blue-theme';
+@forward 'themes/azure-coral-theme';
+@forward 'themes/violet-teal-theme';
+@forward 'themes/tangerine-indigo-theme';
+@forward 'themes/scarlet-cyan-theme';
+@forward 'themes/lime-violet-theme';
 @forward 'themes/white-theme';
 @forward 'themes/blue-theme';
 @forward 'themes/purple-theme';
@@ -14,3 +20,4 @@
 @forward 'themes/high-contrast-theme';
 @forward 'slider';
 @forward 'validation';
+@forward 'overlay';

package/core/styles/_overlay.scss

@@ -0,0 +1,4 @@
+.cdk-overlay-connected-position-bounding-box.bx-overlay-anchored {
+    position: fixed !important;
+    inset: var(--bx-overlay-anchor-top) auto auto var(--bx-overlay-anchor-left) !important;
+}

package/core/styles/_palettes.scss

@@ -1,4 +1,22 @@
 @use 'sass:map';
+@use 'sass:color';
+
+/* stylelint-disable-next-line scss/at-function-pattern -- The underscore keeps this Sass helper private. */
+@function _tonal-palette($anchor) {
+    @return (
+        50: color.mix(#ffffff, $anchor, 96%),
+        100: color.mix(#ffffff, $anchor, 88%),
+        200: color.mix(#ffffff, $anchor, 72%),
+        300: color.mix(#ffffff, $anchor, 52%),
+        400: color.mix(#ffffff, $anchor, 25%),
+        500: $anchor,
+        600: color.mix(#000000, $anchor, 15%),
+        700: color.mix(#000000, $anchor, 32%),
+        800: color.mix(#000000, $anchor, 52%),
+        900: color.mix(#000000, $anchor, 76%),
+        1000: color.mix(#000000, $anchor, 92%)
+    );
+}
 
 $blue-palette: (
     50: #eff6ff,
@@ -162,7 +180,31 @@ $hc-yellow: #e4d500;
 $hc-cyan: #00f3f3;
 $hc-red: #ff0000;
 $hc-green: #00ff00;
+$graphite-palette: _tonal-palette(#525252) !default;
+$sky-blue-palette: _tonal-palette(#38bdf8) !default;
+$azure-palette: $blue-palette !default;
+$coral-palette: _tonal-palette(#f87763) !default;
+$violet-palette: $purple-palette !default;
+$teal-palette: _tonal-palette(#0d9488) !default;
+$tangerine-palette: $orange-palette !default;
+$indigo-palette: _tonal-palette(#4f78f5) !default;
+$scarlet-palette: $red-palette !default;
+$cyan-palette: _tonal-palette(#0891b2) !default;
+$lime-palette: _tonal-palette(#c4f53d) !default;
+$cool-violet-palette: _tonal-palette(#6842a6) !default;
 $all-palettes: (
+    'graphite': $graphite-palette,
+    'sky-blue': $sky-blue-palette,
+    'azure': $azure-palette,
+    'coral': $coral-palette,
+    'violet': $violet-palette,
+    'teal': $teal-palette,
+    'tangerine': $tangerine-palette,
+    'indigo': $indigo-palette,
+    'scarlet': $scarlet-palette,
+    'cyan': $cyan-palette,
+    'lime': $lime-palette,
+    'cool-violet': $cool-violet-palette,
     'blue': $blue-palette,
     'orange': $orange-palette,
     'purple': $purple-palette,

package/core/styles/_slider.scss

@@ -9,7 +9,7 @@
     border-radius: radius(pill);
     background: linear-gradient(
         to right,
-        var(--bx-primary) 0 var(--bx-slider-progress, 50%),
+        var(--bx-accent) 0 var(--bx-slider-progress, 50%),
         var(--bx-bg-neutral) var(--bx-slider-progress, 50%) 100%
     );
     box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
@@ -28,7 +28,7 @@
         var(--bx-bg-surface);
     border-color: color-mix(
         in srgb,
-        var(--bx-slider-light-color, var(--bx-primary))
+        var(--bx-slider-light-color, var(--bx-accent))
             calc(var(--bx-slider-light-strength, 0.18) * 100%),
         var(--bx-border-strong)
     );
@@ -36,7 +36,7 @@
     box-shadow:
         inset 0 1px 1px rgb(255 255 255 / 45%),
         inset 0 -1px 2px
-            color-mix(in srgb, var(--bx-slider-light-color, var(--bx-primary)) 30%, transparent),
+            color-mix(in srgb, var(--bx-slider-light-color, var(--bx-accent)) 30%, transparent),
         0 2px 5px rgb(0 0 0 / 18%);
 }
 
@@ -90,7 +90,7 @@
         padding: 1px;
         background: radial-gradient(
             circle at var(--bx-slider-light-x, 35%) var(--bx-slider-light-y, 0%),
-            var(--bx-slider-light-color, var(--bx-primary)),
+            var(--bx-slider-light-color, var(--bx-accent)),
             transparent 75%
         );
         opacity: var(--bx-slider-light-strength, 0.25);
@@ -135,7 +135,7 @@ input.bx-slider {
     }
 
     &:focus-visible {
-        outline: 2px solid var(--bx-border-brand);
+        outline: 2px solid var(--bx-border-accent);
         outline-offset: 3px;
         border-radius: radius(pill);
     }

package/core/styles/_theme-engine.scss

@@ -1,6 +1,8 @@
 @use 'sass:map';
 @use 'sass:list';
 @use 'sass:string';
+@use 'sass:color';
+@use 'sass:math';
 @use 'palettes' as *;
 
 $required-theme-keys: (
@@ -18,6 +20,17 @@ $required-theme-keys: (
     'primary-active',
     'primary-subtle',
     'on-primary',
+    'on-primary-hover',
+    'on-primary-active',
+    'accent',
+    'accent-hover',
+    'accent-active',
+    'accent-subtle',
+    'on-accent',
+    'on-accent-hover',
+    'on-accent-active',
+    'text-accent',
+    'border-accent',
     'text-heading',
     'text-primary',
     'text-secondary',
@@ -58,7 +71,8 @@ $required-theme-keys: (
     'scroll-bg',
     'scroll-thumb',
     'scroll-thumb-hover',
-    'meta-brand-palette'
+    'meta-brand-palette',
+    'meta-accent-palette'
 );
 
 @function validate-theme($theme, $theme-name) {
@@ -79,167 +93,165 @@ $required-theme-keys: (
     @return $theme;
 }
 
-@function make-light-theme($surface-brand, $accent: $surface-brand, $overrides: ()) {
-    $base: (
-        'bg-canvas': #ffffff,
-        'bg-surface': #ffffff,
-        'bg-surface-alt': get-color-from-palette($surface-brand, 50),
-        'bg-element': get-color-from-palette('neutral', 100),
-        'bg-element-hover': get-color-from-palette($surface-brand, 200),
-        'bg-element-active': get-color-from-palette($surface-brand, 300),
-        'bg-neutral': get-color-from-palette('neutral', 100),
-        'bg-neutral-hover': get-color-from-palette('neutral', 50),
-        'bg-neutral-active': get-color-from-palette('neutral', 200),
-        'primary': get-color-from-palette($accent, 500),
-        'primary-hover': get-color-from-palette($accent, 600),
-        'primary-active': get-color-from-palette($accent, 700),
-        'primary-subtle': rgba(get-color-from-palette($accent, 300), 0.6),
-        'on-primary': get-color-from-palette('neutral', 100),
-        'text-heading': get-color-from-palette('neutral', 900),
-        'text-primary': get-color-from-palette('neutral', 700),
-        'text-secondary': get-color-from-palette('neutral', 500),
-        'text-brand': get-color-from-palette($accent, 700),
-        'text-inverse': get-color-from-palette('neutral', 100),
-        'text-info': get-color-from-palette('information', 700),
-        'text-warn': get-color-from-palette('warn', 700),
-        'text-success': get-color-from-palette('success', 700),
-        'text-danger': get-color-from-palette('danger', 700),
-        'border-subtle': get-color-from-palette('neutral', 200),
-        'border-default': get-color-from-palette('neutral', 300),
-        'border-strong': get-color-from-palette('neutral', 400),
-        'border-brand': get-color-from-palette($accent, 400),
-        'border-info': get-color-from-palette('information', 400),
-        'border-success': get-color-from-palette('success', 400),
-        'border-warn': get-color-from-palette('warn', 400),
-        'border-danger': get-color-from-palette('danger', 400),
-        'bg-info': get-color-from-palette('information', 100),
-        'bg-info-hover': get-color-from-palette('information', 200),
-        'bg-info-active': get-color-from-palette('information', 300),
-        'bg-info-disabled': get-color-from-palette('information', 50),
-        'bg-info-subtle': rgb(get-color-from-palette('information', 50), 0.95),
-        'bg-success': get-color-from-palette('success', 100),
-        'bg-success-hover': get-color-from-palette('success', 200),
-        'bg-success-active': get-color-from-palette('success', 300),
-        'bg-success-disabled': get-color-from-palette('success', 50),
-        'bg-success-subtle': rgb(get-color-from-palette('success', 50), 0.95),
-        'bg-warn': get-color-from-palette('warn', 100),
-        'bg-warn-hover': get-color-from-palette('warn', 200),
-        'bg-warn-active': get-color-from-palette('warn', 300),
-        'bg-warn-disabled': get-color-from-palette('warn', 50),
-        'bg-warn-subtle': rgb(get-color-from-palette('warn', 50), 0.95),
-        'bg-danger': get-color-from-palette('danger', 100),
-        'bg-danger-hover': get-color-from-palette('danger', 200),
-        'bg-danger-active': get-color-from-palette('danger', 300),
-        'bg-danger-disabled': get-color-from-palette('danger', 50),
-        'bg-danger-subtle': rgb(get-color-from-palette('danger', 50), 0.95),
-        'scroll-bg': get-color-from-palette($surface-brand, 100),
-        'scroll-thumb': linear-gradient(
-                278deg,
-                get-color-from-palette($accent, 300) -10.44%,
-                get-color-from-palette($accent, 400) 100%
-            ),
-        'scroll-thumb-hover': linear-gradient(
-                278deg,
-                get-color-from-palette($accent, 400) -10.44%,
-                get-color-from-palette($accent, 700) 100%
-            ),
-        'meta-brand-palette': $accent,
+/* stylelint-disable scss/at-function-pattern -- Underscores keep the Sass helpers private. */
+@function _luminance($value) {
+    $result: 0;
+    $weights: (
+        'red': 0.2126,
+        'green': 0.7152,
+        'blue': 0.0722,
     );
-    $merged-theme: map.merge($base, $overrides);
 
-    @return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-light');
+    @each $channel, $weight in $weights {
+        $part: math.div(color.channel($value, $channel, $space: rgb), 255);
+
+        /* stylelint-disable-next-line number-max-precision -- Preserve the exact sRGB linearization threshold. */
+        @if $part <= 0.04045 {
+            $part: math.div($part, 12.92);
+        } @else {
+            $part: math.pow(math.div($part + 0.055, 1.055), 2.4);
+        }
+
+        $result: $result + $part * $weight;
+    }
+
+    @return $result;
+}
+
+@function _contrast($first, $second) {
+    $a: _luminance($first);
+    $b: _luminance($second);
+
+    @return math.div(math.max($a, $b) + 0.05, math.min($a, $b) + 0.05);
+}
+
+@function _on-color($background) {
+    $dark: #0b0b0b;
+
+    @if _contrast($dark, $background) < 4.5 {
+        $dark: #000000;
+    }
+
+    @if _contrast($dark, $background) >= _contrast(#ffffff, $background) {
+        @return $dark;
+    }
+
+    @return #ffffff;
+}
+
+@function _mode($dark, $light-value, $dark-value) {
+    @if $dark {
+        @return $dark-value;
+    }
+
+    @return $light-value;
 }
 
-@function make-dark-theme($surface-brand, $accent: $surface-brand, $overrides: ()) {
+@function _color-roles($palette, $role, $dark) {
+    $base: get-color-from-palette($palette, _mode($dark, 500, 300));
+    $hover: get-color-from-palette($palette, _mode($dark, 600, 200));
+    $active: get-color-from-palette($palette, _mode($dark, 700, 100));
+    $subtle: get-color-from-palette($palette, _mode($dark, 100, 900));
+    $text: get-color-from-palette($palette, _mode($dark, 800, 200));
+
+    @if _contrast($text, $subtle) < 4.5 {
+        $text: _on-color($subtle);
+    }
+
+    $text-key: 'text-accent';
+    $border-key: 'border-accent';
+
+    @if $role == 'primary' {
+        $text-key: 'text-brand';
+        $border-key: 'border-brand';
+    }
+
+    @return (
+        $role: $base,
+        '#{$role}-hover': $hover,
+        '#{$role}-active': $active,
+        '#{$role}-subtle': $subtle,
+        'on-#{$role}': _on-color($base),
+        'on-#{$role}-hover': _on-color($hover),
+        'on-#{$role}-active': _on-color($active),
+        $text-key: $text,
+        $border-key: get-color-from-palette($palette, _mode($dark, 800, 300))
+    );
+}
+
+@function _make-theme($brand, $accent, $dark, $overrides) {
     $base: (
-        'bg-canvas': #000000,
-        'bg-surface': get-color-from-palette('neutral', 1000),
-        'bg-surface-alt': get-color-from-palette('neutral', 900),
-        'bg-element': get-color-from-palette('neutral', 800),
-        'bg-element-hover': get-color-from-palette($surface-brand, 700),
-        'bg-element-active': get-color-from-palette($surface-brand, 800),
-        'bg-neutral': get-color-from-palette('neutral', 900),
-        'bg-neutral-hover': get-color-from-palette('neutral', 800),
-        'bg-neutral-active': get-color-from-palette('neutral', 600),
-        'primary': get-color-from-palette($accent, 500),
-        'primary-hover': get-color-from-palette($accent, 400),
-        'primary-active': get-color-from-palette($accent, 300),
-        'primary-subtle': rgba(get-color-from-palette($accent, 700), 0.6),
-        'on-primary': #ffffff,
-
-        'text-heading': #ffffff,
-        'text-primary': get-color-from-palette('neutral', 200),
-        'text-secondary': get-color-from-palette('neutral', 400),
-        'text-brand': get-color-from-palette($accent, 300),
-        'text-inverse': get-color-from-palette('neutral', 900),
-        'text-info': get-color-from-palette('information', 400),
-        'text-success': get-color-from-palette('success', 400),
-        'text-warn': get-color-from-palette('warn', 400),
-        'text-danger': get-color-from-palette('danger', 400),
-        'border-subtle': get-color-from-palette('neutral', 900),
-        'border-default': get-color-from-palette('neutral', 800),
-        'border-strong': get-color-from-palette('neutral', 700),
-        'border-brand': get-color-from-palette($accent, 600),
-        'border-info': get-color-from-palette('information', 400),
-        'border-success': get-color-from-palette('success', 400),
-        'border-warn': get-color-from-palette('warn', 400),
-        'border-danger': get-color-from-palette('danger', 400),
-        'bg-info': get-color-from-palette('information', 900),
-        'bg-info-hover': get-color-from-palette('information', 800),
-        'bg-info-active': get-color-from-palette('information', 700),
-        'bg-info-disabled': get-color-from-palette('information', 1000),
-        'bg-info-subtle': rgb(get-color-from-palette('information', 1000), 0.95),
-        'bg-success': get-color-from-palette('success', 900),
-        'bg-success-hover': get-color-from-palette('success', 800),
-        'bg-success-active': get-color-from-palette('success', 700),
-        'bg-success-disabled': get-color-from-palette('success', 1000),
-        'bg-success-subtle': rgb(get-color-from-palette('success', 1000), 0.95),
-        'bg-warn': get-color-from-palette('warn', 900),
-        'bg-warn-hover': get-color-from-palette('warn', 800),
-        'bg-warn-active': get-color-from-palette('warn', 700),
-        'bg-warn-disabled': get-color-from-palette('warn', 1000),
-        'bg-warn-subtle': rgb(get-color-from-palette('warn', 1000), 0.95),
-        'bg-danger': get-color-from-palette('danger', 900),
-        'bg-danger-hover': get-color-from-palette('danger', 800),
-        'bg-danger-active': get-color-from-palette('danger', 700),
-        'bg-danger-disabled': get-color-from-palette('danger', 1000),
-        'bg-danger-subtle': rgb(get-color-from-palette('danger', 1000), 0.95),
-        'scroll-bg': get-color-from-palette($surface-brand, 900),
-        'scroll-thumb': linear-gradient(
-                278deg,
-                get-color-from-palette($accent, 700) -10.44%,
-                get-color-from-palette($accent, 500) 100%
-            ),
-        'scroll-thumb-hover': linear-gradient(
-                278deg,
-                get-color-from-palette($accent, 500) -10.44%,
-                get-color-from-palette($accent, 400) 100%
-            ),
-        'meta-brand-palette': $accent,
+        'bg-canvas': _mode($dark, #ffffff, #000000),
+        'bg-surface': get-color-from-palette('neutral', _mode($dark, 50, 1000)),
+        'bg-surface-alt': get-color-from-palette('neutral', _mode($dark, 50, 900)),
+        'bg-element': get-color-from-palette('neutral', _mode($dark, 100, 800)),
+        'bg-element-hover': get-color-from-palette('neutral', _mode($dark, 200, 700)),
+        'bg-element-active': get-color-from-palette('neutral', _mode($dark, 300, 600)),
+        'bg-neutral': get-color-from-palette('neutral', _mode($dark, 100, 900)),
+        'bg-neutral-hover': get-color-from-palette('neutral', _mode($dark, 50, 800)),
+        'bg-neutral-active': get-color-from-palette('neutral', _mode($dark, 200, 600)),
+        'text-heading': _mode($dark, get-color-from-palette('neutral', 900), #ffffff),
+        'text-primary': get-color-from-palette('neutral', _mode($dark, 700, 200)),
+        'text-secondary': get-color-from-palette('neutral', _mode($dark, 600, 400)),
+        'text-inverse': get-color-from-palette('neutral', _mode($dark, 100, 900)),
+        'border-subtle': get-color-from-palette('neutral', _mode($dark, 200, 900)),
+        'border-default': get-color-from-palette('neutral', _mode($dark, 300, 800)),
+        'border-strong': get-color-from-palette('neutral', _mode($dark, 400, 700)),
+        'scroll-bg': get-color-from-palette('neutral', _mode($dark, 100, 900)),
+        'scroll-thumb': get-color-from-palette($brand, _mode($dark, 700, 400)),
+        'scroll-thumb-hover': get-color-from-palette($brand, _mode($dark, 800, 300)),
+        'meta-brand-palette': $brand,
+        'meta-accent-palette': $accent,
     );
-    $merged-theme: map.merge($base, $overrides);
 
-    @return validate-theme($merged-theme, '#{$surface-brand}-#{$accent}-dark');
+    @each $status,
+        $palette
+            in ('info': 'information', 'success': 'success', 'warn': 'warn', 'danger': 'danger')
+    {
+        $base: map.merge(
+            $base,
+            (
+                'text-#{$status}': get-color-from-palette($palette, _mode($dark, 700, 400)),
+                'border-#{$status}': get-color-from-palette($palette, 400),
+                'bg-#{$status}': get-color-from-palette($palette, _mode($dark, 100, 900)),
+                'bg-#{$status}-hover': get-color-from-palette($palette, _mode($dark, 200, 800)),
+                'bg-#{$status}-active': get-color-from-palette($palette, _mode($dark, 300, 700)),
+                'bg-#{$status}-disabled': get-color-from-palette($palette, _mode($dark, 50, 1000)),
+                'bg-#{$status}-subtle': get-color-from-palette($palette, _mode($dark, 50, 1000)),
+            )
+        );
+    }
+
+    $base: map.merge($base, _color-roles($brand, 'primary', $dark));
+    $base: map.merge($base, _color-roles($accent, 'accent', $dark));
+
+    @return validate-theme(map.merge($base, $overrides), '#{$brand}-#{$accent}');
+}
+
+/* stylelint-enable scss/at-function-pattern */
+@function make-light-theme($brand, $accent: $brand, $overrides: ()) {
+    @return _make-theme($brand, $accent, false, $overrides);
+}
+
+@function make-dark-theme($brand, $accent: $brand, $overrides: ()) {
+    @return _make-theme($brand, $accent, true, $overrides);
 }
 
 @mixin bx-theme($config) {
-    // Glass derives color from the same semantic palette as every existing component.
     --bx-glass-surface: var(--bx-bg-surface);
     --bx-glass-text: var(--bx-text-primary);
     --bx-glass-edge: var(--bx-border-default);
     --bx-glass-accent: var(--bx-primary);
 
     @each $key, $value in $config {
-        @if $key != 'meta-brand-palette' {
+        @if string.index($key, 'meta-') != 1 {
             --bx-#{$key}: #{$value};
         }
+    }
 
-        @if $key == 'meta-brand-palette' {
-            $brand-palette: get-palette($value);
-
-            @each $shade, $color in $brand-palette {
-                --bx-color-primary-#{$shade}: #{$color};
-            }
+    @each $role, $key in ('primary': 'meta-brand-palette', 'accent': 'meta-accent-palette') {
+        @each $shade, $color in get-palette(map.get($config, $key)) {
+            --bx-color-#{$role}-#{$shade}: #{$color};
         }
     }
 }
@@ -260,7 +272,7 @@ $required-theme-keys: (
             border-color: var(--bx-#{$key});
             transition: border-color 0.2s ease-in-out;
         }
-    } @else if not string.index($key, 'scroll-') {
+    } @else if not string.index($key, 'scroll-') and string.index($key, 'meta-') != 1 {
         .bx-bg-#{$key} {
             background-color: var(--bx-#{$key});
             transition: background-color 0.2s ease-in-out;

package/core/styles/themes/_azure-coral-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$azure-coral-light-theme: make-light-theme('azure', 'coral');
+$azure-coral-dark-theme: make-dark-theme('azure', 'coral');

package/core/styles/themes/_blue-theme.scss

@@ -1,4 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'azure-coral-theme' as paired;
 
-$blue-light-theme: make-light-theme('blue');
-$blue-dark-theme: make-dark-theme('blue');
+$blue-light-theme: paired.$azure-coral-light-theme;
+$blue-dark-theme: paired.$azure-coral-dark-theme;

package/core/styles/themes/_cyberpunk-theme.scss

@@ -1,4 +1,5 @@
 @use '../theme-engine' as *;
 
-$cyberpunk-light-theme: make-light-theme('cyber-slate', 'cyber-yellow');
-$cyberpunk-dark-theme: make-dark-theme('cyber-slate', 'cyber-yellow');
+// Yellow actions and blue-slate supporting controls share neutral surfaces.
+$cyberpunk-light-theme: make-light-theme('cyber-yellow', 'cyber-slate');
+$cyberpunk-dark-theme: make-dark-theme('cyber-yellow', 'cyber-slate');

package/core/styles/themes/_graphite-sky-blue-theme.scss

@@ -0,0 +1,19 @@
+@use '../theme-engine' as *;
+@use '../palettes' as *;
+
+$graphite-sky-blue-light-theme: make-light-theme('graphite', 'sky-blue');
+$graphite-sky-blue-dark-theme: make-dark-theme(
+    'graphite',
+    'sky-blue',
+    $overrides: (
+        'primary': #f5f5f5,
+        'primary-hover': #e5e5e5,
+        'primary-active': #d4d4d4,
+        'primary-subtle': get-color-from-palette('neutral', 800),
+        'on-primary': #0b0b0b,
+        'on-primary-hover': #0b0b0b,
+        'on-primary-active': #0b0b0b,
+        'text-brand': #f5f5f5,
+        'border-brand': #d4d4d4,
+    )
+);

package/core/styles/themes/_green-theme.scss

@@ -1,4 +1,5 @@
-@use '../theme-engine' as *;
+// Compatibility aliases. New applications should use the paired palette name.
+@use 'lime-violet-theme' as paired;
 
-$green-light-theme: make-light-theme('green');
-$green-dark-theme: make-dark-theme('green');
+$green-light-theme: paired.$lime-violet-light-theme;
+$green-dark-theme: paired.$lime-violet-dark-theme;