cirrus-ui
Version:
A lightweight UI framework written in SCSS
1,043 lines (1,015 loc) • 33.9 kB
Plain Text
@use 'sass:map';
@use 'sass:math';
@use 'sass:list';
@use 'sass-true/sass/config/throw';
@use 'defaults';
@use 'flags';
@use 'pseudos';
@use 'theme';
@use 'functions';
@use 'constants';
// ==================================================
// User config
// ==================================================
// Deep merged with the default config. This means that this will override existing keys and append new key value pairs.
// If you pass in null for any field, it will clear the values from default-config. Example:
//
// $config :(
// colors: (
// blues: null
// )
// );
//
// This will disable all blues defined in $default-config from being generated.
$config: (
extend: (),
) !default;
// ==================================================
// Default config
// ==================================================
$default-config: (
// Turn on/off generating viewport classes to save on size.
// DEPRECATED AS OF 0.8.0. Use 'responsive' pseudo-variant in the `pseudo-variants` config instead
viewports:
(
flags.$CLEARFIX: true,
flags.$DISPLAY: true,
flags.$FLEX: true,
flags.$FLOAT: true,
flags.$OVERFLOW: true,
flags.$POSITION: true,
flags.$TEXT: true,
flags.$MARGIN-PADDING: true,
flags.$OPACITY: true,
flags.$BACKGROUND-OPACITY: false,
flags.$COLOR-OPACITY: false,
flags.$BORDER-OPACITY: false,
flags.$WIDTHS: true,
flags.$HEIGHTS: true,
flags.$ZINDEX: false,
flags.$ABSOLUTES: false,
flags.$GAP: false,
flags.$ROUND: false,
flags.$SHADOWS: false,
flags.$MIN-HEIGHT: false,
flags.$MAX-HEIGHT: false,
flags.$MIN-WIDTH: false,
flags.$MAX-WIDTH: false,
flags.$GRID: true,
flags.$BLUR: false,
flags.$TRANSITION-DURATION: false,
flags.$LETTER-SPACING: false,
flags.$LINE-HEIGHT: false,
flags.$BORDER-WIDTH: false,
flags.$VERTICAL-ALIGN: false,
flags.$CURSOR: false,
),
// Class generation properties
class-name-properties: (
utility-prefix: 'u',
override: '',
delimiter: '-',
variant-delimiter: '\\:',
),
// List of supported pseudo-variants by class type (responsiveness handled by viewports config above)
// See _pseudo-variants.scss for valid values
pseudo-variants: (
flags.$CLEARFIX: (pseudos.$RESPONSIVE),
flags.$DISPLAY: (pseudos.$RESPONSIVE, pseudos.$GROUP_HOVER, pseudos.$HOVER),
flags.$FLEX: (pseudos.$RESPONSIVE),
flags.$FLOAT: (pseudos.$RESPONSIVE),
flags.$OVERFLOW: (pseudos.$RESPONSIVE, pseudos.$HOVER),
flags.$POSITION: (pseudos.$RESPONSIVE),
flags.$TEXT: (pseudos.$RESPONSIVE),
flags.$MARGIN-PADDING: (pseudos.$RESPONSIVE, pseudos.$FIRST_OF_TYPE, pseudos.$LAST_OF_TYPE),
flags.$OPACITY: (pseudos.$RESPONSIVE, pseudos.$FOCUS, pseudos.$FOCUS_VISIBLE, pseudos.$FOCUS_WITHIN, pseudos.$GROUP_HOVER, pseudos.$GROUP_FOCUS, pseudos.$HOVER),
flags.$BACKGROUND-OPACITY: (pseudos.$FOCUS, pseudos.$FOCUS_WITHIN, pseudos.$HOVER),
flags.$COLOR-OPACITY: (pseudos.$FOCUS, pseudos.$FOCUS_WITHIN, pseudos.$HOVER),
flags.$BORDER-OPACITY: (pseudos.$FOCUS, pseudos.$FOCUS_WITHIN, pseudos.$HOVER),
flags.$WIDTHS: (pseudos.$RESPONSIVE),
flags.$HEIGHTS: (pseudos.$RESPONSIVE),
flags.$ZINDEX: (pseudos.$FOCUS, pseudos.$FOCUS_VISIBLE, pseudos.$FOCUS_WITHIN, pseudos.$HOVER),
flags.$ABSOLUTES: (pseudos.$RESPONSIVE),
flags.$GAP: (pseudos.$RESPONSIVE),
flags.$ROUND: (),
flags.$SHADOWS: (pseudos.$FOCUS, pseudos.$FOCUS_VISIBLE, pseudos.$FOCUS_WITHIN, pseudos.$HOVER),
flags.$MIN-HEIGHT: (pseudos.$RESPONSIVE),
flags.$MAX-HEIGHT: (pseudos.$RESPONSIVE),
flags.$MIN-WIDTH: (pseudos.$RESPONSIVE),
flags.$MAX-WIDTH: (pseudos.$RESPONSIVE),
flags.$GRID: (pseudos.$RESPONSIVE),
flags.$BLUR: (),
flags.$TRANSITION-DURATION: (),
flags.$LETTER-SPACING: (pseudos.$RESPONSIVE),
flags.$LINE-HEIGHT: (),
flags.$BORDER-WIDTH: (pseudos.$FOCUS, pseudos.$HOVER),
flags.$VERTICAL-ALIGN: (pseudos.$RESPONSIVE),
flags.$CURSOR: (),
flags.$THEME-MODIFIERS: (pseudos.$DARK, pseudos.$GROUP_HOVER, pseudos.$HOVER),
),
// Extend all existing styles here
extend:
(
avatars: (
sizes: (),
),
breakpoints: (
widths: (),
breakpoint-pairs: (),
),
buttons: (
sizes: (),
),
// Please define all colors using hex
// Omitting some colors may break Cirrus builds
colors:
(
semantic: (),
control-themes: (),
extended: (
// Note: The quotes matter!
'pink': (),
'red': (),
'orange': (),
'yellow': (),
'green': (),
'teal': (),
'blue': (),
'indigo': (),
'purple': (),
'gray': (),
),
),
fonts: (
sizes: (
heading: (),
headline: (),
text: (),
),
font-families: (),
font-styles:(),
letter-spacing: (),
transforms: (),
weights: (),
),
forms: (
input-sizes: (),
input-contains-icon-padding: (),
input-icon-sizes: (),
label-sizes: (),
),
progress: (
sizes: (),
),
space-sizes: (),
tabs: (
font-sizes: (),
),
tags: (
font-sizes: (),
),
absolute: (),
border: (
width:()
),
filters: (
blurs: (),
),
flex: (
properties: (),
),
grid: (
properties: (),
),
heights: (),
min-heights: (),
max-heights: (),
min-widths: (),
max-widths: (),
opacity: (),
round: (),
sizing-system: (),
shadows: (),
transitions: (),
vertical-align: (),
widths: (),
z-index: (),
),
// Turn off certain features from being loaded. If left blank, all components are generated by default.
excludes: (),
// Enable certain classes to be generated. Takes precedence over $EXCLUDE.
includes: (),
// COMPONENTS //
// Avatar
avatars:
(
sizes: (
constants.$xs: (
font-size: 0.8rem,
width: 1.6rem,
height: 1.6rem,
),
constants.$sm: (
font-size: 1rem,
width: 2.4rem,
height: 2.4rem,
),
constants.$lg: (
font-size: 2rem,
width: 4.8rem,
height: 4.8rem,
),
constants.$xl: (
font-size: 3rem,
width: 6.4rem,
height: 6.4rem,
),
),
),
breakpoints: (
widths: defaults.$default-breakpoints,
// Pairs for generating viewport media queries. Pairs are (current viewport: viewport that is 1 smaller)
breakpoint-pairs:
(
constants.$sm: constants.$xs,
constants.$md: constants.$sm,
constants.$lg: constants.$md,
constants.$xl: constants.$lg,
),
),
// Button
buttons:
(
sizes: (
constants.$xs: (
padding: 0 0.5rem,
font-size: 50%,
),
constants.$sm: (
padding: 0.25rem 1rem,
font-size: 70%,
),
constants.$md: (
padding: 0.5rem 1.5rem,
font-size: 90%,
),
constants.$lg: (
padding: 0.75rem 2rem,
font-size: 110%,
),
constants.$xl: (
padding: 1rem 2.5rem,
font-size: 130%,
),
),
),
colors: (
semantic: (
'primary': theme.$cirrus-primary,
'success': theme.$cirrus-success,
'warning': theme.$cirrus-warning,
'danger': theme.$cirrus-danger,
'light': theme.$cirrus-light,
'dark': theme.$cirrus-dark,
'link': theme.$cirrus-link,
'link-dark': theme.$cirrus-link-dark,
'info': theme.$cirrus-info,
'black': theme.$cirrus-black,
'white': theme.$cirrus-white,
),
control-themes: (
'primary': (
bg: theme.$cirrus-primary,
fg: theme.$cirrus-light,
),
'dark': (
bg: theme.$cirrus-dark,
fg: theme.$cirrus-light,
),
'link': (
bg: theme.$cirrus-link,
fg: theme.$cirrus-light,
),
'info': (
bg: theme.$cirrus-info,
fg: theme.$cirrus-light,
),
'success': (
bg: theme.$cirrus-success,
fg: theme.$cirrus-light,
),
'warning': (
bg: theme.$cirrus-warning,
fg: theme.$cirrus-dark,
),
'danger': (
bg: theme.$cirrus-danger,
fg: theme.$cirrus-light,
),
),
extended: (
'pink': (
'100': #fce8f3,
'200': #fad1e8,
'300': #f8b4d9,
'400': #f17eb8,
'500': #e74694,
'600': #d61f69,
'700': #bf125d,
'800': #99154b,
'900': #751a3d,
),
'red': (
'100': #fde8e8,
'200': #fbd5d5,
'300': #f8b4b4,
'400': #f98080,
'500': #f05252,
'600': #e02424,
'700': #c81e1e,
'800': #9b1c1c,
'900': #771d1d,
),
'orange': (
'100': #feecdc,
'200': #fcd9bd,
'300': #fdba8c,
'400': #ff8a4c,
'500': #ff5a1f,
'600': #d03801,
'700': #b43403,
'800': #8a2c0d,
'900': #73230d,
),
'yellow': (
'100': #fdf6b2,
'200': #fce96a,
'300': #faca15,
'400': #e3a008,
'500': #c27803,
'600': #9f580a,
'700': #8e4b10,
'800': #723b13,
'900': #633112,
),
'green': (
'100': #def7ec,
'200': #bcf0da,
'300': #84e1bc,
'400': #31c48d,
'500': #0e9f6e,
'600': #057a55,
'700': #046c4e,
'800': #03543f,
'900': #014737,
),
'teal': (
'100': #d5f5f6,
'200': #afecef,
'300': #7edce2,
'400': #16bdca,
'500': #0694a2,
'600': #047481,
'700': #036672,
'800': #05505c,
'900': #014451,
),
'blue': (
'100': #e1effe,
'200': #c3ddfd,
'300': #a4cafe,
'400': #76a9fa,
'500': #3f83f8,
'600': #1c64f2,
'700': #1a56db,
'800': #1e429f,
'900': #233876,
),
'indigo': (
'100': #e5edff,
'200': #cddbfe,
'300': #b4c6fc,
'400': #8da2fb,
'500': #6875f5,
'600': #5850ec,
'700': #5145cd,
'800': #42389d,
'900': #362f78,
),
'purple': (
'100': #edebfe,
'200': #dcd7fe,
'300': #cabffd,
'400': #ac94fa,
'500': #9061f9,
'600': #7e3af2,
'700': #6c2bd9,
'800': #5521b5,
'900': #4a1d96,
),
'gray': (
'000': #f8f9fa,
'100': #f1f3f5,
'200': #e9ecef,
'300': #dee2e6,
'400': #ced4da,
'500': #adb5bd,
'600': #868e96,
'700': #495057,
'800': #343a40,
'900': #212529,
),
),
),
fonts: (
sizes: (
heading: (
h6: (
default: (
font-size: constants.$font-size-m,
),
sm-above: (
font-size: constants.$font-size-l,
),
),
h5: (
default: (
font-size: 1.25rem,
),
sm-above: (
font-size: constants.$font-size-xl,
),
),
h4: (
default: (
font-size: 1.5rem,
),
sm-above: (
font-size: 1.75rem,
),
),
h3: (
default: (
font-size: 1.75rem,
),
sm-above: (
font-size: 2rem,
),
),
h2: (
default: (
font-size: 2rem,
),
sm-above: (
font-size: 2.5rem,
),
),
h1: (
default: (
font-size: 2.25rem,
),
sm-above: (
font-size: 3rem,
letter-spacing: 0.025rem,
),
),
),
headline: (
headline-4: (
default: (
font-size: 3rem,
),
sm-above: (
font-size: 3.5rem,
),
),
headline-3: (
default: (
font-size: 3.25rem,
),
sm-above: (
font-size: 4.5rem,
),
),
headline-2: (
default: (
font-size: 3.5rem,
),
sm-above: (
font-size: 5.5rem,
),
),
headline-1: (
default: (
font-size: 3.75rem,
),
sm-above: (
font-size: 6.5rem,
),
),
),
text: (
constants.$xs: (
font-size: constants.$font-size-xs !important,
line-height: 1.5rem !important,
),
constants.$sm: (
font-size: constants.$font-size-s !important,
line-height: 1.75rem !important,
),
constants.$md: (
font-size: constants.$font-size-m !important,
line-height: 2rem !important,
),
constants.$lg: (
font-size: constants.$font-size-l !important,
line-height: 2.25rem !important,
),
constants.$xl: (
font-size: constants.$font-size-xl !important,
line-height: 2.25rem !important,
),
),
),
font-families: (
primary: (
'Montserrat',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Helvetica Neue',
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
),
secondary: (
'Nunito Sans',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
'Roboto',
'Helvetica Neue',
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
),
),
font-styles: (
normal: normal,
italic: italic,
),
letter-spacing: (
tightest: -0.075em,
tighter: -0.05em,
tight: -0.025em,
normal: 0,
loose: 0.025em,
looser: 0.05em,
loosest: 0.1em,
),
line-heights: (
none: 1,
tighter: 1.25,
tight: 1.375,
normal: 1.5,
loose: 1.625,
looser: 2,
),
transforms: (
uppercase: uppercase,
lowercase: lowercase,
capitalize: capitalize,
normal-case: none,
),
weights: (
'extrathin': 100,
'thin': 200,
'light': 300,
'normal': 400,
'medium': 500,
'semibold': 600,
'bold': 700,
'extrabold': 800,
'black': 900,
),
),
forms: (
input-sizes: (
constants.$xs: (
font-size: constants.$font-size-xs,
padding: 0.35rem 0.9rem,
),
constants.$sm: (
font-size: constants.$font-size-s,
padding: 0.55rem 1rem,
),
constants.$lg: (
font-size: constants.$font-size-l,
),
constants.$xl: (
font-size: constants.$font-size-xl,
),
),
input-contains-icon-padding: (
constants.$xs: 2rem,
constants.$sm: 2.5rem,
constants.$lg: 3.5rem,
constants.$xl: 4rem,
),
input-icon-sizes: (
constants.$xs: (
line-height: 1.75rem,
width: 1.75rem,
font-size: 7px,
),
constants.$sm: (
width: 2.5rem,
font-size: 14px,
),
constants.$lg: (
line-height: 3.5rem,
width: 3.5rem,
font-size: 28px,
),
constants.$xl: (
line-height: 2.5rem,
width: 3.75rem,
font-size: 35px,
),
),
label-sizes: (
constants.$xs: constants.$font-size-xs,
constants.$sm: constants.$font-size-s,
constants.$lg: constants.$font-size-l,
constants.$xl: constants.$font-size-xl,
),
),
// Progress Bar Heights
progress:
(
sizes: (
constants.$xs: (
height: 0.25rem,
),
constants.$sm: (
height: 0.5rem,
),
constants.$md: (
height: 0.75rem,
),
constants.$lg: (
height: 1rem,
),
constants.$xl: (
height: 1.25rem,
),
),
),
// Space sizes
space-sizes:
(
constants.$lg: (
padding: 1rem 0,
),
constants.$xl: (
padding: 2rem 0,
),
),
// Tabs
tabs:
(
font-sizes: (
constants.$xs: constants.$font-size-xs,
constants.$sm: constants.$font-size-s,
constants.$lg: constants.$font-size-l,
constants.$xl: constants.$font-size-xl,
),
),
// Tags
tags:
(
font-sizes: (
constants.$xs: constants.$font-size-xs,
constants.$sm: constants.$font-size-s,
constants.$md: constants.$font-size-m,
constants.$lg: constants.$font-size-l,
constants.$xl: constants.$font-size-xl,
),
),
// UTILITIES / Non-components //
absolute:
functions.map-multi-merge(
(
auto: auto,
0: 0,
),
(functions.get-negative-value-map(defaults.$default-quartile-percentages)),
(
functions.get-negative-value-map(
functions.map-range(defaults.$default-sizing-system, 0, defaults.$default-absolutes-max, true)
)
)
),
border: (
width: (
0: 0px,
1: 1px,
2: 2px,
4: 4px,
8: 8px,
),
),
filters: (
blurs: (
'none': (
--cirrus-blur: blur(0),
),
constants.$xs: (
--cirrus-blur: blur(0.25rem),
),
constants.$sm: (
--cirrus-blur: blur(0.5rem),
),
constants.$md: (
--cirrus-blur: blur(1rem),
),
constants.$lg: (
--cirrus-blur: blur(1.5rem),
),
constants.$xl: (
--cirrus-blur: blur(3rem),
),
),
),
flex: (
properties: (
flex-columns: 12,
),
),
grid: (
properties: (
default-grid-gap: 2,
grid-columns: 12,
grid-rows: 6,
),
),
heights:
functions.map-multi-merge(
defaults.$default-sizing-system,
defaults.$default-percentages,
(
0: 0,
auto: auto,
screen: 100vh,
)
),
min-heights:
functions.map-multi-merge(
defaults.$default-percentages,
(
0: 0,
screen: 100vh,
)
),
max-heights:
functions.map-multi-merge(
defaults.$default-percentages,
(
'none': none,
screen: 100vh,
)
),
min-widths:
functions.map-multi-merge(
defaults.$default-breakpoints,
defaults.$default-percentages,
(
0: 0,
screen: 100vw,
)
),
max-widths:
functions.map-multi-merge(
defaults.$default-breakpoints,
defaults.$default-percentages,
(
'none': none,
screen: 100vw,
)
),
opacity: (
0: 0,
10: 0.1,
20: 0.2,
30: 0.3,
40: 0.4,
50: 0.5,
60: 0.6,
70: 0.7,
80: 0.8,
90: 0.9,
100: 1,
),
round: (
'none': 0px,
constants.$xs: 0.25rem,
constants.$sm: 0.5rem,
constants.$md: 0.75rem,
constants.$lg: 1rem,
constants.$xl: 1.25rem,
'full': 9001px,
),
sizing-system: defaults.$default-sizing-system,
shadows: (
'none': (
--cirrus-shadow: 0 0 #000,
),
constants.$xs: (
--cirrus-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
),
constants.$sm: (
--cirrus-shadow: (
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06),
),
),
constants.$md: (
--cirrus-shadow: (
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
),
),
constants.$lg: (
--cirrus-shadow: (
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05),
),
),
constants.$xl: (
--cirrus-shadow: (
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
),
),
'inset': (
--cirrus-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
),
),
transitions: (
durations: (
0: 0ms,
75: 75ms,
100: 100ms,
200: 200ms,
300: 300ms,
500: 500ms,
700: 700ms,
1000: 1000ms,
),
),
vertical-align: functions.to-property-map((baseline, top, middle, bottom, text-top, text-bottom, sub, super)),
widths:
functions.map-multi-merge(
(
0: 0,
auto: auto,
screen: 100vw,
),
defaults.$default-percentages,
defaults.$default-sizing-system
),
z-index: (
'n1': -1,
0: 0,
1: 1,
10: 10,
20: 20,
30: 30,
40: 40,
50: 50,
auto: auto,
)
) !default;
// ==================================================
// Exported values
// ==================================================
$all-config: map.deep-merge($default-config, $config);
// ==================================================
// Exported values
// ==================================================
// FLAGS
$viewport-flags: map.get($all-config, viewports);
$pseudo-variants: map.get($all-config, pseudo-variants);
$utility-prefix: map.get($all-config, class-name-properties, utility-prefix);
$override: map.get($all-config, class-name-properties, override);
$delimiter: map.get($all-config, class-name-properties, delimiter);
$variant-delimiter: map.get($all-config, class-name-properties, variant-delimiter);
$excludes: map.get($all-config, excludes);
$includes: map.get($all-config, includes);
// BREAKPOINTS
$breakpoints: functions.get-with-extend($all-config, breakpoints, widths);
$breakpoint-pairs: functions.get-with-extend($all-config, breakpoints, breakpoint-pairs);
// COLORS
$semantic-colors: functions.get-with-extend($all-config, colors, semantic);
$control-themes: functions.get-with-extend($all-config, colors, control-themes);
$v2Colors: functions.get-with-extend($all-config, colors, extended);
// COMPONENTS
$avatar-sizes: functions.get-with-extend($all-config, avatars, sizes);
$button-sizes: functions.get-with-extend($all-config, buttons, sizes);
$font-heading-sizes: functions.get-with-extend($all-config, fonts, sizes, heading);
$font-headline-sizes: functions.get-with-extend($all-config, fonts, sizes, headline);
$font-text-sizes: functions.get-with-extend($all-config, fonts, sizes, text);
$font-families: functions.get-with-extend($all-config, fonts, font-families);
$font-styles: functions.get-with-extend($all-config, fonts, font-styles);
$font-letter-spacing: functions.get-with-extend($all-config, fonts, letter-spacing);
$font-line-heights: functions.get-with-extend($all-config, fonts, line-heights);
$font-transforms: functions.get-with-extend($all-config, fonts, transforms);
$font-weights: functions.get-with-extend($all-config, fonts, weights);
// Form sizes
$input-sizes: functions.get-with-extend($all-config, forms, input-sizes);
$input-contains-icon-padding: functions.get-with-extend($all-config, forms, input-contains-icon-padding);
$input-icon-sizes: functions.get-with-extend($all-config, forms, input-icon-sizes);
$form-label-sizes: functions.get-with-extend($all-config, forms, label-sizes);
$progress-bar-sizes: functions.get-with-extend($all-config, progress, sizes);
$space-sizes: functions.get-with-extend($all-config, space-sizes);
$tab-font-sizes: functions.get-with-extend($all-config, tabs, font-sizes);
$tag-font-sizes: functions.get-with-extend($all-config, tags, font-sizes);
// UTILS
$absolute: functions.get-with-extend($all-config, absolute);
$border-widths: functions.get-with-extend($all-config, border, width);
$blurs: functions.get-with-extend($all-config, filters, blurs);
$heights: functions.get-with-extend($all-config, heights);
$widths: functions.get-with-extend($all-config, widths);
$min-heights: functions.get-with-extend($all-config, min-heights);
$max-heights: functions.get-with-extend($all-config, max-heights);
$min-widths: functions.get-with-extend($all-config, min-widths);
$max-widths: functions.get-with-extend($all-config, max-widths);
$flex-properties: functions.get-with-extend($all-config, flex, properties);
$flex-columns: map.get($flex-properties, flex-columns);
$flex-width: math.div(1, $flex-columns);
$grid-properties: functions.get-with-extend($all-config, grid, properties);
$grid-columns: map.get($grid-properties, grid-columns);
$grid-rows: map.get($grid-properties, grid-rows);
$default-grid-gap: map.get($grid-properties, default-grid-gap);
$opacities: functions.get-with-extend($all-config, opacity);
$round: functions.get-with-extend($all-config, round);
$shadows: functions.get-with-extend($all-config, shadows);
$spacing-system: functions.get-with-extend($all-config, sizing-system);
$transition-durations: functions.get-with-extend($all-config, transitions, durations);
$vertical-alignments: functions.get-with-extend($all-config, vertical-align);
$z-indexes: functions.get-with-extend($all-config, z-index);
/*
Fetch feature flag for different utility class types for generating viewport classes (e.g., sm:u-flex, md:u-flex, etc.).
*/
@function get-viewport-flag($name) {
@return get-viewport-flag-internal($viewport-flags, $name);
}
@function get-viewport-flag-internal($flag-map, $name) {
@if not map.has-key($flag-map, $name) {
@return throw.error(
$message: '[get-viewport-flag] Unknown constant `#{$name}`.',
$source: 'get-viewport-flag()',
);
}
@return map.get($flag-map, $name);
}
/*
Helper function to determine if a set of classes should be generated based on given include/exclude configuration.
*/
@function should-generate-classes($flag) {
@return should-generate-classes-internal($includes, $excludes, $flag);
}
@function should-generate-classes-internal($to-include, $to-exclude, $flag) {
$generate-classes: true;
@if list.index($to-exclude, flags.$ALL) or list.index($to-exclude, 'ALL') {
$generate-classes: false;
}
@if list.index($to-exclude, $flag) {
$generate-classes: false;
}
// TODO: Unit test
@if list.index($to-include, $flag) or list.index($to-include, flags.$ALL) or list.index($to-include, 'ALL') {
$generate-classes: true;
}
@return $generate-classes;
}
/*
Fetch pseudo-variants to generate for each class type.
*/
@function get-pseudo-variants($name) {
@return get-pseudo-variants-internal($pseudo-variants, $name);
}
@function get-pseudo-variants-internal($flag-map, $name) {
@if not map.has-key($flag-map, $name) {
@return throw.error(
$message: '[get-pseudo-variants] Unknown constant `#{$name}`.',
$source: 'get-pseudo-variants()',
);
}
@return map.get($flag-map, $name);
}