CSS: color
.instui-text-danger — Szemantikus szín segédeszközei: .instui-bg-<name>, .instui-text-<name>, és .instui-stroke-<name> a kurált szemantikus palettához.
Forrás: generate.ts
Használat
css
@import "@pantoken/components/utilities.css";Példák
html
<p class="instui-text-danger">Something went wrong.</p>Something went wrong.
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-border-radius-container-lg | <length> | 1.5rem |
--instui-border-radius-container-md | <length> | 1rem |
--instui-border-radius-container-sm | <length> | 0.5rem |
--instui-border-radius-container-xl | <length> | 2rem |
--instui-border-radius-full | <length> | 999rem |
--instui-border-radius-interactive-base | <length> | 0.75rem |
--instui-border-radius-lg | <length> | 0.75rem |
--instui-border-radius-md | <length> | 0.5rem |
--instui-border-radius-sm | <length> | 0.25rem |
--instui-border-radius-xl | <length> | 1rem |
--instui-border-radius-xs | <length> | 0.125rem |
--instui-border-radius-xxl | <length> | 1.5rem |
--instui-border-width-interactive-base | <length> | 0.0625rem |
--instui-border-width-interactive-focus | <length> | 0.125rem |
--instui-border-width-lg | <length> | 0.25rem |
--instui-border-width-md | <length> | 0.125rem |
--instui-border-width-sm | <length> | 0.0625rem |
--instui-color-background-accent-ash | <color> | light-dark(#273540, #1C222B)LightDark |
--instui-color-background-accent-aurora | <color> | #048660 |
--instui-color-background-accent-blue | <color> | #2B7ABC |
--instui-color-background-accent-green | <color> | #03893D |
--instui-color-background-accent-grey | <color> | light-dark(#4A5B68, #576773)LightDark |
--instui-color-background-accent-honey | <color> | #996E00 |
--instui-color-background-accent-orange | <color> | #CF4A00 |
--instui-color-background-accent-plum | <color> | #C54396 |
--instui-color-background-accent-red | <color> | #E62429 |
--instui-color-background-accent-sea | <color> | #00828E |
--instui-color-background-accent-sky | <color> | #197EAB |
--instui-color-background-accent-stone | <color> | #767676 |
--instui-color-background-accent-violet | <color> | #9E58BD |
--instui-color-background-base | <color> | light-dark(#ffffff, #10141A)LightDark |
--instui-color-background-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-color-background-container | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-color-background-dark | <color> | light-dark(#273540, #1C222B)LightDark |
--instui-color-background-error | <color> | #E62429 |
--instui-color-background-info | <color> | #2B7ABC |
--instui-color-background-inverse | <color> | light-dark(#334450, #F2F4F5)LightDark |
--instui-color-background-muted | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-color-background-on-color | <color> | #ffffff |
--instui-color-background-page | <color> | light-dark(#F2F4F5, #10141A)LightDark |
--instui-color-background-success | <color> | #03893D |
--instui-color-background-warning | <color> | #CF4A00 |
--instui-color-stroke-accent-ash | <color> | light-dark(#273540, #C7CACD)LightDark |
--instui-color-stroke-accent-aurora | <color> | light-dark(#057C58, #2BC692)LightDark |
--instui-color-stroke-accent-blue | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-color-stroke-accent-green | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-color-stroke-accent-grey | <color> | light-dark(#4A5B68, #F2F4F5)LightDark |
--instui-color-stroke-accent-honey | <color> | light-dark(#8C6400, #E0A300)LightDark |
--instui-color-stroke-accent-orange | <color> | light-dark(#BB4200, #FF905A)LightDark |
--instui-color-stroke-accent-plum | <color> | light-dark(#B43D89, #EC93C6)LightDark |
--instui-color-stroke-accent-red | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-color-stroke-accent-sea | <color> | light-dark(#027887, #3CC0D4)LightDark |
--instui-color-stroke-accent-sky | <color> | light-dark(#17759F, #63B9EB)LightDark |
--instui-color-stroke-accent-stone | <color> | light-dark(#6C6C6C, #AFAFAF)LightDark |
--instui-color-stroke-accent-violet | <color> | light-dark(#944FB3, #CAA1D9)LightDark |
--instui-color-stroke-base | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-color-stroke-brand | <color> | light-dark(#1D354F, #EEF4FD)LightDark |
--instui-color-stroke-container-base | <color> | light-dark(#E8EAEC, #334450)LightDark |
--instui-color-stroke-container-dark | <color> | #334450 |
--instui-color-stroke-error | <color> | #E62429 |
--instui-color-stroke-info | <color> | #2B7ABC |
--instui-color-stroke-inverse | <color> | light-dark(#ffffff, #6A7883)LightDark |
--instui-color-stroke-muted | <color> | light-dark(#E8EAEC, #2D3D49)LightDark |
--instui-color-stroke-on-color | <color> | #ffffff |
--instui-color-stroke-strong | <color> | light-dark(#5F6E7A, #9EA6AD)LightDark |
--instui-color-stroke-success | <color> | #03893D |
--instui-color-stroke-warning | <color> | #CF4A00 |
--instui-color-text-accent-ash | <color> | light-dark(#273540, #C7CACD)LightDark |
--instui-color-text-accent-aurora | <color> | light-dark(#057C58, #2BC692)LightDark |
--instui-color-text-accent-blue | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-color-text-accent-green | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-color-text-accent-grey | <color> | light-dark(#4A5B68, #F2F4F5)LightDark |
--instui-color-text-accent-honey | <color> | light-dark(#8C6400, #E0A300)LightDark |
--instui-color-text-accent-orange | <color> | light-dark(#BB4200, #FF905A)LightDark |
--instui-color-text-accent-plum | <color> | light-dark(#B43D89, #EC93C6)LightDark |
--instui-color-text-accent-red | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-color-text-accent-sea | <color> | light-dark(#027887, #3CC0D4)LightDark |
--instui-color-text-accent-sky | <color> | light-dark(#17759F, #63B9EB)LightDark |
--instui-color-text-accent-stone | <color> | light-dark(#6C6C6C, #AFAFAF)LightDark |
--instui-color-text-accent-violet | <color> | light-dark(#944FB3, #CAA1D9)LightDark |
--instui-color-text-base | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-color-text-dark | <color> | #273540 |
--instui-color-text-error | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-color-text-info | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-color-text-inverse | <color> | light-dark(#ffffff, #1C222B)LightDark |
--instui-color-text-muted | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-color-text-on-color | <color> | #ffffff |
--instui-color-text-success | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-color-text-warning | <color> | light-dark(#BB4200, #FF905A)LightDark |
--instui-elevation-above | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-card | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-cardHover | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-depth1 | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-depth2 | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-depth3 | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-resting | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-elevation-topmost | [ inset? && <length>{2,4} && <color>? ]# | none | — |
--instui-font-family-base | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-font-family-code | [ <font-family-name> | <generic-font-family> ]# | Menlo, Consolas, Monaco, "Andale Mono", monospace |
--instui-font-family-heading | [ <font-family-name> | <generic-font-family> ]# | Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-font-weight-body-base | <integer> | 400 |
--instui-font-weight-body-strong | <integer> | 600 |
--instui-font-weight-heading-base | <integer> | 600 |
--instui-font-weight-heading-strong | <integer> | 700 |
--instui-font-weight-interactive | <integer> | 500 |
--instui-line-height-heading-base | <percentage> | 125% |
--instui-line-height-heading-loose | <percentage> | 150% |
--instui-line-height-heading-text-lg | <length> | 1.75rem |
--instui-line-height-heading-text-xl | <length> | 2rem |
--instui-line-height-heading-text2xl | <length> | 2.25rem |
--instui-line-height-heading-text3xl | <length> | 2.5rem |
--instui-line-height-label-base | <length> | 1.125rem |
--instui-line-height-paragraph-base | <percentage> | 150% |
--instui-line-height-paragraph-text-base | <length> | 1.5rem |
--instui-line-height-paragraph-text-sm | <length> | 1.25rem |
--instui-line-height-paragraph-text-xs | <length> | 1.25rem |
--instui-line-height-standalone-base | <percentage> | 125% |
--instui-line-height-standalone-text-base | <length> | 1rem |
--instui-line-height-standalone-text-lg | <length> | 1.25rem |
--instui-line-height-standalone-text-sm | <length> | 0.875rem |
--instui-line-height-standalone-text-xl | <length> | 1.5rem |
--instui-line-height-standalone-text-xs | <length> | 0.75rem |
--instui-line-height-standalone-text2xl | <length> | 1.75rem |
--instui-line-height-standalone-text3xl | <length> | 2rem |
--instui-line-height-standalone-text4xl | <length> | 2.25rem |
--instui-opacity-base | <integer> | 1 |
--instui-opacity-disabled | <number> | 0.5 |