Skip to content

chore(tokens): migrate color system from HEX to OKLCH #757

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

Merged
paanSinghCoder merged 6 commits into from
Apr 30, 2026
Merged

chore(tokens): migrate color system from HEX to OKLCH #757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
984c42d
chore(tokens): migrate color system from HEX to OKLCH
paanSinghCoder Apr 26, 2026
a36d24e
chore(tokens): remove one-shot OKLCH migration script
paanSinghCoder Apr 26, 2026
3c0c41a
chore(tokens): migrate number-field drop-shadow rgba to oklch
paanSinghCoder Apr 27, 2026
e9cc45c
chore(tokens): migrate decorative gradient hex to oklch
paanSinghCoder Apr 27, 2026
ce6e359
chore(docs): switch dialog demo overlay rgba to oklch
paanSinghCoder Apr 27, 2026
7dc9811
chore(tokens): update scrub-area-cursor drop-shadow color to use vari…
paanSinghCoder Apr 28, 2026
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
6 changes: 3 additions & 3 deletions apps/www/src/content/docs/components/dialog/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export const customDemo = {
</Dialog.Trigger>
<Dialog.Content
width="400px"
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
>
<Dialog.Body>
<Dialog.Title>Custom Styled Dialog</Dialog.Title>
Expand All @@ -94,7 +94,7 @@ export const onlyHeaderDemo = {
</Dialog.Trigger>
<Dialog.Content
width="400px"
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
>
<Dialog.Header>
<Dialog.Title>Title</Dialog.Title>
Expand All @@ -117,7 +117,7 @@ export const onlyFooterDemo = {
</Dialog.Trigger>
<Dialog.Content
width="400px"
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'oklch(0 0 0 / 0.5)' } }}
>
<Dialog.Body>
<Dialog.Title>Title</Dialog.Title>
Expand Down
4 changes: 2 additions & 2 deletions packages/raystack/components/announcement-bar/announcement-bar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
.announcement-bar-gradient {
background: radial-gradient(
36.63% 405.48% at 50% 50%,
#eeaeca 0%,
#df94e9 100%
oklch(0.8184 0.0825 351.13) 0%,
oklch(0.7701 0.1422 322.63) 100%
);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/raystack/components/badge/badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
}

.badge-gradient {
background: linear-gradient(to right, #ad00e933 0%, #ef040433 100%);
background: linear-gradient(to right, oklch(0.5674 0.2831 312.58 / 0.2) 0%, oklch(0.5988 0.2445 29.12 / 0.2) 100%);
color: var(--rs-color-foreground-base-primary);
}

Expand Down
6 changes: 3 additions & 3 deletions packages/raystack/components/callout/callout.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
}

.callout-gradient {
background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
background: radial-gradient(circle, oklch(0.5674 0.2831 312.58 / 0.2) 0%, oklch(0.5988 0.2445 29.12 / 0.2) 100%);
color: var(--rs-color-foreground-base-primary);
}

Expand Down Expand Up @@ -194,8 +194,8 @@
}

.callout-outline.callout-gradient {
background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
border: 0.5px solid #ef040444;
background: radial-gradient(circle, oklch(0.5674 0.2831 312.58 / 0.2) 0%, oklch(0.5988 0.2445 29.12 / 0.2) 100%);
border: 0.5px solid oklch(0.5988 0.2445 29.12 / 0.2667);
color: var(--rs-color-foreground-base-primary);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/raystack/components/number-field/number-field.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,5 +77,5 @@
}

