Spacing
Installation
yarn add @chewy/kib-foundationsImport
@use '~@chewy/kib-foundations/src/spacing';Mixins
custom-properties
Deprecated!
Use prebuilt CSS theme files from @chewy/chirp-design-tokens instead.
Generates CSS Custom Properties for spacing tokens. Prefer importing theme files directly:
```css
@mixin custom-properties($theme, $overrides: null) { ... }@mixin custom-properties($theme, $overrides: null) { @warn "spacing.custom-properties() is deprecated. Import CSS theme files from @chewy/chirp-design-tokens/web/css (for example, theme-base-light.css and theme-base-dark.css)."; @if $theme != common.$default-theme and $theme != 'base' { @warn "The $theme parameter is deprecated. Non-base themes will be handled via separate CSS theme files."; } $spacing-properties: functions.get-properties(); @if $overrides { $spacing-properties: map.deep-merge($spacing-properties, $overrides); } @each $key, $value in $spacing-properties { @if meta.type-of($value) != 'map' { #{common.get-property-name($key)}: $value; } } }
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$theme | Unused, retained for backwards compatibility. | String | — none |
$overrides | Map that overrides matching custom property values. | Map | null |
Requires
- [function]
get-properties - [function]
get-property-name - [variable]
default-theme
Functions
-get-themes
@function -get-themes($tokens) { ... }@function -get-themes($tokens) { $themes: (); @each $name, $theme in $tokens { $themes: map.set($themes, $name, map.get($theme, 'spacing')); } @return $themes; }
Variables
themes
$themes: (...);$themes: ( 'base': map.get(tokens.$chirp-theme, 'spacing') );
Description
Map of spacing themes Adapted for new token structure: creates a 'base' theme from $chirp-theme.spacing
Type
Map