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 3 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
10 changes: 1 addition & 9 deletions scss/_patterns_rule.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,6 @@
}

.p-rule--highlight {
@include vf-highlight-bar($colors--light-theme--text-default);

&.is-dark {
@include vf-highlight-bar($colors--dark-theme--text-default);
}

&.is-accent {
@include vf-highlight-bar($color-accent);
}
@include vf-highlight-bar($colors--theme--text-default);
Copy link
Contributor

Choose a reason for hiding this comment

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

You didn't have to do this, thanks :)

I think by mistake you removed the .is-accent version. I don't think we have separate themed accent colour, so for now just keep it as is, regardless of the theme.

}
}
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;
}
24 changes: 24 additions & 0 deletions templates/_layouts/examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,36 @@
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>');
var themes = fragmentFromString('<div class="u-theme-toggle"><button class="u-theme-toggle__button u-theme-toggle__dark js-dark-theme-toggle">Dark</button><button class="u-theme-toggle__button u-theme-toggle__light js-light-theme-toggle">Light</button><button class="u-theme-toggle__button u-theme-toggle__paper js-paper-theme-toggle">Paper</button></div>');
bartaz marked this conversation as resolved.
Show resolved Hide resolved

body.appendChild(themes);
body.appendChild(controls);

var toggle = document.querySelector('.js-baseline-toggle');
toggle.addEventListener('click', function (event) {
body.classList.toggle('u-baseline-grid');
});

var darkTheme = document.querySelector('.js-dark-theme-toggle');
darkTheme.addEventListener('click', function (event) {
body.classList.add('is-dark');
body.classList.remove('is-paper');
body.classList.remove('is-light');
});

var lightTheme = document.querySelector('.js-light-theme-toggle');
lightTheme.addEventListener('click', function (event) {
body.classList.add('is-light');
body.classList.remove('is-dark');
body.classList.remove('is-paper');
});

var paperTheme = document.querySelector('.js-paper-theme-toggle');
paperTheme.addEventListener('click', function (event) {
body.classList.add('is-paper');
body.classList.remove('is-dark');
body.classList.remove('is-light');
});
});
}
})();
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 %}
13 changes: 7 additions & 6 deletions 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,12 +3,13 @@

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

{% set is_dark = True %}
{% block content %}
<div class="p-strip is-dark is-shallow" style="background: #111">
<button class="p-button is-dark">Default button</button>
<button class="p-button--base is-dark">Base button</button>
<button class="p-button--positive is-dark">Positive button</button>
<button class="p-button--negative is-dark">Negative button</button>
<button class="p-button--brand is-dark">Brand button</button>
<div class="p-strip is-shallow">
<button class="p-button">Default button</button>
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure if that works, because buttons have not been migrated to new theming yet, so they need to have is-dark class on them (they don't inherit the theme).

You can keep the is_dark = True part to have class on body, but the is-dark class on buttons needs to stay for now. I know that your toggle will not work properly here, but it's fine.
(I commented in MM about the conditional, so that's another option as well).

Overall, the is-dark classes on buttons need to stay until buttons are properly themed.

<button class="p-button--base">Base button</button>
<button class="p-button--positive">Positive button</button>
<button class="p-button--negative">Negative button</button>
<button class="p-button--brand">Brand button</button>
</div>
{% endblock %}
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
3 changes: 2 additions & 1 deletion 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,8 +3,9 @@

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

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

Choose a reason for hiding this comment

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

You can remove the strip completely, it was only there to make backround dark.


<ol class="p-stepped-list">
<li class="p-stepped-list__item">
Expand Down
10 changes: 1 addition & 9 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 @@ -3,15 +3,7 @@

{% block standalone_css %}patterns_logo-section{% endblock %}

{% block style %}
<style>
body {
background: #262626;
color: #FFF;
}
</style>
{% endblock %}

{%set is_dark = True%}
Copy link
Contributor

Choose a reason for hiding this comment

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

Just a bit of missing whitespace for consistency

Suggested change
{%set is_dark = True%}
{% set is_dark = True %}

Copy link
Contributor

Choose a reason for hiding this comment

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

As you mentioned in the comment, this is tricky one because if images. We can't change images based on the theme, we don't have a solution for it (outside of built in icons). We can't change src based on theme or anything, at least not easily.

So I guess it's ok to just keep this one dark, with switch not working.

{% block content %}
<div class="u-fixed-width">
<div class="p-logo-section">
Expand Down
13 changes: 7 additions & 6 deletions templates/docs/examples/patterns/rule/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 %}patterns_rule{% endblock %}

{% set is_dark = True %}
{% block content %}

<div class="p-strip is-dark">
<div class="p-strip">
<div class="u-fixed-width p-section--shallow">
<hr class="p-rule--highlight is-dark">
<hr class="p-rule--highlight">
Copy link
Contributor

Choose a reason for hiding this comment

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

This will also not work, the rule component does not support new theming yet, so it will not inherit the theme. It needs to have is-dark class on itself.

So the switch will not work here yet, please revert this example.

<h2>
<strong>
A broad portfolio.
Expand All @@ -18,16 +19,16 @@ <h2>
<div class="p-section--shallow">
<div class="row--25-75">
<div class="col">
<hr class="p-rule is-dark">
<hr class="p-rule">
<div class="row">
<div class="col-6">
<h2>One stable platform <br>for everything open source</h2>
<p>Build with confidence using the world's favourite Linux operating system. <br>Ubuntu delivers long-term supported releases every two years.</p>
</div>
<div class="col-3">
<h2><a class="p-link is-dark" href="#">Desktop&nbsp;›</a></h2>
<hr class="p-rule--muted is-dark u-hide--medium">
<h2><a class="is-dark" href="#">Server&nbsp;›</a></h2>
<h2><a class="p-link" href="#">Desktop&nbsp;›</a></h2>
<hr class="p-rule--muted u-hide--medium">
<h2><a href="#">Server&nbsp;›</a></h2>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/docs/examples/patterns/strips/dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

{% set is_paper = true %}
{% block content %}
<div class="p-strip is-dark">
<div class="p-strip">
Copy link
Contributor

Choose a reason for hiding this comment

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

This example is used in the docs to show how to make strip dark, so in this case we want the is-dark class on strip, not on body (to show how to change single strip to dark).

So for now it's ok that theme switch will not work (or will not be available) on this example.

<div class="row--25-75">
<div class="col">
<h2>Dark strip</h2>
Expand Down