fix(css): brand color clarity

Police-Data-Accessibility-Project · Jun 28, 2024 · cb19bba · cb19bba
1 parent 4f3ab0e
commit cb19bba
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -5,10 +5,6 @@ export const tailwindConfig = {
 		extend: {
 			colors: {
 				brand: {
-					blue: {
-						light: 'rgba(var(--color-brand-blue-light)/<alpha-value>)',
-						medium: 'rgba(var(--color-brand-blue-medium)/<alpha-value>)',
-					},
 					gold: {
 						DEFAULT: 'rgba(var(--color-brand-gold-600) / <alpha-value>)',
 						50: 'rgba(var(--color-brand-gold-50) / <alpha-value>)',
@@ -77,6 +73,10 @@ export const tailwindConfig = {
 					900: 'rgba(var(--color-wine-neutral-900)/<alpha-value>)',
 					950: 'rgba(var(--color-wine-neutral-950)/<alpha-value>)',
 				},
+				blue: {
+					light: 'rgba(var(--color-blue-light)/<alpha-value>)',
+					medium: 'rgba(var(--color-blue-medium)/<alpha-value>)',
+				},
 			},
 			brightness: {
 				85: '.85',

diff --git 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;