From 984c42d5d880c0bff0faa6e774a3eefcbc3efe56 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Sun, 26 Apr 2026 21:03:55 +0530 Subject: [PATCH 1/6] chore(tokens): migrate color system from HEX to OKLCH MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert all 414 design token color values to oklch() across primitives, semantic appearance tokens, viz palettes, overlay tokens, and shadow effects. Conversion is mechanical and visually lossless. Every value is byte-identical in 8-bit sRGB after re-parsing the rounded oklch() output, with CIEDE2000 delta-E < 0.5 — no rendered pixel changes. Files: - styles/primitives/gray.css (96 hex) - styles/primitives/accent.css (78 hex) - styles/primitives/appearance.css (192 hex) - styles/colors.css (24 hex+alpha overlays) - styles/effects.css (24 rgba shadows) Includes the one-shot migration script under scripts/ for reviewer verification (run with --validate). The script and its culori devDep are removed in the follow-up commit. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/raystack/package.json | 1 + .../scripts/migrate-colors-to-oklch.js | 154 +++++++ packages/raystack/styles/colors.css | 48 +-- packages/raystack/styles/effects.css | 20 +- .../raystack/styles/primitives/accent.css | 156 +++---- .../raystack/styles/primitives/appearance.css | 384 +++++++++--------- packages/raystack/styles/primitives/gray.css | 192 ++++----- pnpm-lock.yaml | 12 +- 8 files changed, 564 insertions(+), 403 deletions(-) create mode 100644 packages/raystack/scripts/migrate-colors-to-oklch.js diff --git a/packages/raystack/package.json b/packages/raystack/package.json index a884679da..df81b3abe 100644 --- a/packages/raystack/package.json +++ b/packages/raystack/package.json @@ -92,6 +92,7 @@ "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", "@vitest/ui": "^3.2.4", + "culori": "^4.0.2", "dotenv": "^17.2.2", "identity-obj-proxy": "^3.0.0", "jsdom": "^26.1.0", diff --git a/packages/raystack/scripts/migrate-colors-to-oklch.js b/packages/raystack/scripts/migrate-colors-to-oklch.js new file mode 100644 index 000000000..c0d3e64c3 --- /dev/null +++ b/packages/raystack/scripts/migrate-colors-to-oklch.js @@ -0,0 +1,154 @@ +#!/usr/bin/env node +/* + * HEX / rgba() -> OKLCH migration script for Apsara design tokens. + * + * Usage: + * node scripts/migrate-colors-to-oklch.js # dry-run, prints diff summary + * node scripts/migrate-colors-to-oklch.js --write # writes converted files in place + * node scripts/migrate-colors-to-oklch.js --validate # runs validation only (no write) + * + * Scope: primitive + token + effects CSS files only. Does NOT touch component + * CSS, tests, or inline styles. Conversion is mechanical and verified visually + * lossless: every value is (1) perceptually below CIEDE2000 0.5 and + * (2) byte-identical in 8-bit sRGB after re-parsing the rounded OKLCH output. + */ + +const fs = require('fs/promises'); +const path = require('path'); + +const ROOT = path.join(__dirname, '..'); +const TARGETS = [ + 'styles/primitives/gray.css', + 'styles/primitives/accent.css', + 'styles/primitives/appearance.css', + 'styles/colors.css', + 'styles/effects.css' +]; + +// Matches #RGB / #RGBA / #RRGGBB / #RRGGBBAA and rgba?(r, g, b) / rgba?(r, g, b, a) +const HEX_RE = + /#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*[\d.]+\s*)?\)/g; +const DELTA_E_THRESHOLD = 0.5; + +const args = new Set(process.argv.slice(2)); +const WRITE = args.has('--write'); +const VALIDATE_ONLY = args.has('--validate'); + +const round = (n, p) => Number.parseFloat((n ?? 0).toFixed(p)); +const toByte = v => Math.max(0, Math.min(255, Math.round(v * 255))); + +function formatOklch({ l, c, h, alpha }) { + const L = round(l, 4); + const C = round(c, 4); + const H = Number.isFinite(h) ? round(h, 2) : 0; + const body = `${L} ${C} ${H}`; + if (alpha === undefined || alpha === 1) return `oklch(${body})`; + return `oklch(${body} / ${round(alpha, 4)})`; +} + +async function main() { + const culori = await import('culori'); + const toOklch = culori.converter('oklch'); + const toRgb = culori.converter('rgb'); + const deltaE = culori.differenceCiede2000(); + + const report = { files: [], total: 0, failures: [] }; + + for (const rel of TARGETS) { + const abs = path.join(ROOT, rel); + const source = await fs.readFile(abs, 'utf8'); + let fileHits = 0; + const failures = []; + + const converted = source.replace(HEX_RE, match => { + const parsed = culori.parse(match); + if (!parsed) { + failures.push({ match, reason: 'parse failed' }); + return match; + } + const oklch = toOklch(parsed); + const out = formatOklch({ ...oklch, alpha: parsed.alpha }); + + // Reparse the ROUNDED output (not the raw object) to simulate browser rendering + const reparsed = culori.parse(out); + if (!reparsed) { + failures.push({ match, out, reason: 'output reparse failed' }); + return match; + } + const back = toRgb(reparsed); + + const dE = deltaE(parsed, back); + + const origBytes = [toByte(parsed.r), toByte(parsed.g), toByte(parsed.b)]; + const backBytes = [toByte(back.r), toByte(back.g), toByte(back.b)]; + const bytesMatch = origBytes.every((v, i) => v === backBytes[i]); + + const origA = parsed.alpha ?? 1; + const backA = reparsed.alpha ?? 1; + const alphaByteMatch = Math.abs(origA - backA) * 255 < 1; + + if (dE > DELTA_E_THRESHOLD || !bytesMatch || !alphaByteMatch) { + failures.push({ + match, + out, + dE: round(dE, 3), + origBytes, + backBytes, + alphaDelta: round(origA - backA, 4) + }); + } + + fileHits += 1; + return out; + }); + + report.files.push({ rel, hits: fileHits, changed: converted !== source }); + report.total += fileHits; + if (failures.length) report.failures.push({ rel, failures }); + + if (WRITE && !VALIDATE_ONLY && converted !== source) { + await fs.writeFile(abs, converted, 'utf8'); + } + } + + const mode = VALIDATE_ONLY ? 'VALIDATE' : WRITE ? 'WRITE' : 'DRY-RUN'; + console.log(`\n[migrate-colors-to-oklch] mode=${mode}`); + for (const f of report.files) { + console.log(` ${f.rel}: ${f.hits} hex values converted`); + } + console.log(` total: ${report.total}`); + + if (report.failures.length) { + console.error( + `\nValidation failures (${report.failures.reduce((n, f) => n + f.failures.length, 0)} total):` + ); + for (const { rel, failures } of report.failures) { + console.error(` ${rel}:`); + for (const f of failures) { + console.error(` ${f.match} -> ${f.out}`); + if (f.origBytes) + console.error( + ` bytes: ${f.origBytes.join(',')} vs ${f.backBytes.join(',')}` + ); + if (f.dE !== undefined) + console.error(` dE=${f.dE} alphaDelta=${f.alphaDelta}`); + if (f.reason) console.error(` reason: ${f.reason}`); + } + } + process.exit(1); + } + + console.log( + '\nAll values validated: byte-identical 8-bit sRGB round-trip, \u0394E < ' + + DELTA_E_THRESHOLD + + '.' + ); + if (!WRITE && !VALIDATE_ONLY) { + console.log('Dry run only. Re-run with --write to apply changes.'); + } +} + +main().catch(err => { + console.error(err); + process.exit(1); +}); diff --git a/packages/raystack/styles/colors.css b/packages/raystack/styles/colors.css index 1510955c8..729fff03e 100644 --- a/packages/raystack/styles/colors.css +++ b/packages/raystack/styles/colors.css @@ -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); diff --git a/packages/raystack/styles/effects.css b/packages/raystack/styles/effects.css index e660054b4..a498d3f20 100644 --- a/packages/raystack/styles/effects.css +++ b/packages/raystack/styles/effects.css @@ -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; @@ -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; } diff --git a/packages/raystack/styles/primitives/accent.css b/packages/raystack/styles/primitives/accent.css index bd067d794..3f8a65da0 100644 --- a/packages/raystack/styles/primitives/accent.css +++ b/packages/raystack/styles/primitives/accent.css @@ -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); } diff --git a/packages/raystack/styles/primitives/appearance.css b/packages/raystack/styles/primitives/appearance.css index 117893945..6c4640d4c 100644 --- a/packages/raystack/styles/primitives/appearance.css +++ b/packages/raystack/styles/primitives/appearance.css @@ -25,112 +25,112 @@ /* Attention Colors */ - --rs-attention-1: #fefdfb; - --rs-attention-2: #fff9ed; - --rs-attention-3: #fff4d5; - --rs-attention-4: #ffecbc; - --rs-attention-5: #ffe3a2; - --rs-attention-6: #ffd386; - --rs-attention-7: #f3ba63; - --rs-attention-8: #ee9d2b; - --rs-attention-9: #ffb224; - --rs-attention-10: #ffa01c; - --rs-attention-11: #ad5700; - --rs-attention-12: #4e2009; + --rs-attention-1: oklch(0.9943 0.0028 84.56); + --rs-attention-2: oklch(0.9835 0.0171 84.59); + --rs-attention-3: oklch(0.9678 0.0421 90.77); + --rs-attention-4: oklch(0.9467 0.0652 88.99); + --rs-attention-5: oklch(0.924 0.0878 87.29); + --rs-attention-6: oklch(0.8884 0.1073 80.68); + --rs-attention-7: oklch(0.8239 0.1234 76.15); + --rs-attention-8: oklch(0.7596 0.1524 69.5); + --rs-attention-9: oklch(0.8169 0.1639 75.84); + --rs-attention-10: oklch(0.7845 0.1678 66.73); + --rs-attention-11: oklch(0.5509 0.1374 54.39); + --rs-attention-12: oklch(0.3065 0.077 44.27); /* Success Colors */ - --rs-success-1: #fbfefc; - --rs-success-2: #f2fcf5; - --rs-success-3: #e9f9ee; - --rs-success-4: #ddf3e4; - --rs-success-5: #ccebd7; - --rs-success-6: #b4dfc4; - --rs-success-7: #92ceac; - --rs-success-8: #5bb98c; - --rs-success-9: #30a46c; - --rs-success-10: #299764; - --rs-success-11: #18794e; - --rs-success-12: #153226; + --rs-success-1: oklch(0.9942 0.0041 157.18); + --rs-success-2: oklch(0.9817 0.014 155.6); + --rs-success-3: oklch(0.9672 0.0222 155.93); + --rs-success-4: oklch(0.9439 0.0306 155.97); + --rs-success-5: oklch(0.9121 0.0423 157.18); + --rs-success-6: oklch(0.8657 0.0583 157.39); + --rs-success-7: oklch(0.8009 0.0784 159.16); + --rs-success-8: oklch(0.7158 0.1124 160.81); + --rs-success-9: oklch(0.6406 0.1329 157.68); + --rs-success-10: oklch(0.6025 0.1251 158.37); + --rs-success-11: oklch(0.5114 0.1102 158.44); + --rs-success-12: oklch(0.2903 0.0418 164.61); /* Danger Colors */ - --rs-danger-1: #fffcfc; - --rs-danger-2: #fff8f8; - --rs-danger-3: #ffefef; - --rs-danger-4: #ffe5e5; - --rs-danger-5: #fdd8d8; - --rs-danger-6: #f9c6c6; - --rs-danger-7: #f3aeaf; - --rs-danger-8: #eb9091; - --rs-danger-9: #e5484d; - --rs-danger-10: #dc3d43; - --rs-danger-11: #cd2b31; - --rs-danger-12: #381316; + --rs-danger-1: oklch(0.9934 0.0032 17.21); + --rs-danger-2: oklch(0.9845 0.0075 17.28); + --rs-danger-3: oklch(0.9648 0.0173 17.46); + --rs-danger-4: oklch(0.943 0.0286 17.67); + --rs-danger-5: oklch(0.9133 0.0414 17.93); + --rs-danger-6: oklch(0.8714 0.0583 18.33); + --rs-danger-7: oklch(0.816 0.0812 18.02); + --rs-danger-8: oklch(0.7479 0.1107 19.32); + --rs-danger-9: oklch(0.6256 0.1933 23.03); + --rs-danger-10: oklch(0.5982 0.1954 23.49); + --rs-danger-11: oklch(0.5545 0.1972 24.96); + --rs-danger-12: oklch(0.2462 0.0591 17.57); /* Visualization Colors */ - --rs-viz-sky-11: #00749e; - --rs-viz-sky-9: #7ce2fe; - --rs-viz-sky-8: #60b3d7; - --rs-viz-sky-6: #a9daed; - --rs-viz-mint-11: #027864; - --rs-viz-mint-9: #86ead4; - --rs-viz-mint-8: #4cbba5; - --rs-viz-mint-6: #9ce0d0; - --rs-viz-lime-11: #5c7c2f; - --rs-viz-lime-9: #bdee63; - --rs-viz-lime-8: #8db654; - --rs-viz-lime-6: #c2da91; - --rs-viz-grass-11: #2a7e3b; - --rs-viz-grass-9: #46a758; - --rs-viz-grass-8: #65ba74; - --rs-viz-grass-6: #b2ddb5; - --rs-viz-green-11: #218358; - --rs-viz-green-9: #30a46c; - --rs-viz-green-8: #5bb98b; - --rs-viz-green-6: #adddc0; - --rs-viz-jade-11: #208368; - --rs-viz-jade-9: #29a383; - --rs-viz-jade-8: #56ba9f; - --rs-viz-jade-6: #acdec8; - --rs-viz-cyan-11: #107d98; - --rs-viz-cyan-9: #00a2c7; - --rs-viz-cyan-8: #3db9cf; - --rs-viz-cyan-6: #9ddde7; - --rs-viz-blue-11: #0d74ce; - --rs-viz-blue-9: #0090ff; - --rs-viz-blue-8: #5eb1ef; - --rs-viz-blue-6: #acd8fc; - --rs-viz-iris-11: #5753c6; - --rs-viz-iris-9: #5b5bd6; - --rs-viz-iris-8: #9b9ef0; - --rs-viz-iris-6: #cbcdff; - --rs-viz-purple-11: #8145b5; - --rs-viz-purple-9: #8e4ec6; - --rs-viz-purple-8: #be93e4; - --rs-viz-purple-6: #e0c4f4; - --rs-viz-pink-11: #c2298a; - --rs-viz-pink-9: #d6409f; - --rs-viz-pink-8: #dd93c2; - --rs-viz-pink-6: #efbfdd; - --rs-viz-crimson-11: #cb1d63; - --rs-viz-crimson-9: #e93d82; - --rs-viz-crimson-8: #e093b2; - --rs-viz-crimson-6: #f3bed1; - --rs-viz-orange-11: #cc4e00; - --rs-viz-orange-9: #f76b15; - --rs-viz-orange-8: #ec9455; - --rs-viz-orange-6: #ffc182; - --rs-viz-gold-11: #71624b; - --rs-viz-gold-9: #978365; - --rs-viz-gold-8: #b9a88d; - --rs-viz-gold-6: #d8d0bf; + --rs-viz-sky-11: oklch(0.5255 0.1079 232.55); + --rs-viz-sky-9: oklch(0.8611 0.1027 217.8); + --rs-viz-sky-8: oklch(0.7283 0.0961 228.43); + --rs-viz-sky-6: oklch(0.8604 0.0571 223.65); + --rs-viz-mint-11: oklch(0.5117 0.0955 175.6); + --rs-viz-mint-9: oklch(0.8696 0.0999 177.98); + --rs-viz-mint-8: oklch(0.7221 0.1063 177.84); + --rs-viz-mint-6: oklch(0.8568 0.072 178.17); + --rs-viz-lime-11: oklch(0.5444 0.1114 128.6); + --rs-viz-lime-9: oklch(0.8874 0.1747 126.09); + --rs-viz-lime-8: oklch(0.725 0.1351 128.23); + --rs-viz-lime-6: oklch(0.8532 0.0991 123.29); + --rs-viz-grass-11: oklch(0.5262 0.1294 147.2); + --rs-viz-grass-9: oklch(0.6512 0.1468 147.39); + --rs-viz-grass-8: oklch(0.7174 0.1308 148.14); + --rs-viz-grass-6: oklch(0.8563 0.071 146.77); + --rs-viz-green-11: oklch(0.5435 0.1116 159.5); + --rs-viz-green-9: oklch(0.6406 0.1329 157.68); + --rs-viz-green-8: oklch(0.7156 0.1133 160.28); + --rs-viz-green-6: oklch(0.8558 0.0641 158.2); + --rs-viz-jade-11: oklch(0.5475 0.0983 170.05); + --rs-viz-jade-9: oklch(0.6422 0.115 170.73); + --rs-viz-jade-8: oklch(0.7214 0.1026 173.12); + --rs-viz-jade-6: oklch(0.8595 0.0601 166.24); + --rs-viz-cyan-11: oklch(0.547 0.0966 220.75); + --rs-viz-cyan-9: oklch(0.66 0.1217 221.74); + --rs-viz-cyan-8: oklch(0.7276 0.1102 211.93); + --rs-viz-cyan-6: oklch(0.8579 0.0659 208.14); + --rs-viz-blue-11: oklch(0.5558 0.1622 252.19); + --rs-viz-blue-9: oklch(0.6493 0.193 251.78); + --rs-viz-blue-8: oklch(0.7336 0.1214 243.09); + --rs-viz-blue-6: oklch(0.8633 0.0682 243.32); + --rs-viz-iris-11: oklch(0.5111 0.1739 279.84); + --rs-viz-iris-9: oklch(0.5403 0.1841 278.28); + --rs-viz-iris-8: oklch(0.7293 0.1182 281.44); + --rs-viz-iris-6: oklch(0.8634 0.0692 283.05); + --rs-viz-purple-11: oklch(0.5168 0.1733 305.88); + --rs-viz-purple-9: oklch(0.5556 0.1829 305.86); + --rs-viz-purple-8: oklch(0.7331 0.1225 307.97); + --rs-viz-purple-6: oklch(0.8592 0.0718 311.05); + --rs-viz-pink-11: oklch(0.5575 0.2069 347.32); + --rs-viz-pink-9: oklch(0.6168 0.2076 346); + --rs-viz-pink-8: oklch(0.7513 0.1071 341.48); + --rs-viz-pink-6: oklch(0.8558 0.0671 340.72); + --rs-viz-crimson-11: oklch(0.5522 0.2073 4.49); + --rs-viz-crimson-9: oklch(0.6341 0.213 1.28); + --rs-viz-crimson-8: oklch(0.7493 0.1002 354.02); + --rs-viz-crimson-6: oklch(0.8541 0.0653 355.16); + --rs-viz-orange-11: oklch(0.5855 0.1743 42.74); + --rs-viz-orange-9: oklch(0.6908 0.1909 45.02); + --rs-viz-orange-8: oklch(0.745 0.1322 54.68); + --rs-viz-orange-6: oklch(0.8537 0.1068 66.02); + --rs-viz-gold-11: oklch(0.5042 0.0395 78.26); + --rs-viz-gold-9: oklch(0.6204 0.0492 77.7); + --rs-viz-gold-8: oklch(0.739 0.0423 79.36); + --rs-viz-gold-6: oklch(0.8594 0.0247 85.79); /* Contrast Colors */ - --rs-danger-contrast: #ffffff; - --rs-attention-contrast: #000000; - --rs-success-contrast: #ffffff; + --rs-danger-contrast: oklch(1 0 0); + --rs-attention-contrast: oklch(0 0 0); + --rs-success-contrast: oklch(1 0 0); /* Overlay color */ - --rs-overlay-1: #0000004D; /* 30% opacity */ + --rs-overlay-1: oklch(0 0 0 / 0.302); /* 30% opacity */ } /* Dark Theme Colors */ @@ -150,110 +150,110 @@ html[data-theme="dark"] { --rs-neutral-12: var(--rs-gray-12); /* Attention Colors */ - --rs-attention-1: #1f1300; - --rs-attention-2: #271700; - --rs-attention-3: #341c00; - --rs-attention-4: #3f2200; - --rs-attention-5: #4a2900; - --rs-attention-6: #573300; - --rs-attention-7: #693f05; - --rs-attention-8: #824e00; - --rs-attention-9: #ffb224; - --rs-attention-10: #ffcb47; - --rs-attention-11: #f1a10d; - --rs-attention-12: #fef3dd; + --rs-attention-1: oklch(0.1976 0.0409 80.17); + --rs-attention-2: oklch(0.2205 0.0465 75.26); + --rs-attention-3: oklch(0.2532 0.0561 66.67); + --rs-attention-4: oklch(0.2843 0.0638 64.91); + --rs-attention-5: oklch(0.3166 0.071 65.12); + --rs-attention-6: oklch(0.3574 0.0786 67.65); + --rs-attention-7: oklch(0.4086 0.0875 66.87); + --rs-attention-8: oklch(0.4733 0.1046 67.01); + --rs-attention-9: oklch(0.8169 0.1639 75.84); + --rs-attention-10: oklch(0.8659 0.1539 86.48); + --rs-attention-11: oklch(0.7693 0.1617 73.12); + --rs-attention-12: oklch(0.967 0.0312 84.59); /* Success Colors */ - --rs-success-1: #0d1912; - --rs-success-2: #0f1e13; - --rs-success-3: #132819; - --rs-success-4: #16301d; - --rs-success-5: #193921; - --rs-success-6: #1d4427; - --rs-success-7: #245530; - --rs-success-8: #2f6e3b; - --rs-success-9: #46a758; - --rs-success-10: #55b467; - --rs-success-11: #63c174; - --rs-success-12: #e5fbeb; + --rs-success-1: oklch(0.1993 0.0223 158.02); + --rs-success-2: oklch(0.2174 0.0299 151.75); + --rs-success-3: oklch(0.254 0.0393 151.93); + --rs-success-4: oklch(0.282 0.0476 151.04); + --rs-success-5: oklch(0.3125 0.0574 150.09); + --rs-success-6: oklch(0.3494 0.0672 150.03); + --rs-success-7: oklch(0.4049 0.0815 149.47); + --rs-success-8: oklch(0.4832 0.1034 147.78); + --rs-success-9: oklch(0.6512 0.1468 147.39); + --rs-success-10: oklch(0.693 0.1434 147.93); + --rs-success-11: oklch(0.7339 0.1423 148.01); + --rs-success-12: oklch(0.9676 0.0313 154.18); /* Danger Colors */ - --rs-danger-1: #1f1315; - --rs-danger-2: #291415; - --rs-danger-3: #3c181a; - --rs-danger-4: #481a1d; - --rs-danger-5: #541b1f; - --rs-danger-6: #671e22; - --rs-danger-7: #822025; - --rs-danger-8: #aa2429; - --rs-danger-9: #e5484d; - --rs-danger-10: #f2555a; - --rs-danger-11: #ff6369; - --rs-danger-12: #feecee; + --rs-danger-1: oklch(0.2035 0.0202 7.98); + --rs-danger-2: oklch(0.2215 0.0346 17.2); + --rs-danger-3: oklch(0.2635 0.0568 18.35); + --rs-danger-4: oklch(0.289 0.0705 18.67); + --rs-danger-5: oklch(0.3129 0.0849 19.36); + --rs-danger-6: oklch(0.3527 0.1044 21.23); + --rs-danger-7: oklch(0.4057 0.1326 22.8); + --rs-danger-8: oklch(0.4843 0.1698 24.67); + --rs-danger-9: oklch(0.6256 0.1933 23.03); + --rs-danger-10: oklch(0.6625 0.1926 22.29); + --rs-danger-11: oklch(0.7013 0.1901 21.2); + --rs-danger-12: oklch(0.9579 0.0197 9.78); /* Visualization Colors */ - --rs-viz-sky-11: #75c7f0; - --rs-viz-sky-9: #7ce2fe; - --rs-viz-sky-8: #197cae; - --rs-viz-sky-6: #1b537b; - --rs-viz-mint-11: #58d5ba; - --rs-viz-mint-9: #86ead4; - --rs-viz-mint-8: #277f70; - --rs-viz-mint-6: #105650; - --rs-viz-lime-11: #bde56c; - --rs-viz-lime-9: #bdee63; - --rs-viz-lime-8: #577538; - --rs-viz-lime-6: #3d522a; - --rs-viz-grass-11: #71d083; - --rs-viz-grass-9: #46a758; - --rs-viz-grass-8: #3e7949; - --rs-viz-grass-6: #2d5736; - --rs-viz-green-11: #3dd68c; - --rs-viz-green-9: #30a46c; - --rs-viz-green-8: #2f7c57; - --rs-viz-green-6: #20573e; - --rs-viz-jade-11: #1fd8a4; - --rs-viz-jade-9: #29a383; - --rs-viz-jade-8: #2a7e68; - --rs-viz-jade-6: #1b5745; - --rs-viz-cyan-11: #4ccce6; - --rs-viz-cyan-9: #00a2c7; - --rs-viz-cyan-8: #11809c; - --rs-viz-cyan-6: #045468; - --rs-viz-blue-11: #70b8ff; - --rs-viz-blue-9: #0090ff; - --rs-viz-blue-8: #2870bd; - --rs-viz-blue-6: #104d87; - --rs-viz-iris-11: #b1a9ff; - --rs-viz-iris-9: #5b5bd6; - --rs-viz-iris-8: #5958b1; - --rs-viz-iris-6: #3d3e82; - --rs-viz-purple-11: #d19dff; - --rs-viz-purple-9: #8e4ec6; - --rs-viz-purple-8: #8457aa; - --rs-viz-purple-6: #54346b; - --rs-viz-pink-11: #ff8dcc; - --rs-viz-pink-9: #d6409f; - --rs-viz-pink-8: #a84885; - --rs-viz-pink-6: #692955; - --rs-viz-crimson-11: #ff92ad; - --rs-viz-crimson-9: #e93d82; - --rs-viz-crimson-8: #b0436e; - --rs-viz-crimson-6: #6d2545; - --rs-viz-orange-11: #ffa057; - --rs-viz-orange-9: #f76b15; - --rs-viz-orange-8: #a35829; - --rs-viz-orange-6: #66350c; - --rs-viz-gold-11: #cbb99f; - --rs-viz-gold-9: #978365; - --rs-viz-gold-8: #696256; - --rs-viz-gold-6: #444039; + --rs-viz-sky-11: oklch(0.7927 0.0991 231.61); + --rs-viz-sky-9: oklch(0.8611 0.1027 217.8); + --rs-viz-sky-8: oklch(0.5568 0.1145 237.44); + --rs-viz-sky-6: oklch(0.4262 0.0878 243.92); + --rs-viz-mint-11: oklch(0.7954 0.1181 176.46); + --rs-viz-mint-9: oklch(0.8696 0.0999 177.98); + --rs-viz-mint-8: oklch(0.5408 0.0853 179.23); + --rs-viz-mint-6: oklch(0.4106 0.0662 186.24); + --rs-viz-lime-11: oklch(0.8683 0.1552 124.74); + --rs-viz-lime-9: oklch(0.8874 0.1747 126.09); + --rs-viz-lime-8: oklch(0.5241 0.0945 130.63); + --rs-viz-lime-6: oklch(0.4103 0.0675 131.45); + --rs-viz-grass-11: oklch(0.7797 0.1419 148.48); + --rs-viz-grass-9: oklch(0.6512 0.1468 147.39); + --rs-viz-grass-8: oklch(0.5229 0.0973 148.32); + --rs-viz-grass-6: oklch(0.4164 0.0724 149.33); + --rs-viz-green-11: oklch(0.7794 0.1655 157.29); + --rs-viz-green-9: oklch(0.6406 0.1329 157.68); + --rs-viz-green-8: oklch(0.528 0.0963 159.39); + --rs-viz-green-6: oklch(0.4124 0.0721 160.95); + --rs-viz-jade-11: oklch(0.7852 0.1559 167.11); + --rs-viz-jade-9: oklch(0.6422 0.115 170.73); + --rs-viz-jade-8: oklch(0.5365 0.0875 172.23); + --rs-viz-jade-6: oklch(0.4127 0.0687 169.57); + --rs-viz-cyan-11: oklch(0.7854 0.1158 213.8); + --rs-viz-cyan-9: oklch(0.66 0.1217 221.74); + --rs-viz-cyan-8: oklch(0.5566 0.0985 221.11); + --rs-viz-cyan-6: oklch(0.4135 0.0747 221.5); + --rs-viz-blue-11: oklch(0.7642 0.1257 249.46); + --rs-viz-blue-9: oklch(0.6493 0.193 251.78); + --rs-viz-blue-8: oklch(0.5406 0.1395 253.17); + --rs-viz-blue-6: oklch(0.416 0.1133 252.01); + --rs-viz-iris-11: oklch(0.7743 0.1215 287.46); + --rs-viz-iris-9: oklch(0.5403 0.1841 278.28); + --rs-viz-iris-8: oklch(0.5068 0.1377 280.8); + --rs-viz-iris-6: oklch(0.4004 0.1117 279.45); + --rs-viz-purple-11: oklch(0.7807 0.1452 307.74); + --rs-viz-purple-9: oklch(0.5556 0.1829 305.86); + --rs-viz-purple-8: oklch(0.5412 0.1326 307.57); + --rs-viz-purple-6: oklch(0.3887 0.0964 309.45); + --rs-viz-pink-11: oklch(0.7846 0.155 346.97); + --rs-viz-pink-9: oklch(0.6168 0.2076 346); + --rs-viz-pink-8: oklch(0.5462 0.1449 343.97); + --rs-viz-pink-6: oklch(0.3884 0.1075 341.41); + --rs-viz-crimson-11: oklch(0.7825 0.1338 4.74); + --rs-viz-crimson-9: oklch(0.6341 0.213 1.28); + --rs-viz-crimson-8: oklch(0.5431 0.1479 358.72); + --rs-viz-crimson-6: oklch(0.3826 0.1079 355.87); + --rs-viz-orange-11: oklch(0.7888 0.1434 56.21); + --rs-viz-orange-9: oklch(0.6908 0.1909 45.02); + --rs-viz-orange-8: oklch(0.5406 0.1156 50.05); + --rs-viz-orange-6: oklch(0.3849 0.0867 54.98); + --rs-viz-gold-11: oklch(0.794 0.041 77.08); + --rs-viz-gold-9: oklch(0.6204 0.0492 77.7); + --rs-viz-gold-8: oklch(0.499 0.0205 81.26); + --rs-viz-gold-6: oklch(0.3732 0.0129 81.75); /* Contrast Colors */ - --rs-danger-contrast: #ffffff; - --rs-attention-contrast: #000000; - --rs-success-contrast: #ffffff; + --rs-danger-contrast: oklch(1 0 0); + --rs-attention-contrast: oklch(0 0 0); + --rs-success-contrast: oklch(1 0 0); /* Overlay color */ - --rs-overlay-1: #ffffff4D; /* 30% opacity */ + --rs-overlay-1: oklch(1 0 0 / 0.302); /* 30% opacity */ } \ No newline at end of file diff --git a/packages/raystack/styles/primitives/gray.css b/packages/raystack/styles/primitives/gray.css index f8eb06406..6c7d32884 100644 --- a/packages/raystack/styles/primitives/gray.css +++ b/packages/raystack/styles/primitives/gray.css @@ -6,121 +6,121 @@ [data-gray-color='gray'] { - --rs-gray-1: #fcfcfc; - --rs-gray-2: #f9f9f9; - --rs-gray-3: #f0f0f0; - --rs-gray-4: #e8e8e8; - --rs-gray-5: #e0e0e0; - --rs-gray-6: #d9d9d9; - --rs-gray-7: #cecece; - --rs-gray-8: #bbbbbb; - --rs-gray-9: #8d8d8d; - --rs-gray-10: #838383; - --rs-gray-11: #646464; - --rs-gray-12: #202020; + --rs-gray-1: oklch(0.9911 0 0); + --rs-gray-2: oklch(0.9821 0 0); + --rs-gray-3: oklch(0.9551 0 0); + --rs-gray-4: oklch(0.931 0 0); + --rs-gray-5: oklch(0.9067 0 0); + --rs-gray-6: oklch(0.8853 0 0); + --rs-gray-7: oklch(0.8514 0 0); + --rs-gray-8: oklch(0.7921 0 0); + --rs-gray-9: oklch(0.6434 0 0); + --rs-gray-10: oklch(0.61 0 0); + --rs-gray-11: oklch(0.5032 0 0); + --rs-gray-12: oklch(0.2435 0 0); } [data-gray-color='gray'][data-theme='dark'] { - --rs-gray-1: #111111; - --rs-gray-2: #191919; - --rs-gray-3: #222222; - --rs-gray-4: #2a2a2a; - --rs-gray-5: #313131; - --rs-gray-6: #3a3a3a; - --rs-gray-7: #484848; - --rs-gray-8: #606060; - --rs-gray-9: #6e6e6e; - --rs-gray-10: #7b7b7b; - --rs-gray-11: #b4b4b4; - --rs-gray-12: #eeeeee; + --rs-gray-1: oklch(0.1776 0 0); + --rs-gray-2: oklch(0.2134 0 0); + --rs-gray-3: oklch(0.252 0 0); + --rs-gray-4: oklch(0.285 0 0); + --rs-gray-5: oklch(0.3132 0 0); + --rs-gray-6: oklch(0.3485 0 0); + --rs-gray-7: oklch(0.4017 0 0); + --rs-gray-8: oklch(0.4891 0 0); + --rs-gray-9: oklch(0.5382 0 0); + --rs-gray-10: oklch(0.5829 0 0); + --rs-gray-11: oklch(0.7699 0 0); + --rs-gray-12: oklch(0.9491 0 0); } [data-gray-color='mauve'] { - --rs-gray-1: #fdfcfd; - --rs-gray-2: #faf9fb; - --rs-gray-3: #f2eff3; - --rs-gray-4: #eae7ec; - --rs-gray-5: #e3dfe6; - --rs-gray-6: #dbd8e0; - --rs-gray-7: #d0cdd7; - --rs-gray-8: #bcbac7; - --rs-gray-9: #8e8c99; - --rs-gray-10: #84828e; - --rs-gray-11: #65636d; - --rs-gray-12: #211f26; + --rs-gray-1: oklch(0.9921 0.0017 325.59); + --rs-gray-2: oklch(0.9834 0.0028 308.43); + --rs-gray-3: oklch(0.9556 0.0062 317.75); + --rs-gray-4: oklch(0.9317 0.0074 312.3); + --rs-gray-5: oklch(0.9088 0.0103 311.17); + --rs-gray-6: oklch(0.8869 0.0113 303.09); + --rs-gray-7: oklch(0.8537 0.0141 299.76); + --rs-gray-8: oklch(0.7945 0.0183 293.05); + --rs-gray-9: oklch(0.646 0.0193 292.92); + --rs-gray-10: oklch(0.6123 0.018 293.51); + --rs-gray-11: oklch(0.505 0.0158 295); + --rs-gray-12: oklch(0.2445 0.0134 298.46); } [data-gray-color='mauve'][data-theme='dark'] { - --rs-gray-1: #121113; - --rs-gray-2: #1a191b; - --rs-gray-3: #232225; - --rs-gray-4: #2b292d; - --rs-gray-5: #323035; - --rs-gray-6: #3c393f; - --rs-gray-7: #49474e; - --rs-gray-8: #625f69; - --rs-gray-9: #6f6d78; - --rs-gray-10: #7c7a85; - --rs-gray-11: #b5b2bc; - --rs-gray-12: #eeeef0; + --rs-gray-1: oklch(0.1797 0.0043 308.19); + --rs-gray-2: oklch(0.2154 0.0041 308.25); + --rs-gray-3: oklch(0.2543 0.0057 301.13); + --rs-gray-4: oklch(0.2846 0.0077 308.16); + --rs-gray-5: oklch(0.3132 0.0092 303.92); + --rs-gray-6: oklch(0.3499 0.011 308.11); + --rs-gray-7: oklch(0.4024 0.0119 298.9); + --rs-gray-8: oklch(0.4917 0.0162 299.48); + --rs-gray-9: oklch(0.5403 0.0171 294.16); + --rs-gray-10: oklch(0.5849 0.0168 294.22); + --rs-gray-11: oklch(0.7691 0.0144 299.72); + --rs-gray-12: oklch(0.9497 0.0027 286.35); } [data-gray-color='slate'] { - --rs-gray-1: #fcfcfd; - --rs-gray-2: #f9f9fb; - --rs-gray-3: #f0f0f3; - --rs-gray-4: #e8e8ec; - --rs-gray-5: #e0e1e6; - --rs-gray-6: #d9d9e0; - --rs-gray-7: #cdced6; - --rs-gray-8: #b9bbc6; - --rs-gray-9: #8b8d98; - --rs-gray-10: #80838d; - --rs-gray-11: #60646c; - --rs-gray-12: #1c2024; + --rs-gray-1: oklch(0.9913 0.0013 286.38); + --rs-gray-2: oklch(0.9827 0.0026 286.35); + --rs-gray-3: oklch(0.956 0.004 286.32); + --rs-gray-4: oklch(0.9321 0.0054 286.3); + --rs-gray-5: oklch(0.9104 0.0068 277.16); + --rs-gray-6: oklch(0.8873 0.0095 286.2); + --rs-gray-7: oklch(0.853 0.0111 280.45); + --rs-gray-8: oklch(0.7938 0.0156 277.79); + --rs-gray-9: oklch(0.6453 0.0165 277.7); + --rs-gray-10: oklch(0.6108 0.0155 272.56); + --rs-gray-11: oklch(0.5025 0.0136 264.44); + --rs-gray-12: oklch(0.2411 0.0097 248.23); } [data-gray-color='slate'][data-theme='dark'] { - --rs-gray-1: #111113; - --rs-gray-2: #18191b; - --rs-gray-3: #212225; - --rs-gray-4: #272a2d; - --rs-gray-5: #2e3135; - --rs-gray-6: #363a3f; - --rs-gray-7: #43484e; - --rs-gray-8: #5a6169; - --rs-gray-9: #696e77; - --rs-gray-10: #777b84; - --rs-gray-11: #b0b4ba; - --rs-gray-12: #edeef0; + --rs-gray-1: oklch(0.1785 0.0041 285.98); + --rs-gray-2: oklch(0.2132 0.0042 264.48); + --rs-gray-3: oklch(0.2521 0.0058 271.18); + --rs-gray-4: oklch(0.2832 0.007 248.07); + --rs-gray-5: oklch(0.3118 0.0083 255.56); + --rs-gray-6: oklch(0.3466 0.0103 253.97); + --rs-gray-7: oklch(0.3993 0.0121 252.94); + --rs-gray-8: oklch(0.4893 0.0155 251.69); + --rs-gray-9: oklch(0.537 0.0153 262.34); + --rs-gray-10: oklch(0.5825 0.0145 266.63); + --rs-gray-11: oklch(0.7686 0.0096 258.34); + --rs-gray-12: oklch(0.9489 0.0029 264.54); } [data-gray-color='sage'] { - --rs-gray-1: #fbfdfc; - --rs-gray-2: #f7f9f8; - --rs-gray-3: #eef1f0; - --rs-gray-4: #e6e9e8; - --rs-gray-5: #dfe2e0; - --rs-gray-6: #d7dad9; - --rs-gray-7: #cbcfcd; - --rs-gray-8: #b8bcba; - --rs-gray-9: #868e8b; - --rs-gray-10: #7c8481; - --rs-gray-11: #5f6563; - --rs-gray-12: #1a211e; + --rs-gray-1: oklch(0.9923 0.0025 165.08); + --rs-gray-2: oklch(0.9803 0.0025 165.08); + --rs-gray-3: oklch(0.9556 0.0035 174.48); + --rs-gray-4: oklch(0.9314 0.0035 174.48); + --rs-gray-5: oklch(0.9099 0.0042 157.17); + --rs-gray-6: oklch(0.8858 0.0035 174.47); + --rs-gray-7: oklch(0.8508 0.0052 164.98); + --rs-gray-8: oklch(0.7915 0.0052 164.97); + --rs-gray-9: oklch(0.6392 0.0103 171.61); + --rs-gray-10: oklch(0.6057 0.0105 171.57); + --rs-gray-11: oklch(0.5008 0.0081 174.11); + --rs-gray-12: oklch(0.2396 0.0117 167.56); } [data-gray-color='sage'][data-theme='dark'] { - --rs-gray-1: #101211; - --rs-gray-2: #171918; - --rs-gray-3: #202221; - --rs-gray-4: #272a29; - --rs-gray-5: #2e3130; - --rs-gray-6: #373b39; - --rs-gray-7: #444947; - --rs-gray-8: #5b625f; - --rs-gray-9: #63706b; - --rs-gray-10: #717d79; - --rs-gray-11: #adb5b2; - --rs-gray-12: #eceeed; + --rs-gray-1: oklch(0.1795 0.0038 164.58); + --rs-gray-2: oklch(0.2108 0.0036 164.68); + --rs-gray-3: oklch(0.2495 0.0035 164.77); + --rs-gray-4: oklch(0.2816 0.0047 174.1); + --rs-gray-5: oklch(0.3098 0.0046 174.15); + --rs-gray-6: oklch(0.3478 0.0064 164.65); + --rs-gray-7: oklch(0.4001 0.0073 170.09); + --rs-gray-8: oklch(0.489 0.0099 168.42); + --rs-gray-9: oklch(0.5327 0.0175 170.54); + --rs-gray-10: oklch(0.5785 0.0155 173.79); + --rs-gray-11: oklch(0.7659 0.0099 171.7); + --rs-gray-12: oklch(0.9473 0.0025 165.07); } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7839febed..46df1dab4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -251,6 +251,9 @@ importers: '@vitest/ui': specifier: ^3.2.4 version: 3.2.4(vitest@3.2.4) + culori: + specifier: ^4.0.2 + version: 4.0.2 dotenv: specifier: ^17.2.2 version: 17.2.2 @@ -4593,6 +4596,10 @@ packages: csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} + culori@4.0.2: + resolution: {integrity: sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + data-urls@5.0.0: resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} engines: {node: '>=18'} @@ -10907,7 +10914,6 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0) transitivePeerDependencies: - '@parcel/core' - - '@swc/helpers' '@parcel/plugin@2.9.2(@parcel/core@2.12.0)': dependencies: @@ -11326,8 +11332,6 @@ snapshots: '@parcel/types': 2.12.0(@parcel/core@2.12.0) '@parcel/utils': 2.12.0 nullthrows: 1.1.1 - transitivePeerDependencies: - - '@swc/helpers' '@parcel/workers@2.9.2(@parcel/core@2.12.0)': dependencies: @@ -13818,6 +13822,8 @@ snapshots: csstype@3.1.3: {} + culori@4.0.2: {} + data-urls@5.0.0: dependencies: whatwg-mimetype: 4.0.0 From a36d24e88a81ee9e42f175ed557eb89c93caf7ef Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Sun, 26 Apr 2026 21:06:04 +0530 Subject: [PATCH 2/6] chore(tokens): remove one-shot OKLCH migration script The migration is complete; the script and its sole consumer (culori) have no further use. Run state lives in git history. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/raystack/package.json | 1 - .../scripts/migrate-colors-to-oklch.js | 154 ------------------ pnpm-lock.yaml | 11 -- 3 files changed, 166 deletions(-) delete mode 100644 packages/raystack/scripts/migrate-colors-to-oklch.js diff --git a/packages/raystack/package.json b/packages/raystack/package.json index df81b3abe..a884679da 100644 --- a/packages/raystack/package.json +++ b/packages/raystack/package.json @@ -92,7 +92,6 @@ "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", "@vitest/ui": "^3.2.4", - "culori": "^4.0.2", "dotenv": "^17.2.2", "identity-obj-proxy": "^3.0.0", "jsdom": "^26.1.0", diff --git a/packages/raystack/scripts/migrate-colors-to-oklch.js b/packages/raystack/scripts/migrate-colors-to-oklch.js deleted file mode 100644 index c0d3e64c3..000000000 --- a/packages/raystack/scripts/migrate-colors-to-oklch.js +++ /dev/null @@ -1,154 +0,0 @@ -#!/usr/bin/env node -/* - * HEX / rgba() -> OKLCH migration script for Apsara design tokens. - * - * Usage: - * node scripts/migrate-colors-to-oklch.js # dry-run, prints diff summary - * node scripts/migrate-colors-to-oklch.js --write # writes converted files in place - * node scripts/migrate-colors-to-oklch.js --validate # runs validation only (no write) - * - * Scope: primitive + token + effects CSS files only. Does NOT touch component - * CSS, tests, or inline styles. Conversion is mechanical and verified visually - * lossless: every value is (1) perceptually below CIEDE2000 0.5 and - * (2) byte-identical in 8-bit sRGB after re-parsing the rounded OKLCH output. - */ - -const fs = require('fs/promises'); -const path = require('path'); - -const ROOT = path.join(__dirname, '..'); -const TARGETS = [ - 'styles/primitives/gray.css', - 'styles/primitives/accent.css', - 'styles/primitives/appearance.css', - 'styles/colors.css', - 'styles/effects.css' -]; - -// Matches #RGB / #RGBA / #RRGGBB / #RRGGBBAA and rgba?(r, g, b) / rgba?(r, g, b, a) -const HEX_RE = - /#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*[\d.]+\s*)?\)/g; -const DELTA_E_THRESHOLD = 0.5; - -const args = new Set(process.argv.slice(2)); -const WRITE = args.has('--write'); -const VALIDATE_ONLY = args.has('--validate'); - -const round = (n, p) => Number.parseFloat((n ?? 0).toFixed(p)); -const toByte = v => Math.max(0, Math.min(255, Math.round(v * 255))); - -function formatOklch({ l, c, h, alpha }) { - const L = round(l, 4); - const C = round(c, 4); - const H = Number.isFinite(h) ? round(h, 2) : 0; - const body = `${L} ${C} ${H}`; - if (alpha === undefined || alpha === 1) return `oklch(${body})`; - return `oklch(${body} / ${round(alpha, 4)})`; -} - -async function main() { - const culori = await import('culori'); - const toOklch = culori.converter('oklch'); - const toRgb = culori.converter('rgb'); - const deltaE = culori.differenceCiede2000(); - - const report = { files: [], total: 0, failures: [] }; - - for (const rel of TARGETS) { - const abs = path.join(ROOT, rel); - const source = await fs.readFile(abs, 'utf8'); - let fileHits = 0; - const failures = []; - - const converted = source.replace(HEX_RE, match => { - const parsed = culori.parse(match); - if (!parsed) { - failures.push({ match, reason: 'parse failed' }); - return match; - } - const oklch = toOklch(parsed); - const out = formatOklch({ ...oklch, alpha: parsed.alpha }); - - // Reparse the ROUNDED output (not the raw object) to simulate browser rendering - const reparsed = culori.parse(out); - if (!reparsed) { - failures.push({ match, out, reason: 'output reparse failed' }); - return match; - } - const back = toRgb(reparsed); - - const dE = deltaE(parsed, back); - - const origBytes = [toByte(parsed.r), toByte(parsed.g), toByte(parsed.b)]; - const backBytes = [toByte(back.r), toByte(back.g), toByte(back.b)]; - const bytesMatch = origBytes.every((v, i) => v === backBytes[i]); - - const origA = parsed.alpha ?? 1; - const backA = reparsed.alpha ?? 1; - const alphaByteMatch = Math.abs(origA - backA) * 255 < 1; - - if (dE > DELTA_E_THRESHOLD || !bytesMatch || !alphaByteMatch) { - failures.push({ - match, - out, - dE: round(dE, 3), - origBytes, - backBytes, - alphaDelta: round(origA - backA, 4) - }); - } - - fileHits += 1; - return out; - }); - - report.files.push({ rel, hits: fileHits, changed: converted !== source }); - report.total += fileHits; - if (failures.length) report.failures.push({ rel, failures }); - - if (WRITE && !VALIDATE_ONLY && converted !== source) { - await fs.writeFile(abs, converted, 'utf8'); - } - } - - const mode = VALIDATE_ONLY ? 'VALIDATE' : WRITE ? 'WRITE' : 'DRY-RUN'; - console.log(`\n[migrate-colors-to-oklch] mode=${mode}`); - for (const f of report.files) { - console.log(` ${f.rel}: ${f.hits} hex values converted`); - } - console.log(` total: ${report.total}`); - - if (report.failures.length) { - console.error( - `\nValidation failures (${report.failures.reduce((n, f) => n + f.failures.length, 0)} total):` - ); - for (const { rel, failures } of report.failures) { - console.error(` ${rel}:`); - for (const f of failures) { - console.error(` ${f.match} -> ${f.out}`); - if (f.origBytes) - console.error( - ` bytes: ${f.origBytes.join(',')} vs ${f.backBytes.join(',')}` - ); - if (f.dE !== undefined) - console.error(` dE=${f.dE} alphaDelta=${f.alphaDelta}`); - if (f.reason) console.error(` reason: ${f.reason}`); - } - } - process.exit(1); - } - - console.log( - '\nAll values validated: byte-identical 8-bit sRGB round-trip, \u0394E < ' + - DELTA_E_THRESHOLD + - '.' - ); - if (!WRITE && !VALIDATE_ONLY) { - console.log('Dry run only. Re-run with --write to apply changes.'); - } -} - -main().catch(err => { - console.error(err); - process.exit(1); -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 46df1dab4..625b1caf2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -251,9 +251,6 @@ importers: '@vitest/ui': specifier: ^3.2.4 version: 3.2.4(vitest@3.2.4) - culori: - specifier: ^4.0.2 - version: 4.0.2 dotenv: specifier: ^17.2.2 version: 17.2.2 @@ -4596,10 +4593,6 @@ packages: csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} - culori@4.0.2: - resolution: {integrity: sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==} - engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - data-urls@5.0.0: resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} engines: {node: '>=18'} @@ -10506,8 +10499,6 @@ snapshots: '@parcel/logger': 2.12.0 '@parcel/utils': 2.12.0 lmdb: 2.8.5 - transitivePeerDependencies: - - '@swc/helpers' '@parcel/cache@2.9.2(@parcel/core@2.12.0)': dependencies: @@ -13822,8 +13813,6 @@ snapshots: csstype@3.1.3: {} - culori@4.0.2: {} - data-urls@5.0.0: dependencies: whatwg-mimetype: 4.0.0 From 3c0c41a86c84abf821d9f7f6f6c5cf060f0d4d41 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 27 Apr 2026 09:42:23 +0530 Subject: [PATCH 3/6] chore(tokens): migrate number-field drop-shadow rgba to oklch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert the lone rgba() drop-shadow on the number-field scrub cursor to oklch() for consistency with the now-migrated effects.css shadow tokens. Pure black with 50% alpha — visually lossless. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../raystack/components/number-field/number-field.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css index f19286612..52229c070 100644 --- a/packages/raystack/components/number-field/number-field.module.css +++ b/packages/raystack/components/number-field/number-field.module.css @@ -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 oklch(0 0 0 / 0.5)); } From e9cc45c4cf85345d463afd667328dddc50342c80 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 27 Apr 2026 14:34:45 +0530 Subject: [PATCH 4/6] chore(tokens): migrate decorative gradient hex to oklch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Convert the brand-decoration gradients in callout, badge, and announcement-bar from raw HEX (with alpha) to oklch() for format consistency with the tokens layer. Byte-identical 8-bit sRGB. These values remain hardcoded brand-decoration magic numbers, not tokens — tokenization is a separate design-team conversation. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../components/announcement-bar/announcement-bar.module.css | 4 ++-- packages/raystack/components/badge/badge.module.css | 2 +- packages/raystack/components/callout/callout.module.css | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/raystack/components/announcement-bar/announcement-bar.module.css b/packages/raystack/components/announcement-bar/announcement-bar.module.css index 177787cc0..69dbc2ddf 100644 --- a/packages/raystack/components/announcement-bar/announcement-bar.module.css +++ b/packages/raystack/components/announcement-bar/announcement-bar.module.css @@ -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% ); } diff --git a/packages/raystack/components/badge/badge.module.css b/packages/raystack/components/badge/badge.module.css index c049e8b34..0ecaf2f51 100644 --- a/packages/raystack/components/badge/badge.module.css +++ b/packages/raystack/components/badge/badge.module.css @@ -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); } diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css index 46bafab16..1dd78953d 100644 --- a/packages/raystack/components/callout/callout.module.css +++ b/packages/raystack/components/callout/callout.module.css @@ -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); } @@ -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); } From ce6e359d5028ef3c1cd02b2a796f6b447b7f7bd3 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 27 Apr 2026 14:46:39 +0530 Subject: [PATCH 5/6] chore(docs): switch dialog demo overlay rgba to oklch Mirror the tokens-layer convention in the dialog overlay demo so the docs preach what the design system uses internally. Co-Authored-By: Claude Opus 4.7 (1M context) --- apps/www/src/content/docs/components/dialog/demo.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/www/src/content/docs/components/dialog/demo.ts b/apps/www/src/content/docs/components/dialog/demo.ts index 6757548a2..5b55d2b94 100644 --- a/apps/www/src/content/docs/components/dialog/demo.ts +++ b/apps/www/src/content/docs/components/dialog/demo.ts @@ -73,7 +73,7 @@ export const customDemo = { Custom Styled Dialog @@ -94,7 +94,7 @@ export const onlyHeaderDemo = { Title @@ -117,7 +117,7 @@ export const onlyFooterDemo = { Title From 7dc9811247564dc14a0717d9dbd59db9fecb62f0 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 28 Apr 2026 10:58:50 +0530 Subject: [PATCH 6/6] chore(tokens): update scrub-area-cursor drop-shadow color to use variable --- .../raystack/components/number-field/number-field.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/raystack/components/number-field/number-field.module.css b/packages/raystack/components/number-field/number-field.module.css index 52229c070..4d7000c75 100644 --- a/packages/raystack/components/number-field/number-field.module.css +++ b/packages/raystack/components/number-field/number-field.module.css @@ -77,5 +77,5 @@ } .scrub-area-cursor { - filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.5)); + filter: drop-shadow(0 1px 1px var(--rs-color-overlay-black-a7)); }