@guardian/stand 0.0.6 → 0.0.8

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 (45) hide show
  1. package/README.md +272 -27
  2. package/dist/fonts/OpenSans.css +327 -0
  3. package/dist/index.cjs +10 -1
  4. package/dist/index.js +5 -1
  5. package/dist/styleD/build/css/css/base/colors.css +3 -3
  6. package/dist/styleD/build/css/css/base/radius.css +12 -0
  7. package/dist/styleD/build/css/css/base/sizing.css +22 -0
  8. package/dist/styleD/build/css/css/base/spacing.css +36 -0
  9. package/dist/styleD/build/css/css/base/typography.css +16 -1
  10. package/dist/styleD/build/css/css/semantic/colors.css +10 -8
  11. package/dist/styleD/build/css/css/semantic/sizing.css +14 -0
  12. package/dist/styleD/build/css/css/semantic/typography.css +83 -76
  13. package/dist/styleD/build/typescript/base/colors.cjs +3 -3
  14. package/dist/styleD/build/typescript/base/colors.js +3 -3
  15. package/dist/styleD/build/typescript/base/radius.cjs +12 -0
  16. package/dist/styleD/build/typescript/base/radius.js +10 -0
  17. package/dist/styleD/build/typescript/base/sizing.cjs +22 -0
  18. package/dist/styleD/build/typescript/base/sizing.js +20 -0
  19. package/dist/styleD/build/typescript/base/spacing.cjs +36 -0
  20. package/dist/styleD/build/typescript/base/spacing.js +34 -0
  21. package/dist/styleD/build/typescript/base/typography.cjs +20 -5
  22. package/dist/styleD/build/typescript/base/typography.js +20 -5
  23. package/dist/styleD/build/typescript/semantic/colors.cjs +14 -12
  24. package/dist/styleD/build/typescript/semantic/colors.js +14 -12
  25. package/dist/styleD/build/typescript/semantic/sizing.cjs +20 -0
  26. package/dist/styleD/build/typescript/semantic/sizing.js +18 -0
  27. package/dist/styleD/build/typescript/semantic/typography.cjs +76 -342
  28. package/dist/styleD/build/typescript/semantic/typography.js +76 -342
  29. package/dist/styleD/utils/semantic/typography.cjs +11 -7
  30. package/dist/styleD/utils/semantic/typography.js +10 -7
  31. package/dist/types/index.d.ts +9 -1
  32. package/dist/types/styleD/build/typescript/base/colors.d.ts +3 -3
  33. package/dist/types/styleD/build/typescript/base/radius.d.ts +12 -0
  34. package/dist/types/styleD/build/typescript/base/sizing.d.ts +22 -0
  35. package/dist/types/styleD/build/typescript/base/spacing.d.ts +36 -0
  36. package/dist/types/styleD/build/typescript/base/typography.d.ts +18 -3
  37. package/dist/types/styleD/build/typescript/semantic/colors.d.ts +11 -9
  38. package/dist/types/styleD/build/typescript/semantic/sizing.d.ts +20 -0
  39. package/dist/types/styleD/build/typescript/semantic/typography.d.ts +38 -304
  40. package/dist/types/styleD/stories/base/Radius.d.ts +1 -0
  41. package/dist/types/styleD/stories/base/Sizing.d.ts +1 -0
  42. package/dist/types/styleD/stories/base/Spacing.d.ts +1 -0
  43. package/dist/types/styleD/stories/semantic/Sizing.d.ts +1 -0
  44. package/dist/types/styleD/utils/semantic/typography.d.ts +4 -10
  45. package/package.json +13 -7
@@ -3,136 +3,143 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --semantic-typography-title-sm-font: normal 700 18px/1.15
6
+ --semantic-typography-title-sm-font: normal 700 1.125rem/1.15
7
7
  'GH Guardian Headline';
8
- --semantic-typography-title-sm-letter-spacing: 0px;
8
+ --semantic-typography-title-sm-letter-spacing: 0rem;
9
9
  --semantic-typography-title-sm-font-width: 100;
10
- --semantic-typography-title-md-font: normal 700 20px/1.15
10
+ --semantic-typography-title-md-font: normal 700 1.25rem/1.15
11
11
  'GH Guardian Headline';
