summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-13 16:01:03 +0100
committerVolpeon <git@volpeon.ink>2022-02-13 16:01:03 +0100
commita8d6946bbc6b4c835b2812ddb8eae98393777199 (patch)
tree5fa4bbfef96e72866e9b6b8152ea01eaeb106012
parentUpdate (diff)
downloadiro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.gz
iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.tar.bz2
iro-design-a8d6946bbc6b4c835b2812ddb8eae98393777199.zip
Improved accent structure
-rw-r--r--src/_config.scss24
-rw-r--r--src/_declare-vars.scss80
-rw-r--r--src/_functions.scss32
-rw-r--r--src/objects/_button.scss8
-rw-r--r--src/objects/_checkbox.scss4
-rw-r--r--src/objects/_field-label.scss2
-rw-r--r--src/objects/_radio.scss4
-rw-r--r--src/objects/_status-indicator.scss6
-rw-r--r--src/objects/_switch.scss4
-rw-r--r--src/objects/_text-field.scss8
10 files changed, 92 insertions, 80 deletions
diff --git a/src/_config.scss b/src/_config.scss
index 78f81c7..b54cb37 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -16,15 +16,17 @@ media.$unit-intervals: (
16); 16);
17 17
18$wanted-grays: ( 18$wanted-grays: (
19 -1.25, 19 --1: -1.25,
20 -1.1, 20 --2: -1.1,
21 1, 21 --3: 1,
22 1.15, 22
23 1.3, 23 --4: 1.15,
24 1.73, 24 --5: 1.3,
25 2.4, 25 --6: 1.73,
26 3.26, 26
27 5, 27 --7: 2.4,
28 11, 28 --8: 3.26,
29 21, 29 --9: 5,
30 --10: 11,
31 --11: 21,
30); 32);
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index fa6de76..44b7d0e 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -70,32 +70,30 @@
70@include iro.fn-execute { 70@include iro.fn-execute {
71 @include iro.props-store(( 71 @include iro.props-store((
72 --colors: ( 72 --colors: (
73 --gray-h: 220, 73 --bg-hi2: fn.color(--gray --1, null), // Lightest background
74 --gray-s: 5%, 74 --bg-hi: fn.color(--gray --2, null), // Lighter background
75 75 --bg: fn.color(--gray --3, null), // Background
76 --bg-hi2: fn.color(--gray1, null), // Lightest background 76
77 --bg-hi: fn.color(--gray2, null), // Lighter background 77 --obj-hi: fn.color(--gray --4, null),
78 --bg: fn.color(--gray3, null), // Background 78 --obj: fn.color(--gray --5, null),
79 79 --obj-lo: fn.color(--gray --6, null),
80 --obj-hi: fn.color(--gray4, null), 80
81 --obj: fn.color(--gray5, null), 81 --fg-hi3: fn.color(--gray --7, null), // Disabled text
82 --obj-lo: fn.color(--gray6, null), 82 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
83 83 --fg-hi: fn.color(--gray --9, null), // Faint text
84 --fg-hi3: fn.color(--gray7, null), // Disabled text 84 --fg: fn.color(--gray --10, null), // Text
85 --fg-hi2: fn.color(--gray8, null), // Placeholder text 85 --fg-lo: fn.color(--gray --11, null), // Strong text
86 --fg-hi: fn.color(--gray9, null), // Faint text 86
87 --fg: fn.color(--gray10, null), // Text 87 --gray: ( --h: 220, --s: 5% ),
88 --fg-lo: fn.color(--gray11, null), // Strong text 88 --blue: fn.color-palette(blend.lch(48% 50 279)),
89 --red: fn.color-palette(blend.lch(48% 50 23)),
90 --green: fn.color-palette(blend.lch(63% 50 141)),
91 --yellow: fn.color-palette(blend.lch(73% 50 90)),
89 92
90 --accent: ( 93 --accent: (
91 --blue: fn.accent-palette(blend.lch(48% 50 279)), 94 --primary: iro.props-ref('colors', --colors --blue),
92 --red: fn.accent-palette(blend.lch(48% 50 23)), 95 --error: iro.props-ref('colors', --colors --red),
93 --green: fn.accent-palette(blend.lch(58% 50 141)), 96 --success: iro.props-ref('colors', --colors --green),
94 --yellow: fn.accent-palette(blend.lch(73% 50 90)),
95
96 --primary: iro.props-ref('colors', --colors --accent --blue),
97 --error: iro.props-ref('colors', --colors --accent --red),
98 --success: iro.props-ref('colors', --colors --accent --green),
99 ), 97 ),
100 98
101 --selection: ( 99 --selection: (
@@ -106,7 +104,7 @@
106 104
107 --focus: ( 105 --focus: (
108 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null), 106 --shadow: 0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
109 --fill: fn.color(--accent --primary --main, null), 107 --fill: fn.color(--accent --primary --bg, null),
110 --text: fn.color(--accent --primary --lo, null), 108 --text: fn.color(--accent --primary --lo, null),
111 --fill-text: fn.color(--accent --primary --fg, null), 109 --fill-text: fn.color(--accent --primary --fg, null),
112 ), 110 ),
@@ -114,11 +112,15 @@
114 ), 'colors'); 112 ), 'colors');
115 113
116 @include iro.props-store(( 114 @include iro.props-store((
117 --colors: fn.gray-palette(94%) 115 --colors: (
116 --gray: fn.gray-palette(94%),
117 ),
118 ), 'palette-light'); 118 ), 'palette-light');
119 119
120 @include iro.props-store(( 120 @include iro.props-store((
121 --colors: fn.gray-palette(100%) 121 --colors: (
122 --gray: fn.gray-palette(100%),
123 ),
122 ), 'palette-light-raised'); 124 ), 'palette-light-raised');
123} 125}
124 126
@@ -127,25 +129,29 @@
127@include iro.fn-execute { 129@include iro.fn-execute {
128 @include iro.props-store(( 130 @include iro.props-store((
129 --colors: ( 131 --colors: (
132 --blue: fn.color-palette(blend.lch(58% 60 279), -1),
133 --red: fn.color-palette(blend.lch(58% 60 23), -1),
134 --green: fn.color-palette(blend.lch(73% 60 141), -1),
135 --yellow: fn.color-palette(blend.lch(83% 60 90), -1),
136
130 --accent: ( 137 --accent: (
131 --blue: fn.accent-palette(blend.lch(58% 60 279), -1), 138 --primary: iro.props-ref('colors-dark', --colors --blue),
132 --red: fn.accent-palette(blend.lch(58% 60 23), -1), 139 --error: iro.props-ref('colors-dark', --colors --red),
133 --green: fn.accent-palette(blend.lch(68% 60 141), -1), 140 --success: iro.props-ref('colors-dark', --colors --green),
134 --yellow: fn.accent-palette(blend.lch(83% 60 90), -1),
135
136 --primary: iro.props-ref('colors-dark', --colors --accent --blue),
137 --error: iro.props-ref('colors-dark', --colors --accent --red),
138 --success: iro.props-ref('colors-dark', --colors --accent --green),
139 ), 141 ),
140 ) 142 )
141 ), 'colors-dark'); 143 ), 'colors-dark');
142 144
143 @include iro.props-store(( 145 @include iro.props-store((
144 --colors: fn.gray-palette(9%) 146 --colors: (
147 --gray: fn.gray-palette(9%),
148 ),
145 ), 'palette-dark'); 149 ), 'palette-dark');
146 150
147 @include iro.props-store(( 151 @include iro.props-store((
148 --colors: fn.gray-palette(16%) 152 --colors: (
153 --gray: fn.gray-palette(16%),
154 ),
149 ), 'palette-dark-raised'); 155 ), 'palette-dark-raised');
150} 156}
151 157
diff --git a/src/_functions.scss b/src/_functions.scss
index 56fdf39..c45dcfb 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -78,10 +78,12 @@
78 } 78 }
79 } 79 }
80 80
81 $wanted-contrast: nth($wanted-contrasts, $wanted-idx); 81 $wanted: nth($wanted-contrasts, $wanted-idx);
82 $wanted-key: nth($wanted, 1);
83 $wanted-contrast: nth($wanted, 2);
82 84
83 @if $contrast >= $wanted-contrast { 85 @if $contrast >= $wanted-contrast {
84 $result: append($result, $color); 86 $result: map.set($result, $wanted-key, $color);
85 $wanted-idx: $wanted-idx + 1; 87 $wanted-idx: $wanted-idx + 1;
86 } @else { 88 } @else {
87 $colors-idx: $colors-idx + $dir * 1; 89 $colors-idx: $colors-idx + $dir * 1;
@@ -90,19 +92,23 @@
90 92
91 $last-color: nth($colors, if($dir == -1, 1, $colors-len)); 93 $last-color: nth($colors, if($dir == -1, 1, $colors-len));
92 94
93 @for $i from $wanted-idx through $wanted-len { 95 @if $wanted-idx <= $wanted-len {
94 $result: append($result, $last-color); 96 @for $i from $wanted-idx through $wanted-len {
97 $wanted: nth($wanted-contrasts, $i);
98 $wanted-key: nth($wanted, 1);
99 $result: map.set($result, $wanted-key, $last-color);
100 }
95 } 101 }
96 102
97 @return $result; 103 @return $result;
98} 104}
99 105
100@function accent-palette($base, $dir: 1) { 106@function color-palette($base, $dir: 1) {
101 @return ( 107 @return (
102 --hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%), 108 --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
103 --main: $base, 109 --bg: $base,
104 --lo: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%), 110 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
105 --lo2: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%), 111 --obj-lo: blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
106 --semi: rgba($base, .4), 112 --semi: rgba($base, .4),
107 --selection: rgba($base, .99), 113 --selection: rgba($base, .99),
108 --fg: blend.contrast($base), 114 --fg: blend.contrast($base),
@@ -118,11 +124,9 @@
118 124
119 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); 125 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
120 126
121 $palette: (); 127 @each $key, $color in $colors {
122 128 $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color)));
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 } 129 }
126 130
127 @return $palette; 131 @return $colors;
128} 132}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 586ee84..f93f342 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -57,18 +57,18 @@
57 ), 57 ),
58 ), 58 ),
59 --accent: ( 59 --accent: (
60 --bg: fn.global-color(--accent --primary --main), 60 --bg: fn.global-color(--accent --primary --bg),
61 --label: fn.global-color(--accent --primary --fg), 61 --label: fn.global-color(--accent --primary --fg),
62 --outline-label: fn.global-color(--accent --primary --lo), 62 --outline-label: fn.global-color(--accent --primary --obj),
63 --shadow: 0 0 0 0 transparent, 63 --shadow: 0 0 0 0 transparent,
64 64
65 --hover: ( 65 --hover: (
66 --bg: fn.global-color(--accent --primary --lo), 66 --bg: fn.global-color(--accent --primary --obj),
67 --label: fn.global-color(--accent --primary --fg), 67 --label: fn.global-color(--accent --primary --fg),
68 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
69 ), 69 ),
70 --active: ( 70 --active: (
71 --bg: fn.global-color(--accent --primary --lo2), 71 --bg: fn.global-color(--accent --primary --obj-lo),
72 --label: fn.global-color(--accent --primary --fg), 72 --label: fn.global-color(--accent --primary --fg),
73 --shadow: 0 0 0 0 transparent, 73 --shadow: 0 0 0 0 transparent,
74 ), 74 ),
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index be47eee..b7762d2 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -23,10 +23,10 @@
23 --box-border: fn.global-color(--fg), 23 --box-border: fn.global-color(--fg),
24 ), 24 ),
25 --accent: ( 25 --accent: (
26 --box-border: fn.global-color(--accent --primary --main), 26 --box-border: fn.global-color(--accent --primary --bg),
27 27
28 --hover: ( 28 --hover: (
29 --box-border: fn.global-color(--accent --primary --lo), 29 --box-border: fn.global-color(--accent --primary --obj),
30 ), 30 ),
31 ), 31 ),
32 --key-focus: ( 32 --key-focus: (
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 4b75282..a42be1d 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -15,7 +15,7 @@
15 --colors: ( 15 --colors: (
16 --label: fn.global-color(--fg-hi), 16 --label: fn.global-color(--fg-hi),
17 --hint: fn.global-color(--fg), 17 --hint: fn.global-color(--fg),
18 --error-hint: fn.global-color(--accent --error --main), 18 --error-hint: fn.global-color(--accent --error --bg),
19 --disabled: fn.global-color(--fg-hi3), 19 --disabled: fn.global-color(--fg-hi3),
20 ), 20 ),
21 ), 'colors'); 21 ), 'colors');
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 85f94f2..7346a74 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -23,10 +23,10 @@
23 --circle-border: fn.global-color(--fg), 23 --circle-border: fn.global-color(--fg),
24 ), 24 ),
25 --accent: ( 25 --accent: (
26 --circle-border: fn.global-color(--accent --primary --main), 26 --circle-border: fn.global-color(--accent --primary --bg),
27 27
28 --hover: ( 28 --hover: (
29 --circle-border: fn.global-color(--accent --primary --lo), 29 --circle-border: fn.global-color(--accent --primary --obj),
30 ), 30 ),
31 ), 31 ),
32 --key-focus: ( 32 --key-focus: (
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index e06c80b..0ddd115 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -11,9 +11,9 @@
11 @include iro.props-store(( 11 @include iro.props-store((
12 --colors: ( 12 --colors: (
13 --default: fn.global-color(--obj-lo), 13 --default: fn.global-color(--obj-lo),
14 --green: fn.global-color(--accent --green --hi), 14 --green: fn.global-color(--green --bg-hi),
15 --yellow: fn.global-color(--accent --yellow --hi), 15 --yellow: fn.global-color(--yellow --bg-hi),
16 --red: fn.global-color(--accent --red --hi), 16 --red: fn.global-color(--red --bg-hi),
17 ), 17 ),
18 ), 'colors'); 18 ), 'colors');
19 19
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index e0ff178..06b5540 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -25,10 +25,10 @@
25 --handle-border: fn.global-color(--fg), 25 --handle-border: fn.global-color(--fg),
26 ), 26 ),
27 --accent: ( 27 --accent: (
28 --handle-border: fn.global-color(--accent --primary --main), 28 --handle-border: fn.global-color(--accent --primary --bg),
29 29
30 --hover: ( 30 --hover: (
31 --handle-border: fn.global-color(--accent --primary --lo), 31 --handle-border: fn.global-color(--accent --primary --obj),
32 ), 32 ),
33 ), 33 ),
34 --key-focus: ( 34 --key-focus: (
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b18b404..856c41f 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -56,7 +56,7 @@
56 --shadow: 0 0 0 0 transparent, 56 --shadow: 0 0 0 0 transparent,
57 ), 57 ),
58 --focus: ( 58 --focus: (
59 --border: fn.global-color(--accent --primary --main), 59 --border: fn.global-color(--accent --primary --bg),
60 --shadow: 0 0 0 0 transparent, 60 --shadow: 0 0 0 0 transparent,
61 ), 61 ),
62 --key-focus: ( 62 --key-focus: (
@@ -64,15 +64,15 @@
64 --shadow: fn.global-color(--focus --shadow), 64 --shadow: fn.global-color(--focus --shadow),
65 ), 65 ),
66 --error: ( 66 --error: (
67 --border: fn.global-color(--accent --error --hi), 67 --border: fn.global-color(--accent --error --bg-hi),
68 --shadow: 0 0 0 0 transparent, 68 --shadow: 0 0 0 0 transparent,
69 69
70 --hover: ( 70 --hover: (
71 --border: fn.global-color(--accent --error --main), 71 --border: fn.global-color(--accent --error --bg),
72 --shadow: 0 0 0 0 transparent, 72 --shadow: 0 0 0 0 transparent,
73 ), 73 ),
74 --focus: ( 74 --focus: (
75 --border: fn.global-color(--accent --error --main), 75 --border: fn.global-color(--accent --error --bg),
76 --shadow: 0 0 0 0 transparent, 76 --shadow: 0 0 0 0 transparent,
77 ), 77 ),
78 ), 78 ),