Skip to content

Commit 5f3d3a2

Browse files
dbanksdesigndbanksdesign
authored
fix: dark mode and disabled button (#2084)
1 parent ebafff4 commit 5f3d3a2

File tree

11 files changed

+51
-35
lines changed

11 files changed

+51
-35
lines changed

‎.changeset/stale-beds-perform.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@aws-amplify/ui": patch
3+
---
4+
5+
fix: dark mode and disabled button. No longer using pure black and making the disabled button look mor disabled.

‎packages/ui/src/theme/__tests__/defaultTheme.test.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ describe('@aws-amplify/ui', () => {
195195
--amplify-components-checkbox-button-position: relative;
196196
--amplify-components-checkbox-button-align-items: center;
197197
--amplify-components-checkbox-button-justify-content: center;
198-
--amplify-components-checkbox-button-color: var(--amplify-colors-white);
198+
--amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
199199
--amplify-components-checkbox-button-before-width: 100%;
200200
--amplify-components-checkbox-button-before-height: 100%;
201201
--amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
@@ -265,7 +265,7 @@ describe('@aws-amplify/ui', () => {
265265
--amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
266266
--amplify-components-divider-opacity: var(--amplify-opacities-60);
267267
--amplify-components-expander-display: block;
268-
--amplify-components-expander-background-color: var(--amplify-colors-white);
268+
--amplify-components-expander-background-color: var(--amplify-colors-background-primary);
269269
--amplify-components-expander-border-radius: var(--amplify-radii-medium);
270270
--amplify-components-expander-box-shadow: var(--amplify-shadows-large);
271271
--amplify-components-expander-width: 100%;
@@ -413,7 +413,7 @@ describe('@aws-amplify/ui', () => {
413413
--amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
414414
--amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-large);
415415
--amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
416-
--amplify-components-menu-background-color: var(--amplify-colors-white);
416+
--amplify-components-menu-background-color: var(--amplify-colors-background-primary);
417417
--amplify-components-menu-border-radius: var(--amplify-radii-medium);
418418
--amplify-components-menu-border-width: var(--amplify-border-widths-small);
419419
--amplify-components-menu-border-style: solid;
@@ -432,7 +432,7 @@ describe('@aws-amplify/ui', () => {
432432
--amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
433433
--amplify-components-pagination-current-align-items: center;
434434
--amplify-components-pagination-current-justify-content: center;
435-
--amplify-components-pagination-current-color: var(--amplify-colors-white);
435+
--amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
436436
--amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
437437
--amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
438438
--amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
@@ -472,8 +472,8 @@ describe('@aws-amplify/ui', () => {
472472
--amplify-components-radio-button-border-style: solid;
473473
--amplify-components-radio-button-border-radius: 50%;
474474
--amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
475-
--amplify-components-radio-button-color: var(--amplify-colors-white);
476-
--amplify-components-radio-button-background-color: var(--amplify-colors-white);
475+
--amplify-components-radio-button-color: var(--amplify-colors-background-primary);
476+
--amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
477477
--amplify-components-radio-button-transition-property: all;
478478
--amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
479479
--amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
@@ -684,14 +684,14 @@ describe('@aws-amplify/ui', () => {
684684
--amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
685685
--amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
686686
--amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
687-
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
687+
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
688688
--amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
689689
--amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
690-
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
690+
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
691691
--amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
692692
--amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
693693
--amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
694-
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
694+
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
695695
--amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
696696
--amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
697697
--amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
@@ -792,7 +792,7 @@ describe('@aws-amplify/ui', () => {
792792
--amplify-colors-font-primary: var(--amplify-colors-neutral-100);
793793
--amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
794794
--amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
795-
--amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
795+
--amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
796796
--amplify-colors-font-inverse: var(--amplify-colors-white);
797797
--amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
798798
--amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);

‎packages/ui/src/theme/__tests__/overrides.test.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ describe('@aws-amplify/ui', () => {
229229
--amplify-components-checkbox-button-position: relative;
230230
--amplify-components-checkbox-button-align-items: center;
231231
--amplify-components-checkbox-button-justify-content: center;
232-
--amplify-components-checkbox-button-color: var(--amplify-colors-white);
232+
--amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
233233
--amplify-components-checkbox-button-before-width: 100%;
234234
--amplify-components-checkbox-button-before-height: 100%;
235235
--amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
@@ -299,7 +299,7 @@ describe('@aws-amplify/ui', () => {
299299
--amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
300300
--amplify-components-divider-opacity: var(--amplify-opacities-60);
301301
--amplify-components-expander-display: block;
302-
--amplify-components-expander-background-color: var(--amplify-colors-white);
302+
--amplify-components-expander-background-color: var(--amplify-colors-background-primary);
303303
--amplify-components-expander-border-radius: var(--amplify-radii-medium);
304304
--amplify-components-expander-box-shadow: var(--amplify-shadows-large);
305305
--amplify-components-expander-width: 100%;
@@ -447,7 +447,7 @@ describe('@aws-amplify/ui', () => {
447447
--amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-large);
448448
--amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-large);
449449
--amplify-components-loader-text-fill: var(--amplify-colors-font-primary);
450-
--amplify-components-menu-background-color: var(--amplify-colors-white);
450+
--amplify-components-menu-background-color: var(--amplify-colors-background-primary);
451451
--amplify-components-menu-border-radius: var(--amplify-radii-medium);
452452
--amplify-components-menu-border-width: var(--amplify-border-widths-small);
453453
--amplify-components-menu-border-style: solid;
@@ -466,7 +466,7 @@ describe('@aws-amplify/ui', () => {
466466
--amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
467467
--amplify-components-pagination-current-align-items: center;
468468
--amplify-components-pagination-current-justify-content: center;
469-
--amplify-components-pagination-current-color: var(--amplify-colors-white);
469+
--amplify-components-pagination-current-color: var(--amplify-colors-font-inverse);
470470
--amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
471471
--amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
472472
--amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
@@ -506,8 +506,8 @@ describe('@aws-amplify/ui', () => {
506506
--amplify-components-radio-button-border-style: solid;
507507
--amplify-components-radio-button-border-radius: 50%;
508508
--amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
509-
--amplify-components-radio-button-color: var(--amplify-colors-white);
510-
--amplify-components-radio-button-background-color: var(--amplify-colors-white);
509+
--amplify-components-radio-button-color: var(--amplify-colors-background-primary);
510+
--amplify-components-radio-button-background-color: var(--amplify-colors-background-primary);
511511
--amplify-components-radio-button-transition-property: all;
512512
--amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
513513
--amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
@@ -718,14 +718,14 @@ describe('@aws-amplify/ui', () => {
718718
--amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
719719
--amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
720720
--amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
721-
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
721+
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary);
722722
--amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
723723
--amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
724-
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
724+
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary);
725725
--amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
726726
--amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
727727
--amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
728-
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
728+
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary);
729729
--amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
730730
--amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
731731
--amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
@@ -826,7 +826,7 @@ describe('@aws-amplify/ui', () => {
826826
--amplify-colors-font-primary: var(--amplify-colors-neutral-100);
827827
--amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
828828
--amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
829-
--amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
829+
--amplify-colors-font-disabled: var(--amplify-colors-neutral-60);
830830
--amplify-colors-font-inverse: var(--amplify-colors-white);
831831
--amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
832832
--amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);

‎packages/ui/src/theme/defaultDarkModeOverride.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,24 @@ export const defaultDarkModeOverride: ColorModeOverride = {
9090
90: { value: tokens.colors.neutral[20].value },
9191
100: { value: tokens.colors.neutral[10].value },
9292
},
93-
black: { value: '#fff' },
94-
white: { value: '#000' },
9593

96-
border: {
97-
primary: { value: '{colors.neutral.40.value}' },
94+
font: {
95+
primary: { value: '{colors.white.value}' },
96+
secondary: { value: '{colors.neutral.100.value}' },
97+
tertiary: { value: '{colors.neutral.90.value}' },
98+
inverse: { value: '{colors.neutral.10.value}' },
99+
},
100+
101+
background: {
102+
primary: { value: '{colors.neutral.10.value}' },
98103
secondary: { value: '{colors.neutral.20.value}' },
99-
tertiary: { value: '{colors.neutral.10.value}' },
104+
tertiary: { value: '{colors.neutral.40.value}' },
105+
},
106+
107+
border: {
108+
primary: { value: '{colors.neutral.60.value}' },
109+
secondary: { value: '{colors.neutral.40.value}' },
110+
tertiary: { value: '{colors.neutral.20.value}' },
100111
},
101112

102113
overlay: {

‎packages/ui/src/theme/tokens/colors.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ export const colors: Colors = {
213213
primary: { value: '{colors.neutral.100.value}' },
214214
secondary: { value: '{colors.neutral.90.value}' },
215215
tertiary: { value: '{colors.neutral.80.value}' },
216-
disabled: { value: '{colors.font.tertiary.value}' },
216+
disabled: { value: '{colors.neutral.60.value}' },
217217
inverse: { value: '{colors.white.value}' },
218218

219219
interactive: { value: '{colors.brand.primary.80.value}' },

‎packages/ui/src/theme/tokens/components/checkbox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const checkbox: CheckboxTokens = {
109109
position: { value: 'relative' },
110110
alignItems: { value: 'center' },
111111
justifyContent: { value: 'center' },
112-
color: { value: '{colors.white.value}' },
112+
color: { value: '{colors.font.inverse.value}' },
113113
before: {
114114
width: { value: '100%' },
115115
height: { value: '100%' },

‎packages/ui/src/theme/tokens/components/expander.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export interface ExpanderTokens {
9494

9595
export const expander: ExpanderTokens = {
9696
display: { value: 'block' },
97-
backgroundColor: { value: '{colors.white.value}' },
97+
backgroundColor: { value: '{colors.background.primary.value}' },
9898
borderRadius: { value: '{radii.medium.value}' },
9999
boxShadow: {
100100
value: '{shadows.large.value}',

‎packages/ui/src/theme/tokens/components/menu.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface MenuTokens {
3939
}
4040

4141
export const menu: MenuTokens = {
42-
backgroundColor: { value: '{colors.white.value}' },
42+
backgroundColor: { value: '{colors.background.primary.value}' },
4343
borderRadius: { value: '{radii.medium.value}' },
4444
borderWidth: { value: '{borderWidths.small.value}' },
4545
borderStyle: { value: 'solid' },

‎packages/ui/src/theme/tokens/components/pagination.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export const pagination: PaginationTokens = {
6767
current: {
6868
alignItems: { value: 'center' },
6969
justifyContent: { value: 'center' },
70-
color: { value: '{colors.white.value}' },
70+
color: { value: '{colors.font.inverse.value}' },
7171
fontSize: { value: '{fontSizes.small.value}' },
7272
backgroundColor: { value: '{colors.overlay.40.value}' },
7373
},

‎packages/ui/src/theme/tokens/components/radio.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ export const radio: RadioTokens = {
116116
borderStyle: { value: 'solid' },
117117
borderRadius: { value: '50%' },
118118
borderColor: { value: '{colors.border.primary.value}' },
119-
color: { value: '{colors.white.value}' },
120-
backgroundColor: { value: '{colors.white.value}' },
119+
color: { value: '{colors.background.primary.value}' },
120+
backgroundColor: { value: '{colors.background.primary.value}' },
121121
transitionProperty: { value: 'all' },
122122
transitionDuration: { value: '{time.medium.value}' },
123123
outlineColor: { value: '{colors.transparent.value}' },

0 commit comments

Comments
 (0)