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

Commit da82d2b

Browse files
georgewrmarshallgeorgewrmarshall
committed
chore: refactoring css and improving build to adhere to workspace conventions
1 parent cd5ae49 commit da82d2b

File tree

10 files changed

+276
-237
lines changed

10 files changed

+276
-237
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ Currently the metamask design tokens repo supports 2 formats, CSS-in-JS and CSS
4343
> _Please note the file path will depend on where in your project you are importing it from._
4444
4545
```css
46-
@import '../../node_modules/@metamask/design-tokens/src/css/design-tokens';
46+
@import '@metamask/design-tokens/styles';
4747
```
4848

4949
2. Use design token CSS variables in the code.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@
2222
"require": "./dist/index.js"
2323
},
2424
"./package.json": "./package.json",
25-
"./design-tokens.css": "./src/css/design-tokens.css"
25+
"./styles.min.css": "./dist/index.min.css"
2626
},
2727
"main": "./dist/index.js",
2828
"module": "./dist/index.mjs",
2929
"types": "./dist/types/index.d.ts",
3030
"files": [
31-
"dist",
32-
"src/css/design-tokens.css"
31+
"dist"
3332
],
3433
"scripts": {
35-
"build": "tsup --clean && yarn build:types",
34+
"build": "tsup --clean && yarn build:types && yarn build:css",
3635
"build-storybook": "storybook build",
3736
"build:clean": "rimraf dist && yarn build",
37+
"build:css": "cleancss -o dist/styles.min.css src/css/index.css",
3838
"build:types": "tsc --project tsconfig.build.json",
3939
"lint": "yarn lint:eslint && yarn lint:constraints && yarn lint:misc --check && yarn lint:dependencies --check && yarn lint:changelog",
4040
"lint:changelog": "auto-changelog validate --prettier",
@@ -80,6 +80,7 @@
8080
"@typescript-eslint/parser": "^5.43.0",
8181
"@vitejs/plugin-react": "^4.2.1",
8282
"@yarnpkg/types": "^4.0.0-rc.52",
83+
"clean-css-cli": "^5.6.3",
8384
"depcheck": "^1.4.3",
8485
"eslint": "^8.44.0",
8586
"eslint-config-prettier": "^8.8.0",

‎src/css/brand-colors.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* @deprecated these brand colors have been deprecated in favor of the new brand colors
3+
* Brand Colors
4+
* Do not use "--brand-colors" in your code
5+
* Instead use the "--color-" variables to ensure
6+
* theme compatible styles
7+
*/
8+
:root {
9+
--brand-colors-white-white000: #ffffff;
10+
--brand-colors-white-white010: #fcfcfc;
11+
--brand-colors-black-black000: #000000;
12+
--brand-colors-grey-grey030: #fafbfc;
13+
--brand-colors-grey-grey040: #f2f4f6;
14+
--brand-colors-grey-grey100: #d6d9dc;
15+
--brand-colors-grey-grey200: #bbc0c5;
16+
--brand-colors-grey-grey300: #9fa6ae;
17+
--brand-colors-grey-grey400: #848c96;
18+
--brand-colors-grey-grey500: #6a737d;
19+
--brand-colors-grey-grey600: #535a61;
20+
--brand-colors-grey-grey700: #3b4046;
21+
--brand-colors-grey-grey750: #2e3339;
22+
--brand-colors-grey-grey800: #24272a;
23+
--brand-colors-grey-grey900: #141618;
24+
--brand-colors-blue-blue000: #eaf6ff;
25+
--brand-colors-blue-blue100: #a7d9fe;
26+
--brand-colors-blue-blue200: #75c4fd;
27+
--brand-colors-blue-blue300: #43aefc;
28+
--brand-colors-blue-blue400: #1098fc;
29+
--brand-colors-blue-blue500: #0376c9;
30+
--brand-colors-blue-blue600: #0260a4;
31+
--brand-colors-blue-blue700: #024272;
32+
--brand-colors-blue-blue800: #01253f;
33+
--brand-colors-blue-blue900: #00080d;
34+
--brand-colors-orange-orange000: #fef5ef;
35+
--brand-colors-orange-orange100: #fde2cf;
36+
--brand-colors-orange-orange200: #fbc49d;
37+
--brand-colors-orange-orange300: #faa66c;
38+
--brand-colors-orange-orange400: #f8883b;
39+
--brand-colors-orange-orange500: #f66a0a;
40+
--brand-colors-orange-orange600: #bf5208;
41+
--brand-colors-orange-orange700: #954005;
42+
--brand-colors-orange-orange800: #632b04;
43+
--brand-colors-orange-orange900: #321602;
44+
--brand-colors-green-green000: #f3fcf5;
45+
--brand-colors-green-green100: #d6ffdf;
46+
--brand-colors-green-green200: #afecbd;
47+
--brand-colors-green-green300: #86e29b;
48+
--brand-colors-green-green400: #5dd879;
49+
--brand-colors-green-green500: #28a745;
50+
--brand-colors-green-green600: #1c8234;
51+
--brand-colors-green-green700: #145523;
52+
--brand-colors-green-green800: #0a2c12;
53+
--brand-colors-green-green900: #041007;
54+
--brand-colors-red-red000: #fcf2f3;
55+
--brand-colors-red-red100: #f7d5d8;
56+
--brand-colors-red-red200: #f1b9be;
57+
--brand-colors-red-red300: #e88f97;
58+
--brand-colors-red-red400: #e06470;
59+
--brand-colors-red-red500: #d73847;
60+
--brand-colors-red-red600: #b92534;
61+
--brand-colors-red-red700: #8e1d28;
62+
--brand-colors-red-red800: #64141c;
63+
--brand-colors-red-red900: #3a0c10;
64+
--brand-colors-purple-purple500: #8b45b6;
65+
--brand-colors-violet-violet300: #cfb5f0;
66+
--brand-colors-yellow-yellow000: #fffdf8;
67+
--brand-colors-yellow-yellow100: #fefcde;
68+
--brand-colors-yellow-yellow200: #fff2c5;
69+
--brand-colors-yellow-yellow300: #ffeaa3;
70+
--brand-colors-yellow-yellow400: #ffdf70;
71+
--brand-colors-yellow-yellow500: #ffd33d;
72+
--brand-colors-yellow-yellow600: #ffc70a;
73+
}

‎src/css/dark-theme-colors.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Dark Theme Colors
3+
*/
4+
[data-theme='dark'] {
5+
--color-background-default: var(--brand-colors-grey-grey800);
6+
--color-background-default-hover: #282b2e;
7+
--color-background-default-pressed: #36383b;
8+
--color-background-alternative: var(--brand-colors-grey-grey900);
9+
--color-background-alternative-hover: #191b1d;
10+
--color-background-alternative-pressed: #27292a;
11+
--color-background-hover: #ffffff05;
12+
--color-background-pressed: #ffffff14;
13+
--color-text-default: var(--brand-colors-white-white000);
14+
--color-text-alternative: var(--brand-colors-grey-grey100);
15+
--color-text-muted: var(--brand-colors-grey-grey400);
16+
--color-icon-default: var(--brand-colors-white-white000);
17+
--color-icon-alternative: var(--brand-colors-grey-grey200);
18+
--color-icon-muted: var(--brand-colors-grey-grey400);
19+
--color-border-default: var(--brand-colors-grey-grey400);
20+
--color-border-muted: var(--brand-colors-grey-grey700);
21+
--color-overlay-default: #00000099;
22+
--color-overlay-alternative: #000000cc;
23+
--color-shadow-default: #00000080;
24+
--color-overlay-inverse: var(--brand-colors-white-white010);
25+
--color-primary-default: var(--brand-colors-blue-blue400);
26+
--color-primary-default-hover: #0092fa;
27+
--color-primary-default-pressed: #54b6fc;
28+
--color-primary-alternative: var(--brand-colors-blue-blue300);
29+
--color-primary-muted: #1098fc26;
30+
--color-primary-inverse: var(--brand-colors-grey-grey900);
31+
--color-primary-disabled: #1098fc80;
32+
--color-primary-shadow: #0376c933;
33+
--color-secondary-default: var(--brand-colors-orange-orange400);
34+
--color-secondary-alternative: var(--brand-colors-orange-orange300);
35+
--color-secondary-muted: #f8883b26;
36+
--color-secondary-inverse: var(--brand-colors-grey-grey900);
37+
--color-secondary-disabled: #f8883b80;
38+
--color-error-default: #ff5263;
39+
--color-error-default-hover: #ff4d58;
40+
--color-error-default-pressed: #f9868e;
41+
--color-error-alternative: var(--brand-colors-red-red300);
42+
--color-error-muted: #ff526326;
43+
--color-error-inverse: var(--brand-colors-grey-grey900);
44+
--color-error-disabled: #d7384780;
45+
--color-error-shadow: #ff526366;
46+
--color-warning-default: var(--brand-colors-yellow-yellow500);
47+
--color-warning-default-hover: #ffc60a;
48+
--color-warning-default-pressed: #ffeaa3d1;
49+
--color-warning-alternative: var(--brand-colors-yellow-yellow400);
50+
--color-warning-muted: #ffd33d26;
51+
--color-warning-inverse: var(--brand-colors-grey-grey900);
52+
--color-warning-disabled: #ffd33d80;
53+
--color-success-default: var(--brand-colors-green-green500);
54+
--color-success-default-hover: #05b82f;
55+
--color-success-default-pressed: #6aec88;
56+
--color-success-alternative: var(--brand-colors-green-green400);
57+
--color-success-muted: #28a74526;
58+
--color-success-inverse: var(--brand-colors-grey-grey900);
59+
--color-success-disabled: #28a74580;
60+
--color-info-default: var(--brand-colors-blue-blue400);
61+
--color-info-alternative: var(--brand-colors-blue-blue300);
62+
--color-info-muted: #1098fc26;
63+
--color-info-inverse: var(--brand-colors-grey-grey900);
64+
--color-info-disabled: #0376c980;
65+
}

‎src/css/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import './brand-colors.css';
2+
@import './light-theme-colors.css';
3+
@import './dark-theme-colors.css';
4+
@import './typography.css';
5+
@import './shadow.css';

‎src/css/light-theme-colors.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/*
2+
* Light Theme Colors
3+
*/
4+
:root,
5+
[data-theme='light'] {
6+
--color-background-default: var(--brand-colors-white-white000);
7+
--color-background-default-hover: #fafafa;
8+
--color-background-default-pressed: #ebebeb;
9+
--color-background-alternative: var(--brand-colors-grey-grey040);
10+
--color-background-alternative-hover: #edeff1;
11+
--color-background-alternative-pressed: #dfe0e2;
12+
--color-background-hover: #00000005;
13+
--color-background-pressed: #00000014;
14+
--color-text-default: var(--brand-colors-grey-grey800);
15+
--color-text-alternative: var(--brand-colors-grey-grey600);
16+
--color-text-muted: var(--brand-colors-grey-grey200);
17+
--color-icon-default: var(--brand-colors-grey-grey800);
18+
--color-icon-alternative: var(--brand-colors-grey-grey500);
19+
--color-icon-muted: var(--brand-colors-grey-grey200);
20+
--color-border-default: var(--brand-colors-grey-grey200);
21+
--color-border-muted: var(--brand-colors-grey-grey100);
22+
--color-overlay-default: #00000099;
23+
--color-overlay-alternative: #000000cc;
24+
--color-overlay-inverse: var(--brand-colors-white-white010);
25+
--color-shadow-default: #0000001a;
26+
--color-primary-default: var(--brand-colors-blue-blue500);
27+
--color-primary-default-hover: #0379ce;
28+
--color-primary-default-pressed: #036db9;
29+
--color-primary-alternative: var(--brand-colors-blue-blue600);
30+
--color-primary-muted: #0376c919;
31+
--color-primary-inverse: var(--brand-colors-white-white000);
32+
--color-primary-disabled: #0376c980;
33+
--color-primary-shadow: #0376c933;
34+
--color-secondary-default: var(--brand-colors-orange-orange500);
35+
--color-secondary-alternative: var(--brand-colors-orange-orange600);
36+
--color-secondary-muted: #f66a0a19;
37+
--color-secondary-inverse: var(--brand-colors-white-white000);
38+
--color-secondary-disabled: #f66a0a80;
39+
--color-error-default: var(--brand-colors-red-red500);
40+
--color-error-default-hover: #cd4250;
41+
--color-error-default-pressed: #c63441;
42+
--color-error-alternative: var(--brand-colors-red-red600);
43+
--color-error-muted: #d7384719;
44+
--color-error-inverse: var(--brand-colors-white-white000);
45+
--color-error-disabled: #d7384780;
46+
--color-error-shadow: #d7384766;
47+
--color-warning-default: var(--brand-colors-orange-orange600);
48+
--color-warning-default-hover: #c2540a;
49+
--color-warning-default-pressed: #a24507;
50+
--color-warning-alternative: var(--brand-colors-yellow-yellow600);
51+
--color-warning-muted: #bf520819;
52+
--color-warning-inverse: var(--brand-colors-white-white000);
53+
--color-warning-disabled: #ffd33d80;
54+
--color-success-default: var(--brand-colors-green-green600);
55+
--color-success-default-hover: #208838;
56+
--color-success-default-pressed: #1b7431;
57+
--color-success-alternative: var(--brand-colors-green-green500);
58+
--color-success-muted: #1c823419;
59+
--color-success-inverse: var(--brand-colors-white-white000);
60+
--color-success-disabled: #28a74580;
61+
--color-info-default: var(--brand-colors-blue-blue500);
62+
--color-info-alternative: var(--brand-colors-blue-blue600);
63+
--color-info-muted: #0376c919;
64+
--color-info-inverse: var(--brand-colors-white-white000);
65+
--color-info-disabled: #0376c980;
66+
--color-network-goerli-default: var(--brand-colors-blue-blue400);
67+
--color-network-goerli-inverse: var(--brand-colors-white-white010);
68+
--color-network-localhost-default: var(--brand-colors-grey-grey200);
69+
--color-network-localhost-inverse: var(--brand-colors-white-white010);
70+
--color-network-sepolia-default: var(--brand-colors-violet-violet300);
71+
--color-network-sepolia-inverse: var(--brand-colors-white-white010);
72+
--color-flask-default: var(--brand-colors-purple-purple500);
73+
--color-flask-inverse: var(--brand-colors-white-white010);
74+
75+
/* Components */
76+
/* button */
77+
--component-button-primary-shadow: var(--shadow-size-sm)
78+
var(--color-primary-shadow);
79+
--component-button-danger-shadow: var(--shadow-size-sm)
80+
var(--color-error-shadow);
81+
}

‎src/css/shadow.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* Shadow
3+
*/
4+
:root {
5+
/* shadow */
6+
--shadow-size-xs: 0 2px 4px 0;
7+
--shadow-size-sm: 0 2px 8px 0;
8+
--shadow-size-md: 0 2px 16px 0;
9+
--shadow-size-lg: 0 2px 40px 0;
10+
}

0 commit comments

Comments
 (0)