Skip to content

Commit

Permalink
fix: accessible colors and set up more neutrals (#93)
Browse files Browse the repository at this point in the history
  • Loading branch information
@josh-chamberlain
josh-chamberlain authored Jul 1, 2024
1 parent aeaefc3 commit cd3fefe
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 11 deletions.
2 changes: 1 addition & 1 deletion src/components/Input/PdapInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
62 changes: 57 additions & 5 deletions src/config/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,34 @@ 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>)',
100: 'rgba(var(--color-brand-gold-100) / <alpha-value>)',
200: 'rgba(var(--color-brand-gold-200) / <alpha-value>)',
300: 'rgba(var(--color-brand-gold-300) / <alpha-value>)',
400: 'rgba(var(--color-brand-gold-400) / <alpha-value>)',
500: 'rgba(var(--color-brand-gold-500) / <alpha-value>)',
600: 'rgba(var(--color-brand-gold-600) / <alpha-value>)',
700: 'rgba(var(--color-brand-gold-700) / <alpha-value>)',
800: 'rgba(var(--color-brand-gold-800) / <alpha-value>)',
900: 'rgba(var(--color-brand-gold-900) / <alpha-value>)',
950: 'rgba(var(--color-brand-gold-950) / <alpha-value>)',
},
wine: {
DEFAULT: 'rgba(var(--color-brand-wine-500) / <alpha-value>)',
50: 'rgba(var(--color-brand-wine-50) / <alpha-value>)',
100: 'rgba(var(--color-brand-wine-100) / <alpha-value>)',
200: 'rgba(var(--color-brand-wine-200) / <alpha-value>)',
300: 'rgba(var(--color-brand-wine-300) / <alpha-value>)',
400: 'rgba(var(--color-brand-wine-400) / <alpha-value>)',
500: 'rgba(var(--color-brand-wine-500) / <alpha-value>)',
600: 'rgba(var(--color-brand-wine-600) / <alpha-value>)',
700: 'rgba(var(--color-brand-wine-700) / <alpha-value>)',
800: 'rgba(var(--color-brand-wine-800) / <alpha-value>)',
900: 'rgba(var(--color-brand-wine-900) / <alpha-value>)',
950: 'rgba(var(--color-brand-wine-950) / <alpha-value>)',
},
gold: 'rgba(var(--color-brand-gold)/<alpha-value>)',
wine: 'rgba(var(--color-brand-wine)/<alpha-value>)',
},
neutral: {
50: 'rgba(var(--color-neutral-50)/<alpha-value>)',
Expand All @@ -25,6 +47,36 @@ export const tailwindConfig = {
900: 'rgba(var(--color-neutral-900)/<alpha-value>)',
950: 'rgba(var(--color-neutral-950)/<alpha-value>)',
},
goldneutral: {
50: 'rgba(var(--color-gold-neutral-50)/<alpha-value>)',
100: 'rgba(var(--color-gold-neutral-100)/<alpha-value>)',
200: 'rgba(var(--color-gold-neutral-200)/<alpha-value>)',
300: 'rgba(var(--color-gold-neutral-300)/<alpha-value>)',
400: 'rgba(var(--color-gold-neutral-400)/<alpha-value>)',
500: 'rgba(var(--color-gold-neutral-500)/<alpha-value>)',
600: 'rgba(var(--color-gold-neutral-600)/<alpha-value>)',
700: 'rgba(var(--color-gold-neutral-700)/<alpha-value>)',
800: 'rgba(var(--color-gold-neutral-800)/<alpha-value>)',
900: 'rgba(var(--color-gold-neutral-900)/<alpha-value>)',
950: 'rgba(var(--color-gold-neutral-950)/<alpha-value>)',
},
wineneutral: {
50: 'rgba(var(--color-wine-neutral-50)/<alpha-value>)',
100: 'rgba(var(--color-wine-neutral-100)/<alpha-value>)',
200: 'rgba(var(--color-wine-neutral-200)/<alpha-value>)',
300: 'rgba(var(--color-wine-neutral-300)/<alpha-value>)',
400: 'rgba(var(--color-wine-neutral-400)/<alpha-value>)',
500: 'rgba(var(--color-wine-neutral-500)/<alpha-value>)',
600: 'rgba(var(--color-wine-neutral-600)/<alpha-value>)',
700: 'rgba(var(--color-wine-neutral-700)/<alpha-value>)',
800: 'rgba(var(--color-wine-neutral-800)/<alpha-value>)',
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',
Expand Down
86 changes: 81 additions & 5 deletions src/styles/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,61 @@
--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;
--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 */
Expand All @@ -45,6 +95,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;
}
}
}

0 comments on commit cd3fefe

Please sign in to comment.