feat: allow pilot via class as host-context

src/components/dyne-button/dyne-button.scss

@@ -4,19 +4,39 @@
   display: block;
 }
 
-$variants: 'primary', 'secondary', 'tertiary', 'background';
-
-@each $variant in $variants {
-  $alias: str-slice($variant, 1, 1);
-  :host([color='#{$variant}']),
-  :host([color='#{$alias}']) {
-    --md-sys-color-primary: var(--md-sys-color-#{$variant});
-    --md-sys-color-on-primary: var(--md-sys-color-on-#{$variant});
-    --md-sys-color-primary-container: var(--md-sys-color-#{$variant}-container);
-    --md-sys-color-on-primary-container: var(--md-sys-color-on-#{$variant}-container);
-    & * {
-      --_outline-color: var(--md-sys-color-#{$variant});
-    }
+@mixin colorVariant($variant) {
+  --md-sys-color-primary: var(--md-sys-color-#{$variant});
+  --md-sys-color-on-primary: var(--md-sys-color-on-#{$variant});
+  --md-sys-color-primary-container: var(--md-sys-color-#{$variant}-container);
+  --md-sys-color-on-primary-container: var(--md-sys-color-on-#{$variant}-container);
+  & * {
+    --_outline-color: var(--md-sys-color-#{$variant});
+  }
+}
+
+$variants: (
+  'primary': 'purple',
+  'secondary': 'green',
+  'tertiary': 'orange',
+  'black': 'black',
+);
+
+@each $variant, $alias in $variants {
+  :host([color='#{$variant}']) {
+    @include colorVariant($variant);
+  }
+
+  :host-context(.#{$alias}):host([color='primary']) {
+    @include colorVariant($variant);
+  }
+  :host-context(.#{$alias}):host([color='secondary']) {
+    @include colorVariant($variant);
+  }
+  :host-context(.#{$alias}):host([color='tertiary']) {
+    @include colorVariant($variant);
+  }
+  :host-context(.#{$alias}):host([color='black']) {
+    @include colorVariant($variant);
   }
 }
 

src/css/dark-hc.css

@@ -0,0 +1,71 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(253 249 255);
+  --md-sys-color-surface-tint: rgb(196 192 255);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(200 197 255);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(253 249 255);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(202 199 238);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(255 249 250);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(255 178 238);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 249 249);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 186 177);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(19 19 24);
+  --md-sys-color-on-background: rgb(229 225 233);
+  --md-sys-color-surface: rgb(20 19 19);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(72 70 75);
+  --md-sys-color-on-surface-variant: rgb(255 249 255);
+  --md-sys-color-outline: rgb(206 201 207);
+  --md-sys-color-outline-variant: rgb(206 201 207);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(230 226 224);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(34 28 110);
+  --md-sys-color-primary-fixed: rgb(232 228 255);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(200 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(13 0 89);
+  --md-sys-color-secondary-fixed: rgb(232 228 255);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(202 199 238);
+  --md-sys-color-on-secondary-fixed-variant: rgb(20 19 48);
+  --md-sys-color-tertiary-fixed: rgb(255 221 244);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(255 178 238);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(48 0 45);
+  --md-sys-color-surface-dim: rgb(20 19 19);
+  --md-sys-color-surface-bright: rgb(58 57 56);
+  --md-sys-color-surface-container-lowest: rgb(15 14 14);
+  --md-sys-color-surface-container-low: rgb(28 27 27);
+  --md-sys-color-surface-container: rgb(32 31 31);
+  --md-sys-color-surface-container-high: rgb(43 42 41);
+  --md-sys-color-surface-container-highest: rgb(54 52 52);
+  --md-extended-color-orange-color: rgb(255 250 248);
+  --md-extended-color-orange-on-color: rgb(0 0 0);
+  --md-extended-color-orange-color-container: rgb(255 188 148);
+  --md-extended-color-orange-on-color-container: rgb(0 0 0);
+  --md-extended-color-green-color: rgb(235 255 251);
+  --md-extended-color-green-on-color: rgb(0 0 0);
+  --md-extended-color-green-color-container: rgb(127 218 207);
+  --md-extended-color-green-on-color-container: rgb(0 0 0);
+  --md-extended-color-purple-color: rgb(253 249 255);
+  --md-extended-color-purple-on-color: rgb(0 0 0);
+  --md-extended-color-purple-color-container: rgb(200 197 255);
+  --md-extended-color-purple-on-color-container: rgb(0 0 0);
+  --md-extended-color-black-color: rgb(251 251 251);
+  --md-extended-color-black-on-color: rgb(0 0 0);
+  --md-extended-color-black-color-container: rgb(203 203 203);
+  --md-extended-color-black-on-color-container: rgb(0 0 0);
+  --md-extended-color-transparent-color: rgb(255 255 255);
+  --md-extended-color-transparent-on-color: rgb(0 0 0);
+  --md-extended-color-transparent-color-container: rgb(226 210 193);
+  --md-extended-color-transparent-on-color-container: rgb(0 0 0);
+}

src/css/dark-mc.css

@@ -0,0 +1,71 @@
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(200 197 255);
+  --md-sys-color-surface-tint: rgb(196 192 255);
+  --md-sys-color-on-primary: rgb(13 0 89);
+  --md-sys-color-primary-container: rgb(139 135 221);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(202 199 238);
+  --md-sys-color-on-secondary: rgb(20 19 48);
+  --md-sys-color-secondary-container: rgb(143 141 177);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(255 178 238);
+  --md-sys-color-on-tertiary: rgb(48 0 45);
+  --md-sys-color-tertiary-container: rgb(197 118 182);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 186 177);
+  --md-sys-color-on-error: rgb(55 0 1);
+  --md-sys-color-error-container: rgb(255 84 73);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(19 19 24);
+  --md-sys-color-on-background: rgb(229 225 233);
+  --md-sys-color-surface: rgb(20 19 19);
+  --md-sys-color-on-surface: rgb(254 250 248);
+  --md-sys-color-surface-variant: rgb(72 70 75);
+  --md-sys-color-on-surface-variant: rgb(206 201 207);
+  --md-sys-color-outline: rgb(166 161 167);
+  --md-sys-color-outline-variant: rgb(134 130 136);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(230 226 224);
+  --md-sys-color-inverse-on-surface: rgb(43 42 41);
+  --md-sys-color-inverse-primary: rgb(65 61 141);
+  --md-sys-color-primary-fixed: rgb(227 223 255);
+  --md-sys-color-on-primary-fixed: rgb(9 0 75);
+  --md-sys-color-primary-fixed-dim: rgb(196 192 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(47 42 122);
+  --md-sys-color-secondary-fixed: rgb(227 223 255);
+  --md-sys-color-on-secondary-fixed: rgb(15 13 43);
+  --md-sys-color-secondary-fixed-dim: rgb(198 195 233);
+  --md-sys-color-on-secondary-fixed-variant: rgb(52 51 82);
+  --md-sys-color-tertiary-fixed: rgb(255 215 242);
+  --md-sys-color-on-tertiary-fixed: rgb(39 0 36);
+  --md-sys-color-tertiary-fixed-dim: rgb(255 171 237);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(92 26 85);
+  --md-sys-color-surface-dim: rgb(20 19 19);
+  --md-sys-color-surface-bright: rgb(58 57 56);
+  --md-sys-color-surface-container-lowest: rgb(15 14 14);
+  --md-sys-color-surface-container-low: rgb(28 27 27);
+  --md-sys-color-surface-container: rgb(32 31 31);
+  --md-sys-color-surface-container-high: rgb(43 42 41);
+  --md-sys-color-surface-container-highest: rgb(54 52 52);
+  --md-extended-color-orange-color: rgb(255 188 148);
+  --md-extended-color-orange-on-color: rgb(42 15 0);
+  --md-extended-color-orange-color-container: rgb(216 120 52);
+  --md-extended-color-orange-on-color-container: rgb(0 0 0);
+  --md-extended-color-green-color: rgb(127 218 207);
+  --md-extended-color-green-on-color: rgb(0 26 23);
+  --md-extended-color-green-color-container: rgb(65 159 149);
+  --md-extended-color-green-on-color-container: rgb(0 0 0);
+  --md-extended-color-purple-color: rgb(200 197 255);
+  --md-extended-color-purple-on-color: rgb(13 0 89);
+  --md-extended-color-purple-color-container: rgb(139 135 221);
+  --md-extended-color-purple-on-color-container: rgb(0 0 0);
+  --md-extended-color-black-color: rgb(203 203 203);
+  --md-extended-color-black-on-color: rgb(22 22 22);
+  --md-extended-color-black-color-container: rgb(145 145 145);
+  --md-extended-color-black-on-color-container: rgb(0 0 0);
+  --md-extended-color-transparent-color: rgb(255 255 255);
+  --md-extended-color-transparent-on-color: rgb(56 47 36);
+  --md-extended-color-transparent-color-container: rgb(226 210 193);
+  --md-extended-color-transparent-on-color-container: rgb(38 30 20);
+}

src/css/dark.css

@@ -0,0 +1,71 @@
+.dark {
+  --md-sys-color-primary: rgb(196 192 255);
+  --md-sys-color-surface-tint: rgb(196 192 255);
+  --md-sys-color-on-primary: rgb(41 36 116);
+  --md-sys-color-primary-container: rgb(56 52 132);
+  --md-sys-color-on-primary-container: rgb(211 207 255);
+  --md-sys-color-secondary: rgb(198 195 233);
+  --md-sys-color-on-secondary: rgb(46 45 76);
+  --md-sys-color-secondary-container: rgb(62 60 92);
+  --md-sys-color-on-secondary-container: rgb(212 209 248);
+  --md-sys-color-tertiary: rgb(255 171 237);
+  --md-sys-color-on-tertiary: rgb(85 19 79);
+  --md-sys-color-tertiary-container: rgb(103 36 95);
+  --md-sys-color-on-tertiary-container: rgb(255 193 239);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(19 19 24);
+  --md-sys-color-on-background: rgb(229 225 233);
+  --md-sys-color-surface: rgb(20 19 19);
+  --md-sys-color-on-surface: rgb(230 226 224);
+  --md-sys-color-surface-variant: rgb(72 70 75);
+  --md-sys-color-on-surface-variant: rgb(202 197 203);
+  --md-sys-color-outline: rgb(147 143 149);
+  --md-sys-color-outline-variant: rgb(72 70 75);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(230 226 224);
+  --md-sys-color-inverse-on-surface: rgb(49 48 47);
+  --md-sys-color-inverse-primary: rgb(88 85 166);
+  --md-sys-color-primary-fixed: rgb(227 223 255);
+  --md-sys-color-on-primary-fixed: rgb(19 7 96);
+  --md-sys-color-primary-fixed-dim: rgb(196 192 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(64 60 140);
+  --md-sys-color-secondary-fixed: rgb(227 223 255);
+  --md-sys-color-on-secondary-fixed: rgb(25 24 54);
+  --md-sys-color-secondary-fixed-dim: rgb(198 195 233);
+  --md-sys-color-on-secondary-fixed-variant: rgb(69 67 99);
+  --md-sys-color-tertiary-fixed: rgb(255 215 242);
+  --md-sys-color-on-tertiary-fixed: rgb(57 0 53);
+  --md-sys-color-tertiary-fixed-dim: rgb(255 171 237);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(112 44 103);
+  --md-sys-color-surface-dim: rgb(20 19 19);
+  --md-sys-color-surface-bright: rgb(58 57 56);
+  --md-sys-color-surface-container-lowest: rgb(15 14 14);
+  --md-sys-color-surface-container-low: rgb(28 27 27);
+  --md-sys-color-surface-container: rgb(32 31 31);
+  --md-sys-color-surface-container-high: rgb(43 42 41);
+  --md-sys-color-surface-container-highest: rgb(54 52 52);
+  --md-extended-color-orange-color: rgb(255 182 138);
+  --md-extended-color-orange-on-color: rgb(82 35 0);
+  --md-extended-color-orange-color-container: rgb(181 92 25);
+  --md-extended-color-orange-on-color-container: rgb(255 255 255);
+  --md-extended-color-green-color: rgb(123 214 203);
+  --md-extended-color-green-on-color: rgb(0 55 50);
+  --md-extended-color-green-color-container: rgb(25 130 121);
+  --md-extended-color-green-on-color-container: rgb(255 255 255);
+  --md-extended-color-purple-color: rgb(196 192 255);
+  --md-extended-color-purple-on-color: rgb(41 36 116);
+  --md-extended-color-purple-color-container: rgb(56 52 132);
+  --md-extended-color-purple-on-color-container: rgb(211 207 255);
+  --md-extended-color-black-color: rgb(198 198 198);
+  --md-extended-color-black-on-color: rgb(48 48 48);
+  --md-extended-color-black-color-container: rgb(0 0 0);
+  --md-extended-color-black-on-color-container: rgb(150 150 150);
+  --md-extended-color-transparent-color: rgb(255 255 255);
+  --md-extended-color-transparent-on-color: rgb(56 47 36);
+  --md-extended-color-transparent-color-container: rgb(226 210 193);
+  --md-extended-color-transparent-on-color-container: rgb(72 62 50);
+}

src/css/light-hc.css

@@ -0,0 +1,71 @@
+.light-high-contrast {
+  --md-sys-color-primary: rgb(26 18 102);
+  --md-sys-color-surface-tint: rgb(88 85 166);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(60 56 136);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(32 31 61);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(65 63 95);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(68 1 63);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(107 40 99);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(78 0 2);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(140 0 9);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(252 248 255);
+  --md-sys-color-on-background: rgb(28 27 32);
+  --md-sys-color-surface: rgb(253 248 247);
+  --md-sys-color-on-surface: rgb(0 0 0);
+  --md-sys-color-surface-variant: rgb(230 225 231);
+  --md-sys-color-on-surface-variant: rgb(37 35 40);
+  --md-sys-color-outline: rgb(68 66 71);
+  --md-sys-color-outline-variant: rgb(68 66 71);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(49 48 47);
+  --md-sys-color-inverse-on-surface: rgb(255 255 255);
+  --md-sys-color-inverse-primary: rgb(237 233 255);
+  --md-sys-color-primary-fixed: rgb(60 56 136);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(37 31 113);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(65 63 95);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(43 41 72);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(107 40 99);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(81 15 75);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(221 217 216);
+  --md-sys-color-surface-bright: rgb(253 248 247);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(247 243 241);
+  --md-sys-color-surface-container: rgb(241 237 235);
+  --md-sys-color-surface-container-high: rgb(236 231 230);
+  --md-sys-color-surface-container-highest: rgb(230 226 224);
+  --md-extended-color-orange-color: rgb(60 24 0);
+  --md-extended-color-orange-on-color: rgb(255 255 255);
+  --md-extended-color-orange-color-container: rgb(110 50 0);
+  --md-extended-color-orange-on-color-container: rgb(255 255 255);
+  --md-extended-color-green-color: rgb(0 39 36);
+  --md-extended-color-green-on-color: rgb(255 255 255);
+  --md-extended-color-green-color-container: rgb(0 76 70);
+  --md-extended-color-green-on-color-container: rgb(255 255 255);
+  --md-extended-color-purple-color: rgb(26 18 102);
+  --md-extended-color-purple-on-color: rgb(255 255 255);
+  --md-extended-color-purple-color-container: rgb(60 56 136);
+  --md-extended-color-purple-on-color-container: rgb(255 255 255);
+  --md-extended-color-black-color: rgb(0 0 0);
+  --md-extended-color-black-on-color: rgb(255 255 255);
+  --md-extended-color-black-color-container: rgb(38 38 38);
+  --md-extended-color-black-on-color-container: rgb(255 255 255);
+  --md-extended-color-transparent-color: rgb(41 33 22);
+  --md-extended-color-transparent-on-color: rgb(255 255 255);
+  --md-extended-color-transparent-color-container: rgb(75 65 53);
+  --md-extended-color-transparent-on-color-container: rgb(255 255 255);
+}