summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json5
-rw-r--r--src/_functions.scss32
-rw-r--r--src/_palettes.scss234
-rw-r--r--src/_props.scss105
-rw-r--r--src/_vars.scss400
-rw-r--r--src/index.scss17
-rw-r--r--src_demo/index.scss2
-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.scss135
-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.scss298
-rw-r--r--src_old/functions/colors/_apca.scss127
-rw-r--r--src_old/functions/colors/_index.scss1
-rw-r--r--src_old/index.scss10
-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
9iro.$vars-root-size: 16px;
10
11media.$breakpoints: (
12 lg: 1340px,
13 md: 900px,
14 sm: 620px,
15 xs: 400px,
16);
17
18media.$unit-intervals: (
19 'px': 1,
20 'em': .01,
21 'rem': .01,
22 '': 0
23);
24
25res.$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
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 06:03:58 +0000