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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add dark theme to the buttons #3807

Merged
merged 9 commits into from
Jul 1, 2021
Merged

Add dark theme to the buttons #3807

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2ffa196
Add dark theme to default button component
bartaz Jun 24, 2021
96b207f
Add dark theme to base button
bartaz Jun 24, 2021
8fe156f
Dark themes for positive and negative buttons
bartaz Jun 24, 2021
07da29e
Add dark theme to the brand button
bartaz Jun 25, 2021
f7b193e
Make base buttons transparent again
bartaz Jun 25, 2021
764cc41
Bump file size threshold
bartaz Jun 25, 2021
b3bea25
Document button dark theme
bartaz Jun 30, 2021
d71a5f3
Update button colors
bartaz Jun 30, 2021
dfad002
Merge branch 'master' into button-dark-theme
bartaz Jun 30, 2021
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: 2 additions & 2 deletions scss/_base_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@
}

@mixin vf-button-pattern(
$button-background-color: $color-x-light,
$button-text-color: $color-dark,
$button-background-color: $colors--light-theme--background-default,
$button-text-color: $colors--light-theme--text-default,
$button-disabled-background-color: $color-transparent,
$button-disabled-border-color: $colors--light-theme--border-high-contrast,
$button-border-color: $colors--light-theme--border-high-contrast,
Expand Down
148 changes: 133 additions & 15 deletions scss/_patterns_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,41 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
}

@mixin vf-button-plain {
%p-button {
@extend %vf-button-base;
%p-button-light {
@include vf-button-pattern();
}

@include vf-button-pattern($button-disabled-background-color: transparent, $button-disabled-border-color: transparent);
%p-button-dark {
@include vf-button-pattern(
$button-background-color: $colors--dark-theme--background-default,
$button-text-color: $colors--dark-theme--text-default,
$button-disabled-background-color: $color-transparent,
$button-disabled-border-color: $colors--dark-theme--border-high-contrast,
$button-border-color: $colors--dark-theme--border-high-contrast,
$button-hover-background-color: $colors--dark-theme--background-hover,
$button-hover-border-color: $colors--dark-theme--border-high-contrast,
$button-active-background-color: $colors--dark-theme--background-active,
$button-active-border-color: $colors--dark-theme--border-high-contrast
);
}

.p-button {
@extend %p-button;
@extend %vf-button-base;

// Theming
@if ($theme-default-p-button == 'dark') {
@extend %p-button-dark;

&.is-light {
@extend %p-button-light;
}
} @else {
@extend %p-button-light;

&.is-dark {
@extend %p-button-dark;
}
}
}
}

Expand Down Expand Up @@ -74,9 +101,7 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
}

