Skip to content

Commit

Permalink
feat(Switch, RadioButton, Checkbox, ProgressBar, ProgressBarStepped, …
Browse files Browse the repository at this point in the history 
…Slider): create inverse variant (#1277)

Issue: [Link](https://jira.tid.es/browse/WEB-2084)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Oct 31, 2024
1 parent fda424e commit 3129fb9
Show file tree
Hide file tree
Showing 78 changed files with 665 additions and 223 deletions.
8 changes: 8 additions & 0 deletions css/blau.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-blau-white);
--mistica-color-controlError: var(--mistica-blau-blauRed);
--mistica-color-barTrack: var(--mistica-blau-grey2);
--mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
--mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
--mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
--mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
--mistica-color-iosControlKnob: var(--mistica-blau-white);
--mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
--mistica-color-divider: var(--mistica-blau-grey2);
--mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
Expand Down Expand Up @@ -304,11 +306,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
--mistica-color-controlError: var(--mistica-blau-blauRed);
--mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
--mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
--mistica-color-iosControlKnob: var(--mistica-blau-grey2);
--mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
--mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
--mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
--mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
Expand Down Expand Up @@ -446,11 +450,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
--mistica-color-controlError: var(--mistica-blau-blauRed);
--mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
--mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
--mistica-color-iosControlKnob: var(--mistica-blau-grey2);
--mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
--mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
--mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
--mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
Expand Down Expand Up @@ -584,11 +590,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-blau-white);
--mistica-color-controlError: var(--mistica-blau-blauRed);
--mistica-color-barTrack: var(--mistica-blau-grey2);
--mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
--mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
--mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
--mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
--mistica-color-iosControlKnob: var(--mistica-blau-white);
--mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
--mistica-color-divider: var(--mistica-blau-grey2);
--mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
Expand Down
8 changes: 8 additions & 0 deletions css/movistar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
--mistica-color-controlError: var(--mistica-movistar-pepper55);
--mistica-color-barTrack: var(--mistica-movistar-grey3);
--mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
--mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
--mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
--mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
--mistica-color-iosControlKnob: var(--mistica-movistar-white);
--mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
--mistica-color-divider: var(--mistica-movistar-grey3);
--mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
Expand Down Expand Up @@ -318,11 +320,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
--mistica-color-controlError: var(--mistica-movistar-pepper45);
--mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
--mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
--mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
--mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
--mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
--mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
--mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
Expand Down Expand Up @@ -463,11 +467,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
--mistica-color-controlError: var(--mistica-movistar-pepper45);
--mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
--mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
--mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
--mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
--mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
--mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
--mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
Expand Down Expand Up @@ -601,11 +607,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
--mistica-color-controlError: var(--mistica-movistar-pepper55);
--mistica-color-barTrack: var(--mistica-movistar-grey3);
--mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
--mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
--mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
--mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
--mistica-color-iosControlKnob: var(--mistica-movistar-white);
--mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
--mistica-color-divider: var(--mistica-movistar-grey3);
--mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
Expand Down
8 changes: 8 additions & 0 deletions css/o2-new.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
--mistica-color-controlError: var(--mistica-o2-new-o2Red60);
--mistica-color-barTrack: var(--mistica-o2-new-grey30);
--mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
--mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
--mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
--mistica-color-iosControlKnob: var(--mistica-o2-new-white);
--mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
--mistica-color-divider: var(--mistica-o2-new-grey30);
--mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
Expand Down Expand Up @@ -318,11 +320,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
--mistica-color-controlError: var(--mistica-o2-new-o2Red45);
--mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
--mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
--mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
--mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
--mistica-color-badge: var(--mistica-o2-new-o2Red65);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
Expand Down Expand Up @@ -457,11 +461,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
--mistica-color-controlError: var(--mistica-o2-new-o2Red45);
--mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
--mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
--mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
--mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
--mistica-color-badge: var(--mistica-o2-new-o2Red65);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
Expand Down Expand Up @@ -605,11 +611,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
--mistica-color-controlError: var(--mistica-o2-new-o2Red60);
--mistica-color-barTrack: var(--mistica-o2-new-grey30);
--mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
--mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
--mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
--mistica-color-iosControlKnob: var(--mistica-o2-new-white);
--mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
--mistica-color-badge: var(--mistica-o2-new-o2Red65);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
Expand Down
8 changes: 8 additions & 0 deletions css/o2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-white);
--mistica-color-controlError: var(--mistica-o2-pepper);
--mistica-color-barTrack: var(--mistica-o2-grey3);
--mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
--mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
--mistica-color-iosControlKnob: var(--mistica-o2-white);
--mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
--mistica-color-divider: var(--mistica-o2-grey2);
--mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
--mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
Expand Down Expand Up @@ -304,11 +306,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
--mistica-color-controlError: var(--mistica-o2-pepper);
--mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
--mistica-color-iosControlKnob: var(--mistica-o2-grey2);
--mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
--mistica-color-badge: var(--mistica-o2-pepper60);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
Expand Down Expand Up @@ -443,11 +447,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
--mistica-color-controlError: var(--mistica-o2-pepper);
--mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
--mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
--mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
--mistica-color-iosControlKnob: var(--mistica-o2-grey2);
--mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
--mistica-color-badge: var(--mistica-o2-pepper60);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
Expand Down Expand Up @@ -581,11 +587,13 @@
--mistica-color-controlActivatedInverse: var(--mistica-o2-white);
--mistica-color-controlError: var(--mistica-o2-pepper);
--mistica-color-barTrack: var(--mistica-o2-grey3);
--mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
--mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
--mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
--mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
--mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
--mistica-color-iosControlKnob: var(--mistica-o2-white);
--mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
--mistica-color-badge: var(--mistica-o2-pepper60);
--mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
--mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);
Expand Down
Loading

1 comment on commit 3129fb9

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-lgzdi1ngu-flows-projects-65bb050e.vercel.app

Built with commit 3129fb9.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.