summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_apply-vars.scss12
-rw-r--r--src/_vars.scss70
-rw-r--r--src/layouts/_container.scss14
-rw-r--r--src/layouts/_form.scss4
-rw-r--r--src/objects/_action-menu.scss7
-rw-r--r--src/objects/_backdrop.scss6
-rw-r--r--src/objects/_checkbox.scss2
-rw-r--r--src/objects/_dialog.scss2
-rw-r--r--src/objects/_field-label.scss4
-rw-r--r--src/objects/_heading.scss6
-rw-r--r--src/objects/_radio.scss2
-rw-r--r--src/objects/_rule.scss2
-rw-r--r--src/objects/_switch.scss2
13 files changed, 83 insertions, 50 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 5d18afe..10bcb5c 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -14,6 +14,7 @@
14 @include iro.props-assign('palette-light'); 14 @include iro.props-assign('palette-light');
15 15
16 @media (prefers-color-scheme: dark) { 16 @media (prefers-color-scheme: dark) {
17 @include iro.props-assign('colors-dark');
17 @include iro.props-assign('palette-dark'); 18 @include iro.props-assign('palette-dark');
18 } 19 }
19} 20}
@@ -23,16 +24,7 @@
23 @include iro.props-assign('palette-light-raised'); 24 @include iro.props-assign('palette-light-raised');
24 25
25 @media (prefers-color-scheme: dark) { 26 @media (prefers-color-scheme: dark) {
27 @include iro.props-assign('colors-dark');
26 @include iro.props-assign('palette-dark-raised'); 28 @include iro.props-assign('palette-dark-raised');
27 } 29 }
28} 30}
29
30/*@media (prefers-color-scheme: dark) {
31 @include iro.props-assign('dark');
32 @include iro.props-assign('dark-palette');
33
34 @include iro.bem-theme('raised') {
35 @include iro.props-assign('dark-raised-palette');
36 @include iro.props-assign('dark');
37 }
38}*/
diff --git a/src/_vars.scss b/src/_vars.scss
index 8531715..6d273f4 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -30,18 +30,11 @@ media.$unit-intervals: (
30 --lg: 1.5, 30 --lg: 1.5,
31 --xl: 2, 31 --xl: 2,
32 ), 32 ),
33 --x: ( 33 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
34 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)), 34 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
35 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)), 35 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
36 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)), 36 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
37 ), 37 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
38 --y: (
39 --xs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
40 --sm: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
41 --md: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
42 --lg: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
43 --xl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
44 ),
45 ), 38 ),
46 39
47 --font: ( 40 --font: (
@@ -75,7 +68,7 @@ media.$unit-intervals: (
75 --focus-outline-width: 3px, 68 --focus-outline-width: 3px,
76 69
77 --paragraph: ( 70 --paragraph: (
78 --margin-top: fn.dim(--spacing --y --sm, null), 71 --margin-top: fn.dim(--spacing --sm, null),
79 ), 72 ),
80 73
81 --list: ( 74 --list: (
@@ -86,15 +79,15 @@ media.$unit-intervals: (
86 79
87// 80//
88 81
89@function accent-palette($base) { 82@function accent-palette($base, $dir: 1) {
90 @return ( 83 @return (
91 --hi: blend.scale($base, $lightness: 15%, $chroma: 20%), 84 --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
92 --main: $base, 85 --main: $base,
93 --lo: blend.scale($base, $lightness: -15%, $chroma: -20%), 86 --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
94 --lo2: blend.scale($base, $lightness: -25%, $chroma: -40%), 87 --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
95 --semi: rgba($base, .4), 88 --semi: rgba($base, .4),
96 --selection: rgba($base, .99), 89 --selection: rgba($base, .99),
97 --fg: #fff, 90 --fg: blend.contrast($base, #fff, #000),
98 ); 91 );
99} 92}
100 93
@@ -178,15 +171,50 @@ media.$unit-intervals: (
178 171
179@include iro.fn-execute { 172@include iro.fn-execute {
180 @include iro.props-store(( 173 @include iro.props-store((
181 --colors: () 174 --colors: (
175 --accent: (
176 --blue: accent-palette(blend.lch(58% 60 279), -1),
177 --red: accent-palette(blend.lch(58% 60 23), -1),
178 --green: accent-palette(blend.lch(68% 60 141), -1),
179 --yellow: accent-palette(blend.lch(83% 60 90), -1),
180
181 --primary: iro.props-ref('colors-dark', --colors --accent --blue),
182 --error: iro.props-ref('colors-dark', --colors --accent --red),
183 --success: iro.props-ref('colors-dark', --colors --accent --green),
184 ),
185 )
182 ), 'colors-dark'); 186 ), 'colors-dark');
183 187
184 @include iro.props-store(( 188 @include iro.props-store((
185 --colors: () 189 --colors: (
190 --gray1: hsl(210, 0%, 6%), // 1.1
191 --gray2: hsl(210, 0%, 8%), // 1.05
192 --gray3: hsl(210, 0%, 10%), // 1
193 --gray4: hsl(210, 0%, 14%), // 1.12
194 --gray5: hsl(210, 0%, 20%), // 1.37
195 --gray6: hsl(210, 0%, 26%), // 1.73
196 --gray7: hsl(210, 0%, 34%), // 2.4
197 --gray8: hsl(210, 0%, 42%), // 3.26
198 --gray9: hsl(210, 0%, 65%), // 7.14
199 --gray10: hsl(210, 0%, 86%), // 12.57
200 --gray11: hsl(210, 0%, 100%), // 17.4
201 )
186 ), 'palette-dark'); 202 ), 'palette-dark');
187 203
188 @include iro.props-store(( 204 @include iro.props-store((
189 --colors: () 205 --colors: (
206 --gray1: hsl(210, 0%, 10%), // 1.12
207 --gray2: hsl(210, 0%, 12%), // 1.06
208 --gray3: hsl(210, 0%, 14%), // 1
209 --gray4: hsl(210, 0%, 18%), // 1.14
210 --gray5: hsl(210, 0%, 23%), // 1.38
211 --gray6: hsl(210, 0%, 29%), // 1.75
212 --gray7: hsl(210, 0%, 37%), // 2.39
213 --gray8: hsl(210, 0%, 45%), // 3.27
214 --gray9: hsl(210, 0%, 69%), // 7.15
215 --gray10: hsl(210, 0%, 90%), // 12.43
216 --gray11: hsl(210, 0%, 100%), // 15.52
217 )
190 ), 'palette-dark-raised'); 218 ), 'palette-dark-raised');
191} 219}
192 220
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index f63b04d..d3ecb5f 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,9 +7,9 @@
7 --dims: ( 7 --dims: (
8 --content-width: iro.fn-px-to-rem(700px), 8 --content-width: iro.fn-px-to-rem(700px),
9 --sm-content-width: iro.fn-px-to-rem(360px), 9 --sm-content-width: iro.fn-px-to-rem(360px),
10 --pad-x: 3rem, 10 --pad-x: fn.global-dim(--spacing --xl),
11 --pad-y: 3rem, 11 --pad-y: fn.global-dim(--spacing --xl),
12 --in-page-spacing-y: fn.global-dim(--spacing --y --xl), 12 --in-page-spacing-y: fn.global-dim(--spacing --xl),
13 ) 13 )
14 ), 'dims'); 14 ), 'dims');
15 15
@@ -17,8 +17,8 @@
17 overflow: hidden; 17 overflow: hidden;
18 18
19 @include iro.bem-elem('inner') { 19 @include iro.bem-elem('inner') {
20 margin-top: calc(-1 * fn.global-dim(--spacing --y --xl)); 20 margin-top: calc(-1 * fn.global-dim(--spacing --xl));
21 margin-bottom: calc(-1 * fn.global-dim(--spacing --y --xl)); 21 margin-bottom: calc(-1 * fn.global-dim(--spacing --xl));
22 22
23 &::before, 23 &::before,
24 &::after { 24 &::after {
@@ -29,11 +29,11 @@
29 } 29 }
30 30
31 &::before { 31 &::before {
32 margin-bottom: fn.global-dim(--spacing --y --xl); 32 margin-bottom: fn.global-dim(--spacing --xl);
33 } 33 }
34 34
35 &::after { 35 &::after {
36 margin-top: fn.global-dim(--spacing --y --xl); 36 margin-top: fn.global-dim(--spacing --xl);
37 } 37 }
38 } 38 }
39 39
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 7225807..4334192 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -4,8 +4,8 @@
4@include iro.props-namespace('form') { 4@include iro.props-namespace('form') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --item-spacing-y: fn.global-dim(--spacing --y --md), 7 --item-spacing-y: fn.global-dim(--spacing --md),
8 --label-spacing-x: fn.global-dim(--spacing --x --md), 8 --label-spacing-x: fn.global-dim(--spacing --md),
9 --hint-font-size: fn.global-dim(--font-size --sm), 9 --hint-font-size: fn.global-dim(--font-size --sm),
10 ), 10 ),
11 ), 'dims'); 11 ), 'dims');
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 4f73cf7..59e0287 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -40,6 +40,13 @@
40 ), 40 ),
41 ), 'colors'); 41 ), 'colors');
42 42
43 @include iro.props-store((
44 --colors: (
45 --shadow: 0 .2em .5em rgba(#000, .5),
46 --border: rgba(#fff, .08),
47 ),
48 ), 'colors-dark');
49
43 @include iro.bem-object(iro.props-namespace()) { 50 @include iro.bem-object(iro.props-namespace()) {
44 position: absolute; 51 position: absolute;
45 z-index: 10000; 52 z-index: 10000;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index e989e53..d5ce028 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -17,6 +17,12 @@
17 ), 'colors'); 17 ), 'colors');
18 18
19 @include iro.props-store(( 19 @include iro.props-store((
20 --colors: (
21 --bg: rgba(#000, .75),
22 ),
23 ), 'colors-dark');
24
25 @include iro.props-store((
20 --dims: ( 26 --dims: (
21 --pad-y: iro.fn-px-to-rem(30px), 27 --pad-y: iro.fn-px-to-rem(30px),
22 ) 28 )
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 5d81b19..be47eee 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,7 +9,7 @@
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: iro.fn-px-to-rem(5px),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: iro.fn-px-to-rem(5px),
12 --margin-right: fn.global-dim(--spacing --x --md), 12 --margin-right: fn.global-dim(--spacing --md),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
15 15
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 9c7dc1f..22325f4 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -10,7 +10,7 @@
10 --width-md: iro.fn-px-to-rem(800px), 10 --width-md: iro.fn-px-to-rem(800px),
11 --width-lg: iro.fn-px-to-rem(1100px), 11 --width-lg: iro.fn-px-to-rem(1100px),
12 --rounding: 3px, 12 --rounding: 3px,
13 --title-body-spacing: fn.global-dim(--spacing --y --sm), 13 --title-body-spacing: fn.global-dim(--spacing --sm),
14 ), 14 ),
15 ), 'dims'); 15 ), 'dims');
16 16
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 66f5ef7..4b75282 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -4,8 +4,8 @@
4@include iro.props-namespace('field-label') { 4@include iro.props-namespace('field-label') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --spacing-x: fn.global-dim(--spacing --x --sm), 7 --spacing-x: fn.global-dim(--spacing --sm),
8 --spacing-y: fn.global-dim(--spacing --y --xs), 8 --spacing-y: fn.global-dim(--spacing --xs),
9 --label-font-size: fn.global-dim(--font-size --sm), 9 --label-font-size: fn.global-dim(--font-size --sm),
10 --hint-font-size: fn.global-dim(--font-size --sm), 10 --hint-font-size: fn.global-dim(--font-size --sm),
11 ), 11 ),
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index c1feb5e..24971bb 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -5,9 +5,9 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --in-page-margin: ( 7 --in-page-margin: (
8 --top: fn.global-dim(--spacing --y --lg), 8 --top: fn.global-dim(--spacing --lg),
9 --top-sibling: fn.global-dim(--spacing --y --md), 9 --top-sibling: fn.global-dim(--spacing --md),
10 --bottom: fn.global-dim(--spacing --y --sm), 10 --bottom: fn.global-dim(--spacing --sm),
11 ), 11 ),
12 ), 12 ),
13 ), 'dims'); 13 ), 'dims');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 1a6e1a6..85f94f2 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -9,7 +9,7 @@
9 --border-width: fn.global-dim(--border-width --medium), 9 --border-width: fn.global-dim(--border-width --medium),
10 --pad-x: iro.fn-px-to-rem(5px), 10 --pad-x: iro.fn-px-to-rem(5px),
11 --pad-y: iro.fn-px-to-rem(5px), 11 --pad-y: iro.fn-px-to-rem(5px),
12 --margin-right: fn.global-dim(--spacing --x --md), 12 --margin-right: fn.global-dim(--spacing --md),
13 ), 13 ),
14 ), 'dims'); 14 ), 'dims');
15 15
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 7a9caa3..1892a3d 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('rule') { 4@include iro.props-namespace('rule') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --margin-y: fn.global-dim(--spacing --y --xs), 7 --margin-y: fn.global-dim(--spacing --xs),
8 8
9 --strong: ( 9 --strong: (
10 --border-width: fn.global-dim(--border-width --thick), 10 --border-width: fn.global-dim(--border-width --thick),
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 1a2fb80..e0ff178 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -10,7 +10,7 @@
10 --border-width: fn.global-dim(--border-width --medium), 10 --border-width: fn.global-dim(--border-width --medium),
11 --pad-x: iro.fn-px-to-rem(5px), 11 --pad-x: iro.fn-px-to-rem(5px),
12 --pad-y: iro.fn-px-to-rem(5px), 12 --pad-y: iro.fn-px-to-rem(5px),
13 --margin-right: fn.global-dim(--spacing --x --md), 13 --margin-right: fn.global-dim(--spacing --md),
14 ), 14 ),
15 ), 'dims'); 15 ), 'dims');
16 16