12
- --semantic-typography-title-md-letter-spacing: 0px;
12
+ --semantic-typography-title-md-letter-spacing: 0rem;
13
13
  --semantic-typography-title-md-font-width: 100;
14
- --semantic-typography-title-lg-font: normal 700 24px/1.15
14
+ --semantic-typography-title-lg-font: normal 700 1.5rem/1.15
15
15
  'GH Guardian Headline';
16
- --semantic-typography-title-lg-letter-spacing: 0px;
16
+ --semantic-typography-title-lg-letter-spacing: 0rem;
17
17
  --semantic-typography-title-lg-font-width: 100;
18
- --semantic-typography-title-xl-font: normal 700 32px/1.15
18
+ --semantic-typography-title-xl-font: normal 700 2rem/1.15
19
19
  'GH Guardian Headline';
20
- --semantic-typography-title-xl-letter-spacing: 0px;
20
+ --semantic-typography-title-xl-letter-spacing: 0rem;
21
21
  --semantic-typography-title-xl-font-width: 100;
22
- --semantic-typography-heading-xs-font: normal 700 12px/1.15 'Open Sans';
23
- --semantic-typography-heading-xs-letter-spacing: 0px;
22
+ --semantic-typography-heading-xs-font: normal 700 0.75rem/1.15 'Open Sans';
23
+ --semantic-typography-heading-xs-letter-spacing: 0rem;
24
24
  --semantic-typography-heading-xs-font-width: 95;
25
- --semantic-typography-heading-sm-font: normal 700 14px/1.15 'Open Sans';
26
- --semantic-typography-heading-sm-letter-spacing: -0.2px;
25
+ --semantic-typography-heading-sm-font: normal 700 0.875rem/1.15 'Open Sans';
26
+ --semantic-typography-heading-sm-letter-spacing: -0.0125rem;
27
27
  --semantic-typography-heading-sm-font-width: 95;
28
- --semantic-typography-heading-md-font: normal 700 16px/1.15 'Open Sans';
29
- --semantic-typography-heading-md-letter-spacing: -0.5px;
28
+ --semantic-typography-heading-md-font: normal 700 1rem/1.15 'Open Sans';
29
+ --semantic-typography-heading-md-letter-spacing: -0.03125rem;
30
30
  --semantic-typography-heading-md-font-width: 95;
31
- --semantic-typography-heading-lg-font: normal 700 18px/1.15 'Open Sans';
32
- --semantic-typography-heading-lg-letter-spacing: -0.5px;
31
+ --semantic-typography-heading-lg-font: normal 700 1.125rem/1.15 'Open Sans';
32
+ --semantic-typography-heading-lg-letter-spacing: -0.03125rem;
33
33
  --semantic-typography-heading-lg-font-width: 95;
34
- --semantic-typography-heading-xl-font: normal 700 20px/1.15 'Open Sans';
35
- --semantic-typography-heading-xl-letter-spacing: -0.5px;
34
+ --semantic-typography-heading-xl-font: normal 700 1.25rem/1.15 'Open Sans';
35
+ --semantic-typography-heading-xl-letter-spacing: -0.03125rem;
36
36
  --semantic-typography-heading-xl-font-width: 95;
37
- --semantic-typography-heading-2xl-font: normal 700 24px/1.15 'Open Sans';
38
- --semantic-typography-heading-2xl-letter-spacing: -1px;
37
+ --semantic-typography-heading-2xl-font: normal 700 1.5rem/1.15 'Open Sans';
38
+ --semantic-typography-heading-2xl-letter-spacing: -0.0625rem;
39
39
  --semantic-typography-heading-2xl-font-width: 95;
40
- --semantic-typography-heading-compact-xs-font: normal 700 12px/1.15
40
+ --semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
41
41
  'Open Sans';
42
- --semantic-typography-heading-compact-xs-letter-spacing: 0px;
42
+ --semantic-typography-heading-compact-xs-letter-spacing: 0rem;
43
43
  --semantic-typography-heading-compact-xs-font-width: 88;
44
- --semantic-typography-heading-compact-sm-font: normal 700 14px/1.15
44
+ --semantic-typography-heading-compact-sm-font: normal 700 0.875rem/1.15
45
45
  'Open Sans';
