Skip to content

Commit 86213c8

Browse files
tuentisreMarcosld
tuentisre
and
Marcosld
authored
feat(skin): WEB-2382 Movistar alignment p2 (#1499)
- [x] Pending update mistica.css with new spacing tokens --------- Co-authored-by: Marcosld <Marcosld@users.noreply.github.com> Co-authored-by: Marcos Luis Delgado <mluis@tuenti.com>
1 parent 31ab591 commit 86213c8

683 files changed

Lines changed: 1284 additions & 191 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/import-design-tokens.yml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ on:
1111
description: 'Create a draft PR'
1212
required: false
1313
default: false
14+
branch:
15+
description: 'Branch name for the PR. By default it is "import-design-tokens-${ref}"'
16+
required: false
17+
default: 'import-design-tokens-${{github.event.inputs.ref}}'
1418

1519
permissions:
1620
contents: write
@@ -66,7 +70,7 @@ jobs:
6670
add-paths: 'src/skins'
6771
commit-message: 'feat(skin): update design tokens'
6872
title: 'feat(skin): update design tokens'
69-
branch: import-design-tokens-${{ steps.validate.outputs.ref }}
73+
branch: ${{github.event.inputs.branch}}
7074
reviewers: 'atabel,pladaria'
7175
delete-branch: true
7276
draft: ${{github.event.inputs.draft}}

‎AGENTS.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,7 @@ React component library for Telefonica's Design System.
1515
- Prefer semantic queries (`getByRole`, `getByLabelText`) over `getByTestId`
1616

1717
**Conventions**: `type` over `interface`, `export type` for types, `'use client';` for client components
18+
19+
**Components**:
20+
- If you create a new component always create a snippet for playroom.
21+
- If you add props to a component always update stories accordingly and add the new props to args and argTypes.

‎CLAUDE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
AGENTS.md

‎css/blau.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
--mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
7272
--mistica-color-appBarBackground: var(--mistica-blau-white);
7373
--mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
74+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
75+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
76+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
77+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
7478
--mistica-color-skeletonWave: var(--mistica-blau-grey2);
7579
--mistica-color-borderLow: var(--mistica-blau-grey1);
7680
--mistica-color-border: var(--mistica-blau-grey3);
@@ -372,6 +376,9 @@
372376
--mistica-font-size-cardTitle: 1.25rem;
373377
--mistica-line-height-cardTitle: 1.5rem;
374378
--mistica-font-weight-cardTitle: 400;
379+
--mistica-font-size-drawerTitle: 1.25rem;
380+
--mistica-line-height-drawerTitle: 1.5rem;
381+
--mistica-font-weight-drawerTitle: 300;
375382
--mistica-font-weight-rowTitle: 400;
376383
--mistica-font-weight-button: 500;
377384
--mistica-font-size-tabsLabel: 1rem;
@@ -395,6 +402,22 @@
395402
--mistica-font-size-chipLabel: 0.875rem;
396403
--mistica-line-height-chipLabel: 1.25rem;
397404
--mistica-font-weight-chipLabel: 500;
405+
--mistica-font-size-cardPretitleSnap: 0.875rem;
406+
--mistica-line-height-cardPretitleSnap: 1.25rem;
407+
--mistica-font-size-cardTitleSnap: 0.875rem;
408+
--mistica-line-height-cardTitleSnap: 1.25rem;
409+
--mistica-font-size-cardSubtitleSnap: 0.875rem;
410+
--mistica-line-height-cardSubtitleSnap: 1.25rem;
411+
--mistica-font-size-cardDescriptionSnap: 0.875rem;
412+
--mistica-line-height-cardDescriptionSnap: 1.25rem;
413+
--mistica-font-size-cardPretitleDefault: 0.875rem;
414+
--mistica-line-height-cardPretitleDefault: 1.25rem;
415+
--mistica-font-size-cardTitleDefault: 1.125rem;
416+
--mistica-line-height-cardTitleDefault: 1.5rem;
417+
--mistica-font-size-cardSubtitleDefault: 0.875rem;
418+
--mistica-line-height-cardSubtitleDefault: 1.25rem;
419+
--mistica-font-size-cardDescriptionDefault: 0.875rem;
420+
--mistica-line-height-cardDescriptionDefault: 1.25rem;
398421
--mistica-font-size-inputLabel: 0.75rem;
399422
--mistica-line-height-inputLabel: 1rem;
400423
--mistica-font-size-inputValue: 1rem;
@@ -433,6 +456,10 @@
433456
--mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
434457
--mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
435458
--mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
459+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-white), 0.05);
460+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-white), 0.08);
461+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
462+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-white), 0.05);
436463
--mistica-color-skeletonWave: var(--mistica-blau-grey5);
437464
--mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
438465
--mistica-color-border: var(--mistica-blau-darkModeGrey);
@@ -717,6 +744,10 @@
717744
--mistica-color-backgroundBrandBottom: var(--mistica-blau-darkModeBlack);
718745
--mistica-color-appBarBackground: var(--mistica-blau-darkModeGrey);
719746
--mistica-color-navigationBarBackground: var(--mistica-blau-darkModeBlack);
747+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-white), 0.05);
748+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-white), 0.08);
749+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-white), 0.03);
750+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-white), 0.05);
720751
--mistica-color-skeletonWave: var(--mistica-blau-grey5);
721752
--mistica-color-borderLow: var(--mistica-blau-darkModeBlack);
722753
--mistica-color-border: var(--mistica-blau-darkModeGrey);
@@ -1006,6 +1037,10 @@
10061037
--mistica-color-backgroundBrandBottom: var(--mistica-blau-blauBluePrimary);
10071038
--mistica-color-appBarBackground: var(--mistica-blau-white);
10081039
--mistica-color-navigationBarBackground: var(--mistica-blau-blauBluePrimary);
1040+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.05);
1041+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-blau-raw-blauBlueSecondary), 0.08);
1042+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-blau-raw-grey6), 0.05);
1043+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-blau-raw-grey6), 0.08);
10091044
--mistica-color-skeletonWave: var(--mistica-blau-grey2);
10101045
--mistica-color-borderLow: var(--mistica-blau-grey1);
10111046
--mistica-color-border: var(--mistica-blau-grey3);
@@ -1289,6 +1324,8 @@
12891324
--mistica-line-height-10: 4.5rem;
12901325
--mistica-font-size-cardTitle: 1.5rem;
12911326
--mistica-line-height-cardTitle: 1.75rem;
1327+
--mistica-font-size-drawerTitle: 1.75rem;
1328+
--mistica-line-height-drawerTitle: 2rem;
12921329

