Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: OPTIC-1842: Update the css variables for colors to support RGB and drop the primitive prefixes on all variables #7269

Open
wants to merge 37 commits into
base: develop
Choose a base branch
from
Open

chore: OPTIC-1842: Update the css variables for colors to support RGB and drop the primitive prefixes on all variables #7269

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
0042882
chore: OPTIC-1842: Update the css variables for colors to support RGB…
bmartel Mar 20, 2025
42ac246
remove primitive wording from colors.scss
bmartel Mar 21, 2025
982e437
Merge remote-tracking branch 'origin/develop' into fb-optic-1842
bmartel Mar 21, 2025
18c58dd
Merge remote-tracking branch 'origin/develop' into fb-optic-1842
bmartel Mar 21, 2025
71da00f
adding design tokens to storybook
bmartel Mar 21, 2025
03f14a2
fix the category names to not include the main name redundantly
bmartel Mar 21, 2025
33d033a
move things around
bmartel Mar 21, 2025
088ad09
make things consistent
bmartel Mar 21, 2025
a0fbbdf
get computed values directly
bmartel Mar 21, 2025
3078887
copy actual css var to clipboard
bmartel Mar 21, 2025
82c2963
fix token cards
bmartel Mar 21, 2025
3670456
use atoms to maintain story state across tokens stories
bmartel Mar 24, 2025
e441e3c
use tailwind classes everywhere
bmartel Mar 24, 2025
3636bd1
fix navigation between stories
bmartel Mar 24, 2025
d56b899
reorder categories
bmartel Mar 24, 2025
95685a2
title case categories
bmartel Mar 24, 2025
acc98f5
wip
bmartel Mar 24, 2025
d52baa0
fix raw values
bmartel Mar 24, 2025
c67a74f
fix primary raw cases.
bmartel Mar 24, 2025
be63b44
fix card subtitle
bmartel Mar 24, 2025
2c37f46
refactor hexToRgb functions to use the common parts
bmartel Mar 24, 2025
168ce38
linting
bmartel Mar 24, 2025
cf51e5f
fix theming support of tokens in storybook
bmartel Mar 24, 2025
15fb595
adjust storybook
bmartel Mar 24, 2025
6c6cc43
linting
bmartel Mar 25, 2025
06f8aef
fix rgb output
bmartel Mar 25, 2025
f5fb621
remove DEFAULT from the token cards
bmartel Mar 25, 2025
304c6dd
more cleanup based on feedback
bmartel Mar 25, 2025
c6cd7e8
output rem not px
bmartel Mar 25, 2025
bdd7b01
removing and replacing hardcoded legacy tailwind colors with semantic…
bmartel Mar 25, 2025
a81c8c3
replacing legacy tailwind color classes
bmartel Mar 25, 2025
420f3ec
make tokens pages in storybook use dark mode compatible colors
bmartel Mar 25, 2025
31a990c
fix page bg
bmartel Mar 25, 2025
95f0f13
Merge remote-tracking branch 'origin/develop' into fb-optic-1842
bmartel Mar 25, 2025
a01a8fa
remove all manually added tailwind classes
bmartel Mar 25, 2025
380ce5e
fix linting errors
bmartel Mar 25, 2025
941bae5
fixing colors
bmartel Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions web/libs/ui/src/tokens/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,44 @@
--black_15: rgb(var(--black-raw) / 15%);
--black_20: rgb(var(--black-raw) / 20%);
--black_40: rgb(var(--black-raw) / 40%);
--sand_0: var(--color-primitive-sand-000);
--sand_100: var(--color-primitive-sand-100);
--sand_200: var(--color-primitive-sand-200);
--sand_300: var(--color-primitive-sand-300);
--sand_400: var(--color-primitive-sand-400);
--sand_500: var(--color-primitive-sand-500);
--sand_600: var(--color-primitive-sand-600);
--sand_700: var(--color-primitive-sand-700);
--sand_800: var(--color-primitive-sand-800);
--sand_900: var(--color-primitive-sand-900);
--plum_500: var(--color-primitive-plum-500);
--plum_400: var(--color-primitive-plum-400);
--plum_200: var(--color-primitive-plum-200);
--plum_100: var(--color-primitive-plum-100);
--plum_0: var(--color-primitive-plum-000);
--persimmon_0: var(--color-primitive-persimmon-000);
--persimmon_300: var(--color-primitive-persimmon-300);
--persimmon_400: var(--color-primitive-persimmon-400);
--canteloupe_0: var(--color-primitive-canteloupe-000);
--canteloupe_100: var(--color-primitive-canteloupe-100);
--canteloupe_400: var(--color-primitive-canteloupe-400);
--canteloupe_500: var(--color-primitive-canteloupe-500);
--canteloupe_600: var(--color-primitive-canteloupe-600);
--canteloupe_700: var(--color-primitive-canteloupe-700);
--kale_0: var(--color-primitive-kale-000);
--kale_300: var(--color-primitive-kale-300);
--kale_400: var(--color-primitive-kale-400);
--sand_0: var(--color-sand-000);
--sand_100: var(--color-sand-100);
--sand_200: var(--color-sand-200);
--sand_300: var(--color-sand-300);
--sand_400: var(--color-sand-400);
--sand_500: var(--color-sand-500);
--sand_600: var(--color-sand-600);
--sand_700: var(--color-sand-700);
--sand_800: var(--color-sand-800);
--sand_900: var(--color-sand-900);
--plum_500: var(--color-plum-500);
--plum_400: var(--color-plum-400);
--plum_200: var(--color-plum-200);
--plum_100: var(--color-plum-100);
--plum_0: var(--color-plum-000);
--persimmon_0: var(--color-persimmon-000);
--persimmon_300: var(--color-persimmon-300);
--persimmon_400: var(--color-persimmon-400);
--canteloupe_0: var(--color-canteloupe-000);
--canteloupe_100: var(--color-canteloupe-100);
--canteloupe_400: var(--color-canteloupe-400);
--canteloupe_500: var(--color-canteloupe-500);
--canteloupe_600: var(--color-canteloupe-600);
--canteloupe_700: var(--color-canteloupe-700);
--kale_0: var(--color-kale-000);
--kale_300: var(--color-kale-300);
--kale_400: var(--color-kale-400);
--red_1: #FFF1F0;
--red_3: #FFCCC7;
--red_7: #CF1322;
--red_10: #5C0011;
--grape_0: var(--color-primitive-grape-000);
--grape_100: var(--color-primitive-grape-100);
--grape_0: var(--color-grape-000);
--grape_100: var(--color-grape-100);
--grape_500-raw: 86 111 207;
--grape_500: rgb(var(--grape_500-raw));
--grape_600: var(--color-primitive-grape-600);
--grape_700: var(--color-primitive-grape-700);
--grape_800: var(--color-primitive-grape-800);
--grape_500: var(--color-grape-500);
--grape_600: var(--color-grape-600);
--grape_700: var(--color-grape-700);
--grape_800: var(--color-grape-800);
--primary_link: var(--grape_500);
--danger_color: var(--red_7);
--danger_color--faded: var(--red_3);
Expand Down Expand Up @@ -99,4 +99,4 @@
--button-waiting-animation-bg: repeating-linear-gradient(-63.43deg, hsl(60deg 20% 99% / 20%) 1px, #efefef 2px, #efefef 6px, hsl(60deg 20% 99% / 20%) 7px, hsl(60deg 20% 99% / 20%) 12px);
--project-title-icon-primary-color: rgba(var(--black-raw), 0.35);
--project-title-icon-alternate-color: rgba(var(--white-raw), 0.35);
}
}
Loading
Loading