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.

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

Migrate from deprecated Sass @import to @use and @forward #4974

Merged
merged 10 commits into from
Jun 26, 2023
Prev Previous commit
Next Next commit
Use forward-with to properly adjust variables
parlough committed Jun 10, 2023
commit 29b2a9bd6dc7b6ae84f969b979d162e1c04bc4cd
4 changes: 4 additions & 0 deletions src/_sass/_overwrites.scss
Original file line number Diff line number Diff line change
@@ -6,6 +6,10 @@ dd {
margin-bottom: 15px;
}

b, strong {
font-weight: bold;
}

a {
code {
color: $default-link;
203 changes: 93 additions & 110 deletions src/_sass/core/_bootstrap.scss
Original file line number Diff line number Diff line change
@@ -1,42 +1,37 @@
// Import from NPM library directly
@forward '../../../node_modules/bootstrap-scss/bootstrap';

@use '../core/variables' as *;

// Bootstrap configuration
//
// For a list of variables that can be configured, see
// https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

// Color config
$primary: $site-color-primary;
$body-color: $site-color-body;

// Font config
$font-family-sans-serif: $site-font-family-base;
$font-family-monospace: $site-font-family-monospace;
$font-weight-base: 400; // assert: matches Bootstrap default
$font-weight-bold: 500;
$headings-font-family: $site-font-family-alt;
$headings-font-weight: $font-weight-base;
$dt-font-weight: $font-weight-base;

$h1-font-size: 48px;
$h2-font-size: 24px;
$h3-font-size: 21px;
$h4-font-size: 18px;
$h5-font-size: 15px;
$h6-font-size: 15px;

// Layout config
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1330px
);
$grid-breakpoints: (
// Import from NPM library directly
@forward '../../../node_modules/bootstrap-scss/bootstrap' with (
// Color config
$primary: $site-color-primary,
$body-color: $site-color-body,

// Font config
$font-family-sans-serif: $site-font-family-base,
$font-family-monospace: $site-font-family-monospace,
$font-weight-base: $font-size-base-weight,
$font-weight-bold: 500,
$headings-font-family: $site-font-family-alt,
$headings-font-weight: $font-size-base-weight,
$dt-font-weight: $font-size-base-weight,

$h1-font-size: 48px,
$h2-font-size: 24px,
$h3-font-size: 21px,
$h4-font-size: 18px,
$h5-font-size: 15px,
$h6-font-size: 15px,

// Layout config
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1330px
),

$grid-breakpoints: (
0: 0,
xxs: 320px,
xs: 480px,
@@ -45,80 +40,68 @@ $grid-breakpoints: (
lg: 992px,
xl: 1200px,
xxl: 1440px
),

$spacers: (
1: ($site-spacer * 0.25),
2: ($site-spacer * 0.5),
3: ($site-spacer * 0.75),
4: $site-spacer,
5: ($site-spacer * 1.25),
6: ($site-spacer * 1.5),
7: ($site-spacer * 1.75),
8: ($site-spacer * 2),
9: ($site-spacer * 2.25),
10: ($site-spacer * 2.5),
11: ($site-spacer * 2.75),
12: ($site-spacer * 3),
),

// Component config

$alert-padding-y: $site-spacer * 1.5,
$alert-padding-x: $site-spacer * 1.5,

$border-radius: 0,
$border-radius-lg: 0,
$border-radius-sm: 0,

// Breadcrumbs
$breadcrumb-divider: 'chevron_right',
$breadcrumb-item-padding: .25rem,
$breadcrumb-bg: none,
$breadcrumb-padding-x: 0,

// Card
$card-border-radius: 4px,
$card-border-width: 0,
$card-group-margin: 0.5rem,

$grid-gutter-width: 50px,

$nav-tabs-link-active-color: $site-color-body,
$nav-tabs-link-active-border-color: transparent transparent $site-color-primary,

$tooltip-bg: #343a40, // $gray-800; // So we can see against black terminal bg

$enable-shadows: true,

// Code
$code-color: #247777,
$code-font-size: 100%,
$kbd-font-size: 0.75rem,

// Dropdown
$dropdown-divider-bg: #bbbbbb,
$dropdown-link-active-color: transparent,
$dropdown-link-active-bg: transparent,

$popover-font-size: $font-size-base,
$popover-border-color: rgba(0, 0, 0, 0),
);
$site-spacer: 1rem; // assert: should match Bootstrap $spacer
$spacers: (
1: ($site-spacer * 0.25),
2: ($site-spacer * 0.5),
3: ($site-spacer * 0.75),
4: $site-spacer,
5: ($site-spacer * 1.25),
6: ($site-spacer * 1.5),
7: ($site-spacer * 1.75),
8: ($site-spacer * 2),
9: ($site-spacer * 2.25),
10: ($site-spacer * 2.5),
11: ($site-spacer * 2.75),
12: ($site-spacer * 3),
);

@function bs-spacer($key: 3) {
@return map-get($spacers, $key);
}

// Component config

$alert-padding-y: bs-spacer(6);
$alert-padding-x: bs-spacer(6);

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

$breadcrumb-divider: 'chevron_right';
$breadcrumb-item-padding: .25rem;
$breadcrumb-bg: none;
$breadcrumb-padding-x: 0;

$card-border-radius: 4px;
$card-group-margin: bs-spacer(2);

$grid-gutter-width: 50px;

$nav-tabs-link-active-color: $site-color-body;
$nav-tabs-link-active-border-color: transparent transparent $site-color-primary;
@use '../../../node_modules/bootstrap-scss/bootstrap';

$tooltip-bg: #343a40; // $gray-800; // So we can see against black terminal bg

$enable-shadows: true;

//== Breadcrumbs

$breadcrumb-divider: 'chevron_right';
$breadcrumb-item-padding: .25rem;

//== Card

$card-border-width: 0;
// $card-border-color: rgba(0,0,0,0);

//== Code

$code-color: #247777;
$code-font-size: 100%;
$kbd-font-size: 0.75rem;

//== Dropdown

$dropdown-divider-bg: #bbbbbb;
$dropdown-link-active-color: transparent;
$dropdown-link-active-bg: transparent;

//== Popovers

$popover-font-size: $font-size-base;
$popover-border-color: rgba(0, 0, 0, 0);

b, strong {
font-weight: bold;
@function bs-spacer($key: 3) {
@return map-get(bootstrap.$spacers, $key);
}
2 changes: 2 additions & 0 deletions src/_sass/core/_variables.scss
Original file line number Diff line number Diff line change
@@ -64,6 +64,7 @@ $site-color-sidebar-active: #1389FD;

// Typography
$font-size-base: 1.0rem; // 16px
$font-size-base-weight: 400;
$font-family-base: Roboto, sans-serif;
$font-family-monospace: "Google Sans Mono", "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
$google-font-family: "Product Sans", $font-family-base;
@@ -97,6 +98,7 @@ $site-content-max-width: 960px;
$site-sidebar-side-padding: 16px;
$site-nav-mobile-side-padding: 20px;
$site-snackbar-padding: 20px;
$site-spacer: 1rem;

// Alerts
$alert-success-bg: #ecfaf7;