@equinor/eds-tokens 2.3.0-beta.2 → 2.3.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 (29) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +57 -6
  3. package/build/css/typography/font-family-ui.css +1 -1
  4. package/build/css/typography.css +25 -10
  5. package/build/css/variables.css +317 -101
  6. package/build/css/variables.min.css +1 -1
  7. package/build/ts/typography/font-family-header.ts +170 -80
  8. package/build/ts/typography/font-family-ui.ts +170 -80
  9. package/instructions/typography.md +59 -43
  10. package/package.json +33 -28
  11. package/build/ts/typography/font-size-2xl.ts +0 -21
  12. package/build/ts/typography/font-size-3xl.ts +0 -21
  13. package/build/ts/typography/font-size-4xl.ts +0 -21
  14. package/build/ts/typography/font-size-5xl.ts +0 -21
  15. package/build/ts/typography/font-size-6xl.ts +0 -21
  16. package/build/ts/typography/font-size-lg.ts +0 -21
  17. package/build/ts/typography/font-size-md.ts +0 -21
  18. package/build/ts/typography/font-size-sm.ts +0 -21
  19. package/build/ts/typography/font-size-xl.ts +0 -21
  20. package/build/ts/typography/font-size-xs.ts +0 -21
  21. package/build/ts/typography/font-weight-bolder.ts +0 -9
  22. package/build/ts/typography/font-weight-lighter.ts +0 -9
  23. package/build/ts/typography/font-weight-normal.ts +0 -9
  24. package/build/ts/typography/line-height-default.ts +0 -9
  25. package/build/ts/typography/line-height-squished.ts +0 -9
  26. package/build/ts/typography/tracking-loose.ts +0 -9
  27. package/build/ts/typography/tracking-normal.ts +0 -9
  28. package/build/ts/typography/tracking-tight.ts +0 -9
  29. package/build/ts/typography/tracking-wide.ts +0 -9
