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(web): Switch Checkbox component to v3 design tokens #DS-1447 #1607

Merged
merged 2 commits into from
Sep 17, 2024
Merged

Feat(web): Switch Checkbox component to v3 design tokens #DS-1447 #1607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f3e9cf
Feat(web): Introduce background image urls generator to themes #DS-1447
crishpeen Aug 31, 2024
22475dc
Feat(web): Switch Checkbox component to v3 design tokens #DS-1447
crishpeen Aug 31, 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
101 changes: 62 additions & 39 deletions packages/web/src/scss/components/Checkbox/_Checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
@use 'sass:map';
// 1. We allow descending specificity order here because we don't want to set the background-image with SVG twice
// and therefore bloating the CSS.
// 2. We need to set the background-color of the non-disabled Checkbox input to initial color when it is hovered
// or active, because we need it contrasting with the background color.
// 3. We need to set the color of the validation text and helper text to inherit when the Item is hovered or active,
// because we need it contrasting with the background color.

@use 'theme';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
Expand All @@ -11,7 +17,7 @@ $_field-name: 'Checkbox';
}

.Checkbox__text {
margin-left: form-fields-theme.$gap;
margin-left: form-fields-theme.$inline-field-gap;
}

.Checkbox__label {
Expand All @@ -37,17 +43,20 @@ $_field-name: 'Checkbox';
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: form-fields-theme.$input-background-color;

&:checked,
&:indeterminate {
border-color: form-fields-theme.$inline-field-input-border-color-checked;
background-color: form-fields-theme.$inline-field-input-background-color-checked;
}

&:checked {
color: form-fields-theme.$inline-field-input-color-checked;
background-image: svg.escape(theme.$input-checked-mark);
background-color: form-fields-theme.$inline-field-input-color-checked;
}

&:indeterminate {
color: form-fields-theme.$inline-field-input-color-checked;
background-image: svg.escape(theme.$input-indeterminate-mark);
background-color: form-fields-theme.$inline-field-input-color-checked;
}
}

Expand All @@ -62,60 +71,74 @@ $_field-name: 'Checkbox';

@include form-fields-tools.input-field-validation-states($_field-name);

