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

feat(styles): update buttons #1635

Merged
merged 20 commits into from
Jul 24, 2023
Merged

feat(styles): update buttons #1635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2b17130
Update inline-padding of tertiary buttons according to design
Jul 17, 2023
7256464
Update color of tertiary buttons to black on hover
Jul 17, 2023
3604f41
Update color of secondary and tertiary buttons to black-80 (default)
Jul 17, 2023
a7d72fc
Update border of secondary buttons to black-60
Jul 17, 2023
db11b8a
Fix tertiary icons on dark theme
Jul 17, 2023
381b660
Update font size progression to 12/14/16/18
Jul 17, 2023
0a20fed
Fix font-color for secondary/tertiary button on dark theme
Jul 17, 2023
d415c12
Change all colors from transparent colors to full-tone colors (backgr…
Jul 17, 2023
172a8d6
Add minor changeset
Jul 17, 2023
6aa99fa
Lint
Jul 17, 2023
271afe2
Revert transparent
Jul 18, 2023
b8ac91d
Change all colors from transparent colors to full-tone colors (backgr…
Jul 18, 2023
e1a4f16
Fix changeset
Jul 18, 2023
178fb19
Remove rgv color variable version when not needed
Jul 18, 2023
56e46c5
Extends btn-transparent-background
Jul 18, 2023
c03dfda
Lower specificity for tertiary padding
Jul 18, 2023
5f201bf
Change verb to past tense
Jul 20, 2023
0dbc0d7
Convert color to fulltone var
Jul 20, 2023
54cac56
Move secondary and tertiary hover color in placeholder
Jul 20, 2023
e4528a9
Replace var color into fulltone
Jul 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/long-geckos-clap.md
View file
Open in desktop
imagoiq marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@swisspost/design-system-styles': patch
---

- Reduced horizontal padding of tertiary buttons.
- Updated font-size progression according to button size.
- Changed transparent color to full-tone colors.
- Updated slightly the font and border color of secondary and tertiary buttons.
31 changes: 13 additions & 18 deletions packages/styles/src/components/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
border-radius: button.$btn-border-radius;
background-color: transparent;
box-shadow: none;
color: var(--post-contrast-color);
color: var(--post-gray-80);
font-family: inherit;
font-weight: button.$btn-font-weight;
text-decoration: none !important; // For <a> tags, !important for hover
Expand All @@ -43,7 +43,7 @@
// Primary
.btn-primary {
border-color: transparent;
background-color: rgba(var(--post-contrast-color-rgb), 0.8);
background-color: var(--post-gray-80);
color: var(--post-contrast-color-inverted);

@include utilities.not-disabled-focus-hover() {
Expand All @@ -53,9 +53,14 @@

@include color-mx.on-dark-background {
background-color: var(--post-contrast-color);
color: var(--post-gray-10); // Apply same color as secondary/tertiary button on dark theme

@include utilities.not-disabled-focus-hover() {
background-color: rgba(var(--post-contrast-color-rgb), 0.8);
background-color: var(--post-gray-80);
}

&:disabled {
color: var(--post-gray-80);
}
}

Expand Down Expand Up @@ -83,7 +88,7 @@
}

&:disabled {
background-color: rgba(var(--post-contrast-color-rgb), 0.4);
background-color: var(--post-gray-40);
}

.pi {
Expand All @@ -96,28 +101,18 @@
.btn-default,
.btn-secondary {
@extend %btn-default;

// Invert icon on dark backgrounds
@include color-mx.on-dark-background() {
.pi {
filter: invert(1);
}
}
@extend %btn-transparent-background;
}

// Tertiary
.btn-link,
.btn-tertiary {
@extend %btn-transparent-background;
border: 0;
padding-right: 0.375rem;
padding-left: 0.375rem;

@include utilities.not-disabled-focus-hover() {
color: rgba(var(--post-contrast-color-rgb), 0.8);
}
padding-inline: spacing.$size-micro;

&:disabled {
color: rgba(var(--post-contrast-color-rgb), 0.6);
color: var(--post-gray-60);
}

// Styles to improve accessibility in high contrast mode
Expand Down
5 changes: 4 additions & 1 deletion packages/styles/src/mixins/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,13 @@

@mixin button-size($size: md) {
min-height: map.get(button.$btn-height-map, $size);
padding: 0 map.get(button.$btn-padding-x-map, $size);
font-size: map.get(button.$btn-font-size-map, $size);
gap: map.get(button.$btn-padding-x-map, $size) * 0.5;

&:where(:not(.btn-link, .btn-tertiary)) {
padding: 0 map.get(button.$btn-padding-x-map, $size);
}

> .pi {
width: map.get(button.$btn-icon-size-map, $size);
height: map.get(button.$btn-icon-size-map, $size);
Expand Down
22 changes: 17 additions & 5 deletions packages/styles/src/placeholders/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,35 @@
@use './../variables/components/button';

%btn-default {
imagoiq marked this conversation as resolved.
Show resolved Hide resolved
border: button.$btn-border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
border: button.$btn-border-width solid var(--post-gray-60);

@include utilities.not-disabled-focus-hover() {
border-color: var(--post-contrast-color);
color: var(--post-contrast-color); // Override <a> color
}

@include color-mx.on-dark-background() {
border-color: var(--post-contrast-color);

@include utilities.not-disabled-focus-hover() {
border-color: rgba(var(--post-contrast-color-rgb), 0.4);
border-color: var(--post-gray-40);
}
}

&:disabled {
border-color: rgba(var(--post-contrast-color-rgb), 0.4);
color: rgba(var(--post-contrast-color-rgb), 0.6);
border-color: var(--post-gray-40);
color: var(--post-gray-60);
}
}

%btn-transparent-background {
imagoiq marked this conversation as resolved.
Show resolved Hide resolved
@include utilities.not-disabled-focus-hover() {
color: var(--post-contrast-color);
}

// Invert icon on dark backgrounds
@include color-mx.on-dark-background() {
.pi {
filter: invert(1);
}
}
}
1 change: 1 addition & 0 deletions packages/styles/src/variables/_type.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ $font-size-small-huge: sizing.px-to-rem(48px);
$font-size-huge: sizing.px-to-rem(56px);

// New
$font-size-12: sizing.px-to-rem(12px);
$font-size-14: sizing.px-to-rem(14px);
$font-size-16: sizing.px-to-rem(16px);
$font-size-18: sizing.px-to-rem(18px);
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/src/variables/components/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ $btn-padding-x-sm: spacing.$size-regular !default;
$btn-animation-distance-sm: spacing.$size-mini !default;
// Design System only
$btn-height-sm: 2rem;
$btn-font-size-sm: type.$font-size-tiny !default;
$btn-font-size-sm: type.$font-size-12 !default;
$btn-icon-size-sm: spacing.$size-regular !default;

// rg
Expand All @@ -52,7 +52,7 @@ $btn-padding-x-rg: spacing.$size-large !default;
$btn-animation-distance-rg: 0.625rem !default;
// Design System only
$btn-height-rg: 2.5rem;
$btn-font-size-rg: type.$font-size-regular !default;
$btn-font-size-rg: type.$font-size-14 !default;
$btn-icon-size-rg: 1.125rem !default;

// md
Expand All @@ -61,7 +61,7 @@ $btn-padding-x-md: spacing.$size-big !default;
$btn-animation-distance-md: spacing.$size-small-regular !default;
// Design System only
$btn-height-md: 3rem;
$btn-font-size-md: type.$font-size-regular !default;
$btn-font-size-md: type.$font-size-16 !default;
$btn-icon-size-md: spacing.$size-small-large !default;

// lg
Expand All @@ -70,7 +70,7 @@ $btn-padding-x-lg: spacing.$size-bigger-big !default;
$btn-animation-distance-lg: spacing.$size-regular !default;
// Design System only
$btn-height-lg: 3.5rem;
$btn-font-size-lg: type.$font-size-bigger-regular !default;
$btn-font-size-lg: type.$font-size-18 !default;
$btn-icon-size-lg: spacing.$size-large !default;

// Available button sizes except the default, which is md
Expand Down