46
- --semantic-typography-heading-compact-sm-letter-spacing: 0px;
46
+ --semantic-typography-heading-compact-sm-letter-spacing: 0rem;
47
47
  --semantic-typography-heading-compact-sm-font-width: 88;
48
- --semantic-typography-heading-compact-md-font: normal 700 16px/1.15
48
+ --semantic-typography-heading-compact-md-font: normal 700 1rem/1.15
49
49
  'Open Sans';
50
- --semantic-typography-heading-compact-md-letter-spacing: -0.2px;
50
+ --semantic-typography-heading-compact-md-letter-spacing: -0.0125rem;
51
51
  --semantic-typography-heading-compact-md-font-width: 88;
52
- --semantic-typography-heading-compact-lg-font: normal 700 18px/1.15
52
+ --semantic-typography-heading-compact-lg-font: normal 700 1.125rem/1.15
53
53
  'Open Sans';
54
- --semantic-typography-heading-compact-lg-letter-spacing: -0.2px;
54
+ --semantic-typography-heading-compact-lg-letter-spacing: -0.0125rem;
55
55
  --semantic-typography-heading-compact-lg-font-width: 88;
56
- --semantic-typography-heading-compact-xl-font: normal 700 20px/1.15
56
+ --semantic-typography-heading-compact-xl-font: normal 700 1.25rem/1.15
57
57
  'Open Sans';
58
- --semantic-typography-heading-compact-xl-letter-spacing: -0.5px;
58
+ --semantic-typography-heading-compact-xl-letter-spacing: -0.03125rem;
59
59
  --semantic-typography-heading-compact-xl-font-width: 88;
60
- --semantic-typography-heading-compact-2xl-font: normal 700 24px/1.15
60
+ --semantic-typography-heading-compact-2xl-font: normal 700 1.5rem/1.15
61
61
  'Open Sans';
62
- --semantic-typography-heading-compact-2xl-letter-spacing: -0.5px;
62
+ --semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
63
63
  --semantic-typography-heading-compact-2xl-font-width: 88;
64
- --semantic-typography-body-sm-font: normal 460 14px/1.3 'Open Sans';
65
- --semantic-typography-body-sm-letter-spacing: 0px;
64
+ --semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
65
+ --semantic-typography-body-sm-letter-spacing: 0rem;
66
66
  --semantic-typography-body-sm-font-width: 95;
67
- --semantic-typography-body-md-font: normal 460 16px/1.3 'Open Sans';
68
- --semantic-typography-body-md-letter-spacing: 0px;
67
+ --semantic-typography-body-md-font: normal 460 1rem/1.3 'Open Sans';
68
+ --semantic-typography-body-md-letter-spacing: 0rem;
69
69
  --semantic-typography-body-md-font-width: 95;
70
- --semantic-typography-body-lg-font: normal 460 18px/1.3 'Open Sans';
71
- --semantic-typography-body-lg-letter-spacing: 0px;
70
+ --semantic-typography-body-lg-font: normal 460 1.125rem/1.3 'Open Sans';
71
+ --semantic-typography-body-lg-letter-spacing: 0rem;
72
72
  --semantic-typography-body-lg-font-width: 95;
73
- --semantic-typography-body-xl-font: normal 460 20px/1.3 'Open Sans';
74
- --semantic-typography-body-xl-letter-spacing: 0px;
73
+ --semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
74
+ --semantic-typography-body-xl-letter-spacing: 0rem;
75
75
  --semantic-typography-body-xl-font-width: 95;
76
- --semantic-typography-body-italic-sm-font: italic 460 14px/1.3 'Open Sans';
77
- --semantic-typography-body-italic-sm-letter-spacing: 0px;
76
+ --semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3
77
+ 'Open Sans';
78
+ --semantic-typography-body-italic-sm-letter-spacing: 0rem;
78
79
  --semantic-typography-body-italic-sm-font-width: 95;
79
- --semantic-typography-body-italic-md-font: italic 460 16px/1.3 'Open Sans';
80
- --semantic-typography-body-italic-md-letter-spacing: 0px;
80
+ --semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
81
+ --semantic-typography-body-italic-md-letter-spacing: 0rem;
81
82
  --semantic-typography-body-italic-md-font-width: 95;
