@atom-learning/theme 1.0.0-beta.6 → 1.1.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.
Files changed (9) 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-primary.png +0 -0
  5. package/lib/assets/logo.png +0 -0
  6. package/lib/index.d.ts +91 -73
  7. package/lib/index.js +40 -22
  8. package/lib/index.scss +42 -24
  9. 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-primary.png ADDED
Binary file
package/lib/assets/logo.png ADDED
Binary file
package/lib/index.d.ts CHANGED
@@ -1,88 +1,106 @@
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
- "primaryLight": "#f0f6fe",
19
- "primary": "#1e71f6",
20
- "secondary": "#70c6ff",
21
- "tertiary": "#102da2",
22
- "success": "#028a00",
23
- "successDark": "#00660a",
24
- "danger": "#f61e1e",
25
- "dangerDark": "#ae0a0a",
26
- "warning": "#ffb61a",
27
- "warningDark": "#e7a20d",
28
- "subjectEnglish": "#f74e4e",
29
- "subjectMaths": "#1d6ff5",
30
- "subjectScience": "#7f5edd",
31
- "subjectVerbal-reasoning": "#4fbf5e",
32
- "subjectNon-verbal-reasoning": "#ffb71b",
33
- "subjectCreative-writing": "#ff7518",
34
- "subjectExam-skills": "#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
+ "warningText": string
46
+ "subjectEnglish": string
47
+ "subjectMaths": string
48
+ "subjectScience": string
49
+ "subjectVerbalReasoning": string
50
+ "subjectNonVerbalReasoning": string
51
+ "subjectCreativeWriting": string
52
+ "subjectExamSkills": string
35
53
  },
36
54
  "space": {
37
- "0": "0.125rem",
38
- "1": "0.25rem",
39
- "2": "0.5rem",
40
- "3": "0.75rem",
41
- "4": "1rem",
42
- "5": "2rem",
43
- "6": "2.5rem",
44
- "7": "3rem",
45
- "8": "4rem",
46
- "9": "5rem"
55
+ "0": string
56
+ "1": string
57
+ "2": string
58
+ "3": string
59
+ "4": string
60
+ "5": string
61
+ "6": string
62
+ "7": string
63
+ "8": string
64
+ "9": string
47
65
  },
48
66
  "fontSizes": {
49
- "xs": "0.625rem",
50
- "sm": "0.8125rem",
51
- "md": "1rem",
52
- "lg": "1.3125rem",
53
- "xl": "1.75rem",
54
- "2xl": "2.3125rem",
55
- "3xl": "3.125rem",
56
- "4xl": "5.625rem"
67
+ "xs": string
68
+ "sm": string
69
+ "md": string
70
+ "lg": string
71
+ "xl": string
72
+ "2xl": string
73
+ "3xl": string
74
+ "4xl": string
57
75
  },
58
76
  "fonts": {
59
- "sans": "system-ui, -apple-system, 'Helvetica Neue', sans-serif",
60
- "mono": "'SFMono-Regular', Consolas, Menlo, monospace",
61
- "display": "'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif",
62
- "body": "'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif"
77
+ "sans": string
78
+ "mono": string
79
+ "display": string
80
+ "body": string
63
81
  },
64
82
  "sizes": {
65
- "0": "0.5rem",
66
- "1": "1rem",
67
- "2": "1.5rem",
68
- "3": "2rem",
69
- "4": "2.5rem",
70
- "5": "3rem",
71
- "6": "4rem",
72
- "7": "6rem",
73
- "8": "8rem"
83
+ "0": string
84
+ "1": string
85
+ "2": string
86
+ "3": string
87
+ "4": string
88
+ "5": string
89
+ "6": string
90
+ "7": string
91
+ "8": string
74
92
  },
75
93
  "radii": {
76
- "0": "0.25rem",
77
- "1": "0.5rem",
78
- "2": "0.75rem",
79
- "3": "1rem",
80
- "round": "50rem"
94
+ "0": string
95
+ "1": string
96
+ "2": string
97
+ "3": string
98
+ "round": string
81
99
  },
82
100
  "shadows": {
83
- "0": "0 1px 3px #333333, 0 1px 2px #333333",
84
- "1": "0 3px 6px #333333, 0 3px 6px #333333",
85
- "2": "0 10px 20px #333333, 0 6px 6px #333333",
86
- "3": "0 14px 28px #333333, 0 10px 10px #333333"
101
+ "0": string
102
+ "1": string
103
+ "2": string
104
+ "3": string
87
105
  }
88
106
  }
package/lib/index.js CHANGED
@@ -1,37 +1,55 @@
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)",
18
20
  "primaryLight": "hsl(217, 92%, 97%)",
19
- "primary": "hsl(217, 92%, 54%)",
21
+ "primary": "hsl(217, 92%, 51%)",
22
+ "primaryMid": "hsl(223, 78%, 45%)",
23
+ "primaryDark": "hsl(228, 82%, 35%)",
20
24
  "secondary": "hsl(204, 100%, 72%)",
