CSS: primitives
.instui-bg-primitive-color-white — Opt-in utility classes for the raw primitive palette: .instui-bg-/fg-/border-primitive-color-<name> paint a colour from the primitive colour tokens, plus font-family/font-weight utilities for the primitive font tokens. Kept out of the semantic utilities so overrides there stay semantic-only.
Group: Plugins · Source: generate.ts
Usage
css
@import "@pantoken/plugin-primitives/primitives.css";Examples
html
<div class="instui-bg-primitive-color-white instui-fg-primitive-color-aurora-aurora70">Primitive-painted box.</div>Primitive-painted box.
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-primitive-color-aurora-aurora10 | <color> | #D8FCEB |
--instui-primitive-color-aurora-aurora100 | <color> | #048660 |
--instui-primitive-color-aurora-aurora110 | <color> | #057C58 |
--instui-primitive-color-aurora-aurora120 | <color> | #007352 |
--instui-primitive-color-aurora-aurora130 | <color> | #026648 |
--instui-primitive-color-aurora-aurora140 | <color> | #035A40 |
--instui-primitive-color-aurora-aurora150 | <color> | #014B34 |
--instui-primitive-color-aurora-aurora160 | <color> | #01442F |
--instui-primitive-color-aurora-aurora170 | <color> | #033B29 |
--instui-primitive-color-aurora-aurora180 | <color> | #0D271D |
--instui-primitive-color-aurora-aurora190 | <color> | #051F15 |
--instui-primitive-color-aurora-aurora20 | <color> | #C8F3DF |
--instui-primitive-color-aurora-aurora200 | <color> | #00190F |
--instui-primitive-color-aurora-aurora30 | <color> | #B2EED3 |
--instui-primitive-color-aurora-aurora40 | <color> | #58E1AD |
--instui-primitive-color-aurora-aurora50 | <color> | #2BC692 |
--instui-primitive-color-aurora-aurora60 | <color> | #0ABC88 |
--instui-primitive-color-aurora-aurora70 | <color> | #03A879 |
--instui-primitive-color-aurora-aurora80 | <color> | #06986E |
--instui-primitive-color-aurora-aurora90 | <color> | #019067 |
--instui-primitive-color-blue-blue10 | <color> | #EDF4FF |
--instui-primitive-color-blue-blue100 | <color> | #2B7ABC |
--instui-primitive-color-blue-blue110 | <color> | #2871AF |
--instui-primitive-color-blue-blue120 | <color> | #2369A4 |
--instui-primitive-color-blue-blue130 | <color> | #1E5C90 |
--instui-primitive-color-blue-blue140 | <color> | #1A5281 |
--instui-primitive-color-blue-blue150 | <color> | #14446D |
--instui-primitive-color-blue-blue160 | <color> | #123E62 |
--instui-primitive-color-blue-blue170 | <color> | #103656 |
--instui-primitive-color-blue-blue180 | <color> | #112335 |
--instui-primitive-color-blue-blue190 | <color> | #0A1C2D |
--instui-primitive-color-blue-blue20 | <color> | #DEEBFF |
--instui-primitive-color-blue-blue200 | <color> | #00142A |
--instui-primitive-color-blue-blue30 | <color> | #D0E3FF |
--instui-primitive-color-blue-blue40 | <color> | #ACCDF7 |
--instui-primitive-color-blue-blue50 | <color> | #7FB4F1 |
--instui-primitive-color-blue-blue60 | <color> | #6CAAEE |
--instui-primitive-color-blue-blue70 | <color> | #4798E3 |
--instui-primitive-color-blue-blue80 | <color> | #338CD7 |
--instui-primitive-color-blue-blue90 | <color> | #2D83CB |
--instui-primitive-color-green-green10 | <color> | #DBFCDF |
--instui-primitive-color-green-green100 | <color> | #03893D |
--instui-primitive-color-green-green110 | <color> | #037D37 |
--instui-primitive-color-green-green120 | <color> | #017533 |
--instui-primitive-color-green-green130 | <color> | #02672C |
--instui-primitive-color-green-green140 | <color> | #015B26 |
--instui-primitive-color-green-green150 | <color> | #004D1F |
--instui-primitive-color-green-green160 | <color> | #01451B |
--instui-primitive-color-green-green170 | <color> | #033C18 |
--instui-primitive-color-green-green180 | <color> | #0D2812 |
--instui-primitive-color-green-green190 | <color> | #051F09 |
--instui-primitive-color-green-green20 | <color> | #CAF4D0 |
--instui-primitive-color-green-green200 | <color> | #011A05 |
--instui-primitive-color-green-green30 | <color> | #B4EFBD |
--instui-primitive-color-green-green40 | <color> | #7EDD92 |
--instui-primitive-color-green-green50 | <color> | #61C378 |
--instui-primitive-color-green-green60 | <color> | #54B86D |
--instui-primitive-color-green-green70 | <color> | #3EA75B |
--instui-primitive-color-green-green80 | <color> | #2D984E |
--instui-primitive-color-green-green90 | <color> | #1E9045 |
--instui-primitive-color-grey-grey10 | <color> | #F2F4F5 |
--instui-primitive-color-grey-grey100 | <color> | #6A7883 |
--instui-primitive-color-grey-grey110 | <color> | #5F6E7A |
--instui-primitive-color-grey-grey120 | <color> | #576773 |
--instui-primitive-color-grey-grey130 | <color> | #4A5B68 |
--instui-primitive-color-grey-grey140 | <color> | #3F515E |
--instui-primitive-color-grey-grey150 | <color> | #334450 |
--instui-primitive-color-grey-grey160 | <color> | #2D3D49 |
--instui-primitive-color-grey-grey170 | <color> | #273540 |
--instui-primitive-color-grey-grey180 | <color> | #1C222B |
--instui-primitive-color-grey-grey190 | <color> | #171B21 |
--instui-primitive-color-grey-grey20 | <color> | #E8EAEC |
--instui-primitive-color-grey-grey200 | <color> | #10141A |
--instui-primitive-color-grey-grey30 | <color> | #DFE1E3 |
--instui-primitive-color-grey-grey40 | <color> | #C7CACD |
--instui-primitive-color-grey-grey50 | <color> | #AAB0B5 |
--instui-primitive-color-grey-grey60 | <color> | #9EA6AD |
--instui-primitive-color-grey-grey70 | <color> | #8D959F |
--instui-primitive-color-grey-grey80 | <color> | #7E8792 |
--instui-primitive-color-grey-grey90 | <color> | #737F8A |
--instui-primitive-color-grey-opacity10 | <color> | rgba(28,34,43,0.1) |
--instui-primitive-color-grey-opacity75 | <color> | rgba(28,34,43,0.75) |
--instui-primitive-color-honey-honey10 | <color> | #FCF2E4 |
--instui-primitive-color-honey-honey100 | <color> | #996E00 |
--instui-primitive-color-honey-honey110 | <color> | #8C6400 |
--instui-primitive-color-honey-honey120 | <color> | #855F02 |
--instui-primitive-color-honey-honey130 | <color> | #735200 |
--instui-primitive-color-honey-honey140 | <color> | #664800 |
--instui-primitive-color-honey-honey150 | <color> | #563D00 |
--instui-primitive-color-honey-honey160 | <color> | #4D3600 |
--instui-primitive-color-honey-honey170 | <color> | #432F01 |
--instui-primitive-color-honey-honey180 | <color> | #2A200C |
--instui-primitive-color-honey-honey190 | <color> | #221905 |
--instui-primitive-color-honey-honey20 | <color> | #F7E7CF |
--instui-primitive-color-honey-honey200 | <color> | #1C1200 |
--instui-primitive-color-honey-honey30 | <color> | #F8DDB2 |
--instui-primitive-color-honey-honey40 | <color> | #F0C16C |
--instui-primitive-color-honey-honey50 | <color> | #E0A300 |
--instui-primitive-color-honey-honey60 | <color> | #D39901 |
--instui-primitive-color-honey-honey70 | <color> | #BE8A01 |
--instui-primitive-color-honey-honey80 | <color> | #AC7C00 |
--instui-primitive-color-honey-honey90 | <color> | #A37600 |
--instui-primitive-color-navy-navy10 | <color> | #EEF4FD |
--instui-primitive-color-navy-navy100 | <color> | #4C79AA |
--instui-primitive-color-navy-navy110 | <color> | #44709F |
--instui-primitive-color-navy-navy120 | <color> | #3E6895 |
--instui-primitive-color-navy-navy130 | <color> | #345B84 |
--instui-primitive-color-navy-navy140 | <color> | #2E5177 |
--instui-primitive-color-navy-navy150 | <color> | #234465 |
--instui-primitive-color-navy-navy160 | <color> | #213D5B |
--instui-primitive-color-navy-navy170 | <color> | #1D354F |
--instui-primitive-color-navy-navy180 | <color> | #0D2338 |
--instui-primitive-color-navy-navy190 | <color> | #061C30 |
--instui-primitive-color-navy-navy20 | <color> | #E2EAF7 |
--instui-primitive-color-navy-navy200 | <color> | #00152A |
--instui-primitive-color-navy-navy30 | <color> | #D5E2F6 |
--instui-primitive-color-navy-navy40 | <color> | #B6CCEA |
--instui-primitive-color-navy-navy50 | <color> | #96B2D8 |
--instui-primitive-color-navy-navy60 | <color> | #86A8D5 |
--instui-primitive-color-navy-navy70 | <color> | #7097C7 |
--instui-primitive-color-navy-navy80 | <color> | #5F89BB |
--instui-primitive-color-navy-navy90 | <color> | #5581B3 |
--instui-primitive-color-navy-opacity10 | <color> | rgba(35,68,101,0.1) |
--instui-primitive-color-orange-orange10 | <color> | #FCF1ED |
--instui-primitive-color-orange-orange100 | <color> | #CF4A00 |
--instui-primitive-color-orange-orange110 | <color> | #BB4200 |
--instui-primitive-color-orange-orange120 | <color> | #B23F01 |
--instui-primitive-color-orange-orange130 | <color> | #9C3601 |
--instui-primitive-color-orange-orange140 | <color> | #8A2F00 |
--instui-primitive-color-orange-orange150 | <color> | #742700 |
--instui-primitive-color-orange-orange160 | <color> | #682400 |
--instui-primitive-color-orange-orange170 | <color> | #5A2002 |
--instui-primitive-color-orange-orange180 | <color> | #321B0B |
--instui-primitive-color-orange-orange190 | <color> | #2B1405 |
--instui-primitive-color-orange-orange20 | <color> | #FFE4D7 |
--instui-primitive-color-orange-orange200 | <color> | #230D00 |
--instui-primitive-color-orange-orange30 | <color> | #FBDACA |
--instui-primitive-color-orange-orange40 | <color> | #FDB998 |
--instui-primitive-color-orange-orange50 | <color> | #FF905A |
--instui-primitive-color-orange-orange60 | <color> | #FF7E40 |
--instui-primitive-color-orange-orange70 | <color> | #F16824 |
--instui-primitive-color-orange-orange80 | <color> | #E55300 |
--instui-primitive-color-orange-orange90 | <color> | #DA4E00 |
--instui-primitive-color-plum-plum10 | <color> | #FAF1F6 |
--instui-primitive-color-plum-plum100 | <color> | #C54396 |
--instui-primitive-color-plum-plum110 | <color> | #B43D89 |
--instui-primitive-color-plum-plum120 | <color> | #A83780 |
--instui-primitive-color-plum-plum130 | <color> | #953171 |
--instui-primitive-color-plum-plum140 | <color> | #852A64 |
--instui-primitive-color-plum-plum150 | <color> | #702254 |
--instui-primitive-color-plum-plum160 | <color> | #651E4C |
--instui-primitive-color-plum-plum170 | <color> | #591B42 |
--instui-primitive-color-plum-plum180 | <color> | #351428 |
--instui-primitive-color-plum-plum190 | <color> | #2F0E23 |
--instui-primitive-color-plum-plum20 | <color> | #FAE3EF |
--instui-primitive-color-plum-plum200 | <color> | #26051A |
--instui-primitive-color-plum-plum30 | <color> | #F6D9E9 |
--instui-primitive-color-plum-plum40 | <color> | #F0B9D7 |
--instui-primitive-color-plum-plum50 | <color> | #EC93C6 |
--instui-primitive-color-plum-plum60 | <color> | #E982BF |
--instui-primitive-color-plum-plum70 | <color> | #E665B4 |
--instui-primitive-color-plum-plum80 | <color> | #DD4CA8 |
--instui-primitive-color-plum-plum90 | <color> | #D0469F |
--instui-primitive-color-red-red10 | <color> | #FBF1EF |
--instui-primitive-color-red-red100 | <color> | #E62429 |
--instui-primitive-color-red-red110 | <color> | #CF1F24 |
--instui-primitive-color-red-red120 | <color> | #C51F22 |
--instui-primitive-color-red-red130 | <color> | #AE161B |
--instui-primitive-color-red-red140 | <color> | #991418 |
--instui-primitive-color-red-red150 | <color> | #810F12 |
--instui-primitive-color-red-red160 | <color> | #750D0F |
--instui-primitive-color-red-red170 | <color> | #670C0C |
--instui-primitive-color-red-red180 | <color> | #38160D |
--instui-primitive-color-red-red190 | <color> | #311007 |
--instui-primitive-color-red-red20 | <color> | #FFE3DE |
--instui-primitive-color-red-red200 | <color> | #270903 |
--instui-primitive-color-red-red30 | <color> | #FFD8D0 |
--instui-primitive-color-red-red40 | <color> | #FFB7A9 |
--instui-primitive-color-red-red50 | <color> | #FA917F |
--instui-primitive-color-red-red60 | <color> | #FE7D6A |
--instui-primitive-color-red-red70 | <color> | #F56050 |
--instui-primitive-color-red-red80 | <color> | #F14139 |
--instui-primitive-color-red-red90 | <color> | #EC3532 |
--instui-primitive-color-sea-sea10 | <color> | #E0F9FD |
--instui-primitive-color-sea-sea100 | <color> | #00828E |
--instui-primitive-color-sea-sea110 | <color> | #027887 |
--instui-primitive-color-sea-sea120 | <color> | #02717E |
--instui-primitive-color-sea-sea130 | <color> | #01626E |
--instui-primitive-color-sea-sea140 | <color> | #015862 |
--instui-primitive-color-sea-sea150 | <color> | #014A53 |
--instui-primitive-color-sea-sea160 | <color> | #00424A |
--instui-primitive-color-sea-sea170 | <color> | #023941 |
--instui-primitive-color-sea-sea180 | <color> | #0D262A |
--instui-primitive-color-sea-sea190 | <color> | #051E22 |
--instui-primitive-color-sea-sea20 | <color> | #CFF0F6 |
--instui-primitive-color-sea-sea200 | <color> | #00181B |
--instui-primitive-color-sea-sea30 | <color> | #BDE9F1 |
--instui-primitive-color-sea-sea40 | <color> | #77D8E9 |
--instui-primitive-color-sea-sea50 | <color> | #3CC0D4 |
--instui-primitive-color-sea-sea60 | <color> | #07B7CB |
--instui-primitive-color-sea-sea70 | <color> | #04A4B7 |
--instui-primitive-color-sea-sea80 | <color> | #0394A5 |
--instui-primitive-color-sea-sea90 | <color> | #008C9C |
--instui-primitive-color-sky-sky10 | <color> | #E9F6FF |
--instui-primitive-color-sky-sky100 | <color> | #197EAB |
--instui-primitive-color-sky-sky110 | <color> | #17759F |
--instui-primitive-color-sky-sky120 | <color> | #116D94 |
--instui-primitive-color-sky-sky130 | <color> | #0F5F82 |
--instui-primitive-color-sky-sky140 | <color> | #0E5575 |
--instui-primitive-color-sky-sky150 | <color> | #094762 |
--instui-primitive-color-sky-sky160 | <color> | #084059 |
--instui-primitive-color-sky-sky170 | <color> | #08384E |
--instui-primitive-color-sky-sky180 | <color> | #0E2431 |
--instui-primitive-color-sky-sky190 | <color> | #071D29 |
--instui-primitive-color-sky-sky20 | <color> | #D6EDFE |
--instui-primitive-color-sky-sky200 | <color> | #001623 |
--instui-primitive-color-sky-sky30 | <color> | #C7E6FC |
--instui-primitive-color-sky-sky40 | <color> | #97D1F8 |
--instui-primitive-color-sky-sky50 | <color> | #63B9EB |
--instui-primitive-color-sky-sky60 | <color> | #50B0E3 |
--instui-primitive-color-sky-sky70 | <color> | #349ED2 |
--instui-primitive-color-sky-sky80 | <color> | #1E90C3 |
--instui-primitive-color-sky-sky90 | <color> | #1A87B8 |
--instui-primitive-color-stone-stone10 | <color> | #F4F4F4 |
--instui-primitive-color-stone-stone100 | <color> | #767676 |
--instui-primitive-color-stone-stone110 | <color> | #6C6C6C |
--instui-primitive-color-stone-stone120 | <color> | #646464 |
--instui-primitive-color-stone-stone130 | <color> | #585858 |
--instui-primitive-color-stone-stone140 | <color> | #4E4E4E |
--instui-primitive-color-stone-stone150 | <color> | #414141 |
--instui-primitive-color-stone-stone160 | <color> | #3A3A3A |
--instui-primitive-color-stone-stone170 | <color> | #333333 |
--instui-primitive-color-stone-stone180 | <color> | #222222 |
--instui-primitive-color-stone-stone190 | <color> | #1A1A1A |
--instui-primitive-color-stone-stone20 | <color> | #E9E9E9 |
--instui-primitive-color-stone-stone200 | <color> | #141414 |
--instui-primitive-color-stone-stone30 | <color> | #E1E1E1 |
--instui-primitive-color-stone-stone40 | <color> | #C9C9C9 |
--instui-primitive-color-stone-stone50 | <color> | #AFAFAF |
--instui-primitive-color-stone-stone60 | <color> | #A5A5A5 |
--instui-primitive-color-stone-stone70 | <color> | #949494 |
--instui-primitive-color-stone-stone80 | <color> | #858585 |
--instui-primitive-color-stone-stone90 | <color> | #7D7D7D |
--instui-primitive-color-transparent | <color> | #00000000 |
--instui-primitive-color-violet-violet10 | <color> | #F7F2F8 |
--instui-primitive-color-violet-violet100 | <color> | #9E58BD |
--instui-primitive-color-violet-violet110 | <color> | #944FB3 |
--instui-primitive-color-violet-violet120 | <color> | #8A49A7 |
--instui-primitive-color-violet-violet130 | <color> | #793F93 |
--instui-primitive-color-violet-violet140 | <color> | #6D3984 |
--instui-primitive-color-violet-violet150 | <color> | #5B2E6F |
--instui-primitive-color-violet-violet160 | <color> | #522965 |
--instui-primitive-color-violet-violet170 | <color> | #482458 |
--instui-primitive-color-violet-violet180 | <color> | #2C1834 |
--instui-primitive-color-violet-violet190 | <color> | #26132E |
--instui-primitive-color-violet-violet20 | <color> | #F3E5F7 |
--instui-primitive-color-violet-violet200 | <color> | #1D0A25 |
--instui-primitive-color-violet-violet30 | <color> | #EEDBF4 |
--instui-primitive-color-violet-violet40 | <color> | #DBC0E5 |
--instui-primitive-color-violet-violet50 | <color> | #CAA1D9 |
--instui-primitive-color-violet-violet60 | <color> | #C295D4 |
--instui-primitive-color-violet-violet70 | <color> | #B680CC |
--instui-primitive-color-violet-violet80 | <color> | #AB6EC5 |
--instui-primitive-color-violet-violet90 | <color> | #A464C0 |
--instui-primitive-color-white | <color> | #ffffff |
--instui-primitive-color-white-opacity10 | <color> | rgba(255,255,255,0.1) |
--instui-primitive-color-white-opacity20 | <color> | rgba(255,255,255,0.2) |
--instui-primitive-color-white-opacity75 | <color> | rgba(255,255,255,0.75) |
--instui-primitive-font-family-atkinson | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-primitive-font-family-inclusive-sans | [ <font-family-name> | <generic-font-family> ]# | Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-primitive-font-family-lato | [ <font-family-name> | <generic-font-family> ]# | Lato, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-primitive-font-family-menlo | [ <font-family-name> | <generic-font-family> ]# | Menlo, Consolas, Monaco, "Andale Mono", monospace |
--instui-primitive-font-weight-black | <integer> | 900 |
--instui-primitive-font-weight-bold | <integer> | 700 |
--instui-primitive-font-weight-extra-bold | <integer> | 800 |
--instui-primitive-font-weight-extra-light | <integer> | 200 |
--instui-primitive-font-weight-light | <integer> | 300 |
--instui-primitive-font-weight-medium | <integer> | 500 |
--instui-primitive-font-weight-regular | <integer> | 400 |
--instui-primitive-font-weight-semi-bold | <integer> | 600 |
--instui-primitive-font-weight-thin | <integer> | 100 |