/* nilam — GENERATED. Do not hand-edit; change the hue and re-solve. * * npx nilam 285 --css=nilam.tokens.css * * brand hue 285 (नीलम, sapphire) · semantics {"danger":22,"warn":68,"ok":142} * * Every lightness here was found by inverting a contrast requirement, not chosen. The * semantic hues were chosen to maximise the smallest pairwise separation across normal * vision, protanopia, deuteranopia and tritanopia. * 1096 assertions hold over these exact * values; edit one by hand and none of them do. * * Role model (Radix's — it is good design and there was no reason to reinvent it): * 1 page 7 border normal (WCAG 1.4.11, 3:1) * 2 subtle page 8 border hover * 3 component rest 9 solid (the brand moment) * 4 component hover 10 solid hover * 5 component active 11 text low (WCAG 1.4.3, 4.5:1) * 6 border subtle 12 text high (7:1) * * STEP 9 DIFFERS BY MODE, deliberately. A filled button inverts the polarity of the * page it sits on: a dark object with light text on a light page, a light object with * dark text on a dark one. So always pair it with ---ink and never a literal * white. In dark mode step 9 is the GLOW — L 0.66, the lightness Zima Blue and the * Telepathy accent both happen to share. * * THEMING. color-scheme drives everything, so: * follows the OS * forced dark * forced light *
just that subtree, tokens and all */ @layer nilam.motion, nilam.tokens, nilam.base, nilam.components, nilam.utilities; @layer nilam.tokens { :root { /* Both keywords, so an unstyled page follows the OS. The classes below narrow it. */ color-scheme: light dark; /* neutral */ --neutral-1: light-dark(oklch(0.9800 0.0070 285.0), oklch(0.1750 0.0070 285.0)); --neutral-2: light-dark(oklch(0.9617 0.0070 285.0), oklch(0.2120 0.0070 285.0)); --neutral-3: light-dark(oklch(0.9387 0.0070 285.0), oklch(0.2455 0.0070 285.0)); --neutral-4: light-dark(oklch(0.9190 0.0070 285.0), oklch(0.2730 0.0070 285.0)); --neutral-5: light-dark(oklch(0.8981 0.0070 285.0), oklch(0.2979 0.0070 285.0)); --neutral-6: light-dark(oklch(0.8385 0.0070 285.0), oklch(0.3298 0.0070 285.0)); --neutral-7: light-dark(oklch(0.6195 0.0070 285.0), oklch(0.5286 0.0070 285.0)); --neutral-8: light-dark(oklch(0.5417 0.0070 285.0), oklch(0.6057 0.0070 285.0)); --neutral-9: light-dark(oklch(0.5650 0.0070 285.0), oklch(0.6600 0.0070 285.0)); --neutral-10: light-dark(oklch(0.5256 0.0070 285.0), oklch(0.7035 0.0070 285.0)); --neutral-11: light-dark(oklch(0.5228 0.0070 285.0), oklch(0.6257 0.0070 285.0)); --neutral-12: light-dark(oklch(0.4191 0.0070 285.0), oklch(0.7430 0.0070 285.0)); --neutral-ink: light-dark(oklch(1.0000 0.0000 285.0), oklch(0.1600 0.0000 285.0)); --surface: light-dark(oklch(1.0000 0.0000 285.0), oklch(0.2455 0.0000 285.0)); --ink-max: light-dark(oklch(0.1600 0.0000 285.0), oklch(1.0000 0.0000 285.0)); --void: light-dark(oklch(0.9000 0.0070 285.0), oklch(0.1000 0.0070 285.0)); /* brand */ --brand-1: light-dark(oklch(0.9800 0.0010 285.0), oklch(0.1750 0.0103 285.0)); --brand-2: light-dark(oklch(0.9618 0.0030 285.0), oklch(0.2126 0.0200 285.0)); --brand-3: light-dark(oklch(0.9390 0.0079 285.0), oklch(0.2474 0.0377 285.0)); --brand-4: light-dark(oklch(0.9195 0.0137 285.0), oklch(0.2764 0.0550 285.0)); --brand-5: light-dark(oklch(0.8991 0.0214 285.0), oklch(0.3031 0.0745 285.0)); --brand-6: light-dark(oklch(0.8403 0.0379 285.0), oklch(0.3365 0.0906 285.0)); --brand-7: light-dark(oklch(0.6271 0.1155 285.0), oklch(0.5399 0.1474 285.0)); --brand-8: light-dark(oklch(0.5558 0.1698 285.0), oklch(0.6159 0.1434 285.0)); --brand-9: light-dark(oklch(0.5850 0.2186 285.0), oklch(0.6600 0.1739 285.0)); --brand-10: light-dark(oklch(0.5502 0.2402 285.0), oklch(0.7002 0.1508 285.0)); --brand-11: light-dark(oklch(0.5369 0.1675 285.0), oklch(0.6341 0.1274 285.0)); --brand-12: light-dark(oklch(0.4263 0.0997 285.0), oklch(0.7455 0.0547 285.0)); --brand-ink: light-dark(oklch(1.0000 0.0000 285.0), oklch(0.1600 0.0000 285.0)); /* danger */ --danger-1: light-dark(oklch(0.9800 0.0010 22.0), oklch(0.1750 0.0072 22.0)); --danger-2: light-dark(oklch(0.9620 0.0030 22.0), oklch(0.2129 0.0138 22.0)); --danger-3: light-dark(oklch(0.9395 0.0079 22.0), oklch(0.2479 0.0261 22.0)); --danger-4: light-dark(oklch(0.9204 0.0138 22.0), oklch(0.2768 0.0381 22.0)); --danger-5: light-dark(oklch(0.9005 0.0217 22.0), oklch(0.3034 0.0515 22.0)); --danger-6: light-dark(oklch(0.8429 0.0396 22.0), oklch(0.3366 0.0625 22.0)); --danger-7: light-dark(oklch(0.6357 0.1377 22.0), oklch(0.5424 0.1203 22.0)); --danger-8: light-dark(oklch(0.5594 0.1488 22.0), oklch(0.6253 0.1663 22.0)); --danger-9: light-dark(oklch(0.5925 0.2197 22.0), oklch(0.6600 0.2088 22.0)); --danger-10: light-dark(oklch(0.5512 0.2044 22.0), oklch(0.6984 0.1771 22.0)); --danger-11: light-dark(oklch(0.5388 0.1346 22.0), oklch(0.6432 0.1506 22.0)); --danger-12: light-dark(oklch(0.4270 0.0689 22.0), oklch(0.7494 0.0605 22.0)); --danger-ink: light-dark(oklch(1.0000 0.0000 22.0), oklch(0.1600 0.0000 22.0)); /* warn */ --warn-1: light-dark(oklch(0.9800 0.0014 68.0), oklch(0.1750 0.0039 68.0)); --warn-2: light-dark(oklch(0.9618 0.0043 68.0), oklch(0.2121 0.0076 68.0)); --warn-3: light-dark(oklch(0.9391 0.0113 68.0), oklch(0.2459 0.0142 68.0)); --warn-4: light-dark(oklch(0.9196 0.0197 68.0), oklch(0.2736 0.0206 68.0)); --warn-5: light-dark(oklch(0.8993 0.0309 68.0), oklch(0.2989 0.0277 68.0)); --warn-6: light-dark(oklch(0.8408 0.0557 68.0), oklch(0.3311 0.0336 68.0)); --warn-7: light-dark(oklch(0.6229 0.0752 68.0), oklch(0.5314 0.0642 68.0)); --warn-8: light-dark(oklch(0.5455 0.0791 68.0), oklch(0.6099 0.0884 68.0)); --warn-9: light-dark(oklch(0.6575 0.1328 68.0), oklch(0.6600 0.1333 68.0)); --warn-10: light-dark(oklch(0.6153 0.1243 68.0), oklch(0.7038 0.1421 68.0)); --warn-11: light-dark(oklch(0.5262 0.0717 68.0), oklch(0.6296 0.0857 68.0)); --warn-12: light-dark(oklch(0.4206 0.0370 68.0), oklch(0.7457 0.0655 68.0)); --warn-ink: light-dark(oklch(0.1600 0.0000 68.0), oklch(0.1600 0.0000 68.0)); /* ok */ --ok-1: light-dark(oklch(0.9800 0.0035 142.0), oklch(0.1750 0.0060 142.0)); --ok-2: light-dark(oklch(0.9609 0.0114 142.0), oklch(0.2111 0.0115 142.0)); --ok-3: light-dark(oklch(0.9357 0.0319 142.0), oklch(0.2435 0.0215 142.0)); --ok-4: light-dark(oklch(0.9131 0.0590 142.0), oklch(0.2700 0.0311 142.0)); --ok-5: light-dark(oklch(0.8882 0.0992 142.0), oklch(0.2938 0.0417 142.0)); --ok-6: light-dark(oklch(0.8259 0.1278 142.0), oklch(0.3248 0.0505 142.0)); --ok-7: light-dark(oklch(0.6084 0.1126 142.0), oklch(0.5191 0.0961 142.0)); --ok-8: light-dark(oklch(0.5303 0.1178 142.0), oklch(0.5929 0.1317 142.0)); --ok-9: light-dark(oklch(0.6300 0.1951 142.0), oklch(0.6600 0.2044 142.0)); --ok-10: light-dark(oklch(0.5895 0.1826 142.0), oklch(0.7030 0.2177 142.0)); --ok-11: light-dark(oklch(0.5124 0.1070 142.0), oklch(0.6131 0.1280 142.0)); --ok-12: light-dark(oklch(0.4135 0.0558 142.0), oklch(0.7331 0.0987 142.0)); --ok-ink: light-dark(oklch(0.1600 0.0000 142.0), oklch(0.1600 0.0000 142.0)); /* info */ --info-1: light-dark(oklch(0.9800 0.0070 285.0), oklch(0.1750 0.0070 285.0)); --info-2: light-dark(oklch(0.9617 0.0070 285.0), oklch(0.2120 0.0070 285.0)); --info-3: light-dark(oklch(0.9387 0.0070 285.0), oklch(0.2455 0.0070 285.0)); --info-4: light-dark(oklch(0.9190 0.0070 285.0), oklch(0.2730 0.0070 285.0)); --info-5: light-dark(oklch(0.8981 0.0070 285.0), oklch(0.2979 0.0070 285.0)); --info-6: light-dark(oklch(0.8385 0.0070 285.0), oklch(0.3298 0.0070 285.0)); --info-7: light-dark(oklch(0.6195 0.0070 285.0), oklch(0.5286 0.0070 285.0)); --info-8: light-dark(oklch(0.5417 0.0070 285.0), oklch(0.6057 0.0070 285.0)); --info-9: light-dark(oklch(0.5650 0.0070 285.0), oklch(0.6600 0.0070 285.0)); --info-10: light-dark(oklch(0.5256 0.0070 285.0), oklch(0.7035 0.0070 285.0)); --info-11: light-dark(oklch(0.5228 0.0070 285.0), oklch(0.6257 0.0070 285.0)); --info-12: light-dark(oklch(0.4191 0.0070 285.0), oklch(0.7430 0.0070 285.0)); --info-ink: light-dark(oklch(1.0000 0.0000 285.0), oklch(0.1600 0.0000 285.0)); } /* Forcing a mode is one declaration, not a second copy of the palette. These work on any element, which is what makes a dark island on a light page free. */ .light, [data-theme='light'] { color-scheme: light; } .dark, [data-theme='dark'] { color-scheme: dark; } } /* Wide gamut. A separately solved and separately proven palette — see src/css.mjs. */ @media (color-gamut: p3) { @layer nilam.tokens { :root { /* neutral */ --neutral-1: light-dark(color(display-p3 0.9714 0.97185 0.99076), color(display-p3 0.06296 0.06311 0.07538)); --neutral-2: light-dark(color(display-p3 0.9475 0.94795 0.96676), color(display-p3 0.0952 0.09539 0.10827)); --neutral-3: light-dark(color(display-p3 0.91755 0.918 0.9367), color(display-p3 0.12571 0.12593 0.13929)); --neutral-4: light-dark(color(display-p3 0.89198 0.89242 0.91102), color(display-p3 0.15153 0.15176 0.16548)); --neutral-5: light-dark(color(display-p3 0.86516 0.86559 0.88409), color(display-p3 0.17552 0.17578 0.1898)); --neutral-6: light-dark(color(display-p3 0.78933 0.78975 0.80793), color(display-p3 0.20693 0.2072 0.22159)); --neutral-7: light-dark(color(display-p3 0.52275 0.52312 0.53998), color(display-p3 0.41857 0.41893 0.43512)); --neutral-8: light-dark(color(display-p3 0.4333 0.43366 0.44995), color(display-p3 0.50674 0.50711 0.52387)); --neutral-9: light-dark(color(display-p3 0.4598 0.46017 0.47663), color(display-p3 0.57053 0.57092 0.58804)); --neutral-10: light-dark(color(display-p3 0.41523 0.41558 0.43175), color(display-p3 0.62267 0.62307 0.64046)); --neutral-11: light-dark(color(display-p3 0.41202 0.41237 0.42852), color(display-p3 0.53001 0.53039 0.54729)); --neutral-12: light-dark(color(display-p3 0.29889 0.29921 0.31449), color(display-p3 0.67061 0.67101 0.68865)); --neutral-ink: light-dark(color(display-p3 1 1 1), color(display-p3 0.05176 0.05176 0.05176)); --surface: light-dark(color(display-p3 1 1 1), color(display-p3 0.1273 0.1273 0.1273)); --ink-max: light-dark(color(display-p3 0.05176 0.05176 0.05176), color(display-p3 1 1 1)); --void: light-dark(color(display-p3 0.86758 0.86802 0.88652), color(display-p3 0.01228 0.01229 0.01842)); /* brand */ --brand-1: light-dark(color(display-p3 0.97334 0.97341 0.97634), color(display-p3 0.06226 0.06235 0.08082)); --brand-2: light-dark(color(display-p3 0.94882 0.94905 0.95798), color(display-p3 0.09308 0.09275 0.13036)); --brand-3: light-dark(color(display-p3 0.91746 0.91799 0.94119), color(display-p3 0.12128 0.11881 0.19317)); --brand-4: light-dark(color(display-p3 0.89024 0.89107 0.93113), color(display-p3 0.14527 0.13916 0.25187)); --brand-5: light-dark(color(display-p3 0.86134 0.86241 0.92451), color(display-p3 0.16777 0.15565 0.31394)); --brand-6: light-dark(color(display-p3 0.78141 0.78237 0.89023), color(display-p3 0.19787 0.18029 0.37928)); --brand-7: light-dark(color(display-p3 0.50404 0.48813 0.79427), color(display-p3 0.40139 0.36417 0.74846)); --brand-8: light-dark(color(display-p3 0.41641 0.36442 0.81633), color(display-p3 0.48641 0.45722 0.84035)); --brand-9: light-dark(color(display-p3 0.44545 0.34988 0.95961), color(display-p3 0.5305 0.48541 0.96659)); --brand-10: light-dark(color(display-p3 0.40856 0.27129 0.95627), color(display-p3 0.5805 0.55172 0.9704)); --brand-11: light-dark(color(display-p3 0.39611 0.34361 0.78624), color(display-p3 0.50987 0.4894 0.82959)); --brand-12: light-dark(color(display-p3 0.28694 0.27069 0.50042), color(display-p3 0.65901 0.65864 0.80862)); --brand-ink: light-dark(color(display-p3 1 1 1), color(display-p3 0.05176 0.05176 0.05176)); /* danger */ --danger-1: light-dark(color(display-p3 0.97636 0.97269 0.97233), color(display-p3 0.075 0.06008 0.05873)); --danger-2: light-dark(color(display-p3 0.95831 0.94709 0.94598), color(display-p3 0.11869 0.08859 0.08607)); --danger-3: light-dark(color(display-p3 0.94223 0.91305 0.91021), color(display-p3 0.16978 0.11113 0.10695)); --danger-4: light-dark(color(display-p3 0.93298 0.88252 0.87769), color(display-p3 0.21588 0.12803 0.12277)); --danger-5: light-dark(color(display-p3 0.92733 0.84899 0.84168), color(display-p3 0.26265 0.14076 0.13501)); --danger-6: light-dark(color(display-p3 0.89619 0.75765 0.74563), color(display-p3 0.3144 0.16209 0.15597)); --danger-7: light-dark(color(display-p3 0.80083 0.39429 0.38507), color(display-p3 0.64634 0.31313 0.30558)); --danger-8: light-dark(color(display-p3 0.71208 0.28842 0.2898), color(display-p3 0.82642 0.33966 0.34124)); --danger-9: light-dark(color(display-p3 0.85903 0.15014 0.22908), color(display-p3 0.97066 0.21961 0.2843)); --danger-10: light-dark(color(display-p3 0.78004 0.13232 0.20449), color(display-p3 0.97346 0.36379 0.37539)); --danger-11: light-dark(color(display-p3 0.6637 0.28707 0.2845), color(display-p3 0.84403 0.37299 0.36976)); --danger-12: light-dark(color(display-p3 0.42646 0.24902 0.24004), color(display-p3 0.82164 0.61981 0.60447)); --danger-ink: light-dark(color(display-p3 1 1 1), color(display-p3 0.05176 0.05176 0.05176)); /* warn */ --warn-1: light-dark(color(display-p3 0.97635 0.97318 0.96943), color(display-p3 0.06881 0.06349 0.0572)); --warn-2: light-dark(color(display-p3 0.95808 0.94835 0.93686), color(display-p3 0.10563 0.09492 0.08226)); --warn-3: light-dark(color(display-p3 0.94155 0.91613 0.8861), color(display-p3 0.14459 0.12373 0.09899)); --warn-4: light-dark(color(display-p3 0.93183 0.8877 0.83553), color(display-p3 0.17886 0.14768 0.11056)); --warn-5: light-dark(color(display-p3 0.92568 0.85682 0.77536), color(display-p3 0.21244 0.16937 0.1178)); --warn-6: light-dark(color(display-p3 0.89316 0.77097 0.62561), color(display-p3 0.25236 0.19875 0.13432)); --warn-7: light-dark(color(display-p3 0.63931 0.49797 0.32618), color(display-p3 0.5143 0.39837 0.25746)); --warn-8: light-dark(color(display-p3 0.55088 0.40628 0.22661), color(display-p3 0.64154 0.47534 0.26884)); --warn-9: light-dark(color(display-p3 0.75927 0.5011 0.12971), color(display-p3 0.76314 0.50374 0.1306)); --warn-10: light-dark(color(display-p3 0.69449 0.45683 0.11491), color(display-p3 0.83155 0.55048 0.14621)); --warn-11: light-dark(color(display-p3 0.51804 0.38849 0.22899), color(display-p3 0.66217 0.50009 0.30057)); --warn-12: light-dark(color(display-p3 0.35225 0.28967 0.21489), color(display-p3 0.778 0.6502 0.49747)); --warn-ink: light-dark(color(display-p3 0.05176 0.05176 0.05176), color(display-p3 0.05176 0.05176 0.05176)); /* ok */ --ok-1: light-dark(color(display-p3 0.96985 0.9764 0.96794), color(display-p3 0.05975 0.06756 0.05747)); --ok-2: light-dark(color(display-p3 0.93607 0.95725 0.9299), color(display-p3 0.08644 0.10204 0.08189)); --ok-3: light-dark(color(display-p3 0.88007 0.93933 0.86281), color(display-p3 0.10658 0.13672 0.09777)); --ok-4: light-dark(color(display-p3 0.81916 0.92885 0.78717), color(display-p3 0.12176 0.16657 0.10863)); --ok-5: light-dark(color(display-p3 0.73761 0.92276 0.68341), color(display-p3 0.13335 0.19499 0.1152)); --ok-6: light-dark(color(display-p3 0.61597 0.86085 0.54364), color(display-p3 0.15376 0.23034 0.13113)); --ok-7: light-dark(color(display-p3 0.37838 0.57971 0.31823), color(display-p3 0.30033 0.4655 0.25099)); --ok-8: light-dark(color(display-p3 0.28282 0.48894 0.21966), color(display-p3 0.33346 0.57036 0.26087)); --ok-9: light-dark(color(display-p3 0.26855 0.64501 0.12344), color(display-p3 0.28966 0.69061 0.13515)); --ok-10: light-dark(color(display-p3 0.24275 0.5893 0.10914), color(display-p3 0.31798 0.75178 0.15084)); --ok-11: light-dark(color(display-p3 0.27831 0.46287 0.22239), color(display-p3 0.36226 0.59314 0.2923)); --ok-12: light-dark(color(display-p3 0.23714 0.32669 0.21081), color(display-p3 0.54275 0.7256 0.48899)); --ok-ink: light-dark(color(display-p3 0.05176 0.05176 0.05176), color(display-p3 0.05176 0.05176 0.05176)); /* info */ --info-1: light-dark(color(display-p3 0.9714 0.97185 0.99076), color(display-p3 0.06296 0.06311 0.07538)); --info-2: light-dark(color(display-p3 0.9475 0.94795 0.96676), color(display-p3 0.0952 0.09539 0.10827)); --info-3: light-dark(color(display-p3 0.91755 0.918 0.9367), color(display-p3 0.12571 0.12593 0.13929)); --info-4: light-dark(color(display-p3 0.89198 0.89242 0.91102), color(display-p3 0.15153 0.15176 0.16548)); --info-5: light-dark(color(display-p3 0.86516 0.86559 0.88409), color(display-p3 0.17552 0.17578 0.1898)); --info-6: light-dark(color(display-p3 0.78933 0.78975 0.80793), color(display-p3 0.20693 0.2072 0.22159)); --info-7: light-dark(color(display-p3 0.52275 0.52312 0.53998), color(display-p3 0.41857 0.41893 0.43512)); --info-8: light-dark(color(display-p3 0.4333 0.43366 0.44995), color(display-p3 0.50674 0.50711 0.52387)); --info-9: light-dark(color(display-p3 0.4598 0.46017 0.47663), color(display-p3 0.57053 0.57092 0.58804)); --info-10: light-dark(color(display-p3 0.41523 0.41558 0.43175), color(display-p3 0.62267 0.62307 0.64046)); --info-11: light-dark(color(display-p3 0.41202 0.41237 0.42852), color(display-p3 0.53001 0.53039 0.54729)); --info-12: light-dark(color(display-p3 0.29889 0.29921 0.31449), color(display-p3 0.67061 0.67101 0.68865)); --info-ink: light-dark(color(display-p3 1 1 1), color(display-p3 0.05176 0.05176 0.05176)); } } }