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

Dark mode button #1874

Merged
merged 11 commits into from
Feb 22, 2024
+75 −45
Merged

Dark mode button #1874

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6b016bb
update styling for destructive button
GraceGardner Feb 16, 2024
18e888e
add standard button styling
GraceGardner Feb 16, 2024
3cdf4ea
secondary button
GraceGardner Feb 20, 2024
3d3f9fd
ghost button
GraceGardner Feb 20, 2024
356dea8
merge main
GraceGardner Feb 20, 2024
ce43147
make updates based on comments
GraceGardner Feb 21, 2024
11d4db6
update border
GraceGardner Feb 22, 2024
732d651
fix the focus states and remove shadow from hover
GraceGardner Feb 22, 2024
5ae7ed0
update tests
GraceGardner Feb 22, 2024
45e92e8
destructive remove shadow add hover bg
GraceGardner Feb 22, 2024
6dee9bb
update snapshots
GraceGardner Feb 22, 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
9 changes: 4 additions & 5 deletions src/lib/holocene/button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
'rounded-lg',
'disabled:opacity-50',
'disabled:cursor-not-allowed',
'border-2',
'border-box',
'transition-colors',
'transition-shadow',
Expand All @@ -33,13 +32,13 @@
variants: {
variant: {
primary:
' bg-inverse bg-gradient-to-br text-white [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:from-blue-100 [&:not(:disabled):hover]:to-purple-100 [&:not(:disabled):hover]:text-primary [&:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:from-blue-100 focus-visible:to-purple-100 focus-visible:text-primary focus-visible:border-indigo-600',
'border-[1px] bg-interactive border-interactive text-inverse [&:not(:disabled):hover]:bg-interactiveHover [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-indigo-600/50 [&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:border-black focus-visible:shadow-focus focus-visible:shadow-indigo-600/50 ',
secondary:
' surface-primary text-primary [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:bg-inverse [&:not(:disabled):hover]:text-white [&:not(:disabled):hover]:border-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-inverse focus-visible:text-white focus-visible:border-white',
'border-2 border-secondary text-primary [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-indigo-600 [&:not(:disabled):hover]:surface-interactive-secondary [&:not(:disabled):hover]:border-[1px] [&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:border-black focus-visible:shadow-focus focus-visible:shadow-indigo-600/50 focus-visible:bg-inverse focus-visible:border-white',
destructive:
'border-red-700 bg-red-700 text-white [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-red-200/50 [&:not(:disabled):hover]:border-white focus-visible:border-white focus-visible:shadow-focus focus-visible:shadow-red-200/50',
'border-[1px] border-warning bg-warning [&:not(:disabled):hover]:shadow-focus dark:[&:not(:disabled):hover]:shadow-red-600/30 [&:not(:disabled):hover]:shadow-red-200/50 [&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:border-red-400/50 dark:[&:not(:disabled):hover]:bg-red-400 focus-visible:border-inverse focus-visible:shadow-focus focus-visible:shadow-red-200/50',
ghost:
'border-[transparent] bg-[transparent] text-slate-600 [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-blue-600/50 [&:not(:disabled):hover]:bg-indigo-100 [&:not(:disabled):hover]:border-indigo-600 focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:bg-indigo-100 focus-visible:border-indigo-600',
'border-[1px] border-[transparent] bg-[transparent] text-primary [&:not(:disabled):hover]:shadow-focus [&:not(:disabled):hover]:shadow-indigo-600/50 [&:not(:disabled):hover]:surface-interactive-secondary [&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:border-black focus-visible:shadow-focus focus-visible:shadow-indigo-600/50 focus-visible:bg-inverse ',
'table-header':
' bg-inverse text-white focus-visible:shadow-focus focus-visible:shadow-blue-600/50 focus-visible:border-white',
},
Expand Down
28 changes: 28 additions & 0 deletions src/lib/theme/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,34 @@ const palette: Readonly<Record<string, Record<Shade, HexColor>>> = {
950: '#461B02',
DEFAULT: '#F8A208',
},
rhino: {
50: '#f1f7fd',
100: '#e0edf9',
200: '#c7dff6',
300: '#a1cbef',
400: '#74afe6',
500: '#5392de',
600: '#3f77d1',
700: '#3564c0',
800: '#31519c',
900: '#2c467c',
950: '#273860',
DEFAULT: '#273860',
},
pigeonPost: {
50: '#f4f6fa',
100: '#e6ebf3',
200: '#d3dbea',
300: '#aebed9',
400: '#90a4ca',
500: '#7589bc',
600: '#6373ad',
700: '#57639e',
800: '#4b5382',
900: '#404668',
950: '#2a2d41',
DEFAULT: '#aebed9',
},
};

