@entur/tab 0.5.6 → 0.5.8-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.
Files changed (2) hide show
  1. package/dist/styles.css +326 -301
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -1,340 +1,365 @@
1
- /* DO NOT CHANGE!*/
2
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- /* DO NOT CHANGE!*/
4
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- /* DO NOT CHANGE!*/
6
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
- /* DO NOT CHANGE!*/
8
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
9
1
  [data-color-mode=light],
10
- :root {
11
- --components-tab-contrast-border: #aeb7e2;
12
- --components-tab-contrast-fill-disabled: rgba(84, 86, 140, 0.4);
13
- --components-tab-contrast-fill-hover: #626493;
14
- --components-tab-contrast-fill-selected: #181c56;
15
- --components-tab-contrast-fill-unselected: #393d79;
16
- --components-tab-contrast-icon: #ffffff;
17
- --components-tab-contrast-icon-disabled: #b6b8ba;
18
- --components-tab-contrast-text: #ffffff;
19
- --components-tab-contrast-text-disabled: #b6b8ba;
20
- --components-tab-contrast-underline-selected: #ff5959;
21
- --components-tab-standard-border: #e3e6e8;
22
- --components-tab-standard-fill-disabled: #cfd2d4;
23
- --components-tab-standard-fill-hover: #e3e6e8;
24
- --components-tab-standard-fill-selected: #ffffff;
25
- --components-tab-standard-fill-unselected: #edf0f2;
26
- --components-tab-standard-icon: #181c56;
27
- --components-tab-standard-icon-disabled: #515254;
28
- --components-tab-standard-text: #181c56;
29
- --components-tab-standard-text-disabled: #515254;
30
- --components-tab-standard-underline-selected: #ff5959;
2
+ :root{
3
+ --components-tab-contrast-border:#aeb7e2;
4
+ --components-tab-contrast-fill-disabled:rgba(84, 86, 140, 0.4);
5
+ --components-tab-contrast-fill-hover:#626493;
6
+ --components-tab-contrast-fill-selected:#181c56;
7
+ --components-tab-contrast-fill-unselected:#393d79;
8
+ --components-tab-contrast-icon:#ffffff;
9
+ --components-tab-contrast-icon-disabled:#b6b8ba;
10
+ --components-tab-contrast-text:#ffffff;
11
+ --components-tab-contrast-text-disabled:#b6b8ba;
12
+ --components-tab-contrast-underline-selected:#ff5959;
13
+ --components-tab-standard-border:#e3e6e8;
14
+ --components-tab-standard-fill-disabled:#cfd2d4;
15
+ --components-tab-standard-fill-hover:#e3e6e8;
16
+ --components-tab-standard-fill-selected:#ffffff;
17
+ --components-tab-standard-fill-unselected:#edf0f2;
18
+ --components-tab-standard-icon:#181c56;
19
+ --components-tab-standard-icon-disabled:#515254;
20
+ --components-tab-standard-text:#181c56;
21
+ --components-tab-standard-text-disabled:#515254;
22
+ --components-tab-standard-underline-selected:#ff5959;
31
23
  }
32
24
 
33
- [data-color-mode=dark] {
34
- --components-tab-contrast-border: #81828f;
35
- --components-tab-contrast-fill-disabled: rgba(207, 210, 212, 0.1019607843);
36
- --components-tab-contrast-fill-hover: #393a49;
37
- --components-tab-contrast-fill-selected: #08091c;
38
- --components-tab-contrast-fill-unselected: rgba(229, 229, 233, 0.2509803922);
39
- --components-tab-contrast-icon: #e5e5e9;
40
- --components-tab-contrast-icon-disabled: #949699;
41
- --components-tab-contrast-text: #e5e5e9;
42
- --components-tab-contrast-text-disabled: #949699;
43
- --components-tab-contrast-underline-selected: #ff9494;
44
- --components-tab-standard-border: #81828f;
45
- --components-tab-standard-fill-disabled: rgba(207, 210, 212, 0.1019607843);
46
- --components-tab-standard-fill-hover: #393a49;
47
- --components-tab-standard-fill-selected: #08091c;
48
- --components-tab-standard-fill-unselected: rgba(229, 229, 233, 0.2509803922);
49
- --components-tab-standard-icon: #e5e5e9;
50
- --components-tab-standard-icon-disabled: #949699;
51
- --components-tab-standard-text: #e5e5e9;
52
- --components-tab-standard-text-disabled: #949699;
53
- --components-tab-standard-underline-selected: #ff9494;
25
+ [data-color-mode=dark]{
26
+ --components-tab-contrast-border:#81828f;
27
+ --components-tab-contrast-fill-disabled:rgba(207, 210, 212, 0.1019607843);
28
+ --components-tab-contrast-fill-hover:#393a49;
29
+ --components-tab-contrast-fill-selected:#08091c;
30
+ --components-tab-contrast-fill-unselected:rgba(229, 229, 233, 0.2509803922);
31
+ --components-tab-contrast-icon:#e5e5e9;
32
+ --components-tab-contrast-icon-disabled:#949699;
33
+ --components-tab-contrast-text:#e5e5e9;
34
+ --components-tab-contrast-text-disabled:#949699;
35
+ --components-tab-contrast-underline-selected:#ff9494;
36
+ --components-tab-standard-border:#81828f;
37
+ --components-tab-standard-fill-disabled:rgba(207, 210, 212, 0.1019607843);
38
+ --components-tab-standard-fill-hover:#393a49;
39
+ --components-tab-standard-fill-selected:#08091c;
40
+ --components-tab-standard-fill-unselected:rgba(229, 229, 233, 0.2509803922);
41
+ --components-tab-standard-icon:#e5e5e9;
42
+ --components-tab-standard-icon-disabled:#949699;
43
+ --components-tab-standard-text:#e5e5e9;
44
+ --components-tab-standard-text-disabled:#949699;
45
+ --components-tab-standard-underline-selected:#ff9494;
54
46
  }
55
-
56
- /* DO NOT CHANGE!*/
57
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
58
- /* DO NOT CHANGE!*/
59
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
47
  [data-color-mode=light],
61
- :root {
62
- --basecolors-frame-contrast: #181c56;
63
- --basecolors-frame-contrastalt: #393d79;
64
- --basecolors-frame-contrastalt-2: #292b6a;
65
- --basecolors-frame-default: #ffffff;
66
- --basecolors-frame-elevated: #ffffff;
67
- --basecolors-frame-elevatedalt: #f6f6f9;
68
- --basecolors-frame-subdued: #d9dae8;
69
- --basecolors-frame-tint: #f6f6f9;
70
- --basecolors-shape-accent: #181c56;
71
- --basecolors-shape-bicycle-contrast: #00db9b;
72
- --basecolors-shape-bicycle-default: #388f76;
73
- --basecolors-shape-bus-contrast: #ff6392;
74
- --basecolors-shape-bus-default: #c5044e;
75
- --basecolors-shape-cableway-contrast: #b482fb;
76
- --basecolors-shape-cableway-default: #78469a;
77
- --basecolors-shape-disabled: #6e6f73;
78
- --basecolors-shape-disabledalt: #b6b8ba;
79
- --basecolors-shape-ferry-contrast: #6fdfff;
80
- --basecolors-shape-ferry-default: #0c6693;
81
- --basecolors-shape-funicular-contrast: #b482fb;
82
- --basecolors-shape-funicular-default: #78469a;
83
- --basecolors-shape-helicopter-contrast: #fbafea;
84
- --basecolors-shape-helicopter-default: #800664;
85
- --basecolors-shape-highlight: #ff5959;
86
- --basecolors-shape-light: #ffffff;
87
- --basecolors-shape-mask: #ffffff;
88
- --basecolors-shape-maskalt: #ffffff;
89
- --basecolors-shape-metro-contrast: #f08901;
90
- --basecolors-shape-metro-default: #bf5826;
91
- --basecolors-shape-mobility-contrast: #00db9b;
92
- --basecolors-shape-mobility-default: #388f76;
93
- --basecolors-shape-plane-contrast: #fbafea;
94
- --basecolors-shape-plane-default: #800664;
95
- --basecolors-shape-subdued: #626493;
96
- --basecolors-shape-subduedalt: #d9dae8;
97
- --basecolors-shape-taxi-contrast: #ffe082;
98
- --basecolors-shape-taxi-default: #3d3e40;
99
- --basecolors-shape-train-contrast: #42a5f5;
100
- --basecolors-shape-train-default: #00367f;
101
- --basecolors-shape-tram-contrast: #b482fb;
102
- --basecolors-shape-tram-default: #78469a;
103
- --basecolors-shape-walk-contrast: #8284ab;
104
- --basecolors-shape-walk-default: #8d8e9c;
105
- --basecolors-shape-airportlinkbus-contrast: #fbafea;
106
- --basecolors-shape-airportlinkbus-default: #800664;
107
- --basecolors-shape-airportlinkrail-contrast: #fbafea;
108
- --basecolors-shape-airportlinkrail-default: #800664;
109
- --basecolors-stroke-contrast: #aeb7e2;
110
- --basecolors-stroke-default: #181c56;
111
- --basecolors-stroke-disabled: #949699;
112
- --basecolors-stroke-focus-contrast: #aeb7e2;
113
- --basecolors-stroke-focus-standard: #181c56;
114
- --basecolors-stroke-highlight: #ff5959;
115
- --basecolors-stroke-light: #ffffff;
116
- --basecolors-stroke-subdued: #8284ab;
117
- --basecolors-stroke-subduedalt: #e3e6e8;
118
- --basecolors-text-accent: #181c56;
119
- --basecolors-text-disabled: #6e6f73;
120
- --basecolors-text-disabledalt: #b6b8ba;
121
- --basecolors-text-highlight: #ff5959;
122
- --basecolors-text-light: #ffffff;
123
- --basecolors-text-subdued: #626493;
124
- --basecolors-text-subduedalt: #d9dae8;
48
+ :root{
49
+ --basecolors-frame-contrast:#181c56;
50
+ --basecolors-frame-contrastalt:#393d79;
51
+ --basecolors-frame-contrastalt-2:#292b6a;
52
+ --basecolors-frame-default:#ffffff;
53
+ --basecolors-frame-elevated:#ffffff;
54
+ --basecolors-frame-elevatedalt:#f6f6f9;
55
+ --basecolors-frame-subdued:#d9dae8;
56
+ --basecolors-frame-tint:#f6f6f9;
57
+ --basecolors-shape-accent:#181c56;
58
+ --basecolors-shape-bicycle-contrast:#00db9b;
59
+ --basecolors-shape-bicycle-default:#33826b;
60
+ --basecolors-shape-bus-contrast:#ff6392;
61
+ --basecolors-shape-bus-default:#c5044e;
62
+ --basecolors-shape-cableway-contrast:#b482fb;
63
+ --basecolors-shape-cableway-default:#78469a;
64
+ --basecolors-shape-disabled:#6e6f73;
65
+ --basecolors-shape-disabledalt:#b6b8ba;
66
+ --basecolors-shape-ferry-contrast:#6fdfff;
67
+ --basecolors-shape-ferry-default:#0c6693;
68
+ --basecolors-shape-funicular-contrast:#b482fb;
69
+ --basecolors-shape-funicular-default:#78469a;
70
+ --basecolors-shape-helicopter-contrast:#fbafea;
71
+ --basecolors-shape-helicopter-default:#800664;
72
+ --basecolors-shape-highlight:#ff5959;
73
+ --basecolors-shape-light:#ffffff;
74
+ --basecolors-shape-mask:#ffffff;
75
+ --basecolors-shape-maskalt:#ffffff;
76
+ --basecolors-shape-metro-contrast:#f08901;
77
+ --basecolors-shape-metro-default:#bf5826;
78
+ --basecolors-shape-mobility-contrast:#00db9b;
79
+ --basecolors-shape-mobility-default:#33826b;
80
+ --basecolors-shape-plane-contrast:#fbafea;
81
+ --basecolors-shape-plane-default:#800664;
82
+ --basecolors-shape-subdued:#626493;
83
+ --basecolors-shape-subduedalt:#d9dae8;
84
+ --basecolors-shape-taxi-contrast:#ffe082;
85
+ --basecolors-shape-taxi-default:#3d3e40;
86
+ --basecolors-shape-train-contrast:#42a5f5;
87
+ --basecolors-shape-train-default:#00367f;
88
+ --basecolors-shape-tram-contrast:#b482fb;
89
+ --basecolors-shape-tram-default:#78469a;
90
+ --basecolors-shape-walk-contrast:#8284ab;
91
+ --basecolors-shape-walk-default:#8d8e9c;
92
+ --basecolors-shape-airportlinkbus-contrast:#fbafea;
93
+ --basecolors-shape-airportlinkbus-default:#800664;
94
+ --basecolors-shape-airportlinkrail-contrast:#fbafea;
95
+ --basecolors-shape-airportlinkrail-default:#800664;
96
+ --basecolors-stroke-contrast:#aeb7e2;
97
+ --basecolors-stroke-default:#181c56;
98
+ --basecolors-stroke-disabled:#949699;
99
+ --basecolors-stroke-focus-contrast:#aeb7e2;
100
+ --basecolors-stroke-focus-standard:#181c56;
101
+ --basecolors-stroke-highlight:#ff5959;
102
+ --basecolors-stroke-light:#ffffff;
103
+ --basecolors-stroke-subdued:#8284ab;
104
+ --basecolors-stroke-subduedalt:#e3e6e8;
105
+ --basecolors-text-accent:#181c56;
106
+ --basecolors-text-disabled:#6e6f73;
107
+ --basecolors-text-disabledalt:#b6b8ba;
108
+ --basecolors-text-highlight:#ff5959;
109
+ --basecolors-text-light:#ffffff;
110
+ --basecolors-text-subdued:#626493;
111
+ --basecolors-text-subduedalt:#d9dae8;
125
112
  }
126
113
 
127
- [data-color-mode=dark] {
128
- --basecolors-frame-contrast: #212233;
129
- --basecolors-frame-contrastalt: #141527;
130
- --basecolors-frame-contrastalt-2: #08091c;
131
- --basecolors-frame-default: #08091c;
132
- --basecolors-frame-elevated: rgba(229, 229, 233, 0.1490196078);
133
- --basecolors-frame-elevatedalt: #464755;
134
- --basecolors-frame-subdued: #2d2e3e;
135
- --basecolors-frame-tint: #141527;
136
- --basecolors-shape-accent: #e5e5e9;
137
- --basecolors-shape-bicycle-contrast: #4db295;
138
- --basecolors-shape-bicycle-default: #4db295;
139
- --basecolors-shape-bus-contrast: #ef7398;
140
- --basecolors-shape-bus-default: #ef7398;
141
- --basecolors-shape-cableway-contrast: #b898e5;
142
- --basecolors-shape-cableway-default: #b898e5;
143
- --basecolors-shape-disabled: #b6b8ba;
144
- --basecolors-shape-disabledalt: #b3b4bd;
145
- --basecolors-shape-ferry-contrast: #8ccfe2;
146
- --basecolors-shape-ferry-default: #8ccfe2;
147
- --basecolors-shape-funicular-contrast: #b898e5;
148
- --basecolors-shape-funicular-default: #b898e5;
149
- --basecolors-shape-helicopter-contrast: #f2b8e5;
150
- --basecolors-shape-helicopter-default: #f2b8e5;
151
- --basecolors-shape-highlight: #ff9494;
152
- --basecolors-shape-light: #e5e5e9;
153
- --basecolors-shape-mask: #2d2e3e;
154
- --basecolors-shape-maskalt: #393a49;
155
- --basecolors-shape-metro-contrast: #dd973c;
156
- --basecolors-shape-metro-default: #dd973c;
157
- --basecolors-shape-mobility-contrast: #4db295;
158
- --basecolors-shape-mobility-default: #4db295;
159
- --basecolors-shape-plane-contrast: #f2b8e5;
160
- --basecolors-shape-plane-default: #f2b8e5;
161
- --basecolors-shape-subdued: #b3b4bd;
162
- --basecolors-shape-subduedalt: #b3b4bd;
163
- --basecolors-shape-taxi-contrast: #ffe082;
164
- --basecolors-shape-taxi-default: #ffe082;
165
- --basecolors-shape-train-contrast: #60a2d7;
166
- --basecolors-shape-train-default: #60a2d7;
167
- --basecolors-shape-tram-contrast: #b898e5;
168
- --basecolors-shape-tram-default: #b898e5;
169
- --basecolors-shape-walk-contrast: #8d8e9c;
170
- --basecolors-shape-walk-default: #8d8e9c;
171
- --basecolors-shape-airportlinkbus-contrast: #f2b8e5;
172
- --basecolors-shape-airportlinkbus-default: #f2b8e5;
173
- --basecolors-shape-airportlinkrail-contrast: #f2b8e5;
174
- --basecolors-shape-airportlinkrail-default: #f2b8e5;
175
- --basecolors-stroke-contrast: #aeb7e2;
176
- --basecolors-stroke-default: #b3b4bd;
177
- --basecolors-stroke-disabled: #e3e6e8;
178
- --basecolors-stroke-focus-contrast: #aeb7e2;
179
- --basecolors-stroke-focus-standard: #aeb7e2;
180
- --basecolors-stroke-highlight: #ff9494;
181
- --basecolors-stroke-light: #b3b4bd;
182
- --basecolors-stroke-subdued: #81828f;
183
- --basecolors-stroke-subduedalt: #949699;
184
- --basecolors-text-accent: #e5e5e9;
185
- --basecolors-text-disabled: #b6b8ba;
186
- --basecolors-text-disabledalt: #b6b8ba;
187
- --basecolors-text-highlight: #ff9494;
188
- --basecolors-text-light: #e5e5e9;
189
- --basecolors-text-subdued: #b3b4bd;
190
- --basecolors-text-subduedalt: #b3b4bd;
114
+ [data-color-mode=dark]{
115
+ --basecolors-frame-contrast:#212233;
116
+ --basecolors-frame-contrastalt:#141527;
117
+ --basecolors-frame-contrastalt-2:#08091c;
118
+ --basecolors-frame-default:#08091c;
119
+ --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
120
+ --basecolors-frame-elevatedalt:#464755;
121
+ --basecolors-frame-subdued:#2d2e3e;
122
+ --basecolors-frame-tint:#141527;
123
+ --basecolors-shape-accent:#e5e5e9;
124
+ --basecolors-shape-bicycle-contrast:#4db295;
125
+ --basecolors-shape-bicycle-default:#4db295;
126
+ --basecolors-shape-bus-contrast:#ef7398;
127
+ --basecolors-shape-bus-default:#ef7398;
128
+ --basecolors-shape-cableway-contrast:#b898e5;
129
+ --basecolors-shape-cableway-default:#b898e5;
130
+ --basecolors-shape-disabled:#b6b8ba;
131
+ --basecolors-shape-disabledalt:#b3b4bd;
132
+ --basecolors-shape-ferry-contrast:#8ccfe2;
133
+ --basecolors-shape-ferry-default:#8ccfe2;
134
+ --basecolors-shape-funicular-contrast:#b898e5;
135
+ --basecolors-shape-funicular-default:#b898e5;
136
+ --basecolors-shape-helicopter-contrast:#f2b8e5;
137
+ --basecolors-shape-helicopter-default:#f2b8e5;
138
+ --basecolors-shape-highlight:#ff9494;
139
+ --basecolors-shape-light:#e5e5e9;
140
+ --basecolors-shape-mask:#2d2e3e;
141
+ --basecolors-shape-maskalt:#393a49;
142
+ --basecolors-shape-metro-contrast:#dd973c;
143
+ --basecolors-shape-metro-default:#dd973c;
144
+ --basecolors-shape-mobility-contrast:#4db295;
145
+ --basecolors-shape-mobility-default:#4db295;
146
+ --basecolors-shape-plane-contrast:#f2b8e5;
147
+ --basecolors-shape-plane-default:#f2b8e5;
148
+ --basecolors-shape-subdued:#b3b4bd;
149
+ --basecolors-shape-subduedalt:#b3b4bd;
150
+ --basecolors-shape-taxi-contrast:#ffe082;
151
+ --basecolors-shape-taxi-default:#ffe082;
152
+ --basecolors-shape-train-contrast:#60a2d7;
153
+ --basecolors-shape-train-default:#60a2d7;
154
+ --basecolors-shape-tram-contrast:#b898e5;
155
+ --basecolors-shape-tram-default:#b898e5;
156
+ --basecolors-shape-walk-contrast:#8d8e9c;
157
+ --basecolors-shape-walk-default:#8d8e9c;
158
+ --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
159
+ --basecolors-shape-airportlinkbus-default:#f2b8e5;
160
+ --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
161
+ --basecolors-shape-airportlinkrail-default:#f2b8e5;
162
+ --basecolors-stroke-contrast:#aeb7e2;
163
+ --basecolors-stroke-default:#b3b4bd;
164
+ --basecolors-stroke-disabled:#e3e6e8;
165
+ --basecolors-stroke-focus-contrast:#aeb7e2;
166
+ --basecolors-stroke-focus-standard:#aeb7e2;
167
+ --basecolors-stroke-highlight:#ff9494;
168
+ --basecolors-stroke-light:#b3b4bd;
169
+ --basecolors-stroke-subdued:#81828f;
170
+ --basecolors-stroke-subduedalt:#949699;
171
+ --basecolors-text-accent:#e5e5e9;
172
+ --basecolors-text-disabled:#b6b8ba;
173
+ --basecolors-text-disabledalt:#b6b8ba;
174
+ --basecolors-text-highlight:#ff9494;
175
+ --basecolors-text-light:#e5e5e9;
176
+ --basecolors-text-subdued:#b3b4bd;
177
+ --basecolors-text-subduedalt:#b3b4bd;
191
178
  }
192
179
 
193
- :root {
194
- --reach-tabs: 1;
195
- --eds-tab: 1;
180
+ :root{
181
+ --reach-tabs:1;
182
+ --eds-tab:1;
196
183
  }
197
184
 
198
- .eds-tab-list {
199
- position: relative;
200
- top: 0.125rem;
201
- overflow-x: scroll;
202
- display: flex;
203
- scrollbar-width: none;
204
- padding-top: 0.25rem;
205
- margin-top: -0.25rem;
206
- z-index: 0;
185
+ .eds-tab-list{
186
+ position:relative;
187
+ top:0.125rem;
188
+ overflow-x:scroll;
189
+ display:-webkit-box;
190
+ display:-webkit-flex;
191
+ display:-moz-box;
192
+ display:flex;
193
+ scrollbar-width:none;
194
+ padding-top:0.25rem;
195
+ margin-top:-0.25rem;
196
+ z-index:0;
207
197
  }
208
- .eds-tab-list::after {
209
- content: "";
210
- position: absolute;
211
- bottom: 0;
212
- left: 0;
213
- right: 0;
214
- background-color: var(--components-tab-standard-border);
215
- display: block;
216
- height: 0.125rem;
217
- width: inherit;
218
- z-index: -1;
198
+ .eds-tab-list::after{
199
+ content:"";
200
+ position:absolute;
201
+ bottom:0;
202
+ left:0;
203
+ right:0;
204
+ background-color:#e3e6e8;
205
+ background-color:var(--components-tab-standard-border);
206
+ display:block;
207
+ height:0.125rem;
208
+ width:inherit;
209
+ z-index:-1;
219
210
  }
220
- .eds-contrast .eds-tab-list::after {
221
- background-color: var(--components-tab-contrast-border);
211
+ .eds-contrast .eds-tab-list::after{
212
+ background-color:#aeb7e2;
213
+ background-color:var(--components-tab-contrast-border);
222
214
  }
223
- .eds-tab-list::-webkit-scrollbar {
224
- display: none;
215
+ .eds-tab-list::-webkit-scrollbar{
216
+ display:none;
225
217
  }
226
218
 
227
- .eds-tab {
228
- appearance: none;
229
- background: var(--components-tab-standard-fill-unselected);
230
- border: 0.125rem solid transparent;
231
- border-radius: 0.25rem 0.25rem 0 0;
232
- color: var(--components-tab-standard-text);
233
- cursor: pointer;
234
- font-family: inherit;
235
- font-size: inherit;
236
- height: 3rem;
237
- line-height: inherit;
238
- margin: 0;
239
- min-width: 8rem;
240
- padding: 0.5rem 1rem;
241
- position: relative;
219
+ .eds-tab{
220
+ -webkit-appearance:none;
221
+ -moz-appearance:none;
222
+ appearance:none;
223
+ background:#edf0f2;
224
+ background:var(--components-tab-standard-fill-unselected);
225
+ border:0.125rem solid transparent;
226
+ -webkit-border-radius:0.25rem 0.25rem 0 0;
227
+ -moz-border-radius:0.25rem 0.25rem 0 0;
228
+ border-radius:0.25rem 0.25rem 0 0;
229
+ color:#181c56;
230
+ color:var(--components-tab-standard-text);
231
+ cursor:pointer;
232
+ font-family:inherit;
233
+ font-size:inherit;
234
+ height:3rem;
235
+ line-height:inherit;
236
+ margin:0;
237
+ min-width:8rem;
238
+ padding:0.5rem 1rem;
239
+ position:relative;
242
240
  }
243
- .eds-tab-list--width-fluid .eds-tab {
244
- flex-grow: 1;
245
- min-width: 0;
241
+ .eds-tab-list--width-fluid .eds-tab{
242
+ -webkit-box-flex:1;
243
+ -webkit-flex-grow:1;
244
+ -moz-box-flex:1;
245
+ flex-grow:1;
246
+ min-width:0;
246
247
  }
247
- .eds-contrast .eds-tab {
248
- background-color: var(--components-tab-contrast-fill-unselected);
249
- color: var(--components-tab-contrast-text);
248
+ .eds-contrast .eds-tab{
249
+ background-color:#393d79;
250
+ background-color:var(--components-tab-contrast-fill-unselected);
251
+ color:#ffffff;
252
+ color:var(--components-tab-contrast-text);
250
253
  }
251
- .eds-tab:hover {
252
- background-color: var(--components-tab-standard-fill-hover);
253
- color: var(--components-menu-tableofcontent-standard-text-selected);
254
+ .eds-tab:hover{
255
+ background-color:#e3e6e8;
256
+ background-color:var(--components-tab-standard-fill-hover);
257
+ color:var(--components-menu-tableofcontent-standard-text-selected);
254
258
  }
255
- .eds-contrast .eds-tab:hover {
256
- background-color: var(--components-tab-contrast-fill-hover);
257
- color: var(--components-tab-contrast-text);
259
+ .eds-contrast .eds-tab:hover{
260
+ background-color:#626493;
261
+ background-color:var(--components-tab-contrast-fill-hover);
262
+ color:#ffffff;
263
+ color:var(--components-tab-contrast-text);
258
264
  }
259
- .eds-tab + .eds-tab {
260
- margin-left: 0.25rem;
265
+ .eds-tab + .eds-tab{
266
+ margin-left:0.25rem;
261
267
  }
262
- .eds-tab::after {
263
- content: "";
264
- position: absolute;
265
- bottom: -0.125rem;
266
- left: -0.125rem;
267
- right: -0.125rem;
268
- background-color: var(--components-tab-standard-border);
269
- display: block;
270
- height: 0.125rem;
268
+ .eds-tab::after{
269
+ content:"";
270
+ position:absolute;
271
+ bottom:-0.125rem;
272
+ left:-0.125rem;
273
+ right:-0.125rem;
274
+ background-color:#e3e6e8;
275
+ background-color:var(--components-tab-standard-border);
276
+ display:block;
277
+ height:0.125rem;
271
278
  }
272
- .eds-contrast .eds-tab::after {
273
- background-color: var(--components-tab-contrast-border);
279
+ .eds-contrast .eds-tab::after{
280
+ background-color:#aeb7e2;
281
+ background-color:var(--components-tab-contrast-border);
274
282
  }
275
- .eds-tab[aria-selected=true] {
276
- background-color: var(--components-tab-standard-fill-selected);
277
- border-color: var(--components-tab-standard-border);
278
- color: var(--components-tab-standard-text);
279
- font-weight: 600;
283
+ .eds-tab[aria-selected=true]{
284
+ background-color:#ffffff;
285
+ background-color:var(--components-tab-standard-fill-selected);
286
+ border-color:#e3e6e8;
287
+ border-color:var(--components-tab-standard-border);
288
+ color:#181c56;
289
+ color:var(--components-tab-standard-text);
290
+ font-weight:600;
280
291
  }
281
- .eds-contrast .eds-tab[aria-selected=true] {
282
- background-color: var(--components-tab-contrast-fill-selected);
283
- color: var(--components-tab-contrast-text);
284
- border-color: var(--components-tab-contrast-border);
292
+ .eds-contrast .eds-tab[aria-selected=true]{
293
+ background-color:#181c56;
294
+ background-color:var(--components-tab-contrast-fill-selected);
295
+ color:#ffffff;
296
+ color:var(--components-tab-contrast-text);
297
+ border-color:#aeb7e2;
298
+ border-color:var(--components-tab-contrast-border);
285
299
  }
286
- .eds-tab[aria-selected=true]::after {
287
- background-color: var(--components-tab-standard-fill-selected);
288
- left: 0;
289
- right: 0;
300
+ .eds-tab[aria-selected=true]::after{
301
+ background-color:#ffffff;
302
+ background-color:var(--components-tab-standard-fill-selected);
303
+ left:0;
304
+ right:0;
290
305
  }
291
- .eds-contrast .eds-tab[aria-selected=true]::after {
292
- background-color: var(--components-tab-contrast-fill-selected);
306
+ .eds-contrast .eds-tab[aria-selected=true]::after{
307
+ background-color:#181c56;
308
+ background-color:var(--components-tab-contrast-fill-selected);
293
309
  }
294
- .eds-tab[aria-selected=true]::before {
295
- content: "";
296
- display: block;
297
- margin: 0 auto;
298
- width: 2rem;
299
- height: 3px;
300
- background: var(--components-tab-standard-underline-selected);
301
- position: absolute;
302
- bottom: 0.25rem;
303
- left: 0;
304
- right: 0;
310
+ .eds-tab[aria-selected=true]::before{
311
+ content:"";
312
+ display:block;
313
+ margin:0 auto;
314
+ width:2rem;
315
+ height:3px;
316
+ background:#ff5959;
317
+ background:var(--components-tab-standard-underline-selected);
318
+ position:absolute;
319
+ bottom:0.25rem;
320
+ left:0;
321
+ right:0;
305
322
  }
306
- .eds-tab--remove-active-line[aria-selected=true]::before {
307
- background: transparent;
323
+ .eds-tab--remove-active-line[aria-selected=true]::before{
324
+ background:transparent;
308
325
  }
309
- .eds-tab[disabled] {
310
- background: var(--components-tab-standard-fill-disabled);
311
- border-color: none;
312
- color: var(--components-tab-standard-text-disabled);
313
- cursor: not-allowed;
326
+ .eds-tab[disabled]{
327
+ background:#cfd2d4;
328
+ background:var(--components-tab-standard-fill-disabled);
329
+ border-color:none;
330
+ color:#515254;
331
+ color:var(--components-tab-standard-text-disabled);
332
+ cursor:not-allowed;
314
333
  }
315
- .eds-contrast .eds-tab[disabled] {
316
- background: var(--components-tab-contrast-fill-disabled);
317
- border-color: none;
318
- color: var(--components-tab-contrast-text-disabled);
334
+ .eds-contrast .eds-tab[disabled]{
335
+ background:rgba(84, 86, 140, 0.4);
336
+ background:var(--components-tab-contrast-fill-disabled);
337
+ border-color:none;
338
+ color:#b6b8ba;
339
+ color:var(--components-tab-contrast-text-disabled);
319
340
  }
320
- .eds-tab:focus-visible {
321
- outline: 2px solid #181c56;
322
- outline-color: var(--basecolors-stroke-focus-standard);
323
- outline-offset: 0.125rem;
341
+ .eds-tab:focus-visible{
342
+ outline:2px solid #181c56;
343
+ outline-color:#181c56;
344
+ outline-color:var(--basecolors-stroke-focus-standard);
345
+ outline-offset:0.125rem;
324
346
  }
325
- .eds-contrast .eds-tab:focus-visible {
326
- outline-color: var(--basecolors-stroke-focus-contrast);
347
+ .eds-contrast .eds-tab:focus-visible{
348
+ outline-color:#aeb7e2;
349
+ outline-color:var(--basecolors-stroke-focus-contrast);
327
350
  }
328
351
 
329
- .eds-tab-panels {
330
- padding: 1rem;
352
+ .eds-tab-panels{
353
+ padding:1rem;
331
354
  }
332
355
 
333
- .eds-tab-panel:focus-visible {
334
- outline: 2px solid #181c56;
335
- outline-color: var(--basecolors-stroke-focus-standard);
336
- outline-offset: 0.125rem;
356
+ .eds-tab-panel:focus-visible{
357
+ outline:2px solid #181c56;
358
+ outline-color:#181c56;
359
+ outline-color:var(--basecolors-stroke-focus-standard);
360
+ outline-offset:0.125rem;
337
361
  }
338
- .eds-contrast .eds-tab-panel:focus-visible {
339
- outline-color: var(--basecolors-stroke-focus-contrast);
362
+ .eds-contrast .eds-tab-panel:focus-visible{
363
+ outline-color:#aeb7e2;
364
+ outline-color:var(--basecolors-stroke-focus-contrast);
340
365
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/tab",
3
- "version": "0.5.6",
3
+ "version": "0.5.8-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/tab.cjs.js",
6
6
  "module": "dist/tab.esm.js",
@@ -27,8 +27,8 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/tokens": "^3.19.3",
31
- "@entur/utils": "^0.12.5",
30
+ "@entur/tokens": "^3.20.0",
31
+ "@entur/utils": "^0.12.6-beta.0",
32
32
  "@reach/tabs": "^0.15.3",
33
33
  "classnames": "^2.5.1"
34
34
  },
@@ -45,5 +45,5 @@
45
45
  "vite": "^7.1.3",
46
46
  "vite-plugin-dts": "^4.5.4"
47
47
  },
48
- "gitHead": "5dd9d318f1d79f6f522f978de27b551fda1e91cc"
48
+ "gitHead": "89f96eb3e2da5ec84f0a1224bc6e20021255e389"
49
49
  }