.scrub-area-cursor {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0 1px 1px var(--rs-color-overlay-black-a7));
}
48 changes: 24 additions & 24 deletions packages/raystack/styles/colors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,32 +62,32 @@
/* Overlay Colors */
--rs-color-overlay-base-primary: var(--rs-overlay-1);
/* Black Overlay */
--rs-color-overlay-black-a1: #0000000D; /* 5% opacity */
--rs-color-overlay-black-a2: #0000001A; /* 10% opacity */
--rs-color-overlay-black-a3: #00000026; /* 15% opacity */
--rs-color-overlay-black-a4: #00000033; /* 20% opacity */
--rs-color-overlay-black-a5: #0000004D; /* 30% opacity */
--rs-color-overlay-black-a6: #00000066; /* 40% opacity */
--rs-color-overlay-black-a7: #00000080; /* 50% opacity */
--rs-color-overlay-black-a8: #00000099; /* 60% opacity */
--rs-color-overlay-black-a9: #000000B3; /* 70% opacity */
--rs-color-overlay-black-a10: #000000CC; /* 80% opacity */
--rs-color-overlay-black-a11: #000000E6; /* 90% opacity */
--rs-color-overlay-black-a12: #000000F2; /* 95% opacity */
--rs-color-overlay-black-a1: oklch(0 0 0 / 0.051); /* 5% opacity */
--rs-color-overlay-black-a2: oklch(0 0 0 / 0.102); /* 10% opacity */
--rs-color-overlay-black-a3: oklch(0 0 0 / 0.149); /* 15% opacity */
--rs-color-overlay-black-a4: oklch(0 0 0 / 0.2); /* 20% opacity */
--rs-color-overlay-black-a5: oklch(0 0 0 / 0.302); /* 30% opacity */
--rs-color-overlay-black-a6: oklch(0 0 0 / 0.4); /* 40% opacity */
--rs-color-overlay-black-a7: oklch(0 0 0 / 0.502); /* 50% opacity */
--rs-color-overlay-black-a8: oklch(0 0 0 / 0.6); /* 60% opacity */
--rs-color-overlay-black-a9: oklch(0 0 0 / 0.702); /* 70% opacity */
--rs-color-overlay-black-a10: oklch(0 0 0 / 0.8); /* 80% opacity */
--rs-color-overlay-black-a11: oklch(0 0 0 / 0.902); /* 90% opacity */
--rs-color-overlay-black-a12: oklch(0 0 0 / 0.949); /* 95% opacity */

/* White Overlay */
--rs-color-overlay-white-a1: #ffffff0D; /* 5% opacity */
--rs-color-overlay-white-a2: #ffffff1A; /* 10% opacity */
--rs-color-overlay-white-a3: #ffffff26; /* 15% opacity */
--rs-color-overlay-white-a4: #ffffff33; /* 20% opacity */
--rs-color-overlay-white-a5: #ffffff4D; /* 30% opacity */
--rs-color-overlay-white-a6: #ffffff66; /* 40% opacity */
--rs-color-overlay-white-a7: #ffffff80; /* 50% opacity */
--rs-color-overlay-white-a8: #ffffff99; /* 60% opacity */
--rs-color-overlay-white-a9: #ffffffB3; /* 70% opacity */
--rs-color-overlay-white-a10: #ffffffCC; /* 80% opacity */
--rs-color-overlay-white-a11: #ffffffE6; /* 90% opacity */
--rs-color-overlay-white-a12: #ffffffF2; /* 95% opacity */
--rs-color-overlay-white-a1: oklch(1 0 0 / 0.051); /* 5% opacity */
--rs-color-overlay-white-a2: oklch(1 0 0 / 0.102); /* 10% opacity */
--rs-color-overlay-white-a3: oklch(1 0 0 / 0.149); /* 15% opacity */
--rs-color-overlay-white-a4: oklch(1 0 0 / 0.2); /* 20% opacity */
--rs-color-overlay-white-a5: oklch(1 0 0 / 0.302); /* 30% opacity */
--rs-color-overlay-white-a6: oklch(1 0 0 / 0.4); /* 40% opacity */
--rs-color-overlay-white-a7: oklch(1 0 0 / 0.502); /* 50% opacity */
--rs-color-overlay-white-a8: oklch(1 0 0 / 0.6); /* 60% opacity */
--rs-color-overlay-white-a9: oklch(1 0 0 / 0.702); /* 70% opacity */
--rs-color-overlay-white-a10: oklch(1 0 0 / 0.8); /* 80% opacity */
--rs-color-overlay-white-a11: oklch(1 0 0 / 0.902); /* 90% opacity */
--rs-color-overlay-white-a12: oklch(1 0 0 / 0.949); /* 95% opacity */

