mistica-design icon indicating copy to clipboard operation
mistica-design copied to clipboard
verified publisher icon Telefonica

New brand and negative contexts

Open yceballost opened this issue 3 months ago • 4 comments

Context

All new brand tokens should be a duplicate of the current inverse tokens, these tokens will be the same in all brands but blau, since blau inverse has a new definition.

Current contexts: default | inverse | alternative | media New contexts: default | inverse (Deprecated) | brand | negative | alternative | media

Description

  • [x] Include new brand context
  • [x] Update tokens
  • [x] Update component specs

New context tests: https://www.figma.com/design/pfj9svckTNYDj3Cft4Fnrc/Brand-context?node-id=0-1&t=ezOkfn8s5kxXSRcj-1 Blau new brand definition: https://www.figma.com/design/ULzXysnzC1K7ReX9uDWccJ/-Blau--Blau-brand-kickoff-preparation-Q3-2025-PRODUCTDSN-3459?node-id=673-5069

Tasks

yceballost avatar Aug 25 '25 08:08 yceballost

New tokens

Brand Context

Token name Inverse equivalent Used in
backgroundContainerBrandOverBrand backgroundContainerBrandOverInverse Boxed, Cards, Timeline
backgroundSkeletonBrand backgroundSkeletonInverse Image
completedStepBrand completedStepInverse -
buttonLinkDangerBackgroundBrand buttonLinkDangerBackgroundInverse Button, IconButton
buttonLinkDangerBackgroundBrandPressed buttonLinkDangerBackgroundInversePressed Button
buttonLinkBackgroundBrandPressed buttonLinkBackgroundInversePressed Button
buttonPrimaryBackgroundBrand buttonPrimaryBackgroundInverse Button
buttonPrimaryBackgroundBrandHover buttonPrimaryBackgroundInverseHover -
buttonPrimaryBackgroundBrandPressed buttonPrimaryBackgroundInversePressed Button
buttonSecondaryBorderBrand buttonSecondaryBorderInverse Button
buttonSecondaryBorderBrandPressed buttonSecondaryBorderInversePressed Button
buttonSecondaryBackgroundBrandHover buttonSecondaryBackgroundInverseHover Button
buttonSecondaryBackgroundBrandPressed buttonSecondaryBackgroundInversePressed Button
textButtonPrimaryBrand textButtonPrimaryInverse Button, IconButton
textButtonPrimaryBrandPressed textButtonPrimaryInversePressed Button
textButtonSecondaryBrand textButtonSecondaryInverse Button, IconButton
textButtonSecondaryBrandPressed textButtonSecondaryInversePressed Button
textLinkBrand textLinkInverse Button, IconButton, Textlink, Text
inputBorderBrand inputBorderInverse -
controlBrand controlInverse Checkbox, RadioButton, Switch, Timeline
controlActivatedBrand controlActivatedInverse Checkbox, RadioButton, Switch, Timeline, Meter, ProgressBar, Slider, Spinner, Tabs
barTrackBrand barTrackInverse Meter, ProgressBar, Slider, Timeline
controlKnobBrand controlKnobInverse Checkbox, RadioButton, Switch
dividerBrand dividerInverse Divider, Tabs
neutralMediumBrand neutralMediumInverse -
textPrimaryBrand textPrimaryInverse Avatar, Badge, Chip, List, NavigationBar, Breadcrumbs, SnackBar, StackingGroup, Stepper, Tabs, TextField, Text, FeedbacksSreen
textSecondaryBrand textSecondaryInverse NavigationBar, Breadcrumbs, Tabs, Text
textErrorBrand textErrorInverse List, Tag, Text
successHighBrand successHighInverse -
warningHighBrand warningHighInverse -
errorHighBrand errorHighInverse -
promoHighBrand promoHighInverse -
tagTextPromoBrand tagTextPromoInverse Tag
tagTextActiveBrand tagTextActiveInverse Tag
tagTextInactiveBrand tagTextInactiveInverse Tag
tagTextInfoBrand tagTextInfoInverse Tag
tagTextSuccessBrand tagTextSuccessInverse Tag
tagTextWarningBrand tagTextWarningInverse Tag
tagTextErrorBrand tagTextErrorInverse Tag
tagBackgroundPromoBrand tagBackgroundPromoInverse Tag
tagBackgroundActiveBrand tagBackgroundActiveInverse Tag
tagBackgroundInactiveBrand tagBackgroundInactiveInverse Tag
tagBackgroundInfoBrand tagBackgroundInfoInverse Tag
tagBackgroundSuccessBrand tagBackgroundSuccessInverse Tag
tagBackgroundWarningBrand tagBackgroundWarningInverse Tag
tagBackgroundErrorBrand tagBackgroundErrorInverse Tag

