@api-client/ui 0.2.13 → 0.3.0

package/build/src/styles/m3/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../../src/styles/m3/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuejB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  html {\n    /* light */\n    /* Custom */\n    --md-sys-color-primary-light-05a: rgba(0 104 116, 0.05);\n    --md-sys-color-primary-light-08a: rgba(0 104 116, 0.08);\n    --md-sys-color-primary-light-11a: rgba(0 104 116, 0.11);\n    --md-sys-color-primary-light-12a: rgba(0 104 116, 0.12);\n    --md-sys-color-primary-light-13a: rgba(0 104 116, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light: rgb(0 104 116);\n    --md-sys-color-surface-tint-light: rgb(0 104 116);\n    --md-sys-color-on-primary-light: rgb(255 255 255);\n    --md-sys-color-primary-container-light: rgb(158 239 254);\n    --md-sys-color-on-primary-container-light: rgb(0 31 36);\n    --md-sys-color-secondary-light: rgb(74 98 103);\n    --md-sys-color-on-secondary-light: rgb(255 255 255);\n    --md-sys-color-secondary-container-light: rgb(205 231 236);\n    --md-sys-color-on-secondary-container-light: rgb(5 31 35);\n    --md-sys-color-tertiary-light: rgb(83 94 125);\n    --md-sys-color-on-tertiary-light: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light: rgb(218 226 255);\n    --md-sys-color-on-tertiary-container-light: rgb(15 26 55);\n    --md-sys-color-error-light: rgb(186 26 26);\n    --md-sys-color-on-error-light: rgb(255 255 255);\n    --md-sys-color-error-container-light: rgb(255 218 214);\n    --md-sys-color-on-error-container-light: rgb(65 0 2);\n    --md-sys-color-background-light: rgb(245 250 251);\n    --md-sys-color-on-background-light: rgb(23 29 30);\n    --md-sys-color-surface-light: rgb(245 250 251);\n    --md-sys-color-on-surface-light: rgb(23 29 30);\n    --md-sys-color-surface-variant-light: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light: rgb(63 72 74);\n    --md-sys-color-outline-light: rgb(111 121 123);\n    --md-sys-color-outline-variant-light: rgb(191 200 202);\n    --md-sys-color-shadow-light: rgb(0 0 0);\n    --md-sys-color-scrim-light: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light: rgb(236 242 243);\n    --md-sys-color-inverse-primary-light: rgb(130 211 225);\n    --md-sys-color-primary-fixed-light: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-light: rgb(0 31 36);\n    --md-sys-color-primary-fixed-dim-light: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-light: rgb(0 79 88);\n    --md-sys-color-secondary-fixed-light: rgb(205 231 236);\n    --md-sys-color-on-secondary-fixed-light: rgb(5 31 35);\n    --md-sys-color-secondary-fixed-dim-light: rgb(177 203 208);\n    --md-sys-color-on-secondary-fixed-variant-light: rgb(51 75 79);\n    --md-sys-color-tertiary-fixed-light: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-light: rgb(15 26 55);\n    --md-sys-color-tertiary-fixed-dim-light: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-light: rgb(59 70 101);\n    --md-sys-color-surface-dim-light: rgb(213 219 220);\n    --md-sys-color-surface-bright-light: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light: rgb(239 245 246);\n    --md-sys-color-surface-container-light: rgb(233 239 240);\n    --md-sys-color-surface-container-high-light: rgb(227 233 234);\n    --md-sys-color-surface-container-highest-light: rgb(222 227 229);\n\n    /* light high contrast */\n    /* Custom */\n    --md-sys-color-primary-light-hc-05a: rgba(0 39 44, 0.05);\n    --md-sys-color-primary-light-hc-08a: rgba(0 39 44, 0.08);\n    --md-sys-color-primary-light-hc-11a: rgba(0 39 44, 0.11);\n    --md-sys-color-primary-light-hc-12a: rgba(0 39 44, 0.12);\n    --md-sys-color-primary-light-hc-13a: rgba(0 39 44, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light-hc: rgb(0 39 44);\n    --md-sys-color-surface-tint-light-hc: rgb(0 104 116);\n    --md-sys-color-on-primary-light-hc: rgb(255 255 255);\n    --md-sys-color-primary-container-light-hc: rgb(0 74 83);\n    --md-sys-color-on-primary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-light-hc: rgb(12 38 42);\n    --md-sys-color-on-secondary-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-container-light-hc: rgb(47 71 75);\n    --md-sys-color-on-secondary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-light-hc: rgb(22 33 62);\n    --md-sys-color-on-tertiary-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light-hc: rgb(55 66 96);\n    --md-sys-color-on-tertiary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-error-light-hc: rgb(78 0 2);\n    --md-sys-color-on-error-light-hc: rgb(255 255 255);\n    --md-sys-color-error-container-light-hc: rgb(140 0 9);\n    --md-sys-color-on-error-container-light-hc: rgb(255 255 255);\n    --md-sys-color-background-light-hc: rgb(245 250 251);\n    --md-sys-color-on-background-light-hc: rgb(23 29 30);\n    --md-sys-color-surface-light-hc: rgb(245 250 251);\n    --md-sys-color-on-surface-light-hc: rgb(0 0 0);\n    --md-sys-color-surface-variant-light-hc: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light-hc: rgb(28 37 39);\n    --md-sys-color-outline-light-hc: rgb(59 68 70);\n    --md-sys-color-outline-variant-light-hc: rgb(59 68 70);\n    --md-sys-color-shadow-light-hc: rgb(0 0 0);\n    --md-sys-color-scrim-light-hc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light-hc: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light-hc: rgb(255 255 255);\n    --md-sys-color-inverse-primary-light-hc: rgb(192 245 255);\n    --md-sys-color-primary-fixed-light-hc: rgb(0 74 83);\n    --md-sys-color-on-primary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-primary-fixed-dim-light-hc: rgb(0 50 57);\n    --md-sys-color-on-primary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-light-hc: rgb(47 71 75);\n    --md-sys-color-on-secondary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-dim-light-hc: rgb(24 48 52);\n    --md-sys-color-on-secondary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-light-hc: rgb(55 66 96);\n    --md-sys-color-on-tertiary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-dim-light-hc: rgb(33 44 73);\n    --md-sys-color-on-tertiary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-surface-dim-light-hc: rgb(213 219 220);\n    --md-sys-color-surface-bright-light-hc: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light-hc: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light-hc: rgb(239 245 246);\n    --md-sys-color-surface-container-light-hc: rgb(233 239 240);\n    --md-sys-color-surface-container-high-light-hc: rgb(227 233 234);\n    --md-sys-color-surface-container-highest-light-hc: rgb(222 227 229);\n\n    /* light medium contrast */\n    /* Custom */\n    --md-sys-color-primary-light-mc-05a: rgba(0 74 83, 0.05);\n    --md-sys-color-primary-light-mc-08a: rgba(0 74 83, 0.08);\n    --md-sys-color-primary-light-mc-11a: rgba(0 74 83, 0.11);\n    --md-sys-color-primary-light-mc-12a: rgba(0 74 83, 0.12);\n    --md-sys-color-primary-light-mc-13a: rgba(0 74 83, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light-mc: rgb(0 74 83);\n    --md-sys-color-surface-tint-light-mc: rgb(0 104 116);\n    --md-sys-color-on-primary-light-mc: rgb(255 255 255);\n    --md-sys-color-primary-container-light-mc: rgb(37 127 140);\n    --md-sys-color-on-primary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-light-mc: rgb(47 71 75);\n    --md-sys-color-on-secondary-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-container-light-mc: rgb(96 121 125);\n    --md-sys-color-on-secondary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-light-mc: rgb(55 66 96);\n    --md-sys-color-on-tertiary-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light-mc: rgb(105 116 149);\n    --md-sys-color-on-tertiary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-error-light-mc: rgb(140 0 9);\n    --md-sys-color-on-error-light-mc: rgb(255 255 255);\n    --md-sys-color-error-container-light-mc: rgb(218 52 46);\n    --md-sys-color-on-error-container-light-mc: rgb(255 255 255);\n    --md-sys-color-background-light-mc: rgb(245 250 251);\n    --md-sys-color-on-background-light-mc: rgb(23 29 30);\n    --md-sys-color-surface-light-mc: rgb(245 250 251);\n    --md-sys-color-on-surface-light-mc: rgb(23 29 30);\n    --md-sys-color-surface-variant-light-mc: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light-mc: rgb(59 68 70);\n    --md-sys-color-outline-light-mc: rgb(87 97 99);\n    --md-sys-color-outline-variant-light-mc: rgb(115 124 126);\n    --md-sys-color-shadow-light-mc: rgb(0 0 0);\n    --md-sys-color-scrim-light-mc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light-mc: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light-mc: rgb(236 242 243);\n    --md-sys-color-inverse-primary-light-mc: rgb(130 211 225);\n    --md-sys-color-primary-fixed-light-mc: rgb(37 127 140);\n    --md-sys-color-on-primary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-primary-fixed-dim-light-mc: rgb(0 102 114);\n    --md-sys-color-on-primary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-light-mc: rgb(96 121 125);\n    --md-sys-color-on-secondary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-dim-light-mc: rgb(72 96 100);\n    --md-sys-color-on-secondary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-light-mc: rgb(105 116 149);\n    --md-sys-color-on-tertiary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-dim-light-mc: rgb(80 91 123);\n    --md-sys-color-on-tertiary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-surface-dim-light-mc: rgb(213 219 220);\n    --md-sys-color-surface-bright-light-mc: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light-mc: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light-mc: rgb(239 245 246);\n    --md-sys-color-surface-container-light-mc: rgb(233 239 240);\n    --md-sys-color-surface-container-high-light-mc: rgb(227 233 234);\n    --md-sys-color-surface-container-highest-light-mc: rgb(222 227 229);\n\n    /* dark */\n    /* Custom */\n    --md-sys-color-primary-dark-05a: rgba(130 211 225, 0.05);\n    --md-sys-color-primary-dark-08a: rgba(130 211 225, 0.08);\n    --md-sys-color-primary-dark-11a: rgba(130 211 225, 0.11);\n    --md-sys-color-primary-dark-12a: rgba(130 211 225, 0.12);\n    --md-sys-color-primary-dark-13a: rgba(130 211 225, 0.13);\n\n    /* M3 Generated */\n    --md-sys-color-primary-dark: rgb(130 211 225);\n    --md-sys-color-surface-tint-dark: rgb(130 211 225);\n    --md-sys-color-on-primary-dark: rgb(0 54 61);\n    --md-sys-color-primary-container-dark: rgb(0 79 88);\n    --md-sys-color-on-primary-container-dark: rgb(158 239 254);\n    --md-sys-color-secondary-dark: rgb(177 203 208);\n    --md-sys-color-on-secondary-dark: rgb(28 52 56);\n    --md-sys-color-secondary-container-dark: rgb(51 75 79);\n    --md-sys-color-on-secondary-container-dark: rgb(205 231 236);\n    --md-sys-color-tertiary-dark: rgb(187 198 234);\n    --md-sys-color-on-tertiary-dark: rgb(36 48 77);\n    --md-sys-color-tertiary-container-dark: rgb(59 70 101);\n    --md-sys-color-on-tertiary-container-dark: rgb(218 226 255);\n    --md-sys-color-error-dark: rgb(255 180 171);\n    --md-sys-color-on-error-dark: rgb(105 0 5);\n    --md-sys-color-error-container-dark: rgb(147 0 10);\n    --md-sys-color-on-error-container-dark: rgb(255 218 214);\n    --md-sys-color-background-dark: rgb(14 20 21);\n    --md-sys-color-on-background-dark: rgb(222 227 229);\n    --md-sys-color-surface-dark: rgb(14 20 21);\n    --md-sys-color-on-surface-dark: rgb(222 227 229);\n    --md-sys-color-surface-variant-dark: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark: rgb(191 200 202);\n    --md-sys-color-outline-dark: rgb(137 146 148);\n    --md-sys-color-outline-variant-dark: rgb(63 72 74);\n    --md-sys-color-shadow-dark: rgb(0 0 0);\n    --md-sys-color-scrim-dark: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark: rgb(43 49 51);\n    --md-sys-color-inverse-primary-dark: rgb(0 104 116);\n    --md-sys-color-primary-fixed-dark: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-dark: rgb(0 31 36);\n    --md-sys-color-primary-fixed-dim-dark: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-dark: rgb(0 79 88);\n    --md-sys-color-secondary-fixed-dark: rgb(205 231 236);\n    --md-sys-color-on-secondary-fixed-dark: rgb(5 31 35);\n    --md-sys-color-secondary-fixed-dim-dark: rgb(177 203 208);\n    --md-sys-color-on-secondary-fixed-variant-dark: rgb(51 75 79);\n    --md-sys-color-tertiary-fixed-dark: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-dark: rgb(15 26 55);\n    --md-sys-color-tertiary-fixed-dim-dark: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-dark: rgb(59 70 101);\n    --md-sys-color-surface-dim-dark: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark: rgb(52 58 59);\n    --md-sys-color-surface-container-lowest-dark: rgb(9 15 16);\n    --md-sys-color-surface-container-low-dark: rgb(23 29 30);\n    --md-sys-color-surface-container-dark: rgb(27 33 34);\n    --md-sys-color-surface-container-high-dark: rgb(37 43 44);\n    --md-sys-color-surface-container-highest-dark: rgb(48 54 55);\n\n    /* dark high contrast */\n    /* Custom */\n    --md-sys-color-primary-dark-hc-05a: rgba(242 253 255, 0.05);\n    --md-sys-color-primary-dark-hc-08a: rgba(242 253 255, 0.08);\n    --md-sys-color-primary-dark-hc-11a: rgba(242 253 255, 0.11);\n    --md-sys-color-primary-dark-hc-12a: rgba(242 253 255, 0.12);\n    --md-sys-color-primary-dark-hc-13a: rgba(242 253 255, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-dark-hc: rgb(242 253 255);\n    --md-sys-color-surface-tint-dark-hc: rgb(130 211 225);\n    --md-sys-color-on-primary-dark-hc: rgb(0 0 0);\n    --md-sys-color-primary-container-dark-hc: rgb(134 215 229);\n    --md-sys-color-on-primary-container-dark-hc: rgb(0 0 0);\n    --md-sys-color-secondary-dark-hc: rgb(242 253 255);\n    --md-sys-color-on-secondary-dark-hc: rgb(0 0 0);\n    --md-sys-color-secondary-container-dark-hc: rgb(181 207 212);\n    --md-sys-color-on-secondary-container-dark-hc: rgb(0 0 0);\n    --md-sys-color-tertiary-dark-hc: rgb(252 250 255);\n    --md-sys-color-on-tertiary-dark-hc: rgb(0 0 0);\n    --md-sys-color-tertiary-container-dark-hc: rgb(191 202 239);\n    --md-sys-color-on-tertiary-container-dark-hc: rgb(0 0 0);\n    --md-sys-color-error-dark-hc: rgb(255 249 249);\n    --md-sys-color-on-error-dark-hc: rgb(0 0 0);\n    --md-sys-color-error-container-dark-hc: rgb(255 186 177);\n    --md-sys-color-on-error-container-dark-hc: rgb(0 0 0);\n    --md-sys-color-background-dark-hc: rgb(14 20 21);\n    --md-sys-color-on-background-dark-hc: rgb(222 227 229);\n    --md-sys-color-surface-dark-hc: rgb(14 20 21);\n    --md-sys-color-on-surface-dark-hc: rgb(255 255 255);\n    --md-sys-color-surface-variant-dark-hc: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark-hc: rgb(243 252 254);\n    --md-sys-color-outline-dark-hc: rgb(195 204 206);\n    --md-sys-color-outline-variant-dark-hc: rgb(195 204 206);\n    --md-sys-color-shadow-dark-hc: rgb(0 0 0);\n    --md-sys-color-scrim-dark-hc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark-hc: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark-hc: rgb(0 0 0);\n    --md-sys-color-inverse-primary-dark-hc: rgb(0 47 53);\n    --md-sys-color-primary-fixed-dark-hc: rgb(172 242 255);\n    --md-sys-color-on-primary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-primary-fixed-dim-dark-hc: rgb(134 215 229);\n    --md-sys-color-on-primary-fixed-variant-dark-hc: rgb(0 26 30);\n    --md-sys-color-secondary-fixed-dark-hc: rgb(209 236 241);\n    --md-sys-color-on-secondary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-secondary-fixed-dim-dark-hc: rgb(181 207 212);\n    --md-sys-color-on-secondary-fixed-variant-dark-hc: rgb(1 26 29);\n    --md-sys-color-tertiary-fixed-dark-hc: rgb(224 230 255);\n    --md-sys-color-on-tertiary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-tertiary-fixed-dim-dark-hc: rgb(191 202 239);\n    --md-sys-color-on-tertiary-fixed-variant-dark-hc: rgb(9 21 49);\n    --md-sys-color-surface-dim-dark-hc: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark-hc: rgb(52 58 59);\n    --md-sys-color-surface-container-lowest-dark-hc: rgb(9 15 16);\n    --md-sys-color-surface-container-low-dark-hc: rgb(23 29 30);\n    --md-sys-color-surface-container-dark-hc: rgb(27 33 34);\n    --md-sys-color-surface-container-high-dark-hc: rgb(37 43 44);\n    --md-sys-color-surface-container-highest-dark-hc: rgb(48 54 55);\n\n    /* dark medium contrast */\n    /* Custom */\n    --md-sys-color-primary-dark-mc-05a: rgba(134 215 229, 0.05);\n    --md-sys-color-primary-dark-mc-08a: rgba(134 215 229, 0.08);\n    --md-sys-color-primary-dark-mc-11a: rgba(134 215 229, 0.11);\n    --md-sys-color-primary-dark-mc-12a: rgba(134 215 229, 0.12);\n    --md-sys-color-primary-dark-mc-13a: rgba(134 215 229, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-dark-mc: rgb(134 215 229);\n    --md-sys-color-surface-tint-dark-mc: rgb(130 211 225);\n    --md-sys-color-on-primary-dark-mc: rgb(0 26 30);\n    --md-sys-color-primary-container-dark-mc: rgb(73 156 169);\n    --md-sys-color-on-primary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-secondary-dark-mc: rgb(181 207 212);\n    --md-sys-color-on-secondary-dark-mc: rgb(1 26 29);\n    --md-sys-color-secondary-container-dark-mc: rgb(124 149 154);\n    --md-sys-color-on-secondary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-tertiary-dark-mc: rgb(191 202 239);\n    --md-sys-color-on-tertiary-dark-mc: rgb(9 21 49);\n    --md-sys-color-tertiary-container-dark-mc: rgb(133 144 178);\n    --md-sys-color-on-tertiary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-error-dark-mc: rgb(255 186 177);\n    --md-sys-color-on-error-dark-mc: rgb(55 0 1);\n    --md-sys-color-error-container-dark-mc: rgb(255 84 73);\n    --md-sys-color-on-error-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-background-dark-mc: rgb(14 20 21);\n    --md-sys-color-on-background-dark-mc: rgb(222 227 229);\n    --md-sys-color-surface-dark-mc: rgb(14 20 21);\n    --md-sys-color-on-surface-dark-mc: rgb(246 252 253);\n    --md-sys-color-surface-variant-dark-mc: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark-mc: rgb(195 204 206);\n    --md-sys-color-outline-dark-mc: rgb(155 165 166);\n    --md-sys-color-outline-variant-dark-mc: rgb(123 133 135);\n    --md-sys-color-shadow-dark-mc: rgb(0 0 0);\n    --md-sys-color-scrim-dark-mc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark-mc: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark-mc: rgb(37 43 44);\n    --md-sys-color-inverse-primary-dark-mc: rgb(0 80 89);\n    --md-sys-color-primary-fixed-dark-mc: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-dark-mc: rgb(0 20 23);\n    --md-sys-color-primary-fixed-dim-dark-mc: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-dark-mc: rgb(0 60 68);\n    --md-sys-color-secondary-fixed-dark-mc: rgb(205 231 236);\n    --md-sys-color-on-secondary-fixed-dark-mc: rgb(0 20 23);\n    --md-sys-color-secondary-fixed-dim-dark-mc: rgb(177 203 208);\n    --md-sys-color-on-secondary-fixed-variant-dark-mc: rgb(34 58 62);\n    --md-sys-color-tertiary-fixed-dark-mc: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-dark-mc: rgb(4 16 44);\n    --md-sys-color-tertiary-fixed-dim-dark-mc: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-dark-mc: rgb(42 53 83);\n    --md-sys-color-surface-dim-dark-mc: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark-mc: rgb(52 58 59);\n    --md-sys-color-surface-container-lowest-dark-mc: rgb(9 15 16);\n    --md-sys-color-surface-container-low-dark-mc: rgb(23 29 30);\n    --md-sys-color-surface-container-dark-mc: rgb(27 33 34);\n    --md-sys-color-surface-container-high-dark-mc: rgb(37 43 44);\n    --md-sys-color-surface-container-highest-dark-mc: rgb(48 54 55);\n\n    /* Typeface */\n    --md-ref-typeface-brand: Roboto, system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;\n\n    /* display - large */\n    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-large-weight: 400;\n    --md-sys-typescale-display-large-size: 57px;\n    --md-sys-typescale-display-large-height: 64px;\n    --md-sys-typescale-display-large-tracking: -0.25px;\n    /* display - medium */\n    --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-medium-weight: 400;\n    --md-sys-typescale-display-medium-size: 45px;\n    --md-sys-typescale-display-medium-height: 52px;\n    --md-sys-typescale-display-medium-tracking: 0px;\n    /* display - small */\n    --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-small-weight: 400;\n    --md-sys-typescale-display-small-size: 36px;\n    --md-sys-typescale-display-small-height: 44px;\n    --md-sys-typescale-display-small-tracking: 0px;\n    /* headline - large */\n    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-large-weight: 400;\n    --md-sys-typescale-headline-large-size: 32px;\n    --md-sys-typescale-headline-large-height: 40px;\n    --md-sys-typescale-headline-large-tracking: 0px;\n    /* headline - medium */\n    --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-medium-weight: 400;\n    --md-sys-typescale-headline-medium-size: 28px;\n    --md-sys-typescale-headline-medium-height: 36px;\n    --md-sys-typescale-headline-medium-tracking: 0px;\n    /* headline - small */\n    --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-small-weight: 400;\n    --md-sys-typescale-headline-small-size: 24px;\n    --md-sys-typescale-headline-small-height: 32px;\n    --md-sys-typescale-headline-small-tracking: 0px;\n    /* title - large */\n    --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-large-weight: 400;\n    --md-sys-typescale-title-large-size: 22px;\n    --md-sys-typescale-title-large-height: 28px;\n    --md-sys-typescale-title-large-tracking: 0px;\n    /* title - medium */\n    --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-medium-weight: 500;\n    --md-sys-typescale-title-medium-size: 16px;\n    --md-sys-typescale-title-medium-height: 24px;\n    --md-sys-typescale-title-medium-tracking: 0.15px;\n    /* title - small */\n    --md-sys-typescale-title-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-small-weight: 500;\n    --md-sys-typescale-title-small-size: 14px;\n    --md-sys-typescale-title-small-height: 20px;\n    --md-sys-typescale-title-small-tracking: 0.1px;\n    /* body - large */\n    --md-sys-typescale-body-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-large-weight: 400;\n    --md-sys-typescale-body-large-size: 16px;\n    --md-sys-typescale-body-large-height: 24px;\n    --md-sys-typescale-body-large-tracking: 0.5px;\n    /* body - medium */\n    --md-sys-typescale-body-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-medium-weight: 400;\n    --md-sys-typescale-body-medium-size: 14px;\n    --md-sys-typescale-body-medium-height: 20px;\n    --md-sys-typescale-body-medium-tracking: 0.25px;\n    /* body - small */\n    --md-sys-typescale-body-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-small-weight: 400;\n    --md-sys-typescale-body-small-size: 12px;\n    --md-sys-typescale-body-small-height: 16px;\n    --md-sys-typescale-body-small-tracking: 0.4px;\n    /* label - large */\n    --md-sys-typescale-label-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-large-weight: 500;\n    --md-sys-typescale-label-large-weight-prominent: 700;\n    --md-sys-typescale-label-large-size: 14px;\n    --md-sys-typescale-label-large-height: 20px;\n    --md-sys-typescale-label-large-tracking: 0.1px;\n    /* label - medium */\n    --md-sys-typescale-label-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-medium-weight: 500;\n    --md-sys-typescale-label-medium-weight-prominent: 700;\n    --md-sys-typescale-label-medium-size: 12px;\n    --md-sys-typescale-label-medium-height: 16px;\n    --md-sys-typescale-label-medium-tracking: 0.5px;\n    /* label - small */\n    --md-sys-typescale-label-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-small-weight: 500;\n    --md-sys-typescale-label-small-size: 11px;\n    --md-sys-typescale-label-small-height: 16px;\n    --md-sys-typescale-label-small-tracking: 0.5px;\n\n    /* CUSTOM!!! */\n\n    /* Elevation light */\n    --md-sys-elevation-1-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);\n    --md-sys-elevation-2-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);\n    --md-sys-elevation-3-light: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-4-light: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-5-light: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);\n    /* Elevation dark */\n    --md-sys-elevation-1-dark: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-2-dark: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-3-dark: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-4-dark: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-5-dark: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);\n    /* State layer */\n    --md-sys-state-hover-state-layer-opacity: 0.1;\n    --md-sys-state-focus-state-layer-opacity: 0.12;\n    --md-sys-state-pressed-state-layer-opacity: 0.14;\n    --md-sys-state-dragged-state-layer-opacity: 0.16;\n    /* Rounding */\n    --md-sys-shape-corner-none: 0;\n    --md-sys-shape-corner-extra-small: 4px;\n    --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;\n    --md-sys-shape-corner-small: 8px;\n    --md-sys-shape-corner-small-top: 8px 8px 0 0;\n    --md-sys-shape-corner-small-bottom: 0 0 8px 8px;\n    --md-sys-shape-corner-medium: 12px;\n    --md-sys-shape-corner-medium-top: 12px 12px 0 0;\n    --md-sys-shape-corner-large: 16px;\n    --md-sys-shape-corner-large-end: 0px 16px 16px 0px;\n    --md-sys-shape-corner-large-top: 16px 16px 0px 0px;\n    --md-sys-shape-corner-extra-large: 28px;\n    --md-sys-shape-corner-extra-large-top: 28px 28px 0 0;\n    --md-sys-shape-corner-full: 9999px;\n\n    --md-sys-animation-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n    --md-sys-animation-easing-acceleration: cubic-bezier(0.4, 0, 1, 1);\n    --md-sys-animation-easing-deceleration: cubic-bezier(0, 0, 0.2, 1);\n    --md-sys-animation-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);\n  }\n`\n"]}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../../src/styles/m3/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAigBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  html {\n    /* light */\n    /* Custom */\n    --md-sys-color-primary-light-05a: rgba(0 104 116, 0.05);\n    --md-sys-color-primary-light-08a: rgba(0 104 116, 0.08);\n    --md-sys-color-primary-light-11a: rgba(0 104 116, 0.11);\n    --md-sys-color-primary-light-12a: rgba(0 104 116, 0.12);\n    --md-sys-color-primary-light-13a: rgba(0 104 116, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light: rgb(0 104 116);\n    --md-sys-color-surface-tint-light: rgb(0 104 116);\n    --md-sys-color-on-primary-light: rgb(255 255 255);\n    --md-sys-color-primary-container-light: rgb(158 239 254);\n    --md-sys-color-on-primary-container-light: rgb(0 79 88);\n    --md-sys-color-secondary-light: rgb(0 104 116);\n    --md-sys-color-on-secondary-light: rgb(255 255 255);\n    --md-sys-color-secondary-container-light: rgb(158 239 253);\n    --md-sys-color-on-secondary-container-light: rgb(0 79 87);\n    --md-sys-color-tertiary-light: rgb(83 94 125);\n    --md-sys-color-on-tertiary-light: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light: rgb(218 226 255);\n    --md-sys-color-on-tertiary-container-light: rgb(59 70 101);\n    --md-sys-color-error-light: rgb(186 26 26);\n    --md-sys-color-on-error-light: rgb(255 255 255);\n    --md-sys-color-error-container-light: rgb(255 218 214);\n    --md-sys-color-on-error-container-light: rgb(147 0 10);\n    --md-sys-color-background-light: rgb(245 250 251);\n    --md-sys-color-on-background-light: rgb(23 29 30);\n    --md-sys-color-surface-light: rgb(245 250 251);\n    --md-sys-color-on-surface-light: rgb(23 29 30);\n    --md-sys-color-surface-variant-light: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light: rgb(63 72 74);\n    --md-sys-color-outline-light: rgb(111 121 123);\n    --md-sys-color-outline-variant-light: rgb(191 200 202);\n    --md-sys-color-shadow-light: rgb(0 0 0);\n    --md-sys-color-scrim-light: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light: rgb(236 242 243);\n    --md-sys-color-inverse-primary-light: rgb(130 211 225);\n    --md-sys-color-primary-fixed-light: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-light: rgb(0 31 36);\n    --md-sys-color-primary-fixed-dim-light: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-light: rgb(0 79 88);\n    --md-sys-color-secondary-fixed-light: rgb(158 239 253);\n    --md-sys-color-on-secondary-fixed-light: rgb(0 31 36);\n    --md-sys-color-secondary-fixed-dim-light: rgb(129 211 224);\n    --md-sys-color-on-secondary-fixed-variant-light: rgb(0 79 87);\n    --md-sys-color-tertiary-fixed-light: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-light: rgb(15 26 55);\n    --md-sys-color-tertiary-fixed-dim-light: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-light: rgb(59 70 101);\n    --md-sys-color-surface-dim-light: rgb(213 219 220);\n    --md-sys-color-surface-bright-light: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light: rgb(239 245 246);\n    --md-sys-color-surface-container-light: rgb(233 239 240);\n    --md-sys-color-surface-container-high-light: rgb(227 233 234);\n    --md-sys-color-surface-container-highest-light: rgb(222 227 229);\n\n    /* light high contrast */\n    /* Custom */\n    --md-sys-color-primary-light-hc-05a: rgba(0 49 56, 0.05);\n    --md-sys-color-primary-light-hc-08a: rgba(0 49 56, 0.08);\n    --md-sys-color-primary-light-hc-11a: rgba(0 49 56, 0.11);\n    --md-sys-color-primary-light-hc-12a: rgba(0 49 56, 0.12);\n    --md-sys-color-primary-light-hc-13a: rgba(0 49 56, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light-hc: rgb(0 49 56);\n    --md-sys-color-surface-tint-light-hc: rgb(0 104 116);\n    --md-sys-color-on-primary-light-hc: rgb(255 255 255);\n    --md-sys-color-primary-container-light-hc: rgb(0 81 91);\n    --md-sys-color-on-primary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-light-hc: rgb(0 50 55);\n    --md-sys-color-on-secondary-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-container-light-hc: rgb(0 81 90);\n    --md-sys-color-on-secondary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-light-hc: rgb(32 43 72);\n    --md-sys-color-on-tertiary-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light-hc: rgb(61 72 103);\n    --md-sys-color-on-tertiary-container-light-hc: rgb(255 255 255);\n    --md-sys-color-error-light-hc: rgb(96 0 4);\n    --md-sys-color-on-error-light-hc: rgb(255 255 255);\n    --md-sys-color-error-container-light-hc: rgb(152 0 10);\n    --md-sys-color-on-error-container-light-hc: rgb(255 255 255);\n    --md-sys-color-background-light-hc: rgb(245 250 251);\n    --md-sys-color-on-background-light-hc: rgb(23 29 30);\n    --md-sys-color-surface-light-hc: rgb(245 250 251);\n    --md-sys-color-on-surface-light-hc: rgb(0 0 0);\n    --md-sys-color-surface-variant-light-hc: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light-hc: rgb(0 0 0);\n    --md-sys-color-outline-light-hc: rgb(37 46 47);\n    --md-sys-color-outline-variant-light-hc: rgb(66 75 77);\n    --md-sys-color-shadow-light-hc: rgb(0 0 0);\n    --md-sys-color-scrim-light-hc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light-hc: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light-hc: rgb(255 255 255);\n    --md-sys-color-inverse-primary-light-hc: rgb(130 211 225);\n    --md-sys-color-primary-fixed-light-hc: rgb(0 81 91);\n    --md-sys-color-on-primary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-primary-fixed-dim-light-hc: rgb(0 57 64);\n    --md-sys-color-on-primary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-light-hc: rgb(0 81 90);\n    --md-sys-color-on-secondary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-dim-light-hc: rgb(0 57 63);\n    --md-sys-color-on-secondary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-light-hc: rgb(61 72 103);\n    --md-sys-color-on-tertiary-fixed-light-hc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-dim-light-hc: rgb(39 50 79);\n    --md-sys-color-on-tertiary-fixed-variant-light-hc: rgb(255 255 255);\n    --md-sys-color-surface-dim-light-hc: rgb(180 186 187);\n    --md-sys-color-surface-bright-light-hc: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light-hc: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light-hc: rgb(236 242 243);\n    --md-sys-color-surface-container-light-hc: rgb(222 227 229);\n    --md-sys-color-surface-container-high-light-hc: rgb(208 213 215);\n    --md-sys-color-surface-container-highest-light-hc: rgb(194 199 201);\n    /* light medium contrast */\n    /* Custom */\n    --md-sys-color-primary-light-mc-05a: rgba(0 60 68, 0.05);\n    --md-sys-color-primary-light-mc-08a: rgba(0 60 68, 0.08);\n    --md-sys-color-primary-light-mc-11a: rgba(0 60 68, 0.11);\n    --md-sys-color-primary-light-mc-12a: rgba(0 60 68, 0.12);\n    --md-sys-color-primary-light-mc-13a: rgba(0 60 68, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-light-mc: rgb(0 60 68);\n    --md-sys-color-surface-tint-light-mc: rgb(0 104 116);\n    --md-sys-color-on-primary-light-mc: rgb(255 255 255);\n    --md-sys-color-primary-container-light-mc: rgb(25 120 133);\n    --md-sys-color-on-primary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-light-mc: rgb(0 61 68);\n    --md-sys-color-on-secondary-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-container-light-mc: rgb(24 120 132);\n    --md-sys-color-on-secondary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-light-mc: rgb(42 53 83);\n    --md-sys-color-on-tertiary-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-container-light-mc: rgb(97 108 141);\n    --md-sys-color-on-tertiary-container-light-mc: rgb(255 255 255);\n    --md-sys-color-error-light-mc: rgb(116 0 6);\n    --md-sys-color-on-error-light-mc: rgb(255 255 255);\n    --md-sys-color-error-container-light-mc: rgb(207 44 39);\n    --md-sys-color-on-error-container-light-mc: rgb(255 255 255);\n    --md-sys-color-background-light-mc: rgb(245 250 251);\n    --md-sys-color-on-background-light-mc: rgb(23 29 30);\n    --md-sys-color-surface-light-mc: rgb(245 250 251);\n    --md-sys-color-on-surface-light-mc: rgb(12 18 19);\n    --md-sys-color-surface-variant-light-mc: rgb(219 228 230);\n    --md-sys-color-on-surface-variant-light-mc: rgb(47 56 57);\n    --md-sys-color-outline-light-mc: rgb(75 84 86);\n    --md-sys-color-outline-variant-light-mc: rgb(101 111 113);\n    --md-sys-color-shadow-light-mc: rgb(0 0 0);\n    --md-sys-color-scrim-light-mc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-light-mc: rgb(43 49 51);\n    --md-sys-color-inverse-on-surface-light-mc: rgb(236 242 243);\n    --md-sys-color-inverse-primary-light-mc: rgb(130 211 225);\n    --md-sys-color-primary-fixed-light-mc: rgb(25 120 133);\n    --md-sys-color-on-primary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-primary-fixed-dim-light-mc: rgb(0 94 105);\n    --md-sys-color-on-primary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-light-mc: rgb(24 120 132);\n    --md-sys-color-on-secondary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-secondary-fixed-dim-light-mc: rgb(0 94 104);\n    --md-sys-color-on-secondary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-light-mc: rgb(97 108 141);\n    --md-sys-color-on-tertiary-fixed-light-mc: rgb(255 255 255);\n    --md-sys-color-tertiary-fixed-dim-light-mc: rgb(73 84 115);\n    --md-sys-color-on-tertiary-fixed-variant-light-mc: rgb(255 255 255);\n    --md-sys-color-surface-dim-light-mc: rgb(194 199 201);\n    --md-sys-color-surface-bright-light-mc: rgb(245 250 251);\n    --md-sys-color-surface-container-lowest-light-mc: rgb(255 255 255);\n    --md-sys-color-surface-container-low-light-mc: rgb(239 245 246);\n    --md-sys-color-surface-container-light-mc: rgb(227 233 234);\n    --md-sys-color-surface-container-high-light-mc: rgb(216 222 223);\n    --md-sys-color-surface-container-highest-light-mc: rgb(205 211 212);\n\n    /* dark */\n    /* Custom */\n    --md-sys-color-primary-dark-05a: rgba(130 211 225, 0.05);\n    --md-sys-color-primary-dark-08a: rgba(130 211 225, 0.08);\n    --md-sys-color-primary-dark-11a: rgba(130 211 225, 0.11);\n    --md-sys-color-primary-dark-12a: rgba(130 211 225, 0.12);\n    --md-sys-color-primary-dark-13a: rgba(130 211 225, 0.13);\n\n    /* M3 Generated */\n    --md-sys-color-primary-dark: rgb(130 211 225);\n    --md-sys-color-surface-tint-dark: rgb(130 211 225);\n    --md-sys-color-on-primary-dark: rgb(0 54 61);\n    --md-sys-color-primary-container-dark: rgb(0 79 88);\n    --md-sys-color-on-primary-container-dark: rgb(158 239 254);\n    --md-sys-color-secondary-dark: rgb(129 211 224);\n    --md-sys-color-on-secondary-dark: rgb(0 54 61);\n    --md-sys-color-secondary-container-dark: rgb(0 79 87);\n    --md-sys-color-on-secondary-container-dark: rgb(158 239 253);\n    --md-sys-color-tertiary-dark: rgb(187 198 234);\n    --md-sys-color-on-tertiary-dark: rgb(36 48 77);\n    --md-sys-color-tertiary-container-dark: rgb(59 70 101);\n    --md-sys-color-on-tertiary-container-dark: rgb(218 226 255);\n    --md-sys-color-error-dark: rgb(255 180 171);\n    --md-sys-color-on-error-dark: rgb(105 0 5);\n    --md-sys-color-error-container-dark: rgb(147 0 10);\n    --md-sys-color-on-error-container-dark: rgb(255 218 214);\n    --md-sys-color-background-dark: rgb(14 20 21);\n    --md-sys-color-on-background-dark: rgb(222 227 229);\n    --md-sys-color-surface-dark: rgb(14 20 21);\n    --md-sys-color-on-surface-dark: rgb(222 227 229);\n    --md-sys-color-surface-variant-dark: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark: rgb(191 200 202);\n    --md-sys-color-outline-dark: rgb(137 146 148);\n    --md-sys-color-outline-variant-dark: rgb(63 72 74);\n    --md-sys-color-shadow-dark: rgb(0 0 0);\n    --md-sys-color-scrim-dark: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark: rgb(43 49 51);\n    --md-sys-color-inverse-primary-dark: rgb(0 104 116);\n    --md-sys-color-primary-fixed-dark: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-dark: rgb(0 31 36);\n    --md-sys-color-primary-fixed-dim-dark: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-dark: rgb(0 79 88);\n    --md-sys-color-secondary-fixed-dark: rgb(158 239 253);\n    --md-sys-color-on-secondary-fixed-dark: rgb(0 31 36);\n    --md-sys-color-secondary-fixed-dim-dark: rgb(129 211 224);\n    --md-sys-color-on-secondary-fixed-variant-dark: rgb(0 79 87);\n    --md-sys-color-tertiary-fixed-dark: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-dark: rgb(15 26 55);\n    --md-sys-color-tertiary-fixed-dim-dark: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-dark: rgb(59 70 101);\n    --md-sys-color-surface-dim-dark: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark: rgb(52 58 59);\n    --md-sys-color-surface-container-lowest-dark: rgb(9 15 16);\n    --md-sys-color-surface-container-low-dark: rgb(23 29 30);\n    --md-sys-color-surface-container-dark: rgb(27 33 34);\n    --md-sys-color-surface-container-high-dark: rgb(37 43 44);\n    --md-sys-color-surface-container-highest-dark: rgb(48 54 55);\n\n    /* dark high contrast */\n    /* Custom */\n    --md-sys-color-primary-dark-hc-05a: rgba(206 247 255, 0.05);\n    --md-sys-color-primary-dark-hc-08a: rgba(206 247 255, 0.08);\n    --md-sys-color-primary-dark-hc-11a: rgba(206 247 255, 0.11);\n    --md-sys-color-primary-dark-hc-12a: rgba(206 247 255, 0.12);\n    --md-sys-color-primary-dark-hc-13a: rgba(206 247 255, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-dark-hc: rgb(206 247 255);\n    --md-sys-color-surface-tint-dark-hc: rgb(130 211 225);\n    --md-sys-color-on-primary-dark-hc: rgb(0 0 0);\n    --md-sys-color-primary-container-dark-hc: rgb(126 207 221);\n    --md-sys-color-on-primary-container-dark-hc: rgb(0 14 16);\n    --md-sys-color-secondary-dark-hc: rgb(205 248 255);\n    --md-sys-color-on-secondary-dark-hc: rgb(0 0 0);\n    --md-sys-color-secondary-container-dark-hc: rgb(126 207 220);\n    --md-sys-color-on-secondary-container-dark-hc: rgb(0 14 16);\n    --md-sys-color-tertiary-dark-hc: rgb(237 239 255);\n    --md-sys-color-on-tertiary-dark-hc: rgb(0 0 0);\n    --md-sys-color-tertiary-container-dark-hc: rgb(183 194 230);\n    --md-sys-color-on-tertiary-container-dark-hc: rgb(0 9 38);\n    --md-sys-color-error-dark-hc: rgb(255 236 233);\n    --md-sys-color-on-error-dark-hc: rgb(0 0 0);\n    --md-sys-color-error-container-dark-hc: rgb(255 174 164);\n    --md-sys-color-on-error-container-dark-hc: rgb(34 0 1);\n    --md-sys-color-background-dark-hc: rgb(14 20 21);\n    --md-sys-color-on-background-dark-hc: rgb(222 227 229);\n    --md-sys-color-surface-dark-hc: rgb(14 20 21);\n    --md-sys-color-on-surface-dark-hc: rgb(255 255 255);\n    --md-sys-color-surface-variant-dark-hc: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark-hc: rgb(255 255 255);\n    --md-sys-color-outline-dark-hc: rgb(232 242 244);\n    --md-sys-color-outline-variant-dark-hc: rgb(187 196 198);\n    --md-sys-color-shadow-dark-hc: rgb(0 0 0);\n    --md-sys-color-scrim-dark-hc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark-hc: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark-hc: rgb(0 0 0);\n    --md-sys-color-inverse-primary-dark-hc: rgb(0 80 89);\n    --md-sys-color-primary-fixed-dark-hc: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-primary-fixed-dim-dark-hc: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-dark-hc: rgb(0 20 23);\n    --md-sys-color-secondary-fixed-dark-hc: rgb(158 239 253);\n    --md-sys-color-on-secondary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-secondary-fixed-dim-dark-hc: rgb(129 211 224);\n    --md-sys-color-on-secondary-fixed-variant-dark-hc: rgb(0 20 23);\n    --md-sys-color-tertiary-fixed-dark-hc: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-dark-hc: rgb(0 0 0);\n    --md-sys-color-tertiary-fixed-dim-dark-hc: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-dark-hc: rgb(4 16 44);\n    --md-sys-color-surface-dim-dark-hc: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark-hc: rgb(75 81 82);\n    --md-sys-color-surface-container-lowest-dark-hc: rgb(0 0 0);\n    --md-sys-color-surface-container-low-dark-hc: rgb(27 33 34);\n    --md-sys-color-surface-container-dark-hc: rgb(43 49 51);\n    --md-sys-color-surface-container-high-dark-hc: rgb(54 60 62);\n    --md-sys-color-surface-container-highest-dark-hc: rgb(66 72 73);\n\n    /* dark medium contrast */\n    /* Custom */\n    --md-sys-color-primary-dark-mc-05a: rgba(134 215 229, 0.05);\n    --md-sys-color-primary-dark-mc-08a: rgba(134 215 229, 0.08);\n    --md-sys-color-primary-dark-mc-11a: rgba(134 215 229, 0.11);\n    --md-sys-color-primary-dark-mc-12a: rgba(134 215 229, 0.12);\n    --md-sys-color-primary-dark-mc-13a: rgba(134 215 229, 0.13);\n    /* M3 Generated */\n    --md-sys-color-primary-dark-mc: rgb(152 233 247);\n    --md-sys-color-surface-tint-dark-mc: rgb(130 211 225);\n    --md-sys-color-on-primary-dark-mc: rgb(0 42 48);\n    --md-sys-color-primary-container-dark-mc: rgb(73 156 169);\n    --md-sys-color-on-primary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-secondary-dark-mc: rgb(152 233 246);\n    --md-sys-color-on-secondary-dark-mc: rgb(0 42 48);\n    --md-sys-color-secondary-container-dark-mc: rgb(72 156 169);\n    --md-sys-color-on-secondary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-tertiary-dark-mc: rgb(209 219 255);\n    --md-sys-color-on-tertiary-dark-mc: rgb(25 37 65);\n    --md-sys-color-tertiary-container-dark-mc: rgb(133 144 178);\n    --md-sys-color-on-tertiary-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-error-dark-mc: rgb(255 210 204);\n    --md-sys-color-on-error-dark-mc: rgb(84 0 3);\n    --md-sys-color-error-container-dark-mc: rgb(255 84 73);\n    --md-sys-color-on-error-container-dark-mc: rgb(0 0 0);\n    --md-sys-color-background-dark-mc: rgb(14 20 21);\n    --md-sys-color-on-background-dark-mc: rgb(222 227 229);\n    --md-sys-color-surface-dark-mc: rgb(14 20 21);\n    --md-sys-color-on-surface-dark-mc: rgb(255 255 255);\n    --md-sys-color-surface-variant-dark-mc: rgb(63 72 74);\n    --md-sys-color-on-surface-variant-dark-mc: rgb(212 222 224);\n    --md-sys-color-outline-dark-mc: rgb(170 180 181);\n    --md-sys-color-outline-variant-dark-mc: rgb(136 146 148);\n    --md-sys-color-shadow-dark-mc: rgb(0 0 0);\n    --md-sys-color-scrim-dark-mc: rgb(0 0 0);\n    --md-sys-color-inverse-surface-dark-mc: rgb(222 227 229);\n    --md-sys-color-inverse-on-surface-dark-mc: rgb(37 43 44);\n    --md-sys-color-inverse-primary-dark-mc: rgb(0 80 89);\n    --md-sys-color-primary-fixed-dark-mc: rgb(158 239 254);\n    --md-sys-color-on-primary-fixed-dark-mc: rgb(0 20 23);\n    --md-sys-color-primary-fixed-dim-dark-mc: rgb(130 211 225);\n    --md-sys-color-on-primary-fixed-variant-dark-mc: rgb(0 60 68);\n    --md-sys-color-secondary-fixed-dark-mc: rgb(158 239 253);\n    --md-sys-color-on-secondary-fixed-dark-mc: rgb(0 20 23);\n    --md-sys-color-secondary-fixed-dim-dark-mc: rgb(129 211 224);\n    --md-sys-color-on-secondary-fixed-variant-dark-mc: rgb(0 61 68);\n    --md-sys-color-tertiary-fixed-dark-mc: rgb(218 226 255);\n    --md-sys-color-on-tertiary-fixed-dark-mc: rgb(4 16 44);\n    --md-sys-color-tertiary-fixed-dim-dark-mc: rgb(187 198 234);\n    --md-sys-color-on-tertiary-fixed-variant-dark-mc: rgb(42 53 83);\n    --md-sys-color-surface-dim-dark-mc: rgb(14 20 21);\n    --md-sys-color-surface-bright-dark-mc: rgb(63 70 71);\n    --md-sys-color-surface-container-lowest-dark-mc: rgb(4 8 9);\n    --md-sys-color-surface-container-low-dark-mc: rgb(25 31 32);\n    --md-sys-color-surface-container-dark-mc: rgb(35 41 42);\n    --md-sys-color-surface-container-high-dark-mc: rgb(45 52 53);\n    --md-sys-color-surface-container-highest-dark-mc: rgb(57 63 64);\n\n    /* Typeface */\n    --md-ref-typeface-brand: Roboto, system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;\n\n    --md-ref-typeface-weight-regular: 400;\n    --md-ref-typeface-weight-medium: 500;\n    --md-ref-typeface-weight-bold: 700;\n\n    /* display - large */\n    --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-display-large-size: 3.5625rem; /* 57pt */\n    --md-sys-typescale-display-large-height: 4rem; /* 64pt */\n    --md-sys-typescale-display-large-tracking: -0.25px;\n    /* display - medium */\n    --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-display-medium-size: 2.8125rem; /* 45pt */\n    --md-sys-typescale-display-medium-height: 3.25rem; /* 52pt */\n    --md-sys-typescale-display-medium-tracking: 0px;\n    /* display - small */\n    --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-display-small-size: 2.25rem; /* 36pt */\n    --md-sys-typescale-display-small-height: 2.75rem; /* 44pt */\n    --md-sys-typescale-display-small-tracking: 0px;\n    /* headline - large */\n    --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-headline-large-size: 2rem; /* 32pt */\n    --md-sys-typescale-headline-large-height: 2.5rem; /* 40pt */\n    --md-sys-typescale-headline-large-tracking: 0px;\n    /* headline - medium */\n    --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-headline-medium-size: 1.75rem; /* 28pt */\n    --md-sys-typescale-headline-medium-height: 2.25rem; /* 36pt */\n    --md-sys-typescale-headline-medium-tracking: 0px;\n    /* headline - small */\n    --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-headline-small-size: 1.5rem; /* 24pt */\n    --md-sys-typescale-headline-small-height: 2rem; /* 32pt */\n    --md-sys-typescale-headline-small-tracking: 0px;\n    /* title - large */\n    --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-title-large-size: 1.375rem; /* 22pt */\n    --md-sys-typescale-title-large-height: 1.75rem; /* 28pt */\n    --md-sys-typescale-title-large-tracking: 0px;\n    /* title - medium */\n    --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);\n    --md-sys-typescale-title-medium-size: 1rem; /* 16pt */\n    --md-sys-typescale-title-medium-height: 1.5rem; /* 24pt */\n    --md-sys-typescale-title-medium-tracking: 0.15px;\n    /* title - small */\n    --md-sys-typescale-title-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);\n    --md-sys-typescale-title-small-size: 0.875rem; /* 14pt */\n    --md-sys-typescale-title-small-height: 1.25rem; /* 20pt */\n    --md-sys-typescale-title-small-tracking: 0.1px;\n    /* body - large */\n    --md-sys-typescale-body-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-body-large-size: 1rem; /* 16pt */\n    --md-sys-typescale-body-large-height: 1.5rem; /* 24pt */\n    --md-sys-typescale-body-large-tracking: 0.5px;\n    /* body - medium */\n    --md-sys-typescale-body-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-body-medium-size: 0.875rem; /* 14pt */\n    --md-sys-typescale-body-medium-height: 1.25rem; /* 20pt */\n    --md-sys-typescale-body-medium-tracking: 0.25px;\n    /* body - small */\n    --md-sys-typescale-body-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);\n    --md-sys-typescale-body-small-size: 0.75rem; /* 12pt */\n    --md-sys-typescale-body-small-height: 1rem; /* 16pt */\n    --md-sys-typescale-body-small-tracking: 0.4px;\n    /* label - large */\n    --md-sys-typescale-label-large-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);\n    --md-sys-typescale-label-large-weight-prominent: var(--md-ref-typeface-weight-bold);\n    --md-sys-typescale-label-large-size: 0.875rem; /* 14pt */\n    --md-sys-typescale-label-large-height: 1.25rem; /* 20pt */\n    --md-sys-typescale-label-large-tracking: 0.1px;\n    /* label - medium */\n    --md-sys-typescale-label-medium-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);\n    --md-sys-typescale-label-medium-weight-prominent: var(--md-ref-typeface-weight-bold);\n    --md-sys-typescale-label-medium-size: 0.75rem; /* 12pt */\n    --md-sys-typescale-label-medium-height: 1rem; /* 16pt */\n    --md-sys-typescale-label-medium-tracking: 0.5px;\n    /* label - small */\n    --md-sys-typescale-label-small-font: var(--md-ref-typeface-brand);\n    --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);\n    --md-sys-typescale-label-small-size: 0.6875rem; /* 11pt */\n    --md-sys-typescale-label-small-height: 1rem; /* 16pt */\n    --md-sys-typescale-label-small-tracking: 0.5px;\n\n    /* CUSTOM!!! */\n\n    /* Elevation light */\n    --md-sys-elevation-1-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);\n    --md-sys-elevation-2-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);\n    --md-sys-elevation-3-light: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-4-light: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-5-light: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);\n    /* Elevation dark */\n    --md-sys-elevation-1-dark: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-2-dark: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-3-dark: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-4-dark: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);\n    --md-sys-elevation-5-dark: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);\n    /* State layer */\n    --md-sys-state-hover-state-layer-opacity: 0.08;\n    --md-sys-state-focus-state-layer-opacity: 0.1;\n    --md-sys-state-pressed-state-layer-opacity: 0.1;\n    --md-sys-state-dragged-state-layer-opacity: 0.16;\n    /* Rounding */\n    --md-sys-shape-corner-none: 0;\n    --md-sys-shape-corner-extra-small: 4px;\n    --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;\n    --md-sys-shape-corner-small: 8px;\n    --md-sys-shape-corner-small-top: 8px 8px 0 0;\n    --md-sys-shape-corner-small-bottom: 0 0 8px 8px;\n    --md-sys-shape-corner-medium: 12px;\n    --md-sys-shape-corner-medium-top: 12px 12px 0 0;\n    --md-sys-shape-corner-large: 16px;\n    --md-sys-shape-corner-large-end: 0px 16px 16px 0px;\n    --md-sys-shape-corner-large-top: 16px 16px 0px 0px;\n    --md-sys-shape-corner-extra-large: 28px;\n    --md-sys-shape-corner-extra-large-top: 28px 28px 0 0;\n    --md-sys-shape-corner-full: 9999px;\n\n    --md-sys-animation-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n    --md-sys-animation-easing-acceleration: cubic-bezier(0.4, 0, 1, 1);\n    --md-sys-animation-easing-deceleration: cubic-bezier(0, 0, 0.2, 1);\n    --md-sys-animation-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);\n\n    /* Motion */\n    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);\n    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);\n    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n    --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);\n    --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);\n    --md-sys-motion-duration-short1: 50ms;\n    --md-sys-motion-duration-short2: 100ms;\n    --md-sys-motion-duration-short3: 150ms;\n    --md-sys-motion-duration-short4: 200ms;\n    --md-sys-motion-duration-medium1: 250ms;\n    --md-sys-motion-duration-medium2: 300ms;\n    --md-sys-motion-duration-medium3: 350ms;\n    --md-sys-motion-duration-medium4: 400ms;\n    --md-sys-motion-duration-long1: 450ms;\n    --md-sys-motion-duration-long2: 500ms;\n    --md-sys-motion-duration-long3: 550ms;\n    --md-sys-motion-duration-long4: 600ms;\n    --md-sys-motion-duration-extra-long1: 700ms;\n    --md-sys-motion-duration-extra-long2: 800ms;\n    --md-sys-motion-duration-extra-long3: 900ms;\n    --md-sys-motion-duration-extra-long4: 1000ms;\n  }\n`\n"]}

