diff options
-rw-r--r-- | package.json | 5 | ||||
-rw-r--r-- | src/_functions.scss | 32 | ||||
-rw-r--r-- | src/_palettes.scss | 234 | ||||
-rw-r--r-- | src/_props.scss | 105 | ||||
-rw-r--r-- | src/_vars.scss | 400 | ||||
-rw-r--r-- | src/index.scss | 17 | ||||
-rw-r--r-- | src_demo/index.scss | 2 | ||||
-rw-r--r-- | src_old/.old/layouts/_message-group.scss (renamed from src/.old/layouts/_message-group.scss) | 0 | ||||
-rw-r--r-- | src_old/.old/objects/_dialog.scss (renamed from src/.old/objects/_dialog.scss) | 0 | ||||
-rw-r--r-- | src_old/.old/objects/_icon-nav.scss (renamed from src/.old/objects/_icon-nav.scss) | 0 | ||||
-rw-r--r-- | src_old/.old/objects/_list-group.scss (renamed from src/.old/objects/_list-group.scss) | 0 | ||||
-rw-r--r-- | src_old/.old/objects/_message.scss (renamed from src/.old/objects/_message.scss) | 0 | ||||
-rw-r--r-- | src_old/.old/objects/_overflow-button.scss (renamed from src/.old/objects/_overflow-button.scss) | 0 | ||||
-rw-r--r-- | src_old/_base.scss (renamed from src/_base.scss) | 0 | ||||
-rw-r--r-- | src_old/_config.scss (renamed from src/_config.scss) | 10 | ||||
-rw-r--r-- | src_old/_functions.scss | 135 | ||||
-rw-r--r-- | src_old/_layouts.scss (renamed from src/_layouts.scss) | 0 | ||||
-rw-r--r-- | src_old/_mixins.scss (renamed from src/_mixins.scss) | 0 | ||||
-rw-r--r-- | src_old/_objects.scss (renamed from src/_objects.scss) | 0 | ||||
-rw-r--r-- | src_old/_scopes.scss (renamed from src/_scopes.scss) | 0 | ||||
-rw-r--r-- | src_old/_themes.scss (renamed from src/_themes.scss) | 0 | ||||
-rw-r--r-- | src_old/_utils.scss (renamed from src/_utils.scss) | 0 | ||||
-rw-r--r-- | src_old/_vars.scss | 298 | ||||
-rw-r--r-- | src_old/functions/colors/_apca.scss | 127 | ||||
-rw-r--r-- | src_old/functions/colors/_index.scss | 1 | ||||
-rw-r--r-- | src_old/index.scss | 10 | ||||
-rw-r--r-- | src_old/layouts/_button-group.scss (renamed from src/layouts/_button-group.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_card-list.scss (renamed from src/layouts/_card-list.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_container.scss (renamed from src/layouts/_container.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_flex.scss (renamed from src/layouts/_flex.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_form.scss (renamed from src/layouts/_form.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_media.scss (renamed from src/layouts/_media.scss) | 0 | ||||
-rw-r--r-- | src_old/layouts/_overflow.scss (renamed from src/layouts/_overflow.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_action-button.scss (renamed from src/objects/_action-button.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_alert.scss (renamed from src/objects/_alert.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_avatar.scss (renamed from src/objects/_avatar.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_backdrop.scss (renamed from src/objects/_backdrop.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_badge.scss (renamed from src/objects/_badge.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_button.scss (renamed from src/objects/_button.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_card.scss (renamed from src/objects/_card.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_checkbox.scss (renamed from src/objects/_checkbox.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_divider.scss (renamed from src/objects/_divider.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_emoji.scss (renamed from src/objects/_emoji.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_field-label.scss (renamed from src/objects/_field-label.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_heading.scss (renamed from src/objects/_heading.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_icon.scss (renamed from src/objects/_icon.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_lightbox.scss (renamed from src/objects/_lightbox.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_menu.scss (renamed from src/objects/_menu.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_palette.scss (renamed from src/objects/_palette.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_popover.scss (renamed from src/objects/_popover.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_radio.scss (renamed from src/objects/_radio.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_side-nav.scss (renamed from src/objects/_side-nav.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_status-indicator.scss (renamed from src/objects/_status-indicator.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_switch.scss (renamed from src/objects/_switch.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_table.scss (renamed from src/objects/_table.scss) | 0 | ||||
-rw-r--r-- | src_old/objects/_text-field.scss (renamed from src/objects/_text-field.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_blockquotes.scss (renamed from src/scopes/_blockquotes.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_code.scss (renamed from src/scopes/_code.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_headings.scss (renamed from src/scopes/_headings.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_links.scss (renamed from src/scopes/_links.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_lists.scss (renamed from src/scopes/_lists.scss) | 0 | ||||
-rw-r--r-- | src_old/scopes/_tables.scss (renamed from src/scopes/_tables.scss) | 0 |
62 files changed, 1085 insertions, 291 deletions
diff --git a/package.json b/package.json index 7462243..a992040 100644 --- a/package.json +++ b/package.json | |||
@@ -8,11 +8,12 @@ | |||
8 | "private": true, | 8 | "private": true, |
9 | "sideEffects": false, | 9 | "sideEffects": false, |
10 | "scripts": { | 10 | "scripts": { |
11 | "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", | 11 | "build": "npm run build:app && npm run build:demostyle && npm run build:icons && npm run build:assets", |
12 | "build:assets": "cp -r static/* public/", | 12 | "build:assets": "cp -r static/* public/", |
13 | "build:app": "pug tpl/index.pug -p tpl --out public/", | 13 | "build:app": "pug tpl/index.pug -p tpl --out public/", |
14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", | 14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", |
15 | "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", | 15 | "build:demostyle": "sass --load-path=node_modules src_demo/index.scss public/style.css", |
16 | "build:style": "sass --load-path=node_modules src/index.scss public/style.css", | ||
16 | "lint:style": "stylelint \"src/**/*.scss\"", | 17 | "lint:style": "stylelint \"src/**/*.scss\"", |
17 | "fix:style": "stylelint \"src/**/*.scss\" --fix", | 18 | "fix:style": "stylelint \"src/**/*.scss\" --fix", |
18 | "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" | 19 | "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001" |
diff --git a/src/_functions.scss b/src/_functions.scss index 523aa84..4807cc1 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -7,31 +7,7 @@ | |||
7 | @use 'iro-sass/src/index' as iro; | 7 | @use 'iro-sass/src/index' as iro; |
8 | @use 'iro-sass/src/easing' as easing; | 8 | @use 'iro-sass/src/easing' as easing; |
9 | @use 'functions/colors' as iro-colors; | 9 | @use 'functions/colors' as iro-colors; |
10 | @use 'config'; | 10 | @use 'palettes'; |
11 | |||
12 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
13 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); | ||
14 | } | ||
15 | |||
16 | @function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
17 | @return color($key, $tree, $default, $global); | ||
18 | } | ||
19 | |||
20 | @function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
21 | @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global); | ||
22 | } | ||
23 | |||
24 | @function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
25 | @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); | ||
26 | } | ||
27 | |||
28 | @function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
29 | @return dim($key, $tree, $default, $global); | ||
30 | } | ||
31 | |||
32 | @function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
33 | @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global); | ||
34 | } | ||
35 | 11 | ||
36 | @function font-prop($data, $overrides, $key, $prop) { | 12 | @function font-prop($data, $overrides, $key, $prop) { |
37 | @if (map.has-key($overrides, $prop)) { | 13 | @if (map.has-key($overrides, $prop)) { |
@@ -60,10 +36,6 @@ | |||
60 | @return $map; | 36 | @return $map; |
61 | } | 37 | } |
62 | 38 | ||
63 | @function lum($color) { | ||
64 | @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; | ||
65 | } | ||
66 | |||
67 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { | 39 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { |
68 | $base-lch: color.to-space($base-color, oklch); | 40 | $base-lch: color.to-space($base-color, oklch); |
69 | $ref-lch: color.to-space($ref-color, oklch); | 41 | $ref-lch: color.to-space($ref-color, oklch); |
@@ -82,7 +54,7 @@ | |||
82 | $chroma-inv: true; | 54 | $chroma-inv: true; |
83 | $chroma-range: -1 * $chroma-range; | 55 | $chroma-range: -1 * $chroma-range; |
84 | } | 56 | } |
85 | $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); | 57 | $chroma-easing: meta.get-function(palettes.$palette-chroma-easing, $module: easing); |
86 | 58 | ||
87 | $palette: (); | 59 | $palette: (); |
88 | 60 | ||
diff --git a/src/_palettes.scss b/src/_palettes.scss new file mode 100644 index 0000000..f8c5b23 --- /dev/null +++ b/src/_palettes.scss | |||
@@ -0,0 +1,234 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
3 | @use 'sass:math'; | ||
4 | @use 'iro-sass/src/index' as iro; | ||
5 | @use 'iro-sass/src/responsive' as res; | ||
6 | @use 'iro-sass/src/easing' as easing; | ||
7 | @use 'include-media/dist/include-media' as media; | ||
8 | |||
9 | iro.$vars-root-size: 16px; | ||
10 | |||
11 | media.$breakpoints: ( | ||
12 | lg: 1340px, | ||
13 | md: 900px, | ||
14 | sm: 620px, | ||
15 | xs: 400px, | ||
16 | ); | ||
17 | |||
18 | media.$unit-intervals: ( | ||
19 | 'px': 1, | ||
20 | 'em': .01, | ||
21 | 'rem': .01, | ||
22 | '': 0 | ||
23 | ); | ||
24 | |||
25 | res.$named-viewports: media.$breakpoints; | ||
26 | |||
27 | $palette-precision: .01 !default; | ||
28 | |||
29 | $palette-chroma-easing: 'ease' !default; | ||
30 | |||
31 | $static-colors-override: () !default; | ||
32 | $static-colors: map.deep-merge(( | ||
33 | --base: hsl(0, 0%, 98%), | ||
34 | |||
35 | --contrasts: ( | ||
36 | --100: math.div(0, 12) * 110 - 10, | ||
37 | --200: math.div(1, 12) * 110 - 10, | ||
38 | --300: math.div(2, 12) * 110 - 10, | ||
39 | --400: math.div(3, 12) * 110 - 10, | ||
40 | --500: math.div(4, 12) * 110 - 10, | ||
41 | --600: math.div(5, 12) * 110 - 10, | ||
42 | --700: math.div(6, 12) * 110 - 10, | ||
43 | --800: math.div(7, 12) * 110 - 10, | ||
44 | --900: math.div(8, 12) * 110 - 10, | ||
45 | --1000: math.div(9, 12) * 110 - 10, | ||
46 | --1100: math.div(10, 12) * 110 - 10, | ||
47 | --1200: math.div(11, 12) * 110 - 10, | ||
48 | --1300: math.div(12, 12) * 110 - 10, | ||
49 | ), | ||
50 | |||
51 | --palettes: ( | ||
52 | --blue: oklch(56% .14 275.25), | ||
53 | --purple: oklch(56% .14 305.58), | ||
54 | --red: oklch(56% .14 14.69), | ||
55 | --green: oklch(56% .14 150.48), | ||
56 | --yellow: oklch(56% .14 84.08), | ||
57 | ), | ||
58 | |||
59 | --transparents: ( | ||
60 | --100: 0, | ||
61 | --200: .1, | ||
62 | --300: .25, | ||
63 | --400: .4, | ||
64 | --500: .55, | ||
65 | --600: .7, | ||
66 | --700: .8, | ||
67 | --800: .9, | ||
68 | --900: 1, | ||
69 | ), | ||
70 | ), $static-colors-override) !default; | ||
71 | |||
72 | $semantic-colors-common-override: () !default; | ||
73 | $semantic-colors-common: map.deep-merge(( | ||
74 | --accent: --theme --blue, | ||
75 | --accent-static: --static --blue, | ||
76 | --positive: --theme --green, | ||
77 | --positive-static: --static --green, | ||
78 | --negative: --theme --red, | ||
79 | --negative-static: --static --red, | ||
80 | --warning: --theme --yellow, | ||
81 | --warning-static: --static --yellow, | ||
82 | |||
83 | --focus-raw: --theme --accent, | ||
84 | --focus-static: --theme --accent-static, | ||
85 | |||
86 | --border-mute: --theme --base --200, | ||
87 | --border: --theme --base --300, | ||
88 | --border-strong: --theme --base --400, | ||
89 | |||
90 | --text-disabled: --theme --base --500, | ||
91 | --text-mute-more: --theme --base --600, | ||
92 | --text-mute: --theme --base --700, | ||
93 | --text: --theme --base --800, | ||
94 | --heading: --theme --base --900, | ||
95 | |||
96 | --focus: ( | ||
97 | --outline: --theme --focus-raw --400, | ||
98 | --border-mute: --theme --focus-raw --900, | ||
99 | --border: --theme --focus-raw --1000, | ||
100 | --border-text: --theme --focus-raw --1000-text, | ||
101 | --border-strong: --theme --focus-raw --1100, | ||
102 | --text: --theme --focus-raw --1100, | ||
103 | ), | ||
104 | ), $semantic-colors-common-override) !default; | ||
105 | |||
106 | $theme-light-override: () !default; | ||
107 | $theme-light: map.deep-merge(( | ||
108 | --contrasts: ( | ||
109 | --grays: ( | ||
110 | --50: -8, | ||
111 | --75: -4, | ||
112 | --100: 0, | ||
113 | |||
114 | --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98, | ||
115 | --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98, | ||
116 | --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98, | ||
117 | |||
118 | --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98, | ||
119 | --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98, | ||
120 | --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98, | ||
121 | --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98, | ||
122 | --900: 106, | ||
123 | ), | ||
124 | |||
125 | --colors: ( | ||
126 | --100: math.div(0, 12) * 96 + 5, | ||
127 | --200: math.div(1, 12) * 96 + 5, | ||
128 | --300: math.div(2, 12) * 96 + 5, | ||
129 | --400: math.div(3, 12) * 96 + 5, | ||
130 | --500: math.div(4, 12) * 96 + 5, | ||
131 | --600: math.div(5, 12) * 96 + 5, | ||
132 | --700: math.div(6, 12) * 96 + 5, | ||
133 | --800: math.div(7, 12) * 96 + 5, | ||
134 | --900: math.div(8, 12) * 96 + 5, | ||
135 | --1000: math.div(9, 12) * 96 + 5, | ||
136 | --1100: math.div(10, 12) * 96 + 5, | ||
137 | --1200: math.div(11, 12) * 96 + 5, | ||
138 | --1300: math.div(12, 12) * 96 + 5, | ||
139 | ), | ||
140 | ), | ||
141 | |||
142 | --ranges: ( | ||
143 | --full: .3, | ||
144 | --muted: .1, | ||
145 | ), | ||
146 | |||
147 | --palettes: ( | ||
148 | --base: hsl(260, 90%, 98%) --grays --full, | ||
149 | --blue: oklch(56% .16 275.25) --colors --muted, | ||
150 | --purple: oklch(56% .16 305.58) --colors --muted, | ||
151 | --red: oklch(56% .16 14.69) --colors --muted, | ||
152 | --green: oklch(56% .16 150.48) --colors --muted, | ||
153 | --yellow: oklch(56% .16 84.08) --colors --muted, | ||
154 | ), | ||
155 | |||
156 | --semantic: map.merge($semantic-colors-common, ( | ||
157 | --bg-l2: --theme --base --50, | ||
158 | --bg-l1: --theme --base --100, | ||
159 | --bg-base: --theme --base --200, | ||
160 | )), | ||
161 | |||
162 | --constants: ( | ||
163 | --shadow: rgba(#000, .15), | ||
164 | ), | ||
165 | ), $theme-light-override) !default; | ||
166 | |||
167 | $theme-dark-override: () !default; | ||
168 | $theme-dark: map.deep-merge(( | ||
169 | --contrasts: ( | ||
170 | --grays: ( | ||
171 | --50: 4.4, | ||
172 | --75: 2.2, | ||
173 | --100: 0, | ||
174 | |||
175 | --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, | ||
176 | --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, | ||
177 | --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, | ||
178 | |||
179 | --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, | ||
180 | --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, | ||
181 | --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, | ||
182 | --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, | ||
183 | --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, | ||
184 | ), | ||
185 | |||
186 | --colors: ( | ||
187 | --100: math.div(0, 12) * -100 - 5, | ||
188 | --200: math.div(1, 12) * -100 - 5, | ||
189 | --300: math.div(2, 12) * -100 - 5, | ||
190 | --400: math.div(3, 12) * -100 - 5, | ||
191 | --500: math.div(4, 12) * -100 - 5, | ||
192 | --600: math.div(5, 12) * -100 - 5, | ||
193 | --700: math.div(6, 12) * -100 - 5, | ||
194 | --800: math.div(7, 12) * -100 - 5, | ||
195 | --900: math.div(8, 12) * -100 - 5, | ||
196 | --1000: math.div(9, 12) * -100 - 5, | ||
197 | --1100: math.div(10, 12) * -100 - 5, | ||
198 | --1200: math.div(11, 12) * -100 - 5, | ||
199 | --1300: math.div(12, 12) * -100 - 5, | ||
200 | ), | ||
201 | ), | ||
202 | |||
203 | --ranges: ( | ||
204 | --full: 1, | ||
205 | --muted: .3, | ||
206 | ), | ||
207 | |||
208 | --palettes: ( | ||
209 | --base: hsl(257, 7%, 19%) --grays --full, | ||
210 | --blue: oklch(56% .16 275.25) --colors --muted, | ||
211 | --purple: oklch(56% .16 305.58) --colors --muted, | ||
212 | --red: oklch(56% .16 14.69) --colors --muted, | ||
213 | --green: oklch(56% .16 150.48) --colors --muted, | ||
214 | --yellow: oklch(56% .16 84.08) --colors --muted, | ||
215 | ), | ||
216 | |||
217 | --semantic: map.merge($semantic-colors-common, ( | ||
218 | --bg-base: --theme --base --50, | ||
219 | --bg-l1: --theme --base --75, | ||
220 | --bg-l2: --theme --base --100, | ||
221 | )), | ||
222 | |||
223 | --constants: ( | ||
224 | --shadow: rgba(#000, .5), | ||
225 | ), | ||
226 | ), $theme-dark-override) !default; | ||
227 | |||
228 | $themes-override: () !default; | ||
229 | $themes: map.deep-merge(( | ||
230 | light: $theme-light, | ||
231 | dark: $theme-dark, | ||
232 | ), $themes-override) !default; | ||
233 | |||
234 | $theme-default: list.nth(map.keys($themes), 1) !default; | ||
diff --git a/src/_props.scss b/src/_props.scss new file mode 100644 index 0000000..f7f54c5 --- /dev/null +++ b/src/_props.scss | |||
@@ -0,0 +1,105 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
3 | @use 'sass:meta'; | ||
4 | |||
5 | @use 'iro-sass/src/functions' as functions; | ||
6 | |||
7 | @function is-prop-ref($value) { | ||
8 | @if meta.type-of($value) != 'list' { | ||
9 | @return false; | ||
10 | } | ||
11 | @if list.length($value) != 3 { | ||
12 | @return false; | ||
13 | } | ||
14 | @if list.nth($value, 1) != 'prop-ref' { | ||
15 | @return false; | ||
16 | } | ||
17 | @return true; | ||
18 | } | ||
19 | |||
20 | @function def($name, $value: ()) { | ||
21 | @return ('prop-ref' $name $value); | ||
22 | } | ||
23 | |||
24 | @function merge($ref, $value) { | ||
25 | @if not is-prop-ref($ref) { | ||
26 | @return $ref; | ||
27 | } | ||
28 | |||
29 | $v: list.nth($ref, 3); | ||
30 | $ref: list.set-nth($ref, 3, map.deep-merge($v, $value)); | ||
31 | @return $ref; | ||
32 | } | ||
33 | |||
34 | @function get-deep($name, $value, $key: (), $keys...) { | ||
35 | @if is-prop-ref($value) { | ||
36 | // $value: list.nth($value, 3); | ||
37 | @return get($value, $key, $keys); | ||
38 | } | ||
39 | @if meta.type-of($value) == 'map' { | ||
40 | @if list.length($keys) == 0 { | ||
41 | @return #{$name}#{$key} map.get($value, $key); | ||
42 | } @else { | ||
43 | @return get-deep(#{$name}#{$key}, map.get($value, $key), $keys...); | ||
44 | } | ||
45 | } | ||
46 | @return $name $value; | ||
47 | } | ||
48 | |||
49 | @function map-to-vars($name, $map) { | ||
50 | @if meta.type-of($map) != 'map' { | ||
51 | @return var($name); | ||
52 | } | ||
53 | |||
54 | $out: (); | ||
55 | |||
56 | @each $key, $value in $map { | ||
57 | $out: map.set($out, $key, map-to-vars(#{$name}#{$key}, $value)); | ||
58 | } | ||
59 | |||
60 | @return $out; | ||
61 | } | ||
62 | |||
63 | @function get($ref, $key: (), $keys...) { | ||
64 | @if not is-prop-ref($ref) { | ||
65 | @return $ref; | ||
66 | } | ||
67 | |||
68 | $name: list.nth($ref, 2); | ||
69 | $value: get(list.nth($ref, 3)); | ||
70 | |||
71 | @if meta.type-of($value) == 'map' { | ||
72 | $res: get-deep($name, $value, $key, $keys...); | ||
73 | $name: list.nth($res, 1); | ||
74 | $value: list.nth($res, 2); | ||
75 | } @else if meta.type-of($value) == 'list' { | ||
76 | $i: 1; | ||
77 | @each $item in $value { | ||
78 | $value: list.set-nth($value, $i, get($item)); | ||
79 | $i: $i + 1; | ||
80 | } | ||
81 | } | ||
82 | |||
83 | @return map-to-vars($name, $value); | ||
84 | } | ||
85 | |||
86 | @mixin declare-helper($name, $value) { | ||
87 | @if meta.type-of($value) == 'map' { | ||
88 | @each $key, $value in $value { | ||
89 | @include declare-helper(#{$name}#{$key}, $value); | ||
90 | } | ||
91 | } @else { | ||
92 | #{$name}: #{$value}; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | @mixin materialize($refs) { | ||
97 | @each $ref in $refs { | ||
98 | @if is-prop-ref($ref) { | ||
99 | $name: list.nth($ref, 2); | ||
100 | $value: get(list.nth($ref, 3)); | ||
101 | |||
102 | @include declare-helper($name, $value); | ||
103 | } | ||
104 | } | ||
105 | } | ||
diff --git a/src/_vars.scss b/src/_vars.scss index afe1e15..aaa38a0 100644 --- a/src/_vars.scss +++ b/src/_vars.scss | |||
@@ -4,243 +4,161 @@ | |||
4 | @use 'iro-sass/src/index' as iro; | 4 | @use 'iro-sass/src/index' as iro; |
5 | @use 'include-media/dist/include-media' as media; | 5 | @use 'include-media/dist/include-media' as media; |
6 | @use 'functions' as fn; | 6 | @use 'functions' as fn; |
7 | @use 'config'; | 7 | @use 'palettes'; |
8 | @use 'props'; | ||
9 | |||
10 | $size--0: props.def(--size--0, 0) !default; | ||
11 | $size--10: props.def(--size--10, iro.fn-px-to-rem(1px)) !default; | ||
12 | $size--25: props.def(--size--25, iro.fn-px-to-rem(2px)) !default; | ||
13 | $size--40: props.def(--size--40, iro.fn-px-to-rem(3px)) !default; | ||
14 | $size--50: props.def(--size--50, iro.fn-px-to-rem(4px)) !default; | ||
15 | $size--65: props.def(--size--65, iro.fn-px-to-rem(5px)) !default; | ||
16 | $size--75: props.def(--size--75, iro.fn-px-to-rem(6px)) !default; | ||
17 | $size--85: props.def(--size--85, iro.fn-px-to-rem(7px)) !default; | ||
18 | $size--100: props.def(--size--100, iro.fn-px-to-rem(8px)) !default; | ||
19 | $size--115: props.def(--size--115, iro.fn-px-to-rem(9px)) !default; | ||
20 | $size--125: props.def(--size--125, iro.fn-px-to-rem(10px)) !default; | ||
21 | $size--130: props.def(--size--130, iro.fn-px-to-rem(11px)) !default; | ||
22 | $size--150: props.def(--size--150, iro.fn-px-to-rem(12px)) !default; | ||
23 | $size--160: props.def(--size--160, iro.fn-px-to-rem(13px)) !default; | ||
24 | $size--175: props.def(--size--175, iro.fn-px-to-rem(14px)) !default; | ||
25 | $size--200: props.def(--size--200, iro.fn-px-to-rem(16px)) !default; | ||
26 | $size--225: props.def(--size--225, iro.fn-px-to-rem(18px)) !default; | ||
27 | $size--250: props.def(--size--250, iro.fn-px-to-rem(20px)) !default; | ||
28 | $size--275: props.def(--size--275, iro.fn-px-to-rem(22px)) !default; | ||
29 | $size--300: props.def(--size--300, iro.fn-px-to-rem(24px)) !default; | ||
30 | $size--325: props.def(--size--325, iro.fn-px-to-rem(26px)) !default; | ||
31 | $size--350: props.def(--size--350, iro.fn-px-to-rem(28px)) !default; | ||
32 | $size--375: props.def(--size--375, iro.fn-px-to-rem(30px)) !default; | ||
33 | $size--400: props.def(--size--400, iro.fn-px-to-rem(32px)) !default; | ||
34 | $size--450: props.def(--size--450, iro.fn-px-to-rem(36px)) !default; | ||
35 | $size--500: props.def(--size--500, iro.fn-px-to-rem(40px)) !default; | ||
36 | $size--550: props.def(--size--550, iro.fn-px-to-rem(44px)) !default; | ||
37 | $size--600: props.def(--size--600, iro.fn-px-to-rem(48px)) !default; | ||
38 | $size--650: props.def(--size--650, iro.fn-px-to-rem(52px)) !default; | ||
39 | $size--700: props.def(--size--700, iro.fn-px-to-rem(56px)) !default; | ||
40 | $size--800: props.def(--size--800, iro.fn-px-to-rem(64px)) !default; | ||
41 | $size--900: props.def(--size--900, iro.fn-px-to-rem(72px)) !default; | ||
42 | $size--1000: props.def(--size--1000, iro.fn-px-to-rem(80px)) !default; | ||
43 | $size--1200: props.def(--size--1200, iro.fn-px-to-rem(96px)) !default; | ||
44 | $size--1600: props.def(--size--1600, iro.fn-px-to-rem(128px)) !default; | ||
45 | $size--2000: props.def(--size--2000, iro.fn-px-to-rem(160px)) !default; | ||
46 | $size--2400: props.def(--size--2400, iro.fn-px-to-rem(192px)) !default; | ||
47 | $size--2500: props.def(--size--2500, iro.fn-px-to-rem(200px)) !default; | ||
48 | $size--2600: props.def(--size--2600, iro.fn-px-to-rem(208px)) !default; | ||
49 | $size--2800: props.def(--size--2800, iro.fn-px-to-rem(224px)) !default; | ||
50 | $size--3200: props.def(--size--3200, iro.fn-px-to-rem(256px)) !default; | ||
51 | $size--3400: props.def(--size--3400, iro.fn-px-to-rem(272px)) !default; | ||
52 | $size--3500: props.def(--size--3500, iro.fn-px-to-rem(280px)) !default; | ||
53 | $size--3600: props.def(--size--3600, iro.fn-px-to-rem(288px)) !default; | ||
54 | $size--3800: props.def(--size--3800, iro.fn-px-to-rem(304px)) !default; | ||
55 | $size--4600: props.def(--size--4600, iro.fn-px-to-rem(368px)) !default; | ||
56 | $size--5000: props.def(--size--5000, iro.fn-px-to-rem(400px)) !default; | ||
57 | $size--6000: props.def(--size--6000, iro.fn-px-to-rem(480px)) !default; | ||
58 | |||
59 | $font--standard--family: props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default; | ||
60 | $font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default; | ||
61 | $font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default; | ||
62 | |||
63 | $font--headline--family: props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default; | ||
64 | $font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default; | ||
65 | $font--headline--weight: props.def(--font--headline--weight, 800) !default; | ||
66 | $font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default; | ||
67 | |||
68 | $font--mono--family: props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default; | ||
69 | $font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default; | ||
70 | |||
71 | $font-size--50: props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default; | ||
72 | $font-size--75: props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default; | ||
73 | $font-size--100: props.def(--font-size--100, iro.fn-px-to-rem(14px)) !default; | ||
74 | $font-size--150: props.def(--font-size--150, iro.fn-px-to-rem(16px)) !default; | ||
75 | $font-size--200: props.def(--font-size--200, iro.fn-px-to-rem(18px)) !default; | ||
76 | $font-size--300: props.def(--font-size--300, iro.fn-px-to-rem(20px)) !default; | ||
77 | $font-size--400: props.def(--font-size--400, iro.fn-px-to-rem(24px)) !default; | ||
78 | $font-size--500: props.def(--font-size--500, iro.fn-px-to-rem(28px)) !default; | ||
79 | $font-size--600: props.def(--font-size--600, iro.fn-px-to-rem(32px)) !default; | ||
80 | $font-size--700: props.def(--font-size--700, iro.fn-px-to-rem(36px)) !default; | ||
81 | $font-size--800: props.def(--font-size--800, iro.fn-px-to-rem(40px)) !default; | ||
82 | $font-size--900: props.def(--font-size--900, iro.fn-px-to-rem(45px)) !default; | ||
83 | $font-size--1000: props.def(--font-size--1000, iro.fn-px-to-rem(50px)) !default; | ||
84 | $font-size--1100: props.def(--font-size--1100, iro.fn-px-to-rem(60px)) !default; | ||
85 | |||
86 | $border-width--thick: props.def(--border-width--thick, 4px) !default; | ||
87 | $border-width--medium: props.def(--border-width--medium, 2px) !default; | ||
88 | $border-width--thin: props.def(--border-width--thin, 1px) !default; | ||
89 | |||
90 | $shadow--x: props.def(--shadow--x, 0) !default; | ||
91 | $shadow--y: props.def(--shadow--y, 1px) !default; | ||
92 | $shadow--blur: props.def(--shadow--blur, 4px) !default; | ||
93 | |||
94 | $rounding: props.def(--rounding, 4px) !default; | ||
95 | |||
96 | $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; | ||
97 | $key-focus--border: props.def(--key-focus--border, props.get($border-width--medium)) !default; | ||
98 | $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default; | ||
99 | |||
100 | $paragraph--margin-bs: props.def(--paragraph--margin-bs, props.get($size--300)) !default; | ||
101 | |||
102 | $heading--margin-bs: props.def(--heading--margin-bs, props.get($size--700)) !default; | ||
103 | $heading--margin-bs-sibling: props.def(--heading--margin-bs-sibling, props.get($size--325)) !default; | ||
104 | $heading--xxl: props.def(--heading--xxl, props.get($font-size--300)) !default; | ||
105 | $heading--xl: props.def(--heading--xl, props.get($font-size--200)) !default; | ||
106 | $heading--lg: props.def(--heading--lg, props.get($font-size--150)) !default; | ||
107 | $heading--md: props.def(--heading--md, props.get($font-size--100)) !default; | ||
108 | $heading--sm: props.def(--heading--sm, props.get($font-size--75)) !default; | ||
109 | $heading--xs: props.def(--heading--xs, props.get($font-size--50)) !default; | ||
110 | $heading--display--xxl: props.def(--heading--display--xxl, props.get($font-size--1100)) !default; | ||
111 | $heading--display--xl: props.def(--heading--display--xl, props.get($font-size--700)) !default; | ||
112 | $heading--display--lg: props.def(--heading--display--lg, props.get($font-size--300)) !default; | ||
113 | $heading--display--md: props.def(--heading--display--md, props.get($font-size--150)) !default; | ||
114 | $heading--display--sm: props.def(--heading--display--sm, props.get($font-size--75)) !default; | ||
115 | $heading--display--xs: props.def(--heading--display--xs, props.get($font-size--50)) !default; | ||
116 | $heading--display-sm--xxl: props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default; | ||
117 | $heading--display-sm--xl: props.def(--heading--display-sm--xl, props.get($font-size--600)) !default; | ||
118 | $heading--display-sm--lg: props.def(--heading--display-sm--lg, props.get($font-size--200)) !default; | ||
119 | $heading--display-sm--md: props.def(--heading--display-sm--md, props.get($font-size--100)) !default; | ||
120 | $heading--display-sm--sm: props.def(--heading--display-sm--sm, props.get($font-size--75)) !default; | ||
121 | $heading--display-sm--xs: props.def(--heading--display-sm--xs, props.get($font-size--50)) !default; | ||
122 | |||
123 | $list--indent: props.def(--list--indent, props.get($size--400)) !default; | ||
124 | $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default; | ||
8 | 125 | ||
9 | @include iro.props-store(( | 126 | // |
10 | --dims: ( | ||
11 | --size: ( | ||
12 | --0: 0, | ||
13 | --10: iro.fn-px-to-rem(1px), | ||
14 | --25: iro.fn-px-to-rem(2px), | ||
15 | --40: iro.fn-px-to-rem(3px), | ||
16 | --50: iro.fn-px-to-rem(4px), | ||
17 | --65: iro.fn-px-to-rem(5px), | ||
18 | --75: iro.fn-px-to-rem(6px), | ||
19 | --85: iro.fn-px-to-rem(7px), | ||
20 | --100: iro.fn-px-to-rem(8px), | ||
21 | --115: iro.fn-px-to-rem(9px), | ||
22 | --125: iro.fn-px-to-rem(10px), | ||
23 | --130: iro.fn-px-to-rem(11px), | ||
24 | --150: iro.fn-px-to-rem(12px), | ||
25 | --160: iro.fn-px-to-rem(13px), | ||
26 | --175: iro.fn-px-to-rem(14px), | ||
27 | --200: iro.fn-px-to-rem(16px), | ||
28 | --225: iro.fn-px-to-rem(18px), | ||
29 | --250: iro.fn-px-to-rem(20px), | ||
30 | --275: iro.fn-px-to-rem(22px), | ||
31 | --300: iro.fn-px-to-rem(24px), | ||
32 | --325: iro.fn-px-to-rem(26px), | ||
33 | --350: iro.fn-px-to-rem(28px), | ||
34 | --375: iro.fn-px-to-rem(30px), | ||
35 | --400: iro.fn-px-to-rem(32px), | ||
36 | --450: iro.fn-px-to-rem(36px), | ||
37 | --500: iro.fn-px-to-rem(40px), | ||
38 | --550: iro.fn-px-to-rem(44px), | ||
39 | --600: iro.fn-px-to-rem(48px), | ||
40 | --650: iro.fn-px-to-rem(52px), | ||
41 | --700: iro.fn-px-to-rem(56px), | ||
42 | --800: iro.fn-px-to-rem(64px), | ||
43 | --900: iro.fn-px-to-rem(72px), | ||
44 | --1000: iro.fn-px-to-rem(80px), | ||
45 | --1200: iro.fn-px-to-rem(96px), | ||
46 | --1600: iro.fn-px-to-rem(128px), | ||
47 | --2000: iro.fn-px-to-rem(160px), | ||
48 | --2400: iro.fn-px-to-rem(192px), | ||
49 | --2500: iro.fn-px-to-rem(200px), | ||
50 | --2600: iro.fn-px-to-rem(208px), | ||
51 | --2800: iro.fn-px-to-rem(224px), | ||
52 | --3200: iro.fn-px-to-rem(256px), | ||
53 | --3400: iro.fn-px-to-rem(272px), | ||
54 | --3500: iro.fn-px-to-rem(280px), | ||
55 | --3600: iro.fn-px-to-rem(288px), | ||
56 | --3800: iro.fn-px-to-rem(304px), | ||
57 | --4600: iro.fn-px-to-rem(368px), | ||
58 | --5000: iro.fn-px-to-rem(400px), | ||
59 | --6000: iro.fn-px-to-rem(480px), | ||
60 | ), | ||
61 | |||
62 | --font: ( | ||
63 | --standard: ( | ||
64 | --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), | ||
65 | --line-height: 1.5, | ||
66 | --feature-settings: ('\'ss01\''), | ||
67 | ), | ||
68 | --headline: ( | ||
69 | --family: ('Inter', fn.dim(--font --standard --family, null)), | ||
70 | --line-height: 1.3, | ||
71 | --weight: 800, | ||
72 | --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''), | ||
73 | ), | ||
74 | --mono: ( | ||
75 | --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace), | ||
76 | --line-height: 1.4, | ||
77 | ) | ||
78 | ), | ||
79 | |||
80 | --font-size: ( | ||
81 | --50: iro.fn-px-to-rem(12px), | ||
82 | --75: iro.fn-px-to-rem(13px), | ||
83 | --100: iro.fn-px-to-rem(14px), | ||
84 | --150: iro.fn-px-to-rem(16px), | ||
85 | --200: iro.fn-px-to-rem(18px), | ||
86 | --300: iro.fn-px-to-rem(20px), | ||
87 | --400: iro.fn-px-to-rem(24px), | ||
88 | --500: iro.fn-px-to-rem(28px), | ||
89 | --600: iro.fn-px-to-rem(32px), | ||
90 | --700: iro.fn-px-to-rem(36px), | ||
91 | --800: iro.fn-px-to-rem(40px), | ||
92 | --900: iro.fn-px-to-rem(45px), | ||
93 | --1000: iro.fn-px-to-rem(50px), | ||
94 | --1100: iro.fn-px-to-rem(60px), | ||
95 | ), | ||
96 | |||
97 | --border: ( | ||
98 | --thick: 4px, | ||
99 | --medium: 2px, | ||
100 | --thin: 1px, | ||
101 | ), | ||
102 | |||
103 | --shadow: ( | ||
104 | --x: 0, | ||
105 | --y: 1px, | ||
106 | --blur: 4px, | ||
107 | ), | ||
108 | |||
109 | --rounding: 4px, | ||
110 | |||
111 | --key-focus: ( | ||
112 | --outline: fn.dim(--border --thick, null), | ||
113 | --border: fn.dim(--border --medium, null), | ||
114 | --border-offset: fn.dim(--border --medium, null), | ||
115 | ), | ||
116 | |||
117 | --paragraph: ( | ||
118 | --margin-bs: fn.dim(--size --300, null), | ||
119 | ), | ||
120 | |||
121 | --heading: ( | ||
122 | --margin-bs: fn.dim(--size --700, null), | ||
123 | --margin-bs-sibling: fn.dim(--size --325, null), | ||
124 | |||
125 | --xxl: fn.dim(--font-size --300, null), | ||
126 | --xl: fn.dim(--font-size --200, null), | ||
127 | --lg: fn.dim(--font-size --150, null), | ||
128 | --md: fn.dim(--font-size --100, null), | ||
129 | --sm: fn.dim(--font-size --75, null), | ||
130 | --xs: fn.dim(--font-size --50, null), | ||
131 | |||
132 | --display: ( | ||
133 | --xxl: fn.dim(--font-size --1100, null), | ||
134 | --xl: fn.dim(--font-size --700, null), | ||
135 | --lg: fn.dim(--font-size --300, null), | ||
136 | --md: fn.dim(--font-size --150, null), | ||
137 | --sm: fn.dim(--font-size --75, null), | ||
138 | --xs: fn.dim(--font-size --50, null), | ||
139 | ), | ||
140 | |||
141 | --display-sm: ( | ||
142 | --xxl: fn.dim(--font-size --900, null), | ||
143 | --xl: fn.dim(--font-size --600, null), | ||
144 | --lg: fn.dim(--font-size --200, null), | ||
145 | --md: fn.dim(--font-size --100, null), | ||
146 | --sm: fn.dim(--font-size --75, null), | ||
147 | --xs: fn.dim(--font-size --50, null), | ||
148 | ) | ||
149 | ), | ||
150 | |||
151 | --list: ( | ||
152 | --indent: fn.dim(--size --400, null), | ||
153 | --compact-indent: fn.dim(--size --250, null), | ||
154 | ), | ||
155 | ), | ||
156 | )); | ||
157 | 127 | ||
158 | @each $breakpoint in map.keys(media.$breakpoints) { | 128 | $static-colors: props.def(--static-colors); |
159 | @include media.media('<=#{$breakpoint}') { | 129 | @each $palette-name, $palette in map.get(palettes.$static-colors, --palettes) { |
160 | @include iro.props-store((), $breakpoint); | 130 | $palette: fn.palette($palette, map.get(palettes.$static-colors, --contrasts), 1, map.get(palettes.$static-colors, --base)); |
161 | } | 131 | $static-colors: props.merge($static-colors, ( $palette-name: $palette )); |
162 | } | 132 | } |
163 | 133 | ||
164 | @include iro.props-store(( | ||
165 | --dims: ( | ||
166 | --heading: ( | ||
167 | --margin-bs: fn.dim(--size --600, null), | ||
168 | ), | ||
169 | |||
170 | --list: ( | ||
171 | --indent: fn.dim(--size --300), | ||
172 | ), | ||
173 | ) | ||
174 | ), 'sm'); | ||
175 | |||
176 | @include iro.props-store(( | ||
177 | --dims: ( | ||
178 | --heading: ( | ||
179 | --margin-bs: fn.dim(--size --500, null), | ||
180 | ), | ||
181 | |||
182 | --list: ( | ||
183 | --indent: fn.dim(--size --250), | ||
184 | ), | ||
185 | ) | ||
186 | ), 'xs'); | ||
187 | |||
188 | // | 134 | // |
189 | 135 | ||
190 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | 136 | $transparent-colors: props.def(--transparent-colors); |
191 | @include iro.props-store(( | ||
192 | --colors: ( | ||
193 | #{$palette-name}-static: fn.palette( | ||
194 | $palette, | ||
195 | map.get(config.$static-colors, --contrasts), | ||
196 | 1, | ||
197 | map.get(config.$static-colors, --base), | ||
198 | ), | ||
199 | ), | ||
200 | )); | ||
201 | } | ||
202 | |||
203 | @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { | 137 | @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { |
204 | $color: list.nth($palette, 1); | 138 | $color: list.nth($palette, 1); |
205 | $text: list.nth($palette, 2); | 139 | $text: list.nth($palette, 2); |
206 | 140 | ||
207 | @include iro.props-store(( | 141 | $palette: fn.transparent-palette($color, $text, map.get(palettes.$static-colors, --transparents)); |
208 | --colors: ( | 142 | $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); |
209 | #{$palette-name}-transparent: fn.transparent-palette( | ||
210 | $color, | ||
211 | $text, | ||
212 | map.get(config.$static-colors, --transparents), | ||
213 | ), | ||
214 | ), | ||
215 | )); | ||
216 | } | 143 | } |
217 | 144 | ||
218 | @each $theme-name, $theme in config.$themes { | 145 | // |
219 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | 146 | |
147 | $themes: props.def(--themes); | ||
148 | @each $theme-name, $theme in palettes.$themes { | ||
149 | $themes: props.merge($themes, ( --#{$theme-name}: () )); | ||
220 | 150 | ||
221 | @each $palette-name, $palette in map.get($theme, --palettes) { | 151 | @each $palette-name, $palette in map.get($theme, --palettes) { |
222 | $base-color: list.nth($palette, 1); | 152 | $base-color: list.nth($palette, 1); |
223 | $contrasts: list.nth($palette, 2); | 153 | $contrasts: list.nth($palette, 2); |
224 | $ranges: list.nth($palette, 3); | 154 | $ranges: list.nth($palette, 3); |
225 | 155 | ||
226 | @include iro.props-store(( | 156 | $palette: fn.palette($base-color, map.get($theme, --contrasts, $contrasts), map.get($theme, --ranges, $ranges), list.nth(map.get($theme, --palettes, --base), 1)); |
227 | --colors: ( | 157 | $themes: props.merge($themes, ( --#{$theme-name}: ( $palette-name: $palette ) )); |
228 | $palette-name: fn.palette( | ||
229 | $base-color, | ||
230 | map.get($theme, --contrasts, $contrasts), | ||
231 | map.get($theme, --ranges, $ranges), | ||
232 | list.nth(map.get($theme, --palettes, --base), 1), | ||
233 | ), | ||
234 | ), | ||
235 | ), $tree); | ||
236 | } | 158 | } |
237 | 159 | ||
238 | @each $color, $value in map.get($theme, --constants) { | 160 | @each $color, $value in map.get($theme, --constants) { |
239 | @include iro.props-store(( | 161 | $themes: props.merge($themes, ( --#{$theme-name}: ( $color: $value ) )); |
240 | --colors: ( | ||
241 | $color: $value, | ||
242 | ), | ||
243 | ), $tree); | ||
244 | } | 162 | } |
245 | 163 | ||
246 | @each $color, $ref in map.get($theme, --semantic) { | 164 | @each $color, $ref in map.get($theme, --semantic) { |
@@ -248,42 +166,34 @@ | |||
248 | 166 | ||
249 | @if meta.type-of($ref) == 'map' { | 167 | @if meta.type-of($ref) == 'map' { |
250 | @each $key, $r in $ref { | 168 | @each $key, $r in $ref { |
251 | $res: map.set($res, $key, fn.color($r)); | 169 | $repo-name: list.nth($r, 1); |
252 | } | 170 | $re1: list.nth($r, 2); |
253 | } @else { | 171 | $re2: iro.fn-list-slice($r, 3); |
254 | $res: fn.color($ref); | ||
255 | } | ||
256 | 172 | ||
257 | @include iro.props-store(( | 173 | $res2: null; |
258 | --colors: ( | ||
259 | $color: $res, | ||
260 | ), | ||
261 | ), $tree); | ||
262 | } | ||
263 | } | ||
264 | 174 | ||
265 | @each $theme-name, $theme in config.$themes { | 175 | @if $repo-name == --static { |
266 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | 176 | $res2: props.get($static-colors, $re1, $re2...); |
177 | } @else { | ||
178 | $res2: props.get($themes, --#{$theme-name}, $re1, $re2...); | ||
179 | } | ||
267 | 180 | ||
268 | @include iro.props-store(( | 181 | $res: map.merge($res, ($key: $res2)); |
269 | --colors: ( | 182 | } |
270 | 183 | } @else { | |
271 | ), | 184 | $repo-name: list.nth($ref, 1); |
272 | ), $tree); | 185 | $ref1: list.nth($ref, 2); |
273 | } | 186 | $ref2: iro.fn-list-slice($ref, 3); |
274 | 187 | ||
275 | @mixin apply-vars { | 188 | $res: null; |
276 | :root { | ||
277 | @include iro.props-assign; | ||
278 | 189 | ||
279 | @each $breakpoint in map.keys(media.$breakpoints) { | 190 | @if $repo-name == --static { |
280 | @include media.media('<=#{$breakpoint}') { | 191 | $res: props.get($static-colors, $ref1, $ref2...); |
281 | @include iro.props-assign($breakpoint); | 192 | } @else { |
193 | $res: props.get($themes, --#{$theme-name}, $ref1, $ref2...); | ||
282 | } | 194 | } |
283 | } | 195 | } |
284 | 196 | ||
285 | @media (prefers-color-scheme: dark) { | 197 | $themes: props.merge($themes, ( --#{$theme-name}: ( $color: $res ) )); |
286 | @include iro.props-assign('dark'); | ||
287 | } | ||
288 | } | 198 | } |
289 | } | 199 | } |
diff --git a/src/index.scss b/src/index.scss index a8d9c24..5c2a1e8 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -1,10 +1,11 @@ | |||
1 | @use 'vars' as vars; | 1 | @use 'sass:map'; |
2 | @use 'sass:meta'; | ||
2 | 3 | ||
3 | @use 'base'; | 4 | @use 'props'; |
4 | @use 'layouts'; | 5 | @use 'vars'; |
5 | @use 'objects'; | ||
6 | @use 'scopes'; | ||
7 | @use 'themes'; | ||
8 | @use 'utils'; | ||
9 | 6 | ||
10 | @include vars.apply-vars; | 7 | $vars: map.values(meta.module-variables('vars')); |
8 | |||
9 | :root { | ||
10 | @include props.materialize($vars); | ||
11 | } | ||
diff --git a/src_demo/index.scss b/src_demo/index.scss index 3aed9e7..4812867 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss | |||
@@ -1,6 +1,6 @@ | |||
1 | @use '../src/vars' as vars; | 1 | @use '../src/vars' as vars; |
2 | 2 | ||
3 | @use '../src/base'; | 3 | //@use '../src/base'; |
4 | @use 'base' as demo-base; | 4 | @use 'base' as demo-base; |
5 | 5 | ||
6 | @use 'components/sidebar'; | 6 | @use 'components/sidebar'; |
diff --git a/src/.old/layouts/_message-group.scss b/src_old/.old/layouts/_message-group.scss index 235e242..235e242 100644 --- a/src/.old/layouts/_message-group.scss +++ b/src_old/.old/layouts/_message-group.scss | |||
diff --git a/src/.old/objects/_dialog.scss b/src_old/.old/objects/_dialog.scss index 9333ce6..9333ce6 100644 --- a/src/.old/objects/_dialog.scss +++ b/src_old/.old/objects/_dialog.scss | |||
diff --git a/src/.old/objects/_icon-nav.scss b/src_old/.old/objects/_icon-nav.scss index d1c6539..d1c6539 100644 --- a/src/.old/objects/_icon-nav.scss +++ b/src_old/.old/objects/_icon-nav.scss | |||
diff --git a/src/.old/objects/_list-group.scss b/src_old/.old/objects/_list-group.scss index a346828..a346828 100644 --- a/src/.old/objects/_list-group.scss +++ b/src_old/.old/objects/_list-group.scss | |||
diff --git a/src/.old/objects/_message.scss b/src_old/.old/objects/_message.scss index 283ce26..283ce26 100644 --- a/src/.old/objects/_message.scss +++ b/src_old/.old/objects/_message.scss | |||
diff --git a/src/.old/objects/_overflow-button.scss b/src_old/.old/objects/_overflow-button.scss index b15ea1f..b15ea1f 100644 --- a/src/.old/objects/_overflow-button.scss +++ b/src_old/.old/objects/_overflow-button.scss | |||
diff --git a/src/_base.scss b/src_old/_base.scss index 8e4c1d9..8e4c1d9 100644 --- a/src/_base.scss +++ b/src_old/_base.scss | |||
diff --git a/src/_config.scss b/src_old/_config.scss index a4e1cfa..62a1401 100644 --- a/src/_config.scss +++ b/src_old/_config.scss | |||
@@ -67,7 +67,7 @@ $static-colors: map.deep-merge(( | |||
67 | --800: .9, | 67 | --800: .9, |
68 | --900: 1, | 68 | --900: 1, |
69 | ), | 69 | ), |
70 | ), $static-colors-override); | 70 | ), $static-colors-override) !default; |
71 | 71 | ||
72 | $semantic-colors-common-override: () !default; | 72 | $semantic-colors-common-override: () !default; |
73 | $semantic-colors-common: map.deep-merge(( | 73 | $semantic-colors-common: map.deep-merge(( |
@@ -101,7 +101,7 @@ $semantic-colors-common: map.deep-merge(( | |||
101 | --border-strong: --focus-raw --1100, | 101 | --border-strong: --focus-raw --1100, |
102 | --text: --focus-raw --1100, | 102 | --text: --focus-raw --1100, |
103 | ), | 103 | ), |
104 | ), $semantic-colors-common-override); | 104 | ), $semantic-colors-common-override) !default; |
105 | 105 | ||
106 | $theme-light-override: () !default; | 106 | $theme-light-override: () !default; |
107 | $theme-light: map.deep-merge(( | 107 | $theme-light: map.deep-merge(( |
@@ -162,7 +162,7 @@ $theme-light: map.deep-merge(( | |||
162 | --constants: ( | 162 | --constants: ( |
163 | --shadow: rgba(#000, .15), | 163 | --shadow: rgba(#000, .15), |
164 | ), | 164 | ), |
165 | ), $theme-light-override); | 165 | ), $theme-light-override) !default; |
166 | 166 | ||
167 | $theme-dark-override: () !default; | 167 | $theme-dark-override: () !default; |
168 | $theme-dark: map.deep-merge(( | 168 | $theme-dark: map.deep-merge(( |
@@ -223,12 +223,12 @@ $theme-dark: map.deep-merge(( | |||
223 | --constants: ( | 223 | --constants: ( |
224 | --shadow: rgba(#000, .5), | 224 | --shadow: rgba(#000, .5), |
225 | ), | 225 | ), |
226 | ), $theme-dark-override); | 226 | ), $theme-dark-override) !default; |
227 | 227 | ||
228 | $themes-override: () !default; | 228 | $themes-override: () !default; |
229 | $themes: map.deep-merge(( | 229 | $themes: map.deep-merge(( |
230 | light: $theme-light, | 230 | light: $theme-light, |
231 | dark: $theme-dark, | 231 | dark: $theme-dark, |
232 | ), $themes-override); | 232 | ), $themes-override) !default; |
233 | 233 | ||
234 | $theme-default: list.nth(map.keys($themes), 1) !default; | 234 | $theme-default: list.nth(map.keys($themes), 1) !default; |
diff --git a/src_old/_functions.scss b/src_old/_functions.scss new file mode 100644 index 0000000..523aa84 --- /dev/null +++ b/src_old/_functions.scss | |||
@@ -0,0 +1,135 @@ | |||
1 | @use 'sass:color'; | ||
2 | @use 'sass:math'; | ||
3 | @use 'sass:map'; | ||
4 | @use 'sass:list'; | ||
5 | @use 'sass:meta'; | ||
6 | |||
7 | @use 'iro-sass/src/index' as iro; | ||
8 | @use 'iro-sass/src/easing' as easing; | ||
9 | @use 'functions/colors' as iro-colors; | ||
10 | @use 'config'; | ||
11 | |||
12 | @function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
13 | @return iro.props-get(list.join(--colors, $key), $tree, $default, $global); | ||
14 | } | ||
15 | |||
16 | @function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
17 | @return color($key, $tree, $default, $global); | ||
18 | } | ||
19 | |||
20 | @function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
21 | @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global); | ||
22 | } | ||
23 | |||
24 | @function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) { | ||
25 | @return iro.props-get(list.join(--dims, $key), $tree, $default, $global); | ||
26 | } | ||
27 | |||
28 | @function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
29 | @return dim($key, $tree, $default, $global); | ||
30 | } | ||
31 | |||
32 | @function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) { | ||
33 | @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global); | ||
34 | } | ||
35 | |||
36 | @function font-prop($data, $overrides, $key, $prop) { | ||
37 | @if (map.has-key($overrides, $prop)) { | ||
38 | @return map.get($overrides, $prop); | ||
39 | } @else if (map.has-key($data, $prop)) { | ||
40 | @return global-dim(--font $key $prop); | ||
41 | } | ||
42 | @return null; | ||
43 | } | ||
44 | |||
45 | @function set-font($key, $overrides: ()) { | ||
46 | $font: iro.props-get-static(list.join(--dims --font, $key), $global: true); | ||
47 | |||
48 | $map: ( | ||
49 | font-family: font-prop($font, $overrides, $key, --family), | ||
50 | font-size: font-prop($font, $overrides, $key, --size), | ||
51 | font-weight: font-prop($font, $overrides, $key, --weight), | ||
52 | font-style: font-prop($font, $overrides, $key, --style), | ||
53 | line-height: font-prop($font, $overrides, $key, --line-height), | ||
54 | text-transform: font-prop($font, $overrides, $key, --transform), | ||
55 | letter-spacing: font-prop($font, $overrides, $key, --spacing), | ||
56 | font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), | ||
57 | font-feature-settings: font-prop($font, $overrides, $key, --feature-settings), | ||
58 | ); | ||
59 | |||
60 | @return $map; | ||
61 | } | ||
62 | |||
63 | @function lum($color) { | ||
64 | @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; | ||
65 | } | ||
66 | |||
67 | @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) { | ||
68 | $base-lch: color.to-space($base-color, oklch); | ||
69 | $ref-lch: color.to-space($ref-color, oklch); | ||
70 | |||
71 | $ref-l: color.channel($ref-lch, 'lightness'); | ||
72 | $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch); | ||
73 | |||
74 | $cmax: math.max(map.values($contrasts)...); | ||
75 | $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); | ||
76 | |||
77 | $black-y: iro-colors.apca_sRGB_to_Y(#000); | ||
78 | $white-y: iro-colors.apca_sRGB_to_Y(#fff); | ||
79 | |||
80 | $chroma-inv: false; | ||
81 | @if $chroma-range < 0 { | ||
82 | $chroma-inv: true; | ||
83 | $chroma-range: -1 * $chroma-range; | ||
84 | } | ||
85 | $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); | ||
86 | |||
87 | $palette: (); | ||
88 | |||
89 | @each $key, $contrast in $contrasts { | ||
90 | $y: iro-colors.apcaReverse($contrast, $ref-y); | ||
91 | $l: color.channel($base-lch, 'lightness'); | ||
92 | $c: 1; | ||
93 | |||
94 | @if $y != false { | ||
95 | $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch); | ||
96 | } @else { | ||
97 | $y: $ref-y; | ||
98 | } | ||
99 | |||
100 | @if $chroma-range != 1 { | ||
101 | $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); | ||
102 | @if $chroma-inv { | ||
103 | $c: 1 - $c; | ||
104 | } | ||
105 | $c: meta.call($chroma-easing, $c); | ||
106 | $c: $chroma-range + (1 - $chroma-range) * $c; | ||
107 | } | ||
108 | |||
109 | $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); | ||
110 | |||
111 | $contrast-black: iro-colors.apcaContrast($black-y, $y); | ||
112 | $contrast-white: iro-colors.apcaContrast($white-y, $y); | ||
113 | |||
114 | $palette: map.set($palette, $key, $color); | ||
115 | $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); | ||
116 | } | ||
117 | |||
118 | @return $palette; | ||
119 | } | ||
120 | |||
121 | @function transparent-palette($color, $text, $alphas) { | ||
122 | $palette: ( | ||
123 | --text: $text, | ||
124 | ); | ||
125 | |||
126 | @each $key, $alpha in $alphas { | ||
127 | $palette: map.set($palette, $key, rgba($color, $alpha)); | ||
128 | } | ||
129 | |||
130 | @return $palette; | ||
131 | } | ||
132 | |||
133 | @function px-to-em($size, $base: iro.$vars-root-size) { | ||
134 | @return math.div($size, $base) * 1em; | ||
135 | } | ||
diff --git a/src/_layouts.scss b/src_old/_layouts.scss index 572308d..572308d 100644 --- a/src/_layouts.scss +++ b/src_old/_layouts.scss | |||
diff --git a/src/_mixins.scss b/src_old/_mixins.scss index dca6831..dca6831 100644 --- a/src/_mixins.scss +++ b/src_old/_mixins.scss | |||
diff --git a/src/_objects.scss b/src_old/_objects.scss index c5049cd..c5049cd 100644 --- a/src/_objects.scss +++ b/src_old/_objects.scss | |||
diff --git a/src/_scopes.scss b/src_old/_scopes.scss index a3aeb6c..a3aeb6c 100644 --- a/src/_scopes.scss +++ b/src_old/_scopes.scss | |||
diff --git a/src/_themes.scss b/src_old/_themes.scss index 2ca89cb..2ca89cb 100644 --- a/src/_themes.scss +++ b/src_old/_themes.scss | |||
diff --git a/src/_utils.scss b/src_old/_utils.scss index c0ce7a3..c0ce7a3 100644 --- a/src/_utils.scss +++ b/src_old/_utils.scss | |||
diff --git a/src_old/_vars.scss b/src_old/_vars.scss new file mode 100644 index 0000000..6e2cbfc --- /dev/null +++ b/src_old/_vars.scss | |||
@@ -0,0 +1,298 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'sass:list'; | ||
4 | @use 'iro-sass/src/index' as iro; | ||
5 | @use 'include-media/dist/include-media' as media; | ||
6 | @use 'functions' as fn; | ||
7 | @use 'config'; | ||
8 | |||
9 | @include iro.props-store(( | ||
10 | --dims: ( | ||
11 | --size: ( | ||
12 | --0: 0, | ||
13 | --10: iro.fn-px-to-rem(1px), | ||
14 | --25: iro.fn-px-to-rem(2px), | ||
15 | --40: iro.fn-px-to-rem(3px), | ||
16 | --50: iro.fn-px-to-rem(4px), | ||
17 | --65: iro.fn-px-to-rem(5px), | ||
18 | --75: iro.fn-px-to-rem(6px), | ||
19 | --85: iro.fn-px-to-rem(7px), | ||
20 | --100: iro.fn-px-to-rem(8px), | ||
21 | --115: iro.fn-px-to-rem(9px), | ||
22 | --125: iro.fn-px-to-rem(10px), | ||
23 | --130: iro.fn-px-to-rem(11px), | ||
24 | --150: iro.fn-px-to-rem(12px), | ||
25 | --160: iro.fn-px-to-rem(13px), | ||
26 | --175: iro.fn-px-to-rem(14px), | ||
27 | --200: iro.fn-px-to-rem(16px), | ||
28 | --225: iro.fn-px-to-rem(18px), | ||
29 | --250: iro.fn-px-to-rem(20px), | ||
30 | --275: iro.fn-px-to-rem(22px), | ||
31 | --300: iro.fn-px-to-rem(24px), | ||
32 | --325: iro.fn-px-to-rem(26px), | ||
33 | --350: iro.fn-px-to-rem(28px), | ||
34 | --375: iro.fn-px-to-rem(30px), | ||
35 | --400: iro.fn-px-to-rem(32px), | ||
36 | --450: iro.fn-px-to-rem(36px), | ||
37 | --500: iro.fn-px-to-rem(40px), | ||
38 | --550: iro.fn-px-to-rem(44px), | ||
39 | --600: iro.fn-px-to-rem(48px), | ||
40 | --650: iro.fn-px-to-rem(52px), | ||
41 | --700: iro.fn-px-to-rem(56px), | ||
42 | --800: iro.fn-px-to-rem(64px), | ||
43 | --900: iro.fn-px-to-rem(72px), | ||
44 | --1000: iro.fn-px-to-rem(80px), | ||
45 | --1200: iro.fn-px-to-rem(96px), | ||
46 | --1600: iro.fn-px-to-rem(128px), | ||
47 | --2000: iro.fn-px-to-rem(160px), | ||
48 | --2400: iro.fn-px-to-rem(192px), | ||
49 | --2500: iro.fn-px-to-rem(200px), | ||
50 | --2600: iro.fn-px-to-rem(208px), | ||
51 | --2800: iro.fn-px-to-rem(224px), | ||
52 | --3200: iro.fn-px-to-rem(256px), | ||
53 | --3400: iro.fn-px-to-rem(272px), | ||
54 | --3500: iro.fn-px-to-rem(280px), | ||
55 | --3600: iro.fn-px-to-rem(288px), | ||
56 | --3800: iro.fn-px-to-rem(304px), | ||
57 | --4600: iro.fn-px-to-rem(368px), | ||
58 | --5000: iro.fn-px-to-rem(400px), | ||
59 | --6000: iro.fn-px-to-rem(480px), | ||
60 | ), | ||
61 | |||
62 | --font: ( | ||
63 | --standard: ( | ||
64 | --family: ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif), | ||
65 | --line-height: 1.5, | ||
66 | --feature-settings: ('\'ss01\''), | ||
67 | ), | ||
68 | --headline: ( | ||
69 | --family: ('Inter', fn.dim(--font --standard --family, null)), | ||
70 | --line-height: 1.3, | ||
71 | --weight: 800, | ||
72 | --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''), | ||
73 | ), | ||
74 | --mono: ( | ||
75 | --family: ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace), | ||
76 | --line-height: 1.4, | ||
77 | ) | ||
78 | ), | ||
79 | |||
80 | --font-size: ( | ||
81 | --50: iro.fn-px-to-rem(12px), | ||
82 | --75: iro.fn-px-to-rem(13px), | ||
83 | --100: iro.fn-px-to-rem(14px), | ||
84 | --150: iro.fn-px-to-rem(16px), | ||
85 | --200: iro.fn-px-to-rem(18px), | ||
86 | --300: iro.fn-px-to-rem(20px), | ||
87 | --400: iro.fn-px-to-rem(24px), | ||
88 | --500: iro.fn-px-to-rem(28px), | ||
89 | --600: iro.fn-px-to-rem(32px), | ||
90 | --700: iro.fn-px-to-rem(36px), | ||
91 | --800: iro.fn-px-to-rem(40px), | ||
92 | --900: iro.fn-px-to-rem(45px), | ||
93 | --1000: iro.fn-px-to-rem(50px), | ||
94 | --1100: iro.fn-px-to-rem(60px), | ||
95 | ), | ||
96 | |||
97 | --border: ( | ||
98 | --thick: 4px, | ||
99 | --medium: 2px, | ||
100 | --thin: 1px, | ||
101 | ), | ||
102 | |||
103 | --shadow: ( | ||
104 | --x: 0, | ||
105 | --y: 1px, | ||
106 | --blur: 4px, | ||
107 | ), | ||
108 | |||
109 | --rounding: 4px, | ||
110 | |||
111 | --key-focus: ( | ||
112 | --outline: fn.dim(--border --thick, null), | ||
113 | --border: fn.dim(--border --medium, null), | ||
114 | --border-offset: fn.dim(--border --medium, null), | ||
115 | ), | ||
116 | |||
117 | --paragraph: ( | ||
118 | --margin-bs: fn.dim(--size --300, null), | ||
119 | ), | ||
120 | |||
121 | --heading: ( | ||
122 | --margin-bs: fn.dim(--size --700, null), | ||
123 | --margin-bs-sibling: fn.dim(--size --325, null), | ||
124 | |||
125 | --xxl: fn.dim(--font-size --300, null), | ||
126 | --xl: fn.dim(--font-size --200, null), | ||
127 | --lg: fn.dim(--font-size --150, null), | ||
128 | --md: fn.dim(--font-size --100, null), | ||
129 | --sm: fn.dim(--font-size --75, null), | ||
130 | --xs: fn.dim(--font-size --50, null), | ||
131 | |||
132 | --display: ( | ||
133 | --xxl: fn.dim(--font-size --1100, null), | ||
134 | --xl: fn.dim(--font-size --700, null), | ||
135 | --lg: fn.dim(--font-size --300, null), | ||
136 | --md: fn.dim(--font-size --150, null), | ||
137 | --sm: fn.dim(--font-size --75, null), | ||
138 | --xs: fn.dim(--font-size --50, null), | ||
139 | ), | ||
140 | |||
141 | --display-sm: ( | ||
142 | --xxl: fn.dim(--font-size --900, null), | ||
143 | --xl: fn.dim(--font-size --600, null), | ||
144 | --lg: fn.dim(--font-size --200, null), | ||
145 | --md: fn.dim(--font-size --100, null), | ||
146 | --sm: fn.dim(--font-size --75, null), | ||
147 | --xs: fn.dim(--font-size --50, null), | ||
148 | ) | ||
149 | ), | ||
150 | |||
151 | --list: ( | ||
152 | --indent: fn.dim(--size --400, null), | ||
153 | --compact-indent: fn.dim(--size --250, null), | ||
154 | ), | ||
155 | ), | ||
156 | )); | ||
157 | |||
158 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
159 | @include media.media('<=#{$breakpoint}') { | ||
160 | @include iro.props-store((), $breakpoint); | ||
161 | } | ||
162 | } | ||
163 | |||
164 | @include iro.props-store(( | ||
165 | --dims: ( | ||
166 | --heading: ( | ||
167 | --margin-bs: fn.dim(--size --600, null), | ||
168 | ), | ||
169 | |||
170 | --list: ( | ||
171 | --indent: fn.dim(--size --300), | ||
172 | ), | ||
173 | ) | ||
174 | ), 'sm'); | ||
175 | |||
176 | @include iro.props-store(( | ||
177 | --dims: ( | ||
178 | --heading: ( | ||
179 | --margin-bs: fn.dim(--size --500, null), | ||
180 | ), | ||
181 | |||
182 | --list: ( | ||
183 | --indent: fn.dim(--size --250), | ||
184 | ), | ||
185 | ) | ||
186 | ), 'xs'); | ||
187 | |||
188 | // | ||
189 | |||
190 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | ||
191 | @include iro.props-store(( | ||
192 | --colors: ( | ||
193 | #{$palette-name}-static: fn.palette( | ||
194 | $palette, | ||
195 | map.get(config.$static-colors, --contrasts), | ||
196 | 1, | ||
197 | map.get(config.$static-colors, --base), | ||
198 | ), | ||
199 | ), | ||
200 | )); | ||
201 | } | ||
202 | |||
203 | @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { | ||
204 | $color: list.nth($palette, 1); | ||
205 | $text: list.nth($palette, 2); | ||
206 | |||
207 | @include iro.props-store(( | ||
208 | --colors: ( | ||
209 | #{$palette-name}-transparent: fn.transparent-palette( | ||
210 | $color, | ||
211 | $text, | ||
212 | map.get(config.$static-colors, --transparents), | ||
213 | ), | ||
214 | ), | ||
215 | )); | ||
216 | } | ||
217 | |||
218 | @each $theme-name, $theme in config.$themes { | ||
219 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | ||
220 | |||
221 | @each $palette-name, $palette in map.get($theme, --palettes) { | ||
222 | $base-color: list.nth($palette, 1); | ||
223 | $contrasts: list.nth($palette, 2); | ||
224 | $ranges: list.nth($palette, 3); | ||
225 | |||
226 | @include iro.props-store(( | ||
227 | --colors: ( | ||
228 | $palette-name: fn.palette( | ||
229 | $base-color, | ||
230 | map.get($theme, --contrasts, $contrasts), | ||
231 | map.get($theme, --ranges, $ranges), | ||
232 | list.nth(map.get($theme, --palettes, --base), 1), | ||
233 | ), | ||
234 | ), | ||
235 | ), $tree); | ||
236 | } | ||
237 | |||
238 | @each $color, $value in map.get($theme, --constants) { | ||
239 | @include iro.props-store(( | ||
240 | --colors: ( | ||
241 | $color: $value, | ||
242 | ), | ||
243 | ), $tree); | ||
244 | } | ||
245 | |||
246 | @each $color, $ref in map.get($theme, --semantic) { | ||
247 | $res: (); | ||
248 | |||
249 | @if meta.type-of($ref) == 'map' { | ||
250 | @each $key, $r in $ref { | ||
251 | $res: map.set($res, $key, fn.color($r)); | ||
252 | } | ||
253 | } @else { | ||
254 | $res: fn.color($ref); | ||
255 | } | ||
256 | |||
257 | @include iro.props-store(( | ||
258 | --colors: ( | ||
259 | $color: $res, | ||
260 | ), | ||
261 | ), $tree); | ||
262 | } | ||
263 | } | ||
264 | |||
265 | @each $theme-name, $theme in config.$themes { | ||
266 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | ||
267 | |||
268 | @include iro.props-store(( | ||
269 | --colors: ( | ||
270 | |||
271 | ), | ||
272 | ), $tree); | ||
273 | } | ||
274 | |||
275 | @mixin apply-vars { | ||
276 | :root { | ||
277 | @include iro.props-assign; | ||
278 | |||
279 | @each $breakpoint in map.keys(media.$breakpoints) { | ||
280 | @include media.media('<=#{$breakpoint}') { | ||
281 | @include iro.props-assign($breakpoint); | ||
282 | } | ||
283 | } | ||
284 | |||
285 | @media (prefers-color-scheme: dark) { | ||
286 | @include iro.props-assign('dark'); | ||
287 | } | ||
288 | } | ||
289 | |||
290 | @each $theme-name, $theme in config.$themes { | ||
291 | $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); | ||
292 | |||
293 | @include iro.bem-theme($theme-name) { | ||
294 | @include iro.props-assign(); | ||
295 | @include iro.props-assign($tree, --colors); | ||
296 | } | ||
297 | } | ||
298 | } | ||
diff --git a/src_old/functions/colors/_apca.scss b/src_old/functions/colors/_apca.scss new file mode 100644 index 0000000..0c03529 --- /dev/null +++ b/src_old/functions/colors/_apca.scss | |||
@@ -0,0 +1,127 @@ | |||
1 | /* stylelint-disable scss/dollar-variable-pattern */ | ||
2 | /* stylelint-disable scss/at-function-pattern */ | ||
3 | |||
4 | @use 'sass:color'; | ||
5 | @use 'sass:list'; | ||
6 | @use 'sass:map'; | ||
7 | @use 'sass:math'; | ||
8 | |||
9 | $SA98G: ( | ||
10 | mainTRC: 2.4, | ||
11 | |||
12 | sRco: .2126729, | ||
13 | sGco: .7151522, | ||
14 | sBco: .072175, | ||
15 | |||
16 | normBG: .56, | ||
17 | normTXT: .57, | ||
18 | revTXT: .62, | ||
19 | revBG: .65, | ||
20 | |||
21 | blkThrs: .022, | ||
22 | blkClmp: 1.414, | ||
23 | scaleBoW: 1.14, | ||
24 | scaleWoB: 1.14, | ||
25 | loBoWoffset: .027, | ||
26 | loWoBoffset: .027, | ||
27 | deltaYmin: .0005, | ||
28 | loClip: .0001, | ||
29 | |||
30 | mFactor: 1.9468554433171, | ||
31 | mOffsetIn: .0387393816571401, | ||
32 | mExpAdj: .283343396420869, | ||
33 | mOffsetOut: .312865795870758, | ||
34 | ); | ||
35 | |||
36 | @function apca_sRGB_to_Y($color) { | ||
37 | $rgb: color.to-space($color, rgb); | ||
38 | |||
39 | @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + | ||
40 | map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + | ||
41 | map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); | ||
42 | } | ||
43 | |||
44 | @function apca_Y_to_sRGB($y) { | ||
45 | $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); | ||
46 | @return rgb($c, $c, $c); | ||
47 | } | ||
48 | |||
49 | @function apcaContrast($txtY, $bgY) { | ||
50 | /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */ | ||
51 | $icp: .0 1.1; | ||
52 | |||
53 | @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { | ||
54 | @return 0; | ||
55 | } | ||
56 | |||
57 | @if $txtY <= map.get($SA98G, blkThrs) { | ||
58 | $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); | ||
59 | } | ||
60 | @if $bgY <= map.get($SA98G, blkThrs) { | ||
61 | $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); | ||
62 | } | ||
63 | |||
64 | @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { | ||
65 | @return 0; | ||
66 | } | ||
67 | |||
68 | $outputContrast: 0; | ||
69 | |||
70 | @if $bgY > $txtY { | ||
71 | $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); | ||
72 | |||
73 | @if $SAPC >= map.get($SA98G, loClip) { | ||
74 | $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); | ||
75 | } | ||
76 | } @else { | ||
77 | $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); | ||
78 | |||
79 | @if $SAPC <= -1 * map.get($SA98G, loClip) { | ||
80 | $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); | ||
81 | } | ||
82 | } | ||
83 | |||
84 | @return $outputContrast * 100; | ||
85 | } | ||
86 | |||
87 | @function apcaReverse($contrast, $knownY, $knownType: 'bg') { | ||
88 | $unknownY: $knownY; | ||
89 | |||
90 | $knownExp: 0; | ||
91 | $unknownExp: 0; | ||
92 | |||
93 | $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); | ||
94 | $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); | ||
95 | |||
96 | $contrast: math.div($contrast * .01 + $offset, $scale); | ||
97 | |||
98 | @if $knownY <= map.get($SA98G, blkThrs) { | ||
99 | $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); | ||
100 | } | ||
101 | |||
102 | @if $knownType == 'bg' { | ||
103 | $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); | ||
104 | $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); | ||
105 | $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); | ||
106 | } @else { | ||
107 | $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); | ||
108 | $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); | ||
109 | $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); | ||
110 | } | ||
111 | |||
112 | @if '#{$unknownY}' == '#{math.sqrt(-1)}' { | ||
113 | @return false; | ||
114 | } | ||
115 | |||
116 | @if $unknownY > 1.06 or $unknownY < 0 { | ||
117 | @return false; | ||
118 | } | ||
119 | |||
120 | @if $unknownY <= map.get($SA98G, blkThrs) { | ||
121 | $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); | ||
122 | } | ||
123 | |||
124 | $unknownY: math.max(math.min($unknownY, 1), 0); | ||
125 | |||
126 | @return $unknownY; | ||
127 | } | ||
diff --git a/src_old/functions/colors/_index.scss b/src_old/functions/colors/_index.scss new file mode 100644 index 0000000..9dad0f9 --- /dev/null +++ b/src_old/functions/colors/_index.scss | |||
@@ -0,0 +1 @@ | |||
@forward 'apca'; | |||
diff --git a/src_old/index.scss b/src_old/index.scss new file mode 100644 index 0000000..a8d9c24 --- /dev/null +++ b/src_old/index.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | @use 'vars' as vars; | ||
2 | |||
3 | @use 'base'; | ||
4 | @use 'layouts'; | ||
5 | @use 'objects'; | ||
6 | @use 'scopes'; | ||
7 | @use 'themes'; | ||
8 | @use 'utils'; | ||
9 | |||
10 | @include vars.apply-vars; | ||
diff --git a/src/layouts/_button-group.scss b/src_old/layouts/_button-group.scss index a70d27a..a70d27a 100644 --- a/src/layouts/_button-group.scss +++ b/src_old/layouts/_button-group.scss | |||
diff --git a/src/layouts/_card-list.scss b/src_old/layouts/_card-list.scss index 65b6a66..65b6a66 100644 --- a/src/layouts/_card-list.scss +++ b/src_old/layouts/_card-list.scss | |||
diff --git a/src/layouts/_container.scss b/src_old/layouts/_container.scss index d13c4f3..d13c4f3 100644 --- a/src/layouts/_container.scss +++ b/src_old/layouts/_container.scss | |||
diff --git a/src/layouts/_flex.scss b/src_old/layouts/_flex.scss index d3f4f9c..d3f4f9c 100644 --- a/src/layouts/_flex.scss +++ b/src_old/layouts/_flex.scss | |||
diff --git a/src/layouts/_form.scss b/src_old/layouts/_form.scss index f6b60ea..f6b60ea 100644 --- a/src/layouts/_form.scss +++ b/src_old/layouts/_form.scss | |||
diff --git a/src/layouts/_media.scss b/src_old/layouts/_media.scss index c42aa3e..c42aa3e 100644 --- a/src/layouts/_media.scss +++ b/src_old/layouts/_media.scss | |||
diff --git a/src/layouts/_overflow.scss b/src_old/layouts/_overflow.scss index 8643bbf..8643bbf 100644 --- a/src/layouts/_overflow.scss +++ b/src_old/layouts/_overflow.scss | |||
diff --git a/src/objects/_action-button.scss b/src_old/objects/_action-button.scss index 7fe9d44..7fe9d44 100644 --- a/src/objects/_action-button.scss +++ b/src_old/objects/_action-button.scss | |||
diff --git a/src/objects/_alert.scss b/src_old/objects/_alert.scss index 067c00c..067c00c 100644 --- a/src/objects/_alert.scss +++ b/src_old/objects/_alert.scss | |||
diff --git a/src/objects/_avatar.scss b/src_old/objects/_avatar.scss index 19bff10..19bff10 100644 --- a/src/objects/_avatar.scss +++ b/src_old/objects/_avatar.scss | |||
diff --git a/src/objects/_backdrop.scss b/src_old/objects/_backdrop.scss index d0eaf52..d0eaf52 100644 --- a/src/objects/_backdrop.scss +++ b/src_old/objects/_backdrop.scss | |||
diff --git a/src/objects/_badge.scss b/src_old/objects/_badge.scss index 4e1662f..4e1662f 100644 --- a/src/objects/_badge.scss +++ b/src_old/objects/_badge.scss | |||
diff --git a/src/objects/_button.scss b/src_old/objects/_button.scss index 3ef4813..3ef4813 100644 --- a/src/objects/_button.scss +++ b/src_old/objects/_button.scss | |||
diff --git a/src/objects/_card.scss b/src_old/objects/_card.scss index 650ec3f..650ec3f 100644 --- a/src/objects/_card.scss +++ b/src_old/objects/_card.scss | |||
diff --git a/src/objects/_checkbox.scss b/src_old/objects/_checkbox.scss index 8527948..8527948 100644 --- a/src/objects/_checkbox.scss +++ b/src_old/objects/_checkbox.scss | |||
diff --git a/src/objects/_divider.scss b/src_old/objects/_divider.scss index d1e2897..d1e2897 100644 --- a/src/objects/_divider.scss +++ b/src_old/objects/_divider.scss | |||
diff --git a/src/objects/_emoji.scss b/src_old/objects/_emoji.scss index d8d1289..d8d1289 100644 --- a/src/objects/_emoji.scss +++ b/src_old/objects/_emoji.scss | |||
diff --git a/src/objects/_field-label.scss b/src_old/objects/_field-label.scss index 1518ea6..1518ea6 100644 --- a/src/objects/_field-label.scss +++ b/src_old/objects/_field-label.scss | |||
diff --git a/src/objects/_heading.scss b/src_old/objects/_heading.scss index 7990a6b..7990a6b 100644 --- a/src/objects/_heading.scss +++ b/src_old/objects/_heading.scss | |||
diff --git a/src/objects/_icon.scss b/src_old/objects/_icon.scss index 1491dd9..1491dd9 100644 --- a/src/objects/_icon.scss +++ b/src_old/objects/_icon.scss | |||
diff --git a/src/objects/_lightbox.scss b/src_old/objects/_lightbox.scss index 8ad8584..8ad8584 100644 --- a/src/objects/_lightbox.scss +++ b/src_old/objects/_lightbox.scss | |||
diff --git a/src/objects/_menu.scss b/src_old/objects/_menu.scss index 0f691a2..0f691a2 100644 --- a/src/objects/_menu.scss +++ b/src_old/objects/_menu.scss | |||
diff --git a/src/objects/_palette.scss b/src_old/objects/_palette.scss index 19f282f..19f282f 100644 --- a/src/objects/_palette.scss +++ b/src_old/objects/_palette.scss | |||
diff --git a/src/objects/_popover.scss b/src_old/objects/_popover.scss index 5ad58ec..5ad58ec 100644 --- a/src/objects/_popover.scss +++ b/src_old/objects/_popover.scss | |||
diff --git a/src/objects/_radio.scss b/src_old/objects/_radio.scss index 9fa937d..9fa937d 100644 --- a/src/objects/_radio.scss +++ b/src_old/objects/_radio.scss | |||
diff --git a/src/objects/_side-nav.scss b/src_old/objects/_side-nav.scss index 8e4e131..8e4e131 100644 --- a/src/objects/_side-nav.scss +++ b/src_old/objects/_side-nav.scss | |||
diff --git a/src/objects/_status-indicator.scss b/src_old/objects/_status-indicator.scss index 416e65e..416e65e 100644 --- a/src/objects/_status-indicator.scss +++ b/src_old/objects/_status-indicator.scss | |||
diff --git a/src/objects/_switch.scss b/src_old/objects/_switch.scss index e1f1132..e1f1132 100644 --- a/src/objects/_switch.scss +++ b/src_old/objects/_switch.scss | |||
diff --git a/src/objects/_table.scss b/src_old/objects/_table.scss index 2c9f65b..2c9f65b 100644 --- a/src/objects/_table.scss +++ b/src_old/objects/_table.scss | |||
diff --git a/src/objects/_text-field.scss b/src_old/objects/_text-field.scss index 6611ea6..6611ea6 100644 --- a/src/objects/_text-field.scss +++ b/src_old/objects/_text-field.scss | |||
diff --git a/src/scopes/_blockquotes.scss b/src_old/scopes/_blockquotes.scss index f6a13fe..f6a13fe 100644 --- a/src/scopes/_blockquotes.scss +++ b/src_old/scopes/_blockquotes.scss | |||
diff --git a/src/scopes/_code.scss b/src_old/scopes/_code.scss index 4df711b..4df711b 100644 --- a/src/scopes/_code.scss +++ b/src_old/scopes/_code.scss | |||
diff --git a/src/scopes/_headings.scss b/src_old/scopes/_headings.scss index 9593792..9593792 100644 --- a/src/scopes/_headings.scss +++ b/src_old/scopes/_headings.scss | |||
diff --git a/src/scopes/_links.scss b/src_old/scopes/_links.scss index d47c406..d47c406 100644 --- a/src/scopes/_links.scss +++ b/src_old/scopes/_links.scss | |||
diff --git a/src/scopes/_lists.scss b/src_old/scopes/_lists.scss index bad9731..bad9731 100644 --- a/src/scopes/_lists.scss +++ b/src_old/scopes/_lists.scss | |||
diff --git a/src/scopes/_tables.scss b/src_old/scopes/_tables.scss index 9b2124d..9b2124d 100644 --- a/src/scopes/_tables.scss +++ b/src_old/scopes/_tables.scss | |||