diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 5b6f5c125ff418f1479f0830da33b41ab602adbb..e12344b2c69483142f0e1791484b9656265d385c 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -1,14 +1,99 @@
:where(html) {
- --gray-0: #f8f9fa;
- --gray-1: #f1f3f5;
- --gray-2: #e9ecef;
- --gray-3: #dee2e6;
- --gray-4: #ced4da;
- --gray-5: #adb5bd;
- --gray-6: #868e96;
- --gray-7: #495057;
- --gray-8: #343a40;
- --gray-9: #212529;
+ // uw-branding follows:
+ --art-1: #ffe8cc;
+ --art-2: #ffd8a8;
+ --art-3: #ffc078;
+ --art-4: #ffa94d;
+ --art-primary: #ff922b;
+ --cgc-1: #ffa5aa;
+ --cgc-2: #e41740;
+ --cgc-3: #b71233;
+ --cgc-4: #80001f;
+ --cgc-red: #c4262e;
+ --cgc-light: #E8878C;
+ --cgc-primary: #c4262e;
+ --gray-0: #ffffff;
+ --gray-1: #fafafa;
+ --gray-2: #eee;
+ --gray-3: #ccc;
+ --gray-4: #A2A2A2;
+ --gray-5: #757575;
+ --gray-6: #4e4e4e;
+ --gray-7: #333;
+ --gray-8: #000;
+ --gray-9: #000;
+ --eng-1: #d0b4ef;
+ --eng-2: #be33da;
+ --eng-3: #8100b4;
+ --eng-4: #57058b;
+ --eng-primary: #57058b;
+ --env-1: #daf582;
+ --env-2: #bed500;
+ --env-3: #b4be00;
+ --env-4: #607000;
+ --env-primary: #607000;
+ --health-1: #97dfef;
+ --health-2: #00bed0;
+ --health-3: #0098a5;
+ --health-4: #005963;
+ --health-primary: #005963;
+ --math-1: #ffbeef;
+ --math-2: #ff63aa;
+ --math-3: #df2498;
+ --math-4: #c60078;
+ --math-primary: #df2498;
+ --neutral-1: #dfdfdf;
+ --neutral-2: #a2a2a2;
+ --neutral-3: #787878;
+ --neutral-4: #000;
+ --neutral-primary: #000;
+ --sci-1: #d0ebff;
+ --sci-2: #a5d8ff;
+ --sci-3: #74c0fc;
+ --sci-4: #4dabf7;
+ --sci-primary: #339af0;
+ --school-1: #ffa5aa;
+ --school-2: #e41740;
+ --school-3: #b71233;
+ --school-4: #80001f;
+ --school-primary: #b71233;
+ --stj-1: #ffa5aa;
+ --stj-2: #e41740;
+ --stj-3: #b71233;
+ --stj-4: #80001f;
+ --stj-gold: #c88a11;
+ --stj-green: #01573e;
+ --stj-light: #92B7AC;
+ --stj-primary: #01573e;
+ --stp-1: #ffa5aa;
+ --stp-2: #e41740;
+ --stp-3: #b71233;
+ --stp-4: #80001f;
+ --stp-brown: #c88a11;
+ --stp-green: #01573e;
+ --stp-light: #92B7AC;
+ --stp-primary: #01573e;
+ --ren-1: #ffa5aa;
+ --ren-2: #e41740;
+ --ren-3: #b71233;
+ --ren-4: #80001f;
+ --ren-gold: #c88a11;
+ --ren-green: #01573e;
+ --ren-light: #92B7AC;
+ --ren-primary: #01573e;
+ --uw-black-1: #dfdfdf;
+ --uw-black-2: #a2a2a2;
+ --uw-black-3: #787878;
+ --uw-black-4: #000;
+ --uw-black-primary: #000;
+ --uw-gold-1: #fffaaa;
+ --uw-gold-2: #ffea30;
+ --uw-gold-3: #fdd54f;
+ --uw-gold-4: #e4b429;
+ --uw-gold-primary: #fffaaa;
+ --uw-white-1: #fff;
+ --uw-white-primary: #fff;
+ // Default Ohana follows:
--red-0: #fff5f5;
--red-1: #ffe3e3;
--red-2: #ffc9c9;
diff --git a/src/patterns/02-base/colors/colors.yml b/src/patterns/02-base/colors/colors.yml
index 00e14ed9c338575358c615e1fd5dc53a95320cf3..c10da569cdaf3ff58a9a6f957dd3d871261825c5 100644
--- a/src/patterns/02-base/colors/colors.yml
+++ b/src/patterns/02-base/colors/colors.yml
@@ -1,131 +1,244 @@
---
colors:
-# brand:
-# blue-cool-30v: '#59b9de'
-# blue-cool-50v: '#0d7ea2'
-# green-warm-20: '#cbd17a'
-# green-warm-50: '#6f7a41'
-# red-warm-20v: '#f6bd9c'
-# red-warm-40v: '#ef5e25'
-# shades:
-# light: '#fff'
-# dark: '#000'
grayscale:
-# gray-5: '#f0f0f0'
-# gray-10: '#e6e6e6'
-# gray-20: '#c9c9c9'
-# gray-30: '#adadad'
-# gray-40: '#919191'
-# gray-50: '#757575'
-# gray-60: '#5c5c5c'
-# gray-70: '#454545'
-# gray-80: '#2e2e2e'
-# gray-90: '#1b1b1b'
- white: '#fff'
- gray-1: '#fafafa'
- gray-2: '#eee'
- gray-3: '#ccc'
- gray-4: '#A2A2A2'
- gray-5: '#757575'
- gray-6: '#4e4e4e'
- gray-7: '#333'
- black: '#000'
+ --gray-0: 'var(--gray-0)'
+ --gray-1: 'var(--gray-1)'
+ --gray-2: 'var(--gray-2)'
+ --gray-3: 'var(--gray-3)'
+ --gray-4: 'var(--gray-4)'
+ --gray-5: 'var(--gray-5)'
+ --gray-6: 'var(--gray-6)'
+ --gray-7: 'var(--gray-7)'
+ --gray-8: 'var(--gray-8)'
+ --gray-9: 'var(--gray-9)'
uw-black:
- lvl1: '#dfdfdf'
- lvl2: '#a2a2a2'
- lvl3: '#787878'
- lvl4: '#000'
- primary: '#000'
+ --uw-black-1: 'var(--uw-black-1)'
+ --uw-black-2: 'var(--uw-black-2)'
+ --uw-black-3: 'var(--uw-black-3)'
+ --uw-black-4: 'var(--uw-black-4)'
+ --uw-black-primary: 'var(--uw-black-primary)'
uw-gold:
- lvl1: '#fffaaa'
- lvl2: '#ffea30'
- lvl3: '#fdd54f'
- lvl4: '#e4b429'
- primary: '#fffaaa'
+ --uw-gold-1: 'var( --uw-gold-1)'
+ --uw-gold-2: 'var( --uw-gold-2)'
+ --uw-gold-3: 'var(--uw-gold-3)'
+ --uw-gold-4: 'var(--uw-gold-4)'
+ --uw-gold-primary: 'var(--uw-gold-primary)'
uw-white:
- lvl1: '#fff'
- primary: '#fff'
+ --uw-white-1: 'var(--uw-white-1)'
+ --uw-white-primary: 'var(--uw-white-primary)'
neutral:
- lvl1: '#dfdfdf'
- lvl2: '#a2a2a2'
- lvl3: '#787878'
- lvl4: '#000'
- primary: '#000'
+ --neutral-1: 'var(--neutral-1)'
+ --neutral-2: 'var(--neutral-2)'
+ --neutral-3: 'var(--neutral-3)'
+ --neutral-4: 'var(--neutral-4)'
+ --neutral-primary: 'var(--neutral-primary)'
org-ahs:
- lvl1: '#97dfef'
- lvl2: '#00bed0'
- lvl3: '#0098a5'
- lvl4: '#005963'
- primary: '#005963'
+ --health-1: 'var( --health-1)'
+ --health-2: 'var( --health-2)'
+ --health-3: 'var( --health-3)'
+ --health-4: 'var( --health-4)'
+ --health-primary: 'var(--health-primary)'
org-art:
- lvl1: '#ffd5a5'
- lvl2: '#fbaf00'
- lvl3: '#e78100'
- lvl4: '#d93f00'
- primary: '#d93f00'
+ --art-1: 'var(--art-1)'
+ --art-2: 'var(--art-2)'
+ --art-3: 'var(--art-3)'
+ --art-4: 'var(--art-4)'
+ --art-primary: 'var(--art-primary)'
org-eng:
- lvl1: '#d0b4ef'
- lvl2: '#be33da'
- lvl3: '#8100b4'
- lvl4: '#57058b'
- primary: '#57058b'
+ --eng-1: 'var(--eng-1)'
+ --eng-2: 'var(--eng-2)'
+ --eng-3: 'var(--eng-3)'
+ --eng-4: 'var(--eng-4)'
+ --eng-primary: 'var(--eng-primary)'
org-env:
- lvl1: '#daf582'
- lvl2: '#bed500'
- lvl3: '#b4be00'
- lvl4: '#607000'
- primary: '#607000'
+ --env-1: 'var(--env-1)'
+ --env-2: 'var(--env-2)'
+ --env-3: 'var(--env-3)'
+ --env-4: 'var(--env-4)'
+ --env-primary: 'var(--env-primary)'
org-mat:
- lvl1: '#ffbeef'
- lvl2: '#ff63aa'
- lvl3: '#df2498'
- lvl4: '#c60078'
- primary: '#df2498'
+ --math-1: 'var(--math-1)'
+ --math-2: 'var(--math-2)'
+ --math-3: 'var(--math-3)'
+ --math-4: 'var(--math-4)'
+ --math-primary: 'var(--math-primary)'
org-sci:
- lvl1: '#b4d5ff'
- lvl2: '#63a0ff'
- lvl3: '#0073ce'
- lvl4: '#0033be'
- primary: '#0073ce'
+ --sci-1: 'var(--sci-1)'
+ --sci-2: 'var(--sci-2)'
+ --sci-3: 'var(--sci-3)'
+ --sci-4: 'var(--sci-4)'
+ --sci-primary: 'var(--sci-primar)'
org-school:
- lvl1: '#ffa5aa'
- lvl2: '#e41740'
- lvl3: '#b71233'
- lvl4: '#80001f'
- primary: '#b71233'
+ --school-1: 'var(--school-1)'
+ --school-2: 'var(--school-2)'
+ --school-3: 'var(--school-3)'
+ --school-4: 'var(--school-4)'
+ --school-primary: 'var(--school-primary)'
org-ren:
- green: '#00693c'
- red: '#de3831'
- gold: '#d2c295'
- lvl1: '#ffa5aa'
- lvl2: '#e41740'
- lvl3: '#b71233'
- lvl4: '#80001f'
- primary: '#00693c'
- light: '#7FB49D'
+ --ren-1: 'var(--ren-1)'
+ --ren-2: 'var(--ren-2)'
+ --ren-3: 'var(--ren-3)'
+ --ren-4: 'var(--ren-4)'
+ --ren-gold: 'var(--ren-gold)'
+ --ren-green: 'var(--ren-green)'
+ --ren-red: 'var(--ren-red)'
+ --ren-primary: 'var(--ren-primary)'
+ --ren-light: 'var(--ren-light)'
org-stj:
- green: '#01573e'
- gold: '#c88a11'
- lvl1: '#ffa5aa'
- lvl2: '#e41740'
- lvl3: '#b71233'
- lvl4: '#80001f'
- primary: '#01573e'
- light: '#92B7AC'
+ --stj-green: 'var(--stj-green)'
+ --stj-gold: 'var(--stj-gold)'
+ --stj-1: 'var(--stj-1)'
+ --stj-2: 'var(--stj-2)'
+ --stj-3: 'var(--stj-3)'
+ --stj-4: 'var(--stj-4)'
+ --stj-primary: 'var(--stj-primary)'
+ --stj-light: 'var(--stj-light)'
org-stp:
- green: '#879637'
- brown: '#584528'
- lvl1: '#ffa5aa'
- lvl2: '#e41740'
- lvl3: '#b71233'
- lvl4: '#80001f'
- primary: '#879637'
- light: '#C2CD79'
+ --stp-green: 'var(--stp-green)'
+ --stp-brown: 'var(--stp-brown)'
+ --stp-1: 'var(--stp-1)'
+ --stp-2: 'var(--stp-2)'
+ --stp-3: 'var(--stp-3)'
+ --stp-4: 'var(--stp-4)'
+ --stp-primary: 'var(--stp-primary)'
+ --stp-light: 'var(--stp-light)'
org-cgc:
- red: '#c4262e'
- lvl1: '#ffa5aa'
- lvl2: '#e41740'
- lvl3: '#b71233'
- lvl4: '#80001f'
- primary: '#c4262e'
- light: '#E8878C'
+ --cgc-red: 'var(--cgc-red)'
+ --cgc1: 'var(--cgc-1)'
+ --cgc2: 'var(--cgc-2)'
+ --cgc3: 'var(--cgc-3)'
+ --cgc-4: 'var(--cgc-4)'
+ --cgc-primary: 'var(--cgc-primary)'
+ --cgc-light: 'var(--cgc-light)'
+ Red:
+ --red-0: 'var(--red-0)'
+ --red-1: 'var(--red-1)'
+ --red-2: 'var(--red-2)'
+ --red-3: 'var(--red-3)'
+ --red-4: 'var(--red-4)'
+ --red-5: 'var(--red-5)'
+ --red-6: 'var(--red-6)'
+ --red-7: 'var(--red-7)'
+ --red-8: 'var(--red-8)'
+ --red-9: 'var(--red-9)'
+ Pink:
+ --pink-0: 'var(--pink-0)'
+ --pink-1: 'var(--pink-1)'
+ --pink-2: 'var(--pink-2)'
+ --pink-3: 'var(--pink-3)'
+ --pink-4: 'var(--pink-4)'
+ --pink-5: 'var(--pink-5)'
+ --pink-6: 'var(--pink-6)'
+ --pink-7: 'var(--pink-7)'
+ --pink-8: 'var(--pink-8)'
+ --pink-9: 'var(--pink-9)'
+ Grape:
+ --grape-0: 'var(--grape-0)'
+ --grape-1: 'var(--grape-1)'
+ --grape-2: 'var(--grape-2)'
+ --grape-3: 'var(--grape-3)'
+ --grape-4: 'var(--grape-4)'
+ --grape-5: 'var(--grape-5)'
+ --grape-6: 'var(--grape-6)'
+ --grape-7: 'var(--grape-7)'
+ --grape-8: 'var(--grape-8)'
+ --grape-9: 'var(--grape-9)'
+ Violet:
+ --violet-0: 'var(--violet-0)'
+ --violet-1: 'var(--violet-1)'
+ --violet-2: 'var(--violet-2)'
+ --violet-3: 'var(--violet-3)'
+ --violet-4: 'var(--violet-4)'
+ --violet-5: 'var(--violet-5)'
+ --violet-6: 'var(--violet-6)'
+ --violet-7: 'var(--violet-7)'
+ --violet-8: 'var(--violet-8)'
+ --violet-9: 'var(--violet-9)'
+ Indigo:
+ --indigo-0: 'var(--indigo-0)'
+ --indigo-1: 'var(--indigo-1)'
+ --indigo-2: 'var(--indigo-2)'
+ --indigo-3: 'var(--indigo-3)'
+ --indigo-4: 'var(--indigo-4)'
+ --indigo-5: 'var(--indigo-5)'
+ --indigo-6: 'var(--indigo-6)'
+ --indigo-7: 'var(--indigo-7)'
+ --indigo-8: 'var(--indigo-8)'
+ --indigo-9: 'var(--indigo-9)'
+ Blue:
+ --blue-0: 'var(--blue-0)'
+ --blue-1: 'var(--blue-1)'
+ --blue-2: 'var(--blue-2)'
+ --blue-3: 'var(--blue-3)'
+ --blue-4: 'var(--blue-4)'
+ --blue-5: 'var(--blue-5)'
+ --blue-6: 'var(--blue-6)'
+ --blue-7: 'var(--blue-7)'
+ --blue-8: 'var(--blue-8)'
+ --blue-9: 'var(--blue-9)'
+ Cyan:
+ --cyan-0: 'var(--cyan-0)'
+ --cyan-1: 'var(--cyan-1)'
+ --cyan-2: 'var(--cyan-2)'
+ --cyan-3: 'var(--cyan-3)'
+ --cyan-4: 'var(--cyan-4)'
+ --cyan-5: 'var(--cyan-5)'
+ --cyan-6: 'var(--cyan-6)'
+ --cyan-7: 'var(--cyan-7)'
+ --cyan-8: 'var(--cyan-8)'
+ --cyan-9: 'var(--cyan-9)'
+ Teal:
+ --teal-0: 'var(--teal-0)'
+ --teal-1: 'var(--teal-1)'
+ --teal-2: 'var(--teal-2)'
+ --teal-3: 'var(--teal-3)'
+ --teal-4: 'var(--teal-4)'
+ --teal-5: 'var(--teal-5)'
+ --teal-6: 'var(--teal-6)'
+ --teal-7: 'var(--teal-7)'
+ --teal-8: 'var(--teal-8)'
+ --teal-9: 'var(--teal-9)'
+ Green:
+ --green-0: 'var(--green-0)'
+ --green-1: 'var(--green-1)'
+ --green-2: 'var(--green-2)'
+ --green-3: 'var(--green-3)'
+ --green-4: 'var(--green-4)'
+ --green-5: 'var(--green-5)'
+ --green-6: 'var(--green-6)'
+ --green-7: 'var(--green-7)'
+ --green-8: 'var(--green-8)'
+ --green-9: 'var(--green-9)'
+ Lime:
+ --lime-0: 'var(--lime-0)'
+ --lime-1: 'var(--lime-1)'
+ --lime-2: 'var(--lime-2)'
+ --lime-3: 'var(--lime-3)'
+ --lime-4: 'var(--lime-4)'
+ --lime-5: 'var(--lime-5)'
+ --lime-6: 'var(--lime-6)'
+ --lime-7: 'var(--lime-7)'
+ --lime-8: 'var(--lime-8)'
+ --lime-9: 'var(--lime-9)'
+ Yellow:
+ --yellow-0: 'var(--yellow-0)'
+ --yellow-1: 'var(--yellow-1)'
+ --yellow-2: 'var(--yellow-2)'
+ --yellow-3: 'var(--yellow-3)'
+ --yellow-4: 'var(--yellow-4)'
+ --yellow-5: 'var(--yellow-5)'
+ --yellow-6: 'var(--yellow-6)'
+ --yellow-7: 'var(--yellow-7)'
+ --yellow-8: 'var(--yellow-8)'
+ --yellow-9: 'var(--yellow-9)'
+ Orange:
+ --orange-0: 'var(--orange-0)'
+ --orange-1: 'var(--orange-1)'
+ --orange-2: 'var(--orange-2)'
+ --orange-3: 'var(--orange-3)'
+ --orange-4: 'var(--orange-4)'
+ --orange-5: 'var(--orange-5)'
+ --orange-6: 'var(--orange-6)'
+ --orange-7: 'var(--orange-7)'
+ --orange-8: 'var(--orange-8)'
+ --orange-9: 'var(--orange-9)'
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 67d81481d9ea2660a6e8f4f29bf25db217ae4037..3f82a3ce64a2f5d1bc99b6a77b091f65976d4c7b 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -5,4 +5,4 @@
@use '01-core/props' as *;
@use '01-core/utilities' as *;
@use '01-core/elements' as *;
-//@use '03-layouts/grid/grid' as *;
+@use '03-layouts/grid/grid' as *;