OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactored CSS to use CSS Variables (#1409)

Browse Source 
* First stab at using CSS variables

* Port color-black to CSS variables and fix SCSS compile

* add hex2rgb helper function

* Port md-color-white to CSS variables

* Port code color and background

* Fix a rebase mistake

* Fix lint

* adopt upstream changes

Co-authored-by: Martin Donath <squidfunk@users.noreply.github.com>
This commit is contained in:
Benjamin Staneck 2020-02-25 15:04:58 +01:00 committed by GitHub
parent 446e55767b
commit ca50ed8200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 184 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/assets/stylesheets/_config.scss
View File

@ -49,6 +49,10 @@ $break-devices: (
) )
); );
@function hex2rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Variables: base colors // Variables: base colors
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -71,6 +75,58 @@ $md-color-white--lighter: hsla(0, 0%, 100%, 0.3) !default;
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default; $md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default; $md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
// ----------------------------------------------------------------------------
// CSS Variables: base colors
// ----------------------------------------------------------------------------
:root {
// Primary and accent colors
--md-color-primary: #{$md-color-primary};
--md-color-primary-values: #{hex2rgb($md-color-primary)};
--md-color-accent: #{$md-color-accent};
--md-color-accent-values: #{hex2rgb($md-color-accent)};
// Shades of black
--md-color-text: #{$md-color-black};
--md-color-text-values: 0, 0, 0;
--md-color-text--light: #{$md-color-black--light};
--md-color-text--lighter: #{$md-color-black--lighter};
--md-color-text--lightest: #{$md-color-black--lightest};
--md-color-text--transparent: #{$md-color-black--transparent};
// Shades of white
--md-color-background: #{$md-color-white};
--md-color-background--light: #{$md-color-white--light};
--md-color-background--lighter: #{$md-color-white--lighter};
--md-color-background--lightest: #{$md-color-white--lightest};
--md-color-background--transparent: #{$md-color-white--transparent};
// Code blocks
--md-code-background: hsla(0, 0%, 92.5%, 0.5);
--md-code-color: #37474F;
}
:root.dark-mode {
// Primary and accent colors
--md-color-primary: #{$md-color-primary};
--md-color-accent: #{$md-color-accent};
// Shades of white
--md-color-background: #{$md-color-white};
--md-color-background--light: #{$md-color-white--light};
--md-color-background--lighter: #{$md-color-white--lighter};
--md-color-background--lightest: #{$md-color-white--lightest};
--md-color-background--transparent: #{$md-color-white--transparent};
// Shades of black
--md-color-text: #{$md-color-black};
--md-color-text-values: 255, 255, 255;
--md-color-text--light: #{$md-color-black--light};
--md-color-text--lighter: #{$md-color-black--lighter};
--md-color-text--lightest: #{$md-color-black--lightest};
--md-color-text--transparent: #{$md-color-black--transparent};
}
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Variables: sizing and spacing // Variables: sizing and spacing
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------

44
src/assets/stylesheets/app-palette.scss
View File

