183 lines
3.7 KiB
SCSS
183 lines
3.7 KiB
SCSS
@import 'tokens';
|
|
|
|
/**
|
|
* SIZE SCALE
|
|
* This is a Major Third scale that powers all the utilities that
|
|
* it is relevant for (font-size, margin, padding). All items are
|
|
* calcuated off these tokens.
|
|
*/
|
|
$stalfos-size-scale: map-get($tokens, 'size-scale');
|
|
|
|
/**
|
|
* COLORS
|
|
* Colors are shared between backgrounds and text by default.
|
|
* You can also use them to power borders, fills or shadows, for example.
|
|
*/
|
|
$stalfos-colors: map-get($tokens, 'colors');
|
|
|
|
/**
|
|
* UTIL PREFIX
|
|
* All pre-built, framework utilities will have this prefix.
|
|
* Example: the wrapper utility is '.sf-wrapper' because the default
|
|
* prefix is 'sf-'.
|
|
*/
|
|
$stalfos-util-prefix: 'sf-';
|
|
|
|
/**
|
|
* METRICS
|
|
* Various misc metrics to use around the site
|
|
*/
|
|
$metrics: (
|
|
'wrap-max-width': 71.25rem,
|
|
'wrap-inner-max-width': 62.25rem,
|
|
'md-breakpoint': 48rem
|
|
);
|
|
|
|
/**
|
|
* CORE CONFIG
|
|
* This powers everything from utility class generation to breakpoints
|
|
* to enabling/disabling pre-built components/utilities.
|
|
*/
|
|
$stalfos-config: (
|
|
'align': (
|
|
'items': (
|
|
'start': 'flex-start',
|
|
'center': 'center',
|
|
'end': 'flex-end'
|
|
),
|
|
'output': 'responsive',
|
|
'property': 'align-items'
|
|
),
|
|
'bg': (
|
|
'items': $stalfos-colors,
|
|
'output': 'standard',
|
|
'property': 'background'
|
|
),
|
|
'color': (
|
|
'items': $stalfos-colors,
|
|
'output': 'standard',
|
|
'property': 'color'
|
|
),
|
|
'box': (
|
|
'items': (
|
|
'block': 'block',
|
|
'flex': 'flex',
|
|
'inline-flex': 'inline-flex',
|
|
'hide': 'none'
|
|
),
|
|
'output': 'responsive',
|
|
'property': 'display'
|
|
),
|
|
'font': (
|
|
'items': map-get($tokens, 'fonts'),
|
|
'output': 'standard',
|
|
'property': 'font-family'
|
|
),
|
|
'gap-top': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'standard',
|
|
'property': 'margin-top'
|
|
),
|
|
'gap-bottom': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'standard',
|
|
'property': 'margin-bottom'
|
|
),
|
|
'leading': (
|
|
'items': (
|
|
'tight': '1.2',
|
|
'mid': '1.5',
|
|
'loose': '1.7'
|
|
),
|
|
'output': 'standard',
|
|
'property': 'line-height'
|
|
),
|
|
'measure': (
|
|
'items': (
|
|
'long': '75ch',
|
|
'short': '60ch',
|
|
'compact': '40ch'
|
|
),
|
|
'output': 'standard',
|
|
'property': 'max-width'
|
|
),
|
|
'pad-top': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'standard',
|
|
'property': 'padding-top'
|
|
),
|
|
'pad-bottom': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'standard',
|
|
'property': 'padding-bottom'
|
|
),
|
|
'pad-left': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'standard',
|
|
'property': 'padding-left'
|
|
),
|
|
'space': (
|
|
'items': (
|
|
'between': 'space-between',
|
|
'around': 'space-around',
|
|
'before': 'flex-end'
|
|
),
|
|
'output': 'responsive',
|
|
'property': 'justify-content'
|
|
),
|
|
'stack': (
|
|
'items': (
|
|
'300': 0,
|
|
'400': 10,
|
|
'500': 20,
|
|
'600': 30,
|
|
'700': 40
|
|
),
|
|
'output': 'standard',
|
|
'property': 'z-index'
|
|
),
|
|
'ta': (
|
|
'items': (
|
|
'right': 'right',
|
|
'left': 'left',
|
|
'center': 'center'
|
|
),
|
|
'output': 'responsive',
|
|
'property': 'text-align'
|
|
),
|
|
'text': (
|
|
'items': $stalfos-size-scale,
|
|
'output': 'responsive',
|
|
'property': 'font-size'
|
|
),
|
|
'weight': (
|
|
'items': (
|
|
'light': '300',
|
|
'regular': '400',
|
|
'mid': '600',
|
|
'bold': '700'
|
|
),
|
|
'output': 'standard',
|
|
'property': 'font-weight'
|
|
),
|
|
'width': (
|
|
'items': (
|
|
'full': '100%',
|
|
'half': percentage(1/2),
|
|
'quarter': percentage(1/4),
|
|
'third': percentage(1/3)
|
|
),
|
|
'output': 'responsive',
|
|
'property': 'width'
|
|
),
|
|
'breakpoints': (
|
|
'md': #{'(min-width: ' + map-get($metrics, 'md-breakpoint') + ')'}
|
|
),
|
|
'utilities': (
|
|
'reset': 'on',
|
|
'icon': 'off',
|
|
'flow': 'on',
|
|
'wrapper': 'off'
|
|
)
|
|
);
|