@atom-learning/theme 2.0.0-beta.0 → 2.0.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 +143 -1
- package/lib/index.js +158 -16
- package/lib/index.scss +151 -16
- 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,138 @@ 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
|
|
44
|
+
"cyan100": string
|
|
45
|
+
"cyan200": string
|
|
46
|
+
"cyan300": string
|
|
47
|
+
"cyan400": string
|
|
48
|
+
"cyan500": string
|
|
49
|
+
"cyan600": string
|
|
50
|
+
"cyan700": string
|
|
51
|
+
"cyan800": string
|
|
52
|
+
"cyan900": string
|
|
53
|
+
"cyan1000": string
|
|
54
|
+
"cyan1100": string
|
|
55
|
+
"cyan1200": string
|
|
56
|
+
"green100": string
|
|
57
|
+
"green200": string
|
|
58
|
+
"green300": string
|
|
59
|
+
"green400": string
|
|
60
|
+
"green500": string
|
|
61
|
+
"green600": string
|
|
62
|
+
"green700": string
|
|
63
|
+
"green800": string
|
|
64
|
+
"green900": string
|
|
65
|
+
"green1000": string
|
|
66
|
+
"green1100": string
|
|
67
|
+
"green1200": string
|
|
68
|
+
"magenta100": string
|
|
69
|
+
"magenta200": string
|
|
70
|
+
"magenta300": string
|
|
71
|
+
"magenta400": string
|
|
72
|
+
"magenta500": string
|
|
73
|
+
"magenta600": string
|
|
74
|
+
"magenta700": string
|
|
75
|
+
"magenta800": string
|
|
76
|
+
"magenta900": string
|
|
77
|
+
"magenta1000": string
|
|
78
|
+
"magenta1100": string
|
|
79
|
+
"magenta1200": string
|
|
80
|
+
"red100": string
|
|
81
|
+
"red200": string
|
|
82
|
+
"red300": string
|
|
83
|
+
"red400": string
|
|
84
|
+
"red500": string
|
|
85
|
+
"red600": string
|
|
86
|
+
"red700": string
|
|
87
|
+
"red800": string
|
|
88
|
+
"red900": string
|
|
89
|
+
"red1000": string
|
|
90
|
+
"red1100": string
|
|
91
|
+
"red1200": string
|
|
92
|
+
"teal100": string
|
|
93
|
+
"teal200": string
|
|
94
|
+
"teal300": string
|
|
95
|
+
"teal400": string
|
|
96
|
+
"teal500": string
|
|
97
|
+
"teal600": string
|
|
98
|
+
"teal700": string
|
|
99
|
+
"teal800": string
|
|
100
|
+
"teal900": string
|
|
101
|
+
"teal1000": string
|
|
102
|
+
"teal1100": string
|
|
103
|
+
"teal1200": string
|
|
104
|
+
"orange100": string
|
|
105
|
+
"orange200": string
|
|
106
|
+
"orange300": string
|
|
107
|
+
"orange400": string
|
|
108
|
+
"orange500": string
|
|
109
|
+
"orange600": string
|
|
110
|
+
"orange700": string
|
|
111
|
+
"orange800": string
|
|
112
|
+
"orange900": string
|
|
113
|
+
"orange1000": string
|
|
114
|
+
"orange1100": string
|
|
115
|
+
"orange1200": string
|
|
116
|
+
"yellow100": string
|
|
117
|
+
"yellow200": string
|
|
118
|
+
"yellow300": string
|
|
119
|
+
"yellow400": string
|
|
120
|
+
"yellow500": string
|
|
121
|
+
"yellow600": string
|
|
122
|
+
"yellow700": string
|
|
123
|
+
"yellow800": string
|
|
124
|
+
"yellow900": string
|
|
125
|
+
"yellow1000": string
|
|
126
|
+
"yellow1100": string
|
|
127
|
+
"yellow1200": string
|
|
128
|
+
"lime100": string
|
|
129
|
+
"lime200": string
|
|
130
|
+
"lime300": string
|
|
131
|
+
"lime400": string
|
|
132
|
+
"lime500": string
|
|
133
|
+
"lime600": string
|
|
134
|
+
"lime700": string
|
|
135
|
+
"lime800": string
|
|
136
|
+
"lime900": string
|
|
137
|
+
"lime1000": string
|
|
138
|
+
"lime1100": string
|
|
139
|
+
"lime1200": string
|
|
8
140
|
"tonal50": string
|
|
9
141
|
"tonal100": string
|
|
10
142
|
"tonal200": string
|
|
@@ -50,6 +182,9 @@ export type Theme = {
|
|
|
50
182
|
"subjectNonVerbalReasoning": string
|
|
51
183
|
"subjectCreativeWriting": string
|
|
52
184
|
"subjectExamSkills": string
|
|
185
|
+
"glBlueLight": string
|
|
186
|
+
"glBluePrimary": string
|
|
187
|
+
"glBlueDark": string
|
|
53
188
|
},
|
|
54
189
|
"space": {
|
|
55
190
|
"0": string
|
|
@@ -62,7 +197,7 @@ export type Theme = {
|
|
|
62
197
|
"7": string
|
|
63
198
|
"8": string
|
|
64
199
|
"9": string
|
|
65
|
-
"
|
|
200
|
+
"24": string
|
|
66
201
|
},
|
|
67
202
|
"fontSizes": {
|
|
68
203
|
"xs": string
|
|
@@ -103,5 +238,12 @@ export type Theme = {
|
|
|
103
238
|
"1": string
|
|
104
239
|
"2": string
|
|
105
240
|
"3": string
|
|
241
|
+
},
|
|
242
|
+
"ratios": {
|
|
243
|
+
"16-9": string
|
|
244
|
+
"3-2": string
|
|
245
|
+
"4-3": string
|
|
246
|
+
"1-1": string
|
|
247
|
+
"3-4": string
|
|
106
248
|
}
|
|
107
249
|
}
|
package/lib/index.js
CHANGED
|
@@ -4,10 +4,142 @@ 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%, 73%)",
|
|
13
|
+
"grey600": "hsl(0, 0%, 62%)",
|
|
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(211, 100%, 88%)",
|
|
24
|
+
"blue500": "hsl(212, 100%, 80%)",
|
|
25
|
+
"blue600": "hsl(213, 100%, 71%)",
|
|
26
|
+
"blue700": "hsl(214, 100%, 58%)",
|
|
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(227, 57%, 11%)",
|
|
32
|
+
"purple100": "hsl(282, 100%, 98%)",
|
|
33
|
+
"purple200": "hsl(270, 100%, 95%)",
|
|
34
|
+
"purple300": "hsl(271, 100%, 92%)",
|
|
35
|
+
"purple400": "hsl(270, 100%, 89%)",
|
|
36
|
+
"purple500": "hsl(270, 90%, 81%)",
|
|
37
|
+
"purple600": "hsl(271, 97%, 69%)",
|
|
38
|
+
"purple700": "hsl(273, 84%, 47%)",
|
|
39
|
+
"purple800": "hsl(273, 94%, 48%)",
|
|
40
|
+
"purple900": "hsl(268, 79%, 42%)",
|
|
41
|
+
"purple1000": "hsl(266, 82%, 32%)",
|
|
42
|
+
"purple1100": "hsl(265, 63%, 23%)",
|
|
43
|
+
"purple1200": "hsl(265, 61%, 14%)",
|
|
44
|
+
"cyan100": "hsl(198, 100%, 97%)",
|
|
45
|
+
"cyan200": "hsl(199, 100%, 94%)",
|
|
46
|
+
"cyan300": "hsl(201, 100%, 89%)",
|
|
47
|
+
"cyan400": "hsl(200, 100%, 84%)",
|
|
48
|
+
"cyan500": "hsl(201, 96%, 73%)",
|
|
49
|
+
"cyan600": "hsl(202, 85%, 60%)",
|
|
50
|
+
"cyan700": "hsl(204, 81%, 46%)",
|
|
51
|
+
"cyan800": "hsl(205, 100%, 38%)",
|
|
52
|
+
"cyan900": "hsl(206, 100%, 30%)",
|
|
53
|
+
"cyan1000": "hsl(205, 100%, 21%)",
|
|
54
|
+
"cyan1100": "hsl(206, 97%, 15%)",
|
|
55
|
+
"cyan1200": "hsl(207, 73%, 9%)",
|
|
56
|
+
"green100": "hsl(135, 80%, 96%)",
|
|
57
|
+
"green200": "hsl(135, 72%, 92%)",
|
|
58
|
+
"green300": "hsl(135, 68%, 83%)",
|
|
59
|
+
"green400": "hsl(135, 65%, 76%)",
|
|
60
|
+
"green500": "hsl(136, 56%, 62%)",
|
|
61
|
+
"green600": "hsl(137, 42%, 49%)",
|
|
62
|
+
"green700": "hsl(138, 51%, 35%)",
|
|
63
|
+
"green800": "hsl(138, 68%, 29%)",
|
|
64
|
+
"green900": "hsl(138, 74%, 21%)",
|
|
65
|
+
"green1000": "hsl(138, 89%, 14%)",
|
|
66
|
+
"green1100": "hsl(135, 91%, 9%)",
|
|
67
|
+
"green1200": "hsl(123, 56%, 6%)",
|
|
68
|
+
"magenta100": "hsl(330, 100%, 99%)",
|
|
69
|
+
"magenta200": "hsl(329, 100%, 96%)",
|
|
70
|
+
"magenta300": "hsl(332, 100%, 92%)",
|
|
71
|
+
"magenta400": "hsl(333, 100%, 90%)",
|
|
72
|
+
"magenta500": "hsl(333, 90%, 80%)",
|
|
73
|
+
"magenta600": "hsl(333, 87%, 72%)",
|
|
74
|
+
"magenta700": "hsl(333, 75%, 59%)",
|
|
75
|
+
"magenta800": "hsl(333, 69%, 49%)",
|
|
76
|
+
"magenta900": "hsl(333, 74%, 36%)",
|
|
77
|
+
"magenta1000": "hsl(333, 86%, 25%)",
|
|
78
|
+
"magenta1100": "hsl(333, 95%, 16%)",
|
|
79
|
+
"magenta1200": "hsl(334, 62%, 10%)",
|
|
80
|
+
"red100": "hsl(0, 100%, 99%)",
|
|
81
|
+
"red200": "hsl(0, 100%, 96%)",
|
|
82
|
+
"red300": "hsl(357, 100%, 93%)",
|
|
83
|
+
"red400": "hsl(356, 100%, 90%)",
|
|
84
|
+
"red500": "hsl(356, 96%, 83%)",
|
|
85
|
+
"red600": "hsl(357, 90%, 73%)",
|
|
86
|
+
"red700": "hsl(357, 80%, 59%)",
|
|
87
|
+
"red800": "hsl(357, 76%, 49%)",
|
|
88
|
+
"red900": "hsl(357, 73%, 37%)",
|
|
89
|
+
"red1000": "hsl(357, 79%, 26%)",
|
|
90
|
+
"red1100": "hsl(357, 91%, 17%)",
|
|
91
|
+
"red1200": "hsl(357, 73%, 10%)",
|
|
92
|
+
"teal100": "hsl(180, 83%, 95%)",
|
|
93
|
+
"teal200": "hsl(180, 75%, 88%)",
|
|
94
|
+
"teal300": "hsl(180, 71%, 78%)",
|
|
95
|
+
"teal400": "hsl(179, 70%, 71%)",
|
|
96
|
+
"teal500": "hsl(179, 65%, 52%)",
|
|
97
|
+
"teal600": "hsl(179, 76%, 41%)",
|
|
98
|
+
"teal700": "hsl(179, 91%, 31%)",
|
|
99
|
+
"teal800": "hsl(178, 100%, 25%)",
|
|
100
|
+
"teal900": "hsl(180, 100%, 18%)",
|
|
101
|
+
"teal1000": "hsl(183, 100%, 13%)",
|
|
102
|
+
"teal1100": "hsl(187, 92%, 10%)",
|
|
103
|
+
"teal1200": "hsl(186, 56%, 7%)",
|
|
104
|
+
"orange100": "hsl(38, 100%, 95%)",
|
|
105
|
+
"orange200": "hsl(38, 100%, 90%)",
|
|
106
|
+
"orange300": "hsl(37, 100%, 84%)",
|
|
107
|
+
"orange400": "hsl(36, 96%, 78%)",
|
|
108
|
+
"orange500": "hsl(33, 100%, 67%)",
|
|
109
|
+
"orange600": "hsl(31, 97%, 57%)",
|
|
110
|
+
"orange700": "hsl(30, 92%, 46%)",
|
|
111
|
+
"orange800": "hsl(29, 100%, 43%)",
|
|
112
|
+
"orange900": "hsl(27, 100%, 36%)",
|
|
113
|
+
"orange1000": "hsl(24, 100%, 26%)",
|
|
114
|
+
"orange1100": "hsl(20, 97%, 15%)",
|
|
115
|
+
"orange1200": "hsl(20, 96%, 11%)",
|
|
116
|
+
"yellow100": "hsl(53, 94%, 93%)",
|
|
117
|
+
"yellow200": "hsl(54, 92%, 85%)",
|
|
118
|
+
"yellow300": "hsl(54, 92%, 75%)",
|
|
119
|
+
"yellow400": "hsl(52, 97%, 63%)",
|
|
120
|
+
"yellow500": "hsl(51, 100%, 46%)",
|
|
121
|
+
"yellow600": "hsl(49, 100%, 39%)",
|
|
122
|
+
"yellow700": "hsl(48, 100%, 35%)",
|
|
123
|
+
"yellow800": "hsl(46, 100%, 30%)",
|
|
124
|
+
"yellow900": "hsl(44, 100%, 22%)",
|
|
125
|
+
"yellow1000": "hsl(44, 100%, 18%)",
|
|
126
|
+
"yellow1100": "hsl(41, 100%, 11%)",
|
|
127
|
+
"yellow1200": "hsl(39, 100%, 8%)",
|
|
128
|
+
"lime100": "hsl(73, 94%, 93%)",
|
|
129
|
+
"lime200": "hsl(73, 94%, 87%)",
|
|
130
|
+
"lime300": "hsl(73, 90%, 77%)",
|
|
131
|
+
"lime400": "hsl(74, 82%, 69%)",
|
|
132
|
+
"lime500": "hsl(74, 68%, 58%)",
|
|
133
|
+
"lime600": "hsl(74, 77%, 41%)",
|
|
134
|
+
"lime700": "hsl(75, 100%, 31%)",
|
|
135
|
+
"lime800": "hsl(75, 100%, 27%)",
|
|
136
|
+
"lime900": "hsl(75, 100%, 19%)",
|
|
137
|
+
"lime1000": "hsl(75, 100%, 15%)",
|
|
138
|
+
"lime1100": "hsl(75, 100%, 9%)",
|
|
139
|
+
"lime1200": "hsl(74, 100%, 6%)",
|
|
8
140
|
"tonal50": "hsl(0, 0%, 96%)",
|
|
9
|
-
"tonal100": "hsl(0, 0%,
|
|
10
|
-
"tonal200": "hsl(0, 0%,
|
|
141
|
+
"tonal100": "hsl(0, 0%, 92%)",
|
|
142
|
+
"tonal200": "hsl(0, 0%, 62%)",
|
|
11
143
|
"tonal300": "hsl(0, 0%, 46%)",
|
|
12
144
|
"tonal400": "hsl(0, 0%, 33%)",
|
|
13
145
|
"tonal500": "hsl(0, 0%, 20%)",
|
|
@@ -17,9 +149,9 @@ module.exports = {
|
|
|
17
149
|
"alpha200": "hsla(0, 0%, 20%, 0.2)",
|
|
18
150
|
"alpha250": "hsla(0, 0%, 20%, 0.25)",
|
|
19
151
|
"alpha600": "hsla(0, 0%, 20%, 0.6)",
|
|
20
|
-
"primaryLight": "hsl(
|
|
152
|
+
"primaryLight": "hsl(215, 100%, 98%)",
|
|
21
153
|
"primary": "hsl(217, 92%, 51%)",
|
|
22
|
-
"primaryMid": "hsl(223, 78%,
|
|
154
|
+
"primaryMid": "hsl(223, 78%, 44%)",
|
|
23
155
|
"primaryDark": "hsl(228, 82%, 35%)",
|
|
24
156
|
"secondary": "hsl(204, 100%, 72%)",
|
|
25
157
|
"brandRed": "hsl(0, 91%, 64%)",
|
|
@@ -49,7 +181,10 @@ module.exports = {
|
|
|
49
181
|
"subjectVerbalReasoning": "hsl(128, 47%, 53%)",
|
|
50
182
|
"subjectNonVerbalReasoning": "hsl(41, 100%, 55%)",
|
|
51
183
|
"subjectCreativeWriting": "hsl(33, 100%, 50%)",
|
|
52
|
-
"subjectExamSkills": "hsl(256, 93%, 35%)"
|
|
184
|
+
"subjectExamSkills": "hsl(256, 93%, 35%)",
|
|
185
|
+
"glBlueLight": "hsl(222, 68%, 78%)",
|
|
186
|
+
"glBluePrimary": "hsl(222, 56%, 55%)",
|
|
187
|
+
"glBlueDark": "hsl(222, 35%, 43%)"
|
|
53
188
|
},
|
|
54
189
|
"space": {
|
|
55
190
|
"0": "0.125rem",
|
|
@@ -57,12 +192,12 @@ module.exports = {
|
|
|
57
192
|
"2": "0.5rem",
|
|
58
193
|
"3": "0.75rem",
|
|
59
194
|
"4": "1rem",
|
|
60
|
-
"5": "
|
|
61
|
-
"6": "
|
|
62
|
-
"7": "
|
|
63
|
-
"8": "
|
|
64
|
-
"9": "
|
|
65
|
-
"
|
|
195
|
+
"5": "2rem",
|
|
196
|
+
"6": "2.5rem",
|
|
197
|
+
"7": "3rem",
|
|
198
|
+
"8": "4rem",
|
|
199
|
+
"9": "5rem",
|
|
200
|
+
"24": "1.5rem"
|
|
66
201
|
},
|
|
67
202
|
"fontSizes": {
|
|
68
203
|
"xs": "0.75rem",
|
|
@@ -99,9 +234,16 @@ module.exports = {
|
|
|
99
234
|
"round": "100rem"
|
|
100
235
|
},
|
|
101
236
|
"shadows": {
|
|
102
|
-
"0": "0 1px 3px hsla(0, 0%, 20%, 0.
|
|
103
|
-
"1": "0 3px 6px hsla(0, 0%, 20%, 0.
|
|
104
|
-
"2": "0 10px 20px hsla(0, 0%, 20%, 0.
|
|
105
|
-
"3": "0 14px 28px hsla(0, 0%, 20%, 0.
|
|
237
|
+
"0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
|
|
238
|
+
"1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
|
|
239
|
+
"2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
|
|
240
|
+
"3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
|
|
241
|
+
},
|
|
242
|
+
"ratios": {
|
|
243
|
+
"16-9": "16/9",
|
|
244
|
+
"3-2": "3/2",
|
|
245
|
+
"4-3": "4/3",
|
|
246
|
+
"1-1": "1/1",
|
|
247
|
+
"3-4": "3/4"
|
|
106
248
|
}
|
|
107
249
|
}
|
package/lib/index.scss
CHANGED
|
@@ -1,15 +1,147 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 24 Jul 2023 10:28:49 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: #bababa;
|
|
15
|
+
$color-grey-600: #9e9e9e;
|
|
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: #c2dfff;
|
|
26
|
+
$color-blue-500: #99c9ff;
|
|
27
|
+
$color-blue-600: #6baeff;
|
|
28
|
+
$color-blue-700: #2986ff;
|
|
29
|
+
$color-blue-800: #0f67f5;
|
|
30
|
+
$color-blue-900: #194ac8;
|
|
31
|
+
$color-blue-1000: #102da2;
|
|
32
|
+
$color-blue-1100: #162460;
|
|
33
|
+
$color-blue-1200: #0c132c;
|
|
34
|
+
$color-purple-100: #fcf5ff;
|
|
35
|
+
$color-purple-200: #f2e5ff;
|
|
36
|
+
$color-purple-300: #ebd6ff;
|
|
37
|
+
$color-purple-400: #e3c7ff;
|
|
38
|
+
$color-purple-500: #cfa3fa;
|
|
39
|
+
$color-purple-600: #b363fd;
|
|
40
|
+
$color-purple-700: #8213dd;
|
|
41
|
+
$color-purple-800: #8607ed;
|
|
42
|
+
$color-purple-900: #6516c0;
|
|
43
|
+
$color-purple-1000: #490f95;
|
|
44
|
+
$color-purple-1100: #341660;
|
|
45
|
+
$color-purple-1200: #200e39;
|
|
46
|
+
$color-cyan-100: #f0faff;
|
|
47
|
+
$color-cyan-200: #e0f5ff;
|
|
48
|
+
$color-cyan-300: #c7ebff;
|
|
49
|
+
$color-cyan-400: #ade4ff;
|
|
50
|
+
$color-cyan-500: #78cefc;
|
|
51
|
+
$color-cyan-600: #42b0f0;
|
|
52
|
+
$color-cyan-700: #1688d4;
|
|
53
|
+
$color-cyan-800: #0071c2;
|
|
54
|
+
$color-cyan-900: #005799;
|
|
55
|
+
$color-cyan-1000: #003e6b;
|
|
56
|
+
$color-cyan-1100: #012b4b;
|
|
57
|
+
$color-cyan-1200: #061928;
|
|
58
|
+
$color-green-100: #edfdf1;
|
|
59
|
+
$color-green-200: #dcf9e3;
|
|
60
|
+
$color-green-300: #b6f1c5;
|
|
61
|
+
$color-green-400: #9aeaae;
|
|
62
|
+
$color-green-500: #68d485;
|
|
63
|
+
$color-green-600: #48b166;
|
|
64
|
+
$color-green-700: #2c8747;
|
|
65
|
+
$color-green-800: #187c36;
|
|
66
|
+
$color-green-900: #0e5d26;
|
|
67
|
+
$color-green-1000: #044317;
|
|
68
|
+
$color-green-1100: #022c0d;
|
|
69
|
+
$color-green-1200: #071808;
|
|
70
|
+
$color-magenta-100: #fffafc;
|
|
71
|
+
$color-magenta-200: #ffebf5;
|
|
72
|
+
$color-magenta-300: #ffd6e9;
|
|
73
|
+
$color-magenta-400: #ffcce3;
|
|
74
|
+
$color-magenta-500: #fa9ec7;
|
|
75
|
+
$color-magenta-600: #f679b1;
|
|
76
|
+
$color-magenta-700: #e5488f;
|
|
77
|
+
$color-magenta-800: #d32774;
|
|
78
|
+
$color-magenta-900: #a01855;
|
|
79
|
+
$color-magenta-1000: #77093a;
|
|
80
|
+
$color-magenta-1100: #500225;
|
|
81
|
+
$color-magenta-1200: #290a17;
|
|
82
|
+
$color-red-100: #fffafa;
|
|
83
|
+
$color-red-200: #ffebeb;
|
|
84
|
+
$color-red-300: #ffdbdd;
|
|
85
|
+
$color-red-400: #ffcccf;
|
|
86
|
+
$color-red-500: #fdaab0;
|
|
87
|
+
$color-red-600: #f87c82;
|
|
88
|
+
$color-red-700: #ea434b;
|
|
89
|
+
$color-red-800: #dc1e27;
|
|
90
|
+
$color-red-900: #a31920;
|
|
91
|
+
$color-red-1000: #770e13;
|
|
92
|
+
$color-red-1100: #530408;
|
|
93
|
+
$color-red-1200: #2c0709;
|
|
94
|
+
$color-teal-100: #e8fdfd;
|
|
95
|
+
$color-teal-200: #c9f7f7;
|
|
96
|
+
$color-teal-300: #9fefef;
|
|
97
|
+
$color-teal-400: #81e9e7;
|
|
98
|
+
$color-teal-500: #35d4d2;
|
|
99
|
+
$color-teal-600: #19b8b5;
|
|
100
|
+
$color-teal-700: #079795;
|
|
101
|
+
$color-teal-800: #00807b;
|
|
102
|
+
$color-teal-900: #005c5c;
|
|
103
|
+
$color-teal-1000: #003f42;
|
|
104
|
+
$color-teal-1100: #022b31;
|
|
105
|
+
$color-teal-1200: #081a1c;
|
|
106
|
+
$color-orange-100: #fff6e5;
|
|
107
|
+
$color-orange-200: #ffeccc;
|
|
108
|
+
$color-orange-300: #ffe0ad;
|
|
109
|
+
$color-orange-400: #fdd291;
|
|
110
|
+
$color-orange-500: #ffb357;
|
|
111
|
+
$color-orange-600: #fc9527;
|
|
112
|
+
$color-orange-700: #e17509;
|
|
113
|
+
$color-orange-800: #db6a00;
|
|
114
|
+
$color-orange-900: #b85300;
|
|
115
|
+
$color-orange-1000: #853500;
|
|
116
|
+
$color-orange-1100: #4b1a01;
|
|
117
|
+
$color-orange-1200: #371301;
|
|
118
|
+
$color-yellow-100: #fefadc;
|
|
119
|
+
$color-yellow-200: #fcf5b6;
|
|
120
|
+
$color-yellow-300: #faee85;
|
|
121
|
+
$color-yellow-400: #fce445;
|
|
122
|
+
$color-yellow-500: #ebc700;
|
|
123
|
+
$color-yellow-600: #c7a200;
|
|
124
|
+
$color-yellow-700: #b38f00;
|
|
125
|
+
$color-yellow-800: #997500;
|
|
126
|
+
$color-yellow-900: #705200;
|
|
127
|
+
$color-yellow-1000: #5c4300;
|
|
128
|
+
$color-yellow-1100: #382600;
|
|
129
|
+
$color-yellow-1200: #291b00;
|
|
130
|
+
$color-lime-100: #f7fedc;
|
|
131
|
+
$color-lime-200: #f0fdbf;
|
|
132
|
+
$color-lime-300: #e2f990;
|
|
133
|
+
$color-lime-400: #d3f16f;
|
|
134
|
+
$color-lime-500: #bbdd4b;
|
|
135
|
+
$color-lime-600: #93b918;
|
|
136
|
+
$color-lime-700: #779e00;
|
|
137
|
+
$color-lime-800: #678a00;
|
|
138
|
+
$color-lime-900: #496100;
|
|
139
|
+
$color-lime-1000: #394d00;
|
|
140
|
+
$color-lime-1100: #222e00;
|
|
141
|
+
$color-lime-1200: #171f00;
|
|
10
142
|
$color-tonal-50: #f5f5f5;
|
|
11
|
-
$color-tonal-100: #
|
|
12
|
-
$color-tonal-200: #
|
|
143
|
+
$color-tonal-100: #ebebeb;
|
|
144
|
+
$color-tonal-200: #9e9e9e;
|
|
13
145
|
$color-tonal-300: #757575;
|
|
14
146
|
$color-tonal-400: #545454;
|
|
15
147
|
$color-tonal-500: #333333;
|
|
@@ -19,9 +151,9 @@ $color-alpha-150: rgba(51, 51, 51, 0.15);
|
|
|
19
151
|
$color-alpha-200: rgba(51, 51, 51, 0.2);
|
|
20
152
|
$color-alpha-250: rgba(51, 51, 51, 0.25);
|
|
21
153
|
$color-alpha-600: rgba(51, 51, 51, 0.6);
|
|
22
|
-
$color-primary-light: #
|
|
154
|
+
$color-primary-light: #f5f9ff;
|
|
23
155
|
$color-primary-base: #0f67f5;
|
|
24
|
-
$color-primary-mid: #
|
|
156
|
+
$color-primary-mid: #194ac8;
|
|
25
157
|
$color-primary-dark: #102da2;
|
|
26
158
|
$color-secondary: #70c6ff;
|
|
27
159
|
$color-brand-red-base: #f75050;
|
|
@@ -52,16 +184,19 @@ $color-subject-verbal-reasoning: #4fbf5e;
|
|
|
52
184
|
$color-subject-non-verbal-reasoning: #ffb61a;
|
|
53
185
|
$color-subject-creative-writing: #ff8c00;
|
|
54
186
|
$color-subject-exam-skills: #3306ac;
|
|
187
|
+
$color-gl-blue-light: #a1b8ed;
|
|
188
|
+
$color-gl-blue-primary: #4c73cd;
|
|
189
|
+
$color-gl-blue-dark: #475e94;
|
|
55
190
|
$font-families-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
|
|
56
191
|
$font-families-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
|
|
57
192
|
$font-families-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
|
|
58
193
|
$font-families-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
|
|
59
194
|
|
|
60
195
|
$effects-shadows: (
|
|
61
|
-
0: (0 1px 3px rgba(51, 51, 51, 0.
|
|
62
|
-
1: (0 3px 6px rgba(51, 51, 51, 0.
|
|
63
|
-
2: (0 10px 20px rgba(51, 51, 51, 0.
|
|
64
|
-
3: (0 14px 28px rgba(51, 51, 51, 0.
|
|
196
|
+
0: (0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15)),
|
|
197
|
+
1: (0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1)),
|
|
198
|
+
2: (0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1)),
|
|
199
|
+
3: (0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1))
|
|
65
200
|
);
|
|
66
201
|
$size-font: (
|
|
67
202
|
xs: 12px,
|
|
@@ -79,12 +214,12 @@ $size-space: (
|
|
|
79
214
|
2: 8px,
|
|
80
215
|
3: 12px,
|
|
81
216
|
4: 16px,
|
|
82
|
-
5:
|
|
83
|
-
6:
|
|
84
|
-
7:
|
|
85
|
-
8:
|
|
86
|
-
9:
|
|
87
|
-
|
|
217
|
+
5: 32px,
|
|
218
|
+
6: 40px,
|
|
219
|
+
7: 48px,
|
|
220
|
+
8: 64px,
|
|
221
|
+
9: 80px,
|
|
222
|
+
24: 24px
|
|
88
223
|
);
|
|
89
224
|
$size-size: (
|
|
90
225
|
0: 8px,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atom-learning/theme",
|
|
3
|
-
"version": "2.0.0
|
|
3
|
+
"version": "2.0.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",
|