@entur/tokens 3.12.1-alpha.0 → 3.13.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.
package/dist/data.css ADDED
@@ -0,0 +1,41 @@
1
+ @import '~@entur/tokens/dist/semantic.css';
2
+ /* DO NOT CHANGE!*/
3
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
4
+ [data-color-mode='light'],
5
+ :root {
6
+ --contrast-azure: #64b2fb;
7
+ --contrast-blue: #6c6eb7;
8
+ --contrast-coral: #ff5959;
9
+ --contrast-jungle: #0fc2b3;
10
+ --contrast-lavender: #aeb7e2;
11
+ --contrast-lilac: #ea8bea;
12
+ --contrast-peach: #ffbf9e;
13
+ --contrast-spring: #7bc00b;
14
+ --standard-azure: #2f98fa;
15
+ --standard-blue: #181c56;
16
+ --standard-coral: #ff5959;
17
+ --standard-jungle: #0ea2a8;
18
+ --standard-lavender: #8692ca;
19
+ --standard-lilac: #8e57e3;
20
+ --standard-peach: #ca825b;
21
+ --standard-spring: #57a257;
22
+ }
23
+
24
+ [data-color-mode='dark'] {
25
+ --contrast-azure: #669bcc;
26
+ --contrast-blue: #aeb7e2;
27
+ --contrast-coral: #ff9494;
28
+ --contrast-jungle: #349d94;
29
+ --contrast-lavender: #7c8ad0;
30
+ --contrast-lilac: #c982c9;
31
+ --contrast-peach: #d6855c;
32
+ --contrast-spring: #8cb24c;
33
+ --standard-azure: #669bcc;
34
+ --standard-blue: #aeb7e2;
35
+ --standard-coral: #ff9494;
36
+ --standard-jungle: #349d94;
37
+ --standard-lavender: #7c8ad0;
38
+ --standard-lilac: #c982c9;
39
+ --standard-peach: #d6855c;
40
+ --standard-spring: #8cb24c;
41
+ }
package/dist/data.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ export declare const data: {
2
+ light: {
3
+ contrast: {
4
+ azure: string;
5
+ blue: string;
6
+ coral: string;
7
+ jungle: string;
8
+ lavender: string;
9
+ lilac: string;
10
+ peach: string;
11
+ spring: string;
12
+ };
13
+ standard: {
14
+ azure: string;
15
+ blue: string;
16
+ coral: string;
17
+ jungle: string;
18
+ lavender: string;
19
+ lilac: string;
20
+ peach: string;
21
+ spring: string;
22
+ };
23
+ };
24
+ dark: {
25
+ contrast: {
26
+ azure: string;
27
+ blue: string;
28
+ coral: string;
29
+ jungle: string;
30
+ lavender: string;
31
+ lilac: string;
32
+ peach: string;
33
+ spring: string;
34
+ };
35
+ standard: {
36
+ azure: string;
37
+ blue: string;
38
+ coral: string;
39
+ jungle: string;
40
+ lavender: string;
41
+ lilac: string;
42
+ peach: string;
43
+ spring: string;
44
+ };
45
+ };
46
+ };
package/dist/data.less ADDED
@@ -0,0 +1,41 @@
1
+ @import '~@entur/tokens/dist/semantic.css';
2
+ /* DO NOT CHANGE!*/
3
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
4
+ [data-color-mode='light'],
5
+ :root {
6
+ @contrast-azure: #64b2fb;
7
+ @contrast-blue: #6c6eb7;
8
+ @contrast-coral: #ff5959;
9
+ @contrast-jungle: #0fc2b3;
10
+ @contrast-lavender: #aeb7e2;
11
+ @contrast-lilac: #ea8bea;
12
+ @contrast-peach: #ffbf9e;
13
+ @contrast-spring: #7bc00b;
14
+ @standard-azure: #2f98fa;
15
+ @standard-blue: #181c56;
16
+ @standard-coral: #ff5959;
17
+ @standard-jungle: #0ea2a8;
18
+ @standard-lavender: #8692ca;
19
+ @standard-lilac: #8e57e3;
20
+ @standard-peach: #ca825b;
21
+ @standard-spring: #57a257;
22
+ }
23
+
24
+ [data-color-mode='dark'] {
25
+ @contrast-azure: #669bcc;
26
+ @contrast-blue: #aeb7e2;
27
+ @contrast-coral: #ff9494;
28
+ @contrast-jungle: #349d94;
29
+ @contrast-lavender: #7c8ad0;
30
+ @contrast-lilac: #c982c9;
31
+ @contrast-peach: #d6855c;
32
+ @contrast-spring: #8cb24c;
33
+ @standard-azure: #669bcc;
34
+ @standard-blue: #aeb7e2;
35
+ @standard-coral: #ff9494;
36
+ @standard-jungle: #349d94;
37
+ @standard-lavender: #7c8ad0;
38
+ @standard-lilac: #c982c9;
39
+ @standard-peach: #d6855c;
40
+ @standard-spring: #8cb24c;
41
+ }
package/dist/data.scss ADDED
@@ -0,0 +1,41 @@
1
+ @use '~@entur/tokens/dist/semantic.css';
2
+ /* DO NOT CHANGE!*/
3
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
4
+ [data-color-mode='light'],
5
+ :root {
6
+ $contrast-azure: #64b2fb;
7
+ $contrast-blue: #6c6eb7;
8
+ $contrast-coral: #ff5959;
9
+ $contrast-jungle: #0fc2b3;
10
+ $contrast-lavender: #aeb7e2;
11
+ $contrast-lilac: #ea8bea;
12
+ $contrast-peach: #ffbf9e;
13
+ $contrast-spring: #7bc00b;
14
+ $standard-azure: #2f98fa;
15
+ $standard-blue: #181c56;
16
+ $standard-coral: #ff5959;
17
+ $standard-jungle: #0ea2a8;
18
+ $standard-lavender: #8692ca;
19
+ $standard-lilac: #8e57e3;
20
+ $standard-peach: #ca825b;
21
+ $standard-spring: #57a257;
22
+ }
23
+
24
+ [data-color-mode='dark'] {
25
+ $contrast-azure: #669bcc;
26
+ $contrast-blue: #aeb7e2;
27
+ $contrast-coral: #ff9494;
28
+ $contrast-jungle: #349d94;
29
+ $contrast-lavender: #7c8ad0;
30
+ $contrast-lilac: #c982c9;
31
+ $contrast-peach: #d6855c;
32
+ $contrast-spring: #8cb24c;
33
+ $standard-azure: #669bcc;
34
+ $standard-blue: #aeb7e2;
35
+ $standard-coral: #ff9494;
36
+ $standard-jungle: #349d94;
37
+ $standard-lavender: #7c8ad0;
38
+ $standard-lilac: #c982c9;
39
+ $standard-peach: #d6855c;
40
+ $standard-spring: #8cb24c;
41
+ }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  export * from './primitive';
2
2
  export * from './semantic';
