summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 11:58:14 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 11:58:14 +0100
commit55ec90a5c6ad6f652c73f6d73869300eb1aceb8c (patch)
treea5d6d986cda03cead1b728fa8311710e79c83aaf /src
parentColor adjustments (diff)
downloadiro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.gz
iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.tar.bz2
iro-design-55ec90a5c6ad6f652c73f6d73869300eb1aceb8c.zip
Restructuring
Diffstat (limited to 'src')
-rw-r--r--src/_base.scss3
-rw-r--r--src/_config.scss30
-rw-r--r--src/_declare-vars.scss (renamed from src/_vars.scss)85
-rw-r--r--src/_functions.scss42
-rw-r--r--src/_layouts.scss4
-rw-r--r--src/_mixins.scss11
-rw-r--r--src/_objects.scss16
-rw-r--r--src/index.scss30
-rw-r--r--src/layouts/_form.scss4
-rw-r--r--src/objects/_heading.scss7
10 files changed, 116 insertions, 116 deletions
diff --git a/src/_base.scss b/src/_base.scss
index 6e404fe..6e8efbd 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -1,5 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn; 2@use 'functions' as fn;
3@use 'mixins' as mx;
3 4
4html, 5html,
5body { 6body {
@@ -7,7 +8,7 @@ body {
7} 8}
8 9
9body { 10body {
10 @include fn.set-font(--standard, (--size: fn.dim(--font-size --md))); 11 @include mx.set-font(--standard, (--size: fn.dim(--font-size --md)));
11 12
12 margin: 0; 13 margin: 0;
13 padding: 0; 14 padding: 0;
diff --git a/src/_config.scss b/src/_config.scss
new file mode 100644
index 0000000..d79153f
--- /dev/null
+++ b/src/_config.scss
@@ -0,0 +1,30 @@
1@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media;
3
4iro.$vars-root-size: 16px;
5
6media.$breakpoints: (
7 md: 40rem,
8 sm: 28rem
9);
10
11media.$unit-intervals: (
12 'px': 1,
13 'em': .01,
14 'rem': .01,
15 '': 0
16);
17
18$wanted-grays: (
19 -1.25,
20 -1.1,
21 1,
22 1.15,
23 1.37,
24 1.73,
25 2.4,
26 3.26,
27 5,
28 11,
29 21,
30);
diff --git a/src/_vars.scss b/src/_declare-vars.scss
index d2fbc10..38d39dd 100644
--- a/src/_vars.scss
+++ b/src/_declare-vars.scss
@@ -1,69 +1,8 @@
1@use 'sass:map';
2@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
3@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
4@use '@oddbird/blend'; 3@use '@oddbird/blend';
5@use 'functions' as fn; 4@use 'functions' as fn;
6 5
7iro.$vars-root-size: 16px;
8
9media.$breakpoints: (
10 md: 40rem,
11 sm: 28rem
12);
13
14media.$unit-intervals: (
15 'px': 1,
16 'em': .01,
17 'rem': .01,
18 '': 0
19);
20
21$grays: ();
22
23@for $i from 0 through 100 {
24 $grays: append($grays, blend.lch($i * 1% 0 0));
25}
26
27$wanted-grays: (
28 -1.25,
29 -1.1,
30 1,
31 1.15,
32 1.37,
33 1.73,
34 2.4,
35 3.26,
36 5,
37 11,
38 21,
39);
40
41@function accent-palette($base, $dir: 1) {
42 @return (
43 --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
44 --main: $base,
45 --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
46 --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
47 --semi: rgba($base, .4),
48 --selection: rgba($base, .99),
49 --fg: blend.contrast($base),
50 );
51}
52
53@function gray-palette($lightness) {
54 $colors: fn.multi-contrast(blend.lch($lightness * 1% 0 0), $grays, $wanted-grays);
55
56 $palette: ();
57
58 @for $i from 1 through length($colors) {
59 $palette: map.set($palette, --gray#{$i}, hsl(fn.color(--gray-h), fn.color(--gray-s), lightness(nth($colors, $i))));
60 }
61
62 @return $palette;
63}
64
65//
66
67@include iro.props-store(( 6@include iro.props-store((
68 --dims: ( 7 --dims: (
69 --spacing: ( 8 --spacing: (
@@ -149,10 +88,10 @@ $wanted-grays: (
149 --fg-lo: fn.color(--gray11, null), // Strong text 88 --fg-lo: fn.color(--gray11, null), // Strong text
150 89
151 --accent: ( 90 --accent: (
152 --blue: accent-palette(blend.lch(48% 50 279)), 91 --blue: fn.accent-palette(blend.lch(48% 50 279)),
153 --red: accent-palette(blend.lch(48% 50 23)), 92 --red: fn.accent-palette(blend.lch(48% 50 23)),
154 --green: accent-palette(blend.lch(58% 50 141)), 93 --green: fn.accent-palette(blend.lch(58% 50 141)),
155 --yellow: accent-palette(blend.lch(73% 50 90)), 94 --yellow: fn.accent-palette(blend.lch(73% 50 90)),
156 95
157 --primary: iro.props-ref('colors', --colors --accent --blue), 96 --primary: iro.props-ref('colors', --colors --accent --blue),
158 --error: iro.props-ref('colors', --colors --accent --red), 97 --error: iro.props-ref('colors', --colors --accent --red),
@@ -175,11 +114,11 @@ $wanted-grays: (
175 ), 'colors'); 114 ), 'colors');
176 115
177 @include iro.props-store(( 116 @include iro.props-store((
178 --colors: gray-palette(94%) 117 --colors: fn.gray-palette(94%)
179 ), 'palette-light'); 118 ), 'palette-light');
180 119
181 @include iro.props-store(( 120 @include iro.props-store((
182 --colors: gray-palette(100%) 121 --colors: fn.gray-palette(100%)
183 ), 'palette-light-raised'); 122 ), 'palette-light-raised');
184} 123}
185 124
@@ -189,10 +128,10 @@ $wanted-grays: (
189 @include iro.props-store(( 128 @include iro.props-store((
190 --colors: ( 129 --colors: (
191 --accent: ( 130 --accent: (
192 --blue: accent-palette(blend.lch(58% 60 279), -1), 131 --blue: fn.accent-palette(blend.lch(58% 60 279), -1),
193 --red: accent-palette(blend.lch(58% 60 23), -1), 132 --red: fn.accent-palette(blend.lch(58% 60 23), -1),
194 --green: accent-palette(blend.lch(68% 60 141), -1), 133 --green: fn.accent-palette(blend.lch(68% 60 141), -1),
195 --yellow: accent-palette(blend.lch(83% 60 90), -1), 134 --yellow: fn.accent-palette(blend.lch(83% 60 90), -1),
196 135
197 --primary: iro.props-ref('colors-dark', --colors --accent --blue), 136 --primary: iro.props-ref('colors-dark', --colors --accent --blue),
198 --error: iro.props-ref('colors-dark', --colors --accent --red), 137 --error: iro.props-ref('colors-dark', --colors --accent --red),
@@ -202,11 +141,11 @@ $wanted-grays: (
202 ), 'colors-dark'); 141 ), 'colors-dark');
203 142
204 @include iro.props-store(( 143 @include iro.props-store((
205 --colors: gray-palette(9%) 144 --colors: fn.gray-palette(9%)
206 ), 'palette-dark'); 145 ), 'palette-dark');
207 146
208 @include iro.props-store(( 147 @include iro.props-store((
209 --colors: gray-palette(16%) 148 --colors: fn.gray-palette(16%)
210 ), 'palette-dark-raised'); 149 ), 'palette-dark-raised');
211} 150}
212 151
diff --git a/src/_functions.scss b/src/_functions.scss
index 73a1ec9..56fdf39 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,5 +1,7 @@
1@use 'sass:math'; 1@use 'sass:math';
2@use 'sass:map';
2@use 'iro-sass/src/index' as iro; 3@use 'iro-sass/src/index' as iro;
4@use 'config';
3@use '@oddbird/blend'; 5@use '@oddbird/blend';
4@use '@oddbird/blend/sass/convert' as blend-convert; 6@use '@oddbird/blend/sass/convert' as blend-convert;
5 7
@@ -53,16 +55,6 @@
53 @return $map; 55 @return $map;
54} 56}
55 57
56@mixin set-font($basis, $values: ()) {
57 $values: set-font($basis, $values);
58
59 @each $prop, $value in $values {
60 @if $value != null {
61 #{$prop}: $value;
62 }
63 }
64}
65
66@function multi-contrast($base-color, $colors, $wanted-contrasts) { 58@function multi-contrast($base-color, $colors, $wanted-contrasts) {
67 $dir: if(lightness($base-color) >= 50%, -1, 1); 59 $dir: if(lightness($base-color) >= 50%, -1, 1);
68 $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; 60 $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05;
@@ -104,3 +96,33 @@
104 96
105 @return $result; 97 @return $result;
106} 98}
99
100@function accent-palette($base, $dir: 1) {
101 @return (
102 --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
103 --main: $base,
104 --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
105 --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
106 --semi: rgba($base, .4),
107 --selection: rgba($base, .99),
108 --fg: blend.contrast($base),
109 );
110}
111
112@function gray-palette($lightness) {
113 $grays: ();
114
115 @for $i from 0 through 100 {
116 $grays: append($grays, blend.lch($i * 1% 0 0));
117 }
118
119 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
120
121 $palette: ();
122
123 @for $i from 1 through length($colors) {
124 $palette: map.set($palette, --gray#{$i}, hsl(color(--gray-h), color(--gray-s), lightness(nth($colors, $i))));
125 }
126
127 @return $palette;
128}
diff --git a/src/_layouts.scss b/src/_layouts.scss
new file mode 100644
index 0000000..99a003e
--- /dev/null
+++ b/src/_layouts.scss
@@ -0,0 +1,4 @@
1@use 'layouts/card';
2@use 'layouts/container';
3@use 'layouts/button-group';
4@use 'layouts/form';
diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..e8595f1
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,11 @@
1@use 'functions';
2
3@mixin set-font($basis, $values: ()) {
4 $values: functions.set-font($basis, $values);
5
6 @each $prop, $value in $values {
7 @if $value != null {
8 #{$prop}: $value;
9 }
10 }
11}
diff --git a/src/_objects.scss b/src/_objects.scss
new file mode 100644
index 0000000..45415f1
--- /dev/null
+++ b/src/_objects.scss
@@ -0,0 +1,16 @@
1@use 'objects/icon';
2@use 'objects/heading';
3@use 'objects/rule';
4@use 'objects/button';
5@use 'objects/text-field';
6@use 'objects/field-label';
7@use 'objects/radio';
8@use 'objects/checkbox';
9@use 'objects/switch';
10@use 'objects/action-button';
11@use 'objects/status-indicator';
12@use 'objects/avatar';
13@use 'objects/action-menu';
14@use 'objects/menu';
15@use 'objects/backdrop';
16@use 'objects/dialog';
diff --git a/src/index.scss b/src/index.scss
index 21054db..e090427 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,32 +1,8 @@
1@use 'functions'; 1@use 'declare-vars';
2
3@use 'vars';
4 2
5@use 'base'; 3@use 'base';
6 4@use 'layouts';
7@use 'layouts/card'; 5@use 'objects';
8@use 'layouts/container';
9@use 'layouts/button-group';
10
11@use 'objects/icon';
12@use 'objects/heading';
13@use 'objects/rule';
14@use 'objects/button';
15@use 'objects/text-field';
16@use 'objects/field-label';
17@use 'objects/radio';
18@use 'objects/checkbox';
19@use 'objects/switch';
20@use 'objects/action-button';
21@use 'objects/status-indicator';
22@use 'objects/avatar';
23@use 'objects/action-menu';
24@use 'objects/menu';
25@use 'objects/backdrop';
26@use 'objects/dialog';
27
28@use 'layouts/form';
29
30@use 'utils'; 6@use 'utils';
31 7
32@use 'apply-vars'; 8@use 'apply-vars';
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 4334192..a8308af 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,6 +1,8 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@use '../objects/field-label';
5
4@include iro.props-namespace('form') { 6@include iro.props-namespace('form') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
@@ -11,8 +13,6 @@
11 ), 'dims'); 13 ), 'dims');
12 14
13 @include iro.bem-layout(iro.props-namespace()) { 15 @include iro.bem-layout(iro.props-namespace()) {
14 @include iro.bem-composed-of('field-label' 'object');
15
16 display: flex; 16 display: flex;
17 flex-direction: column; 17 flex-direction: column;
18 align-items: baseline; 18 align-items: baseline;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 24971bb..b5f02d8 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,5 +1,6 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx;
3 4
4@include iro.props-namespace('heading') { 5@include iro.props-namespace('heading') {
5 @include iro.props-store(( 6 @include iro.props-store((
@@ -20,7 +21,7 @@
20 ), 'colors'); 21 ), 'colors');
21 22
22 @include iro.bem-object(iro.props-namespace()) { 23 @include iro.bem-object(iro.props-namespace()) {
23 @include fn.set-font(--headline); 24 @include mx.set-font(--headline);
24 25
25 display: block; 26 display: block;
26 margin-top: fn.dim(--in-page-margin --top); 27 margin-top: fn.dim(--in-page-margin --top);
@@ -51,7 +52,7 @@
51 } 52 }
52 53
53 @include iro.bem-modifier('sm') { 54 @include iro.bem-modifier('sm') {
54 @include fn.set-font(--standard, ( 55 @include mx.set-font(--standard, (
55 --line-height: null, 56 --line-height: null,
56 --size: fn.global-dim(--font-size --md), 57 --size: fn.global-dim(--font-size --md),
57 --weight: 500 58 --weight: 500
@@ -61,7 +62,7 @@
61 } 62 }
62 63
63 @include iro.bem-modifier('xs') { 64 @include iro.bem-modifier('xs') {
64 @include fn.set-font(--standard, ( 65 @include mx.set-font(--standard, (
65 --line-height: null, 66 --line-height: null,
66 --size: fn.global-dim(--font-size --xs), 67 --size: fn.global-dim(--font-size --xs),
67 --weight: 500, 68 --weight: 500,