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

Theme switch in examples #5022

Merged
merged 22 commits into from
Mar 13, 2024
Merged

Theme switch in examples #5022

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
dad31b9
add switch for themes in examples
codeEmpress1 Mar 5, 2024
9ecca3b
update dark examples to have dark theme on body
codeEmpress1 Mar 6, 2024
8bed1f9
fix scss lint issues
codeEmpress1 Mar 6, 2024
a25ebc3
revert changes on dark rule
codeEmpress1 Mar 6, 2024
d09e9cf
add conditional renedering to theme toggles
codeEmpress1 Mar 6, 2024
c7a98eb
revert changes on dark examples
codeEmpress1 Mar 6, 2024
fdd9015
hide theme toggles on some examples
codeEmpress1 Mar 6, 2024
12bee2c
move script in example.html into example-tools.js
codeEmpress1 Mar 6, 2024
2be7bbc
fix JS lint
codeEmpress1 Mar 6, 2024
71c52bf
Update templates/docs/examples/patterns/strips/dark.html
codeEmpress1 Mar 8, 2024
608dc11
update show_theme_switch conditional
codeEmpress1 Mar 8, 2024
562ed91
update switch condition
codeEmpress1 Mar 8, 2024
68a33d5
fix JS lint
codeEmpress1 Mar 8, 2024
0197111
fix JS lint
codeEmpress1 Mar 8, 2024
27bd3e6
Merge branch 'main' into theme-switch-in-examples
codeEmpress1 Mar 8, 2024
7de48ab
Merge branch 'theme-switch-in-examples' of github.com:codeEmpress1/va…
codeEmpress1 Mar 8, 2024
b7fc5af
add theme switch to button examples
codeEmpress1 Mar 8, 2024
6e657c3
Linter fix
bartaz Mar 8, 2024
dd850a2
Enable theme switch in some of the examples
bartaz Mar 8, 2024
19956b7
Small styling tweaks for theme switch
bartaz Mar 8, 2024
c6f2228
Hide example toggles in Percy snapshots
bartaz Mar 13, 2024
c33e881
Fix missing theme toggle styles in example stylesheet
bartaz Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions scss/_utilities_baseline-grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,9 @@
position: fixed;
right: $sp-unit * 3;
z-index: 201;

.p-switch__label {
bartaz marked this conversation as resolved.
Show resolved Hide resolved
color: $color-x-dark;
}
}
}
29 changes: 29 additions & 0 deletions scss/_utilities_theme-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@import 'settings';

@mixin vf-u-theme-toggle {
.u-theme-toggle {
bottom: $spv--x-large;
position: fixed;
right: $sp-unit * 30;
z-index: 100;

.u-theme-toggle__button {
border: 0;
margin: 0;
}

.u-theme-toggle__dark {
background-color: $colors--dark-theme--background-default;
color: $colors--dark-theme--text-default;
}

.u-theme-toggle__light {
background-color: $colors--light-theme--background-default;
color: $colors--light-theme--text-default;
}
.u-theme-toggle__paper {
background-color: $color-paper;
color: $color-x-dark;
}
}
}
2 changes: 2 additions & 0 deletions scss/_vanilla.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
@import 'utilities_no-print';
@import 'utilities_text-max-width';
@import 'utilities_text-figures';
@import 'utilities_theme-toggle';

// Include all the CSS
@mixin vanilla {
Expand Down Expand Up @@ -178,4 +179,5 @@
@include vf-u-no-print;
@include vf-u-text-max-width;
@include vf-u-text-figures;
@include vf-u-theme-toggle;
}
35 changes: 2 additions & 33 deletions templates/_layouts/examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id="is-not-themed" data-is_not_themed="{{is_not_themed}}">
Copy link
Contributor

@bartaz bartaz Mar 7, 2024 •
edited

Choose a reason for hiding this comment

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

This is an interesting approach to inject the value into the template, but because we only need to read it in JS, maybe it would be simpler (and more reliable) to pass a JS variable instead?

Something like:

<script>
const SHOW_THEME_SWITCH = {% if is_not_themed %}False{% else %}True{% endif %};
</script>

And then you can just check the value of this global var?

<title>{% block title %}{% endblock %}{% if self.title() %} | {% endif %}Examples | Vanilla framework documentation</title>

{% if is_standalone %}
Expand All @@ -14,39 +15,7 @@
<link rel="stylesheet" type="text/css" href="{{ versioned_static('build/css/docs/example.css') }}" />
<link rel="icon" href="https://assets.ubuntu.com/v1/ab36e6ed-vanilla_favicon_32px.png" type="image/x-icon" />
{% block style %}{% endblock %}

<script>
(function() {
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}

function fragmentFromString(htmlString) {
var temp = document.createElement('template');
temp.innerHTML = htmlString;
return temp.content;
}

if (!inIframe()) {
document.documentElement.classList.add("u-baseline-grid");

document.addEventListener('DOMContentLoaded', function() {
var body = document.body;
var controls = fragmentFromString('<div class="u-baseline-grid__toggle"><label class="p-switch"><input type="checkbox" class="p-switch__input js-baseline-toggle" /><span class="p-switch__slider"></span><span class="p-switch__label">Toggle baseline grid</span></label></div>');
body.appendChild(controls);

var toggle = document.querySelector('.js-baseline-toggle');
toggle.addEventListener('click', function (event) {
body.classList.toggle('u-baseline-grid');
});
});
}
})();
</script>
<script defer src="{{ versioned_static('js/example-tools.js') }}"></script>
</head>

<body {% if is_dark %}class="is-dark"{% elif is_paper %}class="is-paper"{% endif %}>
Expand Down
5 changes: 3 additions & 2 deletions templates/docs/examples/base/code-inline-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@