3
3
  export * from './base';
4
+ export * from './data';
5
+ export * from './transport';
4
6
  export * from './componentColors';
5
7
  export * from './legacy-tokens';
@@ -103,12 +103,15 @@
103
103
  --sky-70: #044d6c;
104
104
  --sky-80: #003852;
105
105
  --sky-90: #022536;
106
+ --transparent-blue-alpha10: #9ea0bd1a;
106
107
  --transparent-blue-alpha40: #54568c66;
107
108
  --transparent-canary-alpha30: #fff4cd4d;
108
109
  --transparent-coral-alpha20: #ff949433;
109
- --transparent-ebony-alpha20: #e5e5e933;
110
+ --transparent-ebony-alpha15: #e5e5e926;
111
+ --transparent-ebony-alpha25: #e5e5e940;
110
112
  --transparent-ebony-alpha35: #e5e5e959;
111
113
  --transparent-lavender-alpha70: #aeb7e2b2;
114
+ --transparent-neutral-alpha10: #cfd2d41a;
112
115
  --transparent-neutral-alpha15: #cfd2d426;
113
116
  --transparent-peach-alpha70: #ffbf9eb2;
114
117
  --white-alpha-0: #ffffff00;
@@ -119,12 +119,15 @@ export declare const primitive: {
119
119
  _90: string;
120
120
  };
