Skip to content

Commit cfbea50

Browse files
CurryYangxxCurryYangxx
committed
feat: design tokens
1 parent a5e6c8f commit cfbea50

File tree

10 files changed

+801
-0
lines changed

10 files changed

+801
-0
lines changed

‎package-lock.json‎

Lines changed: 545 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/insomnia/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"verify-bundle-plugins": "esr --cache ./scripts/verify-bundle-plugins.ts",
2121
"install-x64-native-dependencies": "esr --cache ./scripts/install-x64-native-dependencies.ts",
2222
"build": "react-router build && esr --cache ./scripts/build.ts --noErrorTruncation",
23+
"build:design-token": "style-dictionary build --config ./style-dictionary-config.json",
2324
"build:react-router": "react-router build",
2425
"generate:schema": "esr ./src/schema.ts",
2526
"build:electron-entrypoints": "cross-env NODE_ENV=development esr esbuild.entrypoints.ts",
@@ -193,6 +194,7 @@
193194
"esbuild": "^0.25.10",
194195
"esbuild-runner": "^2.2.2",
195196
"openapi-types": "^12.1.3",
197+
"style-dictionary": "^5.1.1",
196198
"type-fest": "^4.40.0",
197199
"typescript": "^5.8.3",
198200
"vite": "^7.1.3"

‎packages/insomnia/src/ui/css/token.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Do not edit directly, this file was auto-generated.
3+
*/
4+
5+
:root {
6+
--color-background-default-base: #fff;
7+
--color-background-default-hover: #f3f4f6;
8+
--color-background-default-active: #f3f4f6;
9+
--color-background-default-focus: #84cc16;
10+
--color-text-default-base: #f3f4f6;
11+
--color-border-default-base: #f3f4f6;
12+
--radius-none: 0px;
13+
--radius-xs: 2px;
14+
--radius-sm: 4px;
15+
--radius-md: 6px;
16+
--radius-lg: 8px;
17+
--radius-xl: 12px;
18+
--spacing-xs: 4px;
19+
--spacing-sm: 8px;
20+
--spacing-md: 16px;
21+
--spacing-lg: 24px;
22+
--spacing-xl: 32px;
23+
--typography-font-weight-light: 300;
24+
--typography-font-weight-regular: 400;
25+
--typography-font-weight-medium: 500;
26+
--typography-font-weight-bold: 700;
27+
--typography-font-size-xs: 12px;
28+
--typography-font-size-sm: 14px;
29+
--typography-font-size-md: 16px;
30+
--typography-font-size-lg: 20px;
31+
--typography-font-size-xl: 24px;
32+
--typography-line-height-xs: 16px;
33+
--typography-line-height-sm: 20px;
34+
--typography-line-height-md: 24px;
35+
--typography-line-height-lg: 28px;
36+
--typography-line-height-xl: 32px;
37+
}

‎packages/insomnia/src/ui/design-tokens/README.md‎

Whitespace-only changes.

‎packages/insomnia/src/ui/design-tokens/index.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
2+
// @ts-nocheck
3+
import color from './tokens/color.ts';
4+
import radius from './tokens/radius.ts';
5+
import spacing from './tokens/spacing.ts';
6+
import typography from './tokens/typography.ts';
7+
export default {
8+
color,
9+
radius,
10+
spacing,
11+
typography,
12+
};

