@entur/tokens 3.15.0 → 3.15.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.
@@ -107,38 +107,70 @@ export declare const colors: {
107
107
  };
108
108
  };
109
109
  export declare const space: {
110
+ /** 0px */
110
111
  none: number;
112
+ /** 16px (1rem) */
111
113
  default: number;
114
+ /** 4px (0.25rem) */
112
115
  extraSmall2: number;
116
+ /** 8px (0.5rem) */
113
117
  extraSmall: number;
118
+ /** 12px (0.75rem) */
114
119
  small: number;
120
+ /** 16px (1rem) */
115
121
  medium: number;
122
+ /** 24px (1.5rem) */
116
123
  large: number;
124
+ /** 32px (2rem) */
117
125
  extraLarge: number;
126
+ /** 40px (2.5rem) */
118
127
  extraLarge2: number;
128
+ /** 48px (3rem) */
119
129
  extraLarge3: number;
130
+ /** 56px (3.5rem) */
120
131
  extraLarge4: number;
132
+ /** 64px (4rem) */
121
133
  extraLarge5: number;
134
+ /** 72px (4.5rem) */
122
135
  extraLarge6: number;
136
+ /** 80px (5rem) */
123
137
  extraLarge7: number;
138
+ /** 88px (5.5rem) */
124
139
  extraLarge8: number;
140
+ /** 96px (6rem) */
125
141
  extraLarge9: number;
126
142
  rem: {
143
+ /** 0rem (0px) */
127
144
  none: number;
145
+ /** 1rem (16px) */
128
146
  default: number;
147
+ /** 0.25rem (4px) */
129
148
  extraSmall2: number;
149
+ /** 0.5rem (8px) */
130
150
  extraSmall: number;
151
+ /** 0.75rem (12px) */
131
152
  small: number;
153
+ /** 1rem (16px) */
132
154
  medium: number;
155
+ /** 1.5rem (24px) */
133
156
  large: number;
157
+ /** 2rem (32px) */
134
158
  extraLarge: number;
159
+ /** 2.5rem (40px) */
135
160
  extraLarge2: number;
161
+ /** 3rem (48px) */
136
162
  extraLarge3: number;
163
+ /** 3.5rem (56px) */
137
164
  extraLarge4: number;
165
+ /** 4rem (64px) */
138
166
  extraLarge5: number;
167
+ /** 4.5rem (72px) */
139
168
  extraLarge6: number;
169
+ /** 5rem (80px) */
140
170
  extraLarge7: number;
171
+ /** 5.5rem (88px) */
141
172
  extraLarge8: number;
173
+ /** 6rem (96px) */
142
174
  extraLarge9: number;
143
175
  };
144
176
  };
@@ -147,50 +179,90 @@ export declare const fontWeights: {
147
179
  heading: string;
148
180
  };
149
181
  export declare const fontSizes: {
182
+ /** 10px (0.625rem) */
150
183
  extraSmall: number;
184
+ /** 12px (0.75rem) */
151
185
  small: number;
186
+ /** 14px (0.875rem) */
152
187
  medium: number;
188
+ /** 16px (1rem) */
153
189
  large: number;
190
+ /** 20 px (1.25rem) */
154
191
  extraLarge: number;
192
+ /** 24 px (1.5rem) */
155
193
  extraLarge2: number;
194
+ /** 28 px (1.75rem) */
156
195
  extraLarge3: number;
196
+ /** 32 px (2rem) */
157
197
  extraLarge4: number;
198
+ /** 40 px (2.5rem) */
158
199
  extraLarge5: number;
159
200
  rem: {
201
+ /** 0.625rem (10px) */
160
202
  extraSmall: number;
203
+ /** 0.75rem (12px) */
161
204
  small: number;
205
+ /** 0.875rem (14px) */
162
206
  medium: number;
207
+ /** 1rem (16px) */
163
208
  large: number;
209
+ /** 1.25rem (20px) */
164
210
  extraLarge: number;
211
+ /** 1.5rem (24px) */
165
212
  extraLarge2: number;
213
+ /** 1.75rem (28px) */
166
214
  extraLarge3: number;
215
+ /** 2rem (32px) */
167
216
  extraLarge4: number;
217
+ /** 2.5rem (40px) */
168
218
  extraLarge5: number;
169
219
  };
170
220
  };