@ -51,7 +51,7 @@ button[data-md-color-accent] {
background-color 250ms, background-color 250ms,
opacity 250ms; opacity 250ms;
border-radius: px2rem(2px); border-radius: px2rem(2px);
color: $md-color-white; color: var(--md-color-background);
font-size: ms(-1); font-size: ms(-1);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@ -128,7 +128,7 @@ button[data-md-color-accent] {
// Repository containing source // Repository containing source
.md-nav__source { .md-nav__source {
background-color: mix($color, $md-color-black, 75%); background-color: $color; // TODO: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables mix($color, var(--md-color-text), 75%);
} }
} }
@ -158,9 +158,9 @@ button[data-md-color-accent] {
// Color tile for presentation in theme documentation // Color tile for presentation in theme documentation
button[data-md-color-primary="white"] { button[data-md-color-primary="white"] {
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
box-shadow: 0 0 px2rem(1px) $md-color-black--light inset; box-shadow: 0 0 px2rem(1px) var(--md-color-text--light) inset;
} }
// Overrides for black color // Overrides for black color
@ -168,18 +168,18 @@ button[data-md-color-primary="white"] {
// Application header (stays always on top) // Application header (stays always on top)
.md-header { .md-header {
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
} }
// Hero teaser // Hero teaser
.md-hero { .md-hero {
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
// Add a border if there are no tabs // Add a border if there are no tabs
&--expand { &--expand {
border-bottom: px2rem(1px) solid $md-color-black--lightest; border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
} }
} }
@ -188,8 +188,8 @@ button[data-md-color-primary="white"] {
// Repository containing source // Repository containing source
.md-nav__source { .md-nav__source {
background-color: $md-color-black--lightest; background-color: var(--md-color-text--lightest);
color: $md-color-black; color: var(--md-color-text);
} }
} }
@ -198,11 +198,11 @@ button[data-md-color-primary="white"] {
// Search input // Search input
.md-search__input { .md-search__input {
background-color: $md-color-black--lightest; background-color: var(--md-color-text--lightest);
// Search input placeholder // Search input placeholder
&::placeholder { &::placeholder {
color: $md-color-black--light; color: var(--md-color-text--light);
} }
} }
} }
@ -212,13 +212,13 @@ button[data-md-color-primary="white"] {
// Site title in main navigation // Site title in main navigation
html & .md-nav--primary .md-nav__title[for="__drawer"] { html & .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
} }
// Hero teaser // Hero teaser
.md-hero { .md-hero {
border-bottom: px2rem(1px) solid $md-color-black--lightest; border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
} }
} }
@ -227,9 +227,9 @@ button[data-md-color-primary="white"] {
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
border-bottom: px2rem(1px) solid $md-color-black--lightest; border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
} }
} }
} }
@ -261,7 +261,7 @@ button[data-md-color-primary="black"] {
// Repository containing source // Repository containing source
.md-nav__source { .md-nav__source {
background-color: mix($clr-black, $md-color-white, 75%); background-color: var(--md-color-background); // TODO: mix($clr-black, var(--md-color-background, 75%);
} }
} }
@ -270,7 +270,7 @@ button[data-md-color-primary="black"] {
// Search input // Search input
.md-search__input { .md-search__input {
background-color: $md-color-white--lighter; background-color: var(--md-color-background--lighter);
} }
} }

46
src/assets/stylesheets/base/_typeset.scss
View File

