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
129
130
131
132
133
134
135
136
137
138
139
140
|
@use 'sass:color';
@use 'sass:math';
@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';
@use '@oddbird/blend';
@use '@oddbird/blend/sass/convert' as blend-convert;
@use 'iro-sass/src/index' as iro;
@use 'iro-sass/src/easing' as easing;
@use 'functions/colors' as iro-colors;
@use 'config';
@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
@return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
}
@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
@return color($key, $tree, $default, $global);
}
@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
@return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global);
}
@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
@return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
}
@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
@return dim($key, $tree, $default, $global);
}
@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
@return iro.props-get(list.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(list.join(--dims --font, $key), $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),
font-feature-settings: font-prop($font, $overrides, $key, --feature-settings),
);
@return $map;
}
@function lum($color) {
@return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
}
@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
$base-lch: iro-colors.parse-oklch($base-color);
$ref-lch: iro-colors.parse-oklch($reference-color);
$ref-l: list.nth($ref-lch, 1);
$ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
$cmax: math.max(map.values($contrasts)...);
$cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
$black-y: iro-colors.apca_sRGB_to_Y(#000);
$white-y: iro-colors.apca_sRGB_to_Y(#fff);
$chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
$palette: ();
@each $key, $contrast in $contrasts {
//$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
$y: iro-colors.apcaReverse($contrast, $ref-y);
$l: list.nth($base-lch, 1);
$c: 1;
@if $y != false {
$y-lch: blend-convert.Lab_to_LCH(
iro-colors.lin_sRGB_to_Oklab(
blend-convert.lin_sRGB(
blend-convert.sassToRgb(
iro-colors.apca_Y_to_sRGB($y)
)
)
)
);
$l: list.nth($y-lch, 1);
} @else {
$y: $ref-y;
}
@if $chroma-range != 1 {
$c: if(
$ref-l > .5,
math.clamp(0, math.div($contrast, $cmax), 1),
-1 * math.clamp(-1, math.div($contrast, $cmax), 0)
);
$c: meta.call($chroma-easing, $c);
$c: $chroma-range + (1 - $chroma-range) * $c;
}
$color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3));
//$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
//$color: blend-convert.rgbToSass(
// blend-convert.gam_sRGB(
// iro-colors.Oklab_to_lin_sRGB(
// blend-convert.LCH_to_Lab($color)
// )
// )
//);
$contrast-black: iro-colors.apcaContrast($black-y, $y);
$contrast-white: iro-colors.apcaContrast($white-y, $y);
$palette: map.set($palette, $key, $color);
$palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
//$palette: map.set($palette, #{$key}-text, blend.contrast($color));
}
@return $palette;
}
@function px-to-em($size, $base: iro.$vars-root-size) {
@return math.div($size, $base) * 1em;
}
|