/* Additional Background Colors */
--rs-color-background-neutral-primary: var(--rs-neutral-3);
Expand Down
20 changes: 10 additions & 10 deletions packages/raystack/styles/effects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
:root {
/* Shadows */
/* Example usage: box-shadow: var(--rs-shadow-feather); */
--rs-shadow-feather: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 4px 4px -1px rgba(0, 0, 0, 0.02); /* sm */
--rs-shadow-soft: 0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); /* md */
--rs-shadow-lifted: 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 3px 8px 0px rgba(0, 0, 0, 0.07); /* lg */
--rs-shadow-floating: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 3px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 30px 0px rgba(0, 0, 0, 0.13); /* xl */
--rs-shadow-inset: 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset;
--rs-shadow-feather: 0px 1px 1px 0px oklch(0 0 0 / 0.06), 0px 4px 4px -1px oklch(0 0 0 / 0.02); /* sm */
--rs-shadow-soft: 0px 2px 4px 0px oklch(0 0 0 / 0.04), 0px 1px 2px 0px oklch(0 0 0 / 0.04); /* md */
--rs-shadow-lifted: 0px 1px 1px 0px oklch(0 0 0 / 0.07), 0px 2px 5px 0px oklch(0 0 0 / 0.07), 0px 3px 8px 0px oklch(0 0 0 / 0.07); /* lg */
--rs-shadow-floating: 0px 1px 1px 0px oklch(0 0 0 / 0.04), 0px 2px 8px 0px oklch(0 0 0 / 0.04), 0px 3px 17px 0px oklch(0 0 0 / 0.04), 0px 4px 30px 0px oklch(0 0 0 / 0.13); /* xl */
--rs-shadow-inset: 0px 1px 1px 0px oklch(0 0 0 / 0.04) inset;

/* Transitions */
--rs-transition-interactive: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
Expand All @@ -19,9 +19,9 @@
}

[data-theme="dark"] {
--rs-shadow-feather: 0px 1px 1px 0px rgba(0, 0, 0, 0.3), 0px 4px 4px -1px rgba(0, 0, 0, 0.25);
--rs-shadow-soft: 0px 2px 4px 0px rgba(0, 0, 0, 0.3), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
--rs-shadow-lifted: 0px 1px 1px 0px rgba(0, 0, 0, 0.35), 0px 2px 5px 0px rgba(0, 0, 0, 0.35), 0px 3px 8px 0px rgba(0, 0, 0, 0.35);
--rs-shadow-floating: 0px 1px 1px 0px rgba(0, 0, 0, 0.3), 0px 2px 8px 0px rgba(0, 0, 0, 0.3), 0px 3px 17px 0px rgba(0, 0, 0, 0.3), 0px 4px 30px 0px rgba(0, 0, 0, 0.4);
--rs-shadow-inset: 0px 1px 1px 0px rgba(0, 0, 0, 0.25) inset;
--rs-shadow-feather: 0px 1px 1px 0px oklch(0 0 0 / 0.3), 0px 4px 4px -1px oklch(0 0 0 / 0.25);
--rs-shadow-soft: 0px 2px 4px 0px oklch(0 0 0 / 0.3), 0px 1px 2px 0px oklch(0 0 0 / 0.25);
--rs-shadow-lifted: 0px 1px 1px 0px oklch(0 0 0 / 0.35), 0px 2px 5px 0px oklch(0 0 0 / 0.35), 0px 3px 8px 0px oklch(0 0 0 / 0.35);
--rs-shadow-floating: 0px 1px 1px 0px oklch(0 0 0 / 0.3), 0px 2px 8px 0px oklch(0 0 0 / 0.3), 0px 3px 17px 0px oklch(0 0 0 / 0.3), 0px 4px 30px 0px oklch(0 0 0 / 0.4);
--rs-shadow-inset: 0px 1px 1px 0px oklch(0 0 0 / 0.25) inset;
}
156 changes: 78 additions & 78 deletions packages/raystack/styles/primitives/accent.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,98 +6,98 @@