12931330
--mistica-font-size-tabsLabel: 1.125rem;
12941331
--mistica-line-height-tabsLabel: 1.5rem;
@@ -1304,6 +1341,22 @@
13041341

13051342
--mistica-font-size-chipLabel: 1rem;
13061343
--mistica-line-height-chipLabel: 1.5rem;
1344+
--mistica-font-size-cardPretitleSnap: 1rem;
1345+
--mistica-line-height-cardPretitleSnap: 1.5rem;
1346+
--mistica-font-size-cardTitleSnap: 1rem;
1347+
--mistica-line-height-cardTitleSnap: 1.5rem;
1348+
--mistica-font-size-cardSubtitleSnap: 1rem;
1349+
--mistica-line-height-cardSubtitleSnap: 1.5rem;
1350+
--mistica-font-size-cardDescriptionSnap: 1rem;
1351+
--mistica-line-height-cardDescriptionSnap: 1.5rem;
1352+
--mistica-font-size-cardPretitleDefault: 1rem;
1353+
--mistica-line-height-cardPretitleDefault: 1.5rem;
1354+
--mistica-font-size-cardTitleDefault: 1.25rem;
1355+
--mistica-line-height-cardTitleDefault: 1.75rem;
1356+
--mistica-font-size-cardSubtitleDefault: 1rem;
1357+
--mistica-line-height-cardSubtitleDefault: 1.5rem;
1358+
--mistica-font-size-cardDescriptionDefault: 1rem;
1359+
--mistica-line-height-cardDescriptionDefault: 1.5rem;
13071360
--mistica-font-size-inputLabel: 0.875rem;
13081361
--mistica-line-height-inputLabel: 1.25rem;
13091362
--mistica-font-size-inputValue: 1.125rem;

