@atom-learning/theme 1.1.0 → 1.2.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/lib/index.d.ts +37 -0
- package/lib/index.js +47 -10
- package/lib/index.scss +48 -11
- package/package.json +1 -1
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
|
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",
|
|
@@ -98,9 +135,9 @@ module.exports = {
|
|
|
98
135
|
"round": "100rem"
|
|
99
136
|
},
|
|
100
137
|
"shadows": {
|
|
101
|
-
"0": "0 1px 3px hsla(0, 0%, 20%, 0.
|
|
102
|
-
"1": "0 3px 6px hsla(0, 0%, 20%, 0.
|
|
103
|
-
"2": "0 10px 20px hsla(0, 0%, 20%, 0.
|
|
104
|
-
"3": "0 14px 28px hsla(0, 0%, 20%, 0.
|
|
138
|
+
"0": "0 1px 3px hsla(0, 0%, 20%, 0.1), 0 1px 2px hsla(0, 0%, 20%, 0.15)",
|
|
139
|
+
"1": "0 3px 6px hsla(0, 0%, 20%, 0.1), 0 3px 6px hsla(0, 0%, 20%, 0.1)",
|
|
140
|
+
"2": "0 10px 20px hsla(0, 0%, 20%, 0.1), 0 6px 6px hsla(0, 0%, 20%, 0.1)",
|
|
141
|
+
"3": "0 14px 28px hsla(0, 0%, 20%, 0.15), 0 10px 10px hsla(0, 0%, 20%, 0.1)"
|
|
105
142
|
}
|
|
106
143
|
}
|
package/lib/index.scss
CHANGED
|
@@ -1,15 +1,51 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Wed, 22 Feb 2023 12:09:52 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;
|
|
@@ -58,10 +94,10 @@ $font-families-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Ne
|
|
|
58
94
|
$font-families-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
|
|
59
95
|
|
|
60
96
|
$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.
|
|
97
|
+
0: (0 1px 3px rgba(51, 51, 51, 0.1), 0 1px 2px rgba(51, 51, 51, 0.15)),
|
|
98
|
+
1: (0 3px 6px rgba(51, 51, 51, 0.1), 0 3px 6px rgba(51, 51, 51, 0.1)),
|
|
99
|
+
2: (0 10px 20px rgba(51, 51, 51, 0.1), 0 6px 6px rgba(51, 51, 51, 0.1)),
|
|
100
|
+
3: (0 14px 28px rgba(51, 51, 51, 0.15), 0 10px 10px rgba(51, 51, 51, 0.1))
|
|
65
101
|
);
|
|
66
102
|
$size-font: (
|
|
67
103
|
xs: 12px,
|
|
@@ -83,7 +119,8 @@ $size-space: (
|
|
|
83
119
|
6: 40px,
|
|
84
120
|
7: 48px,
|
|
85
121
|
8: 64px,
|
|
86
|
-
9: 80px
|
|
122
|
+
9: 80px,
|
|
123
|
+
24: 24px
|
|
87
124
|
);
|
|
88
125
|
$size-size: (
|
|
89
126
|
0: 8px,
|