/* [data-accent-color='indigo'] { */
:root {
--rs-accent-1: #fdfdfe;
--rs-accent-2: #f7f9ff;
--rs-accent-3: #edf2fe;
--rs-accent-4: #e1e9ff;
--rs-accent-5: #d2deff;
--rs-accent-6: #c1d0ff;
--rs-accent-7: #abbdf9;
--rs-accent-8: #8da4ef;
--rs-accent-9: #3e63dd;
--rs-accent-10: #3358d4;
--rs-accent-11: #3a5bc7;
--rs-accent-12: #1f2d5c;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.9943 0.0013 286.38);
--rs-accent-2: oklch(0.9823 0.0083 271.33);
--rs-accent-3: oklch(0.9609 0.017 267.79);
--rs-accent-4: oklch(0.9346 0.031 269.82);
--rs-accent-5: oklch(0.9019 0.0471 269.62);
--rs-accent-6: oklch(0.862 0.0675 271.09);
--rs-accent-7: oklch(0.8062 0.0875 271.41);
--rs-accent-8: oklch(0.7309 0.1123 270.43);
--rs-accent-9: oklch(0.5438 0.191 267.01);
--rs-accent-10: oklch(0.5106 0.1954 266.58);
--rs-accent-11: oklch(0.5092 0.1725 267.17);
--rs-accent-12: oklch(0.3126 0.0858 268.6);
--rs-accent-contrast: oklch(1 0 0);
}
/* } */

[data-theme='dark'] {
--rs-accent-1: #11131f;
--rs-accent-2: #141726;
--rs-accent-3: #182449;
--rs-accent-4: #1d2e62;
--rs-accent-5: #253974;
--rs-accent-6: #304384;
--rs-accent-7: #3a4f97;
--rs-accent-8: #435db1;
--rs-accent-9: #3e63dd;
--rs-accent-10: #5472e4;
--rs-accent-11: #9eb1ff;
--rs-accent-12: #d6e1ff;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.1909 0.0246 276.53);
--rs-accent-2: oklch(0.2094 0.0302 274.84);
--rs-accent-3: oklch(0.2716 0.0705 267.98);
--rs-accent-4: oklch(0.3185 0.0946 267.25);
--rs-accent-5: oklch(0.3625 0.1044 267.03);
--rs-accent-6: oklch(0.4033 0.1112 268.76);
--rs-accent-7: oklch(0.4491 0.1201 268.94);
--rs-accent-8: oklch(0.5021 0.1366 268.25);
--rs-accent-9: oklch(0.5438 0.191 267.01);
--rs-accent-10: oklch(0.5891 0.1758 269.3);
--rs-accent-11: oklch(0.7759 0.1138 273.02);
--rs-accent-12: oklch(0.9108 0.0427 269.55);
--rs-accent-contrast: oklch(1 0 0);
}

[data-accent-color='orange'] {
--rs-accent-1: #fefcfb;
--rs-accent-2: #fff7ed;
--rs-accent-3: #ffefd6;
--rs-accent-4: #ffdfb5;
--rs-accent-5: #ffd19a;
--rs-accent-6: #ffc182;
--rs-accent-7: #f5ae73;
--rs-accent-8: #ec9455;
--rs-accent-9: #f76b15;
--rs-accent-10: #ef5f00;
--rs-accent-11: #cc4e00;
--rs-accent-12: #582d1d;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.9923 0.0025 48.72);
--rs-accent-2: oklch(0.9796 0.0158 73.68);
--rs-accent-3: oklch(0.9583 0.0371 79.11);
--rs-accent-4: oklch(0.92 0.0651 74.37);
--rs-accent-5: oklch(0.8879 0.0875 71.31);
--rs-accent-6: oklch(0.8537 0.1068 66.02);
--rs-accent-7: oklch(0.8059 0.1123 59.96);
--rs-accent-8: oklch(0.745 0.1322 54.68);
--rs-accent-9: oklch(0.6908 0.1909 45.02);
--rs-accent-10: oklch(0.6624 0.1946 43.46);
--rs-accent-11: oklch(0.5855 0.1743 42.74);
--rs-accent-12: oklch(0.3499 0.0685 40.83);
--rs-accent-contrast: oklch(1 0 0);
}

