diff options
-rw-r--r-- | src/_declare-vars.scss | 57 | ||||
-rw-r--r-- | src/_functions.scss | 2 | ||||
-rw-r--r-- | src/_utils.scss | 2 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 2 |
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'); |