@telia/teddy 0.7.60 → 0.7.62
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/components/top-row-buttons/top-row-buttons.cjs +8 -8
- package/dist/components/top-row-buttons/top-row-buttons.js +8 -8
- package/dist/style.css +32 -28
- package/dist/tokens/color/variables.cjs +6 -0
- package/dist/tokens/color/variables.d.ts +2 -0
- package/dist/tokens/color/variables.js +6 -0
- package/package.json +1 -1
|
@@ -6,14 +6,14 @@ const React = require("react");
|
|
|
6
6
|
require("../../assets/sprite.44b293a1-teddy.svg");
|
|
7
7
|
const components_icon_icon = require("../icon/icon.cjs");
|
|
8
8
|
const styles = {
|
|
9
|
-
"teddy-top-row-buttons": "_teddy-top-row-
|
|
10
|
-
"teddy-top-row-buttons__track": "_teddy-top-row-
|
|
11
|
-
"teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--
|
|
12
|
-
"teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--
|
|
13
|
-
"teddy-top-row-buttons__item": "_teddy-top-row-
|
|
14
|
-
"teddy-top-row-buttons__button": "_teddy-top-row-
|
|
15
|
-
"teddy-top-row-buttons__label": "_teddy-top-row-
|
|
16
|
-
"teddy-top-row-buttons__emoji": "_teddy-top-row-
|
|
9
|
+
"teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
|
|
10
|
+
"teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
|
|
11
|
+
"teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
|
|
12
|
+
"teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
|
|
13
|
+
"teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
|
|
14
|
+
"teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
|
|
15
|
+
"teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
|
|
16
|
+
"teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
|
|
17
17
|
};
|
|
18
18
|
const rootClassName = "teddy-top-row-buttons";
|
|
19
19
|
const Root = React.forwardRef(
|
|
@@ -4,14 +4,14 @@ import React__default from "react";
|
|
|
4
4
|
import "../../assets/sprite.44b293a1-teddy.svg";
|
|
5
5
|
import { Icon } from "../icon/icon.js";
|
|
6
6
|
const styles = {
|
|
7
|
-
"teddy-top-row-buttons": "_teddy-top-row-
|
|
8
|
-
"teddy-top-row-buttons__track": "_teddy-top-row-
|
|
9
|
-
"teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--
|
|
10
|
-
"teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--
|
|
11
|
-
"teddy-top-row-buttons__item": "_teddy-top-row-
|
|
12
|
-
"teddy-top-row-buttons__button": "_teddy-top-row-
|
|
13
|
-
"teddy-top-row-buttons__label": "_teddy-top-row-
|
|
14
|
-
"teddy-top-row-buttons__emoji": "_teddy-top-row-
|
|
7
|
+
"teddy-top-row-buttons": "_teddy-top-row-buttons_1ogzx_1",
|
|
8
|
+
"teddy-top-row-buttons__track": "_teddy-top-row-buttons__track_1ogzx_4",
|
|
9
|
+
"teddy-top-row-buttons__track--centered": "_teddy-top-row-buttons__track--centered_1ogzx_16",
|
|
10
|
+
"teddy-top-row-buttons__track--scroll": "_teddy-top-row-buttons__track--scroll_1ogzx_19",
|
|
11
|
+
"teddy-top-row-buttons__item": "_teddy-top-row-buttons__item_1ogzx_23",
|
|
12
|
+
"teddy-top-row-buttons__button": "_teddy-top-row-buttons__button_1ogzx_27",
|
|
13
|
+
"teddy-top-row-buttons__label": "_teddy-top-row-buttons__label_1ogzx_109",
|
|
14
|
+
"teddy-top-row-buttons__emoji": "_teddy-top-row-buttons__emoji_1ogzx_112"
|
|
15
15
|
};
|
|
16
16
|
const rootClassName = "teddy-top-row-buttons";
|
|
17
17
|
const Root = React__default.forwardRef(
|
package/dist/style.css
CHANGED
|
@@ -252,33 +252,33 @@
|
|
|
252
252
|
font-family: var(--teddy-typography-family-default);
|
|
253
253
|
gap: var(--teddy-spacing-100);
|
|
254
254
|
}
|
|
255
|
-
}._teddy-top-row-
|
|
255
|
+
}._teddy-top-row-buttons_1ogzx_1 {
|
|
256
256
|
width: 100%;
|
|
257
257
|
}
|
|
258
|
-
._teddy-top-row-
|
|
258
|
+
._teddy-top-row-buttons__track_1ogzx_4 {
|
|
259
259
|
display: flex;
|
|
260
260
|
gap: var(--teddy-spacing-200);
|
|
261
261
|
overflow-x: auto;
|
|
262
|
-
scroll-snap-type: x mandatory;
|
|
263
262
|
scroll-behavior: smooth;
|
|
264
263
|
scrollbar-width: none;
|
|
265
264
|
padding-bottom: var(--teddy-spacing-50);
|
|
266
265
|
width: 100%;
|
|
267
266
|
}
|
|
268
|
-
._teddy-top-row-
|
|
267
|
+
._teddy-top-row-buttons__track_1ogzx_4::-webkit-scrollbar {
|
|
269
268
|
display: none;
|
|
270
269
|
}
|
|
271
|
-
._teddy-top-row-buttons__track--
|
|
270
|
+
._teddy-top-row-buttons__track--centered_1ogzx_16 {
|
|
272
271
|
justify-content: center;
|
|
273
272
|
}
|
|
274
|
-
._teddy-top-row-buttons__track--
|
|
273
|
+
._teddy-top-row-buttons__track--scroll_1ogzx_19 {
|
|
275
274
|
justify-content: flex-start;
|
|
275
|
+
scroll-snap-type: x mandatory;
|
|
276
276
|
}
|
|
277
|
-
._teddy-top-row-
|
|
277
|
+
._teddy-top-row-buttons__item_1ogzx_23 {
|
|
278
278
|
flex: 0 0 auto;
|
|
279
279
|
scroll-snap-align: start;
|
|
280
280
|
}
|
|
281
|
-
._teddy-top-row-
|
|
281
|
+
._teddy-top-row-buttons__button_1ogzx_27 {
|
|
282
282
|
display: inline-flex;
|
|
283
283
|
align-items: center;
|
|
284
284
|
gap: var(--teddy-spacing-100);
|
|
@@ -296,7 +296,7 @@
|
|
|
296
296
|
transition-timing-function: var(--teddy-motion-easing-ease-in-out);
|
|
297
297
|
position: relative;
|
|
298
298
|
}
|
|
299
|
-
._teddy-top-row-
|
|
299
|
+
._teddy-top-row-buttons__button_1ogzx_27:focus::before {
|
|
300
300
|
border-radius: inherit;
|
|
301
301
|
box-shadow: 0 0 0 var(--teddy-border-width-sm) var(--teddy-color-border-interactive-focus);
|
|
302
302
|
content: "";
|
|
@@ -305,65 +305,65 @@
|
|
|
305
305
|
inset: calc(var(--teddy-spacing-25) * -1);
|
|
306
306
|
position: absolute;
|
|
307
307
|
}
|
|
308
|
-
._teddy-top-row-
|
|
308
|
+
._teddy-top-row-buttons__button_1ogzx_27:focus:not(:focus-visible)::before {
|
|
309
309
|
opacity: 0;
|
|
310
310
|
}
|
|
311
|
-
._teddy-top-row-
|
|
311
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige] {
|
|
312
312
|
background-color: var(--teddy-color-background-beige);
|
|
313
313
|
color: var(--teddy-color-text-default);
|
|
314
314
|
}
|
|
315
|
-
._teddy-top-row-
|
|
315
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:hover {
|
|
316
316
|
background-color: var(--teddy-color-background-beige-hover);
|
|
317
317
|
}
|
|
318
|
-
._teddy-top-row-
|
|
318
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:active {
|
|
319
319
|
background-color: var(--teddy-color-background-beige-active);
|
|
320
320
|
}
|
|
321
|
-
._teddy-top-row-
|
|
321
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=beige] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=beige]:focus-visible {
|
|
322
322
|
background-color: var(--teddy-color-background-beige);
|
|
323
323
|
}
|
|
324
|
-
._teddy-top-row-
|
|
324
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey] {
|
|
325
325
|
background-color: var(--teddy-color-background-secondary);
|
|
326
326
|
color: var(--teddy-color-text-default);
|
|
327
327
|
}
|
|
328
|
-
._teddy-top-row-
|
|
328
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:hover {
|
|
329
329
|
background-color: var(--teddy-color-background-secondary-hover);
|
|
330
330
|
}
|
|
331
|
-
._teddy-top-row-
|
|
331
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:active {
|
|
332
332
|
background-color: var(--teddy-color-background-secondary-active);
|
|
333
333
|
}
|
|
334
|
-
._teddy-top-row-
|
|
334
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=grey] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=grey]:focus-visible {
|
|
335
335
|
background-color: var(--teddy-color-background-secondary);
|
|
336
336
|
}
|
|
337
|
-
._teddy-top-row-
|
|
337
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=white] {
|
|
338
338
|
background-color: var(--teddy-color-brand-white);
|
|
339
339
|
color: var(--teddy-color-text-default);
|
|
340
340
|
}
|
|
341
|
-
._teddy-top-row-
|
|
341
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:hover {
|
|
342
342
|
background-color: var(--teddy-color-background-interactive-transparent-hover);
|
|
343
343
|
}
|
|
344
|
-
._teddy-top-row-
|
|
344
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:active {
|
|
345
345
|
background-color: var(--teddy-color-background-interactive-transparent-active);
|
|
346
346
|
}
|
|
347
|
-
._teddy-top-row-
|
|
347
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=white] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=white]:focus-visible {
|
|
348
348
|
background-color: var(--teddy-color-brand-white);
|
|
349
349
|
}
|
|
350
|
-
._teddy-top-row-
|
|
350
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]), ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple] {
|
|
351
351
|
background-color: var(--teddy-color-background-interactive-primary);
|
|
352
352
|
color: var(--teddy-color-text-interactive-on-primary);
|
|
353
353
|
}
|
|
354
|
-
._teddy-top-row-
|
|
354
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):hover, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:hover {
|
|
355
355
|
background-color: var(--teddy-color-background-interactive-primary-hover);
|
|
356
356
|
}
|
|
357
|
-
._teddy-top-row-
|
|
357
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):active, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:active {
|
|
358
358
|
background-color: var(--teddy-color-background-interactive-primary-active);
|
|
359
359
|
}
|
|
360
|
-
._teddy-top-row-
|
|
360
|
+
._teddy-top-row-buttons__track_1ogzx_4[data-color=purple] ._teddy-top-row-buttons__button_1ogzx_27:not([data-color]):focus-visible, ._teddy-top-row-buttons__button_1ogzx_27[data-color=purple]:focus-visible {
|
|
361
361
|
background-color: var(--teddy-color-background-interactive-primary);
|
|
362
362
|
}
|
|
363
|
-
._teddy-top-row-
|
|
363
|
+
._teddy-top-row-buttons__label_1ogzx_109 {
|
|
364
364
|
white-space: nowrap;
|
|
365
365
|
}
|
|
366
|
-
._teddy-top-row-
|
|
366
|
+
._teddy-top-row-buttons__emoji_1ogzx_112 {
|
|
367
367
|
display: inline-flex;
|
|
368
368
|
align-items: center;
|
|
369
369
|
justify-content: center;
|
|
@@ -3864,6 +3864,8 @@
|
|
|
3864
3864
|
--teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
|
|
3865
3865
|
--teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
|
|
3866
3866
|
--teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
|
|
3867
|
+
--teddy-color-background-secondary-active: var(--teddy-color-gray-200);
|
|
3868
|
+
--teddy-color-background-secondary-hover: var(--teddy-color-gray-100);
|
|
3867
3869
|
--teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
|
|
3868
3870
|
--teddy-color-background-secondary: var(--teddy-color-gray-50);
|
|
3869
3871
|
--teddy-color-background-primary-negative: var(--teddy-color-gray-900);
|
|
@@ -8581,6 +8583,8 @@
|
|
|
8581
8583
|
--teddy-color-background-interactive-primary-active: var(--teddy-color-purple-600);
|
|
8582
8584
|
--teddy-color-background-interactive-primary-hover: var(--teddy-color-purple-700);
|
|
8583
8585
|
--teddy-color-background-interactive-primary: var(--teddy-color-purple-800);
|
|
8586
|
+
--teddy-color-background-secondary-active: var(--teddy-color-gray-200);
|
|
8587
|
+
--teddy-color-background-secondary-hover: var(--teddy-color-gray-100);
|
|
8584
8588
|
--teddy-color-background-secondary-negative: var(--teddy-color-gray-900);
|
|
8585
8589
|
--teddy-color-background-secondary: var(--teddy-color-gray-50);
|
|
8586
8590
|
--teddy-color-background-primary-negative: var(--teddy-color-gray-900);
|
|
@@ -177,6 +177,8 @@ const teddyColorBackgroundPrimary = "#ffffff";
|
|
|
177
177
|
const teddyColorBackgroundPrimaryNegative = "#1e1e20";
|
|
178
178
|
const teddyColorBackgroundSecondary = "#f3f3f8";
|
|
179
179
|
const teddyColorBackgroundSecondaryNegative = "#1e1e20";
|
|
180
|
+
const teddyColorBackgroundSecondaryHover = "#e5e5eb";
|
|
181
|
+
const teddyColorBackgroundSecondaryActive = "#c6c6cd";
|
|
180
182
|
const teddyColorBackgroundInteractivePrimary = "#4e0174";
|
|
181
183
|
const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
|
|
182
184
|
const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
|
|
@@ -385,6 +387,8 @@ const variables = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
|
|
|
385
387
|
teddyColorBackgroundPrimary,
|
|
386
388
|
teddyColorBackgroundPrimaryNegative,
|
|
387
389
|
teddyColorBackgroundSecondary,
|
|
390
|
+
teddyColorBackgroundSecondaryActive,
|
|
391
|
+
teddyColorBackgroundSecondaryHover,
|
|
388
392
|
teddyColorBackgroundSecondaryNegative,
|
|
389
393
|
teddyColorBackgroundStatusAttention,
|
|
390
394
|
teddyColorBackgroundStatusAttentionNegative,
|
|
@@ -691,6 +695,8 @@ exports.teddyColorBackgroundLightPurpleNegative = teddyColorBackgroundLightPurpl
|
|
|
691
695
|
exports.teddyColorBackgroundPrimary = teddyColorBackgroundPrimary;
|
|
692
696
|
exports.teddyColorBackgroundPrimaryNegative = teddyColorBackgroundPrimaryNegative;
|
|
693
697
|
exports.teddyColorBackgroundSecondary = teddyColorBackgroundSecondary;
|
|
698
|
+
exports.teddyColorBackgroundSecondaryActive = teddyColorBackgroundSecondaryActive;
|
|
699
|
+
exports.teddyColorBackgroundSecondaryHover = teddyColorBackgroundSecondaryHover;
|
|
694
700
|
exports.teddyColorBackgroundSecondaryNegative = teddyColorBackgroundSecondaryNegative;
|
|
695
701
|
exports.teddyColorBackgroundStatusAttention = teddyColorBackgroundStatusAttention;
|
|
696
702
|
exports.teddyColorBackgroundStatusAttentionNegative = teddyColorBackgroundStatusAttentionNegative;
|
|
@@ -175,6 +175,8 @@ export declare const teddyColorBackgroundPrimary = "#ffffff";
|
|
|
175
175
|
export declare const teddyColorBackgroundPrimaryNegative = "#1e1e20";
|
|
176
176
|
export declare const teddyColorBackgroundSecondary = "#f3f3f8";
|
|
177
177
|
export declare const teddyColorBackgroundSecondaryNegative = "#1e1e20";
|
|
178
|
+
export declare const teddyColorBackgroundSecondaryHover = "#e5e5eb";
|
|
179
|
+
export declare const teddyColorBackgroundSecondaryActive = "#c6c6cd";
|
|
178
180
|
export declare const teddyColorBackgroundInteractivePrimary = "#4e0174";
|
|
179
181
|
export declare const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
|
|
180
182
|
export declare const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
|
|
@@ -175,6 +175,8 @@ const teddyColorBackgroundPrimary = "#ffffff";
|
|
|
175
175
|
const teddyColorBackgroundPrimaryNegative = "#1e1e20";
|
|
176
176
|
const teddyColorBackgroundSecondary = "#f3f3f8";
|
|
177
177
|
const teddyColorBackgroundSecondaryNegative = "#1e1e20";
|
|
178
|
+
const teddyColorBackgroundSecondaryHover = "#e5e5eb";
|
|
179
|
+
const teddyColorBackgroundSecondaryActive = "#c6c6cd";
|
|
178
180
|
const teddyColorBackgroundInteractivePrimary = "#4e0174";
|
|
179
181
|
const teddyColorBackgroundInteractivePrimaryHover = "#6d02a3";
|
|
180
182
|
const teddyColorBackgroundInteractivePrimaryActive = "#8c07d0";
|
|
@@ -383,6 +385,8 @@ const variables = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
|
|
|
383
385
|
teddyColorBackgroundPrimary,
|
|
384
386
|
teddyColorBackgroundPrimaryNegative,
|
|
385
387
|
teddyColorBackgroundSecondary,
|
|
388
|
+
teddyColorBackgroundSecondaryActive,
|
|
389
|
+
teddyColorBackgroundSecondaryHover,
|
|
386
390
|
teddyColorBackgroundSecondaryNegative,
|
|
387
391
|
teddyColorBackgroundStatusAttention,
|
|
388
392
|
teddyColorBackgroundStatusAttentionNegative,
|
|
@@ -690,6 +694,8 @@ export {
|
|
|
690
694
|
teddyColorBackgroundPrimary,
|
|
691
695
|
teddyColorBackgroundPrimaryNegative,
|
|
692
696
|
teddyColorBackgroundSecondary,
|
|
697
|
+
teddyColorBackgroundSecondaryActive,
|
|
698
|
+
teddyColorBackgroundSecondaryHover,
|
|
693
699
|
teddyColorBackgroundSecondaryNegative,
|
|
694
700
|
teddyColorBackgroundStatusAttention,
|
|
695
701
|
teddyColorBackgroundStatusAttentionNegative,
|