1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
@use 'sass:math';
@use 'sass:map';
@use 'iro-sass/src/index' as iro;
@use 'config';
@use '@oddbird/blend';
@use '@oddbird/blend/sass/convert' as blend-convert;
@function color($key, $tree: 'colors', $default: null, $global: false) {
@return iro.props-get(join(--colors, $key), $tree, $default, $global);
}
@function global-color($key, $tree: 'colors', $default: null, $global: true) {
@return color($key, $tree, $default, $global);
}
@function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) {
@return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global);
}
@function dim($key, $tree: 'dims', $default: null, $global: false) {
@return iro.props-get(join(--dims, $key), $tree, $default, $global);
}
@function global-dim($key, $tree: 'dims', $default: null, $global: true) {
@return dim($key, $tree, $default, $global);
}
@function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) {
@return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global);
}
@function font-prop($data, $overrides, $key, $prop) {
@if (map-has-key($overrides, $prop)) {
@return map-get($overrides, $prop);
} @else if (map-has-key($data, $prop)) {
@return global-dim(--font $key $prop);
}
@return null;
}
@function set-font($key, $overrides: ()) {
$font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true);
$map: (
font-family: font-prop($font, $overrides, $key, --family),
font-size: font-prop($font, $overrides, $key, --size),
font-weight: font-prop($font, $overrides, $key, --weight),
font-style: font-prop($font, $overrides, $key, --style),
line-height: font-prop($font, $overrides, $key, --line-height),
text-transform: font-prop($font, $overrides, $key, --transform),
letter-spacing: font-prop($font, $overrides, $key, --spacing),
font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
);
@return $map;
}
@function multi-contrast($base-color, $colors, $wanted-contrasts) {
$dir: if(lightness($base-color) >= 50%, -1, 1);
$base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05;
$result: ();
$colors-len: length($colors);
$colors-idx: if($dir == -1, $colors-len, 1);
$wanted-len: length($wanted-contrasts);
$wanted-idx: 1;
@while $colors-idx >= 1 and $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
$color: nth($colors, $colors-idx);
$lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
$contrast: math.div(math.max($base-lum, $lum), math.min($lum, $base-lum));
@if $contrast != 1 {
$contrast: $dir * $contrast;
@if $lum <= $base-lum {
$contrast: -1 * $contrast;
}
}
$wanted-contrast: nth($wanted-contrasts, $wanted-idx);
@if $contrast >= $wanted-contrast {
$result: append($result, $color);
$wanted-idx: $wanted-idx + 1;
} @else {
$colors-idx: $colors-idx + $dir * 1;
}
}
$last-color: nth($colors, if($dir == -1, 1, $colors-len));
@for $i from $wanted-idx through $wanted-len {
$result: append($result, $last-color);
}
@return $result;
}
@function accent-palette($base, $dir: 1) {
@return (
--hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
--main: $base,
--lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
--lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
--semi: rgba($base, .4),
--selection: rgba($base, .99),
--fg: blend.contrast($base),
);
}
@function gray-palette($lightness) {
$grays: ();
@for $i from 0 through 100 {
$grays: append($grays, blend.lch($i * 1% 0 0));
}
$colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
$palette: ();
@for $i from 1 through length($colors) {
$palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i))));
}
@return $palette;
}
|