type Palette = typeof palette;
Expand Down
33 changes: 29 additions & 4 deletions src/lib/theme/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ const variables = {
'--color-inverse': rgb(colors.black),
'--color-subtle': rgb(getColor('slate', 950)),
'--color-brand': rgb(getColor('indigo', 800)),
'--color-interactive': rgb(getColor('indigo', 600)),
'--color-interactive-hover': rgb(getColor('indigo', 700)),
'--color-interactive-secondary': rgb(getColor('slate', 600)),

'--color-text-black': rgb(colors.black),
'--color-text-primary': rgb(colors.primary),
'--color-text-secondary': rgb(colors.secondary),
'--color-text-inverse': rgb(colors.offWhite),
Expand All @@ -22,27 +26,32 @@ const variables = {

'--color-surface-primary': rgb(colors.white),
'--color-surface-secondary': rgb(colors.offWhite),
'--color-surface-interactive-secondary': rgb(getColor('pigeonPost', 300)),
'--color-surface-inverse': rgb(colors.primary),
'--color-surface-subtle': rgb(getColor('slate', 100)),
'--color-surface-badge': rgb(getColor('slate', 100)),
'--color-surface-error': rgb(getColor('red', 50)),
'--color-surface-information': rgb(getColor('blue', 50)),
'--color-surface-success': rgb(getColor('green', 50)),
'--color-surface-warning': rgb(getColor('yellow', 50)),
'--color-surface-warning': rgb(getColor('red', 300)),

'--color-border-primary': rgb(colors.black),
'--color-border-secondary': rgb(getColor('pigeonPost', 300)),
'--color-border-subtle': rgb(getColor('slate', 300)),
'--color-border-error': rgb(getColor('red', 800)),
'--color-border-information': rgb(getColor('blue', 800)),
'--color-border-success': rgb(getColor('green', 800)),
'--color-border-warning': rgb(getColor('yellow', 800)),
'--color-border-warning': rgb(getColor('red', 300)),
'--color-border-interactive': rgb(getColor('indigo', 600)),
'--color-border-interactive-secondary': rgb(getColor('slate', 600)),
} satisfies Variables;

const dark: Partial<Variables<keyof typeof variables>> = {
'--color-primary': rgb(colors.offWhite),
'--color-secondary': rgb(colors.offBlack),
'--color-inverse': rgb(colors.primary),
'--color-brand': rgb(getColor('indigo', 500)),
'--color-interactive-secondary': rgb(getColor('rhino', 950)),

'--color-text-primary': rgb(colors.offWhite),
'--color-text-secondary': rgb(getColor('slate', 200)),
Expand All @@ -54,17 +63,20 @@ const dark: Partial<Variables<keyof typeof variables>> = {

'--color-surface-primary': rgb(colors.black),
'--color-surface-secondary': rgb(colors.offBlack),
'--color-surface-interactive-secondary': rgb(getColor('rhino', 950)),
'--color-surface-subtle': rgb(getColor('slate', 900)),
'--color-surface-badge': rgb(getColor('slate', 700)),
'--color-surface-information': rgb(getColor('blue', 950)),
'--color-surface-warning': rgb(getColor('yellow', 950)),
'--color-surface-warning': rgb(getColor('red', 300)),
'--color-surface-error': rgb(getColor('red', 950)),
'--color-surface-success': rgb(getColor('green', 950)),

'--color-border-primary': rgb(colors.offWhite),
'--color-border-secondary': rgb(getColor('slate', 600)),
'--color-border-subtle': rgb(getColor('slate', 950)),
'--color-border-interactive': rgb(getColor('slate', 600)),
'--color-border-information': rgb(getColor('blue', 700)),
'--color-border-warning': rgb(getColor('yellow', 700)),
'--color-border-warning': rgb(getColor('red', 300)),
'--color-border-error': rgb(getColor('red', 700)),
'--color-border-success': rgb(getColor('green', 700)),
} as const;
Expand All @@ -85,6 +97,10 @@ const temporal = plugin(
backgroundColor: css('--color-surface-secondary'),
color: css('--color-text-primary'),
},
'.surface-interactive-secondary': {
backgroundColor: css('--color-surface-interactive-secondary'),
color: css('--color-text-primary'),
},
'.surface-inverse': {
backgroundColor: css('--color-surface-inverse'),
color: css('--color-text-inverse'),
Expand All @@ -93,6 +109,10 @@ const temporal = plugin(
backgroundColor: css('--color-surface-subtle'),
color: css('--color-text-primary'),
},
'.surface-warning': {
backgroundColor: css('--color-surface-subtle'),
color: css('--color-text-black'),
},
});
},
{
Expand All @@ -108,6 +128,8 @@ const temporal = plugin(
inverse: css('--color-inverse'),
subtle: css('--color-subtle'),
badge: css('--color-surface-badge'),
interactive: css('--color-interactive'),
interactiveHover: css('--color-interactive-hover'),

error: css('--color-surface-error'),
information: css('--color-surface-information'),
Expand All @@ -119,7 +141,10 @@ const temporal = plugin(
borderColor: ({ theme }) => ({
...theme('colors'),
primary: css('--color-border-primary'),
secondary: css('--color-border-secondary'),
subtle: css('--color-border-subtle'),
interactive: css('--color-interactive'),
interactiveHover: css('--color-interactive-hover'),

error: css('--color-border-error'),
information: css('--color-border-information'),
Expand Down
Loading