@entur/tokens 3.22.5 → 3.24.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 (16) hide show
  1. package/dist/base.css +10 -4
  2. package/dist/base.scss +10 -4
  3. package/dist/generated-js-objects/base.d.ts +6 -0
  4. package/dist/generated-js-objects/componentVariables.d.ts +120 -196
  5. package/dist/generated-js-objects/semantic.d.ts +10 -4
  6. package/dist/primitive.css +3 -3
  7. package/dist/primitive.less +3 -3
  8. package/dist/primitive.scss +3 -3
  9. package/dist/semantic.css +13 -7
  10. package/dist/semantic.less +13 -7
  11. package/dist/semantic.scss +13 -7
  12. package/dist/tokens.cjs.js +4 -4
  13. package/dist/tokens.cjs.js.map +1 -1
  14. package/dist/tokens.esm.js +4 -4
  15. package/dist/tokens.esm.js.map +1 -1
  16. package/package.json +2 -2
package/dist/generated-js-objects/semantic.d.ts CHANGED
@@ -48,13 +48,14 @@ export declare const semantic: {
48
48
  transparentalt: string;
49
49
  };
50
50
  information: {
51
+ accent: string;
51
52
  contrast: string;
52
53
  deep: string;
53
54
  muted: string;
54
55
  tint: string;
55
- transparent: string;
56
56
  };
57
57
  negative: {
58
+ accent: string;
58
59
  contrast: string;
59
60
  dark: string;
60
61
  deep: string;
@@ -96,28 +97,32 @@ export declare const semantic: {
96
97
  darkalt: string;
97
98
  light: string;
98
99
  neutral: string;
100
+ tint: string;
101
+ darktint: string;
99
102
  };
100
103
  hover: {
101
104
  contrast: string;
102
105
  dark: string;
103
106
  light: string;
104
107
  neutral: string;
108
+ tint: string;
109
+ darktint: string;
105
110
  };
106
111
  };
107
112
  success: {
113
+ accent: string;
108
114
  contrast: string;
109
115
  deep: string;
110
116
  muted: string;
111
117
  subdued: string;
112
118
  tint: string;
113
- transparent: string;
114
119
  };
115
120
  warning: {
121
+ accent: string;
116
122
  contrast: string;
117
123
  deep: string;
118
124
  muted: string;
119
125
  tint: string;
120
- transparent: string;
121
126
  };
122
127
  };
