go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(color): re-author gold + bronze as distinct metals (OKLCH)

Browse Source 
Radix's gold/bronze were near-identical in UI (chroma ~0.05, indistinguishable).
Re-authored via uix.color (generateScale from metallic seeds): gold #d4af37
(yellow-gold, OKLCH H91) and bronze #cd7f32 (copper, H61), chroma ~0.13 — ~2.6x
more saturated so the hue gap reads clearly (gold yellow vs bronze copper).
Verified in-browser: gold rgb(212,175,55) vs bronze rgb(205,127,50), distinct.
The other 29 scales stay exact Radix v3; header notes the exception. Palette stays
Radix-as-default (swappable) per the engine-not-hues principle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 81eb572f3d
commit 9bf7263366
2 changed files with 106 additions and 100 deletions
Show Stats Download Patch File Download Diff File

192
src/uix/eidos/generated/base.css
Unescape View File

@ -5618,54 +5618,54 @@
--scale-lime-a10: rgb(142 219 0 / 0.702);
--scale-lime-a11: rgb(55 94 0 / 0.8157);
--scale-lime-a12: rgb(30 40 0 / 0.8902);
--scale-gold-1: #fdfdfc;
--scale-gold-2: #faf9f2;
--scale-gold-3: #f2f0e7;
--scale-gold-4: #eae6db;
--scale-gold-5: #e1dccf;
--scale-gold-6: #d8d0bf;
--scale-gold-7: #cbc0aa;
--scale-gold-8: #b9a88d;
--scale-gold-9: #978365;
--scale-gold-10: #8c7a5e;
--scale-gold-11: #71624b;
--scale-gold-12: #3b352b;
--scale-gold-a1: rgb(85 85 0 / 0.0118);
--scale-gold-a2: rgb(157 137 0 / 0.051);
--scale-gold-a3: rgb(117 96 0 / 0.0941);
--scale-gold-a4: rgb(106 78 0 / 0.1412);
--scale-gold-a5: rgb(96 69 0 / 0.1882);
--scale-gold-a6: rgb(100 68 0 / 0.251);
--scale-gold-a7: rgb(99 66 0 / 0.3333);
--scale-gold-a8: rgb(98 60 0 / 0.4471);
--scale-gold-a9: rgb(83 50 0 / 0.6039);
--scale-gold-a10: rgb(73 44 0 / 0.6314);
--scale-gold-a11: rgb(54 33 0 / 0.7059);
--scale-gold-a12: rgb(19 12 0 / 0.8314);
--scale-bronze-1: #fdfcfc;
--scale-bronze-2: #fdf7f5;
--scale-bronze-3: #f6edea;
--scale-bronze-4: #efe4df;
--scale-bronze-5: #e7d9d3;
--scale-bronze-6: #dfcdc5;
--scale-bronze-7: #d3bcb3;
--scale-bronze-8: #c2a499;
--scale-bronze-9: #a18072;
--scale-bronze-10: #957468;
--scale-bronze-11: #7d5e54;
--scale-bronze-12: #43302b;
--scale-bronze-a1: rgb(85 0 0 / 0.0118);
--scale-bronze-a2: rgb(204 51 0 / 0.0392);
--scale-bronze-a3: rgb(146 36 0 / 0.0824);
--scale-bronze-a4: rgb(128 40 0 / 0.1255);
--scale-bronze-a5: rgb(116 35 0 / 0.1725);
--scale-bronze-a6: rgb(114 35 0 / 0.2275);
--scale-bronze-a7: rgb(107 30 0 / 0.298);
--scale-bronze-a8: rgb(103 28 0 / 0.4);
--scale-bronze-a9: rgb(85 25 0 / 0.5529);
--scale-bronze-a10: rgb(76 20 0 / 0.5922);
--scale-bronze-a11: rgb(61 15 0 / 0.6706);
--scale-bronze-a12: rgb(29 6 0 / 0.8314);
--scale-gold-1: #fefdfb;
--scale-gold-2: #fcfcec;
--scale-gold-3: #f9f9ca;
--scale-gold-4: #f6f1a9;
--scale-gold-5: #efe98a;
--scale-gold-6: #e8da83;
--scale-gold-7: #dec571;
--scale-gold-8: #d6a94a;
--scale-gold-9: #d4af37;
--scale-gold-10: #f0c142;
--scale-gold-11: #a16a19;
--scale-gold-12: #4c3623;
--scale-gold-a1: rgb(191 128 0 / 0.0157);
--scale-gold-a2: rgb(215 215 0 / 0.0745);
--scale-gold-a3: rgb(226 226 0 / 0.2078);
--scale-gold-a4: rgb(228 213 0 / 0.3373);
--scale-gold-a5: rgb(220 207 0 / 0.4588);
--scale-gold-a6: rgb(208 179 0 / 0.4863);
--scale-gold-a7: rgb(196 151 0 / 0.5569);
--scale-gold-a8: rgb(197 134 0 / 0.7098);
--scale-gold-a9: rgb(200 153 0 / 0.7843);
--scale-gold-a10: rgb(235 171 0 / 0.7412);
--scale-gold-a11: rgb(151 90 0 / 0.902);
--scale-gold-a12: rgb(48 22 0 / 0.8627);
--scale-bronze-1: #fdfcfb;
--scale-bronze-2: #fbf8f0;
--scale-bronze-3: #f6f2de;
--scale-bronze-4: #f0e4c3;
--scale-bronze-5: #ebd8ad;
--scale-bronze-6: #e7cb98;
--scale-bronze-7: #ddb987;
--scale-bronze-8: #d1a36b;
--scale-bronze-9: #cd7f32;
--scale-bronze-10: #ce7c30;
--scale-bronze-11: #af6826;
--scale-bronze-12: #4d3421;
--scale-bronze-a1: rgb(128 64 0 / 0.0157);
--scale-bronze-a2: rgb(187 136 0 / 0.0588);
--scale-bronze-a3: rgb(185 155 0 / 0.1294);
--scale-bronze-a4: rgb(191 140 0 / 0.2353);
--scale-bronze-a5: rgb(193 134 0 / 0.3216);
--scale-bronze-a6: rgb(196 126 0 / 0.4039);
--scale-bronze-a7: rgb(183 106 0 / 0.4706);
--scale-bronze-a8: rgb(176 96 0 / 0.5804);
--scale-bronze-a9: rgb(193 96 0 / 0.8039);
--scale-bronze-a10: rgb(195 94 0 / 0.8118);
--scale-bronze-a11: rgb(161 78 0 / 0.851);
--scale-bronze-a12: rgb(51 22 0 / 0.8706);
--primitive-primary-1: var(--scale-purple-1);
--primitive-primary-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3);
@ -6707,54 +6707,54 @@
--scale-lime-a10: rgb(212 255 112 / 1);
--scale-lime-a11: rgb(210 255 120 / 0.898);
--scale-lime-a12: rgb(234 255 192 / 0.9686);
--scale-gold-1: #121211;
--scale-gold-2: #1b1a17;
--scale-gold-3: #24231f;
--scale-gold-4: #2d2b26;
--scale-gold-5: #38352e;
--scale-gold-6: #444039;
--scale-gold-7: #544f46;
--scale-gold-8: #696256;
--scale-gold-9: #978365;
--scale-gold-10: #a39073;
--scale-gold-11: #cbb99f;
--scale-gold-12: #e8e2d9;
--scale-gold-a1: rgb(255 255 241 / 0.0706);
--scale-gold-a2: rgb(255 246 217 / 0.1059);
--scale-gold-a3: rgb(255 248 220 / 0.1412);
--scale-gold-a4: rgb(255 244 215 / 0.1765);
--scale-gold-a5: rgb(255 241 209 / 0.2196);
--scale-gold-a6: rgb(255 240 214 / 0.2667);
--scale-gold-a7: rgb(255 240 213 / 0.3294);
--scale-gold-a8: rgb(255 238 209 / 0.4118);
--scale-gold-a9: rgb(255 221 171 / 0.5922);
--scale-gold-a10: rgb(255 225 180 / 0.6392);
--scale-gold-a11: rgb(255 232 200 / 0.7961);
--scale-gold-a12: rgb(255 248 239 / 0.9098);
--scale-bronze-1: #141110;
--scale-bronze-2: #1c1917;
--scale-bronze-3: #262220;
--scale-bronze-4: #302a27;
--scale-bronze-5: #3b3330;
--scale-bronze-6: #493e3a;
--scale-bronze-7: #5a4c47;
--scale-bronze-8: #6f5f58;
--scale-bronze-9: #a18072;
--scale-bronze-10: #ae8c7e;
--scale-bronze-11: #d4b3a5;
--scale-bronze-12: #ede0d9;
--scale-bronze-a1: rgb(255 217 204 / 0.0784);
--scale-bronze-a2: rgb(255 228 209 / 0.1098);
--scale-bronze-a3: rgb(255 228 215 / 0.149);
--scale-bronze-a4: rgb(255 223 207 / 0.1882);
--scale-bronze-a5: rgb(255 220 207 / 0.2314);
--scale-bronze-a6: rgb(255 217 203 / 0.2863);
--scale-bronze-a7: rgb(255 215 201 / 0.3529);
--scale-bronze-a8: rgb(255 218 202 / 0.4353);
--scale-bronze-a9: rgb(255 203 181 / 0.6314);
--scale-bronze-a10: rgb(255 205 185 / 0.6824);
--scale-bronze-a11: rgb(255 215 198 / 0.8314);
--scale-bronze-a12: rgb(255 241 233 / 0.9294);
--scale-gold-1: #15120d;
--scale-gold-2: #1c1810;
--scale-gold-3: #2d210c;
--scale-gold-4: #3b2906;
--scale-gold-5: #483308;
--scale-gold-6: #564011;
--scale-gold-7: #6b5222;
--scale-gold-8: #87682e;
--scale-gold-9: #d4af37;
--scale-gold-10: #efdc4c;
--scale-gold-11: #efd049;
--scale-gold-12: #f8e9ba;
--scale-gold-a1: rgb(255 219 158 / 0.0824);
--scale-gold-a2: rgb(255 219 146 / 0.1098);
--scale-gold-a3: rgb(255 187 68 / 0.1765);
--scale-gold-a4: rgb(255 177 26 / 0.2314);
--scale-gold-a5: rgb(255 181 28 / 0.2824);
--scale-gold-a6: rgb(255 190 50 / 0.3373);
--scale-gold-a7: rgb(255 195 81 / 0.4196);
--scale-gold-a8: rgb(255 196 87 / 0.5294);
--scale-gold-a9: rgb(255 210 66 / 0.8314);
--scale-gold-a10: rgb(255 235 81 / 0.9373);
--scale-gold-a11: rgb(255 222 78 / 0.9373);
--scale-gold-a12: rgb(255 240 191 / 0.9725);
--scale-bronze-1: #15130f;
--scale-bronze-2: #1b1711;
--scale-bronze-3: #2c2212;
--scale-bronze-4: #3b280d;
--scale-bronze-5: #493111;
--scale-bronze-6: #583e1d;
--scale-bronze-7: #6e4f2c;
--scale-bronze-8: #8e653a;
--scale-bronze-9: #cd7f32;
--scale-bronze-10: #dd9849;
--scale-bronze-11: #e1b071;
--scale-bronze-12: #f2e4cc;
--scale-bronze-a1: rgb(255 231 182 / 0.0824);
--scale-bronze-a2: rgb(255 217 161 / 0.1059);
--scale-bronze-a3: rgb(255 197 104 / 0.1725);
--scale-bronze-a4: rgb(255 173 56 / 0.2314);
--scale-bronze-a5: rgb(255 171 59 / 0.2863);
--scale-bronze-a6: rgb(255 180 84 / 0.3451);
--scale-bronze-a7: rgb(255 183 102 / 0.4314);
--scale-bronze-a8: rgb(255 181 104 / 0.5569);
--scale-bronze-a9: rgb(255 158 62 / 0.8039);
--scale-bronze-a10: rgb(255 175 84 / 0.8667);
--scale-bronze-a11: rgb(255 199 128 / 0.8824);
--scale-bronze-a12: rgb(255 240 215 / 0.949);
--primitive-primary-1: var(--scale-purple-1);
--primitive-primary-2: var(--scale-purple-2);
--primitive-primary-3: var(--scale-purple-3);

