Problem/Motivation

The color palette should be updated to reflect the colors defined in the Figma designs.

Proposed resolution

Update all the existing color scales and add all the new ones (even the colors not used yet). Until we have the correct layer of abstraction for color usages we should use direct variable names, like --admin-toolbar-color-blue-100.

For example, from:
--admin-toolbar-color-blue-100: var(--drupal-admin-color-blue-100, #ccdbff)
We should move to:
--admin-toolbar-color-blue-100: var(--drupal-admin-color-blue-100, #ccdfff)

Please use the Figma link to get the specs about colors.

Remaining tasks

  • Change the variable names

User interface changes

The colors should move from Claro existing colors to the new ones.

CommentFileSizeAuthor
#3 new-design-colors.png34.61 KBckrina

Issue fork navigation-3435976

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

KeyboardCowboy created an issue. See original summary.

KeyboardCowboy’s picture

KeyboardCowboy
Primary language English
Location Denver, CO, USA
commented
Title: Replace the Color Palette with the attached colors from Figma » [PP-1] Replace the Color Palette with the attached colors from Figma
Status: Active » Postponed
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
Status: Postponed » Active
Issue tags: -Needs design
StatusFileSize
new new-design-colors.png34.61 KB

Adding needed info. This is ready to work on it.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Title: [PP-1] Replace the Color Palette with the attached colors from Figma » Replace the Color Palette with the attached colors from Figma
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

I forgot the link to Figma to get the hexadecimal codes.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes

bronzehedwick made their first commit to this issue’s fork.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Active » Postponed

Let's wait for https://www.drupal.org/project/navigation/issues/3427659 first, because MR out there contains lots of new colors which are hardcoded. Once task is fixed -> you can re-open this ticket

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Postponed » Active

Actually let's have it under Active status. Since some work can be already done

vensires’s picture

vensires
Location Greece
commented
Issue tags: +GreeceSpringSprint2024
bronzehedwick’s picture

bronzehedwick
he/him
Location New York
commented
Assigned: Unassigned » bronzehedwick
bronzehedwick’s picture

bronzehedwick
he/him
Location New York
commented

@ckrina does this ticket mean that we should refactor existing indirect variable names, like --admin-toolbar-color-focus, to a direct color variable, like --admin-toolbar-color-blue-100?

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

Not for now. We haven't defined any abstraction layer on the design system yet, but deleting the work done already is not worth yet, because I think the focus will exist anyway. We can do that work later on.

bronzehedwick’s picture

bronzehedwick
he/him
Location New York
commented

Perfect, thanks @ckrina!

bronzehedwick opened merge request !206

bronzehedwick’s picture

bronzehedwick
he/him
Location New York
commented
Assigned: bronzehedwick » Unassigned
Status: Active » Needs review

ckrina changed the visibility of the branch 1.x to hidden.

ckrina changed the visibility of the branch 3435976-replace-the-color to hidden.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

That was fast, thanks @bronzehedwick!

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Fixed

Merged!

vensires’s picture

vensires
Location Greece
commented
Issue tags: -GreeceSpringSprint2024

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.