82
- --semantic-typography-body-italic-lg-font: italic 460 18px/1.3 'Open Sans';
83
- --semantic-typography-body-italic-lg-letter-spacing: 0px;
83
+ --semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3
84
+ 'Open Sans';
85
+ --semantic-typography-body-italic-lg-letter-spacing: 0rem;
84
86
  --semantic-typography-body-italic-lg-font-width: 95;
85
- --semantic-typography-body-italic-xl-font: italic 460 20px/1.3 'Open Sans';
86
- --semantic-typography-body-italic-xl-letter-spacing: 0px;
87
+ --semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3
88
+ 'Open Sans';
89
+ --semantic-typography-body-italic-xl-letter-spacing: 0rem;
87
90
  --semantic-typography-body-italic-xl-font-width: 95;
88
- --semantic-typography-body-compact-sm-font: normal 460 14px/1.3 'Open Sans';
89
- --semantic-typography-body-compact-sm-letter-spacing: 0px;
91
+ --semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
92
+ 'Open Sans';
93
+ --semantic-typography-body-compact-sm-letter-spacing: 0rem;
90
94
  --semantic-typography-body-compact-sm-font-width: 88;
91
- --semantic-typography-body-compact-md-font: normal 460 16px/1.3 'Open Sans';
92
- --semantic-typography-body-compact-md-letter-spacing: 0px;
95
+ --semantic-typography-body-compact-md-font: normal 460 1rem/1.3 'Open Sans';
96
+ --semantic-typography-body-compact-md-letter-spacing: 0rem;
93
97
  --semantic-typography-body-compact-md-font-width: 88;
94
- --semantic-typography-body-compact-lg-font: normal 460 18px/1.3 'Open Sans';
95
- --semantic-typography-body-compact-lg-letter-spacing: 0px;
98
+ --semantic-typography-body-compact-lg-font: normal 460 1.125rem/1.3
99
+ 'Open Sans';
100
+ --semantic-typography-body-compact-lg-letter-spacing: 0rem;
96
101
  --semantic-typography-body-compact-lg-font-width: 88;
97
- --semantic-typography-body-compact-xl-font: normal 460 20px/1.3 'Open Sans';
98
- --semantic-typography-body-compact-xl-letter-spacing: 0px;
102
+ --semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3
103
+ 'Open Sans';
104
+ --semantic-typography-body-compact-xl-letter-spacing: 0rem;
99
105
  --semantic-typography-body-compact-xl-font-width: 88;
100
- --semantic-typography-body-compact-italic-sm-font: italic 460 14px/1.3
106
+ --semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
101
107
  'Open Sans';
102
- --semantic-typography-body-compact-italic-sm-letter-spacing: 0px;
108
+ --semantic-typography-body-compact-italic-sm-letter-spacing: 0rem;
103
109
  --semantic-typography-body-compact-italic-sm-font-width: 88;
104
- --semantic-typography-body-compact-italic-md-font: italic 460 16px/1.3
110
+ --semantic-typography-body-compact-italic-md-font: italic 460 1rem/1.3
105
111
  'Open Sans';
106
- --semantic-typography-body-compact-italic-md-letter-spacing: 0px;
112
+ --semantic-typography-body-compact-italic-md-letter-spacing: 0rem;
107
113
  --semantic-typography-body-compact-italic-md-font-width: 88;
108
- --semantic-typography-body-compact-italic-lg-font: italic 460 18px/1.3
114
+ --semantic-typography-body-compact-italic-lg-font: italic 460 1.125rem/1.3
109
115
  'Open Sans';
110
- --semantic-typography-body-compact-italic-lg-letter-spacing: 0px;
116
+ --semantic-typography-body-compact-italic-lg-letter-spacing: 0rem;
111
117
  --semantic-typography-body-compact-italic-lg-font-width: 88;
112
- --semantic-typography-body-compact-italic-xl-font: italic 460 20px/1.3
118
+ --semantic-typography-body-compact-italic-xl-font: italic 460 1.25rem/1.3
113
119
  'Open Sans';
114
- --semantic-typography-body-compact-italic-xl-letter-spacing: 0px;
120
+ --semantic-typography-body-compact-italic-xl-letter-spacing: 0rem;
115
121
  --semantic-typography-body-compact-italic-xl-font-width: 88;
