1111 --border_radius_md : 2.1rem ;
1212 --border_radius_sm : 1.3rem ;
1313 --border_radius_xs : 0.8rem ;
14+ --border_radius_xs2 : 0.5rem ;
1415 --border_radius_xs3 : 0.3rem ;
1516 --border_style : solid;
1617 --border_width : var (--border_width_1 );
142143 --lighten_80 : # ffffffe3 ;
143144 --lighten_90 : # fffffff5 ;
144145 --lighten_95 : # fffffffa ;
145- --line_height_lg : 1.6 ;
146- --line_height_md : 1.4 ;
146+ --line_height_lg : 1.8 ;
147+ --line_height_md : 1.5 ;
147148 --line_height_sm : 1.2 ;
148149 --link_color : hsl (var (--hue_a ) 61% 35% );
149150 --link_color_selected : var (--text_color );
188189 --space_xs : 0.6rem ;
189190 --space_xs2 : 0.4rem ;
190191 --space_xs3 : 0.3rem ;
192+ --space_xs4 : 0.2rem ;
193+ --text_05 : hsl (var (--tint_hue ) var (--tint_saturation ) 94% );
191194 --text_10 : hsl (var (--tint_hue ) var (--tint_saturation ) 90% );
192195 --text_50 : hsl (var (--tint_hue ) var (--tint_saturation ) 50% );
193196 --text_70 : hsl (var (--tint_hue ) var (--tint_saturation ) 32% );
278281 --shadow_alpha_70 : 83% ;
279282 --shadow_color_highlight : # 000 ;
280283 --shadow_color_umbra : hsl (var (--tint_hue ) var (--tint_saturation ) 82% );
284+ --text_05 : hsl (var (--tint_hue ) var (--tint_saturation ) 10% );
281285 --text_10 : hsl (var (--tint_hue ) var (--tint_saturation ) 14% );
282286 --text_70 : hsl (var (--tint_hue ) var (--tint_saturation ) 69% );
283287 --text_80 : hsl (var (--tint_hue ) var (--tint_saturation ) 80% );
@@ -390,44 +394,44 @@ body {
390394: where (h1 : not (.unstyled )) {
391395 --font_size : var (--font_size_xl3 );
392396 font-weight : 300 ;
393- margin-bottom : var (--space_xl5 );
394- /* TODO strange to omit only this one, but seems to be generally my desired behavior */
395- /* margin-top: var(--space_xl7 ); */
397+ margin-bottom : calc ( var (--flow_margin , var ( --space_lg )) * 3.23 );
398+ /* somewhat strange to omit only this one, but generally seems to be the desired behavior */
399+ /* margin-top: calc( var(--flow_margin, var(--space_lg)) * 5.28 ); */
396400}
397401
398402: where (h2 : not (.unstyled )) {
399403 --font_size : var (--font_size_xl2 );
400404 font-weight : 400 ;
401- margin-bottom : var (--space_xl4 );
402- margin-top : var (--space_xl6 );
405+ margin-bottom : calc ( var (--flow_margin , var ( --space_lg )) * 2.54 );
406+ margin-top : calc ( var (--flow_margin , var ( --space_lg )) * 4.15 );
403407}
404408
405409: where (h3 : not (.unstyled )) {
406410 --font_size : var (--font_size_xl );
407411 font-weight : 500 ;
408- margin-bottom : var (--space_xl3 );
409- margin-top : var (--space_xl5 );
412+ margin-bottom : calc ( var (--flow_margin , var ( --space_lg )) * 2 );
413+ margin-top : calc ( var (--flow_margin , var ( --space_lg )) * 3.23 );
410414}
411415
412416: where (h4 : not (.unstyled )) {
413417 --font_size : var (--font_size_lg );
414418 font-weight : 700 ;
415- margin-bottom : var (--space_xl2 );
416- margin-top : var (--space_xl4 );
419+ margin-bottom : calc ( var (--flow_margin , var ( --space_lg )) * 1.62 );
420+ margin-top : calc ( var (--flow_margin , var ( --space_lg )) * 2.54 );
417421}
418422
419423: where (h5 : not (.unstyled )) {
420424 --font_size : var (--font_size_md );
421425 font-weight : 900 ;
422- margin-bottom : var (--space_xl );
423- margin-top : var (--space_xl3 );
426+ margin-bottom : calc ( var (--flow_margin , var ( --space_lg )) * 1.23 );
427+ margin-top : calc ( var (--flow_margin , var ( --space_lg )) * 2 );
424428}
425429
426430: where (h6 : not (.unstyled )) {
427431 --font_size : var (--font_size_sm );
428432 font-weight : 600 ;
429- margin-bottom : var (--space_lg );
430- margin-top : var (--space_xl2 );
433+ margin-bottom : var (--flow_margin , var ( -- space_lg) );
434+ margin-top : calc ( var (--flow_margin , var ( --space_lg )) * 1.62 );
431435 text-transform : uppercase;
432436}
433437
@@ -451,10 +455,11 @@ body {
451455 pre ,
452456 blockquote ,
453457 aside ,
454- nav
458+ nav ,
459+ legend
455460 ): not (: last-child ): not (.unstyled )
456461) {
457- margin-bottom : var (--space_lg );
462+ margin-bottom : var (--flow_margin , var ( -- space_lg) );
458463}
459464
460465: where (section : not (: last-child )) {
@@ -481,7 +486,6 @@ body {
481486 border-left-width : var (--border_width_8 );
482487 padding : var (--space_md );
483488 color : var (--text_color );
484- background-color : var (--fg_10 );
485489}
486490
487491: where (code : not (.unstyled )) {
@@ -525,7 +529,6 @@ body {
525529
526530: where (legend : not (.unstyled )) {
527531 font-size : var (--font_size_lg );
528- margin-bottom : var (--space_lg );
529532}
530533
531534: where (input , textarea , select ) {
@@ -861,7 +864,7 @@ body {
861864}
862865
863866: where (button : not (.unstyled ).selected ) {
864- --button_text_color : var (--text_10 );
867+ --button_text_color : var (--text_05 );
865868 --button_fill : var (--fill , var (--shade_50 ));
866869 --button_fill_hover : var (--fill , var (--shade_50 ));
867870 --button_fill_active : var (--fill , var (--shade_50 ));
@@ -1033,11 +1036,11 @@ body {
10331036 transparent
10341037 )
10351038 );
1036- border-radius : var (--border_radius_xs );
1039+ border-radius : var (--border_radius , var ( -- border_radius_xs) );
10371040}
10381041/* A panel is a box embedded into the page, useful for visually isolating content. */
10391042.panel {
1040- border-radius : var (--border_radius_xs );
1043+ border-radius : var (--border_radius , var ( -- border_radius_xs) );
10411044 background-color : var (--fg_10 );
10421045}
10431046/*
@@ -1124,10 +1127,11 @@ These are used as modifiers to buttons.
11241127}
11251128.chip {
11261129 font-weight : 500 ;
1130+ font-size : var (--font_size , inherit);
11271131 padding-left : var (--space_xs );
11281132 padding-right : var (--space_xs );
11291133 background-color : var (--fg_10 );
1130- border-radius : var (--border_radius_xs );
1134+ border-radius : var (--border_radius , var ( -- border_radius_xs) );
11311135}
11321136a .chip {
11331137 font-weight : 600 ;
0 commit comments