Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: accessible colors and set up more neutrals #93

Merged
merged 5 commits into from
Jul 1, 2024
Merged

fix: accessible colors and set up more neutrals #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7a94b56
fix(variables.css): add more brand colors
josh-chamberlain Jun 27, 2024
8123872
fix(css): add scales and neutrals
josh-chamberlain Jun 28, 2024
4f3ab0e
fix(tailwind-config): darker default brand gold
josh-chamberlain Jun 28, 2024
cb19bba
fix(css): brand color clarity
josh-chamberlain Jun 28, 2024
5db616b
Merge branch 'beta' into fix/accessible-colors
josh-chamberlain Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Input/PdapInput.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
}
}
Loading