Refinements
Transition, Borders and Shadow definitions.
Transition
| Global Token | Value |
|---|---|
--fs-transition-timing | .2s |
--fs-transition-property | all |
--fs-transition-function | ease-in-out |
Borders
| Global Token | Value |
|---|---|
--fs-border-radius-small | 1px |
--fs-border-radius | 2px |
--fs-border-radius-medium | 8px |
--fs-border-radius-pill | 100px |
--fs-border-radius-circle | 100% |
--fs-border-width | 1px |
--fs-border-width-thick | 2px |
--fs-border-width-thickest | 3px |
--fs-border-color | var(--fs-color-neutral-4) |
--fs-border-color-hover | var(--fs-color-main-3) |
--fs-border-color-active | var(--fs-color-main-2) |
--fs-border-color-disabled | var(--fs-color-neutral-6) |
--fs-border-color-light | var(--fs-color-neutral-2) |
--fs-border-color-light-hover | var(--fs-color-neutral-3) |
--fs-border-color-light-active | var(--fs-color-neutral-3) |
--fs-border-color-light-disabled | var(--fs-color-neutral-5) |
Shadow
| Local token | Default value/Global token linked |
|---|---|
--fs-shadow | none |
--fs-shadow-darker | 0 0 10px rgb(0 0 0 / 20%) |
--fs-shadow-hover | 0 0 0 1px var(--fs-color-main-4) |
Logo
| Local token | Default value/Global token linked |
|---|---|
--fs-logo-width | 7rem |