@ -33,7 +33,7 @@ body {
// Default fonts // Default fonts
body, body,
input { input {
color: $md-color-black; color: var(--md-color-text);
font-feature-settings: "kern", "liga"; font-feature-settings: "kern", "liga";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
@ -42,7 +42,7 @@ input {
pre, pre,
code, code,
kbd { kbd {
color: $md-color-black; color: var(--md-color-text);
font-feature-settings: "kern"; font-feature-settings: "kern";
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
} }
@ -73,7 +73,7 @@ kbd {
// 1st level headline // 1st level headline
h1 { h1 {
margin: 0 0 px2rem(40px); margin: 0 0 px2rem(40px);
color: $md-color-black--light; color: var(--md-color-text--light);
font-size: ms(3); font-size: ms(3);
font-weight: 300; font-weight: 300;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -115,7 +115,7 @@ kbd {
h5, h5,
h6 { h6 {
margin: px2rem(16px) 0; margin: px2rem(16px) 0;
color: $md-color-black--light; color: var(--md-color-text--light);
font-size: ms(-1); font-size: ms(-1);
font-weight: 700; font-weight: 700;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -129,12 +129,12 @@ kbd {
// Horizontal separators // Horizontal separators
hr { hr {
margin: 1.5em 0; margin: 1.5em 0;
border-bottom: px2rem(1px) dotted $md-color-black--lighter; border-bottom: px2rem(1px) dotted var(--md-color-text--lighter);
} }
// Links // Links
a { a {
color: $md-color-primary; color: var(--md-color-primary);
word-break: break-word; word-break: break-word;
// Also enable color transition on pseudo elements // Also enable color transition on pseudo elements
@ -146,7 +146,7 @@ kbd {
// Focused or hover links // Focused or hover links
&:focus, &:focus,
&:hover { &:hover {
color: $md-color-accent; color: var(--md-color-accent);
} }
// Add URLs for print // Add URLs for print
@ -154,7 +154,7 @@ kbd {
// Show link URL // Show link URL
&::after { &::after {
color: $md-color-black--light; color: var(--md-color-text--light);
content: " [" attr(href) "]"; content: " [" attr(href) "]";
} }
} }
@ -163,8 +163,8 @@ kbd {
// Code blocks // Code blocks
code, code,
pre { pre {
background-color: $md-code-background; background-color: var(--md-code-background);
color: $md-code-color; color: var(--md-code-color);
font-size: 85%; font-size: 85%;
direction: ltr; direction: ltr;
@ -182,8 +182,8 @@ kbd {
padding: 0.0625em * $correct 0; padding: 0.0625em * $correct 0;
border-radius: px2rem(2px); border-radius: px2rem(2px);
box-shadow: box-shadow:
+0.25em * $correct 0 0 $md-code-background, +0.25em * $correct 0 0 var(--md-code-background),
-0.25em * $correct 0 0 $md-code-background; -0.25em * $correct 0 0 var(--md-code-background);
word-break: break-word; word-break: break-word;
box-decoration-break: clone; box-decoration-break: clone;
@ -244,11 +244,11 @@ kbd {
// Scrollbar thumb // Scrollbar thumb
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter; background-color: var(--md-color-text--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: $md-color-accent; background-color: var(--md-color-accent);
} }
} }
} }
@ -299,7 +299,7 @@ kbd {
// Abbreviations // Abbreviations
abbr { abbr {
border-bottom: px2rem(1px) dotted $md-color-black--light; border-bottom: px2rem(1px) dotted var(--md-color-text--light);
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -324,14 +324,14 @@ kbd {
// Blockquotes, possibly nested // Blockquotes, possibly nested
blockquote { blockquote {
padding-left: px2rem(12px); padding-left: px2rem(12px);
border-left: px2rem(4px) solid $md-color-black--lighter; border-left: px2rem(4px) solid var(--md-color-text--lighter);
color: $md-color-black--light; color: var(--md-color-text--light);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
padding-right: px2rem(12px); padding-right: px2rem(12px);
padding-left: initial; padding-left: initial;
border-right: px2rem(4px) solid $md-color-black--lighter; border-right: px2rem(4px) solid var(--md-color-text--lighter);
border-left: initial; border-left: initial;
} }
} }
@ -423,7 +423,7 @@ kbd {
max-width: 100%; max-width: 100%;
border-radius: px2rem(2px); border-radius: px2rem(2px);
font-size: ms(-1); font-size: ms(-1);
box-shadow: inset 0 0 0 px2rem(1px) $md-color-black--lightest; box-shadow: inset 0 0 0 px2rem(1px) var(--md-color-text--lightest);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -449,15 +449,15 @@ kbd {
th { th {
min-width: px2rem(100px); min-width: px2rem(100px);
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
background-color: $md-color-black--light; background-color: var(--md-color-text--light);
color: $md-color-white; color: var(--md-color-background);
vertical-align: top; vertical-align: top;
} }
// Table cells // Table cells
td { td {
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
border-top: px2rem(1px) solid $md-color-black--lightest; border-top: px2rem(1px) solid var(--md-color-text--lightest);
vertical-align: top; vertical-align: top;
} }
@ -468,7 +468,7 @@ kbd {
// Add background on hover // Add background on hover
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.035); background-color: rgba(0, 0, 0, 0.035);
box-shadow: 0 px2rem(1px) 0 $md-color-white inset; box-shadow: 0 px2rem(1px) 0 var(--md-color-background) inset;
} }
// Remove top border on first row // Remove top border on first row

6
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -245,7 +245,7 @@ $codehilite-whitespace: transparent;
// Disable user selection, so code can be easily copied without // Disable user selection, so code can be easily copied without
// accidentally also copying the line numbers // accidentally also copying the line numbers
.linenos { .linenos {
color: $md-color-black--lighter; color: var(--md-color-text--lighter);
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background; box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
user-select: none; user-select: none;
@ -273,9 +273,9 @@ $codehilite-whitespace: transparent;
margin-right: px2rem(12px); margin-right: px2rem(12px);
margin-left: px2rem(-12px); margin-left: px2rem(-12px);
padding-left: px2rem(12px); padding-left: px2rem(12px);
border-right: px2rem(1px) solid $md-color-black--lightest; border-right: px2rem(1px) solid var(--md-color-text--lightest);
background-color: $md-code-gutter; background-color: $md-code-gutter;
color: $md-color-black--lighter; color: var(--md-color-text--lighter);
content: attr(data-linenos); content: attr(data-linenos);
user-select: none; user-select: none;

10
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -60,7 +60,7 @@
// Footnotes extension // Footnotes extension
.footnote { .footnote {
color: $md-color-black--light; color: var(--md-color-text--light);
font-size: ms(-1); font-size: ms(-1);
// Remove additional spacing on footnotes // Remove additional spacing on footnotes
@ -74,7 +74,7 @@
// Darken color for targeted footnote // Darken color for targeted footnote
&:target { &:target {
color: $md-color-black; color: var(--md-color-text);
} }
// Remove spacing on first element // Remove spacing on first element
@ -92,7 +92,7 @@
// Active or targeted back reference // Active or targeted back reference
&:hover .footnote-backref:hover, &:hover .footnote-backref:hover,
&:target .footnote-backref { &:target .footnote-backref {
color: $md-color-accent; color: var(--md-color-accent);
} }
} }
} }
@ -106,7 +106,7 @@
&::before { &::before {
display: inline; display: inline;
margin: 0 0.2em; margin: 0 0.2em;
border-left: px2rem(1px) solid $md-color-black--lighter; border-left: px2rem(1px) solid var(--md-color-text--lighter);
font-size: 1.25em; font-size: 1.25em;
content: ""; content: "";
vertical-align: px2rem(-5px); vertical-align: px2rem(-5px);
@ -121,7 +121,7 @@
transform 250ms 125ms, transform 250ms 125ms,
color 250ms, color 250ms,
opacity 125ms 125ms; opacity 125ms 125ms;
color: $md-color-black--lighter; color: var(--md-color-black--lighter);
// Hack: remove Unicode arrow for icon // Hack: remove Unicode arrow for icon
font-size: 0; font-size: 0;
opacity: 0; opacity: 0;

4
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -50,7 +50,7 @@
// Higher specificity for color due to palettes integration // Higher specificity for color due to palettes integration
html body & { html body & {
color: $md-color-black--lighter; color: var(--md-color-text--lighter);
} }
// Hide for print // Hide for print
@ -77,7 +77,7 @@
.headerlink:focus, .headerlink:focus,
.headerlink:hover, .headerlink:hover,
:target .headerlink { :target .headerlink {
color: $md-color-accent; color: var(--md-color-accent);
} }
// Correct anchor offset for link blurring // Correct anchor offset for link blurring

2
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@ -81,7 +81,7 @@
right: px2rem(12px); right: px2rem(12px);
width: px2rem(20px); width: px2rem(20px);
height: px2rem(20px); height: px2rem(20px);
background-color: $md-color-black--lighter; background-color: var(--md-color-black--lighter);
mask-image: url("{{ chevron-down }}"); mask-image: url("{{ chevron-down }}");
content: ""; content: "";

8
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -32,7 +32,7 @@
display: none; display: none;
order: 99; order: 99;
width: 100%; width: 100%;
background-color: $md-color-white; background-color: var(--md-color-background);
// Actual content // Actual content
pre { pre {
@ -47,7 +47,7 @@
position: relative; position: relative;
flex-wrap: wrap; flex-wrap: wrap;
margin: 1em 0; margin: 1em 0;
border: px2rem(1px) solid $md-color-black--lightest; border: px2rem(1px) solid var(--md-color-text--lightest);
border-radius: 0.2em; border-radius: 0.2em;
// Hide radio buttons // Hide radio buttons
@ -95,7 +95,7 @@
// Hovered tab label // Hovered tab label
html &:hover { html &:hover {
color: $md-color-accent; color: var(--md-color-accent);
} }
} }
} }
@ -107,7 +107,7 @@
@include break-to-device(mobile) { @include break-to-device(mobile) {
margin: 1em px2rem(-16px); margin: 1em px2rem(-16px);
border: 0; border: 0;
border-top: px2rem(1px) solid $md-color-black--lightest; border-top: px2rem(1px) solid var(--md-color-text--lightest);
border-radius: 0; border-radius: 0;
// Actual container with code, overflowing // Actual container with code, overflowing

2
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@ -57,7 +57,7 @@
left: px2em(-24px); left: px2em(-24px);
width: px2em(20px); width: px2em(20px);
height: px2em(20px); height: px2em(20px);
background-color: $md-color-black--lightest; background-color: var(--md-color-black--lightest);
mask-image: url("{{ checkbox-blank-circle }}"); mask-image: url("{{ checkbox-blank-circle }}");
content: ""; content: "";

4
src/assets/stylesheets/layout/_announce.scss
View File

@ -26,13 +26,13 @@
// Announcement bar // Announcement bar
.md-announcement { .md-announcement {
background-color: $md-color-black; background-color: var(--md-color-text);
// Actual content // Actual content
&__inner { &__inner {
min-height: px2rem(48px); min-height: px2rem(48px);
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
color: $md-color-white; color: var(--md-color-background);
font-size: px2rem(14px); font-size: px2rem(14px);
line-height: px2rem(48px); line-height: px2rem(48px);
} }

10
src/assets/stylesheets/layout/_base.scss
View File

@ -35,8 +35,8 @@ $md-toggle__drawer--checked:
// Stretch container to viewport and set base font-size to 10px for simple // Stretch container to viewport and set base font-size to 10px for simple
// calculations base on relative ems (rems) // calculations base on relative ems (rems)
html { html {
height: 100%; min-height: 100%;
background-color: $md-color-white; background-color: var(--md-color-background);
// Hack: normally, we would set the base font-size to 62.5%, so we can base // Hack: normally, we would set the base font-size to 62.5%, so we can base
// all calculations on 10px, but Chromium and Chrome define a minimal font // all calculations on 10px, but Chromium and Chrome define a minimal font
// size of 12 if the system language is set to Chinese. For this reason we // size of 12 if the system language is set to Chinese. For this reason we
@ -146,7 +146,7 @@ hr {
width 0ms 250ms, width 0ms 250ms,
height 0ms 250ms, height 0ms 250ms,
opacity 250ms; opacity 250ms;
background-color: $md-color-black--light; background-color: var(--md-color-black--light);
opacity: 0; opacity: 0;
z-index: 3; z-index: 3;
@ -177,8 +177,8 @@ hr {
padding: px2rem(6px) px2rem(10px); padding: px2rem(6px) px2rem(10px);
transform: translateY(px2rem(8px)); transform: translateY(px2rem(8px));
border-radius: px2rem(2px); border-radius: px2rem(2px);
background-color: $md-color-black; background-color: var(--md-color-text);
color: $md-color-white; color: var(--md-color-background);
font-size: ms(-1); font-size: ms(-1);
opacity: 0; opacity: 0;

6
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -33,7 +33,7 @@
height: px2rem(24px); height: px2rem(24px);
transition: color 250ms; transition: color 250ms;
border-radius: px2rem(2px); border-radius: px2rem(2px);
color: $md-color-black--lightest; color: var(--md-color-text--lightest);
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
// Hack: put everything on the GPU to omit flickering // Hack: put everything on the GPU to omit flickering
@ -52,12 +52,12 @@
// Show on container hover // Show on container hover
pre:hover & { pre:hover & {
color: $md-color-black--light; color: var(md-color-text--light);
} }
// Focused or hovered icon // Focused or hovered icon
pre &:focus, pre &:focus,
pre &:hover { pre &:hover {
color: $md-color-accent; color: var(--md-color-accent);
} }
} }

2
src/assets/stylesheets/layout/_content.scss
View File

@ -94,7 +94,7 @@
// Override default link color for icons // Override default link color for icons
.md-typeset & { .md-typeset & {
color: $md-color-black--lighter; color: var(--md-color-text--lighter);
} }
// Align text with icon // Align text with icon

4
src/assets/stylesheets/layout/_dialog.scss
View File

@ -41,8 +41,8 @@
opacity 400ms; opacity 400ms;
border: none; border: none;
border-radius: px2rem(2px); border-radius: px2rem(2px);
background: $md-color-black; background: var(--md-color-text);
color: $md-color-white; color: var(--md-color-background);
font-size: px2rem(14px); font-size: px2rem(14px);
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;

16
src/assets/stylesheets/layout/_footer.scss
View File

@ -35,8 +35,8 @@
// Navigation within footer // Navigation within footer
.md-footer-nav { .md-footer-nav {
background-color: $md-color-black; background-color: var(--md-color-text);
color: $md-color-white; color: var(--md-color-background);
// Set spacing // Set spacing
&__inner { &__inner {
@ -123,14 +123,14 @@
left: 0; left: 0;
margin-top: px2rem(-20px); margin-top: px2rem(-20px);
padding: 0 px2rem(20px); padding: 0 px2rem(20px);
color: $md-color-white--light; color: var(--md-color-background--light);
font-size: px2rem(15px); font-size: px2rem(15px);
} }
} }
// Non-navigational information // Non-navigational information
.md-footer-meta { .md-footer-meta {
background-color: opacify($md-color-black, 0.025); background-color: rgba(var(--md-color-text-values), 1.025);
// Set spacing // Set spacing
&__inner { &__inner {
@ -140,12 +140,12 @@
// Use a decent color for non-hovered links and ensure specificity // Use a decent color for non-hovered links and ensure specificity
html &.md-typeset a { html &.md-typeset a {
color: $md-color-white--light; color: var(--md-color-background--light);
// Focused or hovered link // Focused or hovered link
&:focus, &:focus,
&:hover { &:hover {
color: $md-color-white; color: var(--md-color-background);
} }
} }
} }
@ -154,7 +154,7 @@
.md-footer-copyright { .md-footer-copyright {
margin: 0 px2rem(12px); margin: 0 px2rem(12px);
padding: px2rem(8px) 0; padding: px2rem(8px) 0;
color: $md-color-white--lighter; color: var(--md-color-background--lighter);
font-size: ms(-1); font-size: ms(-1);
// [tablet portrait +]: Show next to social media links // [tablet portrait +]: Show next to social media links
@ -170,7 +170,7 @@
// Highlight copyright information // Highlight copyright information
&__highlight { &__highlight {
color: $md-color-white--light; color: var(--md-color-background--light);
} }
} }

6
src/assets/stylesheets/layout/_header.scss
View File

@ -33,9 +33,9 @@
height: px2rem(48px); height: px2rem(48px);
transition: transition:
background-color 250ms, background-color 250ms,
color 250ms; color 250ms;
background-color: $md-color-primary; background-color: var(--md-color-primary);
color: $md-color-white; color: var(--md-color-background);
box-shadow: none; box-shadow: none;
z-index: 2; z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints // Hack: putting the header on the GPU avoids unnecessary repaints

4
src/assets/stylesheets/layout/_hero.scss
View File

@ -27,8 +27,8 @@
// Hero teaser // Hero teaser
.md-hero { .md-hero {
transition: background 250ms; transition: background 250ms;
background-color: $md-color-primary; background-color: var(--md-color-primary);
color: $md-color-white; color: var(--md-color-background);
font-size: ms(1); font-size: ms(1);
overflow: hidden; overflow: hidden;

26
src/assets/stylesheets/layout/_nav.scss
View File

@ -118,12 +118,12 @@
// Blurred link // Blurred link
&[data-md-state="blur"] { &[data-md-state="blur"] {
color: $md-color-black--light; color: var(--md-color-text--light);
} }
// Active link // Active link
.md-nav__item &--active { .md-nav__item &--active {
color: $md-color-primary; color: var(--md-color-primary);
} }
// Reset active color for nested list titles // Reset active color for nested list titles
@ -134,7 +134,7 @@
// Focused or hovered link // Focused or hovered link
&:focus, &:focus,
&:hover { &:hover {
color: $md-color-accent; color: var(--md-color-accent);
} }
} }
@ -145,7 +145,7 @@
// [tablet -]: Layered navigation // [tablet -]: Layered navigation
@include break-to-device(tablet) { @include break-to-device(tablet) {
background-color: $md-color-white; background-color: var(--md-color-background);
// Stretch primary navigation to drawer // Stretch primary navigation to drawer
&--primary, &--primary,
@ -175,8 +175,8 @@
position: relative; position: relative;
height: px2rem(112px); height: px2rem(112px);
padding: px2rem(60px) px2rem(16px) px2rem(4px); padding: px2rem(60px) px2rem(16px) px2rem(4px);
background-color: $md-color-black--lightest; background-color: var(--md-color-text--lightest);
color: $md-color-black--light; color: var(--md-color-text--light);
font-weight: 400; font-weight: 400;
line-height: px2rem(48px); line-height: px2rem(48px);
white-space: nowrap; white-space: nowrap;
@ -201,8 +201,8 @@
// Main lists // Main lists
~ .md-nav__list { ~ .md-nav__list {
background-color: $md-color-white; background-color: var(--md-color-background);
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest; box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest);
overflow-y: auto; overflow-y: auto;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
@ -215,8 +215,8 @@
// Site title in main navigation // Site title in main navigation
&[for="__drawer"] { &[for="__drawer"] {
position: relative; position: relative;
background-color: $md-color-primary; background-color: var(--md-color-primary);
color: $md-color-white; color: var(--md-color-background);
// Site logo // Site logo
.md-nav__button { .md-nav__button {
@ -251,7 +251,7 @@
// List item // List item
.md-nav__item { .md-nav__item {
padding: 0; padding: 0;
border-top: px2rem(1px) solid $md-color-black--lightest; border-top: px2rem(1px) solid var(--md-color-text--lightest);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -421,8 +421,8 @@
&__source { &__source {
display: block; display: block;
padding: 0 px2rem(4px); padding: 0 px2rem(4px);
background-color: mix($md-color-primary, $md-color-black, 75%); background-color: var(--md-color-primary); // mix(var(--md-color-primary), $md-color-black, 75%); // TODO: fix calculation https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
color: $md-color-white; color: var(--md-color-background);
} }
} }

44
src/assets/stylesheets/layout/_search.scss
View File

@ -63,7 +63,7 @@ $md-toggle__search--checked:
transform 300ms 100ms, transform 300ms 100ms,
opacity 200ms 200ms; opacity 200ms 200ms;
border-radius: px2rem(20px); border-radius: px2rem(20px);
background-color: $md-color-white; background-color: var(--md-color-background);
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
@ -112,7 +112,7 @@ $md-toggle__search--checked:
width 0ms 250ms, width 0ms 250ms,
height 0ms 250ms, height 0ms 250ms,
opacity 250ms; opacity 250ms;
background-color: $md-color-black--light; background-color: var(--md-color-black--light);
cursor: pointer; cursor: pointer;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -238,7 +238,7 @@ $md-toggle__search--checked:
// Placeholder and icon color in active state // Placeholder and icon color in active state
~ .md-search__icon, ~ .md-search__icon,
&::placeholder { &::placeholder {
color: $md-color-black--light; color: var(--md-color-text--light);
} }
// Remove the "x" rendered by Internet Explorer // Remove the "x" rendered by Internet Explorer
@ -262,7 +262,7 @@ $md-toggle__search--checked:
background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1), background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1); color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: px2rem(2px); border-radius: px2rem(2px);
background-color: $md-color-black--lighter; background-color: var(--md-color-text--lighter);
color: inherit; color: inherit;
font-size: ms(0); font-size: ms(0);
@ -273,30 +273,30 @@ $md-toggle__search--checked:
// Icon color // Icon color
+ .md-search__icon { + .md-search__icon {
color: $md-color-white; color: var(--md-color-background);
} }
// Placeholder color // Placeholder color
&::placeholder { &::placeholder {
color: $md-color-white--light; color: var(--md-color-background--light);
} }
// Hovered search field // Hovered search field
&:hover { &:hover {
background-color: $md-color-white--lightest; background-color: var(--md-color-background--lightest);
} }
// Set light background on active search field // Set light background on active search field
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
border-radius: px2rem(2px) px2rem(2px) 0 0; border-radius: px2rem(2px) px2rem(2px) 0 0;
background-color: $md-color-white; background-color: var(--md-color-background);
color: $md-color-black; color: var(--md-color-text);
text-overflow: clip; text-overflow: clip;
// Placeholder and icon color in active state // Placeholder and icon color in active state
+ .md-search__icon, + .md-search__icon,
&::placeholder { &::placeholder {
color: $md-color-black--light; color: var(--md-color-text--light);
} }
} }
} }
@ -435,8 +435,8 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
height: 100%; height: 100%;
background-color: $md-color-white; background-color: var(--md-color-background);
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest; box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--lightest);
overflow-y: auto; overflow-y: auto;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -473,11 +473,11 @@ $md-toggle__search--checked:
// Scrollbar thumb // Scrollbar thumb
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter; background-color: var(--md-color-text--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: $md-color-accent; background-color: var(--md-color-accent);
} }
} }
} }
@ -486,14 +486,14 @@ $md-toggle__search--checked:
// Search result // Search result
.md-search-result { .md-search-result {
color: $md-color-black; color: var(--md-color-text);
word-break: break-word; word-break: break-word;
// Search metadata // Search metadata
&__meta { &__meta {
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
background-color: $md-color-black--lightest; background-color: var(--md-color-text--lightest);
color: $md-color-black--light; color: var(--md-color-text--light);
font-size: ms(-1); font-size: ms(-1);
line-height: px2rem(36px); line-height: px2rem(36px);
scroll-snap-align: start; scroll-snap-align: start;
@ -514,13 +514,13 @@ $md-toggle__search--checked:
&__list { &__list {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: px2rem(1px) solid $md-color-black--lightest; border-top: px2rem(1px) solid var(--md-color-text--lightest);
list-style: none; list-style: none;
} }
// List item // List item
&__item { &__item {
box-shadow: 0 px2rem(-1px) 0 $md-color-black--lightest; box-shadow: 0 px2rem(-1px) 0 var(--md-color-text--lightest);
} }
// Link inside item // Link inside item
@ -534,7 +534,7 @@ $md-toggle__search--checked:
// Focused or hovered link // Focused or hovered link
&:focus, &:focus,
&:hover { &:hover {
background-color: transparentize($md-color-accent, 0.9); background-color: rgba(var(--md-color-accent-values), 0.9);
// Slightly transparent icon // Slightly transparent icon
.md-search-result__article::before { .md-search-result__article::before {
@ -584,7 +584,7 @@ $md-toggle__search--checked:
left: 0; left: 0;
margin: px2rem(2px); margin: px2rem(2px);
transition: opacity 250ms; transition: opacity 250ms;
color: $md-color-black--light; color: var(--md-color-text--light);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -613,7 +613,7 @@ $md-toggle__search--checked:
display: -webkit-box; display: -webkit-box;
max-height: px2rem(33px); max-height: px2rem(33px);
margin: 0.5em 0; margin: 0.5em 0;
color: $md-color-black--light; color: var(--md-color-text--light);
font-size: ms(-1); font-size: ms(-1);
line-height: 1.4; line-height: 1.4;
text-overflow: ellipsis; text-overflow: ellipsis;

6
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -64,7 +64,7 @@ $md-toggle__drawer--checked:
transition: transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms; box-shadow 250ms;
background-color: $md-color-white; background-color: var(--md-color-background);
z-index: 3; z-index: 3;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -158,11 +158,11 @@ $md-toggle__drawer--checked:
// Scrollbar thumb // Scrollbar thumb
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $md-color-black--lighter; background-color: var(--md-color-text--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: $md-color-accent; background-color: var(--md-color-accent);
} }
} }
} }

4
src/assets/stylesheets/layout/_tabs.scss
View File

@ -28,8 +28,8 @@
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 250ms; transition: background 250ms;
background-color: $md-color-primary; background-color: var(--md-color-primary);
color: $md-color-white; color: var(--md-color-background);
overflow: auto; overflow: auto;
// Omit transitions, in case JavaScript is not available // Omit transitions, in case JavaScript is not available