package/build/ts/typography/font-family-header.ts CHANGED
@@ -10,113 +10,203 @@ export const typography = {
10
10
  fontFamilySize: {
11
11
  xs: {
12
12
  fontSize: 12,
13
- trackingTight: -1.149999976158142,
14
- trackingNormal: 0,
15
- trackingWide: 1.149999976158142,
16
- fontWeightLighter: 300,
17
- fontWeightNormal: 400,
18
- fontWeightBolder: 500,
19
- lineHeightDefault: 16,
20
- lineHeightSquished: 12,
13
+ tracking: {
14
+ tight: -1.149999976158142,
15
+ normal: 0,
16
+ wide: 1.149999976158142,
17
+ },
18
+ fontWeight: {
19
+ lighter: 300,
20
+ normal: 400,
21
+ bolder: 500,
22
+ },
23
+ lineHeight: {
24
+ default: 16,
25
+ squished: 12,
26
+ },
27
+ iconSize: 16,
28
+ gapHorizontal: 6.5,
29
+ gapVertical: 6.5,
21
30
  },
22
31
  sm: {
23
32
  fontSize: 14,
24
- trackingTight: -1.3200000524520874,
25
- trackingNormal: 0,
26
- trackingWide: 1.3200000524520874,
27
- fontWeightLighter: 300,
28
- fontWeightNormal: 400,
29
- fontWeightBolder: 500,
30
- lineHeightDefault: 16,
31
- lineHeightSquished: 12,
33
+ tracking: {
34
+ tight: -1.3200000524520874,
35
+ normal: 0,
36
+ wide: 1.3200000524520874,
37
+ },
38
+ fontWeight: {
39
+ lighter: 300,
40
+ normal: 400,
41
+ bolder: 500,
42
+ },
43
+ lineHeight: {
44
+ default: 16,
45
+ squished: 12,
46
+ },
47
+ iconSize: 18,
48
+ gapHorizontal: 7.5,
49
+ gapVertical: 7.5,
32
50
  },
33
51
  md: {
34
52
  fontSize: 16,
35
- trackingTight: -1.5399999618530273,
36
- trackingNormal: 0,
37
- trackingWide: 1.5399999618530273,
38
- fontWeightLighter: 300,
39
- fontWeightNormal: 400,
40
- fontWeightBolder: 500,
41
- lineHeightDefault: 20,
42
- lineHeightSquished: 16,
53
+ tracking: {
54
+ tight: -1.5399999618530273,
55
+ normal: 0,
56
+ wide: 1.5399999618530273,
57
+ },
58
+ fontWeight: {
59
+ lighter: 300,
60
+ normal: 400,
61
+ bolder: 500,
62
+ },
63
+ lineHeight: {
64
+ default: 20,
65
+ squished: 16,
66
+ },
67
+ iconSize: 20,
68
+ gapHorizontal: 8.5,
69
+ gapVertical: 8.5,
43
70
  },
44
71
  lg: {
45
72
  fontSize: 18,
46
- trackingTight: -1.7599999904632568,
47
- trackingNormal: 0,
48
- trackingWide: 1.7599999904632568,
49
- fontWeightLighter: 300,
50
- fontWeightNormal: 400,
51
- fontWeightBolder: 500,
52
- lineHeightDefault: 24,
53
- lineHeightSquished: 20,
73
+ tracking: {
74
+ tight: -1.7599999904632568,
75
+ normal: 0,
76
+ wide: 1.7599999904632568,
77
+ },
78
+ fontWeight: {
79
+ lighter: 300,
80
+ normal: 400,
81
+ bolder: 500,
82
+ },
83
+ lineHeight: {
84
+ default: 24,
85
+ squished: 20,
86
+ },
87
+ iconSize: 24,
88
+ gapHorizontal: 10,
89
+ gapVertical: 10,
54
90
  },
55
91
  xl: {
56
92
  fontSize: 21,
57
- trackingTight: -1.7599999904632568,
58
- trackingNormal: 0,
59
- trackingWide: 2.0350000858306885,
60
- fontWeightLighter: 300,
61
- fontWeightNormal: 400,
62
- fontWeightBolder: 500,
63
- lineHeightDefault: 24,
64
- lineHeightSquished: 20,
93
+ tracking: {
94
+ tight: -1.7599999904632568,
95
+ normal: 0,
96
+ wide: 2.0350000858306885,
97
+ },
98
+ fontWeight: {
99
+ lighter: 300,
100
+ normal: 400,
101
+ bolder: 500,
102
+ },
103
+ lineHeight: {
104
+ default: 24,
105
+ squished: 20,
106
+ },
107
+ iconSize: 28,
108
+ gapHorizontal: 11.5,
109
+ gapVertical: 11.5,
65
110
  },
66
111
  twoXl: {
67
112
  fontSize: 24,
68
- trackingTight: -2.309999942779541,
69
- trackingNormal: 0,
70
- trackingWide: 2.309999942779541,
71
- fontWeightLighter: 300,
72
- fontWeightNormal: 400,
73
- fontWeightBolder: 500,
74
- lineHeightDefault: 28,
75
- lineHeightSquished: 24,
113
+ tracking: {
114
+ tight: -2.309999942779541,
115
+ normal: 0,
116
+ wide: 2.309999942779541,
117
+ },
118
+ fontWeight: {
119
+ lighter: 300,
120
+ normal: 400,
121
+ bolder: 500,
122
+ },
123
+ lineHeight: {
124
+ default: 28,
125
+ squished: 24,
126
+ },
127
+ iconSize: 32,
128
+ gapHorizontal: 13,
129
+ gapVertical: 13,
76
130
  },
77
131
  threeXl: {
78
132
  fontSize: 27.5,
79
- trackingTight: -2.694999933242798,
80
- trackingNormal: 0,
81
- trackingWide: 2.694999933242798,
82
- fontWeightLighter: 300,
83
- fontWeightNormal: 400,
84
- fontWeightBolder: 500,
85
- lineHeightDefault: 32,
86
- lineHeightSquished: 32,
133
+ tracking: {
134
+ tight: -2.694999933242798,
135
+ normal: 0,
136
+ wide: 2.694999933242798,
137
+ },
138
+ fontWeight: {
139
+ lighter: 300,
140
+ normal: 400,
141
+ bolder: 500,
142
+ },
143
+ lineHeight: {
144
+ default: 32,
145
+ squished: 32,
146
+ },
147
+ iconSize: 37,
148
+ gapHorizontal: 15,
149
+ gapVertical: 15,
87
150
  },
88
151
  fourXl: {
89
152
  fontSize: 31.5,
90
- trackingTight: -3.0799999237060547,
91
- trackingNormal: 0,
92
- trackingWide: 3.0799999237060547,
93
- fontWeightLighter: 300,
94
- fontWeightNormal: 400,
95
- fontWeightBolder: 500,
96
- lineHeightDefault: 32,
97
- lineHeightSquished: 28,
153
+ tracking: {
154
+ tight: -3.0799999237060547,
155
+ normal: 0,
156
+ wide: 3.0799999237060547,
157
+ },
158
+ fontWeight: {
159
+ lighter: 300,
160
+ normal: 400,
161
+ bolder: 500,
162
+ },
163
+ lineHeight: {
164
+ default: 32,
165
+ squished: 28,
166
+ },
167
+ iconSize: 42,
168
+ gapHorizontal: 17.5,
169
+ gapVertical: 17.5,
98
170
  },
99
171
  fiveXl: {
100
172
  fontSize: 36.5,
101
- trackingTight: -3.5199999809265137,
102
- trackingNormal: 0,
103
- trackingWide: 3.5199999809265137,
104
- fontWeightLighter: 300,
105
- fontWeightNormal: 400,
106
- fontWeightBolder: 500,
107
- lineHeightDefault: 36,
108
- lineHeightSquished: 32,
173
+ tracking: {
174
+ tight: -3.5199999809265137,
175
+ normal: 0,
176
+ wide: 3.5199999809265137,
177
+ },
178
+ fontWeight: {
179
+ lighter: 300,
180
+ normal: 400,
181
+ bolder: 500,
182
+ },
183
+ lineHeight: {
184
+ default: 36,
185
+ squished: 32,
186
+ },
187
+ iconSize: 48,
188
+ gapHorizontal: 20,
189
+ gapVertical: 20,
109
190
  },
110
191
  sixXl: {
111
192
  fontSize: 42,
112
- trackingTight: -4.070000171661377,
113
- trackingNormal: 0,
114
- trackingWide: 4.070000171661377,
115
- fontWeightLighter: 300,
116
- fontWeightNormal: 400,
117
- fontWeightBolder: 500,
118
- lineHeightDefault: 40,
119
- lineHeightSquished: 36,
193
+ tracking: {
194
+ tight: -4.070000171661377,
195
+ normal: 0,
196
+ wide: 4.070000171661377,
197
+ },
198
+ fontWeight: {
199
+ lighter: 300,
200
+ normal: 400,
201
+ bolder: 500,
202
+ },
203
+ lineHeight: {
204
+ default: 40,
205
+ squished: 36,
206
+ },
207
+ iconSize: 56,
208
+ gapHorizontal: 23,
209
+ gapVertical: 23,
120
210
  },
121
211
  },
122
212
  } as const
