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

feat(styles): tokenise radio buttons #3540

Closed
wants to merge 9 commits into from
+46 −20
Closed

feat(styles): tokenise radio buttons #3540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
846df53
Squashed commit of the following:
schaertim Sep 10, 2024
4fcf664
chore(styles): started adapting styles to use tokens
schaertim Sep 11, 2024
9fbb62f
chore(styles): try to match design
schaertim Sep 11, 2024
b9f1095
chore(setup): removed token build from docs:start
schaertim Sep 11, 2024
4bea63d
chore(docs): added changeset
schaertim Sep 11, 2024
578f4b0
Merge branch 'main' into 3274-component-radio-button
gfellerph Sep 27, 2024
9d0b7df
fix: linter error
schaertim Oct 15, 2024
98f4e93
Merge branch 'main' into 3274-component-radio-button
schaertim Oct 15, 2024
98afc4a
fix(styles): used new tokens.get() version
schaertim Oct 15, 2024
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
5 changes: 5 additions & 0 deletions .changeset/slow-fishes-reply.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-styles': patch
---

Started adapting the radio-button styles to match v2 design.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
Started adapting the radio-button styles to match v2 design.
Aligned radio button styles with the new Post design.

61 changes: 41 additions & 20 deletions packages/styles/src/components/form-check.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,29 @@
@use '../mixins/color' as color-mx;
@use '../mixins/icons' as icons-mx;
@use '../mixins/utilities' as utility-mx;
@use '../tokens/components' as components;
@use '../functions/tokens' as tokens;
Comment on lines +12 to +13
Copy link
Contributor

Choose a reason for hiding this comment

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

This is not necessary:

Suggested change
@use '../tokens/components' as components;
@use '../functions/tokens' as tokens;
@use '../tokens/components';
@use '../functions/tokens';


tokens.$default-map: components.$post-radio-button;

.form-check {
display: flex;
flex-wrap: wrap;
row-gap: form-check.$form-check-row-gap;
margin-bottom: form-check.$form-check-margin-bottom;

@include utility-mx.focus-style() {
@include utility-mx.focus-style-custom() {
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 use the focus-style mixin here.

outline: tokens.get('radio-button-focus-border-width') solid
tokens.get('radio-button-focus-stroke');
color: tokens.get('radio-button-selected-fg');
background-color: tokens.get('radio-button-selected-bg');

.form-check-input[type='radio'] {
border-color: tokens.get('radio-button-selected-stroke');
}

// TODO: Use tokens for these (not yet provided)
outline-offset: 3px !important;
border-radius: commons.$border-radius;
}

Expand All @@ -30,16 +45,19 @@

&-input,
&-label {
color: rgba(var(--post-contrast-color-rgb), 0.8);
transition: color animation.$transition-base-timing;
color: tokens.get('radio-button-enabled-fg');
background-color: tokens.get('radio-button-enabled-bg');
transition: color #{animation.$transition-base-timing};
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
transition: color #{animation.$transition-base-timing};
transition: color animation.$transition-base-timing;


@include utility-mx.high-contrast-mode {
transition: none;
}

&:hover:not([disabled]),
&:hover:not([disabled]) ~ &-label {
color: var(--post-contrast-color);
color: tokens.get('radio-button-hover-fg');
background-color: tokens.get('radio-button-hover-bg');
border-color: tokens.get('radio-button-hover-stroke');

@include utility-mx.high-contrast-mode() {
border-color: Highlight;
Expand All @@ -48,20 +66,22 @@
}

&-input {
&:not([disabled]),
&:not([disabled]) ~ .form-check-label {
cursor: pointer;
}

@include utility-mx.focus-style-none();

display: inline-flex;
flex: 0 auto;
appearance: none;
background: transparent;
height: form-check.$form-check-input-size;
width: form-check.$form-check-input-size;
border: form-check.$form-check-input-border-width solid currentColor;
height: tokens.get('radio-button-icon-ring');
width: tokens.get('radio-button-icon-ring');
border: tokens.get('radio-button-icon-border-width') solid
tokens.get('radio-button-enabled-stroke');
margin-top: 1px;
Copy link
Contributor

Choose a reason for hiding this comment

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

What is this margin for? Can it be removed?
If not can you add a comment to explain it?

@include utility-mx.focus-style-none();

&:not([disabled]),
&:not([disabled]) ~ .form-check-label {
cursor: pointer;
}

@include utility-mx.high-contrast-mode {
border-color: FieldText; // For blink-browser as otherwise the default color (which is not a full color) will be converted to Highlight
Expand Down Expand Up @@ -92,10 +112,11 @@
}

&[type='radio'] {
border-radius: 50%;
border-radius: tokens.get('radio-button-icon-border-radius-round');

&:checked::after {
border: spacing.$size-micro solid transparent;
// TODO: Use tokens
border: 3px solid transparent;
Comment on lines +118 to +119
Copy link
Contributor

Choose a reason for hiding this comment

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

Did you contact @Vandapanda to create the missing tokens?

background-color: currentColor;
border-radius: inherit;
background-clip: padding-box;
Expand All @@ -121,9 +142,6 @@
}

&[disabled] {
border: 0;
background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');

&[type='checkbox'],
&[type='radio'] {
@include utility-mx.high-contrast-mode {
Expand All @@ -149,6 +167,9 @@
}
}

border: 0;
background-image: url('#{form-check.$form-check-input-disabled-background-url-light-lg}');
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this still correct or do we simply use a dashed border now?


@include color-mx.on-dark-background {
background-image: url('#{form-check.$form-check-input-disabled-background-url-dark-lg}');
}
Expand All @@ -172,8 +193,8 @@

&[disabled],
&[disabled] ~ .form-check-label {
text-decoration: line-through;
color: color.$black-alpha-60;
color: tokens.get('radio-button-disabled-fg');
background-color: tokens.get('radio-button-disabled-bg');

@include color-mx.on-dark-background() {
color: color.$white-alpha-80;
Expand Down
Loading