121
121
  transparent: {
122
+ blueAlpha10: string;
122
123
  blueAlpha40: string;
123
124
  canaryAlpha30: string;
124
125
  coralAlpha20: string;
125
- ebonyAlpha20: string;
126
+ ebonyAlpha15: string;
127
+ ebonyAlpha25: string;
126
128
  ebonyAlpha35: string;
127
129
  lavenderAlpha70: string;
130
+ neutralAlpha10: string;
128
131
  neutralAlpha15: string;
129
132
  peachAlpha70: string;
130
133
  };
@@ -103,12 +103,15 @@
103
103
  @sky-70: #044d6c;
104
104
  @sky-80: #003852;
105
105
  @sky-90: #022536;
106
+ @transparent-blue-alpha10: #9ea0bd1a;
106
107
  @transparent-blue-alpha40: #54568c66;
107
108
  @transparent-canary-alpha30: #fff4cd4d;
108
109
  @transparent-coral-alpha20: #ff949433;
109
- @transparent-ebony-alpha20: #e5e5e933;
110
+ @transparent-ebony-alpha15: #e5e5e926;
111
+ @transparent-ebony-alpha25: #e5e5e940;
110
112
  @transparent-ebony-alpha35: #e5e5e959;
111
113
  @transparent-lavender-alpha70: #aeb7e2b2;
114
+ @transparent-neutral-alpha10: #cfd2d41a;
112
115
  @transparent-neutral-alpha15: #cfd2d426;
113
116
  @transparent-peach-alpha70: #ffbf9eb2;
114
117
  @white-alpha-0: #ffffff00;
@@ -103,12 +103,15 @@ $sky-60: #046690;
103
103
  $sky-70: #044d6c;
104
104
  $sky-80: #003852;
105
105
  $sky-90: #022536;
106
+ $transparent-blue-alpha10: #9ea0bd1a;
106
107
  $transparent-blue-alpha40: #54568c66;
107
108
  $transparent-canary-alpha30: #fff4cd4d;
108
109
  $transparent-coral-alpha20: #ff949433;
109
- $transparent-ebony-alpha20: #e5e5e933;
110
+ $transparent-ebony-alpha15: #e5e5e926;
111
+ $transparent-ebony-alpha25: #e5e5e940;
110
112
  $transparent-ebony-alpha35: #e5e5e959;
111
113
  $transparent-lavender-alpha70: #aeb7e2b2;
114
+ $transparent-neutral-alpha10: #cfd2d41a;
112
115
  $transparent-neutral-alpha15: #cfd2d426;
113
116
  $transparent-peach-alpha70: #ffbf9eb2;
114
117
  $white-alpha-0: #ffffff00;
package/dist/semantic.css CHANGED
@@ -5,9 +5,11 @@
5
5
  --fill-background-contrast-dark: var(--ebony-90);
6
6
  --fill-background-contrast-light: var(--lavender-90);
7
7
  --fill-background-contrast-lightalt: var(--blue-90);
8
+ --fill-background-contrast-lightalt-2: var(--blue-100);
8
9
  --fill-background-overlay-solid: var(--ebony-80);
9
10
  --fill-background-overlay-solidalt: var(--ebony-75);
10
- --fill-background-overlay-transparent: var(--transparent-ebony-alpha20);
11
+ --fill-background-overlay-transparent: var(--transparent-ebony-alpha15);
12
+ --fill-background-overlay-transparentalt: var(--transparent-ebony-alpha25);
11
13
  --fill-background-standard-colorless: var(--white-alpha-0);
12
14
  --fill-background-standard-dark: var(--ebony-100);
13
15
  --fill-background-standard-light: var(--white-alpha-100);
@@ -16,6 +18,7 @@
16
18
  --fill-background-tint-dark: var(--ebony-95);
17
19
  --fill-background-tint-light: var(--blue-10);
18
20
  --fill-background-tint-neutral: var(--grey-10);
21
+ --fill-background-tint-transparent: var(--transparent-blue-alpha10);
19
22
  --fill-boolean-false-contrast: var(--blue-50);
20
23
  --fill-boolean-false-dark: var(--transparent-ebony-alpha35);
21
24
  --fill-boolean-false-light: var(--grey-60);
