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

Jump to bottom

Dark texts #1038

Merged
merged 16 commits into from
Feb 14, 2022
Merged

Dark texts #1038

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e0472f4
First try to dark texts
louismaximepiton Jan 13, 2022
41436e6
Second try
louismaximepiton Jan 19, 2022
bdee49e
Rollback the variables
louismaximepiton Jan 19, 2022
5f0ed23
Add examples of use cases
julien-deramond Jan 27, 2022
af1a744
Add new use cases
julien-deramond Jan 27, 2022
2218ef5
review: fix scss file, include bg-transparent rule and rollback test …
julien-deramond Feb 3, 2022
bf64a45
review: fix scss files and add text-muted examples
julien-deramond Feb 3, 2022
a0fa774
review: handle text-muted in mixin
julien-deramond Feb 3, 2022
284d373
.
julien-deramond Feb 3, 2022
ba607d3
review: revert fake test example
julien-deramond Feb 3, 2022
740ffc2
fix bundlewatch
julien-deramond Feb 3, 2022
ee094e8
fixs(reviews)
louismaximepiton Feb 8, 2022
0cc2357
Fix bundlewatch
julien-deramond Feb 9, 2022
b897682
Add .exclude-from-pa11y-analysis for hidden examples
julien-deramond Feb 9, 2022
b664289
Add .exclude-from-pa11y-analysis for hidden examples (try again)
julien-deramond Feb 9, 2022
fc5242b
Fix bundlewatch
julien-deramond Feb 14, 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
10 changes: 5 additions & 5 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
"files": [
{
"path": "./dist/css/boosted-grid.css",
"maxSize": "9.9 kB"
"maxSize": "10.0 kB"
},
{
"path": "./dist/css/boosted-grid.min.css",
"maxSize": "9.0 kB"
"maxSize": "9.2 kB"
},
{
"path": "./dist/css/boosted-reboot.css",
"maxSize": "3.4 kB"
"maxSize": "3.5 kB"
},
{
"path": "./dist/css/boosted-reboot.min.css",
"maxSize": "3.2 kB"
"maxSize": "3.3 kB"
},
{
"path": "./dist/css/boosted-utilities.css",
Expand All @@ -30,7 +30,7 @@
},
{
"path": "./dist/css/boosted.min.css",
"maxSize": "26.8 kB"
"maxSize": "27.0 kB"
},
{
"path": "./dist/js/boosted.bundle.js",
Expand Down
23 changes: 23 additions & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,3 +58,26 @@
// scss-docs-end root-body-variables
// stylelint-enable custom-property-empty-line-before
}

// Boosted mod
[class*="-dark"],
.bg-secondary {
--#{$boosted-variable-prefix}link-color: #{$link-color-dark};
--#{$boosted-variable-prefix}link-hover-color: #{$link-hover-color-dark};
--#{$boosted-variable-prefix}caption-color: #{$table-caption-color-dark};
--#{$boosted-variable-prefix}code-color: #{$code-color-dark};
--#{$boosted-variable-prefix}kbd-color: #{$kbd-color-dark};
--#{$boosted-variable-prefix}kbd-bg: #{$kbd-bg-dark};
--#{$boosted-variable-prefix}pre-color: #{$pre-color-dark};

[class*="bg-"]:not(&):not(.bg-transparent) {
--#{$boosted-variable-prefix}link-color: #{$link-color};
--#{$boosted-variable-prefix}link-hover-color: #{$link-hover-color};
--#{$boosted-variable-prefix}caption-color: #{$table-caption-color};
--#{$boosted-variable-prefix}code-color: #{$code-color};
--#{$boosted-variable-prefix}kbd-color: #{$kbd-color};
--#{$boosted-variable-prefix}kbd-bg: #{$kbd-bg};
--#{$boosted-variable-prefix}pre-color: #{$pre-color};
}
}
// End mod
30 changes: 18 additions & 12 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,17 +454,17 @@ $body-text-align: null !default;
//
// Style anchor elements.

$link-color: $black !default;
$link-color: var(--#{$boosted-variable-prefix}link-color, $black) !default; // Boosted mod
$link-color-dark: $white !default; // Boosted mod
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: $accessible-orange !default;
$link-hover-color: var(--#{$boosted-variable-prefix}link-hover-color, $accessible-orange) !default; // Boosted mod
$link-hover-color-dark: $brand-orange !default; // Boosted mod
$link-hover-decoration: null !default;


$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;


// Boosted mod
$linked-chevron-icon-width: subtract(.5rem, 1px) !default;
$linked-chevron-icon-height: $spacer * .5 !default;
Expand Down Expand Up @@ -779,7 +779,8 @@ $table-border-color: $gray-500 !default;

$table-group-separator-color: currentColor !default;

$table-caption-color: $black !default;
$table-caption-color: var(--#{$boosted-variable-prefix}caption-color, $black) !default; // Boosted mod
$table-caption-color-dark: $white !default; // Boosted mod
$table-caption-padding-y: .75rem !default; // Boosted mod
// scss-docs-end table-variables

Expand Down Expand Up @@ -1794,18 +1795,23 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables

// Code

// Boosted mod
$code-font-size: .875em !default;
$code-color: $gray-700 !default;
$code-color: var(--#{$boosted-variable-prefix}code-color, $gray-700) !default;
$code-color-dark: $gray-600 !default;

$kbd-padding-y: $spacer * .05 !default;
$kbd-padding-x: $spacer * .05 !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $black !default;
$kbd-bg: $gray-300 !default;

$pre-color: $gray-900 !default;
$pre-line-height: 1.25 !default; // Boosted mod
$kbd-color: var(--#{$boosted-variable-prefix}kbd-color, $black) !default;
$kbd-color-dark: $white !default;
$kbd-bg: var(--#{$boosted-variable-prefix}kbd-bg, $gray-300) !default;
$kbd-bg-dark: $gray-900 !default;

$pre-color: var(--#{$boosted-variable-prefix}pre-color, $gray-900) !default;
$pre-color-dark: $gray-300 !default;
$pre-line-height: 1.25 !default;
// End mod

//
// Boosted mod
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
}
}
}
@if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value {
@if "inherit" != inspect($value) and $accessible-orange != $value and $primary != $value and $text-muted != $value {
background-color: color-contrast($value);
}
}
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/checkout-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
body_class: "bg-light"
---

<div class="container">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<div class="container exclude-from-pa11y-analysis">
<main>
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="" width="50" height="50">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/checkout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
body_class: "bg-light"
---

<div class="container">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<div class="container exclude-from-pa11y-analysis">
<main>
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" alt="" width="50" height="50">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/dashboard-rtl/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
</div>
</header>

<div class="container-fluid">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<div class="container-fluid exclude-from-pa11y-analysis">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
</div>
</header>

<div class="container-fluid">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<div class="container-fluid exclude-from-pa11y-analysis">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/headers/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
</symbol>
</svg>

<main>
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<main class="exclude-from-pa11y-analysis">
<h1 class="visually-hidden">Headers examples</h1>

<div class="container">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/heroes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
body_class: ""
---

<main>
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<main class="exclude-from-pa11y-analysis">
<h1 class="visually-hidden">Heroes examples</h1>

<div class="px-4 py-5 my-5 text-center">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/sidebars/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@
</symbol>
</svg>

<main>
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<main class="exclude-from-pa11y-analysis">
<h1 class="visually-hidden">Sidebars examples</h1>

<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/sticky-footer-navbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ <h1 class="mt-5">Sticky footer with fixed navbar</h1>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<footer class="footer mt-auto py-3 bg-light exclude-from-pa11y-analysis">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.1/examples/sticky-footer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ <h1 class="mt-5">Sticky footer</h1>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->
<footer class="footer mt-auto py-3 bg-light exclude-from-pa11y-analysis">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
Expand Down