@atom-learning/theme 1.0.0-beta.4 → 1.0.1

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.
Files changed (12) hide show
  1. package/lib/LayoutAndSpace.mdx +2 -2
  2. package/lib/Typography.mdx +16 -7
  3. package/lib/assets/logo-light.png +0 -0
  4. package/lib/assets/logo-light.svg +2 -2
  5. package/lib/assets/logo-primary.png +0 -0
  6. package/lib/assets/logo-primary.svg +2 -2
  7. package/lib/assets/logo.png +0 -0
  8. package/lib/assets/logo.svg +5 -5
  9. package/lib/index.d.ts +90 -72
  10. package/lib/index.js +38 -20
  11. package/lib/index.scss +43 -25
  12. package/package.json +4 -3
package/lib/LayoutAndSpace.mdx CHANGED
@@ -8,7 +8,7 @@ description: Visualising the space in and around components is tricky. This page
8
8
  This scale will apply to the space between and internal to elements, it applies to the following common CSS layout properties, `margin`, `padding`, `grid-gap` and flexbox `gap`.
9
9
 
10
10
  <Scale scale={theme.space} css={{ mb: '$5' }}>
11
- {(value) => <Box css={{ width: '$1', height: value, bg: '$primary' }} />}
11
+ {(value) => <Box css={{ height: '$1', width: value, bg: '$primary' }} />}
12
12
  </Scale>
13
13
 
14
14
  ## Size
@@ -61,7 +61,7 @@ The following "Avatar" style component is created using the size, space and radi
61
61
  <Heading size="sm" css={{ mb: '$3' }}>
62
62
  Steve Brusatte
63
63
  </Heading>
64
- <Text size="sm" css={{ color: '$tonal700' }}>
64
+ <Text size="sm" css={{ color: '$tonal600' }}>
65
65
  @SteveBrusatte
66
66
  </Text>
67
67
  </Flex>
package/lib/Typography.mdx CHANGED
@@ -5,13 +5,20 @@ description: We have a variety of Text components to provide consistent typograp
5
5
 
6
6
  ## Fonts
7
7
 
