@entur/tokens 3.17.5 → 3.17.7-beta.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.
@@ -103,9 +103,13 @@ export declare const componentColors: {
103
103
  borderDefault: string;
104
104
  borderActive: string;
105
105
  divide: string;
106
- fillDefault: string;
106
+ fillDefaultSolid: string;
107
+ fillDefaultTransparent: string;
107
108
  fillHoveractive: string;
108
109
  icon: string;
110
+ shadowLayer1: string;
111
+ shadowLayer2: string;
112
+ shadowLayer3: string;
109
113
  subjectText: string;
110
114
  text: string;
111
115
  };
@@ -113,9 +117,13 @@ export declare const componentColors: {
113
117
  borderDefault: string;
114
118
  borderActive: string;
115
119
  divide: string;
116
- fillDefault: string;
120
+ fillDefaultSolid: string;
121
+ fillDefaultTransparent: string;
117
122
  fillHoveractive: string;
118
123
  icon: string;
124
+ shadowLayer1: string;
125
+ shadowLayer2: string;
126
+ shadowLayer3: string;
119
127
  subjectText: string;
120
128
  text: string;
121
129
  };
@@ -126,57 +134,81 @@ export declare const componentColors: {
126
134
  information: {
127
135
  contrast: {
128
136
  border: string;
129
- fill: string;
130
- icon: string;
131
- text: string;
137
+ fillDefault: string;
138
+ fillToast: string;
139
+ iconDefault: string;
140
+ iconToast: string;
141
+ textDefault: string;
142
+ textToast: string;
132
143
  };
133
144
  standard: {
134
145
  border: string;
135
- fill: string;
136
- icon: string;
137
- text: string;
146
+ fillDefault: string;
147
+ fillToast: string;
148
+ iconDefault: string;
149
+ iconToast: string;
150
+ textDefault: string;
151
+ textToast: string;
138
152
  };
139
153
  };
140
154
  negative: {
141
155
  contrast: {
142
156
  border: string;
143
- fill: string;
144
- icon: string;
145
- text: string;
157
+ fillDefault: string;
158
+ fillToast: string;
159
+ iconDefault: string;
160
+ iconToast: string;
161
+ textDefault: string;
162
+ textToast: string;
146
163
  };
147
164
  standard: {
148
165
  border: string;
149
- fill: string;
150
- icon: string;
151
- text: string;
166
+ fillDefault: string;
167
+ fillToast: string;
168
+ iconDefault: string;
169
+ iconToast: string;
170
+ textDefault: string;
171
+ textToast: string;
152
172
  };
153
173
  };
154
174
  success: {
155
175
  contrast: {
156
176
  border: string;
157
- fill: string;
158
- icon: string;
159
- text: string;
177
+ fillDefault: string;
178
+ fillToast: string;
179
+ iconDefault: string;
180
+ iconToast: string;
181
+ textDefault: string;
182
+ textToast: string;
160
183
  };
161
184
  standard: {
162
185
  border: string;
163
- fill: string;
164
- icon: string;
165
- text: string;
186
+ fillDefault: string;
187
+ fillToast: string;
188
+ iconDefault: string;
189
+ iconToast: string;
190
+ textDefault: string;
191
+ textToast: string;
166
192
  };
167
193
  };
168
194
  warning: {
169
195
  contrast: {
170
196
  border: string;
171
- fill: string;
172
- icon: string;
173
- text: string;
197
+ fillDefault: string;
198
+ fillToast: string;
199
+ iconDefault: string;
200
+ iconToast: string;
201
+ textDefault: string;
202
+ textDefault2: string;
174
203
  };
175
204
  standard: {
176
205
  border: string;
177
- fill: string;
178
- icon: string;
179
- text: string;
206
+ fillDefault: string;
207
+ fillToast: string;
208
+ iconDefault: string;
209
+ iconToast: string;
210
+ textDefault: string;
211
+ textToast: string;
180
212
  };
181
213
  };
182
214
  };
@@ -1524,9 +1556,13 @@ export declare const componentColors: {
1524
1556
  borderDefault: string;
1525
1557
  borderActive: string;
1526
1558
  divide: string;
1527
- fillDefault: string;
1559
+ fillDefaultSolid: string;
1560
+ fillDefaultTransparent: string;
1528
1561
  fillHoveractive: string;
1529
1562
  icon: string;
1563
+ shadowLayer1: string;
1564
+ shadowLayer2: string;
1565
+ shadowLayer3: string;
1530
1566
  subjectText: string;
1531
1567
  text: string;
1532
1568
  };
