summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-29 09:04:45 +0200
committerVolpeon <git@volpeon.ink>2022-03-29 09:04:45 +0200
commit0c7379a655825ed338ed210c73a636290ace7f7b (patch)
tree47db588415e6cbea8dc5b064137bd572602ad1e1
parentUpdate (diff)
downloadiro-design-0c7379a655825ed338ed210c73a636290ace7f7b.tar.gz
iro-design-0c7379a655825ed338ed210c73a636290ace7f7b.tar.bz2
iro-design-0c7379a655825ed338ed210c73a636290ace7f7b.zip
Added global border color
-rw-r--r--src/_declare-vars.scss57
-rw-r--r--src/_functions.scss2
-rw-r--r--src/_utils.scss2
-rw-r--r--src/objects/_dialog.scss2
4 files changed, 33 insertions, 30 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 89d10fe..fedb72f 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,24 @@
101 101
102@include iro.props-store(( 102@include iro.props-store((
103 --colors: ( 103 --colors: (
104 --gray: fn.gray-palette(100%),
105 ),
106), 'palette-light-hi');
107
108@include iro.props-store((
109 --colors: (
110 --gray: fn.gray-palette(96%),
111 ),
112), 'palette-light');
113
114@include iro.props-store((
115 --colors: (
116 --gray: fn.gray-palette(92%),
117 ),
118), 'palette-light-lo');
119
120@include iro.props-store((
121 --colors: (
104 --bg-hi2: fn.color(--gray --1, null), // Lightest background 122 --bg-hi2: fn.color(--gray --1, null), // Lightest background
105 --bg-hi: fn.color(--gray --2, null), // Lighter background 123 --bg-hi: fn.color(--gray --2, null), // Lighter background
106 --bg: fn.color(--gray --3, null), // Background 124 --bg: fn.color(--gray --3, null), // Background
@@ -115,7 +133,8 @@
115 --fg: fn.color(--gray --10, null), // Text 133 --fg: fn.color(--gray --10, null), // Text
116 --fg-lo: fn.color(--gray --11, null), // Strong text 134 --fg-lo: fn.color(--gray --11, null), // Strong text
117 135
118 --gray: ( --h: 220, --s: 0% ), 136 --border: iro.props-get-static(--colors --gray --5, 'palette-light'),
137
119 --blue: fn.color-palette(blend.lch(48% 50 279)), 138 --blue: fn.color-palette(blend.lch(48% 50 279)),
120 --purple: fn.color-palette(blend.lch(48% 50 308)), 139 --purple: fn.color-palette(blend.lch(48% 50 308)),
121 --red: fn.color-palette(blend.lch(48% 50 23)), 140 --red: fn.color-palette(blend.lch(48% 50 23)),
@@ -146,28 +165,30 @@
146 ), 165 ),
147), 'colors'); 166), 'colors');
148 167
168//
169
149@include iro.props-store(( 170@include iro.props-store((
150 --colors: ( 171 --colors: (
151 --gray: fn.gray-palette(100%), 172 --gray: fn.gray-palette(5%),
152 ), 173 ),
153), 'palette-light-hi'); 174), 'palette-dark-hi');
154 175
155@include iro.props-store(( 176@include iro.props-store((
156 --colors: ( 177 --colors: (
157 --gray: fn.gray-palette(96%), 178 --gray: fn.gray-palette(9%),
158 ), 179 ),
159), 'palette-light'); 180), 'palette-dark');
160 181
161@include iro.props-store(( 182@include iro.props-store((
162 --colors: ( 183 --colors: (
163 --gray: fn.gray-palette(92%), 184 --gray: fn.gray-palette(13%),
164 ), 185 ),
165), 'palette-light-lo'); 186), 'palette-dark-lo');
166
167//
168 187
169@include iro.props-store(( 188@include iro.props-store((
170 --colors: ( 189 --colors: (
190 --border: iro.props-get-static(--colors --gray --5, 'palette-dark'),
191
171 --blue: fn.color-palette(blend.lch(63% 50 279), -1), 192 --blue: fn.color-palette(blend.lch(63% 50 279), -1),
172 --purple: fn.color-palette(blend.lch(63% 50 308), -1), 193 --purple: fn.color-palette(blend.lch(63% 50 308), -1),
173 --red: fn.color-palette(blend.lch(63% 50 23), -1), 194 --red: fn.color-palette(blend.lch(63% 50 23), -1),
@@ -185,24 +206,6 @@
185 ) 206 )
186), 'colors-dark'); 207), 'colors-dark');
187 208
188@include iro.props-store((
189 --colors: (
190 --gray: fn.gray-palette(5%),
191 ),
192), 'palette-dark-hi');
193
194@include iro.props-store((
195 --colors: (
196 --gray: fn.gray-palette(9%),
197 ),
198), 'palette-dark');
199
200@include iro.props-store((
201 --colors: (
202 --gray: fn.gray-palette(13%),
203 ),
204), 'palette-dark-lo');
205
206// 209//
207 210
208@each $breakpoint in map-keys(media.$breakpoints) { 211@each $breakpoint in map-keys(media.$breakpoints) {
diff --git a/src/_functions.scss b/src/_functions.scss
index 5a30a88..7b43d95 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -125,7 +125,7 @@
125 $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);
126 126
127 @each $key, $color in $colors { 127 @each $key, $color in $colors {
128 $colors: map.set($colors, $key, hsl(color(--gray --h), color(--gray --s), lightness($color))); 128 $colors: map.set($colors, $key, $color);
129 } 129 }
130 130
131 @return $colors; 131 @return $colors;
diff --git a/src/_utils.scss b/src/_utils.scss
index 4aea27c..7981125 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -123,6 +123,6 @@ $dirs: (
123 } 123 }
124 124
125 @include iro.bem-utility('b#{$dir}-1') { 125 @include iro.bem-utility('b#{$dir}-1') {
126 border#{$suffix}: 1px solid fn.global-color(--obj); 126 border#{$suffix}: 1px solid fn.global-color(--border);
127 } 127 }
128} 128}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index ac77a66..7c9fb57 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -37,7 +37,7 @@
37 @include iro.props-store(( 37 @include iro.props-store((
38 --colors: ( 38 --colors: (
39 --outer-border: rgba(#000, .2), 39 --outer-border: rgba(#000, .2),
40 --inner-border: fn.global-color(--obj), 40 --inner-border: fn.global-color(--border),
41 --shadow: 0 .2em .5em rgba(#000, .2), 41 --shadow: 0 .2em .5em rgba(#000, .2),
42 ), 42 ),
43 ), 'colors'); 43 ), 'colors');