{% block standalone_css %}base{% endblock %}

{% set is_dark = True %}
{% block content %}
<div class="p-strip is-dark" style="background: #111">
<div class="p-strip">
<div class="row">
<div class="col-12">
<p style="color: #fff;">The quick brown <code class="is-dark">fox&nbsp;jumps</code> over the lazy dog</p>
<p>The quick brown <code>fox&nbsp;jumps</code> over the lazy dog</p>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/docs/examples/base/hr-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</style>
{% endblock %}

{% set is_dark = true %}
{% set is_dark = True %}
{% block content %}
<hr class="is-dark">
<hr>
{% endblock %}
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/accordion/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_accordion{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<aside class="p-accordion">
<ul class="p-accordion__list">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/accordion/headings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_accordion{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<aside class="p-accordion">
<ul class="p-accordion__list">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/accordion/tick-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_accordion{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<aside class="p-accordion">
<ul class="p-accordion__list">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/article-pagination.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_article-pagination{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<footer class="p-article-pagination">
<a class="p-article-pagination__link--previous" href="#previous">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/alignment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<p>
<button>Classless button</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--base">Base</button>
<button class="p-button--base" disabled>Base disabled</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/brand.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--brand">Brand button</button>
<button class="p-button--brand" disabled>Brand button disabled</button>
Expand Down
3 changes: 2 additions & 1 deletion templates/docs/examples/patterns/buttons/dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<div class="p-strip is-dark is-shallow" style="background: #111">
<button class="p-button is-dark">Default button</button>
Expand All @@ -11,4 +12,4 @@
<button class="p-button--negative is-dark">Negative button</button>
<button class="p-button--brand is-dark">Brand button</button>
</div>
{% endblock %}
{% endblock %}
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button">Default button</button>
<button class="p-button" disabled>Default button disabled</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/dense.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<span>Everything you need to get started with Vanilla.</span>
<button class="p-button is-dense">Dense button</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/icon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--positive has-icon"><i class="p-icon--success"></i></button>
<button class="p-button has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/inline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<span>Everything you need to get started with Vanilla.</span>
<button class="p-button is-inline">Inline button</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--link">Button as link</button>
{% endblock %}
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/negative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--negative">Negative button</button>
<button class="p-button--negative" disabled>Negative button disabled</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/positive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button class="p-button--positive">Positive button</button>
<button class="p-button--positive" disabled>Positive button disabled</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/pressed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<span class="p-contextual-menu--left">
<button class="p-contextual-menu__toggle" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true">Take action&hellip;</button>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/processing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<button disabled class="p-button--positive is-processing">
<i class="p-icon--spinner u-animation--spin is-light"></i>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/buttons/small.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_buttons{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<p><small>This is small text <button class="p-button is-small is-inline">This is a small button</button><button class="p-button is-small is-dense">This is a small, dense button</button></small></p>
{% endblock %}
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/card/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_card{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<div class="p-card">
<h3>We'd love to have you join us as a partner.</h3>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/card/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_card{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<div class="p-card">
<img class="p-card__thumbnail" src="https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png" alt="" />
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/card/highlighted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_card{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<div class="p-card--highlighted">
<h3>We'd love to have you join us as a partner.</h3>
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/card/overlay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_card{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<section class="p-strip--image is-light" style="background-image:url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')">
<div class="row">
Expand Down
3 changes: 2 additions & 1 deletion templates/docs/examples/patterns/contextual-menu/dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@

{% block standalone_css %}patterns_contextual-menu{% endblock %}

{% set is_dark = True %}
{% block content %}
<span class="p-contextual-menu--left is-dark">
<span class="p-contextual-menu--left">
<button class="p-contextual-menu__toggle" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true">Take action&hellip;</button>
<span class="p-contextual-menu__dropdown" id="menu-3" aria-hidden="true">
<span class="p-contextual-menu__group">
Expand Down
8 changes: 2 additions & 6 deletions templates/docs/examples/patterns/divider/dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,12 @@

{% block standalone_css %}patterns_divider{% endblock %}

{% set is_dark = True %}
{% block style %}
<style>
body {
background: #111;
}
</style>
{% endblock %}

{% block content %}
<div class="row p-divider is-dark">
<div class="row p-divider">
<div class="col-4 p-divider__block">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, labore at suscipit necessitatibus cumque commodi velit.</p>
Expand Down
4 changes: 1 addition & 3 deletions templates/docs/examples/patterns/lists/lists-stepped-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@

{% block standalone_css %}patterns_lists{% endblock %}

{% set is_dark = True %}
{% block content %}
<div class="p-strip is-dark">

<ol class="p-stepped-list">
<li class="p-stepped-list__item">
<h3 class="p-stepped-list__title">
Expand Down Expand Up @@ -65,5 +64,4 @@ <h4 class="p-stepped-list__title">
<p class="p-stepped-list__content">Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.</p>
</li>
</ol>
</div>
{% endblock %}
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/logo-section/logo-section-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
</style>
{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<div class="u-fixed-width">
<div class="p-logo-section">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/pagination/pagination-deprecated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_pagination{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<nav aria-label="Pagination">
<ol class="p-pagination">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/pagination/pagination-disabled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_pagination{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<nav class="p-pagination" aria-label="Pagination">
<ol class="p-pagination__items">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/pagination/pagination-truncated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_pagination{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<nav class="p-pagination" aria-label="Pagination">
<ol class="p-pagination__items">
Expand Down
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/pagination/pagination-verbose.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

{% block standalone_css %}patterns_pagination{% endblock %}

{% set is_not_themed = True %}
{% block content %}
<nav class="p-pagination" aria-label="Pagination">
<ol class="p-pagination__items">
Expand Down