@@ -1534,9 +1570,13 @@ export declare const componentColors: {
1534
1570
  borderDefault: string;
1535
1571
  borderActive: string;
1536
1572
  divide: string;
1537
- fillDefault: string;
1573
+ fillDefaultSolid: string;
1574
+ fillDefaultTransparent: string;
1538
1575
  fillHoveractive: string;
1539
1576
  icon: string;
1577
+ shadowLayer1: string;
1578
+ shadowLayer2: string;
1579
+ shadowLayer3: string;
1540
1580
  subjectText: string;
1541
1581
  text: string;
1542
1582
  };
@@ -1547,57 +1587,81 @@ export declare const componentColors: {
1547
1587
  information: {
1548
1588
  contrast: {
1549
1589
  border: string;
1550
- fill: string;
1551
- icon: string;
1552
- text: string;
1590
+ fillDefault: string;
1591
+ fillToast: string;
1592
+ iconDefault: string;
1593
+ iconToast: string;
1594
+ textDefault: string;
1595
+ textToast: string;
1553
1596
  };
1554
1597
  standard: {
1555
1598
  border: string;
1556
- fill: string;
1557
- icon: string;
1558
- text: string;
1599
+ fillDefault: string;
1600
+ fillToast: string;
1601
+ iconDefault: string;
1602
+ iconToast: string;
1603
+ textDefault: string;
1604
+ textToast: string;
1559
1605
  };
1560
1606
  };
1561
1607
  negative: {
1562
1608
  contrast: {
1563
1609
  border: string;
1564
- fill: string;
1565
- icon: string;
1566
- text: string;
1610
+ fillDefault: string;
1611
+ fillToast: string;
1612
+ iconDefault: string;
1613
+ iconToast: string;
1614
+ textDefault: string;
1615
+ textToast: string;
1567
1616
  };
1568
1617
  standard: {
1569
1618
  border: string;
1570
- fill: string;
1571
- icon: string;
1572
- text: string;
1619
+ fillDefault: string;
1620
+ fillToast: string;
1621
+ iconDefault: string;
1622
+ iconToast: string;
1623
+ textDefault: string;
1624
+ textToast: string;
1573
1625
  };
1574
1626
  };
1575
1627
  success: {
1576
1628
  contrast: {
1577
1629
  border: string;
1578
- fill: string;
1579
- icon: string;
1580
- text: string;
1630
+ fillDefault: string;
1631
+ fillToast: string;
1632
+ iconDefault: string;
1633
+ iconToast: string;
1634
+ textDefault: string;
1635
+ textToast: string;
1581
1636
  };
1582
1637
  standard: {
1583
1638
  border: string;
1584
- fill: string;
1585
- icon: string;
1586
- text: string;
1639
+ fillDefault: string;
1640
+ fillToast: string;
1641
+ iconDefault: string;
1642
+ iconToast: string;
1643
+ textDefault: string;
1644
+ textToast: string;
1587
1645
  };
1588
1646
  };
1589
1647
  warning: {
1590
1648
  contrast: {
1591
1649
  border: string;
1592
- fill: string;
1593
- icon: string;
1594
- text: string;
1650
+ fillDefault: string;
1651
+ fillToast: string;
1652
+ iconDefault: string;
1653
+ iconToast: string;
1654
+ textDefault: string;
1655
+ textDefault2: string;
1595
1656
  };
1596
1657
  standard: {
1597
1658
  border: string;
1598
- fill: string;
1599
- icon: string;
1600
- text: string;
1659
+ fillDefault: string;
1660
+ fillToast: string;
1661
+ iconDefault: string;
1662
+ iconToast: string;
1663
+ textDefault: string;
1664
+ textToast: string;
1601
1665
  };
1602
1666
  };
1603
1667
  };
package/dist/semantic.css CHANGED
@@ -11,6 +11,7 @@
11
11
  --fill-background-overlay-solidalt: var(--ebony-75);
12
12
  --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
13
13
  --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
14
+ --fill-background-overlay-transparentalt2: var(--transparent-ebony-alpha20);
14
15
  --fill-background-standard-colorless: var(--white-alpha-0);
15
16
  --fill-background-standard-dark: var(--ebony-100);
16
17
  --fill-background-standard-light: var(--white-alpha-100);
@@ -12,6 +12,7 @@ export declare const semantic: {
12
12
  solidalt: string;
13
13
  transparent: string;
14
14
  transparentalt: string;
15
+ transparentalt2: string;
15
16
  };