171
221
  export declare const lineHeights: {
222
+ /** 14px (0.875rem) */
172
223
  extraSmall: number;
224
+ /** 16px (1rem) */
173
225
  small: number;
226
+ /** 20px (1.25rem) */
174
227
  medium: number;
228
+ /** 22px (1.375rem) */
175
229
  large: number;
230
+ /** 24px (1.5rem) */
176
231
  extraLarge: number;
232
+ /** 28px (1.75rem) */
177
233
  extraLarge2: number;
234
+ /** 30px (1.875rem) */
178
235
  extraLarge3: number;
236
+ /** 36px (2.25rem) */
179
237
  extraLarge4: number;
238
+ /** 42px (2.625rem) */
180
239
  extraLarge5: number;
240
+ /** 48px (3rem) */
181
241
  extraLarge6: number;
242
+ /** 60px (3.75rem) */
182
243
  extraLarge7: number;
183
244
  rem: {
245
+ /** 0.875rem (14px) */
184
246
  extraSmall: number;
247
+ /** 1rem (16px) */
185
248
  small: number;
249
+ /** 1.25rem (20px) */
186
250
  medium: number;
251
+ /** 1.375rem (22px) */
187
252
  large: number;
253
+ /** 1.5rem (24px) */
188
254
  extraLarge: number;
255
+ /** 1.75rem (28px) */
189
256
  extraLarge2: number;
257
+ /** 1.875rem (30px) */
190
258
  extraLarge3: number;
259
+ /** 2.25rem (36px) */
191
260
  extraLarge4: number;
261
+ /** 2.625rem (42px) */
192
262
  extraLarge5: number;
263
+ /** 3rem (48px) */
193
264
  extraLarge6: number;
265
+ /** 3.75rem (60px) */
194
266
  extraLarge7: number;
195
267
  };
196
268
  };
@@ -203,26 +275,42 @@ export declare const breakpoints: {
203
275
  };
204
276
  };
205
277
  export declare const borderWidths: {
278
+ /** 2px (0.125rem) */
206
279
  default: number;
280
+ /** 1px (0.0625rem) */
207
281
  small: number;
282
+ /** 2px (0.125rem) */
208
283
  medium: number;
284
+ /** 4px (0.25rem) */
209
285
  large: number;
210
286
  rem: {
287
+ /** 0.125rem (2px) */
211
288
  default: number;
289
+ /** 0.0625rem (1px) */
212
290
  small: number;
291
+ /** 0.125rem (2px) */
213
292
  medium: number;
293
+ /** 0.25rem (4px) */
214
294
  large: number;
215
295
  };
216
296
  };
217
297
  export declare const borderRadiuses: {
298
+ /** 1 px (0.0625rem) */
218
299
  default: number;
300
+ /** 1 px (0.0625rem) */
219
301
  small: number;
302
+ /** 4 px (0.25rem) */
220
303
  medium: number;
304
+ /** 8 px (0.5rem) */
221
305
  large: number;
222
306
  rem: {
307
+ /** 0.0625rem (1px) */
223
308
  default: number;
309
+ /** 0.0625rem (1px) */
224
310
  small: number;
311
+ /** 0.25rem (4px) */
225
312
  medium: number;
313
+ /** 0.5rem (8px) */
226
314
  large: number;
227
315
  };
228
316
  };
@@ -246,8 +334,11 @@ export declare const zIndexes: {
246
334
  toast: number;
247
335
  };
248
336
  export declare const timings: {
337
+ /** 0.1s */
249
338
  fast: string;
339
+ /** 0.2s */
250
340
  medium: string;
341
+ /** 0.5s */
251
342
  slow: string;
252
343
  };