@@ -24,6 +27,7 @@
24
27
  --fill-boolean-true-light: var(--mint-60);
25
28
  --fill-disabled-light: var(--grey-40);
26
29
  --fill-disabled-transparent: var(--transparent-neutral-alpha15);
30
+ --fill-disabled-transparentalt: var(--transparent-neutral-alpha10);
27
31
  --fill-information-contrast: var(--sky-30);
28
32
  --fill-information-deep: var(--sky-50);
29
33
  --fill-information-muted: var(--sky-10);
@@ -63,8 +67,10 @@
63
67
  --fill-warning-muted: var(--canary-20);
64
68
  --fill-warning-tint: var(--canary-30);
65
69
  --shape-accent: var(--lavender-90);
70
+ --shape-contrast: var(--lavender-40);
66
71
  --shape-dark: var(--ebony-100);
67
- --shape-darkalt: var(--ebony-20);
72
+ --shape-darkalt: var(--ebony-30);
73
+ --shape-disabled: var(--grey-80);
68
74
  --shape-highlight: var(--coral-40);
69
75
  --shape-highlightalt: var(--coral-30);
70
76
  --shape-inactive: var(--blue-40);
@@ -76,6 +82,7 @@
76
82
  --shape-negativealt: var(--coral-30);
77
83
  --shape-neutral: var(--grey-70);
78
84
  --shape-neutralalt: var(--grey-50);
85
+ --shape-neutralalt2: var(--grey-60);
79
86
  --shape-subdued: var(--blue-70);
80
87
  --shape-subduedalt: var(--blue-30);
81
88
  --shape-success: var(--mint-60);
@@ -106,7 +113,8 @@
106
113
  --stroke-warning: var(--canary-70);
107
114
  --text-accent: var(--lavender-90);
108
115
  --text-dark: var(--ebony-100);
109
- --text-darkalt: var(--ebony-20);
116
+ --text-darkalt: var(--ebony-30);
117
+ --text-disabled: var(--grey-80);
110
118
  --text-highlight: var(--lavender-40);
111
119
  --text-highlightalt: var(--peach-40);
112
120
  --text-light: var(--white-alpha-100);
@@ -115,6 +123,7 @@
115
123
  --text-negativealt: var(--coral-30);
116
124
  --text-neutral: var(--grey-70);
117
125
  --text-neutralalt: var(--grey-50);
126
+ --text-neutralalt2: var(--grey-60);
118
127
  --text-subdued: var(--blue-70);
119
128
  --text-subduedalt: var(--blue-30);
120
129
  --text-success: var(--mint-60);
@@ -5,11 +5,13 @@ export declare const semantic: {
5
5
  dark: string;
6
6
  light: string;
7
7
  lightalt: string;
8
+ lightalt2: string;
8
9
  };
9
10
  overlay: {
10
11
  solid: string;
11
12
  solidalt: string;
12
13
  transparent: string;
14
+ transparentalt: string;
13
15
  };
14
16
  standard: {
15
17
  colorless: string;
@@ -24,6 +26,7 @@ export declare const semantic: {
24
26
  dark: string;
25
27
  light: string;
26
28
  neutral: string;
29
+ transparent: string;
27
30
  };
28
31
  };