.Checkbox--disabled {
@include form-fields-tools.inline-field-root-disabled();
}
.Checkbox--item {
@include form-fields-tools.item();

.Checkbox--disabled .Checkbox__label {
@include form-fields-tools.label-disabled();
display: flex;
}

.Checkbox--disabled .Checkbox__validationText {
@include form-fields-tools.validation-text-disabled();
.Checkbox--item .Checkbox__label {
@include form-fields-tools.item-label();
}

.Checkbox--disabled .Checkbox__helperText {
@include form-fields-tools.helper-text-disabled();
.Checkbox--item .Checkbox__validationText {
@include form-fields-tools.item-validation-text();
}

.Checkbox--disabled > .Checkbox__input,
.Checkbox > .Checkbox__input:disabled {
@include form-fields-tools.input-disabled();
.Checkbox--item .Checkbox__helperText {
@include form-fields-tools.item-helper-text();
}

.Checkbox--disabled > .Checkbox__input:checked,
.Checkbox--disabled > .Checkbox__input:indeterminate,
.Checkbox > .Checkbox__input:disabled:checked,
.Checkbox > .Checkbox__input:disabled:indeterminate {
background-color: form-fields-theme.$input-color-disabled;
.Checkbox--item:is(.Checkbox--disabled, .Checkbox.is-disabled) {
@include form-fields-tools.item-disabled();
}

.Checkbox--item {
@include form-fields-tools.item();
:is(.Checkbox--disabled, .Checkbox.is-disabled) {
@include form-fields-tools.inline-field-root-disabled();
}

display: flex;
:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__label {
@include form-fields-tools.label-disabled();
}

.Checkbox--item.Checkbox--disabled {
@include form-fields-tools.item-disabled();
:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__validationText {
@include form-fields-tools.validation-text-disabled();
}

// stylelint-disable-next-line selector-max-class, selector-max-compound-selectors, selector-max-specificity -- We need to override the default styles for the label in Item.
.Checkbox--item .Checkbox__input:checked ~ .Checkbox__text > .Checkbox__label {
@include form-fields-tools.item-label-checked();
:is(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__helperText {
@include form-fields-tools.helper-text-disabled();
}

.Checkbox--item .Checkbox__validationText {
@include form-fields-tools.item-validation-text();
:is(.Checkbox--disabled, .Checkbox.is-disabled) > .Checkbox__input,
.Checkbox > .Checkbox__input:disabled {
@include form-fields-tools.input-disabled();

border-color: form-fields-theme.$input-border-color-disabled;
background-color: form-fields-theme.$input-background-color-disabled;

&:checked,
&:indeterminate {
border-color: form-fields-theme.$inline-field-input-border-color-checked-disabled;
}

&:checked {
background-image: svg.escape(theme.$input-checked-mark-disabled);
}

// stylelint-disable-next-line no-descending-specificity -- 1.
&:indeterminate {
background-image: svg.escape(theme.$input-indeterminate-mark-disabled);
}
}

.Checkbox--item .Checkbox__helperText {
@include form-fields-tools.item-helper-text();
// stylelint-disable selector-max-specificity -- 2.
.Checkbox--item:not(.Checkbox--disabled, .Checkbox.is-disabled) .Checkbox__input:is(:hover, :active):not(:checked) {
background-color: form-fields-theme.$input-background-color;
}

.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText,
.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText,
.Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText,
.Checkbox--item:not(.Checkbox--disabled):active .Checkbox__helperText {
// 3.
.Checkbox--item:not(.Checkbox--disabled, .Checkbox.is-disabled):is(:hover, :active)
:is(.Checkbox__helperText, .Checkbox__validationText) {
color: inherit;
}
// stylelint-enable selector-max-specificity
11 changes: 7 additions & 4 deletions packages/web/src/scss/components/Checkbox/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
@use '@tokens' as tokens;
@use '@global' as global-tokens;
@use '../../settings/globals';

$input-border-radius: 2px;
$input-border-radius: global-tokens.$radius-200;
$input-width: 18px;
$input-margin: 3px;
$input-checked-mark: url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M7.71 13.29a.996.996 0 0 1-1.41 0L2.71 9.7a.996.996 0 1 1 1.41-1.41L7 11.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.58 7.59Z" style="fill:#fff"/></svg>');
$input-indeterminate-mark: url('data:image/svg+xml,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path style="fill:#fff" d="M4 8h10v2H4z"/></svg>');
$input-checked-mark: var(--#{globals.$prefix}checkbox-input-background-image-url);
$input-checked-mark-disabled: var(--#{globals.$prefix}checkbox-input-disabled-background-image-url);
$input-indeterminate-mark: var(--#{globals.$prefix}checkbox-input-indeterminate-background-image-url);
$input-indeterminate-mark-disabled: var(--#{globals.$prefix}checkbox-input-indeterminate-disabled-background-image-url);
3 changes: 1 addition & 2 deletions packages/web/src/scss/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
@forward 'Alert';
@forward 'Breadcrumbs';
@forward 'Button';

// @forward 'Checkbox';
@forward 'Checkbox';
@forward 'Collapse';
@forward 'Container';
@forward 'Divider';
Expand Down
116 changes: 61 additions & 55 deletions packages/web/src/scss/theme/_form-fields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,62 @@
@use '@tokens' as tokens;
@use '@global' as global-tokens;
@use '../settings/globals';

// Common for all form components
$gap: tokens.$space-400;
$input-typography: tokens.$body-medium-text-regular;
$input-color-disabled: tokens.$text-primary-disabled;
$input-border-color-success: tokens.$emotion-success-default;
$input-border-color-warning: tokens.$emotion-warning-default;
$input-border-color-danger: tokens.$emotion-danger-default;
$input-focus-shadow: tokens.$focus;
$label-color-default: tokens.$text-primary-default;
$label-color-disabled: tokens.$text-primary-disabled;
$label-required-margin-left: tokens.$space-200;
$label-required-color: tokens.$emotion-danger-default;
$validation-text-typography: tokens.$body-medium-text-regular;
$validation-text-margin-top: tokens.$space-300;
$validation-text-color-default: tokens.$text-secondary-default;
$validation-text-color-disabled: tokens.$text-secondary-disabled;
$validation-text-color-success: tokens.$emotion-success-default;
$validation-text-color-warning: tokens.$emotion-warning-default;
$validation-text-color-danger: tokens.$emotion-danger-default;
$helper-text-typography: tokens.$body-small-text-regular;
$helper-text-margin-top: tokens.$space-300;
$helper-text-color-default: tokens.$text-secondary-default;
$helper-text-color-disabled: tokens.$text-secondary-disabled;
$input-typography: global-tokens.$body-medium-regular;
$input-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$input-background-color: var(--#{globals.$prefix}color-form-field-default);
$input-background-color-hover: var(--#{globals.$prefix}color-form-field-hover);
$input-background-color-active: var(--#{globals.$prefix}color-form-field-active);
$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background);
$input-border-color: var(--#{globals.$prefix}color-form-field-border-default);
$input-border-color-success: var(--#{globals.$prefix}color-form-field-success);
$input-border-color-warning: var(--#{globals.$prefix}color-form-field-warning);
$input-border-color-danger: var(--#{globals.$prefix}color-form-field-danger);
$input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border);
$input-focus-shadow: global-tokens.$focus;
$label-color-default: var(--#{globals.$prefix}color-form-field-label);
$label-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$label-required-typography: global-tokens.$body-small-regular;
$label-required-margin-left: global-tokens.$space-200;
$label-required-color: var(--#{globals.$prefix}color-form-field-danger);
$validation-text-typography: global-tokens.$body-small-semibold;
$validation-text-margin-top: global-tokens.$space-400;
crishpeen marked this conversation as resolved.
Show resolved Hide resolved
$validation-text-color-disabled: var(--#{globals.$prefix}color-disabled-content);
$validation-text-color-success: var(--#{globals.$prefix}color-form-field-success);
$validation-text-color-warning: var(--#{globals.$prefix}color-form-field-warning);
$validation-text-color-danger: var(--#{globals.$prefix}color-form-field-danger);
$helper-text-typography: global-tokens.$body-small-regular;
$helper-text-margin-top: global-tokens.$space-400;
$helper-text-color-default: var(--#{globals.$prefix}color-form-field-helper-text);
$helper-text-color-disabled: var(--#{globals.$prefix}color-disabled-content);

// Inline field form components – Checkbox, Radio, etc.
$inline-field-input-color-unchecked: tokens.$action-unselected-default;
$inline-field-input-color-unchecked-active: tokens.$action-unselected-active;
$inline-field-input-color-unchecked-hover: tokens.$action-unselected-hover;
$inline-field-input-color-checked: tokens.$action-selected-default;
$inline-field-input-color-checked-active: tokens.$action-selected-active;
$inline-field-input-color-checked-hover: tokens.$action-selected-hover;
$inline-field-input-outline-width: tokens.$border-width-200;
$inline-field-gap: global-tokens.$space-500;
$inline-field-margin-y: global-tokens.$space-500;
$inline-field-input-border-color-checked: var(--#{globals.$prefix}color-form-field-border-selected);
$inline-field-input-border-color-checked-disabled: var(--#{globals.$prefix}color-disabled-background);
$inline-field-input-border-width: global-tokens.$border-width-200;
$inline-field-input-background-color-checked: var(--#{globals.$prefix}color-selected-default);

// Box field form components – TextField, TextArea, etc.
$box-field-input-color-default: tokens.$text-primary-default;
$box-field-input-border-width: tokens.$border-width-100;
$box-field-input-border-style: tokens.$border-style-100;
$box-field-input-border-color-default: tokens.$border-primary-default;
$box-field-input-border-color-disabled: tokens.$border-primary-disabled;
$box-field-input-border-color-focus: tokens.$focus-default;

$box-field-input-border-radius: tokens.$radius-100;
$box-field-input-background: tokens.$background-basic;
$box-field-input-background-disabled: tokens.$background-cover;
$box-field-input-placeholder-color-default: tokens.$text-secondary-default;
$box-field-input-placeholder-color-disabled: tokens.$text-secondary-disabled;
$box-field-input-padding-x: tokens.$space-400;
$box-field-input-padding-y: calc(#{tokens.$space-400} - #{tokens.$border-width-100});
$box-field-input-width: 18rem;
$box-field-label-typography: tokens.$body-small-text-regular;
$box-field-label-margin-bottom: tokens.$space-300;
// Commented out to allow nice diff
// $box-field-input-color-default: tokens.$text-primary-default;
// $box-field-input-border-width: tokens.$border-width-100;
// $box-field-input-border-style: tokens.$border-style-100;
// $box-field-input-border-color-default: tokens.$border-primary-default;
// $box-field-input-border-color-disabled: tokens.$border-primary-disabled;
// $box-field-input-border-color-focus: tokens.$focus-default;
//
// $box-field-input-border-radius: tokens.$radius-100;
// $box-field-input-background: tokens.$background-basic;
// $box-field-input-background-disabled: tokens.$background-cover;
// $box-field-input-placeholder-color-default: tokens.$text-secondary-default;
// $box-field-input-placeholder-color-disabled: tokens.$text-secondary-disabled;
// $box-field-input-padding-x: tokens.$space-400;
// $box-field-input-padding-y: calc(#{tokens.$space-400} - #{tokens.$border-width-100});
// $box-field-input-width: 18rem;
// $box-field-label-typography: tokens.$body-small-text-regular;
// $box-field-label-margin-bottom: tokens.$space-300;

$validation-states: (
success: (
Expand All @@ -68,11 +74,11 @@ $validation-states: (
);

// Item variant
$item-gap: tokens.$space-400;
$item-border-radius: tokens.$radius-100;
$item-background-color-default: tokens.$background-interactive-default;
$item-background-color-hover: tokens.$background-interactive-hover;
$item-background-color-active: tokens.$background-interactive-active;
$item-label-checked-typography: tokens.$body-medium-text-bold;
$item-validation-text-typography: tokens.$body-small-text-regular;
$item-helper-text-typography: tokens.$body-small-text-regular;
$item-gap: global-tokens.$space-500;
$item-border-radius: global-tokens.$radius-200;
$item-background-color-default: var(--#{globals.$prefix}color-background-interactive-default);
$item-background-color-hover: var(--#{globals.$prefix}color-background-interactive-hover);
$item-background-color-active: var(--#{globals.$prefix}color-background-interactive-active);
$item-label-typography: global-tokens.$body-medium-semibold;
$item-validation-text-typography: global-tokens.$body-small-semibold;
$item-helper-text-typography: global-tokens.$body-small-regular;
23 changes: 17 additions & 6 deletions packages/web/src/scss/tools/_form-fields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
}

@mixin label-required() {
@include typography.generate(form-fields-theme.$label-required-typography);

content: '*';
margin-left: form-fields-theme.$label-required-margin-left;
color: form-fields-theme.$label-required-color;
Expand All @@ -33,7 +35,6 @@
display: block;
margin-top: form-fields-theme.$validation-text-margin-top;
list-style: none;
color: form-fields-theme.$validation-text-color-default;
}

@mixin validation-text-disabled() {
Expand All @@ -42,7 +43,7 @@

@mixin inline-field-root() {
display: inline-flex;
margin-block: form-fields-theme.$gap;
margin-block: form-fields-theme.$inline-field-margin-y;
cursor: cursors.$form-fields;
}

Expand Down Expand Up @@ -72,14 +73,24 @@

@mixin inline-field-input() {
appearance: none;
color: form-fields-theme.$inline-field-input-color-unchecked;
border: form-fields-theme.$inline-field-input-outline-width solid currentcolor;
border: form-fields-theme.$inline-field-input-border-width solid form-fields-theme.$input-border-color;
background-color: form-fields-theme.$input-background-color;
cursor: cursors.$form-fields;

&:focus-visible {
outline: 0;
box-shadow: form-fields-theme.$input-focus-shadow;
}

@media (hover: hover) {
&:hover {
background-color: form-fields-theme.$input-background-color-hover;
}
}

&:active {
background-color: form-fields-theme.$input-background-color-active;
}
}

@mixin box-field-input() {
Expand Down Expand Up @@ -206,8 +217,8 @@
@include typography.generate(form-fields-theme.$item-validation-text-typography);
}

@mixin item-label-checked() {
@include typography.generate(form-fields-theme.$item-label-checked-typography);
@mixin item-label() {
@include typography.generate(form-fields-theme.$item-label-typography);
}

@mixin helper-text() {
Expand Down
Loading
Loading