123
128
  shape: {
@@ -153,10 +158,10 @@ export declare const semantic: {
153
158
  colorless: string;
154
159
  contrast: string;
155
160
  contrastalt: string;
161
+ contrastalt2: string;
156
162
  dark: string;
157
163
  darkalt: string;
158
164
  darkalt2: string;
159
- highContrast: string;
160
165
  highlight: string;
161
166
  highlightalt: string;
162
167
  information: string;
@@ -178,6 +183,7 @@ export declare const semantic: {
178
183
  };
179
184
  text: {
180
185
  accent: string;
186
+ contrast: string;
181
187
  dark: string;
182
188
  darkalt: string;
183
189
  disabled: string;
package/dist/primitive.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --blue-80: #54568c;
14
14
  --blue-90: #393d79;
15
15
  --canary-10: #fffbeb;
16
- --canary-100: #483705;
16
+ --canary-100: #302403;
17
17
  --canary-20: #fff4cd;
18
18
  --canary-30: #ffeeb3;
19
19
  --canary-40: #ffe082;
@@ -23,7 +23,7 @@
23
23
  --canary-80: #b38909;
24
24
  --canary-90: #775b09;
25
25
  --coral-10: #ffe5e5;
26
- --coral-100: #370606;
26
+ --coral-100: #2e0505;
27
27
  --coral-20: #ffcece;
28
28
  --coral-30: #ff9494;
29
29
  --coral-40: #ff5959;
@@ -94,7 +94,7 @@
94
94
  --peach-80: #ae4009;
95
95
  --peach-90: #742b06;
96
96
  --sky-10: #e1eff8;
97
- --sky-100: #011a23;
97
+ --sky-100: #022231;
98
98
  --sky-20: #acd7f1;
99
99
  --sky-30: #64b3e7;
100
100
  --sky-40: #2d98d2;
package/dist/primitive.less CHANGED
@@ -13,7 +13,7 @@
13
13
  @blue-80: #54568c;
14
14
  @blue-90: #393d79;
15
15
  @canary-10: #fffbeb;
16
- @canary-100: #483705;
16
+ @canary-100: #302403;
17
17
  @canary-20: #fff4cd;
18
18
  @canary-30: #ffeeb3;
19
19
  @canary-40: #ffe082;
@@ -23,7 +23,7 @@
23
23
  @canary-80: #b38909;
24
24
  @canary-90: #775b09;
25
25
  @coral-10: #ffe5e5;
26
- @coral-100: #370606;
26
+ @coral-100: #2e0505;
27
27
  @coral-20: #ffcece;
28
28
  @coral-30: #ff9494;
29
29
  @coral-40: #ff5959;
@@ -94,7 +94,7 @@
94
94
  @peach-80: #ae4009;
95
95
  @peach-90: #742b06;
96
96
  @sky-10: #e1eff8;
97
- @sky-100: #011a23;
97
+ @sky-100: #022231;
98
98
  @sky-20: #acd7f1;
99
99
  @sky-30: #64b3e7;
100
100
  @sky-40: #2d98d2;
package/dist/primitive.scss CHANGED
@@ -13,7 +13,7 @@ $blue-70: #626493;
13
13
  $blue-80: #54568c;
14
14
  $blue-90: #393d79;
15
15
  $canary-10: #fffbeb;
16
- $canary-100: #483705;
16
+ $canary-100: #302403;
17
17
  $canary-20: #fff4cd;
18
18
  $canary-30: #ffeeb3;
19
19
  $canary-40: #ffe082;
@@ -23,7 +23,7 @@ $canary-70: #e9b10c;
23
23
  $canary-80: #b38909;
24
24
  $canary-90: #775b09;
25
25
  $coral-10: #ffe5e5;
26
- $coral-100: #370606;
26
+ $coral-100: #2e0505;
27
27
  $coral-20: #ffcece;
28
28
  $coral-30: #ff9494;
29
29
  $coral-40: #ff5959;
@@ -94,7 +94,7 @@ $peach-70: #e6560f;
94
94
  $peach-80: #ae4009;
95
95
  $peach-90: #742b06;
96
96
  $sky-10: #e1eff8;
97
- $sky-100: #011a23;
97
+ $sky-100: #022231;
98
98
  $sky-20: #acd7f1;
99
99
  $sky-30: #64b3e7;
100
100
  $sky-40: #2d98d2;
package/dist/semantic.css CHANGED
@@ -30,11 +30,12 @@
30
30
  --fill-disabled-light: var(--grey-40);
31
31
  --fill-disabled-transparent: var(--transparent-neutral-alpha15);
32
32
  --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
33
+ --fill-information-accent: var(--sky-100);
33
34
  --fill-information-contrast: var(--sky-30);
34
35
  --fill-information-deep: var(--sky-50);
35
36
  --fill-information-muted: var(--sky-10);
36
37
  --fill-information-tint: var(--sky-20);
37
- --fill-information-transparent: var(--transparent-sky-alpha20);
38
+ --fill-negative-accent: var(--coral-100);
38
39
  --fill-negative-contrast: var(--coral-40);
39
40
  --fill-negative-dark: var(--coral-90);
40
41
  --fill-negative-deep: var(--coral-60);
@@ -57,28 +58,32 @@
57
58
  --fill-selected-default-darkalt: var(--ebony-50);
58
59
  --fill-selected-default-light: var(--blue-10);
59
60
  --fill-selected-default-neutral: var(--grey-30);
61
+ --fill-selected-default-tint: var(--blue-20);
62
+ --fill-selected-default-darktint: var(--ebony-70);
60
63
  --fill-selected-hover-contrast: var(--blue-80);
61
64
  --fill-selected-hover-dark: var(--transparent-ebony-alpha35);
62
65
  --fill-selected-hover-light: var(--blue-20);
63
66
  --fill-selected-hover-neutral: var(--grey-20);
67
+ --fill-selected-hover-tint: var(--blue-30);
68
+ --fill-selected-hover-darktint: var(--ebony-65);
69
+ --fill-success-accent: var(--mint-100);
64
70
  --fill-success-contrast: var(--mint-40);
65
71
  --fill-success-deep: var(--mint-60);
66
72
  --fill-success-muted: var(--mint-20);
67
73
  --fill-success-subdued: var(--mint-50);
68
74
  --fill-success-tint: var(--mint-30);
69
- --fill-success-transparent: var(--transparent-mint-alpha20);
75
+ --fill-warning-accent: var(--canary-100);
70
76
  --fill-warning-contrast: var(--canary-40);
71
77
  --fill-warning-deep: var(--canary-60);
72
78
  --fill-warning-muted: var(--canary-20);
73
79
  --fill-warning-tint: var(--canary-30);
74
- --fill-warning-transparent: var(--transparent-canary-alpha25);
75
80
  --shape-accent: var(--lavender-90);
76
81
  --shape-contrast: var(--lavender-40);
77
82
  --shape-dark: var(--ebony-100);
78
83
  --shape-darkalt: var(--ebony-30);
79
84
  --shape-disabled: var(--grey-80);
80
85
  --shape-highlight: var(--coral-40);
81
- --shape-highlightalt: var(--coral-30);
86
+ --shape-highlightalt: var(--peach-40);
82
87
  --shape-inactive: var(--blue-40);
83
88
  --shape-information: var(--sky-50);
84
89
  --shape-informationalt: var(--sky-30);
@@ -102,12 +107,12 @@
102
107
  --stroke-colorless: var(--white-alpha-0);
103
108
  --stroke-contrast: var(--lavender-40);
104
109
  --stroke-contrastalt: var(--blue-80);
110
+ --stroke-contrastalt-2: var(--lavender-100);
105
111
  --stroke-dark: var(--ebony-30);
106
112
  --stroke-darkalt: var(--ebony-50);
107
113
  --stroke-darkalt-2: var(--ebony-100);
108
- --stroke-highcontrast: var(--lavender-100);
109
114
  --stroke-highlight: var(--coral-40);
110
- --stroke-highlightalt: var(--coral-30);
115
+ --stroke-highlightalt: var(--peach-40);
111
116
  --stroke-information: var(--sky-50);
112
117
  --stroke-informationalt: var(--sky-20);
113
118
  --stroke-light: var(--white-alpha-100);
@@ -125,10 +130,11 @@
125
130
  --stroke-warning: var(--canary-70);
126
131
  --stroke-warningalt: var(--canary-30);
127
132
  --text-accent: var(--lavender-90);
133
+ --text-contrast: var(--lavender-40);
128
134
  --text-dark: var(--ebony-100);
129
135
  --text-darkalt: var(--ebony-30);
130
136
  --text-disabled: var(--grey-80);
131
- --text-highlight: var(--lavender-40);
137
+ --text-highlight: var(--coral-40);
132
138
  --text-highlightalt: var(--peach-40);
133
139
  --text-light: var(--white-alpha-100);
134
140
  --text-lightalt: var(--ebony-10);
package/dist/semantic.less CHANGED
@@ -30,11 +30,12 @@
30
30
  @fill-disabled-light: @grey-40;
31
31
  @fill-disabled-transparent: @transparent-neutral-alpha15;
32
32
  @fill-disabled-transparentalt: @transparent-neutral-alpha10;
33
+ @fill-information-accent: @sky-100;
33
34
  @fill-information-contrast: @sky-30;
34
35
  @fill-information-deep: @sky-50;
35
36
  @fill-information-muted: @sky-10;
36
37
  @fill-information-tint: @sky-20;
37
- @fill-information-transparent: @transparent-sky-alpha20;
38
+ @fill-negative-accent: @coral-100;
38
39
  @fill-negative-contrast: @coral-40;
39
40
  @fill-negative-dark: @coral-90;
40
41
  @fill-negative-deep: @coral-60;
@@ -57,28 +58,32 @@
57
58
  @fill-selected-default-darkalt: @ebony-50;
58
59
  @fill-selected-default-light: @blue-10;
59
60
  @fill-selected-default-neutral: @grey-30;
61
+ @fill-selected-default-tint: @blue-20;
62
+ @fill-selected-default-darktint: @ebony-70;
60
63
  @fill-selected-hover-contrast: @blue-80;
61
64
  @fill-selected-hover-dark: @transparent-ebony-alpha35;
62
65
  @fill-selected-hover-light: @blue-20;
63
66
  @fill-selected-hover-neutral: @grey-20;
67
+ @fill-selected-hover-tint: @blue-30;
68
+ @fill-selected-hover-darktint: @ebony-65;
69
+ @fill-success-accent: @mint-100;
64
70
  @fill-success-contrast: @mint-40;
65
71
  @fill-success-deep: @mint-60;
66
72
  @fill-success-muted: @mint-20;
67
73
  @fill-success-subdued: @mint-50;
68
74
  @fill-success-tint: @mint-30;
69
- @fill-success-transparent: @transparent-mint-alpha20;
75
+ @fill-warning-accent: @canary-100;
70
76
  @fill-warning-contrast: @canary-40;
71
77
  @fill-warning-deep: @canary-60;
72
78
  @fill-warning-muted: @canary-20;
73
79
  @fill-warning-tint: @canary-30;
74
- @fill-warning-transparent: @transparent-canary-alpha25;
75
80
  @shape-accent: @lavender-90;
76
81
  @shape-contrast: @lavender-40;
77
82
  @shape-dark: @ebony-100;
78
83
  @shape-darkalt: @ebony-30;
79
84
  @shape-disabled: @grey-80;
80
85
  @shape-highlight: @coral-40;
81
- @shape-highlightalt: @coral-30;
86
+ @shape-highlightalt: @peach-40;
82
87
  @shape-inactive: @blue-40;
83
88
  @shape-information: @sky-50;
84
89
  @shape-informationalt: @sky-30;
@@ -102,12 +107,12 @@
102
107
  @stroke-colorless: @white-alpha-0;
103
108
  @stroke-contrast: @lavender-40;
104
109
  @stroke-contrastalt: @blue-80;
110
+ @stroke-contrastalt-2: @lavender-100;
105
111
  @stroke-dark: @ebony-30;
106
112
  @stroke-darkalt: @ebony-50;
107
113
  @stroke-darkalt-2: @ebony-100;
108
- @stroke-highcontrast: @lavender-100;
109
114
  @stroke-highlight: @coral-40;
110
- @stroke-highlightalt: @coral-30;
115
+ @stroke-highlightalt: @peach-40;
111
116
  @stroke-information: @sky-50;
112
117
  @stroke-informationalt: @sky-20;
113
118
  @stroke-light: @white-alpha-100;
@@ -125,10 +130,11 @@
125
130
  @stroke-warning: @canary-70;
126
131
  @stroke-warningalt: @canary-30;
127
132
  @text-accent: @lavender-90;
133
+ @text-contrast: @lavender-40;
128
134
  @text-dark: @ebony-100;
129
135
  @text-darkalt: @ebony-30;
130
136
  @text-disabled: @grey-80;
131
- @text-highlight: @lavender-40;
137
+ @text-highlight: @coral-40;
132
138
  @text-highlightalt: @peach-40;
133
139
  @text-light: @white-alpha-100;
134
140
  @text-lightalt: @ebony-10;
package/dist/semantic.scss CHANGED
@@ -31,11 +31,12 @@ $fill-boolean-true-light: $mint-60;
31
31
  $fill-disabled-light: $grey-40;
32
32
  $fill-disabled-transparent: $transparent-neutral-alpha15;
33
33
  $fill-disabled-transparentalt: $transparent-neutral-alpha10;
34
+ $fill-information-accent: $sky-100;
34
35
  $fill-information-contrast: $sky-30;
35
36
  $fill-information-deep: $sky-50;
36
37
  $fill-information-muted: $sky-10;
37
38
  $fill-information-tint: $sky-20;
38
- $fill-information-transparent: $transparent-sky-alpha20;
39
+ $fill-negative-accent: $coral-100;
39
40
  $fill-negative-contrast: $coral-40;
40
41
  $fill-negative-dark: $coral-90;
41
42
  $fill-negative-deep: $coral-60;
@@ -58,28 +59,32 @@ $fill-selected-default-dark: $ebony-10;
58
59
  $fill-selected-default-darkalt: $ebony-50;
59
60
  $fill-selected-default-light: $blue-10;
60
61
  $fill-selected-default-neutral: $grey-30;
62
+ $fill-selected-default-tint: $blue-20;
63
+ $fill-selected-default-darktint: $ebony-70;
61
64
  $fill-selected-hover-contrast: $blue-80;
62
65
  $fill-selected-hover-dark: $transparent-ebony-alpha35;
63
66
  $fill-selected-hover-light: $blue-20;
64
67
  $fill-selected-hover-neutral: $grey-20;
68
+ $fill-selected-hover-tint: $blue-30;
69
+ $fill-selected-hover-darktint: $ebony-65;
70
+ $fill-success-accent: $mint-100;
65
71
  $fill-success-contrast: $mint-40;
66
72
  $fill-success-deep: $mint-60;
67
73
  $fill-success-muted: $mint-20;
68
74
  $fill-success-subdued: $mint-50;
69
75
  $fill-success-tint: $mint-30;
70
- $fill-success-transparent: $transparent-mint-alpha20;
76
+ $fill-warning-accent: $canary-100;
71
77
  $fill-warning-contrast: $canary-40;
72
78
  $fill-warning-deep: $canary-60;
73
79
  $fill-warning-muted: $canary-20;
74
80
  $fill-warning-tint: $canary-30;
75
- $fill-warning-transparent: $transparent-canary-alpha25;
76
81
  $shape-accent: $lavender-90;
77
82
  $shape-contrast: $lavender-40;
78
83
  $shape-dark: $ebony-100;
79
84
  $shape-darkalt: $ebony-30;
80
85
  $shape-disabled: $grey-80;
81
86
  $shape-highlight: $coral-40;
82
- $shape-highlightalt: $coral-30;
87
+ $shape-highlightalt: $peach-40;
83
88
  $shape-inactive: $blue-40;
84
89
  $shape-information: $sky-50;
85
90
  $shape-informationalt: $sky-30;
@@ -103,12 +108,12 @@ $stroke-accent: $lavender-90;
103
108
  $stroke-colorless: $white-alpha-0;
104
109
  $stroke-contrast: $lavender-40;
105
110
  $stroke-contrastalt: $blue-80;
111
+ $stroke-contrastalt-2: $lavender-100;
106
112
  $stroke-dark: $ebony-30;
107
113
  $stroke-darkalt: $ebony-50;
108
114
  $stroke-darkalt-2: $ebony-100;
109
- $stroke-highcontrast: $lavender-100;
110
115
  $stroke-highlight: $coral-40;
111
- $stroke-highlightalt: $coral-30;
116
+ $stroke-highlightalt: $peach-40;
112
117
  $stroke-information: $sky-50;
113
118
  $stroke-informationalt: $sky-20;
114
119
  $stroke-light: $white-alpha-100;
@@ -126,10 +131,11 @@ $stroke-transparentalt: $transparent-lavender-alpha70;
126
131
  $stroke-warning: $canary-70;
127
132
  $stroke-warningalt: $canary-30;
128
133
  $text-accent: $lavender-90;
134
+ $text-contrast: $lavender-40;
129
135
  $text-dark: $ebony-100;
130
136
  $text-darkalt: $ebony-30;
131
137
  $text-disabled: $grey-80;
132
- $text-highlight: $lavender-40;
138
+ $text-highlight: $coral-40;
133
139
  $text-highlightalt: $peach-40;
134
140
  $text-light: $white-alpha-100;
135
141
  $text-lightalt: $ebony-10;