summaryrefslogtreecommitdiffstats
path: root/src/_core.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_core.vars.scss')
-rw-r--r--src/_core.vars.scss95
1 files changed, 52 insertions, 43 deletions
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 53c7067..f7a9ebc 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -89,11 +89,18 @@ $border-width--thick: props.def(--border-width--thick, 4px) !default;
89$border-width--medium: props.def(--border-width--medium, 2px) !default; 89$border-width--medium: props.def(--border-width--medium, 2px) !default;
90$border-width--thin: props.def(--border-width--thin, 1px) !default; 90$border-width--thin: props.def(--border-width--thin, 1px) !default;
91 91
92$shadow--x: props.def(--shadow--x, 0) !default; 92$shadow--l1--x: props.def(--shadow--l1--x, 0) !default;
93$shadow--y: props.def(--shadow--y, 1px) !default; 93$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default;
94$shadow--blur: props.def(--shadow--blur, 4px) !default; 94$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
95$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
95 96
96$rounding: props.def(--rounding, 4px) !default; 97$shadow--l2--x: props.def(--shadow--l2--x, 0) !default;
98$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default;
99$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
100$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
101
102$rounding: props.def(--rounding, 12px) !default;
103$rounding--sm: props.def(--rounding--sm, 4px) !default;
97 104
98$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; 105$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
99$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; 106$key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
@@ -102,13 +109,15 @@ $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($bord
102$list--indent: props.def(--list--indent, props.get($size--400)) !default; 109$list--indent: props.def(--list--indent, props.get($size--400)) !default;
103$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default; 110$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
104 111
112$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
113
105// 114//
106 115
107$-static-colors: (); 116$-static-colors: ();
108 117
109@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 118@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
110 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base)); 119 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
111 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); 120 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
112} 121}
113 122
114// 123//
@@ -116,11 +125,11 @@ $-static-colors: ();
116$transparent-colors: props.def(--transparent-colors, (), 'color'); 125$transparent-colors: props.def(--transparent-colors, (), 'color');
117 126
118@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { 127@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
119 $color: list.nth($palette, 1); 128 $color: list.nth($palette, 1);
120 $text: list.nth($palette, 2); 129 $text: list.nth($palette, 2);
121 130
122 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); 131 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
123 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); 132 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
124} 133}
125 134
126// 135//
@@ -128,47 +137,47 @@ $transparent-colors: props.def(--transparent-colors, (), 'color');
128$themes: (); 137$themes: ();
129 138
130@each $theme-name, $theme in config.$themes { 139@each $theme-name, $theme in config.$themes {
131 @each $variant-name, $variant in $theme { 140 @each $variant-name, $variant in $theme {
132 @if $variant != null { 141 @if $variant != null {
133 $compiled: props.def(--colors, (), 'color'); 142 $compiled: props.def(--colors, (), 'color');
134 143
135 @each $palette-name, $palette in $-static-colors { 144 @each $palette-name, $palette in $-static-colors {
136 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); 145 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
137 } 146 }
138 147
139 @each $palette-name, $palette in map.get($variant, --palettes) { 148 @each $palette-name, $palette in map.get($variant, --palettes) {
140 $base-color: list.nth($palette, 1); 149 $base-color: list.nth($palette, 1);
141 $levels: list.nth($palette, 2); 150 $levels: list.nth($palette, 2);
142 151
143 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1)); 152 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
144 $compiled: props.merge($compiled, ( $palette-name: $palette )); 153 $compiled: props.merge($compiled, ( $palette-name: $palette ));
145 } 154 }
146 155
147 @each $color, $value in map.get($variant, --constants) { 156 @each $color, $value in map.get($variant, --constants) {
148 $compiled: props.merge($compiled, ( $color: $value )); 157 $compiled: props.merge($compiled, ( $color: $value ));
149 } 158 }
150 159
151 @each $color, $ref in map.get($variant, --semantic) { 160 @each $color, $ref in map.get($variant, --semantic) {
152 $res: (); 161 $res: ();
153 162
154 @if meta.type-of($ref) == 'map' { 163 @if meta.type-of($ref) == 'map' {
155 @each $key, $r in $ref { 164 @each $key, $r in $ref {
156 $re1: list.nth($r, 1); 165 $re1: list.nth($r, 1);
157 $re2: functions.list-slice($r, 2); 166 $re2: functions.list-slice($r, 2);
158 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); 167 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
159 } 168 }
160 } @else { 169 } @else {
161 $ref1: list.nth($ref, 1); 170 $ref1: list.nth($ref, 1);
162 $ref2: functions.list-slice($ref, 2); 171 $ref2: functions.list-slice($ref, 2);
163 $res: props.get($compiled, $ref1, $ref2...); 172 $res: props.get($compiled, $ref1, $ref2...);
164 } 173 }
165 174
166 $compiled: props.merge($compiled, ( $color: $res )); 175 $compiled: props.merge($compiled, ( $color: $res ));
167 } 176 }
168 177
169 $themes: map.set($themes, $theme-name, $variant-name, $compiled); 178 $themes: map.set($themes, $theme-name, $variant-name, $compiled);
170 } 179 }
171 } 180 }
172} 181}
173 182
174$theme: map.get($themes, config.$theme-default, light) !default; 183$theme: map.get($themes, config.$theme-default, light) !default;