@eui/styles 23.0.0-alpha.6 → 23.0.0-alpha.7

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.
@@ -1,176 +0,0 @@
1
- @use 'sass:map';
2
- @use 'sass:color';
3
- @use '../01-base/' as base;
4
- @use './colors-primitive' as primitive;
5
-
6
- $color-semantic-map: (
7
- surface-accent: map.get(primitive.$color-map, 'european-blue-50'),
8
- surface-selected: map.get(primitive.$color-map, 'european-blue-100'),
9
- surface-skeleton: map.get(primitive.$color-map, 'silver-fog-100'),
10
- surface-brand: map.get(primitive.$color-map, 'silver-fog-950'),
11
- surface-invisible: map.get(primitive.$color-map, 'alpha-silver-fog-0-0'),
12
-
13
- surface-elevation-sunken: map.get(primitive.$color-map, 'silver-fog-50'),
14
- surface-elevation-inset: map.get(primitive.$color-map, 'silver-fog-25'),
15
- surface-elevation: map.get(primitive.$color-map, 'silver-fog-0'),
16
- surface-elevation-raised: map.get(primitive.$color-map, 'silver-fog-0'),
17
- surface-elevation-elevated: map.get(primitive.$color-map, 'silver-fog-0'),
18
- surface-elevation-overlay: map.get(primitive.$color-map, 'silver-fog-0'),
19
-
20
- surface-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
21
- on-surface-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
22
- surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-50'),
23
- on-surface-disabled-subtle: map.get(primitive.$color-map, 'silver-fog-400'),
24
-
25
- surface-primary: map.get(primitive.$color-map, 'european-blue-600'),
26
- on-surface-primary: map.get(primitive.$color-map, 'silver-fog-0'),
27
- surface-primary--hover: map.get(primitive.$color-map, 'european-blue-700'),
28
- on-surface-primary--hover: map.get(primitive.$color-map, 'silver-fog-0'),
29
- surface-primary--pressed: map.get(primitive.$color-map, 'european-blue-800'),
30
- on-surface-primary--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
31
- surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-200'),
32
- on-surface-primary-subtle: map.get(primitive.$color-map, 'european-blue-800'),
33
-
34
- surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-300'),
35
- on-surface-highlight: map.get(primitive.$color-map, 'sunrise-orange-950'),
36
- surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-400'),
37
- on-surface-highlight--hover: map.get(primitive.$color-map, 'sunrise-orange-950'),
38
- surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-500'),
39
- on-surface-highlight--pressed: map.get(primitive.$color-map, 'sunrise-orange-950'),
40
- surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-50'),
41
- on-surface-highlight-subtler: map.get(primitive.$color-map, 'sunrise-orange-900'),
42
-
43
- surface-inverted: map.get(primitive.$color-map, 'silver-fog-950'),
44
- on-surface-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
45
- surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-950'),
46
- on-surface-inverted-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
47
- surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-950'),
48
- on-surface-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-600'),
49
-
50
- surface-neutral: map.get(primitive.$color-map, 'silver-fog-600'),
51
- on-surface-neutral: map.get(primitive.$color-map, 'silver-fog-0'),
52
- surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-700'),
53
- on-surface-neutral--hover: map.get(primitive.$color-map, 'silver-fog-0'),
54
- surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
55
- on-surface-neutral--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
56
- surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-100'),
57
- on-surface-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-900'),
58
- surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-200'),
59
- on-surface-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-900'),
60
- surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-75'),
61
- on-surface-neutral-subtler: map.get(primitive.$color-map, 'silver-fog-900'),
62
-
63
- surface-critical: map.get(primitive.$color-map, 'red-600'),
64
- on-surface-critical: map.get(primitive.$color-map, 'silver-fog-0'),
65
- surface-critical--hover: map.get(primitive.$color-map, 'red-700'),
66
- on-surface-critical--hover: map.get(primitive.$color-map, 'silver-fog-0'),
67
- surface-critical--pressed: map.get(primitive.$color-map, 'red-800'),
68
- on-surface-critical--pressed: map.get(primitive.$color-map, 'silver-fog-0'),
69
- surface-critical-subtle: map.get(primitive.$color-map, 'red-200'),
70
- on-surface-critical-subtle: map.get(primitive.$color-map, 'red-900'),
71
- surface-critical-subtler: map.get(primitive.$color-map, 'red-50'),
72
- on-surface-critical-subtler: map.get(primitive.$color-map, 'red-700'),
73
- surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-100'),
74
- on-surface-critical-subtler--hover: map.get(primitive.$color-map, 'red-900'),
75
-
76
- surface-info: map.get(primitive.$color-map, 'blue-600'),
77
- on-surface-info: map.get(primitive.$color-map, 'silver-fog-0'),
78
- surface-info-subtle: map.get(primitive.$color-map, 'blue-200'),
79
- on-surface-info-subtle: map.get(primitive.$color-map, 'blue-900'),
80
- surface-info-subtler: map.get(primitive.$color-map, 'blue-75'),
81
- on-surface-info-subtler: map.get(primitive.$color-map, 'blue-800'),
82
- surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-100'),
83
- on-surface-info-subtler--hover: map.get(primitive.$color-map, 'blue-900'),
84
-
85
- surface-success: map.get(primitive.$color-map, 'green-800'),
86
- on-surface-success: map.get(primitive.$color-map, 'silver-fog-0'),
87
- surface-success-subtle: map.get(primitive.$color-map, 'green-200'),
88
- on-surface-success-subtle: map.get(primitive.$color-map, 'green-900'),
89
- surface-success-subtler: map.get(primitive.$color-map, 'green-50'),
90
- on-surface-success-subtler: map.get(primitive.$color-map, 'green-800'),
91
- surface-success-subtler--hover: map.get(primitive.$color-map, 'green-200'),
92
- on-surface-success-subtler--hover: map.get(primitive.$color-map, 'green-900'),
93
-
94
- surface-warning: map.get(primitive.$color-map, 'orange-500'),
95
- on-surface-warning: map.get(primitive.$color-map, 'orange-950'),
96
- surface-warning-subtle: map.get(primitive.$color-map, 'orange-200'),
97
- on-surface-warning-subtle: map.get(primitive.$color-map, 'orange-900'),
98
- surface-warning-subtler: map.get(primitive.$color-map, 'orange-50'),
99
- on-surface-warning-subtler: map.get(primitive.$color-map, 'orange-800'),
100
- surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-100'),
101
- on-surface-warning-subtler--hover: map.get(primitive.$color-map, 'orange-900'),
102
-
103
- foreground: map.get(primitive.$color-map, 'silver-fog-950'),
104
- foreground-subtle: map.get(primitive.$color-map, 'silver-fog-800'),
105
- foreground-subtler: map.get(primitive.$color-map, 'silver-fog-700'),
106
- foreground-placeholder: map.get(primitive.$color-map, 'silver-fog-500'),
107
- foreground-disabled: map.get(primitive.$color-map, 'silver-fog-400'),
108
- foreground-primary: map.get(primitive.$color-map, 'european-blue-600'),
109
- foreground-success: map.get(primitive.$color-map, 'green-800'),
110
- foreground-info: map.get(primitive.$color-map, 'blue-900'),
111
- foreground-warning: map.get(primitive.$color-map, 'orange-800'),
112
- foreground-critical: map.get(primitive.$color-map, 'red-600'),
113
- foreground-highlight: map.get(primitive.$color-map, 'sunrise-orange-900'),
114
- foreground-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
115
-
116
- border-brand: map.get(primitive.$color-map, 'silver-fog-950'),
117
- border-divider: map.get(primitive.$color-map, 'silver-fog-200'),
118
- border-disabled: map.get(primitive.$color-map, 'silver-fog-100'),
119
-
120
- border-primary: map.get(primitive.$color-map, 'european-blue-600'),
121
- border-primary--hover: map.get(primitive.$color-map, 'european-blue-500'),
122
- border-primary--pressed: map.get(primitive.$color-map, 'european-blue-400'),
123
- border-primary-subtle: map.get(primitive.$color-map, 'european-blue-400'),
124
- border-primary-subtler: map.get(primitive.$color-map, 'european-blue-100'),
125
-
126
- border-info: map.get(primitive.$color-map, 'blue-700'),
127
- border-info-subtle: map.get(primitive.$color-map, 'blue-300'),
128
-
129
- border-success: map.get(primitive.$color-map, 'green-700'),
130
- border-success-subtle: map.get(primitive.$color-map, 'green-300'),
131
-
132
- border-warning: map.get(primitive.$color-map, 'orange-600'),
133
- border-warning-subtle: map.get(primitive.$color-map, 'orange-300'),
134
-
135
- border-critical: map.get(primitive.$color-map, 'red-600'),
136
- border-critical-subtle: map.get(primitive.$color-map, 'red-300'),
137
-
138
- border-highlight: map.get(primitive.$color-map, 'sunrise-orange-400'),
139
- border-highlight-subtle: map.get(primitive.$color-map, 'sunrise-orange-300'),
140
-
141
- border-inverted: map.get(primitive.$color-map, 'silver-fog-25'),
142
- border-inverted-disabled: map.get(primitive.$color-map, 'silver-fog-500'),
143
-
144
- border-neutral: map.get(primitive.$color-map, 'silver-fog-500'),
145
- border-neutral--hover: map.get(primitive.$color-map, 'silver-fog-600'),
146
- border-neutral-subtle: map.get(primitive.$color-map, 'silver-fog-300'),
147
- border-neutral-subtle--hover: map.get(primitive.$color-map, 'silver-fog-400'),
148
-
149
- link: map.get(primitive.$color-map, 'european-blue-600'),
150
- link--focused: map.get(primitive.$color-map, 'european-blue-600'),
151
- link--hover: map.get(primitive.$color-map, 'european-blue-700'),
152
- link--pressed: map.get(primitive.$color-map, 'european-blue-800'),
153
- link--visited: map.get(primitive.$color-map, 'european-blue-700'),
154
-
155
- link-inverted: map.get(primitive.$color-map, 'silver-fog-0'),
156
- link-inverted--focused: map.get(primitive.$color-map, 'silver-fog-0'),
157
- link-inverted--hover: map.get(primitive.$color-map, 'silver-fog-50'),
158
- link-inverted--pressed: map.get(primitive.$color-map, 'silver-fog-100'),
159
- link-inverted--visited: map.get(primitive.$color-map, 'silver-fog-25'),
160
-
161
- link-contrast: map.get(primitive.$color-map, 'silver-fog-950'),
162
- link-contrast--focused: map.get(primitive.$color-map, 'silver-fog-950'),
163
- link-contrast--hover: map.get(primitive.$color-map, 'silver-fog-950'),
164
- link-contrast--pressed: map.get(primitive.$color-map, 'silver-fog-800'),
165
- link-contrast--visited: map.get(primitive.$color-map, 'silver-fog-900'),
166
-
167
- focus: map.get(primitive.$color-map, 'european-blue-600'),
168
- focus-inverted: map.get(primitive.$color-map, 'european-blue-300'),
169
- focus-critical: map.get(primitive.$color-map, 'red-400'),
170
-
171
- alpha-backdrop-strong: map.get(primitive.$color-map, 'alpha-silver-fog-950-60'),
172
- alpha-backdrop: map.get(primitive.$color-map, 'alpha-silver-fog-950-30'),
173
- alpha-backdrop-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-950-10'),
174
- alpha-backdrop-inverted: map.get(primitive.$color-map, 'alpha-silver-fog-0-14'),
175
- alpha-backdrop-inverted-subtle: map.get(primitive.$color-map, 'alpha-silver-fog-0-10'),
176
- );
@@ -1,108 +0,0 @@
1
- @use 'sass:map';
2
- @use '../01-base-eds/' as base;
3
- @use './colors-primitive' as colors-primitive;
4
-
5
- // BORDER RADIUS
6
-
7
- $border-radius-map: (
8
- none: 0,
9
- xs: 2px,
10
- s: 4px,
11
- m: 8px,
12
- l: 12px,
13
- full: 999px
14
- );
15
-
16
-
17
- // BORDER WIDTH
18
-
19
- $border-width-map: (
20
- none: 0,
21
- xs: 1px,
22
- s: 2px,
23
- m: 4px
24
- );
25
-
26
- // OPACITY
27
-
28
- $opacity-map: (
29
- none: 0,
30
- 10: 0.1,
31
- 20: 0.2,
32
- 30: 0.3,
33
- 40: 0.4,
34
- 50: 0.5,
35
- 60: 0.6,
36
- 70: 0.7,
37
- 80: 0.8,
38
- 90: 0.9,
39
- 100: 1
40
- );
41
-
42
- // SHADOWS
43
-
44
- $shadow-map: (
45
- 1: (
46
- offset-x: 0px,
47
- offset-y: 6px,
48
- blur: 12px,
49
- spread: 0px,
50
- color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-8'),
51
- ),
52
- 2: (
53
- offset-x: 0px,
54
- offset-y: 10px,
55
- blur: 22px,
56
- spread: 0px,
57
- color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-10'),
58
- ),
59
- 3: (
60
- offset-x: 0px,
61
- offset-y: 12px,
62
- blur: 32px,
63
- spread: 0px,
64
- color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-12'),
65
- ),
66
- 4: (
67
- offset-x: 0px,
68
- offset-y: 14px,
69
- blur: 42px,
70
- spread: 0px,
71
- color: map.get(colors-primitive.$color-map, 'alpha-silver-fog-950-14'),
72
- )
73
- );
74
-
75
- // BREAKPOINTS
76
-
77
- $breakpoint-size-map: (
78
- xs: 480px,
79
- s: 768px,
80
- m: 996px,
81
- l: 1140px,
82
- xl: 1440px,
83
- 2xl: 1600px,
84
- );
85
-
86
- $breakpoint-map: (
87
- mobile-s: base.new-breakpoint(max-width map.get($breakpoint-size-map, 'xs') - 1),
88
- mobile-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xs') max-width map.get($breakpoint-size-map, 's') - 1),
89
- mobile: base.new-breakpoint(max-width map.get($breakpoint-size-map, 's') - 1),
90
- tablet-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'm') - 1),
91
- tablet-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'm') max-width map.get($breakpoint-size-map, 'l') - 1),
92
- tablet: base.new-breakpoint(min-width map.get($breakpoint-size-map, 's') max-width map.get($breakpoint-size-map, 'l') - 1),
93
- desktop-s: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l') max-width map.get($breakpoint-size-map, 'xl') - 1),
94
- desktop-m: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'xl') max-width map.get($breakpoint-size-map, '2xl') - 1),
95
- desktop-l: base.new-breakpoint(min-width map.get($breakpoint-size-map, '2xl')),
96
- desktop: base.new-breakpoint(min-width map.get($breakpoint-size-map, 'l')),
97
- );
98
-
99
- $eds-bkp-mobile-s: map.get($breakpoint-map, 'mobile-s') !default;
100
- $eds-bkp-mobile-m: map.get($breakpoint-map, 'mobile-m') !default;
101
- $eds-bkp-mobile: map.get($breakpoint-map, 'mobile') !default;
102
- $eds-bkp-tablet-s: map.get($breakpoint-map, 'tablet-s') !default;
103
- $eds-bkp-tablet-m: map.get($breakpoint-map, 'tablet-m') !default;
104
- $eds-bkp-tablet: map.get($breakpoint-map, 'tablet') !default;
105
- $eds-bkp-desktop-s: map.get($breakpoint-map, 'desktop-s') !default;
106
- $eds-bkp-desktop-m: map.get($breakpoint-map, 'desktop-m') !default;
107
- $eds-bkp-desktop-l: map.get($breakpoint-map, 'desktop-l') !default;
108
- $eds-bkp-desktop: map.get($breakpoint-map, 'desktop') !default;
@@ -1,69 +0,0 @@
1
- @use 'sass:map';
2
- @use '../02-tokens/dimensions-primitive' as dimensions-primitive;
3
-
4
- $font-size-list: ('2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl', '8xl', '9xl');
5
-
6
- $font-size-map: (
7
- '9xl': 6rem, // 96px
8
- '8xl': 4rem, // 64px
9
- '7xl': 3.25rem, // 52px
10
- '6xl': 2.75rem, // 44px
11
- '5xl': 2.25rem, // 36px
12
- '4xl': 1.75rem, // 28px
13
- '3xl': 1.5rem, // 24px
14
- '2xl': 1.375rem, // 22px
15
- 'xl': 1.25rem, // 20px
16
- 'l': 1.125rem, // 18px
17
- 'm': 1rem, // 16px
18
- 's': 0.875rem, // 14px
19
- 'xs': 0.75rem, // 12px
20
- '2xs': 0.625rem // 10px
21
- );
22
-
23
- // font weight map
24
-
25
- $font-weight-map: (
26
- 'light': 300,
27
- 'regular': 400,
28
- 'medium': 500,
29
- 'semi-bold': 600,
30
- 'bold': 700
31
- );
32
-
33
- $font-line-height-map: (
34
- '10xl': map.get(dimensions-primitive.$dimension-map, 96),
35
- '9xl': map.get(dimensions-primitive.$dimension-map, 64),
36
- '8xl': map.get(dimensions-primitive.$dimension-map, 60),
37
- '7xl': map.get(dimensions-primitive.$dimension-map, 56),
38
- '6xl': map.get(dimensions-primitive.$dimension-map, 52),
39
- '5xl': map.get(dimensions-primitive.$dimension-map, 48),
40
- '4xl': map.get(dimensions-primitive.$dimension-map, 44),
41
- '3xl': map.get(dimensions-primitive.$dimension-map, 40),
42
- '2xl': map.get(dimensions-primitive.$dimension-map, 36),
43
- 'xl': map.get(dimensions-primitive.$dimension-map, 32),
44
- 'l': map.get(dimensions-primitive.$dimension-map, 28),
45
- 'm': map.get(dimensions-primitive.$dimension-map, 24),
46
- 's': map.get(dimensions-primitive.$dimension-map, 20),
47
- 'xs': map.get(dimensions-primitive.$dimension-map, 16),
48
- '2xs': map.get(dimensions-primitive.$dimension-map, 12)
49
- );
50
-
51
- // semantic font-size link to letter-spacing map
52
- $font-size-letter-spacing-map: (
53
- '9xl': -2%,
54
- '8xl': -2%,
55
- '7xl': -2%,
56
- '6xl': -1%,
57
- '5xl': -1%,
58
- '4xl': -1%,
59
- '3xl': -1%,
60
- '2xl': normal,
61
- 'xl': normal,
62
- 'l': normal,
63
- 'm': normal,
64
- 's': normal,
65
- 'xs': normal,
66
- '2xs': normal
67
- );
68
-
69
-
@@ -1,116 +0,0 @@
1
- $typography-semantic-map: (
2
- desktop: (
3
- display: (
4
- xl: ( size: 9xl, line-height: 10xl, weight: regular ),
5
- l: ( size: 8xl, line-height: 9xl, weight: semi-bold ),
6
- ),
7
- heading: (
8
- 2xl: ( size: 6xl, line-height: 6xl, weight: semi-bold ),
9
- xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
10
- l: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
11
- m: ( size: 3xl, line-height: xl, weight: semi-bold ),
12
- s: ( size: xl, line-height: l, weight: semi-bold ),
13
- s-medium: ( size: xl, line-height: l, weight: medium ),
14
- xs: ( size: l, line-height: l, weight: bold ),
15
- ),
16
- paragraph: (
17
- xl: ( size: 3xl, line-height: 2xl, weight: regular ),
18
- l: ( size: l, line-height: l, weight: regular ),
19
- l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),
20
- l-bold: ( size: l, line-height: l, weight: bold ),
21
- m: ( size: m, line-height: m, weight: regular ),
22
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
23
- m-bold: ( size: m, line-height: m, weight: bold ),
24
- s: ( size: s, line-height: s, weight: regular ),
25
- s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
26
- s-bold: ( size: s, line-height: s, weight: bold ),
27
- ),
28
- label: (
29
- l: ( size: l, line-height: l, weight: regular ),
30
- m: ( size: m, line-height: m, weight: regular ),
31
- m-medium: ( size: m, line-height: m, weight: medium ),
32
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
33
- s: ( size: s, line-height: s, weight: regular ),
34
- ),
35
- microcopy: (
36
- xs: ( size: xs, line-height: xs, weight: medium ),
37
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
38
- ),
39
- ),
40
- tablet: (
41
- display: (
42
- xl: ( size: 8xl, line-height: 9xl, weight: regular ),
43
- l: ( size: 7xl, line-height: 6xl, weight: semi-bold ),
44
- ),
45
- heading: (
46
- 2xl: ( size: 5xl, line-height: 4xl, weight: semi-bold ),
47
- xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
48
- l: ( size: 2xl, line-height: l, weight: semi-bold ),
49
- m: ( size: xl, line-height: l, weight: semi-bold ),
50
- s: ( size: l, line-height: m, weight: semi-bold ),
51
- s-medium: ( size: l, line-height: m, weight: medium ),
52
- xs: ( size: m, line-height: m, weight: bold ),
53
- ),
54
- paragraph: (
55
- xl: ( size: 2xl, line-height: xl, weight: regular ),
56
- l: ( size: l, line-height: l, weight: regular ),
57
- l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),
58
- l-bold: ( size: l, line-height: l, weight: bold ),
59
- m: ( size: m, line-height: m, weight: regular ),
60
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
61
- m-bold: ( size: m, line-height: m, weight: bold ),
62
- s: ( size: s, line-height: s, weight: regular ),
63
- s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
64
- s-bold: ( size: s, line-height: s, weight: bold ),
65
- ),
66
- label: (
67
- l: ( size: l, line-height: l, weight: regular ),
68
- m: ( size: m, line-height: m, weight: regular ),
69
- m-medium: ( size: m, line-height: m, weight: medium ),
70
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
71
- s: ( size: s, line-height: s, weight: regular ),
72
- ),
73
- microcopy: (
74
- xs: ( size: xs, line-height: xs, weight: medium ),
75
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
76
- ),
77
- ),
78
- mobile: (
79
- display: (
80
- xl: ( size: 6xl, line-height: 4xl, weight: regular ),
81
- l: ( size: 5xl, line-height: 2xl, weight: semi-bold ),
82
- ),
83
- heading: (
84
- 2xl: ( size: 4xl, line-height: 2xl, weight: semi-bold ),
85
- xl: ( size: 2xl, line-height: l, weight: semi-bold ),
86
- l: ( size: xl, line-height: m, weight: semi-bold ),
87
- m: ( size: l, line-height: m, weight: semi-bold ),
88
- s: ( size: m, line-height: m, weight: semi-bold ),
89
- s-medium: ( size: m, line-height: m, weight: medium ),
90
- xs: ( size: m, line-height: m, weight: bold ),
91
- ),
92
- paragraph: (
93
- xl: ( size: xl, line-height: l, weight: regular ),
94
- l: ( size: l, line-height: l, weight: regular ),
95
- l-semi-bold: ( size: l, line-height: l, weight: semi-bold ),
96
- l-bold: ( size: l, line-height: l, weight: bold ),
97
- m: ( size: m, line-height: m, weight: regular ),
98
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
99
- m-bold: ( size: m, line-height: m, weight: bold ),
100
- s: ( size: s, line-height: s, weight: regular ),
101
- s-semi-bold: ( size: s, line-height: s, weight: semi-bold ),
102
- s-bold: ( size: s, line-height: s, weight: bold ),
103
- ),
104
- label: (
105
- l: ( size: l, line-height: l, weight: regular ),
106
- m: ( size: m, line-height: m, weight: regular ),
107
- m-medium: ( size: m, line-height: m, weight: medium ),
108
- m-semi-bold: ( size: m, line-height: m, weight: semi-bold ),
109
- s: ( size: s, line-height: s, weight: regular ),
110
- ),
111
- microcopy: (
112
- xs: ( size: xs, line-height: xs, weight: medium ),
113
- 2xs: ( size: 2xs, line-height: 2xs, weight: regular ),
114
- ),
115
- ),
116
- );
@@ -1,7 +0,0 @@
1
- @use '../02-tokens-eds/colors-semantic-dark-theme' as semantic;
2
-
3
- html.eui-t-dark {
4
- @each $color, $value in semantic.$color-semantic-map {
5
- --eds-c-#{$color}: #{$value};
6
- }
7
- }
@@ -1,7 +0,0 @@
1
- @use '../02-tokens-eds/colors-semantic' as semantic;
2
-
3
- :root {
4
- @each $color, $value in semantic.$color-semantic-map {
5
- --eds-c-#{$color}: #{$value};
6
- }
7
- }
@@ -1,71 +0,0 @@
1
- @use 'sass:map';
2
- @use '../01-base-eds' as base;
3
- @use '../02-tokens/dimensions-semantic' as dimensions-semantic;
4
- @use '../02-tokens-eds/maps' as maps;
5
- @use '../02-tokens-eds/typography-primitive' as typography-primitive;
6
- @use '../02-tokens-eds/typography-semantic' as typography-semantic;
7
-
8
- @font-face {
9
- font-family: 'Inter';
10
- src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');
11
- font-weight: 100 900;
12
- font-style: normal;
13
- font-display: block;
14
- }
15
-
16
- @font-face {
17
- font-family: 'Inter';
18
- src: url('#{base.$eds-assets-base-path}/fonts/inter//InterVariable-Italic.woff2') format('woff2');
19
- font-weight: 100 900;
20
- font-display: block;
21
- font-style: italic;
22
- }
23
-
24
- :root {
25
- // TYPOGRAPHY
26
- --eds-f-family: 'Inter', arial, sans-serif;
27
-
28
- // font families
29
- --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
30
-
31
- @each $size, $def in typography-primitive.$font-size-map {
32
- --eds-f-s-#{$size}: #{$def};
33
- }
34
- @each $size, $def in typography-primitive.$font-line-height-map {
35
- --eds-f-lh-#{$size}: #{$def};
36
- }
37
- @each $size, $def in typography-primitive.$font-weight-map {
38
- --eds-f-w-#{$size}: #{$def};
39
- }
40
-
41
- // EDS raw vars
42
- @each $size, $def in typography-primitive.$font-line-height-map {
43
- --eds-f-lh-#{$size}: #{$def};
44
- }
45
- @each $size, $def in typography-primitive.$font-size-letter-spacing-map {
46
- --eds-f-ls-#{$size}: #{$def};
47
- }
48
-
49
- // EDS typography
50
- @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
51
- @each $size, $sizeDef in $typeDef {
52
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
53
- }
54
- }
55
-
56
- @include base.media(maps.$eds-bkp-tablet) {
57
- @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {
58
- @each $size, $sizeDef in $typeDef {
59
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
60
- }
61
- }
62
- }
63
-
64
- @include base.media(maps.$eds-bkp-mobile) {
65
- @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {
66
- @each $size, $sizeDef in $typeDef {
67
- --eds-f-#{$type}-#{$size}: normal normal var(--eds-f-w-#{map.get($sizeDef, 'weight')}) var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eui-f-eds-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);
68
- }
69
- }
70
- }
71
- }
@@ -1,64 +0,0 @@
1
- @use 'sass:map';
2
- @use '../02-tokens/dimensions-semantic' as dimensions-semantic;
3
- @use '../02-tokens-eds/maps' as maps;
4
-
5
- :root {
6
- // SPACING - eds-sp
7
- // ---------------
8
-
9
- @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {
10
- --eds-sp-#{$spacing}: #{$value};
11
- }
12
- @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {
13
- --eds-si-#{$sizing}: #{$value};
14
- }
15
-
16
-
17
- // BORDER RADIUS - eds-br
18
- // ----------------------
19
-
20
- @each $br, $value in maps.$border-radius-map {
21
- --eds-br-#{$br}: #{$value};
22
- }
23
-
24
-
25
- // BREAKPOINTS - eds-bp
26
- // ---------------------------
27
-
28
- @each $bp, $value in maps.$breakpoint-size-map {
29
- --eds-bp-#{$bp}: #{$value};
30
- }
31
-
32
-
33
- // BORDER WIDTH - eds-bw
34
- // ---------------------
35
-
36
- @each $br, $value in maps.$border-width-map {
37
- --eds-bw-#{$br}: #{$value};
38
- }
39
-
40
-
41
- // BOX-SHADOWS - eds-sh
42
- // --------------------
43
-
44
- --eds-sh-none: none;
45
- @each $sh, $shDef in maps.$shadow-map {
46
- --eds-sh-#{$sh}: #{map.get($shDef, 'offset-x') map.get($shDef, 'offset-y') map.get($shDef, 'blur') map.get($shDef, 'spread') map.get($shDef, 'color')};
47
- }
48
-
49
-
50
- // ICON-SIZES - eds-is
51
- // -------------------
52
-
53
- @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {
54
- --eds-is-#{$icon-size}: #{$value};
55
- }
56
-
57
-
58
- // OPACITY - eds-op
59
- // ----------------
60
-
61
- @each $idx, $value in maps.$opacity-map {
62
- --eds-op-#{$idx}: #{$value};
63
- }
64
- }
@@ -1,23 +0,0 @@
1
- @use '../../base/02-tokens-eds/colors-semantic' as semantic;
2
-
3
- @each $color, $value in semantic.$color-semantic-map {
4
- @if str-index($color, 'border-') {
5
- .eds-u-c-#{$color} {
6
- border-color: var(--eds-c-#{$color}) !important;
7
- }
8
- } @else if str-index($color, 'surface-') {
9
- @if str-index($color, 'on-surface-') {
10
- .eds-u-c-#{$color} {
11
- color: var(--eds-c-#{$color}) !important;
12
- }
13
- } @else {
14
- .eds-u-c-#{$color} {
15
- background-color: var(--eds-c-#{$color}) !important;
16
- }
17
- }
18
- } @else {
19
- .eds-u-c-#{$color} {
20
- color: var(--eds-c-#{$color}) !important;
21
- }
22
- }
23
- }
@@ -1,24 +0,0 @@
1
- @use 'sass:map';
2
- @use '../../base/01-base' as base;
3
- @use '../../base/02-tokens-eds/typography-primitive' as typography-primitives;
4
- @use '../../base/02-tokens-eds/typography-semantic' as typography-semantic;
5
-
6
- @each $font, $def in typography-primitives.$font-weight-map {
7
- .eds-u-f-weight-#{$font} {
8
- font-weight: var(--eds-f-w-#{$font}) !important;
9
- }
10
- }
11
- @each $font, $def in typography-primitives.$font-size-map {
12
- .eds-u-f-size-#{$font} {
13
- font-size: var(--eds-f-s-#{$font}) !important;
14
- }
15
- }
16
-
17
- @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {
18
- @each $size, $sizeDef in $typeDef {
19
- .eds-u-f-#{$type}-#{$size} {
20
- font: var(--eds-f-#{$type}-#{$size}) !important;
21
- letter-spacing: var(--eds-f-ls-#{map.get($sizeDef, 'size')}) !important;
22
- }
23
- }
24
- }