‎css/esimflag.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@
8686
--mistica-color-backgroundBrandBottom: var(--mistica-esimflag-purple);
8787
--mistica-color-appBarBackground: var(--mistica-esimflag-white);
8888
--mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
89+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
90+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
91+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
92+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
8993
--mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
9094
--mistica-color-borderLow: var(--mistica-esimflag-grey1);
9195
--mistica-color-border: var(--mistica-esimflag-grey3);
@@ -387,6 +391,9 @@
387391
--mistica-font-size-cardTitle: 1.25rem;
388392
--mistica-line-height-cardTitle: 1.5rem;
389393
--mistica-font-weight-cardTitle: 500;
394+
--mistica-font-size-drawerTitle: 1.25rem;
395+
--mistica-line-height-drawerTitle: 1.5rem;
396+
--mistica-font-weight-drawerTitle: 700;
390397
--mistica-font-weight-rowTitle: 400;
391398
--mistica-font-weight-button: 500;
392399
--mistica-font-size-tabsLabel: 1rem;
@@ -410,6 +417,22 @@
410417
--mistica-font-size-chipLabel: 0.875rem;
411418
--mistica-line-height-chipLabel: 1.25rem;
412419
--mistica-font-weight-chipLabel: 500;
420+
--mistica-font-size-cardPretitleSnap: 0.875rem;
421+
--mistica-line-height-cardPretitleSnap: 1.25rem;
422+
--mistica-font-size-cardTitleSnap: 0.875rem;
423+
--mistica-line-height-cardTitleSnap: 1.25rem;
424+
--mistica-font-size-cardSubtitleSnap: 0.875rem;
425+
--mistica-line-height-cardSubtitleSnap: 1.25rem;
426+
--mistica-font-size-cardDescriptionSnap: 0.875rem;
427+
--mistica-line-height-cardDescriptionSnap: 1.25rem;
428+
--mistica-font-size-cardPretitleDefault: 0.875rem;
429+
--mistica-line-height-cardPretitleDefault: 1.25rem;
430+
--mistica-font-size-cardTitleDefault: 1.125rem;
431+
--mistica-line-height-cardTitleDefault: 1.5rem;
432+
--mistica-font-size-cardSubtitleDefault: 0.875rem;
433+
--mistica-line-height-cardSubtitleDefault: 1.25rem;
434+
--mistica-font-size-cardDescriptionDefault: 0.875rem;
435+
--mistica-line-height-cardDescriptionDefault: 1.25rem;
413436
--mistica-font-size-inputLabel: 0.75rem;
414437
--mistica-line-height-inputLabel: 1rem;
415438
--mistica-font-size-inputValue: 1rem;
@@ -449,6 +472,10 @@
449472
--mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
450473
--mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
451474
--mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
475+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
476+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
477+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
478+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-white), 0.05);
452479
--mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
453480
--mistica-color-border: var(--mistica-esimflag-darkModeGrey);
454481
--mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -733,6 +760,10 @@
733760
--mistica-color-appBarBackground: var(--mistica-esimflag-darkModeGrey);
734761
--mistica-color-navigationBarBackground: var(--mistica-esimflag-darkModeBlack);
735762
--mistica-color-skeletonWave: var(--mistica-esimflag-grey6);
763+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-white), 0.05);
764+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-white), 0.08);
765+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-white), 0.03);
766+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-white), 0.05);
736767
--mistica-color-borderLow: var(--mistica-esimflag-darkModeBlack);
737768
--mistica-color-border: var(--mistica-esimflag-darkModeGrey);
738769
--mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -1038,6 +1069,10 @@
10381069
--mistica-color-appBarBackground: var(--mistica-esimflag-white);
10391070
--mistica-color-navigationBarBackground: var(--mistica-esimflag-blue55);
10401071
--mistica-color-skeletonWave: var(--mistica-esimflag-grey2);
1072+
--mistica-color-backgroundDropZoneHover: rgba(var(--mistica-esimflag-raw-blue55), 0.05);
1073+
--mistica-color-backgroundDropZoneDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.08);
1074+
--mistica-color-backgroundDropZoneBrandHover: rgba(var(--mistica-esimflag-raw-blue55), 0.2);
1075+
--mistica-color-backgroundDropZoneBrandDragover: rgba(var(--mistica-esimflag-raw-blue55), 0.4);
10411076
--mistica-color-borderLow: var(--mistica-esimflag-grey1);
10421077
--mistica-color-border: var(--mistica-esimflag-grey3);
10431078
--mistica-color-borderHigh: var(--mistica-esimflag-grey5);
@@ -1326,6 +1361,8 @@
13261361
--mistica-line-height-10: 4.5rem;
13271362
--mistica-font-size-cardTitle: 1.5rem;
13281363
--mistica-line-height-cardTitle: 1.75rem;
1364+
--mistica-font-size-drawerTitle: 1.75rem;
1365+
--mistica-line-height-drawerTitle: 2rem;
13291366

13301367
--mistica-font-size-tabsLabel: 1.125rem;
13311368
--mistica-line-height-tabsLabel: 1.5rem;
@@ -1341,6 +1378,22 @@
13411378

13421379
--mistica-font-size-chipLabel: 1rem;
13431380
--mistica-line-height-chipLabel: 1.5rem;
1381+
--mistica-font-size-cardPretitleSnap: 1rem;
1382+
--mistica-line-height-cardPretitleSnap: 1.5rem;
1383+
--mistica-font-size-cardTitleSnap: 1rem;
1384+
--mistica-line-height-cardTitleSnap: 1.5rem;
1385+
--mistica-font-size-cardSubtitleSnap: 1rem;
1386+
--mistica-line-height-cardSubtitleSnap: 1.5rem;
1387+
--mistica-font-size-cardDescriptionSnap: 1rem;
1388+
--mistica-line-height-cardDescriptionSnap: 1.5rem;
1389+
--mistica-font-size-cardPretitleDefault: 1rem;
1390+
--mistica-line-height-cardPretitleDefault: 1.5rem;
1391+
--mistica-font-size-cardTitleDefault: 1.25rem;
1392+
--mistica-line-height-cardTitleDefault: 1.75rem;
1393+
--mistica-font-size-cardSubtitleDefault: 1rem;
1394+
--mistica-line-height-cardSubtitleDefault: 1.5rem;
1395+
--mistica-font-size-cardDescriptionDefault: 1rem;
1396+
--mistica-line-height-cardDescriptionDefault: 1.5rem;
13441397
--mistica-font-size-inputLabel: 0.875rem;
13451398
--mistica-line-height-inputLabel: 1.25rem;
13461399
--mistica-font-size-inputValue: 1.125rem;

0 commit comments

Comments
 (0)