[data-accent-color='orange'][data-theme='dark'] {
--rs-accent-1: #17120e;
--rs-accent-2: #1e160f;
--rs-accent-3: #331e0b;
--rs-accent-4: #462100;
--rs-accent-5: #562800;
--rs-accent-6: #66350c;
--rs-accent-7: #7e451d;
--rs-accent-8: #a35829;
--rs-accent-9: #f76b15;
--rs-accent-10: #ff801f;
--rs-accent-11: #ffa057;
--rs-accent-12: #ffe0c2;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.1869 0.0114 60.68);
--rs-accent-2: oklch(0.2078 0.0185 62.72);
--rs-accent-3: oklch(0.2579 0.0447 60.79);
--rs-accent-4: oklch(0.2937 0.0713 56.7);
--rs-accent-5: oklch(0.3339 0.0833 54.38);
--rs-accent-6: oklch(0.3849 0.0867 54.98);
--rs-accent-7: oklch(0.4523 0.0945 52.66);
--rs-accent-8: oklch(0.5406 0.1156 50.05);
--rs-accent-9: oklch(0.6908 0.1909 45.02);
--rs-accent-10: oklch(0.7327 0.1818 50.86);
--rs-accent-11: oklch(0.7888 0.1434 56.21);
--rs-accent-12: oklch(0.9247 0.0524 66.17);
--rs-accent-contrast: oklch(1 0 0);
}

[data-accent-color='mint'] {
--rs-accent-1: #f9fefd;
--rs-accent-2: #f2fbf9;
--rs-accent-3: #ddf9f2;
--rs-accent-4: #c8f4e9;
--rs-accent-5: #b3ecde;
--rs-accent-6: #9ce0d0;
--rs-accent-7: #7ecfbd;
--rs-accent-8: #4cbba5;
--rs-accent-9: #86ead4;
--rs-accent-10: #7de0cb;
--rs-accent-11: #027864;
--rs-accent-12: #16433c;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.993 0.0054 183.03);
--rs-accent-2: oklch(0.9808 0.0098 181.42);
--rs-accent-3: oklch(0.9599 0.0306 178.93);
--rs-accent-4: oklch(0.9332 0.0476 178.33);
--rs-accent-5: oklch(0.9002 0.0611 178.06);
--rs-accent-6: oklch(0.8568 0.072 178.17);
--rs-accent-7: oklch(0.7973 0.0841 178.23);
--rs-accent-8: oklch(0.7221 0.1063 177.84);
--rs-accent-9: oklch(0.8696 0.0999 177.98);
--rs-accent-10: oklch(0.8401 0.0988 178.42);
--rs-accent-11: oklch(0.5117 0.0955 175.6);
--rs-accent-12: oklch(0.3496 0.0505 181.31);
--rs-accent-contrast: oklch(1 0 0);
}

[data-accent-color='mint'][data-theme='dark'] {
--rs-accent-1: #0e1515;
--rs-accent-2: #0f1b1b;
--rs-accent-3: #092c2b;
--rs-accent-4: #003a38;
--rs-accent-5: #004744;
--rs-accent-6: #105650;
--rs-accent-7: #1e685f;
--rs-accent-8: #277f70;
--rs-accent-9: #86ead4;
--rs-accent-10: #a8f5e5;
--rs-accent-11: #58d5ba;
--rs-accent-12: #c4f5e1;
--rs-accent-contrast: #ffffff;
--rs-accent-1: oklch(0.1886 0.0106 196.29);
--rs-accent-2: oklch(0.2109 0.017 195.94);
--rs-accent-3: oklch(0.2683 0.0391 192.36);
--rs-accent-4: oklch(0.3146 0.0542 190.98);
--rs-accent-5: oklch(0.359 0.062 189.96);
--rs-accent-6: oklch(0.4106 0.0662 186.24);
--rs-accent-7: oklch(0.4702 0.0725 183.51);
--rs-accent-8: oklch(0.5408 0.0853 179.23);
--rs-accent-9: oklch(0.8696 0.0999 177.98);
--rs-accent-10: oklch(0.9156 0.079 180);
--rs-accent-11: oklch(0.7954 0.1181 176.46);
--rs-accent-12: oklch(0.9306 0.057 168.28);
--rs-accent-contrast: oklch(1 0 0);
}
Comment thread
paanSinghCoder marked this conversation as resolved.
Loading
Loading