energy-foundations 1.0.2 → 1.1.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/fonts/selection.json +1 -1
- package/dist/foundations/_fonts.scss +751 -377
- package/dist/foundations/_grid.scss +15 -5
- package/dist/foundations/_state.scss +3 -3
- package/dist/foundations/_typography.scss +1 -0
- package/dist/mixins/_layout.scss +1 -1
- package/dist/mixins/_typography.scss +30 -0
- package/dist/style.css +1 -1
- package/dist/variables/_color.scss +4 -4
- package/dist/variables/_layout.scss +3 -0
- package/dist/variables/_spacing.scss +2 -0
- package/dist/variables/_typography.scss +42 -5
- package/dist/variables.css +15 -9
- package/package.json +1 -1
|
@@ -21,13 +21,28 @@ $rds-typography-caption-01: (
|
|
|
21
21
|
font: #{calc(14 / $f-base) + rem} / #{calc(18 / $f-base) + rem} $rds-typography-f-text
|
|
22
22
|
);
|
|
23
23
|
|
|
24
|
+
$rds-typography-caption-01-bold: (
|
|
25
|
+
font: #{calc(14 / $f-base) + rem} / #{calc(18 / $f-base) + rem} $rds-typography-f-text-bold
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
$rds-typography-caption-01-underline: (
|
|
29
|
+
font: #{calc(14 / $f-base) + rem} / #{calc(18 / $f-base) + rem} $rds-typography-f-text
|
|
30
|
+
);
|
|
31
|
+
|
|
24
32
|
$rds-typography-caption-02: (
|
|
25
33
|
font: #{calc(12 / $f-base) + rem} / #{calc(16 / $f-base) + rem} $rds-typography-f-text
|
|
26
34
|
);
|
|
27
35
|
|
|
36
|
+
$rds-typography-caption-02-bold: (
|
|
37
|
+
font: #{calc(12 / $f-base) + rem} / #{calc(16 / $f-base) + rem} $rds-typography-f-text-bold
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
$rds-typography-caption-02-underline: (
|
|
41
|
+
font: #{calc(12 / $f-base) + rem} / #{calc(16 / $f-base) + rem} $rds-typography-f-text
|
|
42
|
+
);
|
|
43
|
+
|
|
28
44
|
$rds-typography-caption-tag: (
|
|
29
|
-
font: #{calc(12 / $f-base) + rem} / #{calc(16 / $f-base) + rem} $rds-typography-f-text
|
|
30
|
-
letter-spacing: 0.5px
|
|
45
|
+
font: #{calc(12 / $f-base) + rem} / #{calc(16 / $f-base) + rem} $rds-typography-f-text
|
|
31
46
|
);
|
|
32
47
|
|
|
33
48
|
$rds-typography-body-01: (
|
|
@@ -40,7 +55,6 @@ $rds-typography-body-01-bold: (
|
|
|
40
55
|
|
|
41
56
|
$rds-typography-body-01-underline: (
|
|
42
57
|
font: #{calc(16 / $f-base) + rem} / #{calc(21 / $f-base) + rem} $rds-typography-f-text,
|
|
43
|
-
text-decoration: underline
|
|
44
58
|
);
|
|
45
59
|
|
|
46
60
|
$rds-typography-body-02: (
|
|
@@ -53,7 +67,6 @@ $rds-typography-body-02-bold: (
|
|
|
53
67
|
|
|
54
68
|
$rds-typography-body-02-underline: (
|
|
55
69
|
font: #{calc(14 / $f-base) + rem} / #{calc(20 / $f-base) + rem} $rds-typography-f-text,
|
|
56
|
-
text-decoration: underline
|
|
57
70
|
);
|
|
58
71
|
|
|
59
72
|
$rds-typography-button-01: (
|
|
@@ -111,7 +124,7 @@ $rds-typography-headline-02: (
|
|
|
111
124
|
font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
|
|
112
125
|
),
|
|
113
126
|
ld: (
|
|
114
|
-
font: #{calc(
|
|
127
|
+
font: #{calc(36 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
|
|
115
128
|
),
|
|
116
129
|
xd: (
|
|
117
130
|
font: #{calc(44 / $f-base) + rem} / #{calc(56 / $f-base) + rem} $rds-typography-f-headline
|
|
@@ -210,7 +223,11 @@ $rds-typography-numbers-03: (
|
|
|
210
223
|
|
|
211
224
|
$rds-types-all: (
|
|
212
225
|
caption-01: $rds-typography-caption-01,
|
|
226
|
+
caption-01-bold: $rds-typography-caption-01-bold,
|
|
227
|
+
caption-01-underline: $rds-typography-caption-01-underline,
|
|
213
228
|
caption-02: $rds-typography-caption-02,
|
|
229
|
+
caption-02-bold: $rds-typography-caption-02-bold,
|
|
230
|
+
caption-02-underline: $rds-typography-caption-02-underline,
|
|
214
231
|
caption-tag: $rds-typography-caption-tag,
|
|
215
232
|
body-01: $rds-typography-body-01,
|
|
216
233
|
body-02: $rds-typography-body-02,
|
|
@@ -235,7 +252,11 @@ $rds-types-all: (
|
|
|
235
252
|
|
|
236
253
|
$rds-types-sd: (
|
|
237
254
|
caption-01: $rds-typography-caption-01,
|
|
255
|
+
caption-01-bold: $rds-typography-caption-01-bold,
|
|
256
|
+
caption-01-underline: $rds-typography-caption-01-underline,
|
|
238
257
|
caption-02: $rds-typography-caption-02,
|
|
258
|
+
caption-02-bold: $rds-typography-caption-02-bold,
|
|
259
|
+
caption-02-underline: $rds-typography-caption-02-underline,
|
|
239
260
|
caption-tag: $rds-typography-caption-tag,
|
|
240
261
|
body-01: $rds-typography-body-01,
|
|
241
262
|
body-02: $rds-typography-body-02,
|
|
@@ -260,7 +281,11 @@ $rds-types-sd: (
|
|
|
260
281
|
|
|
261
282
|
$rds-types-md: (
|
|
262
283
|
caption-01: $rds-typography-caption-01,
|
|
284
|
+
caption-01-bold: $rds-typography-caption-01-bold,
|
|
285
|
+
caption-01-underline: $rds-typography-caption-01-underline,
|
|
263
286
|
caption-02: $rds-typography-caption-02,
|
|
287
|
+
caption-02-bold: $rds-typography-caption-02-bold,
|
|
288
|
+
caption-02-underline: $rds-typography-caption-02-underline,
|
|
264
289
|
caption-tag: $rds-typography-caption-tag,
|
|
265
290
|
body-01: $rds-typography-body-01,
|
|
266
291
|
body-02: $rds-typography-body-02,
|
|
@@ -285,7 +310,11 @@ $rds-types-md: (
|
|
|
285
310
|
|
|
286
311
|
$rds-types-ld: (
|
|
287
312
|
caption-01: $rds-typography-caption-01,
|
|
313
|
+
caption-01-bold: $rds-typography-caption-01-bold,
|
|
314
|
+
caption-01-underline: $rds-typography-caption-01-underline,
|
|
288
315
|
caption-02: $rds-typography-caption-02,
|
|
316
|
+
caption-02-bold: $rds-typography-caption-02-bold,
|
|
317
|
+
caption-02-underline: $rds-typography-caption-02-underline,
|
|
289
318
|
caption-tag: $rds-typography-caption-tag,
|
|
290
319
|
body-01: $rds-typography-body-01,
|
|
291
320
|
body-02: $rds-typography-body-02,
|
|
@@ -310,7 +339,11 @@ $rds-types-ld: (
|
|
|
310
339
|
|
|
311
340
|
$rds-types-xd: (
|
|
312
341
|
caption-01: $rds-typography-caption-01,
|
|
342
|
+
caption-01-bold: $rds-typography-caption-01-bold,
|
|
343
|
+
caption-01-underline: $rds-typography-caption-01-underline,
|
|
313
344
|
caption-02: $rds-typography-caption-02,
|
|
345
|
+
caption-02-bold: $rds-typography-caption-02-bold,
|
|
346
|
+
caption-02-underline: $rds-typography-caption-02-underline,
|
|
314
347
|
caption-tag: $rds-typography-caption-tag,
|
|
315
348
|
body-01: $rds-typography-body-01,
|
|
316
349
|
body-02: $rds-typography-body-02,
|
|
@@ -348,7 +381,11 @@ $rds-types-fluid: (
|
|
|
348
381
|
/* ESTAS SON GENERADAS A MANO, NO ELIMINAR */
|
|
349
382
|
:root {
|
|
350
383
|
--rds-caption-01: #{map.values($rds-typography-caption-01)};
|
|
384
|
+
--rds-caption-01-bold: #{map.values($rds-typography-caption-01-bold)};
|
|
385
|
+
--rds-caption-01-underline: #{map.values($rds-typography-caption-01-underline)};
|
|
351
386
|
--rds-caption-02: #{map.values($rds-typography-caption-02)};
|
|
387
|
+
--rds-caption-02-bold: #{map.values($rds-typography-caption-02-bold)};
|
|
388
|
+
--rds-caption-02-underline: #{map.values($rds-typography-caption-02-underline)};
|
|
352
389
|
--rds-caption-tag: #{map.values($rds-typography-caption-tag)};
|
|
353
390
|
--rds-body-01: #{map.values($rds-typography-body-01)};
|
|
354
391
|
--rds-body-02: #{map.values($rds-typography-body-02)};
|
package/dist/variables.css
CHANGED
|
@@ -17,14 +17,18 @@
|
|
|
17
17
|
--rds-typography-f-headline: 'RepsolSoleDisplayRegular';
|
|
18
18
|
--rds-typography-f-headline-bold: 'RepsolSoleDisplayBold';
|
|
19
19
|
--rds-caption-01: 0.875rem/1.125rem RepsolSoleTextRegular;
|
|
20
|
+
--rds-caption-01-bold: 0.875rem/1.125rem RepsolSoleTextBold;
|
|
21
|
+
--rds-caption-01-underline: 0.875rem/1.125rem RepsolSoleTextRegular;
|
|
20
22
|
--rds-caption-02: 0.75rem/1rem RepsolSoleTextRegular;
|
|
21
|
-
--rds-caption-
|
|
23
|
+
--rds-caption-02-bold: 0.75rem/1rem RepsolSoleTextBold;
|
|
24
|
+
--rds-caption-02-underline: 0.75rem/1rem RepsolSoleTextRegular;
|
|
25
|
+
--rds-caption-tag: 0.75rem/1rem RepsolSoleTextRegular;
|
|
22
26
|
--rds-body-01: 1rem/1.5rem RepsolSoleTextRegular;
|
|
23
27
|
--rds-body-02: 0.875rem/1.25rem RepsolSoleTextRegular;
|
|
24
28
|
--rds-body-01-bold: 1rem/1.5rem RepsolSoleTextBold;
|
|
25
|
-
--rds-body-01-underline: 1rem/1.3125rem RepsolSoleTextRegular
|
|
29
|
+
--rds-body-01-underline: 1rem/1.3125rem RepsolSoleTextRegular;
|
|
26
30
|
--rds-body-02-bold: 0.875rem/1.25rem RepsolSoleTextBold;
|
|
27
|
-
--rds-body-02-underline: 0.875rem/1.25rem RepsolSoleTextRegular
|
|
31
|
+
--rds-body-02-underline: 0.875rem/1.25rem RepsolSoleTextRegular;
|
|
28
32
|
--rds-button-01: 1rem/1.5rem RepsolSoleTextBold;
|
|
29
33
|
--rds-button-02: 0.875rem/1.25rem RepsolSoleTextBold;
|
|
30
34
|
--rds-title-01: 1.125rem/1.625rem RepsolSoleTextBold;
|
|
@@ -39,7 +43,7 @@
|
|
|
39
43
|
--rds-headline-01-xd: 3.5rem/4.25rem RepsolSoleDisplayRegular;
|
|
40
44
|
--rds-headline-02-sd: 1.75rem/2.25rem RepsolSoleDisplayRegular;
|
|
41
45
|
--rds-headline-02-md: 2rem/2.5rem RepsolSoleDisplayRegular;
|
|
42
|
-
--rds-headline-02-ld: 2.
|
|
46
|
+
--rds-headline-02-ld: 2.25rem/3rem RepsolSoleDisplayRegular;
|
|
43
47
|
--rds-headline-02-xd: 2.75rem/3.5rem RepsolSoleDisplayRegular;
|
|
44
48
|
--rds-headline-03-sd: 1.375rem/1.875rem RepsolSoleDisplayRegular;
|
|
45
49
|
--rds-headline-03-md: 1.5rem/2rem RepsolSoleDisplayRegular;
|
|
@@ -75,6 +79,7 @@
|
|
|
75
79
|
--rds-spacing-layout-s: 16px;
|
|
76
80
|
--rds-spacing-layout-m: 24px;
|
|
77
81
|
--rds-spacing-layout-l: 32px;
|
|
82
|
+
--rds-spacing-layout-2l: 40px;
|
|
78
83
|
--rds-spacing-layout-xl: 48px;
|
|
79
84
|
--rds-spacing-layout-2xl: 64px;
|
|
80
85
|
--rds-spacing-layout-3xl: 72px;
|
|
@@ -92,6 +97,7 @@
|
|
|
92
97
|
--bp-mobile: 719px;
|
|
93
98
|
--bp-tablet: 720px;
|
|
94
99
|
--bp-desktop: 1280px;
|
|
100
|
+
--bp-desktop-large: 1440px;
|
|
95
101
|
--bp-ultrawide: 1600px;
|
|
96
102
|
|
|
97
103
|
/* _grid.scss */
|
|
@@ -125,11 +131,11 @@
|
|
|
125
131
|
--rds-color-surface-grey: var(--rds-color-neutral-grey);
|
|
126
132
|
--rds-color-surface-navy: var(--rds-color-navy-80);
|
|
127
133
|
--rds-color-surface-sand: var(--rds-color-orange-0);
|
|
128
|
-
--rds-color-highlightedSurface-ivoryGradient:
|
|
129
|
-
radial-gradient(72.02% 87% at -30.72% 124.82%, rgba(246, 61, 120, 0.16) 0%, rgba(246, 61, 120, 0) 100%),
|
|
134
|
+
--rds-color-highlightedSurface-ivoryGradient: radial-gradient(72.02% 87% at -30.72% 124.82%, rgba(246, 61, 120, 0.16) 0%, rgba(246, 61, 120, 0) 100%),
|
|
130
135
|
radial-gradient(50.12% 73.11% at 0% 0%, rgba(255, 199, 0, 0.08) 0%, rgba(255, 199, 0, 0) 100%),
|
|
131
136
|
radial-gradient(100.59% 146.79% at 134.93% -38.77%, rgba(245, 13, 54, 0.16) 0%, rgba(245, 13, 54, 0) 100%),
|
|
132
|
-
radial-gradient(54.5% 79.54% at 104.6% 106.5%, rgba(255, 153, 3, 0.16) 0%, rgba(255, 153, 3, 0) 100%)
|
|
137
|
+
radial-gradient(54.5% 79.54% at 104.6% 106.5%, rgba(255, 153, 3, 0.16) 0%, rgba(255, 153, 3, 0) 100%),
|
|
138
|
+
linear-gradient(0deg, #FBF3EF, #FBF3EF);
|
|
133
139
|
--rds-color-highlightedSurface-orangeGradient: linear-gradient(137.24deg, #FF9C00 -6.64%, #FF590A 24.3%, #FF2A3F 65.21%, #E50052 99.99%);
|
|
134
140
|
--rds-color-highlightedSurface-blueGradient: radial-gradient(117.28% 100.09% at 3.87% 0%, #00BED4 0%, rgba(5, 119, 150, 0.91) 23.06%, #005C7A 40.93%, #001E37 100%);
|
|
135
141
|
--rds-color-surface-highlighted-active: var(--rds-color-orange-0);
|
|
@@ -149,8 +155,8 @@
|
|
|
149
155
|
--rds-color-semantic-background-error: var(--rds-color-red-05);
|
|
150
156
|
--rds-color-semantic-background-information: var(--rds-color-turquoise-05);
|
|
151
157
|
--rds-color-semantic-background-warning: var(--rds-color-yellow-10);
|
|
152
|
-
--rds-color-extended-content-promo: var(--rds-color-
|
|
153
|
-
--rds-color-extended-surface-promo: var(--rds-color-
|
|
158
|
+
--rds-color-extended-content-promo: var(--rds-color-gradient-orange-stop100);
|
|
159
|
+
--rds-color-extended-surface-promo: var(--rds-color-gradient-orange-stop100);
|
|
154
160
|
--rds-color-styles-elevation-glass-base: #ffffff99;
|
|
155
161
|
--rds-color-styles-elevation-overlay: #001e3766;
|
|
156
162
|
--rds-color-button-primary-surface-active: var(--rds-color-turquoise-50);
|