21
- "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%)",
22
34
  "success": "hsl(119, 100%, 27%)",
23
- "successDark": "hsl(126, 100%, 20%)",
24
- "danger": "hsl(0, 92%, 54%)",
25
- "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%)",
26
42
  "warning": "hsl(41, 100%, 55%)",
27
- "warningDark": "hsl(41, 89%, 48%)",
43
+ "warningMid": "hsl(41, 89%, 48%)",
44
+ "warningDark": "hsl(41, 100%, 41%)",
45
+ "warningText": "hsl(24, 100%, 37%)",
28
46
  "subjectEnglish": "hsl(0, 91%, 64%)",
29
- "subjectMaths": "hsl(217, 92%, 54%)",
47
+ "subjectMaths": "hsl(217, 92%, 51%)",
30
48
  "subjectScience": "hsl(256, 65%, 62%)",
31
- "subjectVerbal-reasoning": "hsl(128, 47%, 53%)",
32
- "subjectNon-verbal-reasoning": "hsl(41, 100%, 55%)",
33
- "subjectCreative-writing": "hsl(24, 100%, 55%)",
34
- "subjectExam-skills": "hsl(280, 43%, 53%)"
49
+ "subjectVerbalReasoning": "hsl(128, 47%, 53%)",
50
+ "subjectNonVerbalReasoning": "hsl(41, 100%, 55%)",
51
+ "subjectCreativeWriting": "hsl(33, 100%, 50%)",
52
+ "subjectExamSkills": "hsl(256, 93%, 35%)"
35
53
  },
36
54
  "space": {
37
55
  "0": "0.125rem",
@@ -46,8 +64,8 @@ module.exports = {
46
64
  "9": "5rem"
47
65
  },
48
66
  "fontSizes": {
49
- "xs": "0.625rem",
50
- "sm": "0.8125rem",
67
+ "xs": "0.75rem",
68
+ "sm": "0.875rem",
51
69
  "md": "1rem",
52
70
  "lg": "1.3125rem",
53
71
  "xl": "1.75rem",
@@ -77,7 +95,7 @@ module.exports = {
77
95
  "1": "0.5rem",
78
96
  "2": "0.75rem",
79
97
  "3": "1rem",
80
- "round": "50rem"
98
+ "round": "100rem"
81
99
  },
82
100
  "shadows": {
83
101
  "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,39 +1,57 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 26 Jul 2021 12:56:52 GMT
3
+ // Generated on Fri, 24 Jun 2022 15:19:49 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
22
  $color-primary-light: #f0f6fe;
21
- $color-primary-base: #1e71f6;
23
+ $color-primary-base: #0f67f5;
24
+ $color-primary-mid: #194ccc;
25
+ $color-primary-dark: #102da2;
22
26
  $color-secondary: #70c6ff;
23
- $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;
24
36
  $color-success-base: #028a00;
25
- $color-success-dark: #00660a;
26
- $color-danger-base: #f61e1e;
27
- $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;
28
44
  $color-warning-base: #ffb61a;
29
- $color-warning-dark: #e7a20d;
30
- $color-subject-english: #f74e4e;
31
- $color-subject-maths: #1d6ff5;
32
- $color-subject-science: #7f5edd;
45
+ $color-warning-mid: #e7a20d;
46
+ $color-warning-dark: #d18f00;
47
+ $color-warning-text: #bd4b00;
48
+ $color-subject-english: #f75050;
49
+ $color-subject-maths: #0f67f5;
50
+ $color-subject-science: #815fdd;
33
51
  $color-subject-verbal-reasoning: #4fbf5e;
34
- $color-subject-non-verbal-reasoning: #ffb71b;
35
- $color-subject-creative-writing: #ff7518;
36
- $color-subject-exam-skills: #9954bb;
52
+ $color-subject-non-verbal-reasoning: #ffb61a;
53
+ $color-subject-creative-writing: #ff8c00;
54
+ $color-subject-exam-skills: #3306ac;
37
55
  $font-families-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
38
56
  $font-families-mono: 'SFMono-Regular', Consolas, Menlo, monospace;
39
57
  $font-families-display: 'Space Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
@@ -46,8 +64,8 @@ $effects-shadows: (
46
64
  3: (0 14px 28px rgba(51, 51, 51, 0.25), 0 10px 10px rgba(51, 51, 51, 0.2))
47
65
  );
48
66
  $size-font: (
49
- xs: 10px,
50
- sm: 13px,
67
+ xs: 12px,
68
+ sm: 14px,
51
69
  md: 16px,
52
70
  lg: 21px,
53
71
  xl: 28px,
@@ -83,5 +101,5 @@ $size-radii: (
83
101
  1: 8px,
84
102
  2: 12px,
85
103
  3: 16px,
86
- round: 800px
104
+ round: 1600px
87
105
  );
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@atom-learning/theme",
3
- "version": "1.0.0-beta.6",
4
- "description": "",
3
+ "version": "1.1.0",
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
  }