Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit 2f6aa8a

Browse files
georgewrmarshallgeorgewrmarshall
committed
Updating comments from objects and moving to types interface
1 parent 0a298ce commit 2f6aa8a

File tree

3 files changed

+131
-118
lines changed

3 files changed

+131
-118
lines changed

‎src/js/themes/darkTheme/colors.ts‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,8 @@
11
import { ThemeColors } from '../types';
22

3-
/* eslint-disable jsdoc/check-property-names, jsdoc/tag-lines */
43
/**
5-
* MetaMask's Design System Colors
6-
*
7-
* NOTE - This documentation doesn't reflect the actual structure of the colors object. We are only documenting the common properties between light and dark themes.
8-
*
9-
* @property {string} background.default - For default neutral backgrounds
10-
* @property {string} background.alternative - For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)
11-
*
12-
* @property {string} text.default - For general text that takes main priority in the information hierarchy
13-
* @property {string} text.alternative - For a weaker contrast option for neutral text
14-
* @property {string} text.muted - For inactive or lowest priority text. (Example: placeholder)
15-
*
16-
* @property {string} icon.default - For default neutral icons
17-
* @property {string} icon.alternative - For a weaker contrast option for neutral icons
18-
* @property {string} icon.muted - For inactive or lowest priority icons
19-
*
20-
* @property {string} border.default - For default neutral borders with visible contrast. (Example: text inputs)
21-
* @property {string} border.muted - For a weaker contrast option for neutral borders.
22-
*
23-
* @property {string} overlay.default - For shading layers behind modality screens
24-
* @property {string} overlay.alternative - For a stronger shading layer option behind modality screens
25-
* @property {string} overlay.inverse - [Deprecated] Should be used for elements over an overlay
26-
*
27-
* @property {string} primary.default - For primary user action related elements
28-
* @property {string} primary.alternative - For the \"pressed\" state of interactive primary elements
29-
* @property {string} primary.muted - For lowest contrast background used in primary elements
30-
* @property {string} primary.disabled - [Deprecated] Should be used for disabled state
31-
* @property {string} primary.inverse - For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)
32-
*
33-
* @property {string} secondary.default - [Deprecated] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox
34-
* @property {string} secondary.alternative - [Deprecated] Should be used as an alternative to secondary.default for things such as hover states
35-
* @property {string} secondary.muted - [Deprecated] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination
36-
* @property {string} secondary.disabled - [Deprecated] Should be used for all disabled secondary action components
37-
* @property {string} secondary.inverse - [Deprecated] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button
38-
*
39-
* @property {string} error.default - For high-level alert danger/critical elements. Used for text, background, icon or border
40-
* @property {string} error.alternative - For the \"pressed\" state of interactive danger/critical elements
41-
* @property {string} error.muted - For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)
42-
* @property {string} error.disabled - [Deprecated] Should be used for disabled state
43-
* @property {string} error.inverse - For elements used on top of error/default (Example: label of danger/critical button)
44-
*
45-
* @property {string} warning.default - For low-mid level alert elements. Used for text, background, icon or border
46-
* @property {string} warning.alternative - [Deprecated] Should be used as an alternative to warning/default for things like hover or pressed states
47-
* @property {string} warning.muted - For lowest contrast background used in warning elements. (Example: notification background)
48-
* @property {string} warning.disabled - [Deprecated] Should be used for disabled state
49-
* @property {string} warning.inverse - For elements used on top of warning/default. Used for text, icon or border
50-
*
51-
* @property {string} success.default - For positive & good semantic elements. Used for text, background, icon or border
52-
* @property {string} success.alternative - [Deprecated] Should be used as an alternative to success/default for things like hover or pressed states
53-
* @property {string} success.muted - For lowest contrast background used in success semantic. (Example: notification background)
54-
* @property {string} success.disabled - [Deprecated] Should be used for disabled state
55-
* @property {string} success.inverse - For elements used on top of success/default. Used for text, icon or border
56-
*
57-
* @property {string} info.default - For informational semantic elements. Used for text, background, icon or border
58-
* @property {string} info.alternative - [Deprecated] Should be used as an alternative to info/default for things like hover or pressed states
59-
* @property {string} info.muted - For lowest contrast background used in informational semantic. (Example: notification background)
60-
* @property {string} info.disabled - [Deprecated] Should be used for disabled state
61-
* @property {string} info.inverse - SFor elements used on top of info/default. Used for text, icon or border
4+
* Dark theme colors
625
*/
63-
/* eslint-enable jsdoc/check-property-names, jsdoc/tag-lines */
646

