summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
commit1e902449652213eb1feae5e61740cb9ce3b9d6e3 (patch)
tree1db6b07696d8f2acd138e7eed845718c1fb5237f /src/objects
parentWIP: Refactoring (diff)
downloadiro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.gz
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.bz2
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.zip
WIP: Refactoring
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_divider.scss35
-rw-r--r--src/objects/_palette.scss20
2 files changed, 28 insertions, 27 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 465bbcf..3332331 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,5 +1,7 @@
1@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 3@use '../functions' as fn;
4@use '../config';
3 5
4@include iro.props-namespace('divider') { 6@include iro.props-namespace('divider') {
5 @include iro.props-store(( 7 @include iro.props-store((
@@ -32,29 +34,22 @@
32 --bg: fn.global-color(--border), 34 --bg: fn.global-color(--border),
33 --label: fn.global-color(--text-mute-more), 35 --label: fn.global-color(--text-mute-more),
34 ), 36 ),
35 --blue: (
36 --bg: fn.global-color(--blue --700),
37 --label: fn.global-color(--blue --1000),
38 ),
39 --purple: (
40 --bg: fn.global-color(--purple --700),
41 --label: fn.global-color(--purple --1000),
42 ),
43 --red: (
44 --bg: fn.global-color(--red --700),
45 --label: fn.global-color(--red --1000),
46 ),
47 --green: (
48 --bg: fn.global-color(--green --700),
49 --label: fn.global-color(--green --1000),
50 ),
51 --yellow: (
52 --bg: fn.global-color(--yellow --700),
53 --label: fn.global-color(--yellow --1000),
54 ),
55 ), 37 ),
56 )); 38 ));
57 39
40 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
41 @if $color != '--base' {
42 @include iro.props-store((
43 --colors: (
44 $color: (
45 --bg: fn.global-color($color --700),
46 --label: fn.global-color($color --1000),
47 )
48 ),
49 ));
50 }
51 }
52
58 @include iro.bem-object(iro.props-namespace()) { 53 @include iro.bem-object(iro.props-namespace()) {
59 display: flex; 54 display: flex;
60 flex-direction: row; 55 flex-direction: row;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index a86c026..9ecdfac 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,5 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:list'; 2@use 'sass:list';
3@use 'sass:string';
3@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
4@use '../functions' as fn; 5@use '../functions' as fn;
5@use '../config'; 6@use '../config';
@@ -12,8 +13,11 @@
12 @include iro.bem-elem('item') { 13 @include iro.bem-elem('item') {
13 flex: 1 1 auto; 14 flex: 1 1 auto;
14 15
15 @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) { 16 $palette: map.get(config.$themes, config.$theme-default, --palettes, --base);
16 $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i); 17 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
18
19 @for $i from 1 through list.length($contrasts) {
20 $key: list.nth(map.keys($contrasts), $i);
17 21
18 &:nth-child(#{$i}) { 22 &:nth-child(#{$i}) {
19 background-color: fn.global-color(--base $key); 23 background-color: fn.global-color(--base $key);
@@ -21,14 +25,16 @@
21 } 25 }
22 } 26 }
23 27
24 @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' { 28 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
25 @include iro.bem-modifier($palette) { 29 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
30
31 @include iro.bem-modifier(string.slice($palette-name, 3)) {
26 @include iro.bem-elem('item') { 32 @include iro.bem-elem('item') {
27 @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) { 33 @for $i from 1 through list.length($contrasts) {
28 $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i); 34 $key: list.nth(map.keys($contrasts), $i);
29 35
30 &:nth-child(#{$i}) { 36 &:nth-child(#{$i}) {
31 background-color: fn.global-color(--#{$palette} $key); 37 background-color: fn.global-color($palette-name $key);
32 } 38 }
33 } 39 }
34 } 40 }