16
17
  standard: {
17
18
  colorless: string;
@@ -11,6 +11,7 @@
11
11
  @fill-background-overlay-solidalt: @ebony-75;
12
12
  @fill-background-overlay-transparent: @transparent-ebony-alpha15;
13
13
  @fill-background-overlay-transparentalt: @transparent-ebony-alpha25;
14
+ @fill-background-overlay-transparentalt2: @transparent-ebony-alpha20;
14
15
  @fill-background-standard-colorless: @white-alpha-0;
15
16
  @fill-background-standard-dark: @ebony-100;
16
17
  @fill-background-standard-light: @white-alpha-100;
@@ -12,6 +12,7 @@ $fill-background-overlay-solid: $ebony-80;
12
12
  $fill-background-overlay-solidalt: $ebony-75;
13
13
  $fill-background-overlay-transparent: $transparent-ebony-alpha15;
14
14
  $fill-background-overlay-transparentalt: $transparent-ebony-alpha25;
15
+ $fill-background-overlay-transparentalt2: $transparent-ebony-alpha20;
15
16
  $fill-background-standard-colorless: $white-alpha-0;
16
17
  $fill-background-standard-dark: $ebony-100;
17
18
  $fill-background-standard-light: $white-alpha-100;
@@ -175,7 +175,8 @@ var semantic = {
175
175
  "solid": "#393a49",
176
176
  "solidalt": "#464755",
177
177
  "transparent": "#e5e5e926",
178
- "transparentalt": "#e5e5e940"
178
+ "transparentalt": "#e5e5e940",
179
+ "transparentalt2": "#cccdd44d"
179
180
  },
180
181
  "standard": {
181
182
  "colorless": "#ffffff00",
@@ -772,9 +773,13 @@ var componentColors = {
772
773
  "borderDefault": "#ffffff00",
773
774
  "borderActive": "#aeb7e2",
774
775
  "divide": "#ff5959",
775
- "fillDefault": "#393d79",
776
+ "fillDefaultSolid": "#393d79",
777
+ "fillDefaultTransparent": "#393d79",
776
778
  "fillHoveractive": "#54568c",
777
779
  "icon": "#ffffff",
780
+ "shadowLayer1": "#ffffff00",
781
+ "shadowLayer2": "#ffffff00",
782
+ "shadowLayer3": "#ffffff00",
778
783
  "subjectText": "#d9dae8",
779
784
  "text": "#ffffff"
780
785
  },
@@ -782,9 +787,13 @@ var componentColors = {
782
787
  "borderDefault": "#e3e6e8",
783
788
  "borderActive": "#181c56",
784
789
  "divide": "#ff5959",
785
- "fillDefault": "#ffffff",
790
+ "fillDefaultSolid": "#ffffff",
791
+ "fillDefaultTransparent": "#ffffff",
786
792
  "fillHoveractive": "#f6f6f9",
787
793
  "icon": "#181c56",
794
+ "shadowLayer1": "#cccdd44d",
795
+ "shadowLayer2": "#e5e5e959",
796
+ "shadowLayer3": "#e5e5e926",
788
797
  "subjectText": "#626493",
789
798
  "text": "#181c56"
790
799
  }
@@ -794,58 +803,82 @@ var componentColors = {
794
803
  "alertbox": {
795
804
  "information": {
796
805
  "contrast": {
797
- "border": "#ffffff00",
798
- "fill": "#acd7f1",
799
- "icon": "#181c56",
800
- "text": "#181c56"
806
+ "border": "#067eb2",
807
+ "fillDefault": "#acd7f1",
808
+ "fillToast": "#acd7f1",
809
+ "iconDefault": "#181c56",
810
+ "iconToast": "#181c56",
811
+ "textDefault": "#181c56",
812
+ "textToast": "#181c56"
801
813
  },
802
814
  "standard": {
803
815
  "border": "#067eb2",
804
- "fill": "#e1eff8",
805
- "icon": "#067eb2",
806
- "text": "#181c56"
816
+ "fillDefault": "#e1eff8",
817
+ "fillToast": "#e1eff8",
818
+ "iconDefault": "#067eb2",
819
+ "iconToast": "#067eb2",
820
+ "textDefault": "#181c56",
821
+ "textToast": "#181c56"
807
822
  }
808
823
  },
809
824
  "negative": {
810
825
  "contrast": {
811
- "border": "#ffffff00",
812
- "fill": "#ff9494",
813
- "icon": "#181c56",
814
- "text": "#181c56"
826
+ "border": "#d31b1b",
827
+ "fillDefault": "#ff9494",
828
+ "fillToast": "#ff9494",
829
+ "iconDefault": "#181c56",
830
+ "iconToast": "#181c56",
831
+ "textDefault": "#181c56",
832
+ "textToast": "#181c56"
815
833
  },
816
834
  "standard": {
817
835
  "border": "#d31b1b",
818
- "fill": "#ffcece",
819
- "icon": "#d31b1b",
820
- "text": "#181c56"
836
+ "fillDefault": "#ffcece",
837
+ "fillToast": "#ffcece",
838
+ "iconDefault": "#d31b1b",
839
+ "iconToast": "#d31b1b",
840
+ "textDefault": "#181c56",
841
+ "textToast": "#181c56"
821
842
  }
822
843
  },
823
844
  "success": {
824
845
  "contrast": {
825
- "border": "#ffffff00",
826
- "fill": "#9cd9c2",
827
- "icon": "#181c56",
828
- "text": "#181c56"
846
+ "border": "#1a8e60",
847
+ "fillDefault": "#9cd9c2",
848
+ "fillToast": "#9cd9c2",
849
+ "iconDefault": "#181c56",
850
+ "iconToast": "#181c56",
851
+ "textDefault": "#181c56",
852
+ "textToast": "#181c56"
829
853
  },
830
854
  "standard": {
831
855
  "border": "#1a8e60",
832
- "fill": "#d0f1e3",
833
- "icon": "#1a8e60",
834
- "text": "#181c56"
856
+ "fillDefault": "#d0f1e3",
857
+ "fillToast": "#d0f1e3",
858
+ "iconDefault": "#1a8e60",
859
+ "iconToast": "#1a8e60",
860
+ "textDefault": "#181c56",
861
+ "textToast": "#181c56"
835
862
  }
836
863
  },
837
864
  "warning": {
838
865
  "contrast": {
839
- "border": "#ffffff00",
840
- "fill": "#ffeeb3",
841
- "icon": "#181c56",
842
- "text": "#181c56"
866
+ "border": "#e9b10c",
867
+ "fillDefault": "#ffeeb3",
868
+ "fillToast": "#ffeeb3",
869
+ "iconDefault": "#181c56",
870
+ "iconToast": "#181c56",
871
+ "textDefault": "#181c56",
872
+ "textDefault2": "#181c56"
843
873
  },
844
874
  "standard": {
845
875
  "border": "#e9b10c",
846
- "fill": "#fff4cd",
847
- "icon": "#181c56",
848
- "text": "#181c56"
876
+ "fillDefault": "#fff4cd",
877
+ "fillToast": "#fff4cd",
878
+ "iconDefault": "#181c56",
879
+ "iconToast": "#181c56",
880
+ "textDefault": "#181c56",
881
+ "textToast": "#181c56"
849
882
  }
850
883
  }
851
884
  },
@@ -2192,20 +2225,28 @@ var componentColors = {
2192
2225
  "contrast": {
2193
2226
  "borderDefault": "#ffffff00",
2194
2227
  "borderActive": "#b3b4bd",
2195
- "divide": "#ff9494",
2196
- "fillDefault": "#e5e5e926",
2197
- "fillHoveractive": "#393a49",
2228
+ "divide": "#ff5959",
2229
+ "fillDefaultSolid": "#393a49",
2230
+ "fillDefaultTransparent": "#e5e5e926",
2231
+ "fillHoveractive": "#464755",
2198
2232
  "icon": "#e5e5e9",
2233
+ "shadowLayer1": "#ffffff00",
2234
+ "shadowLayer2": "#ffffff00",
2235
+ "shadowLayer3": "#ffffff00",
2199
2236
  "subjectText": "#b3b4bd",
2200
2237
  "text": "#e5e5e9"
2201
2238
  },
2202
2239
  "standard": {
2203
2240
  "borderDefault": "#ffffff00",
2204
2241
  "borderActive": "#b3b4bd",
2205
- "divide": "#ff9494",
2206
- "fillDefault": "#e5e5e926",
2207
- "fillHoveractive": "#393a49",
2242
+ "divide": "#ff5959",
2243
+ "fillDefaultSolid": "#393a49",
2244
+ "fillDefaultTransparent": "#e5e5e926",
2245
+ "fillHoveractive": "#464755",
2208
2246
  "icon": "#e5e5e9",
2247
+ "shadowLayer1": "#ffffff00",
2248
+ "shadowLayer2": "#ffffff00",
2249
+ "shadowLayer3": "#ffffff00",
2209
2250
  "subjectText": "#b3b4bd",
2210
2251
  "text": "#e5e5e9"
2211
2252
  }
@@ -2215,58 +2256,82 @@ var componentColors = {
2215
2256
  "alertbox": {
2216
2257
  "information": {
2217
2258
  "contrast": {
2218
- "border": "#acd7f1",
2219
- "fill": "#2d98d233",
2220
- "icon": "#acd7f1",
2221
- "text": "#e5e5e9"
2259
+ "border": "#067eb2",
2260
+ "fillDefault": "#2d98d233",
2261
+ "fillToast": "#acd7f1",
2262
+ "iconDefault": "#acd7f1",
2263
+ "iconToast": "#181c56",
2264
+ "textDefault": "#e5e5e9",
2265
+ "textToast": "#181c56"
2222
2266
  },
2223
2267
  "standard": {
2224
- "border": "#acd7f1",
2225
- "fill": "#2d98d233",
2226
- "icon": "#acd7f1",
2227
- "text": "#e5e5e9"
2268
+ "border": "#067eb2",
2269
+ "fillDefault": "#2d98d233",
2270
+ "fillToast": "#acd7f1",
2271
+ "iconDefault": "#acd7f1",
2272
+ "iconToast": "#067eb2",
2273
+ "textDefault": "#e5e5e9",
2274
+ "textToast": "#181c56"
2228
2275
  }
2229
2276
  },
2230
2277
  "negative": {
2231
2278
  "contrast": {
2232
- "border": "#ff9494",
2233
- "fill": "#ff949433",
2234
- "icon": "#ff9494",
2235
- "text": "#e5e5e9"
2279
+ "border": "#d31b1b",
2280
+ "fillDefault": "#ff949433",
2281
+ "fillToast": "#ff9494",
2282
+ "iconDefault": "#ff9494",
2283
+ "iconToast": "#181c56",
2284
+ "textDefault": "#e5e5e9",
2285
+ "textToast": "#181c56"
2236
2286
  },
2237
2287
  "standard": {
2238
- "border": "#ff9494",
2239
- "fill": "#ff949433",
2240
- "icon": "#ff9494",
2241
- "text": "#e5e5e9"
2288
+ "border": "#d31b1b",
2289
+ "fillDefault": "#ff949433",
2290
+ "fillToast": "#ff9494",
2291
+ "iconDefault": "#ff9494",
2292
+ "iconToast": "#d31b1b",
2293
+ "textDefault": "#e5e5e9",
2294
+ "textToast": "#181c56"
2242
2295
  }
2243
2296
  },
2244
2297
  "success": {
2245
2298
  "contrast": {
2246
- "border": "#9cd9c2",
2247
- "fill": "#5ac39a33",
2248
- "icon": "#9cd9c2",
2249
- "text": "#e5e5e9"
2299
+ "border": "#1a8e60",
2300
+ "fillDefault": "#5ac39a33",
2301
+ "fillToast": "#9cd9c2",
2302
+ "iconDefault": "#9cd9c2",
2303
+ "iconToast": "#181c56",
2304
+ "textDefault": "#e5e5e9",
2305
+ "textToast": "#181c56"
2250
2306
  },
2251
2307
  "standard": {
2252
- "border": "#9cd9c2",
2253
- "fill": "#5ac39a33",
2254
- "icon": "#9cd9c2",
2255
- "text": "#e5e5e9"
2308
+ "border": "#1a8e60",
2309
+ "fillDefault": "#5ac39a33",
2310
+ "fillToast": "#9cd9c2",
2311
+ "iconDefault": "#9cd9c2",
2312
+ "iconToast": "#1a8e60",
2313
+ "textDefault": "#e5e5e9",
2314
+ "textToast": "#181c56"
2256
2315
  }
2257
2316
  },
2258
2317
  "warning": {
2259
2318
  "contrast": {
2260
- "border": "#ffeeb3",
2261
- "fill": "#ffe08240",
2262
- "icon": "#ffeeb3",
2263
- "text": "#e5e5e9"
2319
+ "border": "#e9b10c",
2320
+ "fillDefault": "#ffe08240",
2321
+ "fillToast": "#ffeeb3",
2322
+ "iconDefault": "#181c56",
2323
+ "iconToast": "#181c56",
2324
+ "textDefault": "#e5e5e9",
2325
+ "textDefault2": "#e5e5e9"
2264
2326
  },
2265
2327
  "standard": {
2266
- "border": "#ffeeb3",
2267
- "fill": "#ffe08240",
2268
- "icon": "#ffeeb3",
2269
- "text": "#e5e5e9"
2328
+ "border": "#e9b10c",
2329
+ "fillDefault": "#ffe08240",
2330
+ "fillToast": "#ffeeb3",
2331
+ "iconDefault": "#ffeeb3",
2332
+ "iconToast": "#181c56",
2333
+ "textDefault": "#e5e5e9",
2334
+ "textToast": "#181c56"
2270
2335
  }
2271
2336
  }
2272
2337
  },