‎packages/insomnia/src/ui/design-tokens/tokens/color.ts‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
// tokens -> css variable -> tailwind config -> component usage
2+
import { createRequire } from 'node:module';
3+
const require = createRequire(import.meta.url);
4+
5+
const tailwindColors = require('tailwindcss/colors');
6+
7+
const background = {
8+
default: {
9+
base: { value: '#fff', comment: '' },
10+
hover: { value: tailwindColors.gray[100] },
11+
active: { value: tailwindColors.gray[100] },
12+
focus: { value: '#84cc16' },
13+
disabled: '',
14+
},
15+
success: {
16+
base: '',
17+
hover: '',
18+
active: '',
19+
disabled: '',
20+
},
21+
notice: {
22+
base: '',
23+
hover: '',
24+
active: '',
25+
disabled: '',
26+
},
27+
warning: {
28+
base: '',
29+
hover: '',
30+
active: '',
31+
disabled: '',
32+
},
33+
danger: {
34+
base: '',
35+
hover: '',
36+
active: '',
37+
disabled: '',
38+
},
39+
surprise: {
40+
base: '',
41+
hover: '',
42+
active: '',
43+
disabled: '',
44+
},
45+
info: {
46+
base: '',
47+
hover: '',
48+
active: '',
49+
disabled: '',
50+
},
51+
};
52+
const text = {
53+
default: {
54+
base: { value: tailwindColors.gray[100] },
55+
hover: '',
56+
active: '',
57+
disabled: '',
58+
},
59+
success: {
60+
base: '',
61+
hover: '',
62+
active: '',
63+
disabled: '',
64+
},
65+
notice: {
66+
base: '',
67+
hover: '',
68+
active: '',
69+
disabled: '',
70+
},
71+
warning: {
72+
base: '',
73+
hover: '',
74+
active: '',
75+
disabled: '',
76+
},
77+
danger: {
78+
base: '',
79+
hover: '',
80+
active: '',
81+
disabled: '',
82+
},
83+
surprise: {
84+
base: '',
85+
hover: '',
86+
active: '',
87+
disabled: '',
88+
},
89+
info: {
90+
base: '',
91+
hover: '',
92+
active: '',
93+
disabled: '',
94+
},
95+
};
96+
const border = {
97+
default: {
98+
base: { value: tailwindColors.gray[100] },
99+
hover: '',
100+
active: '',
101+
disabled: '',
102+
},
103+
success: {
104+
base: '',
105+
hover: '',
106+
active: '',
107+
disabled: '',
108+
},
109+
notice: {
110+
base: '',
111+
hover: '',
112+
active: '',
113+
disabled: '',
114+
},
115+
warning: {
116+
base: '',
117+
hover: '',
118+
active: '',
119+
disabled: '',
120+
},
121+
danger: {
122+
base: '',
123+
hover: '',
124+
active: '',
125+
disabled: '',
126+
},
127+
surprise: {
128+
base: '',
129+
hover: '',
130+
active: '',
131+
disabled: '',
132+
},
133+
info: {
134+
base: '',
135+
hover: '',
136+
active: '',
137+
disabled: '',
138+
},
139+
};
140+
141+
export default {
142+
background,
143+
text,
144+
border,
145+
};

‎packages/insomnia/src/ui/design-tokens/tokens/radius.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
none: { value: '0px' },
3+
xs: { value: '2px' },
4+
sm: { value: '4px' },
5+
md: { value: '6px' },
6+
lg: { value: '8px' },
7+
xl: { value: '12px' },
8+
};

‎packages/insomnia/src/ui/design-tokens/tokens/spacing.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default {
2+
xs: { value: '4px' },
3+
sm: { value: '8px' },
4+
md: { value: '16px' },
5+
lg: { value: '24px' },
6+
xl: { value: '32px' },
7+
};

‎packages/insomnia/src/ui/design-tokens/tokens/typography.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export default {
2+
fontWeight: {
3+
light: {
4+
value: '300',
5+
},
6+
regular: {
7+
value: '400',
8+
},
9+
medium: {
10+
value: '500',
11+
},
12+
bold: {
13+
value: '700',
14+
},
15+
},
16+
fontSize: {
17+
xs: { value: '12px' },
18+
sm: { value: '14px' },
19+
md: { value: '16px' },
20+
lg: { value: '20px' },
21+
xl: { value: '24px' },
22+
},
23+
lineHeight: {
24+
xs: { value: '16px' },
25+
sm: { value: '20px' },
26+
md: { value: '24px' },
27+
lg: { value: '28px' },
28+
xl: { value: '32px' },
29+
},
30+
};

‎packages/insomnia/style-dictionary-config.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"source": ["src/ui/design-tokens/index.ts"],
3+
"platforms": {
4+
"css": {
5+
"transformGroup": "css",
6+
"buildPath": "src/ui/css/",
7+
"files": [
8+
{
9+
"destination": "token.css",
10+
"format": "css/variables"
11+
}
12+
]
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)