package/demo/elements/authorization/oauth-authorize.html

@@ -67,7 +67,7 @@
         invalidMessage="Password is required"
         label="Password"
       ></ui-filled-text-field>
-      <ui-filled-button class="login-button">Authorize</ui-filled-button>
+      <ui-button class="login-button">Authorize</ui-button>
     </form>
   </section>
   <script type="module" src="/.tmp/demo/elements/authorization/oauth-authorize.js"></script>

package/demo/elements/authorization/oauth-authorize.ts

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid'
-import '../../../src/md/button/ui-filled-button.js'
+import '../../../src/md/button/ui-button.js'
 import '../../../src/md/text-field/ui-filled-text-field.js'
 
 function setupFormAction(): void {

package/demo/elements/environment/variables-editor.ts

@@ -6,7 +6,7 @@ import env from '../../env.js'
 import VariablesEditor from '../../../src/elements/environment/VariablesEditor.js'
 
 import '../../../src/define/environment/variables-editor.js'
-import '../../../src/md/button/ui-outlined-button.js'
+import '../../../src/md/button/ui-button.js'
 
 const storeKey = 'api-client.demo.elements.environment.variables-editor'
 
@@ -84,7 +84,7 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <section class="demo-section">
         <h2 class="title-large">Data control</h2>
-        <ui-outlined-button @click="${this.loadSystem}">Load system variables</ui-outlined-button>
+        <ui-button color="outlined" @click="${this.loadSystem}">Load system variables</ui-button>
       </section>
     `
   }

package/demo/elements/http/url-editing.ts

@@ -7,7 +7,7 @@ import UrlInput from '../../../src/elements/http/UrlInput.js'
 import { EventTypes } from '../../../src/events/EventTypes.js'
 import '../../../src/define/http/http-url-input.js'
 import '../../../src/define/http/http-url-params-form.js'
-import '../../../src/md/button/ui-outlined-button.js'
+import '../../../src/md/button/ui-button.js'
 import UrlParamsForm from '../../../src/elements/http/UrlParamsForm.js'
 
 // const workerUri = new URL('/src/http-client/store/IdbThread.ts', import.meta.url).toString()
@@ -88,8 +88,8 @@ class ComponentDemoPage extends DemoPage {
       <section class="demo-section">
         <h2 class="title-large">Data configuration</h2>
         <div class="demo-row">
-          <ui-outlined-button @click="${this.handleGenerateHistory}">Generate URL history</ui-outlined-button>
-          <ui-outlined-button @click="${this.handleClearHistory}">Clear URL history</ui-outlined-button>
+          <ui-button color="outlined" @click="${this.handleGenerateHistory}">Generate URL history</ui-button>
+          <ui-button color="outlined" @click="${this.handleClearHistory}">Clear URL history</ui-button>
         </div>
       </section>
       <section class="demo-section">

package/demo/elements/project/request-editor.ts

@@ -15,7 +15,7 @@ import HttpProjectRequest from '../../../src/elements/project/HttpProjectRequest
 // import env from '../../env.js'
 import '../../../src/define/http-project/http-project-request.js'
 import '../../../src/define/http-project/http-project-request-history.js'
-import '../../../src/md/button/ui-outlined-button.js'
+import '../../../src/md/button/ui-button.js'
 
 const PROJECT_STORE_KEY = 'demo.project-ui.http-editor.project-data'
 const REQUEST_STORE_KEY = 'demo.project-ui.http-editor.request-data'
@@ -194,9 +194,9 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <section class="demo-section">
         <h2 class="title-large">Data control</h2>
-        <ui-outlined-button @click="${this.addEnvironment}">Add environment</ui-outlined-button>
-        <ui-outlined-button @click="${this.clearEnvironments}">Remove all environments</ui-outlined-button>
-        <ui-outlined-button @click="${this.clearAll}">Clear all data</ui-outlined-button>
+        <ui-button color="outlined" @click="${this.addEnvironment}">Add environment</ui-button>
+        <ui-button color="outlined" @click="${this.clearEnvironments}">Remove all environments</ui-button>
+        <ui-button color="outlined" @click="${this.clearAll}">Clear all data</ui-button>
       </section>
     `
   }

