From f4d188ec998a7afd6b39b04da6ad72d330c20522 Mon Sep 17 00:00:00 2001 From: quilicicf Date: Tue, 29 Oct 2019 13:23:59 +0100 Subject: [PATCH 1/2] Expose theme variables in CSS custom properties --- css/theme/beige.css | 25 +++++++++++++++++++++++++ css/theme/black.css | 25 +++++++++++++++++++++++++ css/theme/blood.css | 25 +++++++++++++++++++++++++ css/theme/league.css | 25 +++++++++++++++++++++++++ css/theme/moon.css | 25 +++++++++++++++++++++++++ css/theme/night.css | 25 +++++++++++++++++++++++++ css/theme/serif.css | 25 +++++++++++++++++++++++++ css/theme/simple.css | 25 +++++++++++++++++++++++++ css/theme/sky.css | 25 +++++++++++++++++++++++++ css/theme/solarized.css | 25 +++++++++++++++++++++++++ css/theme/template/exposer.scss | 27 +++++++++++++++++++++++++++ css/theme/template/theme.scss | 2 ++ css/theme/white.css | 25 +++++++++++++++++++++++++ 13 files changed, 304 insertions(+) create mode 100644 css/theme/template/exposer.scss diff --git a/css/theme/beige.css b/css/theme/beige.css index 615dd6d..f608f8d 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -8,6 +8,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #f7f3de; + --main-font: Lato, sans-serif; + --main-font-size: 40px; + --main-color: #333; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: League Gothic, Impact, sans-serif; + --heading-color: #333; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #8b743d; + --link-color-hover: #c0a86e; + --selection-background-color: rgba(79, 64, 28, 0.99); + --selection-color: #fff; } + body { background: #f7f2d3; background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); diff --git a/css/theme/black.css b/css/theme/black.css index 7dd88c2..67b21c9 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -10,6 +10,31 @@ section.has-light-background, section.has-light-background h1, section.has-light /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #191919; + --main-font: Source Sans Pro, Helvetica, sans-serif; + --main-font-size: 42px; + --main-color: #fff; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Source Sans Pro, Helvetica, sans-serif; + --heading-color: #fff; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: 600; + --heading1-text-shadow: none; + --heading1-size: 2.5em; + --heading2-size: 1.6em; + --heading3-size: 1.3em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #42affa; + --link-color-hover: #8dcffc; + --selection-background-color: #bee4fd; + --selection-color: #fff; } + body { background: #191919; background-color: #191919; } diff --git a/css/theme/blood.css b/css/theme/blood.css index 5cbd488..342982c 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -13,6 +13,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #222; + --main-font: Ubuntu, sans-serif; + --main-font-size: 40px; + --main-color: #eee; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Ubuntu, sans-serif; + --heading-color: #eee; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: 2px 2px 2px #222; + --heading-font-weight: normal; + --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #a23; + --link-color-hover: #dd5566; + --selection-background-color: #a23; + --selection-color: #fff; } + body { background: #222; background-color: #222; } diff --git a/css/theme/league.css b/css/theme/league.css index f8fba4d..a419955 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -10,6 +10,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #2b2b2b; + --main-font: Lato, sans-serif; + --main-font-size: 40px; + --main-color: #eee; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: League Gothic, Impact, sans-serif; + --heading-color: #eee; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); + --heading-font-weight: normal; + --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #13DAEC; + --link-color-hover: #71e9f4; + --selection-background-color: #FF5E99; + --selection-color: #fff; } + body { background: #1c1e20; background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); diff --git a/css/theme/moon.css b/css/theme/moon.css index d18f526..a84cd73 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -14,6 +14,31 @@ html * { /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #002b36; + --main-font: Lato, sans-serif; + --main-font-size: 40px; + --main-color: #93a1a1; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: League Gothic, Impact, sans-serif; + --heading-color: #eee8d5; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #268bd2; + --link-color-hover: #78b9e6; + --selection-background-color: #d33682; + --selection-color: #fff; } + body { background: #002b36; background-color: #002b36; } diff --git a/css/theme/night.css b/css/theme/night.css index f5ccb52..31a8db2 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -8,6 +8,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #111; + --main-font: Open Sans, sans-serif; + --main-font-size: 40px; + --main-color: #eee; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Montserrat, Impact, sans-serif; + --heading-color: #eee; + --heading-line-height: 1.2; + --heading-letter-spacing: -0.03em; + --heading-text-transform: none; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #e7ad52; + --link-color-hover: #f3d7ac; + --selection-background-color: #e7ad52; + --selection-color: #fff; } + body { background: #111; background-color: #111; } diff --git a/css/theme/serif.css b/css/theme/serif.css index 6514a6f..c277596 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -10,6 +10,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #F0F1EB; + --main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; + --main-font-size: 40px; + --main-color: #000; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif; + --heading-color: #383D3D; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: none; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #51483D; + --link-color-hover: #8b7c69; + --selection-background-color: #26351C; + --selection-color: #fff; } + body { background: #F0F1EB; background-color: #F0F1EB; } diff --git a/css/theme/simple.css b/css/theme/simple.css index a7a29a6..e34f521 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -13,6 +13,31 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #fff; + --main-font: Lato, sans-serif; + --main-font-size: 40px; + --main-color: #000; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: News Cycle, Impact, sans-serif; + --heading-color: #000; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: none; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #00008B; + --link-color-hover: #0000f1; + --selection-background-color: rgba(0, 0, 0, 0.99); + --selection-color: #fff; } + body { background: #fff; background-color: #fff; } diff --git a/css/theme/sky.css b/css/theme/sky.css index d8734c9..744783d 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -11,6 +11,31 @@ /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #f7fbfc; + --main-font: Open Sans, sans-serif; + --main-font-size: 40px; + --main-color: #333; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Quicksand, sans-serif; + --heading-color: #333; + --heading-line-height: 1.2; + --heading-letter-spacing: -0.08em; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #3b759e; + --link-color-hover: #74a7cb; + --selection-background-color: #134674; + --selection-color: #fff; } + body { background: #add9e4; background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); diff --git a/css/theme/solarized.css b/css/theme/solarized.css index f1a2b9e..430ccee 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -14,6 +14,31 @@ html * { /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #fdf6e3; + --main-font: Lato, sans-serif; + --main-font-size: 40px; + --main-color: #657b83; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: League Gothic, Impact, sans-serif; + --heading-color: #586e75; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: normal; + --heading1-text-shadow: none; + --heading1-size: 3.77em; + --heading2-size: 2.11em; + --heading3-size: 1.55em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #268bd2; + --link-color-hover: #78b9e6; + --selection-background-color: #d33682; + --selection-color: #fff; } + body { background: #fdf6e3; background-color: #fdf6e3; } diff --git a/css/theme/template/exposer.scss b/css/theme/template/exposer.scss new file mode 100644 index 0000000..77a9ad1 --- /dev/null +++ b/css/theme/template/exposer.scss @@ -0,0 +1,27 @@ +// Exposes theme's variables for easy re-use in CSS for plugin authors + +:root { + --background-color: #{$backgroundColor}; + --main-font: #{$mainFont}; + --main-font-size: #{$mainFontSize}; + --main-color: #{$mainColor}; + --block-margin: #{$blockMargin}; + --heading-margin: #{$headingMargin}; + --heading-font: #{$headingFont}; + --heading-color: #{$headingColor}; + --heading-line-height: #{$headingLineHeight}; + --heading-letter-spacing: #{$headingLetterSpacing}; + --heading-text-transform: #{$headingTextTransform}; + --heading-text-shadow: #{$headingTextShadow}; + --heading-font-weight: #{$headingFontWeight}; + --heading1-text-shadow: #{$heading1TextShadow}; + --heading1-size: #{$heading1Size}; + --heading2-size: #{$heading2Size}; + --heading3-size: #{$heading3Size}; + --heading4-size: #{$heading4Size}; + --code-font: #{$codeFont}; + --link-color: #{$linkColor}; + --link-color-hover: #{$linkColorHover}; + --selection-background-color: #{$selectionBackgroundColor}; + --selection-color: #{$selectionColor}; +} diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index 9ccfaf5..c5859c6 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -4,6 +4,8 @@ * GLOBAL STYLES *********************************************/ +@import "./exposer"; + body { @include bodyBackground(); background-color: $backgroundColor; diff --git a/css/theme/white.css b/css/theme/white.css index 43ef2c7..97483be 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -10,6 +10,31 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba /********************************************* * GLOBAL STYLES *********************************************/ +:root { + --background-color: #fff; + --main-font: Source Sans Pro, Helvetica, sans-serif; + --main-font-size: 42px; + --main-color: #222; + --block-margin: 20px; + --heading-margin: 0 0 20px 0; + --heading-font: Source Sans Pro, Helvetica, sans-serif; + --heading-color: #222; + --heading-line-height: 1.2; + --heading-letter-spacing: normal; + --heading-text-transform: uppercase; + --heading-text-shadow: none; + --heading-font-weight: 600; + --heading1-text-shadow: none; + --heading1-size: 2.5em; + --heading2-size: 1.6em; + --heading3-size: 1.3em; + --heading4-size: 1em; + --code-font: monospace; + --link-color: #2a76dd; + --link-color-hover: #6ca0e8; + --selection-background-color: #98bdef; + --selection-color: #fff; } + body { background: #fff; background-color: #fff; } From e40fb3275d4a91ef79c4121372d78a61f0b55259 Mon Sep 17 00:00:00 2001 From: quilicicf Date: Thu, 31 Oct 2019 15:18:59 +0100 Subject: [PATCH 2/2] Document theme variable exposition in README theming section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3be68fb..a6dfbb4 100644 --- a/README.md +++ b/README.md @@ -1201,6 +1201,7 @@ Each theme is available as a separate stylesheet. To change theme you will need If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md). +All theme variables are exposed as CSS custom properties in the pseudo-class `:root`. See [the list of exposed variables](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss). ## Speaker Notes