From f04004cbca9e5838652e571700b162f9026a663e Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Mon, 9 Jan 2023 16:57:41 +0330 Subject: [PATCH 1/4] refactor(ui): color system --- ui/demo-pwa/color.html | 86 ++++++++++++++ ui/demo-pwa/style/helper/demo.css | 162 +++++++++++++++++++++++++++ ui/demo-pwa/style/tokens/palette.css | 112 +++++++++--------- 3 files changed, 309 insertions(+), 51 deletions(-) create mode 100644 ui/demo-pwa/color.html create mode 100644 ui/demo-pwa/style/helper/demo.css diff --git a/ui/demo-pwa/color.html b/ui/demo-pwa/color.html new file mode 100644 index 000000000..b297c0050 --- /dev/null +++ b/ui/demo-pwa/color.html @@ -0,0 +1,86 @@ + + + + + + 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..1691f969d --- /dev/null +++ b/ui/demo-pwa/style/helper/demo.css @@ -0,0 +1,162 @@ +body { + display: flex; + padding: calc(3 * var(--sys-spacing-track)); + gap: calc(3 * var(--sys-spacing-track)); +} + +.row { + flex-grow: 1; +} + +.box { + height: calc(6 * var(--sys-spacing-track)); +} + +.row:nth-child(1) .box:nth-child(1) { + background-color: var(--ref-palette-primary0); +} +.row:nth-child(1) .box:nth-child(2) { + background-color: var(--ref-palette-primary10); +} +.row:nth-child(1) .box:nth-child(3) { + background-color: var(--ref-palette-primary20); +} +.row:nth-child(1) .box:nth-child(4) { + background-color: var(--ref-palette-primary25); +} +.row:nth-child(1) .box:nth-child(5) { + background-color: var(--ref-palette-primary30); +} +.row:nth-child(1) .box:nth-child(6) { + background-color: var(--ref-palette-primary35); +} +.row:nth-child(1) .box:nth-child(7) { + background-color: var(--ref-palette-primary40); +} +.row:nth-child(1) .box:nth-child(8) { + background-color: var(--ref-palette-primary50); +} +.row:nth-child(1) .box:nth-child(9) { + background-color: var(--ref-palette-primary60); +} +.row:nth-child(1) .box:nth-child(10) { + background-color: var(--ref-palette-primary70); +} +.row:nth-child(1) .box:nth-child(11) { + background-color: var(--ref-palette-primary80); +} +.row:nth-child(1) .box:nth-child(12) { + background-color: var(--ref-palette-primary90); +} +.row:nth-child(1) .box:nth-child(13) { + background-color: var(--ref-palette-primary95); +} +.row:nth-child(1) .box:nth-child(14) { + background-color: var(--ref-palette-primary98); +} +.row:nth-child(1) .box:nth-child(15) { + background-color: var(--ref-palette-primary99); +} +.row:nth-child(1) .box:nth-child(16) { + background-color: var(--ref-palette-primary100); +} + + +.row:nth-child(2) .box:nth-child(1) { + background-color: var(--ref-palette-secondary0); +} +.row:nth-child(2) .box:nth-child(2) { + background-color: var(--ref-palette-secondary10); +} +.row:nth-child(2) .box:nth-child(3) { + background-color: var(--ref-palette-secondary20); +} +.row:nth-child(2) .box:nth-child(4) { + background-color: var(--ref-palette-secondary25); +} +.row:nth-child(2) .box:nth-child(5) { + background-color: var(--ref-palette-secondary30); +} +.row:nth-child(2) .box:nth-child(6) { + background-color: var(--ref-palette-secondary35); +} +.row:nth-child(2) .box:nth-child(7) { + background-color: var(--ref-palette-secondary40); +} +.row:nth-child(2) .box:nth-child(8) { + background-color: var(--ref-palette-secondary50); +} +.row:nth-child(2) .box:nth-child(9) { + background-color: var(--ref-palette-secondary60); +} +.row:nth-child(2) .box:nth-child(10) { + background-color: var(--ref-palette-secondary70); +} +.row:nth-child(2) .box:nth-child(11) { + background-color: var(--ref-palette-secondary80); +} +.row:nth-child(2) .box:nth-child(12) { + background-color: var(--ref-palette-secondary90); +} +.row:nth-child(2) .box:nth-child(13) { + background-color: var(--ref-palette-secondary95); +} +.row:nth-child(2) .box:nth-child(14) { + background-color: var(--ref-palette-secondary98); +} +.row:nth-child(2) .box:nth-child(15) { + background-color: var(--ref-palette-secondary99); +} +.row:nth-child(2) .box:nth-child(16) { + background-color: var(--ref-palette-secondary100); +} + + +.row:nth-child(3) .box:nth-child(1) { + background-color: var(--ref-palette-tertiary0); +} +.row:nth-child(3) .box:nth-child(2) { + background-color: var(--ref-palette-tertiary10); +} +.row:nth-child(3) .box:nth-child(3) { + background-color: var(--ref-palette-tertiary20); +} +.row:nth-child(3) .box:nth-child(4) { + background-color: var(--ref-palette-tertiary25); +} +.row:nth-child(3) .box:nth-child(5) { + background-color: var(--ref-palette-tertiary30); +} +.row:nth-child(3) .box:nth-child(6) { + background-color: var(--ref-palette-tertiary35); +} +.row:nth-child(3) .box:nth-child(7) { + background-color: var(--ref-palette-tertiary40); +} +.row:nth-child(3) .box:nth-child(8) { + background-color: var(--ref-palette-tertiary50); +} +.row:nth-child(3) .box:nth-child(9) { + background-color: var(--ref-palette-tertiary60); +} +.row:nth-child(3) .box:nth-child(10) { + background-color: var(--ref-palette-tertiary70); +} +.row:nth-child(3) .box:nth-child(11) { + background-color: var(--ref-palette-tertiary80); +} +.row:nth-child(3) .box:nth-child(12) { + background-color: var(--ref-palette-tertiary90); +} +.row:nth-child(3) .box:nth-child(13) { + background-color: var(--ref-palette-tertiary95); +} +.row:nth-child(3) .box:nth-child(14) { + background-color: var(--ref-palette-tertiary98); +} +.row:nth-child(3) .box:nth-child(15) { + background-color: var(--ref-palette-tertiary99); +} +.row:nth-child(3) .box:nth-child(16) { + background-color: var(--ref-palette-tertiary100); +} diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index ff586c7c0..6cfbd1877 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -1,56 +1,62 @@ :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); + /* 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: hsl(var(--ref-palette-primary-hue), 0%, 0%); + --ref-palette-primary10: hsl(var(--ref-palette-primary-hue), 100%, 10%); + --ref-palette-primary20: hsl(var(--ref-palette-primary-hue), 100%, 20%); + --ref-palette-primary25: hsl(var(--ref-palette-primary-hue), 100%, 25%); + --ref-palette-primary30: hsl(var(--ref-palette-primary-hue), 100%, 30%); + --ref-palette-primary35: hsl(var(--ref-palette-primary-hue), 100%, 35%); + --ref-palette-primary40: hsl(var(--ref-palette-primary-hue), 100%, 40%); + --ref-palette-primary50: hsl(var(--ref-palette-primary-hue), 80%, 50%); + --ref-palette-primary60: hsl(var(--ref-palette-primary-hue), 85%, 60%); + --ref-palette-primary70: hsl(var(--ref-palette-primary-hue), 88%, 70%); + --ref-palette-primary80: hsl(var(--ref-palette-primary-hue), 95%, 82%); + --ref-palette-primary90: hsl(var(--ref-palette-primary-hue), 100%, 90%); + --ref-palette-primary95: hsl(var(--ref-palette-primary-hue), 100%, 95%); + --ref-palette-primary98: hsl(var(--ref-palette-primary-hue), 100%, 98%); + --ref-palette-primary99: hsl(var(--ref-palette-primary-hue), 100%, 99%); + --ref-palette-primary100: hsl(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: hsl(var(--ref-palette-secondary-hue), 0%, 0%); + --ref-palette-secondary10: hsl(var(--ref-palette-secondary-hue), 40%, 11%); + --ref-palette-secondary20: hsl(var(--ref-palette-secondary-hue), 27%, 20%); + --ref-palette-secondary25: hsl(var(--ref-palette-secondary-hue), 23%, 25%); + --ref-palette-secondary30: hsl(var(--ref-palette-secondary-hue), 20%, 30%); + --ref-palette-secondary35: hsl(var(--ref-palette-secondary-hue), 18%, 35%); + --ref-palette-secondary40: hsl(var(--ref-palette-secondary-hue), 16%, 40%); + --ref-palette-secondary50: hsl(var(--ref-palette-secondary-hue), 13%, 50%); + --ref-palette-secondary60: hsl(var(--ref-palette-secondary-hue), 17%, 60%); + --ref-palette-secondary70: hsl(var(--ref-palette-secondary-hue), 24%, 70%); + --ref-palette-secondary80: hsl(var(--ref-palette-secondary-hue), 40%, 80%); + --ref-palette-secondary90: hsl(var(--ref-palette-secondary-hue), 70%, 90%); + --ref-palette-secondary95: hsl(var(--ref-palette-secondary-hue), 100%, 95%); + --ref-palette-secondary98: hsl(var(--ref-palette-secondary-hue), 100%, 98%); + --ref-palette-secondary99: hsl(var(--ref-palette-secondary-hue), 100%, 99%); + --ref-palette-secondary100: hsl(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: hsl(var(--ref-palette-tertiary-hue), 0%, 0%); + --ref-palette-tertiary10: hsl(var(--ref-palette-tertiary-hue), 40%, 11%); + --ref-palette-tertiary20: hsl(var(--ref-palette-tertiary-hue), 27%, 20%); + --ref-palette-tertiary25: hsl(var(--ref-palette-tertiary-hue), 23%, 25%); + --ref-palette-tertiary30: hsl(var(--ref-palette-tertiary-hue), 20%, 30%); + --ref-palette-tertiary35: hsl(var(--ref-palette-tertiary-hue), 18%, 35%); + --ref-palette-tertiary40: hsl(var(--ref-palette-tertiary-hue), 16%, 40%); + --ref-palette-tertiary50: hsl(var(--ref-palette-tertiary-hue), 13%, 50%); + --ref-palette-tertiary60: hsl(var(--ref-palette-tertiary-hue), 17%, 60%); + --ref-palette-tertiary70: hsl(var(--ref-palette-tertiary-hue), 24%, 70%); + --ref-palette-tertiary80: hsl(var(--ref-palette-tertiary-hue), 40%, 80%); + --ref-palette-tertiary90: hsl(var(--ref-palette-tertiary-hue), 70%, 90%); + --ref-palette-tertiary95: hsl(var(--ref-palette-tertiary-hue), 100%, 95%); + --ref-palette-tertiary98: hsl(var(--ref-palette-tertiary-hue), 100%, 98%); + --ref-palette-tertiary99: hsl(var(--ref-palette-tertiary-hue), 100%, 99%); + --ref-palette-tertiary100: hsl(var(--ref-palette-tertiary-hue), 100%, 100%); + /* neutral */ --ref-palette-neutral0: #000000; --ref-palette-neutral10: #1a1c1e; @@ -68,6 +74,7 @@ --ref-palette-neutral98: #faf9fd; --ref-palette-neutral99: #fdfcff; --ref-palette-neutral100: #ffffff; + /* neutral-variant */ --ref-palette-neutral-variant0: #000000; --ref-palette-neutral-variant10: #181c22; @@ -85,6 +92,7 @@ --ref-palette-neutral-variant98: #f8f9ff; --ref-palette-neutral-variant99: #fdfcff; --ref-palette-neutral-variant100: #ffffff; + /* error */ --ref-palette-error0: #000000; --ref-palette-error10: #410002; @@ -106,7 +114,8 @@ :root { /* theme light */ - --sys-color-primary: var(--ref-palette-primary40); + --sys-color-primary-hsl: var(--ref-palette-primary40); + --sys-color-primary: hsl(var(--sys-color-primary-hsl)); --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); @@ -185,7 +194,8 @@ --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-primary-hsl: var(--ref-palette-primary40); + --sys-color-inverse-primary: hsl(var(--sys-color-inverse-primary-hsl)); --sys-color-inverse-surface: var(--ref-palette-neutral90); --sys-color-inverse-on-surface: var(--ref-palette-neutral20); } From 7a01fd44322641622fe352336930ab159bbafc59 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Mon, 9 Jan 2023 16:59:14 +0330 Subject: [PATCH 2/4] refactor(ui): color system --- ui/demo-pwa/style/helper/demo.css | 96 ++++++++++++++-------------- ui/demo-pwa/style/tokens/palette.css | 96 ++++++++++++++-------------- 2 files changed, 96 insertions(+), 96 deletions(-) diff --git a/ui/demo-pwa/style/helper/demo.css b/ui/demo-pwa/style/helper/demo.css index 1691f969d..e80f9bf9a 100644 --- a/ui/demo-pwa/style/helper/demo.css +++ b/ui/demo-pwa/style/helper/demo.css @@ -13,150 +13,150 @@ body { } .row:nth-child(1) .box:nth-child(1) { - background-color: var(--ref-palette-primary0); + background-color: hsl(var(--ref-palette-primary0)); } .row:nth-child(1) .box:nth-child(2) { - background-color: var(--ref-palette-primary10); + background-color: hsl(var(--ref-palette-primary10)); } .row:nth-child(1) .box:nth-child(3) { - background-color: var(--ref-palette-primary20); + background-color: hsl(var(--ref-palette-primary20)); } .row:nth-child(1) .box:nth-child(4) { - background-color: var(--ref-palette-primary25); + background-color: hsl(var(--ref-palette-primary25)); } .row:nth-child(1) .box:nth-child(5) { - background-color: var(--ref-palette-primary30); + background-color: hsl(var(--ref-palette-primary30)); } .row:nth-child(1) .box:nth-child(6) { - background-color: var(--ref-palette-primary35); + background-color: hsl(var(--ref-palette-primary35)); } .row:nth-child(1) .box:nth-child(7) { - background-color: var(--ref-palette-primary40); + background-color: hsl(var(--ref-palette-primary40)); } .row:nth-child(1) .box:nth-child(8) { - background-color: var(--ref-palette-primary50); + background-color: hsl(var(--ref-palette-primary50)); } .row:nth-child(1) .box:nth-child(9) { - background-color: var(--ref-palette-primary60); + background-color: hsl(var(--ref-palette-primary60)); } .row:nth-child(1) .box:nth-child(10) { - background-color: var(--ref-palette-primary70); + background-color: hsl(var(--ref-palette-primary70)); } .row:nth-child(1) .box:nth-child(11) { - background-color: var(--ref-palette-primary80); + background-color: hsl(var(--ref-palette-primary80)); } .row:nth-child(1) .box:nth-child(12) { - background-color: var(--ref-palette-primary90); + background-color: hsl(var(--ref-palette-primary90)); } .row:nth-child(1) .box:nth-child(13) { - background-color: var(--ref-palette-primary95); + background-color: hsl(var(--ref-palette-primary95)); } .row:nth-child(1) .box:nth-child(14) { - background-color: var(--ref-palette-primary98); + background-color: hsl(var(--ref-palette-primary98)); } .row:nth-child(1) .box:nth-child(15) { - background-color: var(--ref-palette-primary99); + background-color: hsl(var(--ref-palette-primary99)); } .row:nth-child(1) .box:nth-child(16) { - background-color: var(--ref-palette-primary100); + background-color: hsl(var(--ref-palette-primary100)); } .row:nth-child(2) .box:nth-child(1) { - background-color: var(--ref-palette-secondary0); + background-color: hsl(var(--ref-palette-secondary0)); } .row:nth-child(2) .box:nth-child(2) { - background-color: var(--ref-palette-secondary10); + background-color: hsl(var(--ref-palette-secondary10)); } .row:nth-child(2) .box:nth-child(3) { - background-color: var(--ref-palette-secondary20); + background-color: hsl(var(--ref-palette-secondary20)); } .row:nth-child(2) .box:nth-child(4) { - background-color: var(--ref-palette-secondary25); + background-color: hsl(var(--ref-palette-secondary25)); } .row:nth-child(2) .box:nth-child(5) { - background-color: var(--ref-palette-secondary30); + background-color: hsl(var(--ref-palette-secondary30)); } .row:nth-child(2) .box:nth-child(6) { - background-color: var(--ref-palette-secondary35); + background-color: hsl(var(--ref-palette-secondary35)); } .row:nth-child(2) .box:nth-child(7) { - background-color: var(--ref-palette-secondary40); + background-color: hsl(var(--ref-palette-secondary40)); } .row:nth-child(2) .box:nth-child(8) { - background-color: var(--ref-palette-secondary50); + background-color: hsl(var(--ref-palette-secondary50)); } .row:nth-child(2) .box:nth-child(9) { - background-color: var(--ref-palette-secondary60); + background-color: hsl(var(--ref-palette-secondary60)); } .row:nth-child(2) .box:nth-child(10) { - background-color: var(--ref-palette-secondary70); + background-color: hsl(var(--ref-palette-secondary70)); } .row:nth-child(2) .box:nth-child(11) { - background-color: var(--ref-palette-secondary80); + background-color: hsl(var(--ref-palette-secondary80)); } .row:nth-child(2) .box:nth-child(12) { - background-color: var(--ref-palette-secondary90); + background-color: hsl(var(--ref-palette-secondary90)); } .row:nth-child(2) .box:nth-child(13) { - background-color: var(--ref-palette-secondary95); + background-color: hsl(var(--ref-palette-secondary95)); } .row:nth-child(2) .box:nth-child(14) { - background-color: var(--ref-palette-secondary98); + background-color: hsl(var(--ref-palette-secondary98)); } .row:nth-child(2) .box:nth-child(15) { - background-color: var(--ref-palette-secondary99); + background-color: hsl(var(--ref-palette-secondary99)); } .row:nth-child(2) .box:nth-child(16) { - background-color: var(--ref-palette-secondary100); + background-color: hsl(var(--ref-palette-secondary100)); } .row:nth-child(3) .box:nth-child(1) { - background-color: var(--ref-palette-tertiary0); + background-color: hsl(var(--ref-palette-tertiary0)); } .row:nth-child(3) .box:nth-child(2) { - background-color: var(--ref-palette-tertiary10); + background-color: hsl(var(--ref-palette-tertiary10)); } .row:nth-child(3) .box:nth-child(3) { - background-color: var(--ref-palette-tertiary20); + background-color: hsl(var(--ref-palette-tertiary20)); } .row:nth-child(3) .box:nth-child(4) { - background-color: var(--ref-palette-tertiary25); + background-color: hsl(var(--ref-palette-tertiary25)); } .row:nth-child(3) .box:nth-child(5) { - background-color: var(--ref-palette-tertiary30); + background-color: hsl(var(--ref-palette-tertiary30)); } .row:nth-child(3) .box:nth-child(6) { - background-color: var(--ref-palette-tertiary35); + background-color: hsl(var(--ref-palette-tertiary35)); } .row:nth-child(3) .box:nth-child(7) { - background-color: var(--ref-palette-tertiary40); + background-color: hsl(var(--ref-palette-tertiary40)); } .row:nth-child(3) .box:nth-child(8) { - background-color: var(--ref-palette-tertiary50); + background-color: hsl(var(--ref-palette-tertiary50)); } .row:nth-child(3) .box:nth-child(9) { - background-color: var(--ref-palette-tertiary60); + background-color: hsl(var(--ref-palette-tertiary60)); } .row:nth-child(3) .box:nth-child(10) { - background-color: var(--ref-palette-tertiary70); + background-color: hsl(var(--ref-palette-tertiary70)); } .row:nth-child(3) .box:nth-child(11) { - background-color: var(--ref-palette-tertiary80); + background-color: hsl(var(--ref-palette-tertiary80)); } .row:nth-child(3) .box:nth-child(12) { - background-color: var(--ref-palette-tertiary90); + background-color: hsl(var(--ref-palette-tertiary90)); } .row:nth-child(3) .box:nth-child(13) { - background-color: var(--ref-palette-tertiary95); + background-color: hsl(var(--ref-palette-tertiary95)); } .row:nth-child(3) .box:nth-child(14) { - background-color: var(--ref-palette-tertiary98); + background-color: hsl(var(--ref-palette-tertiary98)); } .row:nth-child(3) .box:nth-child(15) { - background-color: var(--ref-palette-tertiary99); + background-color: hsl(var(--ref-palette-tertiary99)); } .row:nth-child(3) .box:nth-child(16) { - background-color: var(--ref-palette-tertiary100); + background-color: hsl(var(--ref-palette-tertiary100)); } diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index 6cfbd1877..1e38d549a 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -4,58 +4,58 @@ --ref-palette-tertiary-hue: calc(var(--ref-palette-primary-hue) + 70); /* primary */ - --ref-palette-primary0: hsl(var(--ref-palette-primary-hue), 0%, 0%); - --ref-palette-primary10: hsl(var(--ref-palette-primary-hue), 100%, 10%); - --ref-palette-primary20: hsl(var(--ref-palette-primary-hue), 100%, 20%); - --ref-palette-primary25: hsl(var(--ref-palette-primary-hue), 100%, 25%); - --ref-palette-primary30: hsl(var(--ref-palette-primary-hue), 100%, 30%); - --ref-palette-primary35: hsl(var(--ref-palette-primary-hue), 100%, 35%); - --ref-palette-primary40: hsl(var(--ref-palette-primary-hue), 100%, 40%); - --ref-palette-primary50: hsl(var(--ref-palette-primary-hue), 80%, 50%); - --ref-palette-primary60: hsl(var(--ref-palette-primary-hue), 85%, 60%); - --ref-palette-primary70: hsl(var(--ref-palette-primary-hue), 88%, 70%); - --ref-palette-primary80: hsl(var(--ref-palette-primary-hue), 95%, 82%); - --ref-palette-primary90: hsl(var(--ref-palette-primary-hue), 100%, 90%); - --ref-palette-primary95: hsl(var(--ref-palette-primary-hue), 100%, 95%); - --ref-palette-primary98: hsl(var(--ref-palette-primary-hue), 100%, 98%); - --ref-palette-primary99: hsl(var(--ref-palette-primary-hue), 100%, 99%); - --ref-palette-primary100: hsl(var(--ref-palette-primary-hue), 100%, 100%); + --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: hsl(var(--ref-palette-secondary-hue), 0%, 0%); - --ref-palette-secondary10: hsl(var(--ref-palette-secondary-hue), 40%, 11%); - --ref-palette-secondary20: hsl(var(--ref-palette-secondary-hue), 27%, 20%); - --ref-palette-secondary25: hsl(var(--ref-palette-secondary-hue), 23%, 25%); - --ref-palette-secondary30: hsl(var(--ref-palette-secondary-hue), 20%, 30%); - --ref-palette-secondary35: hsl(var(--ref-palette-secondary-hue), 18%, 35%); - --ref-palette-secondary40: hsl(var(--ref-palette-secondary-hue), 16%, 40%); - --ref-palette-secondary50: hsl(var(--ref-palette-secondary-hue), 13%, 50%); - --ref-palette-secondary60: hsl(var(--ref-palette-secondary-hue), 17%, 60%); - --ref-palette-secondary70: hsl(var(--ref-palette-secondary-hue), 24%, 70%); - --ref-palette-secondary80: hsl(var(--ref-palette-secondary-hue), 40%, 80%); - --ref-palette-secondary90: hsl(var(--ref-palette-secondary-hue), 70%, 90%); - --ref-palette-secondary95: hsl(var(--ref-palette-secondary-hue), 100%, 95%); - --ref-palette-secondary98: hsl(var(--ref-palette-secondary-hue), 100%, 98%); - --ref-palette-secondary99: hsl(var(--ref-palette-secondary-hue), 100%, 99%); - --ref-palette-secondary100: hsl(var(--ref-palette-secondary-hue), 100%, 100%); + --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: hsl(var(--ref-palette-tertiary-hue), 0%, 0%); - --ref-palette-tertiary10: hsl(var(--ref-palette-tertiary-hue), 40%, 11%); - --ref-palette-tertiary20: hsl(var(--ref-palette-tertiary-hue), 27%, 20%); - --ref-palette-tertiary25: hsl(var(--ref-palette-tertiary-hue), 23%, 25%); - --ref-palette-tertiary30: hsl(var(--ref-palette-tertiary-hue), 20%, 30%); - --ref-palette-tertiary35: hsl(var(--ref-palette-tertiary-hue), 18%, 35%); - --ref-palette-tertiary40: hsl(var(--ref-palette-tertiary-hue), 16%, 40%); - --ref-palette-tertiary50: hsl(var(--ref-palette-tertiary-hue), 13%, 50%); - --ref-palette-tertiary60: hsl(var(--ref-palette-tertiary-hue), 17%, 60%); - --ref-palette-tertiary70: hsl(var(--ref-palette-tertiary-hue), 24%, 70%); - --ref-palette-tertiary80: hsl(var(--ref-palette-tertiary-hue), 40%, 80%); - --ref-palette-tertiary90: hsl(var(--ref-palette-tertiary-hue), 70%, 90%); - --ref-palette-tertiary95: hsl(var(--ref-palette-tertiary-hue), 100%, 95%); - --ref-palette-tertiary98: hsl(var(--ref-palette-tertiary-hue), 100%, 98%); - --ref-palette-tertiary99: hsl(var(--ref-palette-tertiary-hue), 100%, 99%); - --ref-palette-tertiary100: hsl(var(--ref-palette-tertiary-hue), 100%, 100%); + --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; From 5c46f1e8ffb5e09c9e46a2cf20dcb8873d7a489c Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Mon, 9 Jan 2023 17:38:56 +0330 Subject: [PATCH 3/4] refactor(ui): dynamic neutral colors --- ui/demo-pwa/color.html | 144 +++++++++++------- ui/demo-pwa/style/helper/demo.css | 111 +++++++++++++- ui/demo-pwa/style/tokens/palette.css | 220 ++++++++++++++++----------- 3 files changed, 330 insertions(+), 145 deletions(-) diff --git a/ui/demo-pwa/color.html b/ui/demo-pwa/color.html index b297c0050..8b50aaa05 100644 --- a/ui/demo-pwa/color.html +++ b/ui/demo-pwa/color.html @@ -28,59 +28,97 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ui/demo-pwa/style/helper/demo.css b/ui/demo-pwa/style/helper/demo.css index e80f9bf9a..5fcee0d4a 100644 --- a/ui/demo-pwa/style/helper/demo.css +++ b/ui/demo-pwa/style/helper/demo.css @@ -1,7 +1,12 @@ body { + padding: calc(2 * var(--sys-spacing-track)); +} + +.container { display: flex; - padding: calc(3 * var(--sys-spacing-track)); - gap: calc(3 * var(--sys-spacing-track)); + gap: calc(2 * var(--sys-spacing-track)); + height: 100%; + overflow-y: auto; } .row { @@ -160,3 +165,105 @@ body { .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 1e38d549a..8d1b0ffe8 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -2,6 +2,7 @@ --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); /* primary */ --ref-palette-primary0: var(--ref-palette-primary-hue), 0%, 0%; @@ -58,40 +59,40 @@ --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; @@ -115,88 +116,127 @@ :root { /* theme light */ --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: var(--ref-palette-primary100); - --sys-color-primary-container: var(--ref-palette-primary90); - --sys-color-on-primary-container: var(--ref-palette-primary10); + --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: 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-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: 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-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: var(--ref-palette-neutral99); */ - --sys-color-background: var(--ref-palette-neutral95); - --sys-color-on-background: var(--ref-palette-neutral10); + --sys-color-background: hsl(var(--sys-color-background-hsl)); + --sys-color-on-background: hsl(var(--sys-color-on-background-hsl)); - --sys-color-surface: var(--ref-palette-neutral99); - --sys-color-on-surface: var(--ref-palette-neutral10); + --sys-color-surface: hsl(var(--sys-color-surface-hsl)); + --sys-color-on-surface: hsl(var(--sys-color-on-surface-hsl)); - --sys-color-surface-variant: var(--ref-palette-neutral-variant90); - --sys-color-on-surface-variant: var(--ref-palette-neutral-variant30); + --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: var(--ref-palette-neutral-variant50); - --sys-color-outline-variant: var(--ref-palette-neutral-variant80); + --sys-color-outline: hsl(var(--sys-color-outline-hsl)); + --sys-color-outline-variant: hsl(var(--sys-color-outline-variant-hsl)); - --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-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: var(--ref-palette-primary80); - --sys-color-inverse-surface: var(--ref-palette-neutral20); - --sys-color-inverse-on-surface: var(--ref-palette-neutral95); + --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: var(--sys-color-primary); - --sys-color-shadow: var(--ref-palette-neutral0); - --sys-color-scrim: var(--ref-palette-neutral0); + --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-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: 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-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: 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-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: var(--ref-palette-neutral10); */ - --sys-color-background: var(--ref-palette-neutral20); - --sys-color-on-background: var(--ref-palette-neutral90); + /* --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: var(--ref-palette-neutral10); - --sys-color-on-surface: 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: var(--ref-palette-neutral-variant30); - --sys-color-on-surface-variant: var(--ref-palette-neutral-variant80); + --sys-color-surface-variant-hsl: var(--ref-palette-neutral-variant30); + --sys-color-on-surface-variant-hsl: var(--ref-palette-neutral-variant80); - --sys-color-outline: var(--ref-palette-neutral-variant60); - --sys-color-outline-variant: var(--ref-palette-neutral-variant30); + --sys-color-outline-hsl: var(--ref-palette-neutral-variant60); + --sys-color-outline-variant-hsl: 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-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-primary: hsl(var(--sys-color-inverse-primary-hsl)); - --sys-color-inverse-surface: var(--ref-palette-neutral90); - --sys-color-inverse-on-surface: var(--ref-palette-neutral20); + --sys-color-inverse-surface-hsl: var(--ref-palette-neutral90); + --sys-color-inverse-on-surface-hsl: var(--ref-palette-neutral20); } } From 98c4aa2efd7d54fc130a4fb502b42d0be4e68d13 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 10 Jan 2023 15:44:16 +0330 Subject: [PATCH 4/4] feat(ui/demo-pwa): error tokens --- ui/demo-pwa/style/tokens/palette.css | 34 ++++++++++++++-------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/ui/demo-pwa/style/tokens/palette.css b/ui/demo-pwa/style/tokens/palette.css index 8d1b0ffe8..56914eb5d 100644 --- a/ui/demo-pwa/style/tokens/palette.css +++ b/ui/demo-pwa/style/tokens/palette.css @@ -3,6 +3,7 @@ --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: var(--ref-palette-primary-hue), 0%, 0%; @@ -95,22 +96,22 @@ --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 { @@ -196,7 +197,6 @@ --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) {