package/build/ts/typography/font-family-ui.ts CHANGED
@@ -10,113 +10,203 @@ export const typography = {
10
10
  fontFamilySize: {
11
11
  xs: {
12
12
  fontSize: 10.5,
13
- trackingTight: -1.149999976158142,
14
- trackingNormal: 0,
15
- trackingWide: 1.149999976158142,
16
- fontWeightLighter: 300,
17
- fontWeightNormal: 400,
18
- fontWeightBolder: 500,
19
- lineHeightDefault: 16,
20
- lineHeightSquished: 12,
13
+ tracking: {
14
+ tight: -1.149999976158142,
15
+ normal: 0,
16
+ wide: 1.149999976158142,
17
+ },
18
+ fontWeight: {
19
+ lighter: 300,
20
+ normal: 400,
21
+ bolder: 500,
22
+ },
23
+ lineHeight: {
24
+ default: 16,
25
+ squished: 12,
26
+ },
27
+ iconSize: 16,
28
+ gapHorizontal: 6.5,
29
+ gapVertical: 6.5,
21
30
  },
22
31
  sm: {
23
32
  fontSize: 12,
24
- trackingTight: -1.3200000524520874,
25
- trackingNormal: 0,
26
- trackingWide: 1.3200000524520874,
27
- fontWeightLighter: 300,
28
- fontWeightNormal: 400,
29
- fontWeightBolder: 500,
30
- lineHeightDefault: 16,
31
- lineHeightSquished: 12,
33
+ tracking: {
34
+ tight: -1.3200000524520874,
35
+ normal: 0,
36
+ wide: 1.3200000524520874,
37
+ },
38
+ fontWeight: {
39
+ lighter: 300,
40
+ normal: 400,
41
+ bolder: 500,
42
+ },
43
+ lineHeight: {
44
+ default: 16,
45
+ squished: 12,
46
+ },
47
+ iconSize: 18,
48
+ gapHorizontal: 7.5,
49
+ gapVertical: 7.5,
32
50
  },
33
51
  md: {
34
52
  fontSize: 14,
35
- trackingTight: -1.5399999618530273,
36
- trackingNormal: 0,
37
- trackingWide: 1.5399999618530273,
38
- fontWeightLighter: 300,
39
- fontWeightNormal: 400,
40
- fontWeightBolder: 500,
41
- lineHeightDefault: 20,
42
- lineHeightSquished: 16,
53
+ tracking: {
54
+ tight: -1.5399999618530273,
55
+ normal: 0,
56
+ wide: 1.5399999618530273,
57
+ },
58
+ fontWeight: {
59
+ lighter: 300,
60
+ normal: 400,
61
+ bolder: 500,
62
+ },
63
+ lineHeight: {
64
+ default: 20,
65
+ squished: 16,
66
+ },
67
+ iconSize: 20,
68
+ gapHorizontal: 8.5,
69
+ gapVertical: 8.5,
43
70
  },
44
71
  lg: {
45
72
  fontSize: 16,
46
- trackingTight: -1.7599999904632568,
47
- trackingNormal: 0,
48
- trackingWide: 1.7599999904632568,
49
- fontWeightLighter: 300,
50
- fontWeightNormal: 400,
51
- fontWeightBolder: 500,
52
- lineHeightDefault: 24,
53
- lineHeightSquished: 20,
73
+ tracking: {
74
+ tight: -1.7599999904632568,
75
+ normal: 0,
76
+ wide: 1.7599999904632568,
77
+ },
78
+ fontWeight: {
79
+ lighter: 300,
80
+ normal: 400,
81
+ bolder: 500,
82
+ },
83
+ lineHeight: {
84
+ default: 24,
85
+ squished: 20,
86
+ },
87
+ iconSize: 24,
88
+ gapHorizontal: 10,
89
+ gapVertical: 10,
54
90
  },
55
91
  xl: {
56
92
  fontSize: 18.5,
57
- trackingTight: -1.7599999904632568,
58
- trackingNormal: 0,
59
- trackingWide: 2.0350000858306885,
60
- fontWeightLighter: 300,
61
- fontWeightNormal: 400,
62
- fontWeightBolder: 500,
63
- lineHeightDefault: 24,
64
- lineHeightSquished: 20,
93
+ tracking: {
94
+ tight: -1.7599999904632568,
95
+ normal: 0,
96
+ wide: 2.0350000858306885,
97
+ },
98
+ fontWeight: {
99
+ lighter: 300,
100
+ normal: 400,
101
+ bolder: 500,
102
+ },
103
+ lineHeight: {
104
+ default: 24,
105
+ squished: 20,
106
+ },
107
+ iconSize: 28,
108
+ gapHorizontal: 11.5,
109
+ gapVertical: 11.5,
65
110
  },
66
111
  twoXl: {
67
112
  fontSize: 21,
68
- trackingTight: -2.309999942779541,
69
- trackingNormal: 0,
70
- trackingWide: 2.309999942779541,
71
- fontWeightLighter: 300,
72
- fontWeightNormal: 400,
73
- fontWeightBolder: 500,
74
- lineHeightDefault: 28,
75
- lineHeightSquished: 24,
113
+ tracking: {
114
+ tight: -2.309999942779541,
115
+ normal: 0,
116
+ wide: 2.309999942779541,
117
+ },
118
+ fontWeight: {
119
+ lighter: 300,
120
+ normal: 400,
121
+ bolder: 500,
122
+ },
123
+ lineHeight: {
124
+ default: 28,
125
+ squished: 24,
126
+ },
127
+ iconSize: 32,
128
+ gapHorizontal: 13,
129
+ gapVertical: 13,
76
130
  },
77
131
  threeXl: {
78
132
  fontSize: 24.5,
79
- trackingTight: -2.694999933242798,
80
- trackingNormal: 0,
81
- trackingWide: 2.694999933242798,
82
- fontWeightLighter: 300,
83
- fontWeightNormal: 400,
84
- fontWeightBolder: 500,
85
- lineHeightDefault: 32,
86
- lineHeightSquished: 28,
133
+ tracking: {
134
+ tight: -2.694999933242798,
135
+ normal: 0,
136
+ wide: 2.694999933242798,
137
+ },
138
+ fontWeight: {
139
+ lighter: 300,
140
+ normal: 400,
141
+ bolder: 500,
142
+ },
143
+ lineHeight: {
144
+ default: 32,
145
+ squished: 28,
146
+ },
147
+ iconSize: 37,
148
+ gapHorizontal: 15,
149
+ gapVertical: 15,
87
150
  },
88
151
  fourXl: {
89
152
  fontSize: 28,
90
- trackingTight: -3.0799999237060547,
91
- trackingNormal: 0,
92
- trackingWide: 3.0799999237060547,
93
- fontWeightLighter: 300,
94
- fontWeightNormal: 400,
95
- fontWeightBolder: 500,
96
- lineHeightDefault: 32,
97
- lineHeightSquished: 28,
153
+ tracking: {
154
+ tight: -3.0799999237060547,
155
+ normal: 0,
156
+ wide: 3.0799999237060547,
157
+ },
158
+ fontWeight: {
159
+ lighter: 300,
160
+ normal: 400,
161
+ bolder: 500,
162
+ },
163
+ lineHeight: {
164
+ default: 32,
165
+ squished: 28,
166
+ },
167
+ iconSize: 42,
168
+ gapHorizontal: 17.5,
169
+ gapVertical: 17.5,
98
170
  },
99
171
  fiveXl: {
100
172
  fontSize: 32,
101
- trackingTight: -3.5199999809265137,
102
- trackingNormal: 0,
103
- trackingWide: 300,
104
- fontWeightLighter: 300,
105
- fontWeightNormal: 400,
106
- fontWeightBolder: 500,
107
- lineHeightDefault: 36,
108
- lineHeightSquished: 32,
173
+ tracking: {
174
+ tight: -3.5199999809265137,
175
+ normal: 0,
176
+ wide: 3.5199999809265137,
177
+ },
178
+ fontWeight: {
179
+ lighter: 300,
180
+ normal: 400,
181
+ bolder: 500,
182
+ },
183
+ lineHeight: {
184
+ default: 36,
185
+ squished: 32,
186
+ },
187
+ iconSize: 48,
188
+ gapHorizontal: 20,
189
+ gapVertical: 20,
109
190
  },
110
191
  sixXl: {
111
192
  fontSize: 37,
112
- trackingTight: -4.070000171661377,
113
- trackingNormal: 0,
114
- trackingWide: 4.070000171661377,
115
- fontWeightLighter: 300,
116
- fontWeightNormal: 400,
117
- fontWeightBolder: 500,
118
- lineHeightDefault: 40,
119
- lineHeightSquished: 36,
193
+ tracking: {
194
+ tight: -4.070000171661377,
195
+ normal: 0,
196
+ wide: 4.070000171661377,
197
+ },
198
+ fontWeight: {
199
+ lighter: 300,
200
+ normal: 400,
201
+ bolder: 500,
202
+ },
203
+ lineHeight: {
204
+ default: 40,
205
+ squished: 36,
206
+ },
207
+ iconSize: 56,
208
+ gapHorizontal: 23,
209
+ gapVertical: 23,
120
210
  },
121
211
  },
122
212
  } as const