/*
* Primitive dimension tokens.
*
* Density is resolved here, once. Components consume the resulting CSS
* properties and never multiply their own values by a density factor.
*/
$font-sizes: (
"8": 8px,
"9": 9px,
"10": 10px,
"10-5": 10.5px,
"11": 11px,
"11-5": 11.5px,
"12": 12px,
"13": 13px,
"14": 14px,
"15": 15px,
"16": 16px,
"17": 17px,
"18": 18px,
"20": 20px,
"28": 28px,
);
$line-heights: (
"16": 16px,
);
$icon-sizes: (
"8": 8px,
"9": 9px,
"10": 10px,
"11": 11px,
"12": 12px,
"13": 13px,
"14": 14px,
"15": 15px,
"16": 16px,
"18": 18px,
"20": 20px,
"22": 22px,
"24": 24px,
"28": 28px,
"36": 36px,
"40": 40px,
);
$control-sizes: (
"2": 2px,
"3": 3px,
"4": 4px,
"5": 5px,
"6": 6px,
"7": 7px,
"8": 8px,
"9": 9px,
"10": 10px,
"11": 11px,
"12": 12px,
"14": 14px,
"16": 16px,
"17": 17px,
"18": 18px,
"20": 20px,
"22": 22px,
"24": 24px,
"26": 26px,
"28": 28px,
"30": 30px,
"32": 32px,
"34": 34px,
"36": 36px,
"40": 40px,
"42": 42px,
"44": 44px,
"48": 48px,
"52": 52px,
"56": 56px,
"58": 58px,
"60": 60px,
"64": 64px,
"68": 68px,
"72": 72px,
"74": 74px,
"80": 80px,
"84": 84px,
"90": 90px,
"96": 96px,
"100": 100px,
"110": 110px,
"120": 120px,
);
$spacing: (
"neg-328": -328px,
"neg-4": -4px,
"neg-3": -3px,
"neg-1": -1px,
"1": 1px,
"2": 2px,
"3": 3px,
"4": 4px,
"5": 5px,
"6": 6px,
"7": 7px,
"8": 8px,
"9": 9px,
"10": 10px,
"11": 11px,
"12": 12px,
"14": 14px,
"16": 16px,
"18": 18px,
"20": 20px,
"22": 22px,
"24": 24px,
"26": 26px,
"28": 28px,
"30": 30px,
"32": 32px,
"34": 34px,
"36": 36px,
"38": 38px,
"40": 40px,
"48": 48px,
"56": 56px,
"60": 60px,
"64": 64px,
"78": 78px,
"120": 120px,
);
$corner-radii: (
"1": 1px,
"2": 2px,
"3": 3px,
"4": 4px,
"5": 5px,
"6": 6px,
"8": 8px,
"9": 9px,
"10": 10px,
"12": 12px,
"14": 14px,
);
@mixin emit($prefix, $values, $scale) {
@each $name, $value in $values {
--wb-#{$prefix}-#{$name}: #{$value * $scale};
}
}
@mixin density-tokens(
$font-scale,
$icon-scale,
$control-scale,
$spacing-scale,
$radius-scale
) {
@include emit("font-size", $font-sizes, $font-scale);
@include emit("line-height", $line-heights, $font-scale);
@include emit("icon-size", $icon-sizes, $icon-scale);
@include emit("control-size", $control-sizes, $control-scale);
@include emit("spacing", $spacing, $spacing-scale);
@include emit("corner-radius", $corner-radii, $radius-scale);
}