package/demo/layout/index.ts

@@ -4,7 +4,7 @@ import { DemoPage } from '../../src/demo/DemoPage.js'
 import { reactive } from '../../src/decorators/index.js'
 import { ISplitLayout, SplitLayout } from '../../src/elements/layout/SplitLayout.js'
 import { SplitItem } from '../../src/elements/layout/SplitItem.js'
-import '../../src/md/button/ui-outlined-button.js'
+import '../../src/md/button/ui-button.js'
 import { SplitCloseDirection } from '../../src/elements/layout/type.js'
 
 const storeKey = 'api-client.demo.layout.state'
@@ -164,10 +164,10 @@ class ComponentDemoPage extends DemoPage {
       <section aria-label="Demo control" class="data-control">
         <h2 class="title-medium">Data control</h2>
         <h3 class="title-small">Imperative API</h3>
-        <ui-outlined-button @click="${this.handleAddItem}">Add item to current</ui-outlined-button>
-        <ui-outlined-button @click="${this.handleReset}">Reset</ui-outlined-button>
-        <ui-outlined-button @click="${this.handleClose2Left}">Close to left (selected)</ui-outlined-button>
-        <ui-outlined-button @click="${this.handleClose2Right}">Close to right (selected)</ui-outlined-button>
+        <ui-button color="outlined" @click="${this.handleAddItem}">Add item to current</ui-button>
+        <ui-button color="outlined" @click="${this.handleReset}">Reset</ui-button>
+        <ui-button color="outlined" @click="${this.handleClose2Left}">Close to left (selected)</ui-button>
+        <ui-button color="outlined" @click="${this.handleClose2Right}">Close to right (selected)</ui-button>
 
         <h3 class="title-small">Declarative API</h3>
         <p>Items on the list can be dragged onto the layout.</p>

package/demo/md/buttons/button.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <title>UI button</title>
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" rel="stylesheet" />
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
+  <style>
+    .demo-row {
+      margin: 20px 0;
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+
+      --_row-height: 80px;
+    }
+
+    .demo .demo-section.l {
+      max-width: 1080px;
+
+      --_row-height: 120px;
+    }
+
+    .demo .demo-section.xl {
+      max-width: 1380px;
+
+      --_row-height: 180px;
+    }
+
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+
+    ol {
+      padding-left: 0;
+      list-style: none;
+      counter-reset: item;
+    }
+
+    ol > li {
+      margin-top: 4px;
+      margin-bottom: 20px;
+      margin-left: 36px;
+      counter-increment: item;
+      vertical-align: baseline;
+    }
+
+    ol > li:before {
+      display: inline-block;
+      width: 24px;
+      height: 32px;
+      margin-top: -4px;
+      margin-right: 10px;
+      margin-left: -36px;
+      border-radius: 12px;
+      background: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      line-height: 32px;
+      text-align: center;
+    }
+
+    ol.decimal > li:before {
+      content: counter(item, decimal);
+    }
+
+    .color-grid,
+    .state-grid {
+      display: grid;
+      gap: 0 0;
+      justify-items: center; 
+      align-items: center; 
+
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+
+    .color-grid {
+      grid-template-columns: 80px 1fr 1fr 1fr; 
+      grid-template-rows: var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height); 
+      
+    }
+
+    .state-grid {
+      grid-template-columns: 80px 1fr 1fr 1fr; 
+      grid-template-rows: var(--_row-height) var(--_row-height);
+    }
+
+    .legend-marker {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+
+  <script type="module" src="/.tmp/demo/md/buttons/button.js"></script>
+</body>
+</html>

package/demo/md/buttons/button.ts

@@ -0,0 +1,246 @@
+import { html, TemplateResult } from 'lit'
+import { reactive } from '../../../src/decorators/index.js'
+import type ButtonElement from '../../../src/md/button/internals/button.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import type { MdButtonShape, MdButtonSize, MdButtonColor } from '../../../src/md/button/internals/button.js'
+
+import '../../../src/md/button/ui-button.js'
+import '../../../src/md/icons/ui-icon.js'
+import '../../../src/md/dialog/ui-dialog.js'
+import '../../../src/md/text-field/ui-outlined-text-field.js'
+import '../../../src/md/text-field/ui-filled-text-field.js'
+
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'UI button'
+
+  @reactive() accessor formValues: string | undefined
+
+  @reactive() accessor dialogOpened = false
+
+  @reactive() accessor size: MdButtonSize = 's'
+
+  @reactive() accessor shape: MdButtonShape = 'round'
+
+  _clickHandler(e: Event): void {
+    const button = e.target as ButtonElement
+    console.log(`A ${button.type} button was clicked.`)
+  }
+
+  _submitHandler(e: SubmitEvent): void {
+    e.preventDefault()
+    const form = e.target as HTMLFormElement
+    const values = Array.from(new FormData(form)) as string[][]
+
+    const serialized = new URLSearchParams(values).toString()
+    this.formValues = serialized
+    this.dialogOpened = false
+  }
+
+  openDialog(): void {
+    this.dialogOpened = true
+  }
+
+  dialogClosed(): void {
+    this.dialogOpened = false
+  }
+
+  handleSizeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.size = select.value as MdButtonSize
+  }
+
+  handleShapeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.shape = select.value as MdButtonShape
+  }
+
+  readonly icon = html`<ui-icon slot="icon" icon="edit"></ui-icon>`
+
+  contentTemplate(): TemplateResult {
+    const { size: s, shape: h, icon: i } = this
+    return html`
+      <a href="../">Back</a>
+      ${this.renderConfigurationSection()}
+      <section class="demo-section ${s}">
+        <h2 class="display-large">Color</h2>
+        <div class="color-grid">
+          <span>&nbsp</span>
+          <span class="legend-marker">1</span>
+          <span class="legend-marker">2</span>
+          <span class="legend-marker">3</span>
+          <span class="legend-marker">A</span>
+          <ui-button color="elevated" .size="${s}" .shape="${h}">${i}elevated button</ui-button>
+          <ui-button color="elevated" .size="${s}" .shape="${h}" toggle>${i}elevated unselected</ui-button>
+          <ui-button color="elevated" .size="${s}" .shape="${h}" toggle selected>${i}elevated selected</ui-button>
+          <span class="legend-marker">B</span>
+          <ui-button color="filled" .size="${s}" .shape="${h}">${i}filled button</ui-button>
+          <ui-button color="filled" .size="${s}" .shape="${h}" toggle>${i}filled unselected</ui-button>
+          <ui-button color="filled" .size="${s}" .shape="${h}" toggle selected>${i}filled selected</ui-button>
+          <span class="legend-marker">C</span>
+          <ui-button color="tonal" .size="${s}" .shape="${h}">${i}tonal button</ui-button>
+          <ui-button color="tonal" .size="${s}" .shape="${h}" toggle>${i}tonal unselected</ui-button>
+          <ui-button color="tonal" .size="${s}" .shape="${h}" toggle selected>${i}tonal selected</ui-button>
+          <span class="legend-marker">D</span>
+          <ui-button color="outlined" .size="${s}" .shape="${h}">${i}outlined button</ui-button>
+          <ui-button color="outlined" .size="${s}" .shape="${h}" toggle>${i}outlined unselected</ui-button>
+          <ui-button color="outlined" .size="${s}" .shape="${h}" toggle selected>${i}outlined selected</ui-button>
+          <span class="legend-marker">E</span>
+          <ui-button color="text" .size="${s}" .shape="${h}">text button</ui-button>
+        </div>
+        <p class="body-medium">A. Elevated, B. Filled, C. Tonal, D. Outlined, E. Text</p>
+        <ol class="decimal body-medium">
+          <li>Default</li>
+          <li>Toggle: unselected</li>
+          <li>Toggle: selected</li>
+        </ol>
+      </section>
+
+      ${this.renderStatesSection('elevated')} ${this.renderStatesSection('filled')} ${this.renderStatesSection('tonal')}
+      ${this.renderStatesSection('outlined')}
+
+      <section class="demo-section ${s}">
+        <h3 class="headline-medium">Text button states</h3>
+
+        <div class="state-grid">
+          <span>&nbsp</span>
+          <span class="legend-marker">1</span>
+          <span></span>
+          <span></span>
+          <span class="legend-marker">A</span>
+          <ui-button color="text" .size="${s}" .shape="${h}">enabled</ui-button>
+          <span></span>
+          <span></span>
+          <span class="legend-marker">B</span>
+          <ui-button color="text" .size="${s}" .shape="${h}" disabled>disabled</ui-button>
+          <span></span>
+          <span></span>
+        </div>
+        <p class="body-medium">A. Enabled, B. Disabled</p>
+        <ol class="decimal body-medium">
+          <li>Default</li>
+        </ol>
+      </section>
+
+      <section class="demo-section ${s}">
+        <h2 class="display-large">A submit button within a form</h2>
+        <div class="frame">
+          <form method="get" action="#" @submit="${this._submitHandler}">
+            <label for="formInput">An input</label>
+            <input type="text" id="formInput" required name="input" />
+            <label for="checkboxInput">A checkbox</label>
+            <input type="checkbox" id="checkboxInput" name="flag" />
+            <ui-button name="submit" value="on" type="submit">Submit</ui-button>
+          </form>
+        </div>
+      </section>
+
+      <section class="demo-section ${s}">
+        <h2 class="display-large">A submit button outside a form</h2>
+        <div class="frame">
+          <form method="get" action="#" @submit="${this._submitHandler}" id="myForm">
+            <label for="formInput">An input</label>
+            <input type="text" id="formInput" required name="input" />
+            <label for="checkboxInput">A checkbox</label>
+            <input type="checkbox" id="checkboxInput" name="flag" />
+          </form>
+          <div>
+            <ui-button name="submit" value="on" type="submit" form="myForm">Submit</ui-button>
+          </div>
+        </div>
+      </section>
+
+      <section class="demo-section ${s}">
+        <h2 class="display-large">Buttons in a dialog</h2>
+        <div class="frame">
+          <ui-button @click="${this.openDialog}">Open dialog</ui-button>
+        </div>
+        <ui-dialog ?open="${this.dialogOpened}" @close="${this.dialogClosed}" modal>
+          <span slot="title">Dialog with a form</span>
+          <form method="get" action="#" @submit="${this._submitHandler}" id="dialogForm">
+            <label for="formInput">An input</label>
+            <input type="text" id="formInput" required name="input" />
+            <label for="checkboxInput">A checkbox</label>
+            <input type="checkbox" id="checkboxInput" name="flag" />
+          </form>
+          <ui-button color="text" slot="button" value="dismiss">Dismiss</ui-button>
+          <ui-button color="text" slot="button" name="submit" value="confirm" type="submit" form="dialogForm"
+            >Submit</ui-button
+          >
+        </ui-dialog>
+      </section>
+
+      ${this.formValues
+        ? html`
+            <output>
+              <code><pre>${this.formValues}</pre></code>
+            </output>
+          `
+        : html``}
+    `
+  }
+
+  renderStatesSection(type: MdButtonColor): TemplateResult {
+    const { size: s, shape: h } = this
+    return html`
+      <section class="demo-section ${s}">
+        <h3 class="headline-medium">${type} button states</h3>
+
+        <div class="state-grid">
+          <span>&nbsp</span>
+          <span class="legend-marker">1</span>
+          <span class="legend-marker">2</span>
+          <span class="legend-marker">3</span>
+          <span class="legend-marker">A</span>
+          <ui-button color="${type}" .size="${s}" .shape="${h}">enabled</ui-button>
+          <ui-button color="${type}" .size="${s}" .shape="${h}" toggle>enabled</ui-button>
+          <ui-button color="${type}" .size="${s}" .shape="${h}" toggle selected>enabled</ui-button>
+          <span class="legend-marker">B</span>
+          <ui-button color="${type}" .size="${s}" .shape="${h}" disabled>disabled</ui-button>
+          <ui-button color="${type}" .size="${s}" .shape="${h}" toggle disabled>disabled</ui-button>
+          <ui-button color="${type}" .size="${s}" .shape="${h}" toggle selected disabled>disabled</ui-button>
+        </div>
+        <p class="body-medium">A. Enabled, B. Disabled</p>
+        <ol class="decimal body-medium">
+          <li>Default</li>
+          <li>Toggle: unselected</li>
+          <li>Toggle: selected</li>
+        </ol>
+      </section>
+    `
+  }
+
+  renderConfigurationSection(): TemplateResult {
+    const { size: s, shape: h } = this
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Configuration</h2>
+        <div class="md-select outlined">
+          <label for="size">Size</label>
+          <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="xs">Extra small</option>
+            <option value="s">Small</option>
+            <option value="m">Medium</option>
+            <option value="l">Large</option>
+            <option value="xl">Extra large</option>
+          </select>
+        </div>
+        <div class="md-select outlined">
+          <label for="shape">Shape</label>
+          <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="round">Round</option>
+            <option value="square">Square</option>
+          </select>
+        </div>
+      </section>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()