Refactor gradients on navbar #24

New Issue

2023-05-26T01:41:59+02:00

alk-spriet commented

2023-05-26 01:41:59 +02:00

(Migrated from github.com)

Currently working-strips use 2 "home made" colors

:root {
  --stripe-size: 100px;
  --color1: hsla(194, 71%, 30%, 1);
  --color2: hsla(194, 77%, 35%, 1);
  --duration: 1s;
  --state: paused;
}

This is quite flexible — considering that hsl allow to just change brightness — but it would be interesting to make the gradient only with translucent white and rely on the background-color to change only that one.

:root {
  --color1: hsla(194, 71%, 30%, 1);
  --color2: hsla(0, 100%, 100%, 20%);
  …
}

Also hsl is matematically rigid, but I could take the opportunity to test hsv

Update the gradient format to rely only on brightness & transparency
Find nice colors for other environments than the current ones
Test hsv instead

Currently working-strips use 2 "home made" colors ```css :root { --stripe-size: 100px; --color1: hsla(194, 71%, 30%, 1); --color2: hsla(194, 77%, 35%, 1); --duration: 1s; --state: paused; } ``` This is quite flexible — considering that `hsl` allow to just change brightness — but it would be interesting to make the gradient only with translucent white and rely on the `background-color` to change only that one. ``` :root { --color1: hsla(194, 71%, 30%, 1); --color2: hsla(0, 100%, 100%, 20%); … } ``` Also hsl is matematically rigid, but I could take the opportunity to test `hsv` - [x] Update the gradient format to rely only on brightness & transparency - [x] Find nice colors for other environments than the current ones - [x] Test `hsv` instead

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Salsify/front-ui-tweaker#24