Skip to content

Use CSS variables for spacing #873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 4, 2022
Merged

Use CSS variables for spacing #873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bcfc135
Replace (nearly) all `@su` less variables with CSS variables
dancormier Mar 10, 2022
ef02b6b
Merge branch 'develop' into feature/css-variable-spacing-units-only
aaronshekey Mar 11, 2022
76da6ea
Add a comment explaining `--su1`
dancormier Mar 11, 2022
3321770
Merge branch 'feature/css-variable-spacing-units-only' of https://git…
dancormier Mar 11, 2022
e78f29c
Merge branch 'develop' into feature/css-variable-spacing-units-only
aaronshekey Mar 31, 2022
4c828f4
Be explicit in calling out static spacing units
aaronshekey Mar 31, 2022
b6a9fcf
Merge branch 'develop' into feature/css-variable-spacing-units-only
dancormier Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/_data/atomics.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
{
"class": "bs-ring",
"output": "box-shadow: 0 0 0 @su4 var(--focus-ring);",
"output": "box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);",
"hover": true,
"focus": true
}
Expand Down Expand Up @@ -1120,7 +1120,7 @@
},
{
"class": "outline-ring",
"output": "outline: solid @su4 var(--focus-ring);",
"output": "outline: solid var(--su-static4) var(--focus-ring);",
"define": "<p class='mb0'>Adds an outline that mimics our button focus styling.</p>",
"focus": true
}
Expand Down
36 changes: 18 additions & 18 deletions docs/assets/less/stacks-documentation.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
@import "../../../lib/css/stacks.less"; // These are actual styles used in SO projects

.stacks-section {
margin-top: @su48;
margin-bottom: @su48;
margin-top: var(--su48);
margin-bottom: var(--su48);
}