14
src/uix/eidos/lib/themes/radix-scales.ts
Unescape View File

@ -8,6 +8,12 @@
* jade, grass, brown, sky, mint, lime
* - 2 metales : gold, bronze
*
* EXCEPCIÓN: gold + bronze NO son los de Radix. Los de Radix eran casi idénticos
* entre sí (croma ~0.05, indistinguibles en UI). Re-autorados con `uix.color`
* (`generateScale` desde semillas metálicas) más saturados y separados:
* gold #d4af37 (amarillo-dorado, H91) · bronze #cd7f32 (cobre, H61), croma ~0.13.
* El resto siguen siendo valores Radix v3 exactos.
*
* Mapeo funcional de 12 pasos (Radix-style): 1-2 fondos · 3-5 fondos de
* componente · 6-8 bordes · 9 sólido · 10 sólido-hover · 11-12 texto.
*/
@ -42,8 +48,8 @@ export const RADIX_EXTRA_LIGHT_SCALES: ColorScales = {
sky: s('#f9feff','#f1fafd','#e1f6fd','#d1f0fa','#bee7f5','#a9daed','#8dcae3','#60b3d7','#7ce2fe','#74daf8','#00749e','#1d3e56'),
mint: s('#f9fefd','#f2fbf9','#ddf9f2','#c8f4e9','#b3ecde','#9ce0d0','#7ecfbd','#4cbba5','#86ead4','#7de0cb','#027864','#16433c'),
lime: s('#fcfdfa','#f8faf3','#eef6d6','#e2f0bd','#d3e7a6','#c2da91','#abc978','#8db654','#bdee63','#b0e64c','#5c7c2f','#37401c'),
gold: s('#fdfdfc','#faf9f2','#f2f0e7','#eae6db','#e1dccf','#d8d0bf','#cbc0aa','#b9a88d','#978365','#8c7a5e','#71624b','#3b352b'),
bronze: s('#fdfcfc','#fdf7f5','#f6edea','#efe4df','#e7d9d3','#dfcdc5','#d3bcb3','#c2a499','#a18072','#957468','#7d5e54','#43302b')
gold: s('#fefdfb','#fcfcec','#f9f9ca','#f6f1a9','#efe98a','#e8da83','#dec571','#d6a94a','#d4af37','#f0c142','#a16a19','#4c3623'),
bronze: s('#fdfcfb','#fbf8f0','#f6f2de','#f0e4c3','#ebd8ad','#e7cb98','#ddb987','#d1a36b','#cd7f32','#ce7c30','#af6826','#4d3421')
}
// ── Modo oscuro ───────────────────────────────────────────────────────
@ -66,6 +72,6 @@ export const RADIX_EXTRA_DARK_SCALES: ColorScales = {
sky: s('#0d141f','#111a27','#112840','#113555','#154467','#1b537b','#1f6692','#197cae','#7ce2fe','#a8eeff','#75c7f0','#c2f3ff'),
mint: s('#0e1515','#0f1b1b','#092c2b','#003a38','#004744','#105650','#1e685f','#277f70','#86ead4','#a8f5e5','#58d5ba','#c4f5e1'),
lime: s('#11130c','#151a10','#1f2917','#29371d','#334423','#3d522a','#496231','#577538','#bdee63','#d4ff70','#bde56c','#e3f7ba'),
gold: s('#121211','#1b1a17','#24231f','#2d2b26','#38352e','#444039','#544f46','#696256','#978365','#a39073','#cbb99f','#e8e2d9'),
bronze: s('#141110','#1c1917','#262220','#302a27','#3b3330','#493e3a','#5a4c47','#6f5f58','#a18072','#ae8c7e','#d4b3a5','#ede0d9')
gold: s('#15120d','#1c1810','#2d210c','#3b2906','#483308','#564011','#6b5222','#87682e','#d4af37','#efdc4c','#efd049','#f8e9ba'),
bronze: s('#15130f','#1b1711','#2c2212','#3b280d','#493111','#583e1d','#6e4f2c','#8e653a','#cd7f32','#dd9849','#e1b071','#f2e4cc')
}

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.