Refinements

Documentation

App Development

Storefront Development

Storefront Development

FastStore Global tokens

Refinements

Transition, Borders and Shadow definitions.

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`

Contributors

2

+ 2 contributors

Was this helpful?

Yes

No

Suggest edits (Github)

Interactive controls

Contributors

2

+ 2 contributors

On this page