Skip to content
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

Backport Sass from upstream #443

Merged
merged 9 commits into from
Apr 24, 2024
Merged

Backport Sass from upstream #443

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d625036
Backport Sass from upstream
XhmikosR Mar 25, 2024
5c75f8a
Merge branch 'main' into xmr/scss
XhmikosR Mar 30, 2024
3a0283b
Merge branch 'main' into xmr/scss
XhmikosR Apr 1, 2024
5febd28
Fix ads horizontal centering at some breakpoints
julien-deramond Apr 3, 2024
d1ac697
Merge branch 'main' into xmr/scss
XhmikosR Apr 18, 2024
141dc1c
Delete the unused _buttons.scss
XhmikosR Apr 18, 2024
5876bd3
Move comment
XhmikosR Apr 18, 2024
f7c5a91
Update _ads.scss
XhmikosR Apr 18, 2024
676899c
Merge branch 'main' into xmr/scss
XhmikosR Apr 24, 2024
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
17 changes: 8 additions & 9 deletions src/assets/scss/_ads.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,27 @@
position: static;
display: block;
max-width: 400px;
padding: 12px 12px 12px 154px;
margin: 1.5rem auto 0;
padding: 15px 15px 15px 160px;
margin: 2rem 0;
Copy link
Member

Choose a reason for hiding this comment

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

Maybe the surrounding HTML code is different in the blog, but margin: 2rem 0; causes a regression making the ad not horizontally centered at some breakpoints:

Screenshot 2024-04-03 at 09 04 52

The easiest fix would be to do margin: 2rem auto 0; instead.

If we want exactly the same Scss file, we should rather dig into the HTML structure surrounding the ad "component".

Copy link
Member Author

Choose a reason for hiding this comment

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

Feel free to push your changes as always

Copy link
Member

Choose a reason for hiding this comment

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

What's your preferred approach? Having exactly the same Sass file for an easier maintenance?

Copy link
Member

@julien-deramond julien-deramond Apr 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I took time to dig into this topic in detail and pushed 5febd28 to fix the issue.

We've gathered upstream _ad.scss as is. However, upstream, there's an extra rule for #carbonads in site/assets/scss/_masthead.scss:

#carbonads { // stylelint-disable-line selector-max-id
  margin-inline: auto;
}

Ads are displayed in different contexts upstream so that an extra rule is not always needed. For the blog, it must be used. So I've added the extra auto directive and added a comment to try to show that this is specific.
You can remove or reword this comment the way you think it's going to be the most helpful in terms of maintenance; our future selves should understand at some point the following:

  • blog: _ad.scss = upstream: _ad.scss + extra auto rule.

overflow: hidden;
font-size: .875rem;
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: var(--bs-tertiary-bg);
border-radius: .5rem;

a {
color: var(--bs-body-color);
text-decoration: none;
}

@include media-breakpoint-up(sm) {
@include border-radius(.5rem);
}
}

.carbon-img {
float: left;
margin-left: -140px;

> img {
margin-bottom: 0;
}
margin-left: -145px;
}

.carbon-poweredby {
Expand Down
27 changes: 18 additions & 9 deletions src/assets/scss/_buttons.scss
View file
Open in desktop
XhmikosR marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
//
// Custom buttons for the docs.

// scss-docs-start btn-css-vars-example
XhmikosR marked this conversation as resolved.
Show resolved Hide resolved
.btn-bd-primary {
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet);
--bs-btn-border-color: var(--bd-violet);
--bs-btn-border-radius: .5rem;
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
Expand All @@ -16,6 +16,7 @@
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}
// scss-docs-end btn-css-vars-example

.btn-bd-accent {
--bs-btn-font-weight: 600;
Expand All @@ -31,13 +32,21 @@
}

.btn-bd-light {
--btn-custom-color: #{mix($bd-violet, $white, 75%)};

--bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-gray-400);
--bs-btn-hover-color: var(--bd-violet);
--bs-btn-hover-border-color: var(--bd-violet);
--bs-btn-active-color: var(--bd-violet);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--btn-custom-color);
--bs-btn-hover-border-color: var(--btn-custom-color);
--bs-btn-active-color: var(--btn-custom-color);
--bs-btn-active-bg: var(--bs-white);
--bs-btn-active-border-color: var(--bd-violet);
--bs-btn-focus-border-color: var(--bd-violet);
--bs-btn-active-border-color: var(--btn-custom-color);
--bs-btn-focus-border-color: var(--btn-custom-color);
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}

.bd-btn-lg {
--bs-btn-border-radius: .5rem;

padding: .8125rem 2rem;
}
12 changes: 9 additions & 3 deletions src/assets/scss/_component-examples.scss
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

