Skip to content

Commit 3143056

Browse files
lidord-wixlidord-wix
authored
Infra/ Move all colors and DesignTokens to public (#1848)
* Move all colors and tokens to public * update Colors.enableDarkMode * rename supportDarkMode
1 parent c607958 commit 3143056

File tree

9 files changed

+175
-6
lines changed

9 files changed

+175
-6
lines changed

‎generatedTypes/src/incubator/TextField/usePreset.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -353,6 +353,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
353353
purple60?: boolean | undefined;
354354
purple70?: boolean | undefined;
355355
purple80?: boolean | undefined;
356+
violet1?: boolean | undefined;
357+
violet5?: boolean | undefined;
356358
violet10?: boolean | undefined;
357359
violet20?: boolean | undefined;
358360
violet30?: boolean | undefined;
@@ -361,7 +363,9 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
361363
violet60?: boolean | undefined;
362364
violet70?: boolean | undefined;
363365
violet80?: boolean | undefined;
366+
dmBlack?: boolean | undefined;
364367
$backgroundDefault?: boolean | undefined;
368+
$backgroundElevated?: boolean | undefined;
365369
$backgroundNeutralHeavy?: boolean | undefined;
366370
$backgroundNeutralIdle?: boolean | undefined;
367371
$backgroundNeutralMedium?: boolean | undefined;
@@ -759,6 +763,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
759763
purple60?: boolean | undefined;
760764
purple70?: boolean | undefined;
761765
purple80?: boolean | undefined;
766+
violet1?: boolean | undefined;
767+
violet5?: boolean | undefined;
762768
violet10?: boolean | undefined;
763769
violet20?: boolean | undefined;
764770
violet30?: boolean | undefined;
@@ -767,7 +773,9 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
767773
violet60?: boolean | undefined;
768774
violet70?: boolean | undefined;
769775
violet80?: boolean | undefined;
776+
dmBlack?: boolean | undefined;
770777
$backgroundDefault?: boolean | undefined;
778+
$backgroundElevated?: boolean | undefined;
771779
$backgroundNeutralHeavy?: boolean | undefined;
772780
$backgroundNeutralIdle?: boolean | undefined;
773781
$backgroundNeutralMedium?: boolean | undefined;

‎generatedTypes/src/style/colors.d.ts

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ export declare class Colors {
2828
* scheme - color scheme e.g light/dark/default
2929
*/
3030
setScheme(scheme: SchemeType): void;
31+
/**
32+
* Support listening to Appearance changes
33+
* and change the design tokens accordingly
34+
*/
35+
supportDarkMode(): void;
3136
/**
3237
* Add alpha to hex or rgb color
3338
* arguments:
@@ -105,13 +110,14 @@ declare const colorObject: Colors & {
105110
orange10: string;
106111
orange20: string;
107112
orange30: string;
108-
orange40: string; /**
113+
orange40: string;
114+
orange50: string;
115+
orange60: string;
116+
/**
109117
* Set color scheme for app
110118
* arguments:
111119
* scheme - color scheme e.g light/dark/default
112120
*/
113-
orange50: string;
114-
orange60: string;
115121
orange70: string;
116122
orange80: string;
117123
red1: string;
@@ -134,6 +140,8 @@ declare const colorObject: Colors & {
134140
purple60: string;
135141
purple70: string;
136142
purple80: string;
143+
violet1: string;
144+
violet5: string;
137145
violet10: string;
138146
violet20: string;
139147
violet30: string;
@@ -144,11 +152,13 @@ declare const colorObject: Colors & {
144152
violet80: string;
145153
white: string;
146154
black: string;
155+
dmBlack: string;
147156
transparent: string;
148157
} & {
149158
primary: string;
150159
} & {
151160
$backgroundDefault: string;
161+
$backgroundElevated: string;
152162
$backgroundNeutralHeavy: string;
153163
$backgroundNeutralIdle: string;
154164
$backgroundNeutralMedium: string;
@@ -163,7 +173,11 @@ declare const colorObject: Colors & {
163173
$backgroundSuccessHeavy: string;
164174
$backgroundSuccess: string;
165175
$backgroundWarningHeavy: string;
166-
$backgroundWarning: string;
176+
$backgroundWarning: string; /**
177+
* Load set of schemes for light/dark mode
178+
* arguments:
179+
* schemes - two sets of map of colors e.g {light: {screen: 'white'}, dark: {screen: 'black'}}
180+
*/
167181
$backgroundMajor: string;
168182
$backgroundDangerHeavy: string;
169183
$backgroundDanger: string;

‎generatedTypes/src/style/colorsPalette.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ declare const colorsPalette: {
7777
purple60: string;
7878
purple70: string;
7979
purple80: string;
80+
violet1: string;
81+
violet5: string;
8082
violet10: string;
8183
violet20: string;
8284
violet30: string;
@@ -87,6 +89,7 @@ declare const colorsPalette: {
8789
violet80: string;
8890
white: string;
8991
black: string;
92+
dmBlack: string;
9093
transparent: string;
9194
};
9295
declare const extraFixColorsMap: {

‎generatedTypes/src/style/designTokens.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export declare const designTokens: {
22
$backgroundDefault: string;
3+
$backgroundElevated: string;
34
$backgroundNeutralHeavy: string;
45
$backgroundNeutralIdle: string;
56
$backgroundNeutralMedium: string;

‎generatedTypes/src/style/designTokensDM.d.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export declare const designTokensDM: {
2+
$backgroundDefault: string;
3+
$backgroundElevated: string;
4+
$backgroundNeutralHeavy: string;
5+
$backgroundNeutralIdle: string;
6+
$backgroundNeutralMedium: string;
7+
$backgroundNeutral: string;
8+
$backgroundNeutralLight: string;
9+
$backgroundPrimaryHeavy: string;
10+
$backgroundPrimaryLight: string;
11+
$backgroundPrimary: string;
12+
$backgroundGeneralHeavy: string;
13+
$backgroundGeneralLight: string;
14+
$backgroundGeneral: string;
15+
$backgroundSuccessHeavy: string;
16+
$backgroundSuccess: string;
17+
$backgroundWarningHeavy: string;
18+
$backgroundWarning: string;
19+
$backgroundMajor: string;
20+
$backgroundDangerHeavy: string;
21+
$backgroundDanger: string;
22+
$backgroundDisabled: string;
23+
$backgroundDark: string;
24+
$textDisabled: string;
25+
$textDefault: string;
26+
$textNeutralHeavy: string;
27+
$textNeutral: string;
28+
$textNeutralLight: string;
29+
$textDefaultLight: string;
30+
$textPrimary: string;
31+
$textGeneral: string;
32+
$textSuccess: string;
33+
$textMajor: string;
34+
$textDanger: string;
35+
$textDangerLight: string;
36+
$iconDefault: string;
37+
$iconNeutral: string;
38+
$iconDefaultLight: string;
39+
$iconPrimary: string;
40+
$iconPrimaryLight: string;
41+
$iconGeneral: string;
42+
$iconGeneralLight: string;
43+
$iconSuccess: string;
44+
$iconSuccessLight: string;
45+
$iconMajor: string;
46+
$iconDanger: string;
47+
$iconDangerLight: string;
48+
$iconDisabled: string;
49+
$outlineLight: string;
50+
$outlineNeutral: string;
51+
$outlineNeutralMedium: string;
52+
$outlineDisabled: string;
53+
$outlineDisabledHeavy: string;
54+
$outlinePrimary: string;
55+
$outlineGeneral: string;
56+
$outlineWarning: string;
57+
$outlineDanger: string;
58+
$dividerDefault: string;
59+
};

‎src/style/colors.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Color from 'color';
44
import tinycolor from 'tinycolor2';
55
import {colorsPalette, themeColors} from './colorsPalette';
66
import {designTokens} from './designTokens';
7+
import {designTokensDM} from './designTokensDM';
78
//@ts-ignore
89
import ColorName from './colorName';
910
import Scheme, {Schemes, SchemeType} from './scheme';
@@ -55,6 +56,15 @@ export class Colors {
5556
Scheme.setScheme(scheme);
5657
}
5758

59+
/**
60+
* Support listening to Appearance changes
61+
* and change the design tokens accordingly
62+
*/
63+
supportDarkMode() {
64+
const designTokensColors = Scheme.getSchemeType() === 'dark' ? designTokensDM : designTokens;
65+
Object.assign(this, designTokensColors);
66+
}
67+
5868
/**
5969
* Add alpha to hex or rgb color
6070
* arguments:

‎src/style/colorsPalette.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const colorsPalette = {
1818
blue30: '#116DFF',
1919
blue40: '#3582FF',
2020
blue50: '#60A1FF',
21-
blue60: '#8BC1FF',
22-
blue70: '#B8D9FF',
21+
blue60: '#97C7FF',
22+
blue70: '#C4DFFF',
2323
blue80: '#E9F3FF',
2424
// CYANS
2525
cyan10: '#00AAAF',
@@ -86,6 +86,8 @@ const colorsPalette = {
8686
purple70: '#f1daf7',
8787
purple80: '#faebfd',
8888
// VIOLETS
89+
violet1: '#170E5C',
90+
violet5: '#231690',
8991
violet10: '#3220CD',
9092
violet20: '#4633E9',
9193
violet30: '#5A48F5',
@@ -97,6 +99,7 @@ const colorsPalette = {
9799
// WHITE,
98100
white: '#FFFFFF',
99101
black: '#000000',
102+
dmBlack: '#0A0E12',
100103
transparent: 'transparent'
101104
};
102105

‎src/style/designTokens.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {colorsPalette} from './colorsPalette';
33
export const designTokens = {
44
// BACKGROUND
55
$backgroundDefault: colorsPalette.white,
6+
$backgroundElevated: colorsPalette.white,
67
$backgroundNeutralHeavy: colorsPalette.grey20,
78
$backgroundNeutralIdle: colorsPalette.grey40,
89
$backgroundNeutralMedium: colorsPalette.grey60,

‎src/style/designTokensDM.ts

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {colorsPalette} from './colorsPalette';
2+
3+
export const designTokensDM = {
4+
// BACKGROUND
5+
$backgroundDefault: colorsPalette.dmBlack,
6+
$backgroundElevated: colorsPalette.grey10,
7+
$backgroundNeutralHeavy: colorsPalette.grey50,
8+
$backgroundNeutralIdle: colorsPalette.grey30,
9+
$backgroundNeutralMedium: colorsPalette.grey10,
10+
$backgroundNeutral: colorsPalette.grey5,
11+
$backgroundNeutralLight: colorsPalette.grey1,
12+
$backgroundPrimaryHeavy: colorsPalette.violet50,
13+
$backgroundPrimaryLight: colorsPalette.violet5,
14+
$backgroundPrimary: colorsPalette.violet1,
15+
$backgroundGeneralHeavy: colorsPalette.blue50,
16+
$backgroundGeneralLight: colorsPalette.blue5,
17+
$backgroundGeneral: colorsPalette.blue1,
18+
$backgroundSuccessHeavy: colorsPalette.green40,
19+
$backgroundSuccess: colorsPalette.green1,
20+
$backgroundWarningHeavy: colorsPalette.yellow40,
21+
$backgroundWarning: colorsPalette.yellow5,
22+
$backgroundMajor: colorsPalette.orange1,
23+
$backgroundDangerHeavy: colorsPalette.red40,
24+
$backgroundDanger: colorsPalette.red1,
25+
$backgroundDisabled: colorsPalette.grey20,
26+
$backgroundDark: colorsPalette.grey10,
27+
28+
// TEXT
29+
$textDisabled: colorsPalette.grey20,
30+
$textDefault: colorsPalette.grey60,
31+
$textNeutralHeavy: colorsPalette.grey50,
32+
$textNeutral: colorsPalette.grey40,
33+
$textNeutralLight: colorsPalette.grey30,
34+
$textDefaultLight: colorsPalette.black,
35+
$textPrimary: colorsPalette.violet50,
36+
$textGeneral: colorsPalette.blue50,
37+
$textSuccess: colorsPalette.green60,
38+
$textMajor: colorsPalette.orange60,
39+
$textDanger: colorsPalette.red60,
40+
$textDangerLight: colorsPalette.red40,
41+
42+
// ICON
43+
$iconDefault: colorsPalette.grey60,
44+
$iconNeutral: colorsPalette.grey50,
45+
$iconDefaultLight: colorsPalette.black,
46+
$iconPrimary: colorsPalette.violet50,
47+
$iconPrimaryLight: colorsPalette.violet30,
48+
$iconGeneral: colorsPalette.blue50,
49+
$iconGeneralLight: colorsPalette.blue30,
50+
$iconSuccess: colorsPalette.green60,
51+
$iconSuccessLight: colorsPalette.green30,
52+
$iconMajor: colorsPalette.orange60,
53+
$iconDanger: colorsPalette.red60,
54+
$iconDangerLight: colorsPalette.red30,
55+
$iconDisabled: colorsPalette.grey20,
56+
57+
// OUTLINE
58+
$outlineLight: colorsPalette.grey70,
59+
$outlineNeutral: colorsPalette.grey10,
60+
$outlineNeutralMedium: colorsPalette.grey20,
61+
$outlineDisabled: colorsPalette.grey20,
62+
$outlineDisabledHeavy: colorsPalette.grey40,
63+
$outlinePrimary: colorsPalette.violet50,
64+
$outlineGeneral: colorsPalette.blue50,
65+
$outlineWarning: colorsPalette.yellow40,
66+
$outlineDanger: colorsPalette.red40,
67+
68+
// DIVIDER
69+
$dividerDefault: colorsPalette.grey10
70+
};

0 commit comments

Comments
 (0)