Skip to content

Commit

Permalink
feat(theming cleanup): resstore initial token order
Browse files Browse the repository at this point in the history
  • Loading branch information
Ddouglasz committed Apr 22, 2024
1 parent 6a90116 commit bdc818a
Show file tree
Hide file tree
Showing 7 changed files with 314 additions and 171 deletions.
53 changes: 27 additions & 26 deletions design-system/materials/custom-properties.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,6 @@
*/

:root {
--color-neutral: hsl(232, 18%, 80%);
--color-neutral-05: hsl(0deg 0% 80% / 5%);
--color-neutral-10: hsl(0deg 0% 80% / 10%);
--color-neutral-40: hsl(232, 18%, 40%);
--color-neutral-60: hsl(232, 18%, 60%);
--color-neutral-85: hsl(232, 18%, 85%);
--color-neutral-90: hsl(232, 18%, 90%);
--color-neutral-95: hsl(232, 18%, 95%);
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
--color-solid: #1a1a1a;
--color-solid-02: hsl(0deg 0% 10% / 2%);
--color-solid-05: hsl(0deg 0% 10% / 5%);
--color-solid-10: hsl(0deg 0% 10% / 10%);
--color-surface: #fff;
--color-transparent: transparent;
--color-primary: hsl(240, 64%, 58%);
--color-primary-10: hsl(240, 66%, 19%);
--color-primary-20: hsl(240, 45%, 33%);
Expand All @@ -37,6 +16,7 @@
--color-primary-90: hsl(243, 100%, 93%);
--color-primary-95: hsl(244, 100%, 97%);
--color-primary-98: hsl(244, 100%, 99%);
--color-accent: #213c45;
--color-accent-10: hsl(195, 100%, 10%);
--color-accent-20: hsl(195, 80%, 20%);
--color-accent-30: hsl(195, 70%, 30%);
Expand Down Expand Up @@ -74,11 +54,21 @@
--color-turquoise-90: hsl(180, 88%, 90%);
--color-turquoise-95: hsl(180, 88%, 95%);
--color-turquoise-98: hsl(180, 100%, 98%);
--color-success: hsl(152, 77%, 39%);
--color-success-25: hsl(155, 84%, 20%);
--color-success-40: hsl(155, 90%, 24%);
--color-success-85: hsl(144, 69%, 80%);
--color-success-95: hsl(141, 76%, 92%);
--color-neutral: hsl(232, 18%, 80%);
--color-neutral-05: hsl(0deg 0% 80% / 5%);
--color-neutral-10: hsl(0deg 0% 80% / 10%);
--color-neutral-40: hsl(232, 18%, 40%);
--color-neutral-60: hsl(232, 18%, 60%);
--color-neutral-85: hsl(232, 18%, 85%);
--color-neutral-90: hsl(232, 18%, 90%);
--color-neutral-95: hsl(232, 18%, 95%);
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
--color-warning: hsl(35, 90%, 45%);
--color-warning-25: hsl(33, 83%, 25%);
--color-warning-40: hsl(33, 80%, 34%);
Expand All @@ -90,6 +80,17 @@
--color-error-40: hsl(3, 60%, 46%);
--color-error-85: hsl(1, 55%, 74%);
--color-error-95: hsl(349, 66%, 92%);
--color-solid: #1a1a1a;
--color-solid-02: hsl(0deg 0% 10% / 2%);
--color-solid-05: hsl(0deg 0% 10% / 5%);
--color-solid-10: hsl(0deg 0% 10% / 10%);
--color-surface: #fff;
--color-transparent: transparent;
--color-success: hsl(152, 77%, 39%);
--color-success-25: hsl(155, 84%, 20%);
--color-success-40: hsl(155, 90%, 24%);
--color-success-85: hsl(144, 69%, 80%);
--color-success-95: hsl(141, 76%, 92%);
--border-radius-1: 1px;
--border-radius-2: 2px;
--border-radius-4: 4px;
Expand Down
53 changes: 27 additions & 26 deletions design-system/materials/custom-properties.json
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,4 @@
{
"--color-neutral": "hsl(232, 18%, 80%)",
"--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
"--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
"--color-neutral-40": "hsl(232, 18%, 40%)",
"--color-neutral-60": "hsl(232, 18%, 60%)",
"--color-neutral-85": "hsl(232, 18%, 85%)",
"--color-neutral-90": "hsl(232, 18%, 90%)",
"--color-neutral-95": "hsl(232, 18%, 95%)",
"--color-neutral-98": "hsl(232, 18%, 98%)",
"--color-info": "#078cdf",
"--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
"--color-info-60": "hsl(203.05555555555554, 93.9130434783%, 60%)",
"--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
"--color-info-90": "#CEEBFD",
"--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
"--color-solid": "#1a1a1a",
"--color-solid-02": "hsl(0deg 0% 10% / 2%)",
"--color-solid-05": "hsl(0deg 0% 10% / 5%)",
"--color-solid-10": "hsl(0deg 0% 10% / 10%)",
"--color-surface": "#fff",
"--color-transparent": "transparent",
"--color-primary": "hsl(240, 64%, 58%)",
"--color-primary-10": "hsl(240, 66%, 19%)",
"--color-primary-20": "hsl(240, 45%, 33%)",
Expand All @@ -30,6 +9,7 @@
"--color-primary-90": "hsl(243, 100%, 93%)",
"--color-primary-95": "hsl(244, 100%, 97%)",
"--color-primary-98": "hsl(244, 100%, 99%)",
"--color-accent": "#213c45",
"--color-accent-10": "hsl(195, 100%, 10%)",
"--color-accent-20": "hsl(195, 80%, 20%)",
"--color-accent-30": "hsl(195, 70%, 30%)",
Expand Down Expand Up @@ -67,11 +47,21 @@
"--color-turquoise-90": "hsl(180, 88%, 90%)",
"--color-turquoise-95": "hsl(180, 88%, 95%)",
"--color-turquoise-98": "hsl(180, 100%, 98%)",
"--color-success": "hsl(152, 77%, 39%)",
"--color-success-25": "hsl(155, 84%, 20%)",
"--color-success-40": "hsl(155, 90%, 24%)",
"--color-success-85": "hsl(144, 69%, 80%)",
"--color-success-95": "hsl(141, 76%, 92%)",
"--color-neutral": "hsl(232, 18%, 80%)",
"--color-neutral-05": "hsl(0deg 0% 80% / 5%)",
"--color-neutral-10": "hsl(0deg 0% 80% / 10%)",
"--color-neutral-40": "hsl(232, 18%, 40%)",
"--color-neutral-60": "hsl(232, 18%, 60%)",
"--color-neutral-85": "hsl(232, 18%, 85%)",
"--color-neutral-90": "hsl(232, 18%, 90%)",
"--color-neutral-95": "hsl(232, 18%, 95%)",
"--color-neutral-98": "hsl(232, 18%, 98%)",
"--color-info": "#078cdf",
"--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
"--color-info-60": "hsl(203.05555555555554, 93.9130434783%, 60%)",
"--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
"--color-info-90": "#CEEBFD",
"--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
"--color-warning": "hsl(35, 90%, 45%)",
"--color-warning-25": "hsl(33, 83%, 25%)",
"--color-warning-40": "hsl(33, 80%, 34%)",
Expand All @@ -83,6 +73,17 @@
"--color-error-40": "hsl(3, 60%, 46%)",
"--color-error-85": "hsl(1, 55%, 74%)",
"--color-error-95": "hsl(349, 66%, 92%)",
"--color-solid": "#1a1a1a",
"--color-solid-02": "hsl(0deg 0% 10% / 2%)",
"--color-solid-05": "hsl(0deg 0% 10% / 5%)",
"--color-solid-10": "hsl(0deg 0% 10% / 10%)",
"--color-surface": "#fff",
"--color-transparent": "transparent",
"--color-success": "hsl(152, 77%, 39%)",
"--color-success-25": "hsl(155, 84%, 20%)",
"--color-success-40": "hsl(155, 90%, 24%)",
"--color-success-85": "hsl(144, 69%, 80%)",
"--color-success-95": "hsl(141, 76%, 92%)",
"--border-radius-1": "1px",
"--border-radius-2": "2px",
"--border-radius-4": "4px",
Expand Down
53 changes: 27 additions & 26 deletions design-system/materials/custom-properties_default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,6 @@
*/

:root {
--color-neutral: hsl(232, 18%, 80%);
--color-neutral-05: hsl(0deg 0% 80% / 5%);
--color-neutral-10: hsl(0deg 0% 80% / 10%);
--color-neutral-40: hsl(232, 18%, 40%);
--color-neutral-60: hsl(232, 18%, 60%);
--color-neutral-85: hsl(232, 18%, 85%);
--color-neutral-90: hsl(232, 18%, 90%);
--color-neutral-95: hsl(232, 18%, 95%);
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
--color-solid: #1a1a1a;
--color-solid-02: hsl(0deg 0% 10% / 2%);
--color-solid-05: hsl(0deg 0% 10% / 5%);
--color-solid-10: hsl(0deg 0% 10% / 10%);
--color-surface: #fff;
--color-transparent: transparent;
--color-primary: hsl(240, 64%, 58%);
--color-primary-10: hsl(240, 66%, 19%);
--color-primary-20: hsl(240, 45%, 33%);
Expand All @@ -37,6 +16,7 @@
--color-primary-90: hsl(243, 100%, 93%);
--color-primary-95: hsl(244, 100%, 97%);
--color-primary-98: hsl(244, 100%, 99%);
--color-accent: #213c45;
--color-accent-10: hsl(195, 100%, 10%);
--color-accent-20: hsl(195, 80%, 20%);
--color-accent-30: hsl(195, 70%, 30%);
Expand Down Expand Up @@ -74,11 +54,21 @@
--color-turquoise-90: hsl(180, 88%, 90%);
--color-turquoise-95: hsl(180, 88%, 95%);
--color-turquoise-98: hsl(180, 100%, 98%);
--color-success: hsl(152, 77%, 39%);
--color-success-25: hsl(155, 84%, 20%);
--color-success-40: hsl(155, 90%, 24%);
--color-success-85: hsl(144, 69%, 80%);
--color-success-95: hsl(141, 76%, 92%);
--color-neutral: hsl(232, 18%, 80%);
--color-neutral-05: hsl(0deg 0% 80% / 5%);
--color-neutral-10: hsl(0deg 0% 80% / 10%);
--color-neutral-40: hsl(232, 18%, 40%);
--color-neutral-60: hsl(232, 18%, 60%);
--color-neutral-85: hsl(232, 18%, 85%);
--color-neutral-90: hsl(232, 18%, 90%);
--color-neutral-95: hsl(232, 18%, 95%);
--color-neutral-98: hsl(232, 18%, 98%);
--color-info: #078cdf;
--color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
--color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
--color-warning: hsl(35, 90%, 45%);
--color-warning-25: hsl(33, 83%, 25%);
--color-warning-40: hsl(33, 80%, 34%);
Expand All @@ -90,6 +80,17 @@
--color-error-40: hsl(3, 60%, 46%);
--color-error-85: hsl(1, 55%, 74%);
--color-error-95: hsl(349, 66%, 92%);
--color-solid: #1a1a1a;
--color-solid-02: hsl(0deg 0% 10% / 2%);
--color-solid-05: hsl(0deg 0% 10% / 5%);
--color-solid-10: hsl(0deg 0% 10% / 10%);
--color-surface: #fff;
--color-transparent: transparent;
--color-success: hsl(152, 77%, 39%);
--color-success-25: hsl(155, 84%, 20%);
--color-success-40: hsl(155, 90%, 24%);
--color-success-85: hsl(144, 69%, 80%);
--color-success-95: hsl(141, 76%, 92%);
--border-radius-1: 1px;
--border-radius-2: 2px;
--border-radius-4: 4px;
Expand Down
22 changes: 12 additions & 10 deletions design-system/materials/custom-properties_recolouring.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@
--background-color-for-input: #fff;
--background-color-for-input-when-disabled: hsl(232, 18%, 95%);
--background-color-for-input-when-readonly: hsl(232, 18%, 95%);
--background-color-for-input-when-hovered: hsl(175, 100%, 99%);
--background-color-for-input-when-hovered: hsl(244, 100%, 99%);
--background-color-for-localized-input-label: #fff;
--background-color-for-localized-input-label-when-readonly: hsl(
232,
Expand All @@ -208,24 +208,26 @@
18%,
95%
);
--background-color-for-button-when-active: hsl(175, 70%, 90%);
--background-color-for-button-when-hovered: hsl(175, 90%, 95%);
--background-color-for-button-when-active: hsl(243, 100%, 93%);
--background-color-for-button-when-hovered: hsl(244, 100%, 97%);
--background-color-for-button-when-disabled: hsl(232, 18%, 95%);
--border-color-for-input: hsl(232, 18%, 80%);
--border-color-for-input-when-disabled: hsl(232, 18%, 80%);
--border-color-for-input-when-readonly: #fff;
--border-color-for-input-when-error: #e60050;
--border-color-for-input-when-warning: #f16d0e;
--border-color-for-input-when-error: hsl(3, 65%, 58%);
--border-color-for-input-when-warning: hsl(35, 90%, 45%);
--border-color-for-input-when-hovered: hsl(232, 18%, 80%);
--border-color-for-input-when-focused: hsl(175, 55%, 40%);
--border-color-for-button-as-secondary: hsl(175, 70%, 85%);
--border-color-for-input-when-focused: hsl(240, 100%, 67%);
--border-color-for-button-as-secondary: hsl(244, 100%, 84%);
--border-radius-for-input: 4px;
--font-color-for-input: #1a1a1a;
--font-color-for-input-when-disabled: hsl(232, 18%, 60%);
--font-color-for-input-when-error: hsl(339.1304347826087, 100%, 40%);
--font-color-for-input-when-error: hsl(3, 60%, 46%);
--font-color-for-input-when-readonly: hsl(232, 18%, 40%);
--font-color-for-input-when-warning: #f16d0e;
--font-color-for-button-as-secondary: hsl(175, 55%, 45%);
--font-color-for-input-when-warning: hsl(35, 90%, 45%);
--font-color-for-button-as-secondary: hsl(240, 64%, 58%);
--height-for-button-as-big: 40px;
--height-for-button-as-small: 16px;
--height-for-button-as-medium: 32px;
--height-for-input: 40px;
--height-for-input-as-small: 32px;
Expand Down
Loading

0 comments on commit bdc818a

Please sign in to comment.