Skip to content

Commit

Permalink
fix colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@vassbence
vassbence committed Jul 15, 2024
1 parent 0c18343 commit 2cdd47b
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 186 deletions.
220 changes: 104 additions & 116 deletions src/assets/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,124 +7,112 @@
}

:root {
/* Border radii */
--border-radii-0: 0px;
--border-radii-4: 4px;
--border-radii-8: 8px;
--border-radii-12: 12px;
--border-radii-16: 16px;
--border-radii-24: 24px;
--border-radii-full: 9999px;

/* Semantic colors */
--color-neutral-5: var(--color-black-5);
--color-neutral-10-background: var(--color-white-100);
--color-neutral-10-adjusted: var(--color-black-5);
--color-neutral-10: var(--color-black-10);
--color-neutral-20: var(--color-black-20);
--color-neutral-20-adjusted: var(--color-black-10);
--color-neutral-60: var(--color-black-60);
--color-neutral-80: var(--color-black-80);
--color-neutral-100: var(--color-black-100);
--color-neutral-inverted-5: var(--color-white-10);
--color-neutral-inverted-10: var(--color-white-20);
--color-neutral-inverted-20: var(--color-white-20);
--color-neutral-inverted-60: var(--color-white-40);
--color-neutral-inverted-80: var(--color-white-80);
--color-neutral-inverted-100: var(--color-white-100);
--color-highlight-5: var(--color-indigo-5);
--color-highlight-10: var(--color-indigo-10);
--color-highlight-20: var(--color-indigo-20);
--color-highlight-60: var(--color-indigo-60);
--color-highlight-80: var(--color-indigo-80);
--color-highlight-100: var(--color-indigo-100);
--color-alert-5: var(--color-amber-5);
--color-alert-10: var(--color-amber-10);
--color-alert-20: var(--color-amber-20);
--color-alert-60: var(--color-amber-60);
--color-alert-80: var(--color-amber-80);
--color-alert-100: var(--color-amber-100);
--color-destructive-5: var(--color-red-5);
--color-destructive-10: var(--color-red-10);
--color-destructive-20: var(--color-red-20);
--color-destructive-60: var(--color-red-60);
--color-destructive-80: var(--color-red-80);
--color-destructive-100: var(--color-red-100);

/* Underlying base color swatches */
--color-white-5: #f4f4f50d;
--color-white-10: #f4f4f51a;
--color-white-20: #f4f4f533;
--color-white-40: #f4f4f566;
--color-white-60: #f4f4f599;
--color-white-80: #f4f4f5cc;
--color-white-90: #f4f4f5e5;
--color-white-95: #f4f4f5f2;
--color-white-100: #f4f4f5;
--color-black-5: #09090b0d;
--color-black-10: #09090b1a;
--color-black-20: #09090b33;
--color-black-40: #09090b66;
--color-black-60: #09090b99;
--color-black-80: #09090bcc;
--color-black-90: #09090be5;
--color-black-95: #09090bf2;
--color-black-100: #09090b;
--color-red-5: #ef44440d;
--color-red-10: #ef44441a;
--color-red-20: #ef444433;
--color-red-40: #ef444466;
--color-red-60: #ef444499;
--color-red-80: #ef4444cc;
--color-red-90: #ef4444e5;
--color-red-95: #ef4444f2;
--color-red-100: #ef4444;
--color-green-5: #10b9810d;
--color-green-10: #10b9811a;
--color-green-20: #10b98133;
--color-green-40: #10b98166;
--color-green-60: #10b98199;
--color-green-80: #10b981cc;
--color-green-90: #10b981e5;
--color-green-95: #10b981f2;
--color-green-100: #10b981;
--color-indigo-5: #6366f10d;
--color-indigo-10: #6366f11a;
--color-indigo-20: #6366f133;
--color-indigo-40: #6366f166;
--color-indigo-60: #6366f199;
--color-indigo-80: #6366f1cc;
--color-indigo-90: #6366f1e5;
--color-indigo-95: #6366f1f2;
--color-indigo-100: #6366f1;
--color-amber-5: #f59e0b0d;
--color-amber-10: #f59e0b1a;
--color-amber-20: #f59e0b33;
--color-amber-40: #f59e0b66;
--color-amber-60: #f59e0b99;
--color-amber-80: #f59e0bcc;
--color-amber-90: #f59e0be5;
--color-amber-95: #f59e0bf2;
--color-amber-100: #f59e0b;
--neutral-100: #09090b;
--neutral-80: #09090bcc;
--neutral-60: #09090b99;
--neutral-20: #09090b33;
--neutral-20-adjusted: #09090b1a;
--neutral-10: #09090b1a;
--neutral-10-adjusted: #09090b0d;
--neutral-10-background: #f4f4f5;
--neutral-5: #09090b0d;
--neutral-inverted-100: #f4f4f5;
--neutral-inverted-80: #f4f4f5;
--neutral-inverted-60: #f4f4f566;
--neutral-inverted-20: #f4f4f533;
--neutral-inverted-10: #f4f4f533;
--neutral-inverted-5: #f4f4f51a;
--red-100: #ed3131;
--red-80: #ed3131cc;
--red-60: #ed313199;
--red-20: #ed313133;
--red-10: #ed31311a;
--red-5: #ed31310d;
--amber-100: #eb980a;
--amber-80: #eb980acc;
--amber-60: #eb980a99;
--amber-20: #eb980a33;
--amber-10: #eb980a1a;
--amber-5: #eb980a0d;
--indigo-100: #6366f1;
--indigo-80: #6366f1cc;
--indigo-60: #6366f199;
--indigo-20: #6366f133;
--indigo-10: #6366f11a;
--indigo-5: #6366f10d;
--green-100: #0fa976;
--green-80: #0fa976cc;
--green-60: #0fa97699;
--green-20: #0fa97633;
--green-10: #0fa9761a;
--green-5: #0fa9760d;
--white-100: #f4f4f5;
--white-80: #f4f4f5cc;
--white-60: #f4f4f599;
--white-20: #f4f4f533;
--white-10: #f4f4f51a;
--white-5: #f4f4f50d;
--black-100: #09090b;
--black-80: #09090bcc;
--black-60: #09090b99;
--black-20: #09090b33;
--black-10: #09090b1a;
--black-5: #09090b0d;
}