FYI, some classes defined in this document are not used in the blog, such as .custom-tooltip and .custom-popover.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, but I'd rather keep the used files as closed as possible. Alternatively, we can comment out the unused crap and add a comment

Copy link
Member

Choose a reason for hiding this comment

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

Got no problem with that, just wanted to spot it in case you weren't aware of it.

Original file line number Diff line number Diff line change
Expand Up @@ -220,15 +220,16 @@

// scss-docs-start custom-tooltip
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
--bs-tooltip-bg: var(--bd-violet-bg);
--bs-tooltip-color: var(--bs-white);
}
// scss-docs-end custom-tooltip

// scss-docs-start custom-popovers
.custom-popover {
--bs-popover-max-width: 200px;
--bs-popover-border-color: var(--bs-primary);
--bs-popover-header-bg: var(--bs-primary);
--bs-popover-border-color: var(--bd-violet-bg);
--bs-popover-header-bg: var(--bd-violet-bg);
--bs-popover-header-color: var(--bs-white);
--bs-popover-body-padding-x: 1rem;
--bs-popover-body-padding-y: .5rem;
Expand Down Expand Up @@ -378,6 +379,10 @@
}
}

.bd-example-snippet .highlight pre {
margin-right: 0;
}

.highlight-toolbar {
background-color: var(--bd-pre-bg);

Expand All @@ -394,6 +399,7 @@
}
}

// Custom blog selector
.posts .bd-code-snippet {
margin-bottom: 1rem;
}
7 changes: 7 additions & 0 deletions src/assets/scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,12 @@
}
}

.dropdown-toggle {
&:focus:not(:focus-visible) {
outline: 0;
}
}

.dropdown-menu {
--bs-dropdown-min-width: 12rem;
--bs-dropdown-padding-x: .25rem;
Expand Down Expand Up @@ -115,6 +121,7 @@
--bs-dropdown-min-width: 8rem;
}

// Custom blog selector
hr {
margin: 1rem 0;
}
Expand Down
55 changes: 31 additions & 24 deletions src/assets/scss/_syntax.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,47 @@
:root,
[data-bs-theme="light"] {
--base00: #fff;
--base01: #f5f5f5;
// --base00: #fff;
// --base01: #f5f5f5;
--base02: #c8c8fa;
--base03: #565c64;
--base04: #030303;
--base04: #666;
--base05: #333;
--base06: #fff;
--base07: #9a6700;
--base08: #bc4c00;
--base09: #087990;
--base0A: #795da3;
--base0B: #183691;
--base0C: #183691;
--base0D: #795da3;
--base0E: #a71d5d;
--base07: #{$teal-700}; // #9a6700
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
--base09: #{$cyan-700}; // #087990
--base0A: #{$purple-500}; // #795da3
--base0B: #{$blue-700}; // #183691
--base0C: #{$blue-700}; // #183691
--base0D: #{$purple-500}; // #795da3
--base0E: #{$pink-600}; // #a71d5d
--base0F: #333;
}

@include color-mode(dark, true) {
--base00: #282c34;
--base01: #353b45;
// --base00: #282c34;
// --base01: #353b45;
--base02: #3e4451;
--base03: #868e96;
--base04: #565c64;
--base04: #868e96;
--base05: #abb2bf;
--base06: #b6bdca;
--base07: #d19a66;
--base08: #e06c75;
--base09: #d19a66;
--base0A: #e5c07b;
--base0B: #98c379;
--base0C: #56b6c2;
--base0D: #61afef;
--base0E: #c678dd;
--base0F: #be5046;
--base07: #{$orange-300}; // #d19a66
--base08: #{$cyan-300};
--base09: #{$orange-300}; // #d19a66
--base0A: #{$yellow-200}; // #e5c07b
--base0B: #{$teal-300}; // #98c379
--base0C: #{$teal-300}; // #56b6c2
--base0D: #{$blue-300}; // #61afef
--base0E: #{$indigo-200}; // #c678dd
--base0F: #{$red-300}; // #be5046

.language-diff .gd {
color: $red-400;
}
.language-diff .gi {
color: $green-400;
}
}

.hl { background-color: var(--base02); }
Expand All @@ -53,7 +60,7 @@
.ge { font-style: italic; }
.gh {
font-weight: 600;
color: #fff;
color: var(--base0A);
}
.gi { color: var(--bs-success); }
.gp {
Expand Down
11 changes: 6 additions & 5 deletions src/assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
// Local docs variables
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
// $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%);
$bd-accent: #ffe484;
$bd-gutter-x: 3rem;
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%);
// $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%);
$bd-accent: #ffe484;
$bd-gutter-x: 3rem;
// $bd-callout-variants: info, warning, danger !default;

:root,
[data-bs-theme="light"] {
Expand Down