@mixin vf-button-positive {
%p-button--positive {
@extend %vf-button-base;

%p-button--positive-light {
@include vf-button-pattern(
$button-background-color: $color-positive,
$button-hover-background-color: adjust-color($color-positive, $lightness: -$hover-background-opacity-percentage),
Expand All @@ -92,16 +117,48 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
@include vf-focus($color-focus-positive);
}

%p-button--positive-dark {
$color-positive-dark: adjust-color($color-positive, $lightness: -10%);
bartaz marked this conversation as resolved.
Show resolved Hide resolved

@include vf-button-pattern(
$button-background-color: $color-positive-dark,
$button-hover-background-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
$button-active-background-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
$button-disabled-background-color: $color-positive-dark,
$button-border-color: $color-positive-dark,
$button-hover-border-color: adjust-color($color-positive-dark, $lightness: -$hover-background-opacity-percentage),
$button-active-border-color: adjust-color($color-positive-dark, $lightness: -$active-background-opacity-percentage),
$button-disabled-border-color: $color-positive-dark,
$button-text-color: vf-contrast-text-color($color-positive-dark)
);

@include vf-focus($color-focus-positive);
}

.p-button--positive {
@extend %p-button--positive;
@extend %vf-button-base;

// Theming
@if ($theme-default-p-button == 'dark') {
@extend %p-button--positive-dark;

&.is-light {
@extend %p-button--positive-light;
}
} @else {
@extend %p-button--positive-light;

&.is-dark {
@extend %p-button--positive-dark;
}
}

@extend %vf-button-white-success-icon;
}
}

@mixin vf-button-negative {
%p-button--negative {
@extend %vf-button-base;

%p-button--negative-light {
@include vf-button-pattern(
$button-background-color: $color-negative,
$button-hover-background-color: adjust-color($color-negative, $lightness: -$hover-background-opacity-percentage),
Expand All @@ -117,17 +174,63 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
@include vf-focus($color-focus-negative);
}

%p-button--negative-dark {
$color-negative-dark: adjust-color($color-negative, $lightness: -10%);
bartaz marked this conversation as resolved.
Show resolved Hide resolved

@include vf-button-pattern(
$button-background-color: $color-negative-dark,
$button-hover-background-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
$button-active-background-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
$button-disabled-background-color: $color-negative-dark,
$button-border-color: $color-negative-dark,
$button-hover-border-color: adjust-color($color-negative-dark, $lightness: -$hover-background-opacity-percentage),
$button-active-border-color: adjust-color($color-negative-dark, $lightness: -$active-background-opacity-percentage),
$button-disabled-border-color: $color-negative-dark,
$button-text-color: vf-contrast-text-color($color-negative-dark)
);

@include vf-focus($color-focus-negative);
}

.p-button--negative {
@extend %p-button--negative;
@extend %vf-button-base;

// Theming
@if ($theme-default-p-button == 'dark') {
@extend %p-button--negative-dark;

&.is-light {
@extend %p-button--negative-light;
}
} @else {
@extend %p-button--negative-light;

&.is-dark {
@extend %p-button--negative-dark;
}
}

@extend %vf-button-white-success-icon;
}
}

@mixin vf-button-base {
%p-button--base {
@extend %vf-button-base;
%p-button--base-light {
bartaz marked this conversation as resolved.
Show resolved Hide resolved
@include vf-button-pattern(
$button-border-color: $color-transparent,
$button-hover-border-color: $color-transparent,
$button-active-border-color: $color-transparent,
$button-disabled-border-color: $color-transparent
);
}

%p-button--base-dark {
@include vf-button-pattern(
$button-background-color: $colors--dark-theme--background-default,
$button-text-color: $colors--dark-theme--text-default,
$button-disabled-background-color: $color-transparent,
$button-hover-background-color: $colors--dark-theme--background-hover,
$button-active-background-color: $colors--dark-theme--background-active,
$button-border-color: $color-transparent,
$button-hover-border-color: $color-transparent,
$button-active-border-color: $color-transparent,
Expand All @@ -136,7 +239,22 @@ $hover-background-opacity-percentage: $hover-background-opacity-amount * 100%;
}

.p-button--base {
@extend %p-button--base;
@extend %vf-button-base;

// Theming
@if ($theme-default-p-button == 'dark') {
@extend %p-button--base-dark;

&.is-light {
@extend %p-button--base-light;
}
} @else {
@extend %p-button--base-light;

&.is-dark {
@extend %p-button--base-dark;
}
}
}
}

Expand Down
1 change: 1 addition & 0 deletions scss/_settings_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ $theme-default-p-search-box: 'light' !default;
$theme-default-p-divider: 'light' !default;
$theme-default-p-contextual-menu: 'light' !default;
$theme-default-p-inline-list--middot: 'light' !default;
$theme-default-p-button: 'light' !default;
29 changes: 29 additions & 0 deletions templates/docs/examples/patterns/buttons/dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{% extends "_layouts/examples.html" %}
{% block title %}Buttons / Default{% endblock %}

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

{% block content %}
<div class="p-strip--dark is-shallow" style="background: #111">
<p>
<button class="p-button is-dark">Default button</button>
<button class="p-button is-dark" disabled>Default button disabled</button>
</p>
<p>
<button class="p-button--base is-dark">Base button</button>
<button class="p-button--base is-dark" disabled>Base button disabled</button>
</p>
<p>
<button class="p-button--positive is-dark">Positive button</button>
<button class="p-button--positive is-dark" disabled>Positive button disabled</button>
</p>
<p>
<button class="p-button--negative is-dark">Negative button</button>
<button class="p-button--negative is-dark" disabled>Negative button disabled</button>
</p>
<p>
<button class="p-button--brand is-dark">Brand button</button>
bartaz marked this conversation as resolved.
Show resolved Hide resolved
<button class="p-button--brand is-dark" disabled>Brand button disabled</button>
</p>
</div>
{% endblock %}