Negative context

backgroundContainerNegative backgroundSkeletonNegative completedStepNegative buttonLinkDangerBackgroundNegative buttonLinkDangerBackgroundNegativePressed buttonLinkBackgroundNegativePressed buttonPrimaryBackgroundNegative buttonPrimaryBackgroundNegativeHover buttonPrimaryBackgroundNegativePressed buttonSecondaryBorderNegative buttonSecondaryBorderNegativePressed buttonSecondaryBackgroundNegativeHover buttonSecondaryBackgroundNegativePressed textButtonPrimaryNegative textButtonPrimaryNegativePressed textButtonSecondaryNegative textButtonSecondaryNegativePressed textLinkNegative inputBorderNegative controlNegative controlActivatedNegative barTrackNegative controlKnobNegative dividerNegative neutralMediumNegative textPrimaryNegative textSecondaryNegative textErrorNegative successHighNegative warningHighNegative errorHighNegative promoHighNegative tagTextPromoNegative tagTextActiveNegative tagTextInactiveNegative tagTextInfoNegative tagTextSuccessNegative tagTextWarningNegative tagTextErrorNegative tagBackgroundPromoNegative tagBackgroundActiveNegative tagBackgroundInactiveNegative tagBackgroundInfoNegative tagBackgroundSuccessNegative tagBackgroundWarningNegative tagBackgroundErrorNegative

aweell avatar Aug 26 '25 08:08 aweell

Specs updated:

Spec Changes Link
Accordion Add new brand and negative contexts https://www.figma.com/design/KDxPjcTXq2NCvQZjb4FXgi/%F0%9F%94%B8-Accordion-Specs?node-id=2430-17913&t=p85GgAYjcXCa6If7-4
Text Add brand context and default text color as textPrimaryBrand https://www.figma.com/design/f9tAOJproMIiJJuPchDEhG/branch/o0INwxDDPjXh6tHQeEBjhO/%F0%9F%94%B8-Text-Specs?m=auto&node-id=2139-99&t=m3w6CXNxDPPEeLkc-1
Cards Use media tokens instead of inverse for texts https://www.figma.com/design/tKdPOfcUALzVIh5oizFbm7/%F0%9F%94%B8-Cards-Specs?m=auto&node-id=11030-16173&t=x1b5muX2vHaYSawE-1
Cover hero Use media tokens instead of inverse for texts https://www.figma.com/design/M8t65SWdTUyM44YjxuzCyu/branch/HyJpLBtPlufEG2aO2Gaf0w/%F0%9F%94%B8-Hero-Specs?m=auto&node-id=4963-17046&t=TjF40PpITiTj4dma-1
Hero Add new brand context token definition + new brand prop https://www.figma.com/design/zcBtnxP3gdBDFkKxmwvRFk/-2291---New-brand-context?node-id=5748-10170&t=YmOcaidF6qxG7kM9-4
Button Use brand tokens https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/%F0%9F%94%B8-Buttons-Specs?m=auto&node-id=3326-11339&t=GnLZzPDFtIv8japP-1
Icon Button Use brand tokens https://www.figma.com/design/koROdh3HpEPG2O8jG52Emh/branch/I2LXSD58GhgQ2w9kWs245B/%F0%9F%94%B8-Buttons-Specs?m=auto&node-id=3949-8933&t=t7U3KGG6twBOZyjY-1
Checkbox Add new brand context token definition https://www.figma.com/design/6IN1rHqpYLILjgWMuUGKvJ/%F0%9F%94%B8-Checkbox-Specs?t=nFgSYogq39AbACca-0
Radio button Add new brand context definition https://www.figma.com/design/RkHDrAELuQIlwNSQBfjSBx/branch/6pGOaHeQ173DkSEOf0wpxz/%F0%9F%94%B8-Radio-Button-Specs?m=auto&node-id=0-1004&t=uq2WWyU5JoTYyjDx-1
Switch Add new brand context definition https://www.figma.com/design/0lLlL7hkpcLP9tyG7yV4Pt/-2291---New-brand-context?node-id=2859-1238&t=g7OaZkr5IN8zEUBq-4
Divider Add new brand context definition https://www.figma.com/design/opTuWa0jTX3M1VS6iVviMj/-2291---New-brand-context?node-id=1506-308&t=74vWLjYQgdjlZX1T-4
Tabs Add new brand context definition https://www.figma.com/design/MCZvIWHhvo69OGIiLRm5cx/-2291---New-brand-context?node-id=2362-2725&t=HISU9oltEU5kPwGw-4
Meter Add new brand context definition https://www.figma.com/design/vl42pXmTEmzLZvx4ngrOkI/-2291---New-brand-context?node-id=2848-2036&t=vnL39ftPA25d8kj9-4
ProgressBar Add new brand context definition https://www.figma.com/design/8XPfj53H6esIle2cCBddzg/-2291---New-brand-context?node-id=3140-416&t=TmclbgicUimVw9KD-4
Slider Add new brand context definition https://www.figma.com/design/Cwg0TYSpt5IlznstVS2Y0D/-2291---New-brand-context?node-id=3461-1878&t=kCERj0mdKa1MvabZ-4
Timeline Add new brand context definition https://www.figma.com/design/X7I9t1mfcIHCZGuXozD8D5/branch/1fNanHonG5phAZMHCkt4nr/%F0%9F%94%B8-Timeline-Specs?m=auto&node-id=175-2897&t=jMaiASvPuriw2IFA-1
Spinner Add new brand context definition https://www.figma.com/design/9pJgcyUexLu3yHi6Gau867/-2291---New-brand-context?node-id=4002-157&t=EdTyUJ0uptI5vZmN-4
Avatar Add new brand context definition https://www.figma.com/design/TyIdjJvLTP4SWKhM1q025p/-2291---New-brand-context?node-id=2165-333&t=ZIjJk0AzcQM6eAe5-4
Badge Add new brand context definition, the text of the badge doesnt change, since badge background doesn't change between contexts https://www.figma.com/design/gUZfZajV9Zfade0rBYWZQg/branch/NHewR3s61oLuBMfPymmHyb/%F0%9F%94%B8-Badge-Specs?m=auto&node-id=0-1&t=g6volH7lUyj3ZL06-1
Chip Add new brand context definition/ Should Inverse be transparent? https://www.figma.com/design/512a5Ke4EldL0GYffCXGCJ/%F0%9F%94%B8-Chips-Specs?m=auto&node-id=0-1&t=CSuiD0zRuJl01eBP-1
List Add new brand context definition https://www.figma.com/design/Be8QB9onmHunKCCAkIBAVr/%F0%9F%94%B8-Lists-Specs?m=auto&node-id=0-1&t=Zk1g6lnkz174KewL-1
Web navigation bars Add new brand context definition https://www.figma.com/design/Os5UfsnhLtQ9rnzmtcX8J4/%F0%9F%94%B8-Navigation-Bar-Specs?node-id=1206-5760&t=Ih4dYyAUh4UxUuuL-4
Breadcrumbs Add new brand context https://www.figma.com/design/BctaFHf0PVPX2uwRSl8taf/branch/kijKfpjWgF6reKBWe2XKLz/%F0%9F%94%B8-Breadcrumbs-Specs?m=auto&node-id=2-61&t=M28jsbBtZcrl0Xbs-1
Stacking group Add new brand context definition https://www.figma.com/design/3ME86VKaAQ2BoeqoQuHMYx/branch/j9lClmzPjcyJNtFpJ5nyLr/%F0%9F%94%B8-StackingGroup-Specs?m=auto&node-id=2060-532&t=XzQZ11WViBlv36lQ-1
Feedback Replace inverse with brand https://www.figma.com/design/LpjgnU1xpmEzQvlXKwAHmn/branch/wu5KY7OYGMd7xYSp0Dr3ZW/%F0%9F%94%B8-Feedbacks-Specs?m=auto&node-id=0-303&t=DE1nJPeMJ2jLsjmy-1
Input fields Add new brand and negative contexts https://www.figma.com/design/e8d3PkXitUJ1Jwgc9Y3mNc/%F0%9F%94%B8-Input-Fields---Forms-Specs?node-id=6885-4800&t=FVg2JQae7Bvv3hl6-4

aweell avatar Sep 15 '25 11:09 aweell

New brand context

Preview: https://mistica-web-jpho-2dvustzzh-alex-buenos-projects.vercel.app/

To see how brand context behaves use current inverse context

List of changes

