@entur/tokens 3.18.0 → 3.19.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.
Files changed (12) hide show
  1. package/README.md +3 -3
  2. package/dist/base.css +2 -0
  3. package/dist/base.d.ts +2 -0
  4. package/dist/base.scss +2 -0
  5. package/dist/componentColors.d.ts +48 -0
  6. package/dist/tokens.cjs.development.js +61 -11
  7. package/dist/tokens.cjs.development.js.map +1 -1
  8. package/dist/tokens.cjs.production.min.js +1 -1
  9. package/dist/tokens.cjs.production.min.js.map +1 -1
  10. package/dist/tokens.esm.js +61 -11
  11. package/dist/tokens.esm.js.map +1 -1
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
- # Entur design tokens
1
+ # Entur Linje design tokens
2
2
 
3
3
  This package contains all design tokens and design variables used throughout the design system. We are currently in a process to migrate over to a new design variable system based on [Figma Variables](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma).
4
4
 
5
5
  Since not all values are available as a variable yet and to avoid breaking changes, all previous design tokens will be kept around for a while. These are built from the `src/legacy-tokens.ts` file.
6
6
 
7
- > 💡 Looking for the [documentation](https://design.entur.no/tokens)?
7
+ > 💡 Looking for the [documentation](https://linje.entur.no/tokens)?
8
8
 
9
9
  ## Installation
10
10
 
@@ -16,7 +16,7 @@ yarn add @entur/tokens
16
16
 
17
17
  ## Usage
18
18
 
19
- Please refer to the [documentation](https://design.entur.no/tokens) for in-depth usage information.
19
+ Please refer to the [documentation](https://linje.entur.no/tokens) for in-depth usage information.
20
20
 
21
21
  This package has several main exports:
22
22
 
package/dist/base.css CHANGED
@@ -7,6 +7,7 @@
7
7
  :root {
8
8
  --basecolors-frame-contrast: var(--fill-background-contrast-light);
9
9
  --basecolors-frame-contrastalt: var(--fill-background-contrast-lightalt);
10
+ --basecolors-frame-contrastalt-2: var(--fill-background-contrast-lightalt-2);
10
11
  --basecolors-frame-default: var(--fill-background-standard-light);
11
12
  --basecolors-frame-elevated: var(--fill-background-standard-light);
12
13
  --basecolors-frame-elevatedalt: var(--fill-background-tint-light);
@@ -72,6 +73,7 @@
72
73
  [data-color-mode='dark'] {
73
74
  --basecolors-frame-contrast: var(--fill-background-contrast-dark);
74
75
  --basecolors-frame-contrastalt: var(--fill-background-tint-dark);
76
+ --basecolors-frame-contrastalt-2: var(--fill-background-standard-dark);
75
77
  --basecolors-frame-default: var(--fill-background-standard-dark);
76
78
  --basecolors-frame-elevated: var(--fill-background-overlay-transparent);
77
79
  --basecolors-frame-elevatedalt: var(--fill-background-overlay-solidalt);
package/dist/base.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const base: {
4
4
  frame: {
5
5
  contrast: string;
6
6
  contrastalt: string;
7
+ contrastalt2: string;
7
8
  default: string;
8
9
  elevated: string;
9
10
  elevatedalt: string;
@@ -78,6 +79,7 @@ export declare const base: {
78
79
  frame: {
79
80
  contrast: string;
80
81
  contrastalt: string;
82
+ contrastalt2: string;
81
83
  default: string;
82
84
  elevated: string;
83
85
  elevatedalt: string;
package/dist/base.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  :root {
10
10
  --basecolors-frame-contrast: #{$fill-background-contrast-light};
11
11
  --basecolors-frame-contrastalt: #{$fill-background-contrast-lightalt};
12
+ --basecolors-frame-contrastalt-2: #{$fill-background-contrast-lightalt-2};
12
13
  --basecolors-frame-default: #{$fill-background-standard-light};
13
14
  --basecolors-frame-elevated: #{$fill-background-standard-light};
14
15
  --basecolors-frame-elevatedalt: #{$fill-background-tint-light};
@@ -74,6 +75,7 @@
74
75
  [data-color-mode='dark'] {
75
76
  --basecolors-frame-contrast: #{$fill-background-contrast-dark};
76
77
  --basecolors-frame-contrastalt: #{$fill-background-tint-dark};
78
+ --basecolors-frame-contrastalt-2: #{$fill-background-standard-dark};
77
79
  --basecolors-frame-default: #{$fill-background-standard-dark};
78
80
  --basecolors-frame-elevated: #{$fill-background-overlay-transparent};
79
81
  --basecolors-frame-elevatedalt: #{$fill-background-overlay-solidalt};
package/dist/componentColors.d.ts CHANGED
@@ -546,23 +546,35 @@ export declare const componentColors: {
546
546
  checkbox: {
547
547
  contrast: {
548
548
  border: string;
549
+ borderDisabled: string;
549
550
  borderNegative: string;
551
+ borderReadonly: string;
550
552
  fillDefault: string;
553
+ fillDisabled: string;
551
554
  fillHover: string;
552
555
  fillSelected: string;
553
556
  fillSelectedhover: string;
554
557
  icon: string;
558
+ iconDisabled: string;
559
+ iconReadonly: string;
555
560
  text: string;
561
+ textDisabled: string;
556
562
  };
557
563
  standard: {
558
564
  border: string;
565
+ borderDisabled: string;
559
566
  borderNegative: string;
567
+ borderReadonly: string;
560
568
  fillDefault: string;
569
+ fillDisabled: string;
561
570
  fillHover: string;
562
571
  fillSelected: string;
563
572
  fillSelectedhover: string;
564
573
  icon: string;
574
+ iconDisabled: string;
575
+ iconReadonly: string;
565
576
  text: string;
577
+ textDisabled: string;
566
578
  };
567
579
  };
568
580
  feedbackText: {
@@ -626,23 +638,35 @@ export declare const componentColors: {
626
638
  radio: {
627
639
  contrast: {
628
640
  border: string;
641
+ borderDisabled: string;
629
642
  borderNegative: string;
643
+ borderReadonly: string;
630
644
  fillDefault: string;
645
+ fillDisabled: string;
631
646
  fillHover: string;
632
647
  fillSelected: string;
633
648
  fillSelectedhover: string;
634
649
  icon: string;
650
+ iconDisabled: string;
651
+ iconReadonly: string;
635
652
  text: string;
653
+ textDisabled: string;
636
654
  };
637
655
  standard: {
638
656
  border: string;
657
+ borderDisabled: string;
639
658
  borderNegative: string;
659
+ borderReadonly: string;
640
660
  fillDefault: string;
661
+ fillDisabled: string;
641
662
  fillHover: string;
642
663
  fillSelected: string;
643
664
  icon: string;
665
+ iconDisabled: string;
666
+ iconReadonly: string;
644
667
  selectedhover: string;
645
668
  text: string;
669
+ textDisabled: string;
646
670
  };
647
671
  };
648
672
  segmentedControl: {
@@ -1999,23 +2023,35 @@ export declare const componentColors: {
1999
2023
  checkbox: {
2000
2024
  contrast: {
2001
2025
  border: string;
2026
+ borderDisabled: string;
2002
2027
  borderNegative: string;
2028
+ borderReadonly: string;
2003
2029
  fillDefault: string;
2030
+ fillDisabled: string;
2004
2031
  fillHover: string;
2005
2032
  fillSelected: string;
2006
2033
  fillSelectedhover: string;
2007
2034
  icon: string;
2035
+ iconDisabled: string;
2036
+ iconReadonly: string;
2008
2037
  text: string;
2038
+ textDisabled: string;
2009
2039
  };
2010
2040
  standard: {
2011
2041
  border: string;
2042
+ borderDisabled: string;
2012
2043
  borderNegative: string;
2044
+ borderReadonly: string;
2013
2045
  fillDefault: string;
2046
+ fillDisabled: string;
2014
2047
  fillHover: string;
2015
2048
  fillSelected: string;
2016
2049
  fillSelectedhover: string;
2017
2050
  icon: string;
2051
+ iconDisabled: string;
2052
+ iconReadonly: string;
2018
2053
  text: string;
2054
+ textDisabled: string;
2019
2055
  };
2020
2056
  };
2021
2057
  feedbackText: {
@@ -2079,23 +2115,35 @@ export declare const componentColors: {
2079
2115
  radio: {
2080
2116
  contrast: {
2081
2117
  border: string;
2118
+ borderDisabled: string;
2082
2119
  borderNegative: string;
2120
+ borderReadonly: string;
2083
2121
  fillDefault: string;
2122
+ fillDisabled: string;
2084
2123
  fillHover: string;
2085
2124
  fillSelected: string;
2086
2125
  fillSelectedhover: string;
2087
2126
  icon: string;
2127
+ iconDisabled: string;
2128
+ iconReadonly: string;
2088
2129
  text: string;
2130
+ textDisabled: string;
2089
2131
  };
2090
2132
  standard: {
2091
2133
  border: string;
2134
+ borderDisabled: string;
2092
2135
  borderNegative: string;
2136
+ borderReadonly: string;
2093
2137
  fillDefault: string;
2138
+ fillDisabled: string;
2094
2139
  fillHover: string;
2095
2140
  fillSelected: string;
2096
2141
  icon: string;
2142
+ iconDisabled: string;
2143
+ iconReadonly: string;
2097
2144
  selectedhover: string;
2098
2145
  text: string;
2146
+ textDisabled: string;
2099
2147
  };
2100
2148
  };
2101
2149
  segmentedControl: {
package/dist/tokens.cjs.development.js CHANGED
@@ -368,6 +368,7 @@ var base = {
368
368
  "frame": {
369
369
  "contrast": "#181c56",
370
370
  "contrastalt": "#393d79",
371
+ "contrastalt2": "#292b6a",
371
372
  "default": "#ffffff",
372
373
  "elevated": "#ffffff",
373
374
  "elevatedalt": "#f6f6f9",
@@ -442,6 +443,7 @@ var base = {
442
443
  "frame": {
443
444
  "contrast": "#212233",
444
445
  "contrastalt": "#141527",
446
+ "contrastalt2": "#08091c",
445
447
  "default": "#08091c",
446
448
  "elevated": "#e5e5e926",
447
449
  "elevatedalt": "#464755",
@@ -452,8 +454,8 @@ var base = {
452
454
  "accent": "#e5e5e9",
453
455
  "bicycleContrast": "#4db295",
454
456
  "bicycleDefault": "#4db295",
455
- "busContrast": "#e87a9b",
456
- "busDefault": "#e87a9b",
457
+ "busContrast": "#ef7398",
458
+ "busDefault": "#ef7398",
457
459
  "cablewayContrast": "#b898e5",
458
460
  "cablewayDefault": "#b898e5",
459
461
  "disabled": "#b6b8ba",
@@ -1216,23 +1218,35 @@ var componentColors = {
1216
1218
  "checkbox": {
1217
1219
  "contrast": {
1218
1220
  "border": "#aeb7e2",
1221
+ "borderDisabled": "#6e6f73",
1219
1222
  "borderNegative": "#ff9494",
1223
+ "borderReadonly": "#6e6f73",
1220
1224
  "fillDefault": "#ffffff00",
1225
+ "fillDisabled": "#cfd2d426",
1221
1226
  "fillHover": "#626493",
1222
1227
  "fillSelected": "#aeb7e2",
1223
1228
  "fillSelectedhover": "#c7cdeb",
1224
1229
  "icon": "#181c56",
1225
- "text": "#ffffff"
1230
+ "iconDisabled": "#949699",
1231
+ "iconReadonly": "#ffffff",
1232
+ "text": "#ffffff",
1233
+ "textDisabled": "#949699"
1226
1234
  },
1227
1235
  "standard": {
1228
1236
  "border": "#181c56",
1237
+ "borderDisabled": "#e3e6e8",
1229
1238
  "borderNegative": "#d31b1b",
1239
+ "borderReadonly": "#e3e6e8",
1230
1240
  "fillDefault": "#ffffff00",
1241
+ "fillDisabled": "#cfd2d426",
1231
1242
  "fillHover": "#d9ddf2",
1232
1243
  "fillSelected": "#181c56",
1233
1244
  "fillSelectedhover": "#393d79",
1234
1245
  "icon": "#ffffff",
1235
- "text": "#181c56"
1246
+ "iconDisabled": "#b6b8ba",
1247
+ "iconReadonly": "#181c56",
1248
+ "text": "#181c56",
1249
+ "textDisabled": "#b6b8ba"
1236
1250
  }
1237
1251
  },
1238
1252
  "feedbackText": {
@@ -1296,23 +1310,35 @@ var componentColors = {
1296
1310
  "radio": {
1297
1311
  "contrast": {
1298
1312
  "border": "#aeb7e2",
1313
+ "borderDisabled": "#6e6f73",
1299
1314
  "borderNegative": "#ff9494",
1315
+ "borderReadonly": "#6e6f73",
1300
1316
  "fillDefault": "#ffffff00",
1317
+ "fillDisabled": "#cfd2d426",
1301
1318
  "fillHover": "#626493",
1302
1319
  "fillSelected": "#aeb7e2",
1303
1320
  "fillSelectedhover": "#c7cdeb",
1304
1321
  "icon": "#ffffff",
1305
- "text": "#ffffff"
1322
+ "iconDisabled": "#949699",
1323
+ "iconReadonly": "#ffffff",
1324
+ "text": "#ffffff",
1325
+ "textDisabled": "#949699"
1306
1326
  },
1307
1327
  "standard": {
1308
1328
  "border": "#181c56",
1329
+ "borderDisabled": "#e3e6e8",
1309
1330
  "borderNegative": "#d31b1b",
1331
+ "borderReadonly": "#e3e6e8",
1310
1332
  "fillDefault": "#ffffff00",
1333
+ "fillDisabled": "#cfd2d426",
1311
1334
  "fillHover": "#d9ddf2",
1312
1335
  "fillSelected": "#181c56",
1313
1336
  "icon": "#181c56",
1337
+ "iconDisabled": "#b6b8ba",
1338
+ "iconReadonly": "#181c56",
1314
1339
  "selectedhover": "#393d79",
1315
- "text": "#181c56"
1340
+ "text": "#181c56",
1341
+ "textDisabled": "#b6b8ba"
1316
1342
  }
1317
1343
  },
1318
1344
  "segmentedControl": {
@@ -2669,23 +2695,35 @@ var componentColors = {
2669
2695
  "checkbox": {
2670
2696
  "contrast": {
2671
2697
  "border": "#aeb7e2",
2698
+ "borderDisabled": "#6e6f73",
2672
2699
  "borderNegative": "#ff9494",
2700
+ "borderReadonly": "#6e6f73",
2673
2701
  "fillDefault": "#ffffff00",
2702
+ "fillDisabled": "#cccdd44d",
2674
2703
  "fillHover": "#626493",
2675
2704
  "fillSelected": "#aeb7e2",
2676
2705
  "fillSelectedhover": "#c7cdeb",
2677
2706
  "icon": "#181c56",
2678
- "text": "#e5e5e9"
2707
+ "iconDisabled": "#6e6f73",
2708
+ "iconReadonly": "#e5e5e9",
2709
+ "text": "#e5e5e9",
2710
+ "textDisabled": "#6e6f73"
2679
2711
  },
2680
2712
  "standard": {
2681
2713
  "border": "#aeb7e2",
2714
+ "borderDisabled": "#6e6f73",
2682
2715
  "borderNegative": "#ff9494",
2716
+ "borderReadonly": "#6e6f73",
2683
2717
  "fillDefault": "#ffffff00",
2718
+ "fillDisabled": "#cfd2d426",
2684
2719
  "fillHover": "#626493",
2685
2720
  "fillSelected": "#aeb7e2",
2686
2721
  "fillSelectedhover": "#c7cdeb",
2687
2722
  "icon": "#181c56",
2688
- "text": "#e5e5e9"
2723
+ "iconDisabled": "#6e6f73",
2724
+ "iconReadonly": "#e5e5e9",
2725
+ "text": "#e5e5e9",
2726
+ "textDisabled": "#6e6f73"
2689
2727
  }
2690
2728
  },
2691
2729
  "feedbackText": {
@@ -2749,23 +2787,35 @@ var componentColors = {
2749
2787
  "radio": {
2750
2788
  "contrast": {
2751
2789
  "border": "#aeb7e2",
2790
+ "borderDisabled": "#6e6f73",
2752
2791
  "borderNegative": "#ff9494",
2792
+ "borderReadonly": "#6e6f73",
2753
2793
  "fillDefault": "#ffffff00",
2794
+ "fillDisabled": "#cccdd44d",
2754
2795
  "fillHover": "#626493",
2755
2796
  "fillSelected": "#aeb7e2",
2756
2797
  "fillSelectedhover": "#c7cdeb",
2757
2798
  "icon": "#e5e5e9",
2758
- "text": "#e5e5e9"
2799
+ "iconDisabled": "#6e6f73",
2800
+ "iconReadonly": "#e5e5e9",
2801
+ "text": "#e5e5e9",
2802
+ "textDisabled": "#6e6f73"
2759
2803
  },
2760
2804
  "standard": {
2761
2805
  "border": "#aeb7e2",
2806
+ "borderDisabled": "#6e6f73",
2762
2807
  "borderNegative": "#ff9494",
2808
+ "borderReadonly": "#6e6f73",
2763
2809
  "fillDefault": "#ffffff00",
2810
+ "fillDisabled": "#cfd2d426",
2764
2811
  "fillHover": "#626493",
2765
2812
  "fillSelected": "#aeb7e2",
2766
2813
  "icon": "#e5e5e9",
2814
+ "iconDisabled": "#6e6f73",
2815
+ "iconReadonly": "#e5e5e9",
2767
2816
  "selectedhover": "#c7cdeb",
2768
- "text": "#e5e5e9"
2817
+ "text": "#e5e5e9",
2818
+ "textDisabled": "#6e6f73"
2769
2819
  }
2770
2820
  },
2771
2821
  "segmentedControl": {
@@ -3581,7 +3631,7 @@ var componentColors = {
3581
3631
  Entur Design Tokens
3582
3632
 
3583
3633
  Hi there 👋 This file contains all the design tokens used in the Entur
3584
- design system. It's broken up into a few different sections:
3634
+ Linje. It's broken up into a few different sections:
3585
3635
 
3586
3636
  - colors
3587
3637
  - typography