@media (prefers-color-scheme: dark) {
:root {
--color-neutral-5: var(--color-white-5);
--color-neutral-10-background: var(--color-white-10);
--color-neutral-10-adjusted: var(--color-white-10);
--color-neutral-10: var(--color-white-10);
--color-neutral-20: var(--color-white-20);
--color-neutral-20-adjusted: var(--color-white-20);
--color-neutral-60: var(--color-white-40);
--color-neutral-80: var(--color-white-80);
--color-neutral-100: var(--color-white-100);
--color-neutral-inverted-5: var(--color-black-5);
--color-neutral-inverted-10: var(--color-black-10);
--color-neutral-inverted-20: var(--color-black-20);
--color-neutral-inverted-60: var(--color-black-60);
--color-neutral-inverted-80: var(--color-black-80);
--color-neutral-inverted-100: var(--color-black-100);
--neutral-100: #f4f4f5;
--neutral-80: #f4f4f5cc;
--neutral-60: #f4f4f566;
--neutral-20: #f4f4f533;
--neutral-20-adjusted: #f4f4f533;
--neutral-10: #f4f4f51a;
--neutral-10-adjusted: #f4f4f51a;
--neutral-10-background: #f4f4f51a;
--neutral-5: #f4f4f50d;
--neutral-inverted-100: #09090b;
--neutral-inverted-80: #09090bcc;
--neutral-inverted-60: #09090b99;
--neutral-inverted-20: #09090b33;
--neutral-inverted-10: #09090b1a;
--neutral-inverted-5: #09090b0d;
--red-100: #ef4444;
--red-80: #ef4444cc;
--red-60: #ef444499;
--red-20: #ef444433;
--red-10: #ef44441a;
--red-5: #ef44440d;
--amber-100: #f59e0b;
--amber-80: #f59e0bcc;
--amber-60: #f59e0b99;
--amber-20: #f59e0b33;
--amber-10: #f59e0b1a;
--amber-5: #f59e0b0d;
--indigo-100: #7c7ef4;
--indigo-80: #7c7ef4cc;
--indigo-60: #7c7ef499;
--indigo-20: #7c7ef433;
--indigo-10: #7c7ef41a;
--indigo-5: #7c7ef40d;
--green-100: #10b981;
--green-80: #10b981cc;
--green-60: #10b98199;
--green-20: #10b98133;
--green-10: #10b9811a;
--green-5: #10b9810d;
--white-100: #f4f4f5;
--white-80: #f4f4f5cc;
--white-60: #f4f4f599;
--white-20: #f4f4f533;
--white-10: #f4f4f51a;
--white-5: #f4f4f50d;
--black-100: #09090b;
--black-80: #09090bcc;
--black-60: #09090b99;
--black-20: #09090b33;
--black-10: #09090b1a;
--black-5: #09090b0d;
}
}

