summaryrefslogtreecommitdiffstats
path: root/src/objects/_palette.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-19 14:46:06 +0200
committerVolpeon <git@volpeon.ink>2024-10-19 14:46:06 +0200
commit3799950b0a869aee0e2725a8aafbb53c26723942 (patch)
tree9d8ee6ee3e9f963358d6463aa6114d4020a90a39 /src/objects/_palette.scss
parentUpdate (diff)
downloadiro-design-3799950b0a869aee0e2725a8aafbb53c26723942.tar.gz
iro-design-3799950b0a869aee0e2725a8aafbb53c26723942.tar.bz2
iro-design-3799950b0a869aee0e2725a8aafbb53c26723942.zip
Update
Diffstat (limited to 'src/objects/_palette.scss')
-rw-r--r--src/objects/_palette.scss29
1 files changed, 15 insertions, 14 deletions
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8291750..c4f8e96 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,32 +1,33 @@
1@use 'sass:map';
2@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/iro-sass' as iro;
5@use '../functions' as fn; 5@use '../themes';
6@use '../config'; 6@use '../props';
7@use '../core.vars' as core;
7 8
8@include iro.props-namespace('palette') { 9@mixin styles {
9 @include iro.bem-object(iro.props-namespace()) { 10 @include iro.bem-object('palette') {
10 display: flex; 11 display: flex;
11 block-size: 3em; 12 block-size: 3em;
12 13
13 @include iro.bem-elem('item') { 14 @include iro.bem-elem('item') {
14 flex: 1 1 auto; 15 flex: 1 1 auto;
15 16
16 $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); 17 $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base);
17 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); 18 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
18 19
19 @for $i from 1 through list.length($contrasts) { 20 @for $i from 1 through list.length($contrasts) {
20 $key: list.nth(map.keys($contrasts), $i); 21 $key: list.nth(map.keys($contrasts), $i);
21 22
22 &:nth-child(#{$i}) { 23 &:nth-child(#{$i}) {
23 background-color: fn.global-color(--base $key); 24 background-color: props.get(core.$theme, --base, $key);
24 } 25 }
25 } 26 }
26 } 27 }
27 28
28 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { 29 @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) {
29 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); 30 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
30 31
31 @include iro.bem-modifier(string.slice($palette-name, 3)) { 32 @include iro.bem-modifier(string.slice($palette-name, 3)) {
32 @include iro.bem-elem('item') { 33 @include iro.bem-elem('item') {
@@ -34,7 +35,7 @@
34 $key: list.nth(map.keys($contrasts), $i); 35 $key: list.nth(map.keys($contrasts), $i);
35 36
36 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
37 background-color: fn.global-color($palette-name $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
38 } 39 }
39 } 40 }
40 } 41 }
@@ -42,8 +43,8 @@
42 } 43 }
43 44
44 @include iro.bem-modifier('static') { 45 @include iro.bem-modifier('static') {
45 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) {
46 $contrasts: map.get(config.$static-colors, --contrasts); 47 $contrasts: map.get(themes.$static-colors, --contrasts);
47 48
48 @include iro.bem-modifier(string.slice($palette-name, 3)) { 49 @include iro.bem-modifier(string.slice($palette-name, 3)) {
49 @include iro.bem-elem('item') { 50 @include iro.bem-elem('item') {
@@ -51,7 +52,7 @@
51 $key: list.nth(map.keys($contrasts), $i); 52 $key: list.nth(map.keys($contrasts), $i);
52 53
53 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
54 background-color: fn.global-color(#{$palette-name}-static $key); 55 background-color: props.get(core.$static-colors, $palette-name, $key);
55 } 56 }
56 } 57 }
57 } 58 }