253
344
  export declare const outlines: {
@@ -255,8 +346,10 @@ export declare const outlines: {
255
346
  focusContrast: string;
256
347
  };
257
348
  export declare const outlineOffsets: {
349
+ /** 2px (0.125rem) */
258
350
  focus: number;
259
351
  rem: {
352
+ /** 0.125rem (2px) */
260
353
  focus: number;
261
354
  };
262
355
  };
@@ -3589,38 +3589,70 @@ var blue20Rgb = /*#__PURE__*/hexRgb(colors.blues.blue20, {
3589
3589
  // Dimensions
3590
3590
  var spaceScale = [0, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96];
3591
3591
  var space = {
3592
+ /** 0px */
3592
3593
  none: spaceScale[0],
3594
+ /** 16px (1rem) */
3593
3595
  "default": spaceScale[4],
3596
+ /** 4px (0.25rem) */
3594
3597
  extraSmall2: spaceScale[1],
3598
+ /** 8px (0.5rem) */
3595
3599
  extraSmall: spaceScale[2],
3600
+ /** 12px (0.75rem) */
3596
3601
  small: spaceScale[3],
3602
+ /** 16px (1rem) */
3597
3603
  medium: spaceScale[4],
3604
+ /** 24px (1.5rem) */
3598
3605
  large: spaceScale[5],
3606
+ /** 32px (2rem) */
3599
3607
  extraLarge: spaceScale[6],
3608
+ /** 40px (2.5rem) */
3600
3609
  extraLarge2: spaceScale[7],
3610
+ /** 48px (3rem) */
3601
3611
  extraLarge3: spaceScale[8],
3612
+ /** 56px (3.5rem) */
3602
3613
  extraLarge4: spaceScale[9],
3614
+ /** 64px (4rem) */
3603
3615
  extraLarge5: spaceScale[10],
3616
+ /** 72px (4.5rem) */
3604
3617
  extraLarge6: spaceScale[11],
3618
+ /** 80px (5rem) */
3605
3619
  extraLarge7: spaceScale[12],
3620
+ /** 88px (5.5rem) */
3606
3621
  extraLarge8: spaceScale[13],
3622
+ /** 96px (6rem) */
3607
3623
  extraLarge9: spaceScale[14],
3608
3624
  rem: {
3625
+ /** 0rem (0px) */
3609
3626
  none: /*#__PURE__*/pxToRem(spaceScale[0]),
3627
+ /** 1rem (16px) */
3610
3628
  "default": /*#__PURE__*/pxToRem(spaceScale[4]),
3629
+ /** 0.25rem (4px) */
3611
3630
  extraSmall2: /*#__PURE__*/pxToRem(spaceScale[1]),
3631
+ /** 0.5rem (8px) */
3612
3632
  extraSmall: /*#__PURE__*/pxToRem(spaceScale[2]),
3633
+ /** 0.75rem (12px) */
3613
3634
  small: /*#__PURE__*/pxToRem(spaceScale[3]),
3635
+ /** 1rem (16px) */
3614
3636
  medium: /*#__PURE__*/pxToRem(spaceScale[4]),
3637
+ /** 1.5rem (24px) */
3615
3638
  large: /*#__PURE__*/pxToRem(spaceScale[5]),
3639
+ /** 2rem (32px) */
3616
3640
  extraLarge: /*#__PURE__*/pxToRem(spaceScale[6]),
3641
+ /** 2.5rem (40px) */
3617
3642
  extraLarge2: /*#__PURE__*/pxToRem(spaceScale[7]),
3643
+ /** 3rem (48px) */
3618
3644
  extraLarge3: /*#__PURE__*/pxToRem(spaceScale[8]),
3645
+ /** 3.5rem (56px) */
3619
3646
  extraLarge4: /*#__PURE__*/pxToRem(spaceScale[9]),
3647
+ /** 4rem (64px) */
3620
3648
  extraLarge5: /*#__PURE__*/pxToRem(spaceScale[10]),
3649
+ /** 4.5rem (72px) */
3621
3650
  extraLarge6: /*#__PURE__*/pxToRem(spaceScale[11]),
3651
+ /** 5rem (80px) */
3622
3652
  extraLarge7: /*#__PURE__*/pxToRem(spaceScale[12]),
3653
+ /** 5.5rem (88px) */
3623
3654
  extraLarge8: /*#__PURE__*/pxToRem(spaceScale[13]),
3655
+ /** 6rem (96px) */
3624
3656
  extraLarge9: /*#__PURE__*/pxToRem(spaceScale[14])
3625
3657
  }
3626
3658
  };
@@ -3631,51 +3663,91 @@ var fontWeights = {
3631
3663
  };
3632
3664
  var fontSizeScale = [10, 12, 14, 16, 20, 24, 28, 32, 40];
3633
3665
  var fontSizes = {
3666
+ /** 10px (0.625rem) */
3634
3667
  extraSmall: fontSizeScale[0],
3668
+ /** 12px (0.75rem) */
3635
3669
  small: fontSizeScale[1],
3670
+ /** 14px (0.875rem) */
3636
3671
  medium: fontSizeScale[2],
3672
+ /** 16px (1rem) */
3637
3673
  large: fontSizeScale[3],
3674
+ /** 20 px (1.25rem) */
3638
3675
  extraLarge: fontSizeScale[4],
3676
+ /** 24 px (1.5rem) */
3639
3677
  extraLarge2: fontSizeScale[5],
3678
+ /** 28 px (1.75rem) */
3640
3679
  extraLarge3: fontSizeScale[6],
3680
+ /** 32 px (2rem) */
3641
3681
  extraLarge4: fontSizeScale[7],
3682
+ /** 40 px (2.5rem) */
3642
3683
  extraLarge5: fontSizeScale[8],
3643
3684
  rem: {
3685
+ /** 0.625rem (10px) */
3644
3686
  extraSmall: /*#__PURE__*/pxToRem(fontSizeScale[0]),
3687
+ /** 0.75rem (12px) */
3645
3688
  small: /*#__PURE__*/pxToRem(fontSizeScale[1]),
3689
+ /** 0.875rem (14px) */
3646
3690
  medium: /*#__PURE__*/pxToRem(fontSizeScale[2]),
3691
+ /** 1rem (16px) */
3647
3692
  large: /*#__PURE__*/pxToRem(fontSizeScale[3]),
3693
+ /** 1.25rem (20px) */
3648
3694
  extraLarge: /*#__PURE__*/pxToRem(fontSizeScale[4]),
3695
+ /** 1.5rem (24px) */
3649
3696
  extraLarge2: /*#__PURE__*/pxToRem(fontSizeScale[5]),
3697
+ /** 1.75rem (28px) */
3650
3698
  extraLarge3: /*#__PURE__*/pxToRem(fontSizeScale[6]),
3699
+ /** 2rem (32px) */
3651
3700
  extraLarge4: /*#__PURE__*/pxToRem(fontSizeScale[7]),
3701
+ /** 2.5rem (40px) */
3652
3702
  extraLarge5: /*#__PURE__*/pxToRem(fontSizeScale[8])
3653
3703
  }
3654
3704
  };
3655
3705
  var lineHeightScale = [14, 16, 20, 22, 24, 28, 30, 36, 42, 48, 60];
3656
3706
  var lineHeights = {
3707
+ /** 14px (0.875rem) */
3657
3708
  extraSmall: lineHeightScale[0],
3709
+ /** 16px (1rem) */
3658
3710
  small: lineHeightScale[1],
3711
+ /** 20px (1.25rem) */
3659
3712
  medium: lineHeightScale[2],
3713
+ /** 22px (1.375rem) */
3660
3714
  large: lineHeightScale[3],
3715
+ /** 24px (1.5rem) */
3661
3716
  extraLarge: lineHeightScale[4],
3717
+ /** 28px (1.75rem) */
3662
3718
  extraLarge2: lineHeightScale[5],
3719
+ /** 30px (1.875rem) */
3663
3720
  extraLarge3: lineHeightScale[6],
3721
+ /** 36px (2.25rem) */
3664
3722
  extraLarge4: lineHeightScale[7],
3723
+ /** 42px (2.625rem) */
3665
3724
  extraLarge5: lineHeightScale[8],
3725
+ /** 48px (3rem) */
3666
3726
  extraLarge6: lineHeightScale[9],
3727
+ /** 60px (3.75rem) */
3667
3728
  extraLarge7: lineHeightScale[10],
3668
3729
  rem: {
3730
+ /** 0.875rem (14px) */
3669
3731
  extraSmall: /*#__PURE__*/pxToRem(lineHeightScale[0]),
3732
+ /** 1rem (16px) */
3670
3733
  small: /*#__PURE__*/pxToRem(lineHeightScale[1]),
3734
+ /** 1.25rem (20px) */
3671
3735
  medium: /*#__PURE__*/pxToRem(lineHeightScale[2]),
3736
+ /** 1.375rem (22px) */
3672
3737
  large: /*#__PURE__*/pxToRem(lineHeightScale[3]),
3738
+ /** 1.5rem (24px) */
3673
3739
  extraLarge: /*#__PURE__*/pxToRem(lineHeightScale[4]),
3740
+ /** 1.75rem (28px) */
3674
3741
  extraLarge2: /*#__PURE__*/pxToRem(lineHeightScale[5]),
3742
+ /** 1.875rem (30px) */
3675
3743
  extraLarge3: /*#__PURE__*/pxToRem(lineHeightScale[6]),
3744
+ /** 2.25rem (36px) */
3676
3745
  extraLarge4: /*#__PURE__*/pxToRem(lineHeightScale[7]),
3746
+ /** 2.625rem (42px) */
3677
3747
  extraLarge5: /*#__PURE__*/pxToRem(lineHeightScale[8]),
3748
+ /** 3rem (48px) */
3678
3749
  extraLarge6: /*#__PURE__*/pxToRem(lineHeightScale[9]),
3750
+ /** 3.75rem (60px) */
3679
3751
  extraLarge7: /*#__PURE__*/pxToRem(lineHeightScale[10])
3680
3752
  }
3681
3753
  };
@@ -3691,27 +3763,43 @@ var breakpoints = {
3691
3763
  // Borders
3692
3764
  var borderWidthScale = [1, 2, 4];
3693
3765
  var borderWidths = {
3766
+ /** 2px (0.125rem) */
3694
3767
  "default": borderWidthScale[1],
3768
+ /** 1px (0.0625rem) */
3695
3769
  small: borderWidthScale[0],
3770
+ /** 2px (0.125rem) */
3696
3771
  medium: borderWidthScale[1],
3772
+ /** 4px (0.25rem) */
3697
3773
  large: borderWidthScale[2],
3698
3774
  rem: {
3775
+ /** 0.125rem (2px) */
3699
3776
  "default": /*#__PURE__*/pxToRem(borderWidthScale[1]),
3777
+ /** 0.0625rem (1px) */
3700
3778
  small: /*#__PURE__*/pxToRem(borderWidthScale[0]),
3779
+ /** 0.125rem (2px) */
3701
3780
  medium: /*#__PURE__*/pxToRem(borderWidthScale[1]),
3781
+ /** 0.25rem (4px) */
3702
3782
  large: /*#__PURE__*/pxToRem(borderWidthScale[2])
3703
3783
  }
3704
3784
  };
3705
3785
  var borderRadiusScale = [1, 4, 8];
3706
3786
  var borderRadiuses = {
3787
+ /** 1 px (0.0625rem) */
3707
3788
  "default": borderRadiusScale[0],
3789
+ /** 1 px (0.0625rem) */
3708
3790
  small: borderRadiusScale[0],
3791
+ /** 4 px (0.25rem) */
3709
3792
  medium: borderRadiusScale[1],
3793
+ /** 8 px (0.5rem) */
3710
3794
  large: borderRadiusScale[2],
3711
3795
  rem: {
3796
+ /** 0.0625rem (1px) */
3712
3797
  "default": /*#__PURE__*/pxToRem(borderRadiusScale[0]),
3798
+ /** 0.0625rem (1px) */
3713
3799
  small: /*#__PURE__*/pxToRem(borderRadiusScale[0]),
3800
+ /** 0.25rem (4px) */
3714
3801
  medium: /*#__PURE__*/pxToRem(borderRadiusScale[1]),
3802
+ /** 0.5rem (8px) */
3715
3803
  large: /*#__PURE__*/pxToRem(borderRadiusScale[2])
3716
3804
  }
3717
3805
  };
@@ -3738,8 +3826,11 @@ var zIndexes = {
3738
3826
  };
3739
3827
  var timingScale = ['0.1s', '0.2s', '0.5s'];
3740
3828
  var timings = {
3829
+ /** 0.1s */
3741
3830
  fast: timingScale[0],
3831
+ /** 0.2s */
3742
3832
  medium: timingScale[1],
3833
+ /** 0.5s */
3743
3834
  slow: timingScale[2]
3744
3835
  };
3745
3836
  var outlines = {
@@ -3748,8 +3839,10 @@ var outlines = {
3748
3839
  };
3749
3840
  var outlineOffsetsConstants = [2];
3750
3841
  var outlineOffsets = {
3842
+ /** 2px (0.125rem) */
3751
3843
  focus: outlineOffsetsConstants[0],
3752
3844
  rem: {
3845
+ /** 0.125rem (2px) */
3753
3846
  focus: /*#__PURE__*/pxToRem(outlineOffsetsConstants[0])
3754
3847
  }
3755
3848
  };