From 7a94b560585cc1122d2330f73a6897b388705082 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Thu, 27 Jun 2024 14:44:52 -0400 Subject: [PATCH 1/4] fix(variables.css): add more brand colors --- src/styles/variables.css | 44 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/src/styles/variables.css b/src/styles/variables.css index 905c4dd..9d4d7fb 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -26,6 +26,50 @@ --color-brand-blue-medium: 0 130 243; --color-brand-gold: 213 162 60; --color-brand-wine: 81 42 79; + --color-brand-gold-50: 39, 30, 16; + --color-brand-gold-100: 74, 56, 22; + --color-brand-gold-200: 111, 83, 27; + --color-brand-gold-300: 149, 111, 32; + --color-brand-gold-400: 184, 138, 42; + --color-brand-gold-500: 213, 162, 60; + --color-brand-gold-600: 233, 182, 86; + --color-brand-gold-700: 245, 199, 117; + --color-brand-gold-800: 251, 213, 151; + --color-brand-gold-900: 253, 227, 186; + --color-brand-gold-950: 253, 240, 221; + --color-brand-wine-50: 19, 9, 18; + --color-brand-wine-100: 29, 15, 28; + --color-brand-wine-200: 39, 17, 38; + --color-brand-wine-300: 50, 21, 49; + --color-brand-wine-400: 64, 28, 62; + --color-brand-wine-500: 81, 42, 79; + --color-brand-wine-600: 103, 64, 100; + --color-brand-wine-700: 129, 95, 126; + --color-brand-wine-800: 159, 131, 156; + --color-brand-wine-900: 191, 172, 189; + --color-brand-wine-950: 223, 214, 222; + --color-brand-gold-gray-50: 30, 29, 26; + --color-brand-gold-gray-100: 56, 52, 46; + --color-brand-gold-gray-200: 83, 77, 68; + --color-brand-gold-gray-300: 110, 102, 90; + --color-brand-gold-gray-400: 137, 127, 112; + --color-brand-gold-gray-500: 161, 150, 134; + --color-brand-gold-gray-600: 181, 171, 155; + --color-brand-gold-gray-700: 198, 189, 175; + --color-brand-gold-gray-800: 213, 205, 195; + --color-brand-gold-gray-900: 226, 221, 214; + --color-brand-gold-gray-950: 240, 238, 234; + --color-brand-wine-gray-50: 20, 17, 19; + --color-brand-wine-gray-100: 31, 26, 31; + --color-brand-wine-gray-200: 43, 35, 43; + --color-brand-wine-gray-300: 56, 46, 56; + --color-brand-wine-gray-400: 72, 59, 71; + --color-brand-wine-gray-500: 90, 76, 89; + --color-brand-wine-gray-600: 112, 98, 111; + --color-brand-wine-gray-700: 137, 125, 136; + --color-brand-wine-gray-800: 165, 155, 164; + --color-brand-wine-gray-900: 194, 188, 194; + --color-brand-wine-gray-950: 225, 222, 225; } /* Dark mode */ From 81238729bb6cd2816b8dadeee0741383a3ca2b85 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Fri, 28 Jun 2024 11:29:26 -0400 Subject: [PATCH 2/4] fix(css): add scales and neutrals also referenced in tailwind config --- src/config/index.ts | 56 +++++++++++++++++- src/styles/variables.css | 124 +++++++++++++++++++++++++-------------- 2 files changed, 133 insertions(+), 47 deletions(-) diff --git a/src/config/index.ts b/src/config/index.ts index 28b4565..7432939 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -9,8 +9,34 @@ export const tailwindConfig = { light: 'rgba(var(--color-brand-blue-light)/)', medium: 'rgba(var(--color-brand-blue-medium)/)', }, - gold: 'rgba(var(--color-brand-gold)/)', - wine: 'rgba(var(--color-brand-wine)/)', + gold: { + DEFAULT: 'rgba(var(--color-brand-gold-500) / )', + 50: 'rgba(var(--color-brand-gold-50) / )', + 100: 'rgba(var(--color-brand-gold-100) / )', + 200: 'rgba(var(--color-brand-gold-200) / )', + 300: 'rgba(var(--color-brand-gold-300) / )', + 400: 'rgba(var(--color-brand-gold-400) / )', + 500: 'rgba(var(--color-brand-gold-500) / )', + 600: 'rgba(var(--color-brand-gold-600) / )', + 700: 'rgba(var(--color-brand-gold-700) / )', + 800: 'rgba(var(--color-brand-gold-800) / )', + 900: 'rgba(var(--color-brand-gold-900) / )', + 950: 'rgba(var(--color-brand-gold-950) / )', + }, + wine: { + DEFAULT: 'rgba(var(--color-brand-wine-500) / )', + 50: 'rgba(var(--color-brand-wine-50) / )', + 100: 'rgba(var(--color-brand-wine-100) / )', + 200: 'rgba(var(--color-brand-wine-200) / )', + 300: 'rgba(var(--color-brand-wine-300) / )', + 400: 'rgba(var(--color-brand-wine-400) / )', + 500: 'rgba(var(--color-brand-wine-500) / )', + 600: 'rgba(var(--color-brand-wine-600) / )', + 700: 'rgba(var(--color-brand-wine-700) / )', + 800: 'rgba(var(--color-brand-wine-800) / )', + 900: 'rgba(var(--color-brand-wine-900) / )', + 950: 'rgba(var(--color-brand-wine-950) / )', + }, }, neutral: { 50: 'rgba(var(--color-neutral-50)/)', @@ -25,6 +51,32 @@ export const tailwindConfig = { 900: 'rgba(var(--color-neutral-900)/)', 950: 'rgba(var(--color-neutral-950)/)', }, + goldneutral: { + 50: 'rgba(var(--color-gold-neutral-50)/)', + 100: 'rgba(var(--color-gold-neutral-100)/)', + 200: 'rgba(var(--color-gold-neutral-200)/)', + 300: 'rgba(var(--color-gold-neutral-300)/)', + 400: 'rgba(var(--color-gold-neutral-400)/)', + 500: 'rgba(var(--color-gold-neutral-500)/)', + 600: 'rgba(var(--color-gold-neutral-600)/)', + 700: 'rgba(var(--color-gold-neutral-700)/)', + 800: 'rgba(var(--color-gold-neutral-800)/)', + 900: 'rgba(var(--color-gold-neutral-900)/)', + 950: 'rgba(var(--color-gold-neutral-950)/)', + }, + wineneutral: { + 50: 'rgba(var(--color-wine-neutral-50)/)', + 100: 'rgba(var(--color-wine-neutral-100)/)', + 200: 'rgba(var(--color-wine-neutral-200)/)', + 300: 'rgba(var(--color-wine-neutral-300)/)', + 400: 'rgba(var(--color-wine-neutral-400)/)', + 500: 'rgba(var(--color-wine-neutral-500)/)', + 600: 'rgba(var(--color-wine-neutral-600)/)', + 700: 'rgba(var(--color-wine-neutral-700)/)', + 800: 'rgba(var(--color-wine-neutral-800)/)', + 900: 'rgba(var(--color-wine-neutral-900)/)', + 950: 'rgba(var(--color-wine-neutral-950)/)', + }, }, brightness: { 85: '.85', diff --git a/src/styles/variables.css b/src/styles/variables.css index 9d4d7fb..9c6005f 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -24,52 +24,60 @@ /* Brand */ --color-brand-blue-light: 56 152 236; --color-brand-blue-medium: 0 130 243; - --color-brand-gold: 213 162 60; + --color-brand-gold: 213 162 60; --color-brand-wine: 81 42 79; - --color-brand-gold-50: 39, 30, 16; - --color-brand-gold-100: 74, 56, 22; - --color-brand-gold-200: 111, 83, 27; - --color-brand-gold-300: 149, 111, 32; - --color-brand-gold-400: 184, 138, 42; - --color-brand-gold-500: 213, 162, 60; - --color-brand-gold-600: 233, 182, 86; - --color-brand-gold-700: 245, 199, 117; - --color-brand-gold-800: 251, 213, 151; - --color-brand-gold-900: 253, 227, 186; - --color-brand-gold-950: 253, 240, 221; - --color-brand-wine-50: 19, 9, 18; - --color-brand-wine-100: 29, 15, 28; - --color-brand-wine-200: 39, 17, 38; - --color-brand-wine-300: 50, 21, 49; - --color-brand-wine-400: 64, 28, 62; - --color-brand-wine-500: 81, 42, 79; - --color-brand-wine-600: 103, 64, 100; - --color-brand-wine-700: 129, 95, 126; - --color-brand-wine-800: 159, 131, 156; - --color-brand-wine-900: 191, 172, 189; - --color-brand-wine-950: 223, 214, 222; - --color-brand-gold-gray-50: 30, 29, 26; - --color-brand-gold-gray-100: 56, 52, 46; - --color-brand-gold-gray-200: 83, 77, 68; - --color-brand-gold-gray-300: 110, 102, 90; - --color-brand-gold-gray-400: 137, 127, 112; - --color-brand-gold-gray-500: 161, 150, 134; - --color-brand-gold-gray-600: 181, 171, 155; - --color-brand-gold-gray-700: 198, 189, 175; - --color-brand-gold-gray-800: 213, 205, 195; - --color-brand-gold-gray-900: 226, 221, 214; - --color-brand-gold-gray-950: 240, 238, 234; - --color-brand-wine-gray-50: 20, 17, 19; - --color-brand-wine-gray-100: 31, 26, 31; - --color-brand-wine-gray-200: 43, 35, 43; - --color-brand-wine-gray-300: 56, 46, 56; - --color-brand-wine-gray-400: 72, 59, 71; - --color-brand-wine-gray-500: 90, 76, 89; - --color-brand-wine-gray-600: 112, 98, 111; - --color-brand-wine-gray-700: 137, 125, 136; - --color-brand-wine-gray-800: 165, 155, 164; - --color-brand-wine-gray-900: 194, 188, 194; - --color-brand-wine-gray-950: 225, 222, 225; + + /* Brand Gold */ + --color-brand-gold-50: 253 240 221; + --color-brand-gold-100: 253 227 186; + --color-brand-gold-200: 251 213 151; + --color-brand-gold-300: 245 199 117; + --color-brand-gold-400: 233 182 86; + --color-brand-gold-500: 213 162 60; + --color-brand-gold-600: 184 138 42; + --color-brand-gold-700: 149 111 32; + --color-brand-gold-800: 111 83 27; + --color-brand-gold-900: 74 56 22; + --color-brand-gold-950: 39 30 16; + + /* Brand Wine */ + --color-brand-wine-50: 223 214 222; + --color-brand-wine-100: 191 172 189; + --color-brand-wine-200: 159 131 156; + --color-brand-wine-300: 129 95 126; + --color-brand-wine-400: 103 64 100; + --color-brand-wine-500: 81 42 79; + --color-brand-wine-600: 64 28 62; + --color-brand-wine-700: 50 21 49; + --color-brand-wine-800: 39 17 38; + --color-brand-wine-900: 29 15 28; + --color-brand-wine-950: 19 9 18; + + /* Gold Neutral */ + --color-gold-neutral-50: 244 244 242; + --color-gold-neutral-100: 228 227 221; + --color-gold-neutral-200: 204 199 188; + --color-gold-neutral-300: 174 165 150; + --color-gold-neutral-400: 161 150 134; + --color-gold-neutral-500: 136 123 106; + --color-gold-neutral-600: 116 103 90; + --color-gold-neutral-700: 94 82 74; + --color-gold-neutral-800: 81 71 66; + --color-gold-neutral-900: 72 62 59; + --color-gold-neutral-950: 40 33 32; + + /* Wine Neutral */ + --color-wine-neutral-50: 247 247 248; + --color-wine-neutral-100: 242 240 243; + --color-wine-neutral-200: 232 226 232; + --color-wine-neutral-300: 212 204 213; + --color-wine-neutral-400: 187 171 187; + --color-wine-neutral-500: 163 144 164; + --color-wine-neutral-600: 140 118 140; + --color-wine-neutral-700: 117 97 116; + --color-wine-neutral-800: 98 82 96; + --color-wine-neutral-900: 90 76 89; + --color-wine-neutral-950: 48 39 48; } /* Dark mode */ @@ -89,6 +97,32 @@ --color-neutral-800: 255 251 250; --color-neutral-800: 255 253 253; --color-neutral-950: 255 255 255; + + /* Reverse gold neutral */ + --color-gold-neutral-50: 30 29 26; + --color-gold-neutral-100: 56 52 46; + --color-gold-neutral-200: 83 77 68; + --color-gold-neutral-300: 110 102 90; + --color-gold-neutral-400: 137 127 112; + --color-gold-neutral-500: 161 150 134; + --color-gold-neutral-600: 181 171 155; + --color-gold-neutral-700: 198 189 175; + --color-gold-neutral-800: 213 205 195; + --color-gold-neutral-900: 226 221 214; + --color-gold-neutral-950: 240 238 234; + + /* Reverse wine neutral */ + --color-wine-neutral-50: 48 39 48; + --color-wine-neutral-100: 90 76 89; + --color-wine-neutral-200: 98 82 96; + --color-wine-neutral-300: 117 97 116; + --color-wine-neutral-400: 140 118 140; + --color-wine-neutral-500: 163 144 164; + --color-wine-neutral-600: 187 171 187; + --color-wine-neutral-700: 212 204 213; + --color-wine-neutral-800: 232 226 232; + --color-wine-neutral-900: 242 240 243; + --color-wine-neutral-950: 247 247 248; } } } From 4f3ab0e004bc52a8b577a44cb4471a3236cc6d2b Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Fri, 28 Jun 2024 11:45:13 -0400 Subject: [PATCH 3/4] fix(tailwind-config): darker default brand gold accessibility --- src/config/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/config/index.ts b/src/config/index.ts index 7432939..746b304 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -10,7 +10,7 @@ export const tailwindConfig = { medium: 'rgba(var(--color-brand-blue-medium)/)', }, gold: { - DEFAULT: 'rgba(var(--color-brand-gold-500) / )', + DEFAULT: 'rgba(var(--color-brand-gold-600) / )', 50: 'rgba(var(--color-brand-gold-50) / )', 100: 'rgba(var(--color-brand-gold-100) / )', 200: 'rgba(var(--color-brand-gold-200) / )', From cb19bba5df4bf52edfbfddd9360b8f0e34934e79 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Fri, 28 Jun 2024 11:52:10 -0400 Subject: [PATCH 4/4] fix(css): brand color clarity --- src/components/Input/PdapInput.vue | 2 +- src/config/index.ts | 8 ++++---- src/styles/variables.css | 8 +++----- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/components/Input/PdapInput.vue b/src/components/Input/PdapInput.vue index 559bdac..cd7d52f 100644 --- a/src/components/Input/PdapInput.vue +++ b/src/components/Input/PdapInput.vue @@ -63,7 +63,7 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`); .pdap-input input:focus, .pdap-input input:focus-within, .pdap-input input:focus-visible { - @apply border-2 border-brand-blue-light border-solid outline-none; + @apply border-2 border-blue-light border-solid outline-none; } .pdap-input label { diff --git a/src/config/index.ts b/src/config/index.ts index 746b304..5a2571b 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -5,10 +5,6 @@ export const tailwindConfig = { extend: { colors: { brand: { - blue: { - light: 'rgba(var(--color-brand-blue-light)/)', - medium: 'rgba(var(--color-brand-blue-medium)/)', - }, gold: { DEFAULT: 'rgba(var(--color-brand-gold-600) / )', 50: 'rgba(var(--color-brand-gold-50) / )', @@ -77,6 +73,10 @@ export const tailwindConfig = { 900: 'rgba(var(--color-wine-neutral-900)/)', 950: 'rgba(var(--color-wine-neutral-950)/)', }, + blue: { + light: 'rgba(var(--color-blue-light)/)', + medium: 'rgba(var(--color-blue-medium)/)', + }, }, brightness: { 85: '.85', diff --git a/src/styles/variables.css b/src/styles/variables.css index 9c6005f..0dcd640 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -21,11 +21,9 @@ --color-neutral-900: 26 26 26; --color-neutral-950: 0 0 0; - /* Brand */ - --color-brand-blue-light: 56 152 236; - --color-brand-blue-medium: 0 130 243; - --color-brand-gold: 213 162 60; - --color-brand-wine: 81 42 79; + /* Blue */ + --color-blue-light: 56 152 236; + --color-blue-medium: 0 130 243; /* Brand Gold */ --color-brand-gold-50: 253 240 221;