116
- --semantic-typography-meta-md-font: normal 460 12px/1.3 'Open Sans';
117
- --semantic-typography-meta-md-letter-spacing: 0px;
122
+ --semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
123
+ --semantic-typography-meta-md-letter-spacing: 0rem;
118
124
  --semantic-typography-meta-md-font-width: 95;
119
- --semantic-typography-meta-compact-md-font: normal 460 12px/1.3 'Open Sans';
120
- --semantic-typography-meta-compact-md-letter-spacing: 0px;
125
+ --semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3
126
+ 'Open Sans';
127
+ --semantic-typography-meta-compact-md-letter-spacing: 0rem;
121
128
  --semantic-typography-meta-compact-md-font-width: 88;
122
- --semantic-typography-article-body-md-font: normal 400 16px/1.4
129
+ --semantic-typography-article-body-md-font: normal 400 1rem/1.4
123
130
  GuardianTextEgyptian;
124
- --semantic-typography-article-body-md-letter-spacing: 0px;
131
+ --semantic-typography-article-body-md-letter-spacing: 0rem;
125
132
  --semantic-typography-article-body-md-font-width: 100;
126
- --semantic-typography-article-body-bold-md-font: normal 700 16px/1.4
133
+ --semantic-typography-article-body-bold-md-font: normal 700 1rem/1.4
127
134
  GuardianTextEgyptian;
128
- --semantic-typography-article-body-bold-md-letter-spacing: 0px;
135
+ --semantic-typography-article-body-bold-md-letter-spacing: 0rem;
129
136
  --semantic-typography-article-body-bold-md-font-width: 100;
130
- --semantic-typography-article-body-italic-md-font: italic 400 16px/1.4
137
+ --semantic-typography-article-body-italic-md-font: italic 400 1rem/1.4
131
138
  GuardianTextEgyptian;
132
- --semantic-typography-article-body-italic-md-letter-spacing: 0px;
139
+ --semantic-typography-article-body-italic-md-letter-spacing: 0rem;
133
140
  --semantic-typography-article-body-italic-md-font-width: 100;
134
- --semantic-typography-article-body-bold-italic-md-font: italic 700 16px/1.4
141
+ --semantic-typography-article-body-bold-italic-md-font: italic 700 1rem/1.4
135
142
  GuardianTextEgyptian;
136
- --semantic-typography-article-body-bold-italic-md-letter-spacing: 0px;
143
+ --semantic-typography-article-body-bold-italic-md-letter-spacing: 0rem;
137
144
  --semantic-typography-article-body-bold-italic-md-font-width: 100;
138
145
  }
@@ -81,7 +81,7 @@ const baseColors = {
81
81
  },