.stacks-header {
Expand Down Expand Up @@ -180,16 +180,16 @@
// -- Section Title
.stacks-h2 {
font-size: var(--fs-headline1);
padding-top: @su64 + @su24; // Hack for #anchor positioning
margin-top: -@su64 + -@su24; // Hack for #anchor positioning
padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning
margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning
}

// -- Sub-section Title
.stacks-h3 {
font-size: var(--fs-subheading);
color: var(--fc-medium);
padding-top: @su64 + @su24; // Hack for #anchor positioning
margin-top: -@su64 + -@su24; // Hack for #anchor positioning
padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning
margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning
}

.stacks-h4 {
Expand Down Expand Up @@ -219,7 +219,7 @@
// -- Code Tag
// ----------------------------------------------------------------------------
.stacks-code {
padding: 3px 5px @su2 @su4;
padding: 3px 5px var(--su2) var(--su4);
border-radius: var(--br-sm);
background-color: var(--black-075);
font-size: var(--fs-caption);
Expand Down Expand Up @@ -247,7 +247,7 @@
// $ CODE STYLES
// ----------------------------------------------------------------------------
.stacks-preview {
margin-bottom: @su48;
margin-bottom: var(--su48);
border-radius: var(--br-md);
box-shadow: var(--bs-sm);

Expand All @@ -272,7 +272,7 @@

// Preview area
.stacks-preview--example {
padding: @su16;
padding: var(--su16);
border-bottom-left-radius: var(--br-md);
border-bottom-right-radius: var(--br-md);
border: 1px solid var(--bc-medium);
Expand Down Expand Up @@ -300,7 +300,7 @@

// -- Preview Area
.stacks-icon-preview {
padding: @su8;
padding: var(--su8);
min-height: 4em;
border-top-left-radius: var(--br-sm);
border-top-right-radius: var(--br-sm);
Expand All @@ -319,7 +319,7 @@
// ----------------------------------------------------------------------------

.stacks-flex-example--item {
padding: @su8;
padding: var(--su8);
border: 1px solid var(--bc-medium);
background-color: var(--black-075);
font-family: var(--ff-mono);
Expand All @@ -331,8 +331,8 @@
// $ COLORS
// ----------------------------------------------------------------------------
.stacks-swatch {
width: @su32;
height: @su32;
width: var(--su-static32);
height: var(--su-static32);
}

// ============================================================================
Expand Down Expand Up @@ -401,17 +401,17 @@
.stacks-theme-button {
color: var(--black-300);
position: relative;
padding-right: @su24 !important;
padding-right: var(--su-static24) !important;

&:after {
content: "";
position: absolute;
z-index: var(--zi-active);
top: calc(50% - 2px);
right: @su12 - @su2;
top: calc(50% - var(--su-static2));
right: calc(var(--su-static12) - var(--su-static2));
border-style: solid;
border-width: @su4;
border-top-width: @su4;
border-width: var(--su-static4);
border-top-width: var(--su-static4);
border-bottom-width: 0;
border-color: currentColor transparent;
pointer-events: none;
Expand Down
4 changes: 2 additions & 2 deletions docs/product/components/banners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
<!-- Override stacks classes for demos -->
<style>
.s-banner[aria-hidden=false] {
-webkit-transform: translate3d(0, 63px, 0);
transform: translate3d(0, 63px, 0);
-webkit-transform: translate3d(0, calc(var(--su64) - var(--su1)), 0);
transform: translate3d(0, calc(var(--su64) - var(--su1)), 0);
}
.s-banner[aria-hidden=false].is-pinned {
-webkit-transform: translate3d(0, 0, 0);
Expand Down
30 changes: 15 additions & 15 deletions lib/css/atomic/_stacks-borders.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,34 +46,34 @@
// ----------------------------------------------------------------------------
// $$ All Sides
#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
.baw1 { border-width: (@su2 / 2) !important; }
.baw2 { border-width: @su2 !important; }
.baw3 { border-width: @su4 !important; }
.baw1 { border-width: var(--su-static1) !important; }
.baw2 { border-width: var(--su-static2) !important; }
.baw3 { border-width: var(--su-static4) !important; }

// $$ Top Border
#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
.btw1 { border-top-width: (@su2 / 2) !important; }
.btw2 { border-top-width: @su2 !important; }
.btw3 { border-top-width: @su4 !important; }
.btw1 { border-top-width: var(--su-static1) !important; }
.btw2 { border-top-width: var(--su-static2) !important; }
.btw3 { border-top-width: var(--su-static4) !important; }

// $$ Right Border
#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
.brw1 { border-right-width: (@su2 / 2) !important; }
.brw2 { border-right-width: @su2 !important; }
.brw3 { border-right-width: @su4 !important; }
.brw1 { border-right-width: var(--su-static1) !important; }
.brw2 { border-right-width: var(--su-static2) !important; }
.brw3 { border-right-width: var(--su-static4) !important; }

// $$ Bottom Border
#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
.bbw1 { border-bottom-width: (@su2 / 2) !important; }
.bbw2 { border-bottom-width: @su2 !important; }
.bbw3 { border-bottom-width: @su4 !important; }
.bbw1 { border-bottom-width: var(--su-static1) !important; }
.bbw2 { border-bottom-width: var(--su-static2) !important; }
.bbw3 { border-bottom-width: var(--su-static4) !important; }

// $$ Left Border
#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
.blw0 { border-left-width: 0 !important; }
.blw1 { border-left-width: (@su2 / 2) !important; }
.blw2 { border-left-width: @su2 !important; }
.blw3 { border-left-width: @su4 !important; }
.blw1 { border-left-width: var(--su-static1) !important; }
.blw2 { border-left-width: var(--su-static2) !important; }
.blw3 { border-left-width: var(--su-static4) !important; }

// $$ Y-Axis Border
.byw0 { .btw0; .bbw0; }
Expand Down
1 change: 1 addition & 0 deletions lib/css/atomic/_stacks-flex.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@
// $ FLEX SPACING
// Insert spaces or gutters in between flex items
// ----------------------------------------------------------------------------
// TODO: Make this play nice with spacing units… or yeet this in the age of gap
Copy link
Contributor

@aaronshekey aaronshekey Mar 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to punt here and just use the oldschool Less. Refactoring away from gs classes might take some doing, but needs to be done. I'd like to wait until we're firmly into iOS 16 before truly throwing these classes away. CSS ☹️

Copy link
Contributor Author

@dancormier dancormier Mar 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I consider this a long-term TODO.

That said, if we wind up with @su only here (and maybe one other spot), it might be worth it to just hardcode the pixel values here for the sake of simplicity. No rush from me though.

.gs2 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su2); }
.gs4 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su4); }
.gs6 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su6); }
Expand Down
22 changes: 11 additions & 11 deletions lib/css/atomic/_stacks-grid.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@
// into its own section and documentation
// ----------------------------------------------------------------------------
#stacks-internals #responsify('.g0', { gap: 0 });
#stacks-internals #responsify('.g1', { gap: @su1 });
#stacks-internals #responsify('.g2', { gap: @su2 });
#stacks-internals #responsify('.g4', { gap: @su4; });
#stacks-internals #responsify('.g6', { gap: @su6; });
#stacks-internals #responsify('.g8', { gap: @su8; });
#stacks-internals #responsify('.g12', { gap: @su12; });
#stacks-internals #responsify('.g16', { gap: @su16; });
#stacks-internals #responsify('.g24', { gap: @su24; });
#stacks-internals #responsify('.g32', { gap: @su32; });
#stacks-internals #responsify('.g48', { gap: @su48; });
#stacks-internals #responsify('.g64', { gap: @su64; });
#stacks-internals #responsify('.g1', { gap: var(--su1) });
#stacks-internals #responsify('.g2', { gap: var(--su2) });
#stacks-internals #responsify('.g4', { gap: var(--su4); });
#stacks-internals #responsify('.g6', { gap: var(--su6); });
#stacks-internals #responsify('.g8', { gap: var(--su8); });
#stacks-internals #responsify('.g12', { gap: var(--su12); });
#stacks-internals #responsify('.g16', { gap: var(--su16); });
#stacks-internals #responsify('.g24', { gap: var(--su24); });
#stacks-internals #responsify('.g32', { gap: var(--su32); });
#stacks-internals #responsify('.g48', { gap: var(--su48); });
#stacks-internals #responsify('.g64', { gap: var(--su64); });

// ============================================================================
// $ GRID FLOW
Expand Down
16 changes: 8 additions & 8 deletions lib/css/atomic/_stacks-misc.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@
// $ OUTLINE
// ----------------------------------------------------------------------------
.outline-none { outline: 0 !important; }
.outline-ring { outline: solid @su4 var(--focus-ring); }
.outline-ring { outline: solid var(--su-static4) var(--focus-ring); }

.f\:outline-ring {
&:focus,
Expand All @@ -293,7 +293,7 @@
.bs-lg { box-shadow: var(--bs-lg) !important; }
.h\:bs-lg:hover { .bs-lg; }
.bs-xl { box-shadow: var(--bs-xl) !important; }
.bs-ring { box-shadow: 0 0 0 @su4 var(--focus-ring); }
.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); }
.h\:bs-ring:hover { .bs-ring; }
.f\:bs-ring {
&:focus,
Expand All @@ -303,12 +303,12 @@
}

// -- Added hover styles for box-shadow
.bs-sm.bs-hover:hover { box-shadow: 0 @su2 @su8 @black-050 !important; }
.bs-md.bs-hover:hover { box-shadow: 0 @su4 @su8 @black-100 !important; }
.bs-lg.bs-hover:hover { box-shadow: 0 @su4 @su12 fade(@black-300, 70%) !important; }
.bs-i-sm.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su8 0 fade(@black-200, 75%) !important; }
.bs-i-md.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su8 0 fade(@black-350, 80%) !important; }
.bs-i-lg.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su12 0 @black-350 !important; }
.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) @black-050 !important; }
.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) @black-100 !important; }
.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(@black-300, 70%) !important; }
.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-200, 75%) !important; }
.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-350, 80%) !important; }
.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 @black-350 !important; }

// ============================================================================
// $ TRANSITIONS
Expand Down
Loading