summaryrefslogtreecommitdiffstats
path: root/src/objects/_palette.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_palette.scss')
-rw-r--r--src/objects/_palette.scss52
1 files changed, 35 insertions, 17 deletions
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index f503812..88448e0 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,21 +1,27 @@
1@use 'sass:list'; 1@use "sass:list";
2@use 'sass:map'; 2@use "sass:map";
3@use 'sass:string'; 3@use "sass:string";
4@use 'pkg:iro-sass/src/bem'; 4@use "pkg:iro-sass/bem";
5@use '../config'; 5@use "../config";
6@use 'pkg:iro-sass/src/props'; 6@use "pkg:iro-sass/props";
7@use '../core.vars' as core; 7@use "../core.vars" as core;
8 8
9@mixin styles { 9@mixin styles {
10 @include bem.object('palette') { 10 @include bem.object("palette") {
11 display: flex; 11 display: flex;
12 block-size: 3em; 12 block-size: 3em;
13 13
14 @include bem.elem('item') { 14 @include bem.elem("item") {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 18 $levels: map.get(
19 config.$themes,
20 config.$theme-default,
21 light,
22 --levels,
23 list.nth($palette, 2)
24 );
19 25
20 @for $i from 1 through list.length($levels) { 26 @for $i from 1 through list.length($levels) {
21 $key: list.nth(map.keys($levels), $i); 27 $key: list.nth(map.keys($levels), $i);
@@ -26,11 +32,19 @@
26 } 32 }
27 } 33 }
28 34
29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { 35 @each $palette-name,
30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 36 $palette in map.get(config.$themes, config.$theme-default, light, --palettes)
37 {
38 $levels: map.get(
39 config.$themes,
40 config.$theme-default,
41 light,
42 --levels,
43 list.nth($palette, 2)
44 );
31 45
32 @include bem.modifier(string.slice($palette-name, 3)) { 46 @include bem.modifier(string.slice($palette-name, 3)) {
33 @include bem.elem('item') { 47 @include bem.elem("item") {
34 @for $i from 1 through list.length($levels) { 48 @for $i from 1 through list.length($levels) {
35 $key: list.nth(map.keys($levels), $i); 49 $key: list.nth(map.keys($levels), $i);
36 50
@@ -42,17 +56,21 @@
42 } 56 }
43 } 57 }
44 58
45 @include bem.modifier('static') { 59 @include bem.modifier("static") {
46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 60 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $levels: map.get(config.$static-colors, --levels); 61 $levels: map.get(config.$static-colors, --levels);
48 62
49 @include bem.modifier(string.slice($palette-name, 3)) { 63 @include bem.modifier(string.slice($palette-name, 3)) {
50 @include bem.elem('item') { 64 @include bem.elem("item") {
51 @for $i from 1 through list.length($levels) { 65 @for $i from 1 through list.length($levels) {
52 $key: list.nth(map.keys($levels), $i); 66 $key: list.nth(map.keys($levels), $i);
53 67
54 &:nth-child(#{$i}) { 68 &:nth-child(#{$i}) {
55 background-color: props.get(core.$theme, #{$palette-name}-static, $key); 69 background-color: props.get(
70 core.$theme,
71 #{$palette-name}-static,
72 $key
73 );
56 } 74 }
57 } 75 }
58 } 76 }