29
32
  boolean: {
@@ -41,6 +44,7 @@ export declare const semantic: {
41
44
  disabled: {
42
45
  light: string;
43
46
  transparent: string;
47
+ transparentalt: string;
44
48
  };
45
49
  information: {
46
50
  contrast: string;
@@ -113,8 +117,10 @@ export declare const semantic: {
113
117
  };
114
118
  shape: {
115
119
  accent: string;
120
+ contrast: string;
116
121
  dark: string;
117
122
  darkalt: string;
123
+ disabled: string;
118
124
  highlight: string;
119
125
  highlightalt: string;
120
126
  inactive: string;
@@ -126,6 +132,7 @@ export declare const semantic: {
126
132
  negativealt: string;
127
133
  neutral: string;
128
134
  neutralalt: string;
135
+ neutralalt2: string;
129
136
  subdued: string;
130
137
  subduedalt: string;
131
138
  success: string;
@@ -161,6 +168,7 @@ export declare const semantic: {
161
168
  accent: string;
162
169
  dark: string;
163
170
  darkalt: string;
171
+ disabled: string;
164
172
  highlight: string;
165
173
  highlightalt: string;
166
174
  light: string;
@@ -169,6 +177,7 @@ export declare const semantic: {
169
177
  negativealt: string;
170
178
  neutral: string;
171
179
  neutralalt: string;
180
+ neutralalt2: string;
172
181
  subdued: string;
173
182
  subduedalt: string;
174
183
  success: string;
@@ -5,9 +5,11 @@
5
5
  @fill-background-contrast-dark: @ebony-90;
6
6
  @fill-background-contrast-light: @lavender-90;
7
7
  @fill-background-contrast-lightalt: @blue-90;
8
+ @fill-background-contrast-lightalt-2: @blue-100;
8
9
  @fill-background-overlay-solid: @ebony-80;
9
10
  @fill-background-overlay-solidalt: @ebony-75;
10
- @fill-background-overlay-transparent: @transparent-ebony-alpha20;
11
+ @fill-background-overlay-transparent: @transparent-ebony-alpha15;
12
+ @fill-background-overlay-transparentalt: @transparent-ebony-alpha25;
11
13
  @fill-background-standard-colorless: @white-alpha-0;
12
14
  @fill-background-standard-dark: @ebony-100;
13
15
  @fill-background-standard-light: @white-alpha-100;
@@ -16,6 +18,7 @@
16
18
  @fill-background-tint-dark: @ebony-95;
17
19
  @fill-background-tint-light: @blue-10;
18
20
  @fill-background-tint-neutral: @grey-10;
21
+ @fill-background-tint-transparent: @transparent-blue-alpha10;
19
22
  @fill-boolean-false-contrast: @blue-50;
20
23
  @fill-boolean-false-dark: @transparent-ebony-alpha35;
21
24
  @fill-boolean-false-light: @grey-60;
@@ -24,6 +27,7 @@
24
27
  @fill-boolean-true-light: @mint-60;
25
28
  @fill-disabled-light: @grey-40;
26
29
  @fill-disabled-transparent: @transparent-neutral-alpha15;
30
+ @fill-disabled-transparentalt: @transparent-neutral-alpha10;
27
31
  @fill-information-contrast: @sky-30;
28
32
  @fill-information-deep: @sky-50;
29
33
  @fill-information-muted: @sky-10;
@@ -63,8 +67,10 @@
63
67
  @fill-warning-muted: @canary-20;
64
68
  @fill-warning-tint: @canary-30;
65
69
  @shape-accent: @lavender-90;
70
+ @shape-contrast: @lavender-40;
66
71
  @shape-dark: @ebony-100;
67
- @shape-darkalt: @ebony-20;
72
+ @shape-darkalt: @ebony-30;
73
+ @shape-disabled: @grey-80;
68
74
  @shape-highlight: @coral-40;
69
75
  @shape-highlightalt: @coral-30;
70
76
  @shape-inactive: @blue-40;
@@ -76,6 +82,7 @@
76
82
  @shape-negativealt: @coral-30;
77
83
  @shape-neutral: @grey-70;
78
84
  @shape-neutralalt: @grey-50;
85
+ @shape-neutralalt2: @grey-60;
79
86
  @shape-subdued: @blue-70;
80
87
  @shape-subduedalt: @blue-30;
81
88
  @shape-success: @mint-60;
@@ -106,7 +113,8 @@
106
113
  @stroke-warning: @canary-70;
107
114
  @text-accent: @lavender-90;
108
115
  @text-dark: @ebony-100;
109
- @text-darkalt: @ebony-20;
116
+ @text-darkalt: @ebony-30;
117
+ @text-disabled: @grey-80;
110
118
  @text-highlight: @lavender-40;
111
119
  @text-highlightalt: @peach-40;
112
120
  @text-light: @white-alpha-100;
@@ -115,6 +123,7 @@
115
123
  @text-negativealt: @coral-30;
116
124
  @text-neutral: @grey-70;
117
125
  @text-neutralalt: @grey-50;
126
+ @text-neutralalt2: @grey-60;
118
127
  @text-subdued: @blue-70;
119
128
  @text-subduedalt: @blue-30;
120
129
  @text-success: @mint-60;
@@ -5,9 +5,11 @@
5
5
  $fill-background-contrast-dark: $ebony-90;
6
6
  $fill-background-contrast-light: $lavender-90;
7
7
  $fill-background-contrast-lightalt: $blue-90;
8
+ $fill-background-contrast-lightalt-2: $blue-100;
8
9
  $fill-background-overlay-solid: $ebony-80;
9
10
  $fill-background-overlay-solidalt: $ebony-75;
10
- $fill-background-overlay-transparent: $transparent-ebony-alpha20;
11
+ $fill-background-overlay-transparent: $transparent-ebony-alpha15;
12
+ $fill-background-overlay-transparentalt: $transparent-ebony-alpha25;
11
13
  $fill-background-standard-colorless: $white-alpha-0;
12
14
  $fill-background-standard-dark: $ebony-100;
13
15
  $fill-background-standard-light: $white-alpha-100;
@@ -16,6 +18,7 @@ $fill-background-subdued-light: $blue-30;
16
18
  $fill-background-tint-dark: $ebony-95;
17
19
  $fill-background-tint-light: $blue-10;
18
20
  $fill-background-tint-neutral: $grey-10;
21
+ $fill-background-tint-transparent: $transparent-blue-alpha10;
19
22
  $fill-boolean-false-contrast: $blue-50;
20
23
  $fill-boolean-false-dark: $transparent-ebony-alpha35;
21
24
  $fill-boolean-false-light: $grey-60;
@@ -24,6 +27,7 @@ $fill-boolean-true-dark: $mint-40;
24
27
  $fill-boolean-true-light: $mint-60;
25
28
  $fill-disabled-light: $grey-40;
26
29
  $fill-disabled-transparent: $transparent-neutral-alpha15;
30
+ $fill-disabled-transparentalt: $transparent-neutral-alpha10;
27
31
  $fill-information-contrast: $sky-30;
28
32
  $fill-information-deep: $sky-50;
29
33
  $fill-information-muted: $sky-10;
@@ -63,8 +67,10 @@ $fill-warning-deep: $canary-60;
63
67
  $fill-warning-muted: $canary-20;
64
68
  $fill-warning-tint: $canary-30;
65
69
  $shape-accent: $lavender-90;
70
+ $shape-contrast: $lavender-40;
66
71
  $shape-dark: $ebony-100;
67
- $shape-darkalt: $ebony-20;
72
+ $shape-darkalt: $ebony-30;
73
+ $shape-disabled: $grey-80;
68
74
  $shape-highlight: $coral-40;
69
75
  $shape-highlightalt: $coral-30;
70
76
  $shape-inactive: $blue-40;
@@ -76,6 +82,7 @@ $shape-negative: $coral-60;
76
82
  $shape-negativealt: $coral-30;
77
83
  $shape-neutral: $grey-70;
78
84
  $shape-neutralalt: $grey-50;
85
+ $shape-neutralalt2: $grey-60;
79
86
  $shape-subdued: $blue-70;
80
87
  $shape-subduedalt: $blue-30;
81
88
  $shape-success: $mint-60;
@@ -106,7 +113,8 @@ $stroke-transparentalt: $transparent-lavender-alpha70;
106
113
  $stroke-warning: $canary-70;
107
114
  $text-accent: $lavender-90;
108
115
  $text-dark: $ebony-100;
109
- $text-darkalt: $ebony-20;
116
+ $text-darkalt: $ebony-30;
117
+ $text-disabled: $grey-80;
110
118
  $text-highlight: $lavender-40;
111
119
  $text-highlightalt: $peach-40;
112
120
  $text-light: $white-alpha-100;
@@ -115,6 +123,7 @@ $text-negative: $coral-60;
115
123
  $text-negativealt: $coral-30;
116
124
  $text-neutral: $grey-70;
117
125
  $text-neutralalt: $grey-50;
126
+ $text-neutralalt2: $grey-60;
118
127
  $text-subdued: $blue-70;
119
128
  $text-subduedalt: $blue-30;
120
129
  $text-success: $mint-60;