657
export const colors: ThemeColors = {
668
background: {

‎src/js/themes/lightTheme/colors.ts‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,8 @@
11
import { ThemeColors } from '../types';
22

3-
/* eslint-disable jsdoc/check-property-names, jsdoc/tag-lines */
43
/**
5-
* MetaMask's Design System Colors
6-
*
7-
* NOTE - This documentation doesn't reflect the actual structure of the colors object. We are only documenting the common properties between light and dark themes.
8-
*
9-
* @property {string} background.default - For default neutral backgrounds
10-
* @property {string} background.alternative - For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)
11-
*
12-
* @property {string} text.default - For general text that takes main priority in the information hierarchy
13-
* @property {string} text.alternative - For a weaker contrast option for neutral text
14-
* @property {string} text.muted - For inactive or lowest priority text. (Example: placeholder)
15-
*
16-
* @property {string} icon.default - For default neutral icons
17-
* @property {string} icon.alternative - For a weaker contrast option for neutral icons
18-
* @property {string} icon.muted - For inactive or lowest priority icons
19-
*
20-
* @property {string} border.default - For default neutral borders with visible contrast. (Example: text inputs)
21-
* @property {string} border.muted - For a weaker contrast option for neutral borders.
22-
*
23-
* @property {string} overlay.default - For shading layers behind modality screens
24-
* @property {string} overlay.alternative - For a stronger shading layer option behind modality screens
25-
* @property {string} overlay.inverse - [Deprecated] Should be used for elements over an overlay
26-
*
27-
* @property {string} primary.default - For primary user action related elements
28-
* @property {string} primary.alternative - For the \"pressed\" state of interactive primary elements
29-
* @property {string} primary.muted - For lowest contrast background used in primary elements
30-
* @property {string} primary.disabled - [Deprecated] Should be used for disabled state
31-
* @property {string} primary.inverse - For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)
32-
*
33-
* @property {string} secondary.default - [Deprecated] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox
34-
* @property {string} secondary.alternative - [Deprecated] Should be used as an alternative to secondary.default for things such as hover states
35-
* @property {string} secondary.muted - [Deprecated] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination
36-
* @property {string} secondary.disabled - [Deprecated] Should be used for all disabled secondary action components
37-
* @property {string} secondary.inverse - [Deprecated] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button
38-
*
39-
* @property {string} error.default - For high-level alert danger/critical elements. Used for text, background, icon or border
40-
* @property {string} error.alternative - For the \"pressed\" state of interactive danger/critical elements
41-
* @property {string} error.muted - For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)
42-
* @property {string} error.disabled - [Deprecated] Should be used for disabled state
43-
* @property {string} error.inverse - For elements used on top of error/default (Example: label of danger/critical button)
44-
*
45-
* @property {string} warning.default - For low-mid level alert elements. Used for text, background, icon or border
46-
* @property {string} warning.alternative - [Deprecated] Should be used as an alternative to warning/default for things like hover or pressed states
47-
* @property {string} warning.muted - For lowest contrast background used in warning elements. (Example: notification background)
48-
* @property {string} warning.disabled - [Deprecated] Should be used for disabled state
49-
* @property {string} warning.inverse - For elements used on top of warning/default. Used for text, icon or border
50-
*
51-
* @property {string} success.default - For positive & good semantic elements. Used for text, background, icon or border
52-
* @property {string} success.alternative - [Deprecated] Should be used as an alternative to success/default for things like hover or pressed states
53-
* @property {string} success.muted - For lowest contrast background used in success semantic. (Example: notification background)
54-
* @property {string} success.disabled - [Deprecated] Should be used for disabled state
55-
* @property {string} success.inverse - For elements used on top of success/default. Used for text, icon or border
56-
*
57-
* @property {string} info.default - For informational semantic elements. Used for text, background, icon or border
58-
* @property {string} info.alternative - [Deprecated] Should be used as an alternative to info/default for things like hover or pressed states
59-
* @property {string} info.muted - For lowest contrast background used in informational semantic. (Example: notification background)
60-
* @property {string} info.disabled - [Deprecated] Should be used for disabled state
61-
* @property {string} info.inverse - SFor elements used on top of info/default. Used for text, icon or border
4+
* Light theme colors
625
*/
63-
/* eslint-enable jsdoc/check-property-names, jsdoc/tag-lines */
646

657
export const colors: ThemeColors = {
668
background: {

‎src/js/themes/types.ts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,68 +2,197 @@ import { ThemeTypography } from '../typography';
22

33
export interface ThemeColors {
44
background: {
5+
/**
6+
* {string} background.default - For default neutral backgrounds
7+
*/
58
default: string;
9+
/**
10+
* {string} background.alternative - For a subtle contrast option for neutral backgrounds. (Example: backdrop, header background)
11+
*/
612
alternative: string;
713
};
814
text: {
15+
/**
16+
* {string} text.default - For general text that takes main priority in the information hierarchy
17+
*/
918
default: string;
19+
/**
20+
* {string} text.alternative - For a weaker contrast option for neutral text
21+
*/
1022
alternative: string;
23+
/**
24+
* {string} text.muted - For inactive or lowest priority text. (Example: placeholder)
25+
*/
1126
muted: string;
1227
};
1328
icon: {
29+
/**
30+
* {string} icon.default - For default neutral icons
31+
*/
1432
default: string;
33+
/**
34+
* {string} icon.alternative - For a weaker contrast option for neutral icons
35+
*/
1536
alternative: string;
37+
/**
38+
* {string} icon.muted - For inactive or lowest priority icons
39+
*/
1640
muted: string;
1741
};
1842
border: {
43+
/**
44+
* {string} border.default - For default neutral borders with visible contrast. (Example: text inputs)
45+
*/
1946
default: string;
47+
/**
48+
* {string} border.muted - For a weaker contrast option for neutral borders.
49+
*/
2050
muted: string;
2151
};
2252
overlay: {
53+
/**
54+
* {string} overlay.default - For shading layers behind modality screens
55+
*/
2356
default: string;
57+
/**
58+
* {string} overlay.alternative - For a stronger shading layer option behind modality screens
59+
*/
2460
inverse: string;
61+
/**
62+
* {string} overlay.inverse - [Deprecated] Should be used for elements over an overlay
63+
*/
2564
alternative: string;
2665
};
2766
primary: {
67+
/**
68+
* {string} primary.default - For primary user action related elements
69+
*/
2870
default: string;
71+
/**
72+
* {string} primary.alternative - For the \"pressed\" state of interactive primary elements
73+
*/
2974
alternative: string;
75+
/**
76+
* {string} primary.muted - For lowest contrast background used in primary elements
77+
*/
3078
muted: string;
79+
/**
80+
* {string} primary.inverse - For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)disabled state
81+
*/
3182
inverse: string;
83+
/**
84+
* {string} primary.disabled - [Deprecated] Should be used for
85+
*/
3286
disabled: string;
3387
};
3488
secondary: {
89+
/**
90+
* {string} secondary.default - [Deprecated] Should be used for any secondary actions. It should not be used for any negative connotations such as warnings or errors as it is quite closely tied to the MetaMask Fox
91+
*/
3592
default: string;
93+
/**
94+
* {string} secondary.alternative - [Deprecated] Should be used as an alternative to secondary.default for things such as hover states
95+
*/
3696
alternative: string;
97+
/**
98+
* {string} secondary.muted - [Deprecated] It’s a very low contrasting secondary variant for things such as alert backgrounds. secondary.muted and secondary.inverse should not be used together in a foreground and background combination
99+
*/
37100
muted: string;
101+
/**
102+
* {string} secondary.inverse - [Deprecated] Should be used only as the foreground element on top of primary/default and primary/alternative. It is intended to be the most contrasting color to primary/default. It should meet all AA and AAA accessibility standards such as the text or icon of a primary button
103+
*/
38104
inverse: string;
105+
/**
106+
* {string} secondary.disabled - [Deprecated] Should be used for all disabled secondary action components
107+
*/
39108
disabled: string;
40109
};
41110
error: {
111+
/**
112+
* {string} error.default - For high-level alert danger/critical elements. Used for text, background, icon or border
113+
*/
42114
default: string;
115+
/**
116+
* {string} error.alternative - For the \"pressed\" state of interactive danger/critical elements
117+
*/
43118
alternative: string;
119+
/**
120+
* {string} error.muted - For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)
121+
*/
44122
muted: string;
123+
/**
124+
* {string} error.inverse - For elements used on top of error/default (Example: label of danger/critical button)
125+
*/
45126
inverse: string;
127+
/**
128+
* {string} error.disabled - [Deprecated] Should be used for disabled state
129+
*/
46130
disabled: string;
47131
};
48132
warning: {
133+
/**
134+
* {string} warning.muted - For lowest contrast background used in warning elements. (Example: notification background)
135+
*/
49136
default: string;
137+
/**
138+
* {string} warning.alternative - [Deprecated] Should be used as an alternative to warning/default for things like hover or pressed states
139+
*/
50140
alternative: string;
141+
/**
142+
* {string} warning.muted - For lowest contrast background used in warning elements. (Example: notification background)
143+
*/
51144
muted: string;
145+
/**
146+
* {string} warning.inverse - For elements used on top of warning/default. Used for text, icon or border
147+
*/
52148
inverse: string;
149+
/**
150+
* {string} warning.disabled - [Deprecated] Should be used for disabled state
151+
*/
53152
disabled: string;
54153
};
55154
success: {
155+
/**
156+
* {string} success.default - For positive & good semantic elements. Used for text, background, icon or border
157+
*/
56158
default: string;
159+
/**
160+
* {string} success.alternative - [Deprecated] Should be used as an alternative to success/default for things like hover or pressed states
161+
*/
57162
alternative: string;
163+
/**
164+
* {string} success.muted - For lowest contrast background used in success semantic. (Example: notification background)
165+
*/
58166
muted: string;
167+
/**
168+
* {string} success.inverse - For elements used on top of success/default. Used for text, icon or border
169+
*/
59170
inverse: string;
171+
/**
172+
* {string} success.disabled - [Deprecated] Should be used for disabled state
173+
*/
60174
disabled: string;
61175
};
62176
info: {
177+
/**
178+
* {string} info.default - For informational semantic elements. Used for text, background, icon or border
179+
*/
63180
default: string;
181+
/**
182+
* {string} info.alternative - [Deprecated] Should be used as an alternative to info/default for things like hover or pressed states
183+
*/
64184
alternative: string;
185+
/**
186+
* {string} info.muted - For lowest contrast background used in informational semantic. (Example: notification background)
187+
*/
65188
muted: string;
189+
/**
190+
* {string} info.inverse - SFor elements used on top of info/default. Used for text, icon or border
191+
*/
66192
inverse: string;
193+
/**
194+
* {string} info.disabled - [Deprecated] Should be used for disabled state
195+
*/
67196
disabled: string;
68197
};
69198
}

0 commit comments

Comments
 (0)