8
- <Scale scale={theme.fonts} css={{ mb: '$5' }} displayValue={false}>
8
+ <Scale scale={theme.fonts} css={{ mb: '$6' }} displayValue={false}>
9
9
  {(value) => (
10
- <Box css={{ pl: '$2', textAlign: 'right' }}>
11
- <Text css={{ fontFamily: value, mb: '$3' }} size="xxl">
10
+ <Box css={{ pl: '$3', textAlign: 'right' }}>
11
+ <Text
12
+ css={{
13
+ fontFamily: value,
14
+ fontSize: '$2xl',
15
+ mb: '$4',
16
+ '@md': { fontSize: '$3xl' }
17
+ }}
18
+ >
12
19
  Abc-Xyz
13
20
  </Text>
14
- <Text size="sm" css={{ color: '$tonal600', fontFamily: value }}>
21
+ <Text size="sm" css={{ color: '$tonal600', fontFamily: '$body' }}>
15
22
  {value}
16
23
  </Text>
17
24
  </Box>
@@ -22,14 +29,16 @@ description: We have a variety of Text components to provide consistent typograp
22
29
 
23
30
  This typographic sizing scale represents the `font-size` values used in our components. It loosely follows the [Perfect Fourth](https://type-scale.com/?scale=1.333&font=Inter) scale and can be accessed by using t-shirt notation
24
31
 
25
- <Scale scale={theme.fontSizes} css={{ mb: '$5' }}>
26
- {(value) => <Text css={{ fontSize: value }}>Hello World</Text>}
32
+ <Scale scale={theme.fontSizes} css={{ mb: '$6' }}>
33
+ {(value) => (
34
+ <Text css={{ fontSize: value, whiteSpace: 'nowrap' }}>Hello World</Text>
35
+ )}
27
36
  </Scale>
28
37
 
29
38
  Note that most of our typography components (`Text`, `Heading`, `Label` and others) use [capsize](https://seek-oss.github.io/capsize/) to offset the white-space between the cap-height and the line-height. This means that spacing in and around our text will be tight to the characters.
30
39
 
31
40
  ```jsx preview
32
- <Box css={{ bg: '$tonal100', p: '$4' }}>
41
+ <Box css={{ bg: '$tonal100', p: '$5' }}>
33
42
  <Text size="xl" css={{ bg: 'white' }}>
34
43
  Hello World
35
44
  </Text>
package/lib/assets/logo-light.png ADDED
Binary file
package/lib/assets/logo-light.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="350" height="96" fill="#fff" viewBox="0 0 350 96">
2
- <path d="M234.24 93.45a2.2 2.2 0 01-2.23 2.17h-96.44a2.21 2.21 0 01-2.21-2.21c0-26.7 23.3-48.29 50.44-48.29 27.14 0 50.44 21.46 50.44 48.16v.17zm-9.95-53.35a9.93 9.93 0 100-19.86 9.93 9.93 0 000 19.86zM86.58 93.38a2.23 2.23 0 01-2.23 2.23H2.83A2.23 2.23 0 01.6 93.38c.01-.44.15-.87.39-1.24l40.73-70.9a2.43 2.43 0 011.87-1 2.23 2.23 0 011.84 1l40.76 70.9c.25.37.39.8.39 1.24zM347.36 20.24c-.4 0-.8.14-1.11.39L297.7 56.61c-.33.24-.73.37-1.14.36-.37 0-.73-.1-1.02-.32h-.15l-48.14-35.9a1.9 1.9 0 00-1.06-.36 2.14 2.14 0 00-2.02 2.23v70.79a2.12 2.12 0 002.02 2.2h101.17a2.13 2.13 0 002.04-2.2V22.47a2.16 2.16 0 00-2.04-2.23zM136.07 20.36H124.4a1.12 1.12 0 01-1.1-1.11V2.62a2.23 2.23 0 00-2.25-2.24H98.74a2.23 2.23 0 00-2.23 2.24V93.4a2.23 2.23 0 002.23 2.2h22.3a2.23 2.23 0 002.24-2.2V48.25a1.1 1.1 0 01.31-.78 1.09 1.09 0 01.78-.33h11.7a2.23 2.23 0 002.24-2.24V22.6a2.23 2.23 0 00-2.24-2.24z"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="82" fill="#fff" viewBox="0 0 300 82">
2
+ <path d="M200 80.1a2 2 0 01-.6 1.4 1.9 1.9 0 01-1.3.5H116a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3C114 56.8 134 38 157 38s43 18.7 43 42zM192.5 34a8.5 8.5 0 10-8.5-8.5 8.5 8.5 0 008.5 8.5zM71.8 80.1a2 2 0 01-.5 1.3 1.9 1.9 0 01-1.3.6H1.7a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3 2 2 0 01.4-1l34.3-60.3a2 2 0 01.7-.6 2 2 0 01.8-.2 1.9 1.9 0 011 .2 1.9 1.9 0 01.6.6l33.9 60.3a1.9 1.9 0 01.3 1zM298.3 17a1.6 1.6 0 00-1 .3l-41.5 31a1.5 1.5 0 01-1 .4 1.4 1.4 0 01-.9-.3l-41.3-31a1.6 1.6 0 00-.9-.3 1.8 1.8 0 00-1.2.6 1.9 1.9 0 00-.5 1.4v61a1.8 1.8 0 00.5 1.3 1.8 1.8 0 001.2.6h86.6a1.8 1.8 0 001.2-.6 1.9 1.9 0 00.5-1.3V18.9a1.9 1.9 0 00-.5-1.3 1.8 1.8 0 00-1.2-.6zM115 16h-10a1 1 0 01-1-1V2a2 2 0 000-.8 2 2 0 00-2-1.2H83a2 2 0 00-2 2v78a2 2 0 002 1.9h19a2 2 0 002-1.9V40.9a1 1 0 010-.4 1 1 0 01.9-.6H115a2 2 0 002-1.9V18a2 2 0 00-2-2z"/>
3
3
  </svg>
package/lib/assets/logo-primary.png ADDED
Binary file
package/lib/assets/logo-primary.svg CHANGED
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="350" height="96" fill="#4E8EF7" viewBox="0 0 350 96">
2
- <path d="M234.24 93.45a2.2 2.2 0 01-2.23 2.17h-96.44a2.21 2.21 0 01-2.21-2.21c0-26.7 23.3-48.29 50.44-48.29 27.14 0 50.44 21.46 50.44 48.16v.17zm-9.95-53.35a9.93 9.93 0 100-19.86 9.93 9.93 0 000 19.86zM86.58 93.38a2.23 2.23 0 01-2.23 2.23H2.83A2.23 2.23 0 01.6 93.38c.01-.44.15-.87.39-1.24l40.73-70.9a2.43 2.43 0 011.87-1 2.23 2.23 0 011.84 1l40.76 70.9c.25.37.39.8.39 1.24zM347.36 20.24c-.4 0-.8.14-1.11.39L297.7 56.61c-.33.24-.73.37-1.14.36-.37 0-.73-.1-1.02-.32h-.15l-48.14-35.9a1.9 1.9 0 00-1.06-.36 2.14 2.14 0 00-2.02 2.23v70.79a2.12 2.12 0 002.02 2.2h101.17a2.13 2.13 0 002.04-2.2V22.47a2.16 2.16 0 00-2.04-2.23zM136.07 20.36H124.4a1.12 1.12 0 01-1.1-1.11V2.62a2.23 2.23 0 00-2.25-2.24H98.74a2.23 2.23 0 00-2.23 2.24V93.4a2.23 2.23 0 002.23 2.2h22.3a2.23 2.23 0 002.24-2.2V48.25a1.1 1.1 0 01.31-.78 1.09 1.09 0 01.78-.33h11.7a2.23 2.23 0 002.24-2.24V22.6a2.23 2.23 0 00-2.24-2.24z"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="82" fill="#4E8EF7" viewBox="0 0 300 82">
2
+ <path d="M200 80.1a2 2 0 01-.6 1.4 1.9 1.9 0 01-1.3.5H116a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3C114 56.8 134 38 157 38s43 18.7 43 42zM192.5 34a8.5 8.5 0 10-8.5-8.5 8.5 8.5 0 008.5 8.5zM71.8 80.1a2 2 0 01-.5 1.3 1.9 1.9 0 01-1.3.6H1.7a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3 2 2 0 01.4-1l34.3-60.3a2 2 0 01.7-.6 2 2 0 01.8-.2 1.9 1.9 0 011 .2 1.9 1.9 0 01.6.6l33.9 60.3a1.9 1.9 0 01.3 1zM298.3 17a1.6 1.6 0 00-1 .3l-41.5 31a1.5 1.5 0 01-1 .4 1.4 1.4 0 01-.9-.3l-41.3-31a1.6 1.6 0 00-.9-.3 1.8 1.8 0 00-1.2.6 1.9 1.9 0 00-.5 1.4v61a1.8 1.8 0 00.5 1.3 1.8 1.8 0 001.2.6h86.6a1.8 1.8 0 001.2-.6 1.9 1.9 0 00.5-1.3V18.9a1.9 1.9 0 00-.5-1.3 1.8 1.8 0 00-1.2-.6zM115 16h-10a1 1 0 01-1-1V2a2 2 0 000-.8 2 2 0 00-2-1.2H83a2 2 0 00-2 2v78a2 2 0 002 1.9h19a2 2 0 002-1.9V40.9a1 1 0 010-.4 1 1 0 01.9-.6H115a2 2 0 002-1.9V18a2 2 0 00-2-2z"/>
3
3
  </svg>
package/lib/assets/logo.png ADDED
Binary file
package/lib/assets/logo.svg CHANGED
@@ -1,6 +1,6 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="350" height="96" fill="none" viewBox="0 0 350 96">
2
- <path fill="#F74E4E" d="M234.24 93.45a2.2 2.2 0 01-2.23 2.17h-96.44a2.21 2.21 0 01-2.21-2.21c0-26.7 23.3-48.29 50.44-48.29 27.14 0 50.44 21.46 50.44 48.16v.17zm-9.95-53.35a9.93 9.93 0 100-19.86 9.93 9.93 0 000 19.86z"/>
3
- <path fill="#FFB71B" d="M86.58 93.38a2.23 2.23 0 01-2.23 2.23H2.83A2.23 2.23 0 01.6 93.38c.01-.44.15-.87.39-1.24l40.73-70.9a2.43 2.43 0 011.87-1 2.23 2.23 0 011.84 1l40.76 70.9c.25.37.39.8.39 1.24z"/>
4
- <path fill="#4FBF5E" d="M347.36 20.24c-.4 0-.8.14-1.11.39L297.7 56.61c-.33.24-.73.37-1.14.36-.37 0-.73-.1-1.02-.32h-.15l-48.14-35.9a1.9 1.9 0 00-1.06-.36 2.14 2.14 0 00-2.02 2.23v70.79a2.12 2.12 0 002.02 2.2h101.17a2.13 2.13 0 002.04-2.2V22.47a2.16 2.16 0 00-2.04-2.23z"/>
5
- <path fill="#71C5FF" d="M136.07 20.36H124.4a1.12 1.12 0 01-1.1-1.11V2.62a2.23 2.23 0 00-2.25-2.24H98.74a2.23 2.23 0 00-2.23 2.24V93.4a2.23 2.23 0 002.23 2.2h22.3a2.23 2.23 0 002.24-2.2V48.25a1.1 1.1 0 01.31-.78 1.09 1.09 0 01.78-.33h11.7a2.23 2.23 0 002.24-2.24V22.6a2.23 2.23 0 00-2.24-2.24z"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="300" height="82" fill="none" viewBox="0 0 300 82">
2
+ <path fill="#f74e4e" d="M200 80.1a2 2 0 01-.6 1.4 1.9 1.9 0 01-1.3.5H116a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3C114 56.8 134 38 157 38s43 18.7 43 42zM192.5 34a8.5 8.5 0 10-8.5-8.5 8.5 8.5 0 008.5 8.5z"/>
3
+ <path fill="#ffb71b" d="M71.8 80.1a2 2 0 01-.5 1.3 1.9 1.9 0 01-1.3.6H1.7a1.9 1.9 0 01-1.3-.6 2 2 0 01-.6-1.3 2 2 0 01.4-1l34.3-60.3a2 2 0 01.7-.6 2 2 0 01.8-.2 1.9 1.9 0 011 .2 1.9 1.9 0 01.6.6l33.9 60.3a1.9 1.9 0 01.3 1z"/>
4
+ <path fill="#4fbf5e" d="M298.3 17a1.6 1.6 0 00-1 .3l-41.5 31a1.5 1.5 0 01-1 .4 1.4 1.4 0 01-.9-.3l-41.3-31a1.6 1.6 0 00-.9-.3 1.8 1.8 0 00-1.2.6 1.9 1.9 0 00-.5 1.4v61a1.8 1.8 0 00.5 1.3 1.8 1.8 0 001.2.6h86.6a1.8 1.8 0 001.2-.6 1.9 1.9 0 00.5-1.3V18.9a1.9 1.9 0 00-.5-1.3 1.8 1.8 0 00-1.2-.6z"/>
5
+ <path fill="#71c5ff" d="M115 16H105a1 1 0 01-1-1V2a2 2 0 000-.8A2 2 0 00102 0H83a2 2 0 00-2 2V80a2 2 0 002 1.9h19a2 2 0 002-1.9V40.9a1 1 0 010-.4 1 1 0 01.9-.6H115a2 2 0 002-1.9V18a2 2 0 00-2-2z"/>
6
6
  </svg>
package/lib/index.d.ts CHANGED
@@ -1,87 +1,105 @@
1
- export interface Theme {
1
+ export type Theme = {
2
2
  "colors": {
3
- "tonal50": "#f5f5f5",
4
- "tonal100": "#ededed",
5
- "tonal200": "#e3e3e3",
6
- "tonal300": "#cccccc",
7
- "tonal400": "#b0b0b0",
8
- "tonal500": "#757575",
9
- "tonal600": "#545454",
10
- "tonal700": "#333333",
11
- "tonal800": "#1f1f1f",
12
- "tonal900": "#141414",
13
- "alpha100": "#333333",
14
- "alpha150": "#333333",
15
- "alpha200": "#333333",
16
- "alpha250": "#333333",
17
- "alpha600": "#333333",
18
- "primary": "#1e71f6",
19
- "secondary": "#70c6ff",
20
- "tertiary": "#102da2",
21
- "success": "#028a00",
22
- "successDark": "#00660a",
23
- "danger": "#f61e1e",
24
- "dangerDark": "#ae0a0a",
25
- "warning": "#ffb61a",
26
- "warningDark": "#e7a20d",
27
- "subjectEnglish": "#f74e4e",
28
- "subjectMaths": "#1d6ff5",
29
- "subjectScience": "#7f5edd",
30
- "subjectVr": "#4fbf5e",
31
- "subjectNvr": "#ffb71b",
32
- "subjectCw": "#ff7518",
33
- "subjectEs": "#9954bb"
3
+ "textForeground": string
4
+ "textSubtle": string
5
+ "textPlaceholder": string
6
+ "background": string
7
+ "backgroundAccent": string
8
+ "tonal50": string
9
+ "tonal100": string
10
+ "tonal200": string
11
+ "tonal300": string
12
+ "tonal400": string
13
+ "tonal500": string
14
+ "tonal600": string
15
+ "alpha100": string
16
+ "alpha150": string
17
+ "alpha200": string
18
+ "alpha250": string
19
+ "alpha600": string
20
+ "primaryLight": string
21
+ "primary": string
22
+ "primaryMid": string
23
+ "primaryDark": string
24
+ "secondary": string
25
+ "brandRed": string
26
+ "brandRedAccent": string
27
+ "brandGreen": string
28
+ "brandGreenAccent": string
29
+ "brandPurple": string
30
+ "brandPurpleAccent": string
31
+ "brandYellow": string
32
+ "brandYellowAccent": string
33
+ "successLight": string
34
+ "success": string
35
+ "successMid": string
36
+ "successDark": string
37
+ "dangerLight": string
38
+ "danger": string
39
+ "dangerMid": string
40
+ "dangerDark": string
41
+ "warningLight": string
42
+ "warning": string
43
+ "warningMid": string
44
+ "warningDark": string
45
+ "subjectEnglish": string
46
+ "subjectMaths": string
47
+ "subjectScience": string
48
+ "subjectVerbalReasoning": string
49
+ "subjectNonVerbalReasoning": string
50
+ "subjectCreativeWriting": string
51
+ "subjectExamSkills": string
34
52
  },
35
53
  "space": {
36
- "0": "0.125rem",
37
- "1": "0.25rem",
38
- "2": "0.5rem",
39
- "3": "0.75rem",
40
- "4": "1rem",
41
- "5": "2rem",
42
- "6": "2.5rem",
43
- "7": "3rem",
44
- "8": "4rem",
45
- "9": "5rem"
54
+ "0": string
55
+ "1": string
56
+ "2": string
57
+ "3": string
58
+ "4": string
59
+ "5": string
60
+ "6": string
61
+ "7": string
62
+ "8": string
63
+ "9": string
46
64
  },
47
65
  "fontSizes": {
48
- "xs": "0.625rem",
49
- "sm": "0.8125rem",
50
- "md": "1rem",
51
- "lg": "1.3125rem",
52
- "xl": "1.75rem",
53
- "2xl": "2.3125rem",
54
- "3xl": "3.125rem",
55
- "4xl": "5.625rem"
66
+ "xs": string
67
+ "sm": string
68
+ "md": string
69
+ "lg": string
70
+ "xl": string
71
+ "2xl": string
72
+ "3xl": string
73
+ "4xl": string
56
74
  },
57
75
  "fonts": {
58
- "sans": "system-ui, -apple-system, 'Helvetica Neue', sans-serif",
59
- "mono": "'SFMono-Regular', Consolas, Menlo, monospace",
60
- "display": "'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif",
61
- "body": "'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif"
76
+ "sans": string
77
+ "mono": string
78
+ "display": string
79
+ "body": string
62
80
  },
63
81
  "sizes": {
64
- "0": "0.5rem",
65
- "1": "1rem",
66
- "2": "1.5rem",
67
- "3": "2rem",
68
- "4": "2.5rem",
69
- "5": "3rem",
70
- "6": "4rem",
71
- "7": "6rem",
72
- "8": "8rem"
82
+ "0": string
83
+ "1": string
84
+ "2": string
85
+ "3": string
86
+ "4": string
87
+ "5": string
88
+ "6": string
89
+ "7": string
90
+ "8": string
73
91
  },
74
92
  "radii": {
75
- "0": "0.25rem",
76
- "1": "0.5rem",
77
- "2": "0.75rem",
78
- "3": "1rem",
79
- "round": "50rem"
93
+ "0": string
94
+ "1": string
95
+ "2": string
96
+ "3": string
97
+ "round": string
80
98
  },
81
99
  "shadows": {
82
- "0": "0 1px 3px #333333, 0 1px 2px #333333",
83
- "1": "0 3px 6px #333333, 0 3px 6px #333333",
84
- "2": "0 10px 20px #333333, 0 6px 6px #333333",
85
- "3": "0 14px 28px #333333, 0 10px 10px #333333"
100
+ "0": string
101
+ "1": string
102
+ "2": string
103
+ "3": string
86
104
  }
87
105
  }
package/lib/index.js CHANGED
@@ -1,36 +1,54 @@
1
1
  module.exports = {
2
2
  "colors": {
3
+ "textForeground": "hsl(0, 0%, 12%)",
4
+ "textSubtle": "hsl(0, 0%, 33%)",
5
+ "textPlaceholder": "hsl(0, 0%, 46%)",
6
+ "background": "hsl(0, 0%, 96%)",
7
+ "backgroundAccent": "hsl(217, 92%, 97%)",
3
8
  "tonal50": "hsl(0, 0%, 96%)",
4
9
  "tonal100": "hsl(0, 0%, 93%)",
5
- "tonal200": "hsl(0, 0%, 89%)",
6
- "tonal300": "hsl(0, 0%, 80%)",
7
- "tonal400": "hsl(0, 0%, 69%)",
8
- "tonal500": "hsl(0, 0%, 46%)",
9
- "tonal600": "hsl(0, 0%, 33%)",
10
- "tonal700": "hsl(0, 0%, 20%)",
11
- "tonal800": "hsl(0, 0%, 12%)",
12
- "tonal900": "hsl(0, 0%, 8%)",
10
+ "tonal200": "hsl(0, 0%, 69%)",
11
+ "tonal300": "hsl(0, 0%, 46%)",
12
+ "tonal400": "hsl(0, 0%, 33%)",
13
+ "tonal500": "hsl(0, 0%, 20%)",
14
+ "tonal600": "hsl(0, 0%, 12%)",
13
15
  "alpha100": "hsla(0, 0%, 20%, 0.1)",
14
16
  "alpha150": "hsla(0, 0%, 20%, 0.15)",
15
17
  "alpha200": "hsla(0, 0%, 20%, 0.2)",
16
18
  "alpha250": "hsla(0, 0%, 20%, 0.25)",
17
19
  "alpha600": "hsla(0, 0%, 20%, 0.6)",
20
+ "primaryLight": "hsl(217, 92%, 97%)",
18
21
  "primary": "hsl(217, 92%, 54%)",
22
+ "primaryMid": "hsl(223, 78%, 45%)",
23
+ "primaryDark": "hsl(228, 82%, 35%)",
19
24
  "secondary": "hsl(204, 100%, 72%)",
20
- "tertiary": "hsl(228, 82%, 35%)",
25
+ "brandRed": "hsl(0, 91%, 64%)",
26
+ "brandRedAccent": "hsl(14, 100%, 71%)",
27
+ "brandGreen": "hsl(128, 47%, 53%)",
28
+ "brandGreenAccent": "hsl(168, 100%, 20%)",
29
+ "brandPurple": "hsl(256, 65%, 62%)",
30
+ "brandPurpleAccent": "hsl(256, 93%, 35%)",
31
+ "brandYellow": "hsl(41, 100%, 55%)",
32
+ "brandYellowAccent": "hsl(33, 100%, 50%)",
33
+ "successLight": "hsl(119, 44%, 94%)",
21
34
  "success": "hsl(119, 100%, 27%)",
22
- "successDark": "hsl(126, 100%, 20%)",
23
- "danger": "hsl(0, 92%, 54%)",
24
- "dangerDark": "hsl(0, 89%, 36%)",
35
+ "successMid": "hsl(124, 100%, 22%)",
36
+ "successDark": "hsl(126, 100%, 17%)",
37
+ "dangerLight": "hsl(0, 77%, 95%)",
38
+ "danger": "hsl(0, 96%, 48%)",
39
+ "dangerMid": "hsl(0, 96%, 41%)",
40
+ "dangerDark": "hsl(0, 97%, 34%)",
41
+ "warningLight": "hsl(39, 100%, 94%)",
25
42
  "warning": "hsl(41, 100%, 55%)",
26
- "warningDark": "hsl(41, 89%, 48%)",
43
+ "warningMid": "hsl(41, 89%, 48%)",
44
+ "warningDark": "hsl(41, 100%, 41%)",
27
45
  "subjectEnglish": "hsl(0, 91%, 64%)",
28
46
  "subjectMaths": "hsl(217, 92%, 54%)",
29
47
  "subjectScience": "hsl(256, 65%, 62%)",
30
- "subjectVr": "hsl(128, 47%, 53%)",
31
- "subjectNvr": "hsl(41, 100%, 55%)",
32
- "subjectCw": "hsl(24, 100%, 55%)",
33
- "subjectEs": "hsl(280, 43%, 53%)"
48
+ "subjectVerbalReasoning": "hsl(128, 47%, 53%)",
49
+ "subjectNonVerbalReasoning": "hsl(41, 100%, 55%)",
50
+ "subjectCreativeWriting": "hsl(33, 100%, 50%)",
51
+ "subjectExamSkills": "hsl(256, 93%, 35%)"
34
52
  },
35
53
  "space": {
36
54
  "0": "0.125rem",
@@ -45,8 +63,8 @@ module.exports = {
45
63
  "9": "5rem"
46
64
  },
47
65
  "fontSizes": {
48
- "xs": "0.625rem",
49
- "sm": "0.8125rem",
66
+ "xs": "0.75rem",
67
+ "sm": "0.875rem",
50
68
  "md": "1rem",
51
69
  "lg": "1.3125rem",
52
70
  "xl": "1.75rem",
@@ -76,7 +94,7 @@ module.exports = {
76
94
  "1": "0.5rem",
77
95
  "2": "0.75rem",
78
96
  "3": "1rem",
79
- "round": "50rem"
97
+ "round": "100rem"
80
98
  },
81
99
  "shadows": {
82
100
  "0": "0 1px 3px hsla(0, 0%, 20%, 0.15), 0 1px 2px hsla(0, 0%, 20%, 0.2)",
package/lib/index.scss CHANGED
@@ -1,38 +1,56 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 07 Jul 2021 12:43:04 GMT
3
+ // Generated on Tue, 30 Nov 2021 11:41:11 GMT
4
4
 
5
+ $color-text-foreground: #1f1f1f;
6
+ $color-text-subtle: #545454;
7
+ $color-text-placeholder: #757575;
8
+ $color-background-base: #f5f5f5;
9
+ $color-background-accent: #f0f6fe;
5
10
  $color-tonal-50: #f5f5f5;
6
11
  $color-tonal-100: #ededed;
7
- $color-tonal-200: #e3e3e3;
8
- $color-tonal-300: #cccccc;
9
- $color-tonal-400: #b0b0b0;
10
- $color-tonal-500: #757575;
11
- $color-tonal-600: #545454;
12
- $color-tonal-700: #333333;
13
- $color-tonal-800: #1f1f1f;
14
- $color-tonal-900: #141414;
12
+ $color-tonal-200: #b0b0b0;
13
+ $color-tonal-300: #757575;
14
+ $color-tonal-400: #545454;
15
+ $color-tonal-500: #333333;
16
+ $color-tonal-600: #1f1f1f;
15
17
  $color-alpha-100: rgba(51, 51, 51, 0.1);
16
18
  $color-alpha-150: rgba(51, 51, 51, 0.15);
17
19
  $color-alpha-200: rgba(51, 51, 51, 0.2);
18
20
  $color-alpha-250: rgba(51, 51, 51, 0.25);
19
21
  $color-alpha-600: rgba(51, 51, 51, 0.6);
20
- $color-primary: #1e71f6;
22
+ $color-primary-light: #f0f6fe;
23
+ $color-primary-base: #1e71f6;
24
+ $color-primary-mid: #194ccc;
25
+ $color-primary-dark: #102da2;
21
26
  $color-secondary: #70c6ff;
22
- $color-tertiary: #102da2;
27
+ $color-brand-red-base: #f75050;
28
+ $color-brand-red-accent: #ff8e6b;
29
+ $color-brand-green-base: #4fbf5e;
30
+ $color-brand-green-accent: #006652;
31
+ $color-brand-purple-base: #815fdd;
32
+ $color-brand-purple-accent: #3306ac;
33
+ $color-brand-yellow-base: #ffb61a;
34
+ $color-brand-yellow-accent: #ff8c00;
35
+ $color-success-light: #e9f6e9;
23
36
  $color-success-base: #028a00;
24
- $color-success-dark: #00660a;
25
- $color-danger-base: #f61e1e;
26
- $color-danger-dark: #ae0a0a;
37
+ $color-success-mid: #007007;
38
+ $color-success-dark: #005709;
39
+ $color-danger-light: #fce8e8;
40
+ $color-danger-base: #f00505;
41
+ $color-danger-mid: #cd0404;
42
+ $color-danger-dark: #ab0303;
43
+ $color-warning-light: #fff4e0;
27
44
  $color-warning-base: #ffb61a;
28
- $color-warning-dark: #e7a20d;
29
- $color-subject-english: #f74e4e;
30
- $color-subject-maths: #1d6ff5;
31
- $color-subject-science: #7f5edd;
32
- $color-subject-vr: #4fbf5e;
33
- $color-subject-nvr: #ffb71b;
34
- $color-subject-cw: #ff7518;
35
- $color-subject-es: #9954bb;
45
+ $color-warning-mid: #e7a20d;
46
+ $color-warning-dark: #d18f00;
47
+ $color-subject-english: #f75050;
48
+ $color-subject-maths: #1e71f6;
49
+ $color-subject-science: #815fdd;
50
+ $color-subject-verbal-reasoning: #4fbf5e;
51
+ $color-subject-non-verbal-reasoning: #ffb61a;
52
+ $color-subject-creative-writing: #ff8c00;
53
+ $color-subject-exam-skills: #3306ac;
36
54
  $font-families-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
37
55
  $font-families-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
38
56
  $font-families-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -45,8 +63,8 @@ $effects-shadows: (
45
63
  3: (0 14px 28px rgba(51, 51, 51, 0.25), 0 10px 10px rgba(51, 51, 51, 0.2))
46
64
  );
47
65
  $size-font: (
48
- xs: 10px,
49
- sm: 13px,
66
+ xs: 12px,
67
+ sm: 14px,
50
68
  md: 16px,
51
69
  lg: 21px,
52
70
  xl: 28px,
@@ -82,5 +100,5 @@ $size-radii: (
82
100
  1: 8px,
83
101
  2: 12px,
84
102
  3: 16px,
85
- round: 800px
103
+ round: 1600px
86
104
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atom-learning/theme",
3
- "version": "1.0.0-beta.4",
4
- "description": "",
3
+ "version": "1.0.1",
4
+ "description": "Design tokens and assets for Atom Learning",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
7
7
  "scripts": {
@@ -18,7 +18,8 @@
18
18
  "devDependencies": {
19
19
  "del-cli": "^3.0.1",
20
20
  "npm-run-all": "^4.1.5",
21
- "style-dictionary": "^3.0.0-rc.6"
21
+ "pascal-case": "^3.1.2",
22
+ "style-dictionary": "^3.0.1"
22
23
  },
23
24
  "dependencies": {}
24
25
  }