Expand All @@ -141,8 +129,8 @@
}

html {
background: var(--color-neutral-inverted-100);
color: var(--color-neutral-100);
background: var(--neutral-inverted-100);
color: var(--neutral-100);
font-family: Inter;
}

Expand Down
123 changes: 53 additions & 70 deletions src/utils/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,57 @@
type Theme = 'light' | 'dark'

const theme: Theme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'

const rawColors = {
neutral100: { light: '#09090B', dark: '#F4F4F5' },
neutral80: { light: '#09090BCC', dark: '#F4F4F5CC' },
neutral60: { light: '#09090B99', dark: '#F4F4F566' },
neutral20: { light: '#09090B33', dark: '#F4F4F533' },
neutral20Adjusted: { light: '#09090B1A', dark: '#F4F4F533' },
neutral10: { light: '#09090B1A', dark: '#F4F4F51A' },
neutral10Adjusted: { light: '#09090B0D', dark: '#F4F4F51A' },
neutral10Background: { light: '#F4F4F5', dark: '#F4F4F51A' },
neutral5: { light: '#09090B0D', dark: '#F4F4F50D' },
neutralInverted100: { light: '#F4F4F5', dark: '#09090B' },
neutralInverted80: { light: '#F4F4F5', dark: '#09090BCC' },
neutralInverted60: { light: '#F4F4F566', dark: '#09090B99' },
neutralInverted20: { light: '#F4F4F533', dark: '#09090B33' },
neutralInverted10: { light: '#F4F4F533', dark: '#09090B1A' },
neutralInverted5: { light: '#F4F4F51A', dark: '#09090B0D' },
red100: { light: '#ED3131', dark: '#EF4444' },
red80: { light: '#ED3131CC', dark: '#EF4444CC' },
red60: { light: '#ED313199', dark: '#EF444499' },
red20: { light: '#ED313133', dark: '#EF444433' },
red10: { light: '#ED31311A', dark: '#EF44441A' },
red5: { light: '#ED31310D', dark: '#EF44440D' },
amber100: { light: '#EB980A', dark: '#F59E0B' },
amber80: { light: '#EB980ACC', dark: '#F59E0BCC' },
amber60: { light: '#EB980A99', dark: '#F59E0B99' },
amber20: { light: '#EB980A33', dark: '#F59E0B33' },
amber10: { light: '#EB980A1A', dark: '#F59E0B1A' },
amber5: { light: '#EB980A0D', dark: '#F59E0B0D' },
indigo100: { light: '6366F1#', dark: '#7C7EF4' },
indigo80: { light: '#6366F1CC', dark: '#7C7EF4CC' },
indigo60: { light: '#6366F199', dark: '#7C7EF499' },
indigo20: { light: '#6366F133', dark: '#7C7EF433' },
indigo10: { light: '#6366F11A', dark: '#7C7EF41A' },
indigo5: { light: '#6366F10D', dark: '#7C7EF40D' },
green100: { light: '#0FA976', dark: '#10B981' },
green80: { light: '#0FA976CC', dark: '#10B981CC' },
green60: { light: '#0FA97699', dark: '#10B98199' },
green20: { light: '#0FA97633', dark: '#10B98133' },
green10: { light: '#0FA9761A', dark: '#10B9811A' },
green5: { light: '#0FA9760D', dark: '#10B9810D' },
white100: { light: '#F4F4F5', dark: '#F4F4F5' },
white80: { light: '#F4F4F5CC', dark: '#F4F4F5CC' },
white60: { light: '#F4F4F599', dark: '#F4F4F599' },
white20: { light: '#F4F4F533', dark: '#F4F4F533' },
white10: { light: '#F4F4F51A', dark: '#F4F4F51A' },
white5: { light: '#F4F4F50D', dark: '#F4F4F50D' },
black100: { light: '#09090B', dark: '#09090B' },
black80: { light: '#09090BCC', dark: '#09090BCC' },
black60: { light: '#09090B99', dark: '#09090B99' },
black20: { light: '#09090B33', dark: '#09090B33' },
black10: { light: '#09090B1A', dark: '#09090B1A' },
black5: { light: '#09090B0D', dark: '#09090B0D' },
const colors = {
neutral100: 'var(--neutral-100)',
neutral80: 'var(--neutral-80)',
neutral60: 'var(--neutral-60)',
neutral20: 'var(--neutral-20)',
neutral20Adjusted: 'var(--neutral-20-adjusted)',
neutral10: 'var(--neutral-10)',
neutral10Adjusted: 'var(--neutral-10-adjusted)',
neutral10Background: 'var(--neutral-10-background)',
neutral5: 'var(--neutral-5)',
neutralInverted100: 'var(--neutral-inverted-100)',
neutralInverted80: 'var(--neutral-inverted-80)',
neutralInverted60: 'var(--neutral-inverted-60)',
neutralInverted20: 'var(--neutral-inverted-20)',
neutralInverted10: 'var(--neutral-inverted-10)',
neutralInverted5: 'var(--neutral-inverted-5)',
red100: 'var(--red-100)',
red80: 'var(--red-80)',
red60: 'var(--red-60)',
red20: 'var(--red-20)',
red10: 'var(--red-10)',
red5: 'var(--red-5)',
amber100: 'var(--amber-100)',
amber80: 'var(--amber-80)',
amber60: 'var(--amber-60)',
amber20: 'var(--amber-20)',
amber10: 'var(--amber-10)',
amber5: 'var(--amber-5)',
indigo100: 'var(--indigo-100)',
indigo80: 'var(--indigo-80)',
indigo60: 'var(--indigo-60)',
indigo20: 'var(--indigo-20)',
indigo10: 'var(--indigo-10)',
indigo5: 'var(--indigo-5)',
green100: 'var(--green-100)',
green80: 'var(--green-80)',
green60: 'var(--green-60)',
green20: 'var(--green-20)',
green10: 'var(--green-10)',
green5: 'var(--green-5)',
white100: 'var(--white-100)',
white80: 'var(--white-80)',
white60: 'var(--white-60)',
white20: 'var(--white-20)',
white10: 'var(--white-10)',
white5: 'var(--white-5)',
black100: 'var(--black-100)',
black80: 'var(--black-80)',
black60: 'var(--black-60)',
black20: 'var(--black-20)',
black10: 'var(--black-10)',
black5: 'var(--black-5)',
}

type Color = keyof typeof rawColors

const colors = new Proxy(rawColors, {
get: (target, prop) => {
if (!(prop in target)) {
throw new Error('invalid color')
}

return target[prop as keyof typeof target][theme]
},
set: () => false,
}) as unknown as Record<keyof typeof rawColors, string>
type Color = keyof typeof colors

export { colors, Color }

0 comments on commit 2cdd47b

Please sign in to comment.