82
82
  yellow: {
83
83
  "50": "#433608",
84
- "100": "#6f590c",
84
+ "100": "#5b4a0b",
85
85
  "200": "#9a7c11",
86
86
  "300": "#c69f16",
87
87
  "400": "#f1c21b",
@@ -93,7 +93,7 @@ const baseColors = {
93
93
  },
94
94
  orange: {
95
95
  "50": "#45260e",
96
- "100": "#713e17",
96
+ "100": "#693c16",
97
97
  "200": "#9d5621",
98
98
  "300": "#c96e2a",
99
99
  "400": "#f58633",
@@ -130,7 +130,7 @@ const baseColors = {
130
130
  "cool-purple": {
131
131
  "50": "#232740",
132
132
  "100": "#394069",
133
- "200": "#505a92",
133
+ "200": "#485084",
134
134
  "300": "#6773bb",
135
135
  "400": "#7d8ce4",
136
136
  "500": "#94a1e9",
@@ -79,7 +79,7 @@ const baseColors = {
79
79
  },
80
80
  yellow: {
81
81
  "50": "#433608",
82
- "100": "#6f590c",
82
+ "100": "#5b4a0b",
83
83
  "200": "#9a7c11",
84
84
  "300": "#c69f16",
85
85
  "400": "#f1c21b",
@@ -91,7 +91,7 @@ const baseColors = {
91
91
  },
92
92
  orange: {
93
93
  "50": "#45260e",
94
- "100": "#713e17",
94
+ "100": "#693c16",
95
95
  "200": "#9d5621",
96
96
  "300": "#c96e2a",
97
97
  "400": "#f58633",
@@ -128,7 +128,7 @@ const baseColors = {
128
128
  "cool-purple": {
129
129
  "50": "#232740",
130
130
  "100": "#394069",
131
- "200": "#505a92",
131
+ "200": "#485084",
132
132
  "300": "#6773bb",
133
133
  "400": "#7d8ce4",
134
134
  "500": "#94a1e9",
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ const baseRadius = {
4
+ "corner-2-px": "2px",
5
+ "corner-4-px": "4px",
6
+ "corner-8-px": "8px",
7
+ "corner-2-rem": "0.125rem",
8
+ "corner-4-rem": "0.25rem",
9
+ "corner-8-rem": "0.5rem"
10
+ };
11
+
12
+ exports.baseRadius = baseRadius;
@@ -0,0 +1,10 @@
1
+ const baseRadius = {
2
+ "corner-2-px": "2px",
3
+ "corner-4-px": "4px",
4
+ "corner-8-px": "8px",
5
+ "corner-2-rem": "0.125rem",
6
+ "corner-4-rem": "0.25rem",
7
+ "corner-8-rem": "0.5rem"
8
+ };
9
+
10
+ export { baseRadius };
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ const baseSizing = {
4
+ "size-2-px": "2px",
5
+ "size-16-px": "16px",
6
+ "size-18-px": "18px",
7
+ "size-20-px": "20px",
8
+ "size-24-px": "24px",
9
+ "size-32-px": "32px",
10
+ "size-40-px": "40px",
11
+ "size-48-px": "48px",
12
+ "size-2-rem": "0.125rem",
13
+ "size-16-rem": "1rem",
14
+ "size-18-rem": "1.125rem",
15
+ "size-20-rem": "1.25rem",
16
+ "size-24-rem": "1.5rem",
17
+ "size-32-rem": "2rem",
18
+ "size-40-rem": "2.5rem",
19
+ "size-48-rem": "3rem"
20
+ };
21
+
22
+ exports.baseSizing = baseSizing;
@@ -0,0 +1,20 @@
1
+ const baseSizing = {
2
+ "size-2-px": "2px",
3
+ "size-16-px": "16px",
4
+ "size-18-px": "18px",
5
+ "size-20-px": "20px",
6
+ "size-24-px": "24px",
7
+ "size-32-px": "32px",
8
+ "size-40-px": "40px",
9
+ "size-48-px": "48px",
10
+ "size-2-rem": "0.125rem",
11
+ "size-16-rem": "1rem",
12
+ "size-18-rem": "1.125rem",
13
+ "size-20-rem": "1.25rem",
14
+ "size-24-rem": "1.5rem",
15
+ "size-32-rem": "2rem",
16
+ "size-40-rem": "2.5rem",
17
+ "size-48-rem": "3rem"
18
+ };
19
+
20
+ export { baseSizing };
@@ -0,0 +1,36 @@
1
+ 'use strict';
2
+
3
+ const baseSpacing = {
4
+ "2-px": "2px",
5
+ "4-px": "4px",
6
+ "8-px": "8px",
7
+ "12-px": "12px",
8
+ "16-px": "16px",
9
+ "20-px": "20px",
10
+ "24-px": "24px",
11
+ "32-px": "32px",
12
+ "36-px": "36px",
13
+ "40-px": "40px",
14
+ "48-px": "48px",
15
+ "64-px": "64px",
16
+ "72-px": "72px",
17
+ "80-px": "80px",
18
+ "96-px": "96px",
19
+ "2-rem": "0.125rem",
20
+ "4-rem": "0.25rem",
21
+ "8-rem": "0.5rem",
22
+ "12-rem": "0.75rem",
23
+ "16-rem": "1rem",
24
+ "20-rem": "1.25rem",
25
+ "24-rem": "1.5rem",
26
+ "32-rem": "2rem",
27
+ "36-rem": "2.25rem",
28
+ "40-rem": "2.5rem",
29
+ "48-rem": "3rem",
30
+ "64-rem": "4rem",
31
+ "72-rem": "4.5rem",
32
+ "80-rem": "5rem",
33
+ "96-rem": "6rem"
34
+ };
35
+
36
+ exports.baseSpacing = baseSpacing;
@@ -0,0 +1,34 @@
1
+ const baseSpacing = {
2
+ "2-px": "2px",
3
+ "4-px": "4px",
4
+ "8-px": "8px",
5
+ "12-px": "12px",
6
+ "16-px": "16px",
7
+ "20-px": "20px",
8
+ "24-px": "24px",
9
+ "32-px": "32px",
10
+ "36-px": "36px",
11
+ "40-px": "40px",
12
+ "48-px": "48px",
13
+ "64-px": "64px",
14
+ "72-px": "72px",
15
+ "80-px": "80px",
16
+ "96-px": "96px",
17
+ "2-rem": "0.125rem",
18
+ "4-rem": "0.25rem",
19
+ "8-rem": "0.5rem",
20
+ "12-rem": "0.75rem",
21
+ "16-rem": "1rem",
22
+ "20-rem": "1.25rem",
23
+ "24-rem": "1.5rem",
24
+ "32-rem": "2rem",
25
+ "36-rem": "2.25rem",
26
+ "40-rem": "2.5rem",
27
+ "48-rem": "3rem",
28
+ "64-rem": "4rem",
29
+ "72-rem": "4.5rem",
30
+ "80-rem": "5rem",
31
+ "96-rem": "6rem"
32
+ };
33
+
34
+ export { baseSpacing };
@@ -18,14 +18,25 @@ const baseTypography = {
18
18
  "32-px": "32px",
19
19
  "36-px": "36px",
20
20
  "42-px": "42px",
21
- "48-px": "48px"
21
+ "48-px": "48px",
22
+ "12-rem": "0.75rem",
23
+ "14-rem": "0.875rem",
24
+ "16-rem": "1rem",
25
+ "18-rem": "1.125rem",
26
+ "20-rem": "1.25rem",
27
+ "24-rem": "1.5rem",
28
+ "28-rem": "1.75rem",
29
+ "32-rem": "2rem",
30
+ "36-rem": "2.25rem",
31
+ "42-rem": "2.625rem",
32
+ "48-rem": "3rem"
22
33
  },
23
34
  weight: {
24
- "Guardian Text Egyptian": {
25
- normal: 400,
35
+ "Guardian Headline": {
26
36
  bold: 700
27
37
  },
28
- "Guardian Headline": {
38
+ "Guardian Text Egyptian": {
39
+ normal: 400,
29
40
  bold: 700
30
41
  },
31
42
  "Open Sans": {
@@ -58,7 +69,11 @@ const baseTypography = {
58
69
  "densest-px": "-1px",
59
70
  "denser-px": "-0.5px",
60
71
  "dense-px": "-0.2px",
61
- "default-px": "0px"
72
+ "default-px": "0px",
73
+ "densest-rem": "-0.0625rem",
74
+ "denser-rem": "-0.03125rem",
75
+ "dense-rem": "-0.0125rem",
76
+ "default-rem": "0rem"
62
77
  }
63
78
  };
64
79
 
@@ -16,14 +16,25 @@ const baseTypography = {
16
16
  "32-px": "32px",
17
17
  "36-px": "36px",
18
18
  "42-px": "42px",
19
- "48-px": "48px"
19
+ "48-px": "48px",
20
+ "12-rem": "0.75rem",
21
+ "14-rem": "0.875rem",
22
+ "16-rem": "1rem",
23
+ "18-rem": "1.125rem",
24
+ "20-rem": "1.25rem",
25
+ "24-rem": "1.5rem",
26
+ "28-rem": "1.75rem",
27
+ "32-rem": "2rem",
28
+ "36-rem": "2.25rem",
29
+ "42-rem": "2.625rem",
30
+ "48-rem": "3rem"
20
31
  },
21
32
  weight: {
22
- "Guardian Text Egyptian": {
23
- normal: 400,
33
+ "Guardian Headline": {
24
34
  bold: 700
25
35
  },
26
- "Guardian Headline": {
36
+ "Guardian Text Egyptian": {
37
+ normal: 400,
27
38
  bold: 700
28
39
  },
29
40
  "Open Sans": {
@@ -56,7 +67,11 @@ const baseTypography = {
56
67
  "densest-px": "-1px",
57
68
  "denser-px": "-0.5px",
58
69
  "dense-px": "-0.2px",
59
- "default-px": "0px"
70
+ "default-px": "0px",
71
+ "densest-rem": "-0.0625rem",
72
+ "denser-rem": "-0.03125rem",
73
+ "dense-rem": "-0.0125rem",
74
+ "default-rem": "0rem"
60
75
  }
61
76
  };
62
77
 
@@ -2,15 +2,20 @@
2
2
 
3
3
  const semanticColors = {
4
4
  text: {
5
- primary: "#000000",
6
- secondary: "#333333",
7
- tertiary: "#666666",
5
+ default: "#000000",
6
+ subdued: "#545454",
8
7
  "inverse-default": "#dcdcdc",
9
- "inverse-secondary": "#cccccc",
10
- "inverse-tertiary": "#aeaeae",
8
+ "inverse-subdued": "#cccccc",
11
9
  "inverse-strong": "#ffffff",
12
- warning: "#8c2113",
13
- success: "#326528"
10
+ error: "#8c2113",
11
+ warning: "#433608",
12
+ success: "#326528",
13
+ information: "#00344e",
14
+ disabled: "#999999"
15
+ },
16
+ bg: {
17
+ "default-onDark": "#121212",
18
+ "default-onLight": "#ffffff"
14
19
  },
15
20
  surface: {
16
21
  "light-1": "#f6f6f6",
@@ -23,14 +28,11 @@ const semanticColors = {
23
28
  strong: "#545454",
24
29
  "inverse-strong": "#ffffff"
25
30
  },
26
- bg: {
27
- "default-onDark": "#121212",
28
- "default-onLight": "#ffffff"
29
- },
30
31
  status: {
31
32
  "status-draft": "#f1c21b",
32
33
  "status-live": "#4e9e3e",
33
- "status-selected": "#0072a9"
34
+ "status-selected": "#0072a9",
35
+ "status-focused": "#0072a9"
34
36
  }
35
37
  };
36
38
 
@@ -1,14 +1,19 @@
1
1
  const semanticColors = {
2
2
  text: {
3
- primary: "#000000",
4
- secondary: "#333333",
5
- tertiary: "#666666",
3
+ default: "#000000",
4
+ subdued: "#545454",
6
5
  "inverse-default": "#dcdcdc",
7
- "inverse-secondary": "#cccccc",
8
- "inverse-tertiary": "#aeaeae",
6
+ "inverse-subdued": "#cccccc",
9
7
  "inverse-strong": "#ffffff",
10
- warning: "#8c2113",
11
- success: "#326528"
8
+ error: "#8c2113",
9
+ warning: "#433608",
10
+ success: "#326528",
11
+ information: "#00344e",
12
+ disabled: "#999999"
13
+ },
14
+ bg: {
15
+ "default-onDark": "#121212",
16
+ "default-onLight": "#ffffff"
12
17
  },
13
18
  surface: {
14
19
  "light-1": "#f6f6f6",
@@ -21,14 +26,11 @@ const semanticColors = {
21
26
  strong: "#545454",
22
27
  "inverse-strong": "#ffffff"
23
28
  },
24
- bg: {
25
- "default-onDark": "#121212",
26
- "default-onLight": "#ffffff"
27
- },
28
29
  status: {
29
30
  "status-draft": "#f1c21b",
30
31
  "status-live": "#4e9e3e",
31
- "status-selected": "#0072a9"
32
+ "status-selected": "#0072a9",
33
+ "status-focused": "#0072a9"
32
34
  }
33
35
  };
34
36
 
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ const semanticSizing = {
4
+ height: {
5
+ xs: "1.5rem",
6
+ sm: "2rem",
7
+ md: "2.5rem",
8
+ lg: "3rem"
9
+ },
10
+ icon: {
11
+ sm: "1.125rem",
12
+ md: "1.25rem",
13
+ lg: "1.5rem"
14
+ },
15
+ border: {
16
+ md: "0.125rem"
17
+ }
18
+ };
19
+
20
+ exports.semanticSizing = semanticSizing;
@@ -0,0 +1,18 @@
1
+ const semanticSizing = {
2
+ height: {
3
+ xs: "1.5rem",
4
+ sm: "2rem",
5
+ md: "2.5rem",
6
+ lg: "3rem"
7
+ },
8
+ icon: {
9
+ sm: "1.125rem",
10
+ md: "1.25rem",
11
+ lg: "1.5rem"
12
+ },
13
+ border: {
14
+ md: "0.125rem"
15
+ }
16
+ };
17
+
18
+ export { semanticSizing };