diff --git a/ui/demo-pwa/color.html b/ui/demo-pwa/color.html new file mode 100644 index 000000000..8b50aaa05 --- /dev/null +++ b/ui/demo-pwa/color.html @@ -0,0 +1,124 @@ + + + + + + Alwatr Colors Demo + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/ui/demo-pwa/style/helper/demo.css b/ui/demo-pwa/style/helper/demo.css new file mode 100644 index 000000000..5fcee0d4a --- /dev/null +++ b/ui/demo-pwa/style/helper/demo.css @@ -0,0 +1,269 @@ +body { + padding: calc(2 * var(--sys-spacing-track)); +} + +.container { + display: flex; + gap: calc(2 * var(--sys-spacing-track)); + height: 100%; + overflow-y: auto; +} + +.row { + flex-grow: 1; +} + +.box { + height: calc(6 * var(--sys-spacing-track)); +} + +.row:nth-child(1) .box:nth-child(1) { + background-color: hsl(var(--ref-palette-primary0)); +} +.row:nth-child(1) .box:nth-child(2) { + background-color: hsl(var(--ref-palette-primary10)); +} +.row:nth-child(1) .box:nth-child(3) { + background-color: hsl(var(--ref-palette-primary20)); +} +.row:nth-child(1) .box:nth-child(4) { + background-color: hsl(var(--ref-palette-primary25)); +} +.row:nth-child(1) .box:nth-child(5) { + background-color: hsl(var(--ref-palette-primary30)); +} +.row:nth-child(1) .box:nth-child(6) { + background-color: hsl(var(--ref-palette-primary35)); +} +.row:nth-child(1) .box:nth-child(7) { + background-color: hsl(var(--ref-palette-primary40)); +} +.row:nth-child(1) .box:nth-child(8) { + background-color: hsl(var(--ref-palette-primary50)); +} +.row:nth-child(1) .box:nth-child(9) { + background-color: hsl(var(--ref-palette-primary60)); +} +.row:nth-child(1) .box:nth-child(10) { + background-color: hsl(var(--ref-palette-primary70)); +} +.row:nth-child(1) .box:nth-child(11) { + background-color: hsl(var(--ref-palette-primary80)); +} +.row:nth-child(1) .box:nth-child(12) { + background-color: hsl(var(--ref-palette-primary90)); +} +.row:nth-child(1) .box:nth-child(13) { + background-color: hsl(var(--ref-palette-primary95)); +} +.row:nth-child(1) .box:nth-child(14) { + background-color: hsl(var(--ref-palette-primary98)); +} +.row:nth-child(1) .box:nth-child(15) { + background-color: hsl(var(--ref-palette-primary99)); +} +.row:nth-child(1) .box:nth-child(16) { + background-color: hsl(var(--ref-palette-primary100)); +} + + +.row:nth-child(2) .box:nth-child(1) { + background-color: hsl(var(--ref-palette-secondary0)); +} +.row:nth-child(2) .box:nth-child(2) { + background-color: hsl(var(--ref-palette-secondary10)); +} +.row:nth-child(2) .box:nth-child(3) { + background-color: hsl(var(--ref-palette-secondary20)); +} +.row:nth-child(2) .box:nth-child(4) { + background-color: hsl(var(--ref-palette-secondary25)); +} +.row:nth-child(2) .box:nth-child(5) { + background-color: hsl(var(--ref-palette-secondary30)); +} +.row:nth-child(2) .box:nth-child(6) { + background-color: hsl(var(--ref-palette-secondary35)); +} +.row:nth-child(2) .box:nth-child(7) { + background-color: hsl(var(--ref-palette-secondary40)); +} +.row:nth-child(2) .box:nth-child(8) { + background-color: hsl(var(--ref-palette-secondary50)); +} +.row:nth-child(2) .box:nth-child(9) { + background-color: hsl(var(--ref-palette-secondary60)); +} +.row:nth-child(2) .box:nth-child(10) { + background-color: hsl(var(--ref-palette-secondary70)); +} +.row:nth-child(2) .box:nth-child(11) { + background-color: hsl(var(--ref-palette-secondary80)); +} +.row:nth-child(2) .box:nth-child(12) { + background-color: hsl(var(--ref-palette-secondary90)); +} +.row:nth-child(2) .box:nth-child(13) { + background-color: hsl(var(--ref-palette-secondary95)); +} +.row:nth-child(2) .box:nth-child(14) { + background-color: hsl(var(--ref-palette-secondary98)); +} +.row:nth-child(2) .box:nth-child(15) { + background-color: hsl(var(--ref-palette-secondary99)); +} +.row:nth-child(2) .box:nth-child(16) { + background-color: hsl(var(--ref-palette-secondary100)); +} + + +.row:nth-child(3) .box:nth-child(1) { + background-color: hsl(var(--ref-palette-tertiary0)); +} +.row:nth-child(3) .box:nth-child(2) { + background-color: hsl(var(--ref-palette-tertiary10)); +} +.row:nth-child(3) .box:nth-child(3) { + background-color: hsl(var(--ref-palette-tertiary20)); +} +.row:nth-child(3) .box:nth-child(4) { + background-color: hsl(var(--ref-palette-tertiary25)); +} +.row:nth-child(3) .box:nth-child(5) { + background-color: hsl(var(--ref-palette-tertiary30)); +} +.row:nth-child(3) .box:nth-child(6) { + background-color: hsl(var(--ref-palette-tertiary35)); +} +.row:nth-child(3) .box:nth-child(7) { + background-color: hsl(var(--ref-palette-tertiary40)); +} +.row:nth-child(3) .box:nth-child(8) { + background-color: hsl(var(--ref-palette-tertiary50)); +} +.row:nth-child(3) .box:nth-child(9) { + background-color: hsl(var(--ref-palette-tertiary60)); +} +.row:nth-child(3) .box:nth-child(10) { + background-color: hsl(var(--ref-palette-tertiary70)); +} +.row:nth-child(3) .box:nth-child(11) { + background-color: hsl(var(--ref-palette-tertiary80)); +} +.row:nth-child(3) .box:nth-child(12) { + background-color: hsl(var(--ref-palette-tertiary90)); +} +.row:nth-child(3) .box:nth-child(13) { + background-color: hsl(var(--ref-palette-tertiary95)); +} +.row:nth-child(3) .box:nth-child(14) { + background-color: hsl(var(--ref-palette-tertiary98)); +} +.row:nth-child(3) .box:nth-child(15) { + background-color: hsl(var(--ref-palette-tertiary99)); +} +.row:nth-child(3) .box:nth-child(16) { + background-color: hsl(var(--ref-palette-tertiary100)); +} + + + +.row:nth-child(4) .box:nth-child(1) { + background-color: hsl(var(--ref-palette-neutral0)); +} +.row:nth-child(4) .box:nth-child(2) { + background-color: hsl(var(--ref-palette-neutral10)); +} +.row:nth-child(4) .box:nth-child(3) { + background-color: hsl(var(--ref-palette-neutral20)); +} +.row:nth-child(4) .box:nth-child(4) { + background-color: hsl(var(--ref-palette-neutral25)); +} +.row:nth-child(4) .box:nth-child(5) { + background-color: hsl(var(--ref-palette-neutral30)); +} +.row:nth-child(4) .box:nth-child(6) { + background-color: hsl(var(--ref-palette-neutral35)); +} +.row:nth-child(4) .box:nth-child(7) { + background-color: hsl(var(--ref-palette-neutral40)); +} +.row:nth-child(4) .box:nth-child(8) { + background-color: hsl(var(--ref-palette-neutral50)); +} +.row:nth-child(4) .box:nth-child(9) { + background-color: hsl(var(--ref-palette-neutral60)); +} +.row:nth-child(4) .box:nth-child(10) { + background-color: hsl(var(--ref-palette-neutral70)); +} +.row:nth-child(4) .box:nth-child(11) { + background-color: hsl(var(--ref-palette-neutral80)); +} +.row:nth-child(4) .box:nth-child(12) { + background-color: hsl(var(--ref-palette-neutral90)); +} +.row:nth-child(4) .box:nth-child(13) { + background-color: hsl(var(--ref-palette-neutral95)); +} +.row:nth-child(4) .box:nth-child(14) { + background-color: hsl(var(--ref-palette-neutral98)); +} +.row:nth-child(4) .box:nth-child(15) { + background-color: hsl(var(--ref-palette-neutral99)); +} +.row:nth-child(4) .box:nth-child(16) { + background-color: hsl(var(--ref-palette-neutral100)); +} + + + +.row:nth-child(5) .box:nth-child(1) { + background-color: hsl(var(--ref-palette-neutral-variant0)); +} +.row:nth-child(5) .box:nth-child(2) { + background-color: hsl(var(--ref-palette-neutral-variant10)); +} +.row:nth-child(5) .box:nth-child(3) { + background-color: hsl(var(--ref-palette-neutral-variant20)); +} +.row:nth-child(5) .box:nth-child(4) { + background-color: hsl(var(--ref-palette-neutral-variant25)); +} +.row:nth-child(5) .box:nth-child(5) { + background-color: hsl(var(--ref-palette-neutral-variant30)); +} +.row:nth-child(5) .box:nth-child(6) { + background-color: hsl(var(--ref-palette-neutral-variant35)); +} +.row:nth-child(5) .box:nth-child(7) { + background-color: hsl(var(--ref-palette-neutral-variant40)); +} +.row:nth-child(5) .box:nth-child(8) { + background-color: hsl(var(--ref-palette-neutral-variant50)); +} +.row:nth-child(5) .box:nth-child(9) { + background-color: hsl(var(--ref-palette-neutral-variant60)); +} +.row:nth-child(5) .box:nth-child(10) { + background-color: hsl(var(--ref-palette-neutral-variant70)); +} +.row:nth-child(5) .box:nth-child(11) { + background-color: hsl(var(--ref-palette-neutral-variant80)); +} +.row:nth-child(5) .box:nth-child(12) { + background-color: hsl(var(--ref-palette-neutral-variant90)); +} +.row:nth-child(5) .box:nth-child(13) { + background-color: hsl(var(--ref-palette-neutral-variant95)); +} +.row:nth-child(5) .box:nth-child(14) { + background-color: hsl(var(--ref-palette-neutral-variant98)); +} +.row:nth-child(5) .box:nth-child(15) { + background-color: hsl(var(--ref-palette-neutral-variant99)); +} +.row:nth-child(5) .box:nth-child(16) { + background-color: hsl(var(--ref-palette-neutral-variant100)); +} diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index ff586c7c0..56914eb5d 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -1,192 +1,242 @@ :root { - /* --source: #005fac; */ + --ref-palette-primary-hue: 207; + --ref-palette-secondary-hue: calc(var(--ref-palette-primary-hue) + 12); + --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 70); + --ref-palette-neutral-hue: calc(var(--ref-palette-primary-hue) + 20); + --ref-palette-error-hue: 356; + /* primary */ - --ref-palette-primary0: #000000; - --ref-palette-primary10: #001c39; - --ref-palette-primary20: #00315d; - --ref-palette-primary25: #003c70; - --ref-palette-primary30: #004884; - --ref-palette-primary35: #005398; - --ref-palette-primary40: #015fac; - --ref-palette-primary50: #3279c7; - --ref-palette-primary60: #5293e3; - --ref-palette-primary70: #6faeff; - --ref-palette-primary80: #a4c9ff; - --ref-palette-primary90: #d4e3ff; - --ref-palette-primary95: #ebf1ff; - --ref-palette-primary98: #f8f9ff; - --ref-palette-primary99: #fdfcff; - --ref-palette-primary100: #ffffff; + --ref-palette-primary0: var(--ref-palette-primary-hue), 0%, 0%; + --ref-palette-primary10: var(--ref-palette-primary-hue), 100%, 10%; + --ref-palette-primary20: var(--ref-palette-primary-hue), 100%, 20%; + --ref-palette-primary25: var(--ref-palette-primary-hue), 100%, 25%; + --ref-palette-primary30: var(--ref-palette-primary-hue), 100%, 30%; + --ref-palette-primary35: var(--ref-palette-primary-hue), 100%, 35%; + --ref-palette-primary40: var(--ref-palette-primary-hue), 100%, 40%; + --ref-palette-primary50: var(--ref-palette-primary-hue), 80%, 50%; + --ref-palette-primary60: var(--ref-palette-primary-hue), 85%, 60%; + --ref-palette-primary70: var(--ref-palette-primary-hue), 88%, 70%; + --ref-palette-primary80: var(--ref-palette-primary-hue), 95%, 82%; + --ref-palette-primary90: var(--ref-palette-primary-hue), 100%, 90%; + --ref-palette-primary95: var(--ref-palette-primary-hue), 100%, 95%; + --ref-palette-primary98: var(--ref-palette-primary-hue), 100%, 98%; + --ref-palette-primary99: var(--ref-palette-primary-hue), 100%, 99%; + --ref-palette-primary100: var(--ref-palette-primary-hue), 100%, 100%; + /* secondary */ - --ref-palette-secondary0: #000000; - --ref-palette-secondary10: #111c2b; - --ref-palette-secondary20: #263141; - --ref-palette-secondary25: #313c4c; - --ref-palette-secondary30: #3d4758; - --ref-palette-secondary35: #485364; - --ref-palette-secondary40: #545f71; - --ref-palette-secondary50: #6d788a; - --ref-palette-secondary60: #8691a4; - --ref-palette-secondary70: #a1acc0; - --ref-palette-secondary80: #bcc7db; - --ref-palette-secondary90: #d8e3f8; - --ref-palette-secondary95: #ebf1ff; - --ref-palette-secondary98: #f8f9ff; - --ref-palette-secondary99: #fdfcff; - --ref-palette-secondary100: #ffffff; + --ref-palette-secondary0: var(--ref-palette-secondary-hue), 0%, 0%; + --ref-palette-secondary10: var(--ref-palette-secondary-hue), 40%, 11%; + --ref-palette-secondary20: var(--ref-palette-secondary-hue), 27%, 20%; + --ref-palette-secondary25: var(--ref-palette-secondary-hue), 23%, 25%; + --ref-palette-secondary30: var(--ref-palette-secondary-hue), 20%, 30%; + --ref-palette-secondary35: var(--ref-palette-secondary-hue), 18%, 35%; + --ref-palette-secondary40: var(--ref-palette-secondary-hue), 16%, 40%; + --ref-palette-secondary50: var(--ref-palette-secondary-hue), 13%, 50%; + --ref-palette-secondary60: var(--ref-palette-secondary-hue), 17%, 60%; + --ref-palette-secondary70: var(--ref-palette-secondary-hue), 24%, 70%; + --ref-palette-secondary80: var(--ref-palette-secondary-hue), 40%, 80%; + --ref-palette-secondary90: var(--ref-palette-secondary-hue), 70%, 90%; + --ref-palette-secondary95: var(--ref-palette-secondary-hue), 100%, 95%; + --ref-palette-secondary98: var(--ref-palette-secondary-hue), 100%, 98%; + --ref-palette-secondary99: var(--ref-palette-secondary-hue), 100%, 99%; + --ref-palette-secondary100: var(--ref-palette-secondary-hue), 100%, 100%; + /* tertiary */ - --ref-palette-tertiary0: #000000; - --ref-palette-tertiary10: #271430; - --ref-palette-tertiary20: #3d2946; - --ref-palette-tertiary25: #483452; - --ref-palette-tertiary30: #543f5e; - --ref-palette-tertiary35: #614a6a; - --ref-palette-tertiary40: #6d5677; - --ref-palette-tertiary50: #876e90; - --ref-palette-tertiary60: #a288ab; - --ref-palette-tertiary70: #bda2c6; - --ref-palette-tertiary80: #d9bde3; - --ref-palette-tertiary90: #f6d9ff; - --ref-palette-tertiary95: #fdebff; - --ref-palette-tertiary98: #fff7fc; - --ref-palette-tertiary99: #fffbff; - --ref-palette-tertiary100: #ffffff; + --ref-palette-tertiary0: var(--ref-palette-tertiary-hue), 0%, 0%; + --ref-palette-tertiary10: var(--ref-palette-tertiary-hue), 40%, 11%; + --ref-palette-tertiary20: var(--ref-palette-tertiary-hue), 27%, 20%; + --ref-palette-tertiary25: var(--ref-palette-tertiary-hue), 23%, 25%; + --ref-palette-tertiary30: var(--ref-palette-tertiary-hue), 20%, 30%; + --ref-palette-tertiary35: var(--ref-palette-tertiary-hue), 18%, 35%; + --ref-palette-tertiary40: var(--ref-palette-tertiary-hue), 16%, 40%; + --ref-palette-tertiary50: var(--ref-palette-tertiary-hue), 13%, 50%; + --ref-palette-tertiary60: var(--ref-palette-tertiary-hue), 17%, 60%; + --ref-palette-tertiary70: var(--ref-palette-tertiary-hue), 24%, 70%; + --ref-palette-tertiary80: var(--ref-palette-tertiary-hue), 40%, 80%; + --ref-palette-tertiary90: var(--ref-palette-tertiary-hue), 70%, 90%; + --ref-palette-tertiary95: var(--ref-palette-tertiary-hue), 100%, 95%; + --ref-palette-tertiary98: var(--ref-palette-tertiary-hue), 100%, 98%; + --ref-palette-tertiary99: var(--ref-palette-tertiary-hue), 100%, 99%; + --ref-palette-tertiary100: var(--ref-palette-tertiary-hue), 100%, 100%; + /* neutral */ - --ref-palette-neutral0: #000000; - --ref-palette-neutral10: #1a1c1e; - --ref-palette-neutral20: #2f3033; - --ref-palette-neutral25: #3a3b3e; - --ref-palette-neutral30: #46474a; - --ref-palette-neutral35: #515256; - --ref-palette-neutral40: #5d5e62; - --ref-palette-neutral50: #76777a; - --ref-palette-neutral60: #909094; - --ref-palette-neutral70: #ababae; - --ref-palette-neutral80: #c6c6ca; - --ref-palette-neutral90: #e3e2e6; - --ref-palette-neutral95: #f1f0f4; - --ref-palette-neutral98: #faf9fd; - --ref-palette-neutral99: #fdfcff; - --ref-palette-neutral100: #ffffff; + --ref-palette-neutral0: var(--ref-palette-neutral-hue), 0%, 0%; + --ref-palette-neutral10: var(--ref-palette-neutral-hue), 7%, 11%; + --ref-palette-neutral20: var(--ref-palette-neutral-hue), 4%, 19%; + --ref-palette-neutral25: var(--ref-palette-neutral-hue), 3%, 24%; + --ref-palette-neutral30: var(--ref-palette-neutral-hue), 3%, 28%; + --ref-palette-neutral35: var(--ref-palette-neutral-hue), 3%, 33%; + --ref-palette-neutral40: var(--ref-palette-neutral-hue), 3%, 37%; + --ref-palette-neutral50: var(--ref-palette-neutral-hue), 2%, 47%; + --ref-palette-neutral60: var(--ref-palette-neutral-hue), 2%, 57%; + --ref-palette-neutral70: var(--ref-palette-neutral-hue), 2%, 68%; + --ref-palette-neutral80: var(--ref-palette-neutral-hue), 4%, 78%; + --ref-palette-neutral90: var(--ref-palette-neutral-hue), 7%, 89%; + --ref-palette-neutral95: var(--ref-palette-neutral-hue), 15%, 95%; + --ref-palette-neutral98: var(--ref-palette-neutral-hue), 50%, 98%; + --ref-palette-neutral99: var(--ref-palette-neutral-hue), 100%, 99%; + --ref-palette-neutral100: var(--ref-palette-neutral-hue), 100%, 100%; + /* neutral-variant */ - --ref-palette-neutral-variant0: #000000; - --ref-palette-neutral-variant10: #181c22; - --ref-palette-neutral-variant20: #2d3138; - --ref-palette-neutral-variant25: #383c43; - --ref-palette-neutral-variant30: #43474e; - --ref-palette-neutral-variant35: #4f525a; - --ref-palette-neutral-variant40: #5b5e66; - --ref-palette-neutral-variant50: #73777f; - --ref-palette-neutral-variant60: #8d9199; - --ref-palette-neutral-variant70: #a8abb4; - --ref-palette-neutral-variant80: #c3c6cf; - --ref-palette-neutral-variant90: #dfe2eb; - --ref-palette-neutral-variant95: #eef0fa; - --ref-palette-neutral-variant98: #f8f9ff; - --ref-palette-neutral-variant99: #fdfcff; - --ref-palette-neutral-variant100: #ffffff; + --ref-palette-neutral-variant0: var(--ref-palette-neutral-hue), 0%, 0%; + --ref-palette-neutral-variant10: var(--ref-palette-neutral-hue), 17%, 11%; + --ref-palette-neutral-variant20: var(--ref-palette-neutral-hue), 11%, 20%; + --ref-palette-neutral-variant25: var(--ref-palette-neutral-hue), 9%, 24%; + --ref-palette-neutral-variant30: var(--ref-palette-neutral-hue), 8%, 28%; + --ref-palette-neutral-variant35: var(--ref-palette-neutral-hue), 7%, 33%; + --ref-palette-neutral-variant40: var(--ref-palette-neutral-hue), 6%, 38%; + --ref-palette-neutral-variant50: var(--ref-palette-neutral-hue), 5%, 48%; + --ref-palette-neutral-variant60: var(--ref-palette-neutral-hue), 5.6%, 58%; + --ref-palette-neutral-variant70: var(--ref-palette-neutral-hue), 7.4%, 68%; + --ref-palette-neutral-variant80: var(--ref-palette-neutral-hue), 11.1%, 79%; + --ref-palette-neutral-variant90: var(--ref-palette-neutral-hue), 23.1%, 90%; + --ref-palette-neutral-variant95: var(--ref-palette-neutral-hue), 54.5%, 95%; + --ref-palette-neutral-variant98: var(--ref-palette-neutral-hue), 100%, 98%; + --ref-palette-neutral-variant99: var(--ref-palette-neutral-hue), 100%, 99%; + --ref-palette-neutral-variant100: var(--ref-palette-neutral-hue), 100%, 100%; + /* error */ - --ref-palette-error0: #000000; - --ref-palette-error10: #410002; - --ref-palette-error20: #690005; - --ref-palette-error25: #7e0007; - --ref-palette-error30: #93000a; - --ref-palette-error35: #a80710; - --ref-palette-error40: #ba1a1a; - --ref-palette-error50: #de3730; - --ref-palette-error60: #ff5449; - --ref-palette-error70: #ff897d; - --ref-palette-error80: #ffb4ab; - --ref-palette-error90: #ffdad6; - --ref-palette-error95: #ffedea; - --ref-palette-error98: #fff8f7; - --ref-palette-error99: #fffbff; - --ref-palette-error100: #ffffff; + --ref-palette-error0: var(--ref-palette-error-hue), 0%, 0%; + --ref-palette-error10: var(--ref-palette-error-hue), 100%, 13%; + --ref-palette-error20: var(--ref-palette-error-hue), 100%, 21%; + --ref-palette-error25: var(--ref-palette-error-hue), 100%, 25%; + --ref-palette-error30: var(--ref-palette-error-hue), 100%, 29%; + --ref-palette-error35: var(--ref-palette-error-hue), 92%, 34%; + --ref-palette-error40: var(--ref-palette-error-hue), 75%, 42%; + --ref-palette-error50: var(--ref-palette-error-hue), 73%, 53%; + --ref-palette-error60: var(--ref-palette-error-hue), 100%, 64%; + --ref-palette-error70: var(--ref-palette-error-hue), 100%, 75%; + --ref-palette-error80: var(--ref-palette-error-hue), 100%, 84%; + --ref-palette-error90: var(--ref-palette-error-hue), 100%, 91%; + --ref-palette-error95: var(--ref-palette-error-hue), 100%, 95%; + --ref-palette-error98: var(--ref-palette-error-hue), 100%, 98%; + --ref-palette-error99: var(--ref-palette-error-hue), 100%, 99%; + --ref-palette-error100: var(--ref-palette-error-hue), 100%, 100%; } :root { /* theme light */ - --sys-color-primary: var(--ref-palette-primary40); - --sys-color-on-primary: var(--ref-palette-primary100); - --sys-color-primary-container: var(--ref-palette-primary90); - --sys-color-on-primary-container: var(--ref-palette-primary10); - - --sys-color-secondary: var(--ref-palette-secondary40); - --sys-color-on-secondary: var(--ref-palette-secondary100); - --sys-color-secondary-container: var(--ref-palette-secondary90); - --sys-color-on-secondary-container: var(--ref-palette-secondary10); - - --sys-color-tertiary: var(--ref-palette-tertiary40); - --sys-color-on-tertiary: var(--ref-palette-tertiary100); - --sys-color-tertiary-container: var(--ref-palette-tertiary90); - --sys-color-on-tertiary-container: var(--ref-palette-tertiary10); - - /* --sys-color-background: var(--ref-palette-neutral99); */ - --sys-color-background: var(--ref-palette-neutral95); - --sys-color-on-background: var(--ref-palette-neutral10); - - --sys-color-surface: var(--ref-palette-neutral99); - --sys-color-on-surface: var(--ref-palette-neutral10); - - --sys-color-surface-variant: var(--ref-palette-neutral-variant90); - --sys-color-on-surface-variant: var(--ref-palette-neutral-variant30); - - --sys-color-outline: var(--ref-palette-neutral-variant50); - --sys-color-outline-variant: var(--ref-palette-neutral-variant80); - - --sys-color-error: var(--ref-palette-error40); - --sys-color-error-container: var(--ref-palette-error90); - --sys-color-on-error: var(--ref-palette-error100); - --sys-color-on-error-container: var(--ref-palette-error10); - - --sys-color-inverse-primary: var(--ref-palette-primary80); - --sys-color-inverse-surface: var(--ref-palette-neutral20); - --sys-color-inverse-on-surface: var(--ref-palette-neutral95); - - --sys-color-surface-tint: var(--sys-color-primary); - --sys-color-shadow: var(--ref-palette-neutral0); - --sys-color-scrim: var(--ref-palette-neutral0); - + --sys-color-primary-hsl: var(--ref-palette-primary40); + --sys-color-on-primary-hsl: var(--ref-palette-primary100); + --sys-color-primary-container-hsl: var(--ref-palette-primary90); + --sys-color-on-primary-container-hsl: var(--ref-palette-primary10); + + --sys-color-secondary-hsl: var(--ref-palette-secondary40); + --sys-color-on-secondary-hsl: var(--ref-palette-secondary100); + --sys-color-secondary-container-hsl: var(--ref-palette-secondary90); + --sys-color-on-secondary-container-hsl: var(--ref-palette-secondary10); + + --sys-color-tertiary-hsl: var(--ref-palette-tertiary40); + --sys-color-on-tertiary-hsl: var(--ref-palette-tertiary100); + --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary90); + --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary10); + + /* --sys-color-background-hsl: var(--ref-palette-neutral99); */ + --sys-color-background-hsl: var(--ref-palette-neutral95); + --sys-color-on-background-hsl: var(--ref-palette-neutral10); + + --sys-color-surface-hsl: var(--ref-palette-neutral99); + --sys-color-on-surface-hsl: var(--ref-palette-neutral10); + + --sys-color-surface-variant-hsl: var(--ref-palette-neutral-variant90); + --sys-color-on-surface-variant-hsl: var(--ref-palette-neutral-variant30); + + --sys-color-outline-hsl: var(--ref-palette-neutral-variant50); + --sys-color-outline-variant-hsl: var(--ref-palette-neutral-variant80); + + --sys-color-error-hsl: var(--ref-palette-error40); + --sys-color-error-container-hsl: var(--ref-palette-error90); + --sys-color-on-error-hsl: var(--ref-palette-error100); + --sys-color-on-error-container-hsl: var(--ref-palette-error10); + + --sys-color-inverse-primary-hsl: var(--ref-palette-primary80); + --sys-color-inverse-surface-hsl: var(--ref-palette-neutral20); + --sys-color-inverse-on-surface-hsl: var(--ref-palette-neutral95); + + --sys-color-surface-tint-hsl: var(--sys-color-primary); + --sys-color-shadow-hsl: var(--ref-palette-neutral0); + --sys-color-scrim-hsl: var(--ref-palette-neutral0); + + /* make colors from hsl vars */ + --sys-color-primary: hsl(var(--sys-color-primary-hsl)); + --sys-color-on-primary: hsl(var(--sys-color-on-primary-hsl)); + --sys-color-primary-container: hsl(var(--sys-color-primary-container-hsl)); + --sys-color-on-primary-container: hsl(var(--sys-color-on-primary-container-hsl)); + + --sys-color-secondary: hsl(var(--sys-color-secondary-hsl)); + --sys-color-on-secondary: hsl(var(--sys-color-on-secondary-hsl)); + --sys-color-secondary-container: hsl(var(--sys-color-secondary-container-hsl)); + --sys-color-on-secondary-container: hsl(var(--sys-color-on-secondary-container-hsl)); + + --sys-color-tertiary: hsl(var(--sys-color-tertiary-hsl)); + --sys-color-on-tertiary: hsl(var(--sys-color-on-tertiary-hsl)); + --sys-color-tertiary-container: hsl(var(--sys-color-tertiary-container-hsl)); + --sys-color-on-tertiary-container: hsl(var(--sys-color-on-tertiary-container-hsl)); + + --sys-color-background: hsl(var(--sys-color-background-hsl)); + --sys-color-on-background: hsl(var(--sys-color-on-background-hsl)); + + --sys-color-surface: hsl(var(--sys-color-surface-hsl)); + --sys-color-on-surface: hsl(var(--sys-color-on-surface-hsl)); + + --sys-color-surface-variant: hsl(var(--sys-color-surface-variant-hsl)); + --sys-color-on-surface-variant: hsl(var(--sys-color-on-surface-variant-hsl)); + + --sys-color-outline: hsl(var(--sys-color-outline-hsl)); + --sys-color-outline-variant: hsl(var(--sys-color-outline-variant-hsl)); + + --sys-color-error: hsl(var(--sys-color-error-hsl)); + --sys-color-error-container: hsl(var(--sys-color-error-container-hsl)); + --sys-color-on-error: hsl(var(--sys-color-on-error-hsl)); + --sys-color-on-error-container: hsl(var(--sys-color-on-error-container-hsl)); + + --sys-color-inverse-primary: hsl(var(--sys-color-inverse-primary-hsl)); + --sys-color-inverse-surface: hsl(var(--sys-color-inverse-surface-hsl)); + --sys-color-inverse-on-surface: hsl(var(--sys-color-inverse-on-surface-hsl)); + + --sys-color-surface-tint: hsl(var(--sys-color-surface-tint-hsl)); + --sys-color-shadow: hsl(var(--sys-color-shadow-hsl)); + --sys-color-scrim: hsl(var(--sys-color-scrim-hsl)); } @media (prefers-color-scheme: dark) { :root { /* theme dark */ - --sys-color-primary: var(--ref-palette-primary80); - --sys-color-on-primary: var(--ref-palette-primary20); - --sys-color-primary-container: var(--ref-palette-primary30); - --sys-color-on-primary-container: var(--ref-palette-primary90); - - --sys-color-secondary: var(--ref-palette-secondary80); - --sys-color-on-secondary: var(--ref-palette-secondary20); - --sys-color-secondary-container: var(--ref-palette-secondary30); - --sys-color-on-secondary-container: var(--ref-palette-secondary90); - - --sys-color-tertiary: var(--ref-palette-tertiary80); - --sys-color-on-tertiary: var(--ref-palette-tertiary20); - --sys-color-tertiary-container: var(--ref-palette-tertiary30); - --sys-color-on-tertiary-container: var(--ref-palette-tertiary90); - - /* --sys-color-background: var(--ref-palette-neutral10); */ - --sys-color-background: var(--ref-palette-neutral20); - --sys-color-on-background: var(--ref-palette-neutral90); - - --sys-color-surface: var(--ref-palette-neutral10); - --sys-color-on-surface: var(--ref-palette-neutral90); - - --sys-color-surface-variant: var(--ref-palette-neutral-variant30); - --sys-color-on-surface-variant: var(--ref-palette-neutral-variant80); - - --sys-color-outline: var(--ref-palette-neutral-variant60); - --sys-color-outline-variant: var(--ref-palette-neutral-variant30); - - --sys-color-error: var(--ref-palette-error80); - --sys-color-error-container: var(--ref-palette-error30); - --sys-color-on-error: var(--ref-palette-error20); - --sys-color-on-error-container: var(--ref-palette-error90); - - --sys-color-inverse-primary: var(--ref-palette-primary40); - --sys-color-inverse-surface: var(--ref-palette-neutral90); - --sys-color-inverse-on-surface: var(--ref-palette-neutral20); + --sys-color-primary-hsl: var(--ref-palette-primary80); + --sys-color-on-primary-hsl: var(--ref-palette-primary20); + --sys-color-primary-container-hsl: var(--ref-palette-primary30); + --sys-color-on-primary-container-hsl: var(--ref-palette-primary90); + + --sys-color-secondary-hsl: var(--ref-palette-secondary80); + --sys-color-on-secondary-hsl: var(--ref-palette-secondary20); + --sys-color-secondary-container-hsl: var(--ref-palette-secondary30); + --sys-color-on-secondary-container-hsl: var(--ref-palette-secondary90); + + --sys-color-tertiary-hsl: var(--ref-palette-tertiary80); + --sys-color-on-tertiary-hsl: var(--ref-palette-tertiary20); + --sys-color-tertiary-container-hsl: var(--ref-palette-tertiary30); + --sys-color-on-tertiary-container-hsl: var(--ref-palette-tertiary90); + + /* --sys-color-background-hsl: var(--ref-palette-neutral10); */ + --sys-color-background-hsl: var(--ref-palette-neutral20); + --sys-color-on-background-hsl: var(--ref-palette-neutral90); + + --sys-color-surface-hsl: var(--ref-palette-neutral10); + --sys-color-on-surface-hsl: var(--ref-palette-neutral90); + + --sys-color-surface-variant-hsl: var(--ref-palette-neutral-variant30); + --sys-color-on-surface-variant-hsl: var(--ref-palette-neutral-variant80); + + --sys-color-outline-hsl: var(--ref-palette-neutral-variant60); + --sys-color-outline-variant-hsl: var(--ref-palette-neutral-variant30); + + --sys-color-error-hsl: var(--ref-palette-error80); + --sys-color-error-container-hsl: var(--ref-palette-error30); + --sys-color-on-error-hsl: var(--ref-palette-error20); + --sys-color-on-error-container-hsl: var(--ref-palette-error90); + + --sys-color-inverse-primary-hsl: var(--ref-palette-primary40); + --sys-color-inverse-surface-hsl: var(--ref-palette-neutral90); + --sys-color-inverse-on-surface-hsl: var(--ref-palette-neutral20); } }