Light

  • backgroundContainerBrand: blauBluePrimary instead of blauBlueSecondary
  • backgroundContainerBrandOverBrand: blauBluePrimary30 instead of blauBlueSecondary60
  • backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.05) instead of applyAlpha(palette.darkModeBlack, 0.2)
  • backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.08) instead of applyAlpha(palette.darkModeBlack, 0.4)
  • textLinkBrand: grey6 instead of white
  • textErrorBrand: grey6 instead of white
  • controlBrand: blauBlueSecondary60 instead of blauBluePrimary30
  • controlActivatedBrand: blauBlueSecondary60 instead of white
  • dividerBrand: applyAlpha(palette.grey6, 0.2) instead of applyAlpha(palette.white, 0.2)
  • buttonPrimary:
    • buttonPrimaryBackgroundBrand: blauBlueSecondary instead of white
    • buttonPrimaryBackgroundBrandHover: blauBlueSecondary60 instead of blauBluePrimary20
    • buttonPrimaryBackgroundBrandPressed: blauBlueSecondary60 instead of blauBluePrimary30
    • textButtonPrimaryBrand: white instead of blauBlueSecondary
    • textButtonPrimaryBrandPressed: white instead of blauBlueSecondary60
  • buttonSecondary:
    • buttonSecondaryBorderBrand: applyAlpha(palette.white, 0) instead of white
    • buttonSecondaryBorderBrandPressed: applyAlpha(palette.white, 0) instead of white
    • New buttonSecondaryBackgroundBrand token
    • buttonSecondaryBackgroundBrandHover: blauBlueSecondary10 instead of applyAlpha(palette.white, 0.2)
    • buttonSecondaryBackgroundBrandPressed: blauBlueSecondary10 instead of applyAlpha(palette.white, 0.2)
    • textButtonSecondaryBrand: blauBlueSecondary instead of white
    • textButtonSecondaryBrandPressed: blauBlueSecondary60 instead of white

Dark

  • buttonSecondary:
    • New buttonSecondaryBackgroundBrand token

Components

  • Carousel: bulletInverse and bulletActiveInverse should use controlBrand and controlActivatedBrand instead of inverse
  • List: chevron should use textSecondaryBrand instead of inverse
  • Button: type secondary should use buttonSecondaryBackgroundBrand as default background instead of 'transparent'
  • IconButton:
    • neutral-transparent-default/iconColor: textPrimaryInverse instead of inverse
  • Rating:
    • activeColor: in brand context should use controlActivatedInverse instead of inverse
    • inactiveColor: in brand context should use controlInverse instead of inverse
  • Switch: Added new toggleAndroidActiveBrand, toggleAndroidInactiveBrand, toggleAndroidBackgroundActiveBrand and toggleAndroidBackgroundInactiveBrand tokens to use in brand variant of the android and web versions

Notes

  • Cover Cards should use textPrimaryMedia and textSecondaryMedia
  • Avatar: contents when there's no image should use textPrimaryNegative
  • Badge: numeric content should use textPrimaryNegative

To review

  • Accordion icon seems not following the logic defined in list and is displayed white over brand

  • Logo current inverse variant should only be used in negative context, brand should use default?

  • Table is not following the divider definition

  • Timeline assets definition is not working fine

  • Include new blauBluePrimary40 for backgroundContainerBrandOverBrand?

aweell avatar Oct 08 '25 10:10 aweell

New negative context

Preview: https://mistica-web-jpho-1klde6q15-alex-buenos-projects.vercel.app/

To see how negative context behaves use current inverse context

List of changes

Blau

  • backgroundNegative: blauBlueSecondary instead of blauBluePrimary
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of blauBlueSecondary60

Esimflag

  • backgroundNegative: blue65 instead of linear-gradient(180deg, ${palette.blue55} 0%, ${palette.blue} 60%, ${palette.purple} 100%)
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of blue80

Movistar-new

  • backgroundNegative: blueHigh instead of movistarBlue
  • backgroundContainerNegative: applyAlpha(palette.movistarBlack, 0.2) instead of blue800

Movistar

  • backgroundNegative: movistarBlueHC55 instead of movistarBlue
  • backgroundContainerNegative: applyAlpha(palette.black, 0.2) instead of movistarBlue55

O2-New

  • backgroundNegative: beyondBlue instead of linear-gradient(180deg, ${palette.darkBlue} 0%, ${palette.beyondBlue} 64%, ${palette.beyondBlue45} 100%)
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of beyondBlue70

O2

  • backgroundNegative: o2BluePrimary70 instead of o2BluePrimary
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of o2BluePrimary70

Telefonica

  • backgroundNegative: telefonicaBlue70 instead of telefonicaBlue
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of telefonicaBlue70

TU

  • backgroundNegative: primary80 instead of primary
  • backgroundContainerNegative: applyAlpha(palette.grey1, 0.2) instead of primary80

Vivo-new

  • backgroundNegative: vivoPurpleDark instead of vivoPurple
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of vivoPurpleDark

Vivo

  • backgroundNegative: vivoPurpleDark instead of vivoPurple
  • backgroundContainerNegative: applyAlpha(palette.darkModeBlack, 0.4) instead of vivoPurpleDark

Notes

aweell avatar Oct 10 '25 08:10 aweell