@atom-learning/theme 1.1.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -1
- package/lib/index.d.ts +44 -0
- package/lib/index.js +50 -6
- package/lib/index.scss +51 -7
- package/package.json +3 -2
- package/theme-map.js +5 -0
package/README.md
CHANGED
|
@@ -1 +1,69 @@
|
|
|
1
|
-
# theme
|
|
1
|
+
# theme
|
|
2
|
+
|
|
3
|
+
These repository contains the Atom Learning Design System tokens, like colours, sizes, spaces, font families and so on.
|
|
4
|
+
|
|
5
|
+
## How to add new tokens that are not part of the theme specification
|
|
6
|
+
|
|
7
|
+
If you need to add tokens that are not part of the [theme specification](https://github.com/system-ui/theme-specification#key-reference), follow the instruction below. You can also have a look at [this PR](https://github.com/Atom-Learning/theme/pull/25) where we did it for aspect ratios.
|
|
8
|
+
|
|
9
|
+
* In `system-ui-theme.js`, in `schema` add a new field as an empty object, like `ratios: {}`
|
|
10
|
+
* Also in `system-ui-theme.js`, in `matchSchema`, add a new field named `[category].[type]`, which value references the field you added to `schema` in the previous step. For example if the category is ratios, and the type is ratio, it would look like `'ratios.ratio': 'ratios`
|
|
11
|
+
* Depending on what you are adding you might have to add it to an existing .json file or create a new one. In our example, we created a new one `src/properties/ratios.json`, and added all our tokens there. The json structure is as follow
|
|
12
|
+
- first level: the `category` mentioned in the step above
|
|
13
|
+
- second level: the `type` mentioned in the step above
|
|
14
|
+
- third level: the token name, as you would use it with `$`, e.g.: `$16-9`
|
|
15
|
+
- fourth level: `value`, the value the token will be replaced by.
|
|
16
|
+
|
|
17
|
+
e.g.:
|
|
18
|
+
```json
|
|
19
|
+
{
|
|
20
|
+
"ratios": {
|
|
21
|
+
"ratio": {
|
|
22
|
+
"16-9": {
|
|
23
|
+
"value": "16/9"
|
|
24
|
+
},
|
|
25
|
+
"3-2": {
|
|
26
|
+
"value": "3/2"
|
|
27
|
+
},
|
|
28
|
+
"4-3": {
|
|
29
|
+
"value": "4/3"
|
|
30
|
+
},
|
|
31
|
+
"1-1": {
|
|
32
|
+
"value": "1/1"
|
|
33
|
+
},
|
|
34
|
+
"3-4": {
|
|
35
|
+
"value": "3/4"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
* In `style.config.js` add your new category (if you added a new category) to the filter of the formatter `'custom/format/scss-map-flat'`. So it's treated the same way than `'size'` and `'effects'`
|
|
43
|
+
|
|
44
|
+
* In `theme-map.js` add the (css property -> category) relation to `themeMap`, in this example, we added `aspectRatio: 'ratios'`. This `themeMap` config is exported and used by projects using our `theme` repo. It's used by `createStitches()` from `@stitches/react` so that we don't have to reference the `type`, so we can call the token like `'$16-9'` instead of `'$ratios$16-9'`
|
|
45
|
+
|
|
46
|
+
### How is `themeMap` used?
|
|
47
|
+
|
|
48
|
+
For example, in `components` repo we use it like this:
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
...
|
|
52
|
+
import { createStitches, defaultThemeMap } from '@stitches/react'
|
|
53
|
+
import { themeMap } from '@atom-learning/theme/theme-map'
|
|
54
|
+
|
|
55
|
+
...
|
|
56
|
+
|
|
57
|
+
const stitchesConfig = createStitches({
|
|
58
|
+
theme: atomTheme as Theme,
|
|
59
|
+
themeMap: {
|
|
60
|
+
...defaultThemeMap,
|
|
61
|
+
...themeMap
|
|
62
|
+
},
|
|
63
|
+
utils,
|
|
64
|
+
media
|
|
65
|
+
})
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Why/When do we need `themeMap`?
|
|
69
|
+
Some CSS properties are not included in the [defaultThemeMap](https://stitches.dev/docs/api#defaultthememap). If they are missing (e.g.: aspectRatio) you need to add them to our custom `themeMap` which we pass to stitches [themeMap](https://stitches.dev/docs/api#thememap) config
|
package/lib/index.d.ts
CHANGED
|
@@ -5,6 +5,42 @@ export type Theme = {
|
|
|
5
5
|
"textPlaceholder": string
|
|
6
6
|
"background": string
|
|
7
7
|
"backgroundAccent": string
|
|
8
|
+
"grey100": string
|
|
9
|
+
"grey200": string
|
|
10
|
+
"grey300": string
|
|
11
|
+
"grey400": string
|
|
12
|
+
"grey500": string
|
|
13
|
+
"grey600": string
|
|
14
|
+
"grey700": string
|
|
15
|
+
"grey800": string
|
|
16
|
+
"grey900": string
|
|
17
|
+
"grey1000": string
|
|
18
|
+
"grey1100": string
|
|
19
|
+
"grey1200": string
|
|
20
|
+
"blue100": string
|
|
21
|
+
"blue200": string
|
|
22
|
+
"blue300": string
|
|
23
|
+
"blue400": string
|
|
24
|
+
"blue500": string
|
|
25
|
+
"blue600": string
|
|
26
|
+
"blue700": string
|
|
27
|
+
"blue800": string
|
|
28
|
+
"blue900": string
|
|
29
|
+
"blue1000": string
|
|
30
|
+
"blue1100": string
|
|
31
|
+
"blue1200": string
|
|
32
|
+
"purple100": string
|
|
33
|
+
"purple200": string
|
|
34
|
+
"purple300": string
|
|
35
|
+
"purple400": string
|
|
36
|
+
"purple500": string
|
|
37
|
+
"purple600": string
|
|
38
|
+
"purple700": string
|
|
39
|
+
"purple800": string
|
|
40
|
+
"purple900": string
|
|
41
|
+
"purple1000": string
|
|
42
|
+
"purple1100": string
|
|
43
|
+
"purple1200": string
|
|
8
44
|
"tonal50": string
|
|
9
45
|
"tonal100": string
|
|
10
46
|
"tonal200": string
|
|
@@ -62,6 +98,7 @@ export type Theme = {
|
|
|
62
98
|
"7": string
|
|
63
99
|
"8": string
|
|
64
100
|
"9": string
|
|
101
|
+
"24": string
|
|
65
102
|
},
|
|
66
103
|
"fontSizes": {
|
|
67
104
|
"xs": string
|
|
@@ -102,5 +139,12 @@ export type Theme = {
|
|
|
102
139
|
"1": string
|
|
103
140
|
"2": string
|
|
104
141
|
"3": string
|
|
142
|
+
},
|
|
143
|
+
"ratios": {
|
|
144
|
+
"16-9": string
|
|
145
|
+
"3-2": string
|
|
146
|
+
"4-3": string
|
|
147
|
+
"1-1": string
|
|
148
|
+
"3-4": string
|
|
105
149
|
}
|
|
106
150
|
}
|
package/lib/index.js
CHANGED
|
@@ -4,10 +4,46 @@ module.exports = {
|
|
|
4
4
|
"textSubtle": "hsl(0, 0%, 33%)",
|
|
5
5
|
"textPlaceholder": "hsl(0, 0%, 46%)",
|
|
6
6
|
"background": "hsl(0, 0%, 96%)",
|
|
7
|
-
"backgroundAccent": "hsl(
|
|
7
|
+
"backgroundAccent": "hsl(215, 100%, 98%)",
|
|
8
|
+
"grey100": "hsl(0, 0%, 96%)",
|
|
9
|
+
"grey200": "hsl(0, 0%, 92%)",
|
|
10
|
+
"grey300": "hsl(0, 0%, 88%)",
|
|
11
|
+
"grey400": "hsl(0, 0%, 81%)",
|
|
12
|
+
"grey500": "hsl(0, 0%, 76%)",
|
|
13
|
+
"grey600": "hsl(0, 0%, 71%)",
|
|
14
|
+
"grey700": "hsl(0, 0%, 46%)",
|
|
15
|
+
"grey800": "hsl(0, 0%, 33%)",
|
|
16
|
+
"grey900": "hsl(0, 0%, 20%)",
|
|
17
|
+
"grey1000": "hsl(0, 0%, 12%)",
|
|
18
|
+
"grey1100": "hsl(0, 0%, 10%)",
|
|
19
|
+
"grey1200": "hsl(0, 0%, 6%)",
|
|
20
|
+
"blue100": "hsl(215, 100%, 98%)",
|
|
21
|
+
"blue200": "hsl(212, 100%, 95%)",
|
|
22
|
+
"blue300": "hsl(211, 100%, 92%)",
|
|
23
|
+
"blue400": "hsl(212, 100%, 88%)",
|
|
24
|
+
"blue500": "hsl(212, 87%, 84%)",
|
|
25
|
+
"blue600": "hsl(216, 96%, 79%)",
|
|
26
|
+
"blue700": "hsl(214, 92%, 63%)",
|
|
27
|
+
"blue800": "hsl(217, 92%, 51%)",
|
|
28
|
+
"blue900": "hsl(223, 78%, 44%)",
|
|
29
|
+
"blue1000": "hsl(228, 82%, 35%)",
|
|
30
|
+
"blue1100": "hsl(228, 63%, 23%)",
|
|
31
|
+
"blue1200": "hsl(228, 63%, 20%)",
|
|
32
|
+
"purple100": "hsl(281, 100%, 98%)",
|
|
33
|
+
"purple200": "hsl(270, 100%, 95%)",
|
|
34
|
+
"purple300": "hsl(270, 100%, 92%)",
|
|
35
|
+
"purple400": "hsl(270, 100%, 89%)",
|
|
36
|
+
"purple500": "hsl(270, 87%, 84%)",
|
|
37
|
+
"purple600": "hsl(264, 96%, 79%)",
|
|
38
|
+
"purple700": "hsl(275, 100%, 51%)",
|
|
39
|
+
"purple800": "hsl(273, 94%, 48%)",
|
|
40
|
+
"purple900": "hsl(268, 78%, 42%)",
|
|
41
|
+
"purple1000": "hsl(266, 82%, 32%)",
|
|
42
|
+
"purple1100": "hsl(265, 63%, 23%)",
|
|
43
|
+
"purple1200": "hsl(265, 63%, 20%)",
|
|
8
44
|
"tonal50": "hsl(0, 0%, 96%)",
|
|
9
|
-
"tonal100": "hsl(0, 0%,
|
|
10
|
-
"tonal200": "hsl(0, 0%,
|
|
45
|
+
"tonal100": "hsl(0, 0%, 92%)",
|
|
46
|
+
"tonal200": "hsl(0, 0%, 71%)",
|
|
11
47
|
"tonal300": "hsl(0, 0%, 46%)",
|
|
12
48
|
"tonal400": "hsl(0, 0%, 33%)",
|
|
13
49
|
"tonal500": "hsl(0, 0%, 20%)",
|
|
@@ -17,9 +53,9 @@ module.exports = {
|
|
|
17
53
|
"alpha200": "hsla(0, 0%, 20%, 0.2)",
|
|
18
54
|
"alpha250": "hsla(0, 0%, 20%, 0.25)",
|
|
19
55
|
"alpha600": "hsla(0, 0%, 20%, 0.6)",
|
|
20
|
-
"primaryLight": "hsl(
|
|
56
|
+
"primaryLight": "hsl(215, 100%, 98%)",
|
|
21
57
|
"primary": "hsl(217, 92%, 51%)",
|
|
22
|
-
"primaryMid": "hsl(223, 78%,
|
|
58
|
+
"primaryMid": "hsl(223, 78%, 44%)",
|
|
23
59
|
"primaryDark": "hsl(228, 82%, 35%)",
|
|
24
60
|
"secondary": "hsl(204, 100%, 72%)",
|
|
25
61
|
"brandRed": "hsl(0, 91%, 64%)",
|
|
@@ -61,7 +97,8 @@ module.exports = {
|
|
|
61
97
|
"6": "2.5rem",
|
|
62
98
|
"7": "3rem",
|
|
63
99
|
"8": "4rem",
|
|
64
|
-
"9": "5rem"
|
|
100
|
+
"9": "5rem",
|
|
101
|
+
"24": "1.5rem"
|
|
65
102
|
},
|
|
66
103
|
"fontSizes": {
|
|
67
104
|
"xs": "0.75rem",
|
|
@@ -102,5 +139,12 @@ module.exports = {
|
|
|
102
139
|
"1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
|
|
103
140
|
"2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
|
|
104
141
|
"3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
|
|
142
|
+
},
|
|
143
|
+
"ratios": {
|
|
144
|
+
"16-9": "16/9",
|
|
145
|
+
"3-2": "3/2",
|
|
146
|
+
"4-3": "4/3",
|
|
147
|
+
"1-1": "1/1",
|
|
148
|
+
"3-4": "3/4"
|
|
105
149
|
}
|
|
106
150
|
}
|
package/lib/index.scss
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 02 May 2023 09:29:20 GMT
|
|
4
4
|
|
|
5
5
|
$color-text-foreground: #1f1f1f;
|
|
6
6
|
$color-text-subtle: #545454;
|
|
7
7
|
$color-text-placeholder: #757575;
|
|
8
8
|
$color-background-base: #f5f5f5;
|
|
9
|
-
$color-background-accent: #
|
|
9
|
+
$color-background-accent: #f5f9ff;
|
|
10
|
+
$color-grey-100: #f5f5f5;
|
|
11
|
+
$color-grey-200: #ebebeb;
|
|
12
|
+
$color-grey-300: #e0e0e0;
|
|
13
|
+
$color-grey-400: #cfcfcf;
|
|
14
|
+
$color-grey-500: #c2c2c2;
|
|
15
|
+
$color-grey-600: #b5b5b5;
|
|
16
|
+
$color-grey-700: #757575;
|
|
17
|
+
$color-grey-800: #545454;
|
|
18
|
+
$color-grey-900: #333333;
|
|
19
|
+
$color-grey-1000: #1f1f1f;
|
|
20
|
+
$color-grey-1100: #1a1a1a;
|
|
21
|
+
$color-grey-1200: #0f0f0f;
|
|
22
|
+
$color-blue-100: #f5f9ff;
|
|
23
|
+
$color-blue-200: #e5f1ff;
|
|
24
|
+
$color-blue-300: #d6eaff;
|
|
25
|
+
$color-blue-400: #c2deff;
|
|
26
|
+
$color-blue-500: #b3d4fa;
|
|
27
|
+
$color-blue-600: #96bffd;
|
|
28
|
+
$color-blue-700: #4a95f7;
|
|
29
|
+
$color-blue-800: #0f67f5;
|
|
30
|
+
$color-blue-900: #194ac8;
|
|
31
|
+
$color-blue-1000: #102da2;
|
|
32
|
+
$color-blue-1100: #162460;
|
|
33
|
+
$color-blue-1200: #132053;
|
|
34
|
+
$color-purple-100: #fcf5ff;
|
|
35
|
+
$color-purple-200: #f2e5ff;
|
|
36
|
+
$color-purple-300: #ebd6ff;
|
|
37
|
+
$color-purple-400: #e3c7ff;
|
|
38
|
+
$color-purple-500: #d6b3fa;
|
|
39
|
+
$color-purple-600: #bf96fd;
|
|
40
|
+
$color-purple-700: #9705ff;
|
|
41
|
+
$color-purple-800: #8607ed;
|
|
42
|
+
$color-purple-900: #6618bf;
|
|
43
|
+
$color-purple-1000: #490f95;
|
|
44
|
+
$color-purple-1100: #341660;
|
|
45
|
+
$color-purple-1200: #2e1353;
|
|
10
46
|
$color-tonal-50: #f5f5f5;
|
|
11
|
-
$color-tonal-100: #
|
|
12
|
-
$color-tonal-200: #
|
|
47
|
+
$color-tonal-100: #ebebeb;
|
|
48
|
+
$color-tonal-200: #b5b5b5;
|
|
13
49
|
$color-tonal-300: #757575;
|
|
14
50
|
$color-tonal-400: #545454;
|
|
15
51
|
$color-tonal-500: #333333;
|
|
@@ -19,9 +55,9 @@ $color-alpha-150: rgba(51, 51, 51, 0.15);
|
|
|
19
55
|
$color-alpha-200: rgba(51, 51, 51, 0.2);
|
|
20
56
|
$color-alpha-250: rgba(51, 51, 51, 0.25);
|
|
21
57
|
$color-alpha-600: rgba(51, 51, 51, 0.6);
|
|
22
|
-
$color-primary-light: #
|
|
58
|
+
$color-primary-light: #f5f9ff;
|
|
23
59
|
$color-primary-base: #0f67f5;
|
|
24
|
-
$color-primary-mid: #
|
|
60
|
+
$color-primary-mid: #194ac8;
|
|
25
61
|
$color-primary-dark: #102da2;
|
|
26
62
|
$color-secondary: #70c6ff;
|
|
27
63
|
$color-brand-red-base: #f75050;
|
|
@@ -63,6 +99,13 @@ $effects-shadows: (
|
|
|
63
99
|
2: (0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1)),
|
|
64
100
|
3: (0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1))
|
|
65
101
|
);
|
|
102
|
+
$ratios-ratio: (
|
|
103
|
+
16-9: 16/9,
|
|
104
|
+
3-2: 3/2,
|
|
105
|
+
4-3: 4/3,
|
|
106
|
+
1-1: 1/1,
|
|
107
|
+
3-4: 3/4
|
|
108
|
+
);
|
|
66
109
|
$size-font: (
|
|
67
110
|
xs: 12px,
|
|
68
111
|
sm: 14px,
|
|
@@ -83,7 +126,8 @@ $size-space: (
|
|
|
83
126
|
6: 40px,
|
|
84
127
|
7: 48px,
|
|
85
128
|
8: 64px,
|
|
86
|
-
9: 80px
|
|
129
|
+
9: 80px,
|
|
130
|
+
24: 24px
|
|
87
131
|
);
|
|
88
132
|
$size-size: (
|
|
89
133
|
0: 8px,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atom-learning/theme",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Design tokens and assets for Atom Learning",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"clean": "del ./lib"
|
|
12
12
|
},
|
|
13
13
|
"files": [
|
|
14
|
-
"lib"
|
|
14
|
+
"lib",
|
|
15
|
+
"theme-map.js"
|
|
15
16
|
],
|
|
16
17
|
"author": "",
|
|
17
18
|
"license": "ISC",
|