Skip to content

Commit

Permalink
Feat(web): Switch Checkbox component to v3 design tokens #DS-1447
Browse files Browse the repository at this point in the history
  • Loading branch information
@crishpeen
crishpeen committed Sep 5, 2024
1 parent 170f196 commit 68e4daa
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 63 deletions.
24 changes: 21 additions & 3 deletions packages/web/src/scss/components/Checkbox/_Checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use 'sass:map';
@use 'theme';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
Expand Down Expand Up @@ -81,13 +80,32 @@ $_field-name: 'Checkbox';
.Checkbox--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;
}

.Checkbox--disabled > .Checkbox__input:checked,
.Checkbox--disabled > .Checkbox__input:indeterminate {
border-color: form-fields-theme.$input-background-color-disabled;
}

.Checkbox--disabled > .Checkbox__input:indeterminate {
background-image: svg.escape(theme.$input-indeterminate-mark-disabled);
}

.Checkbox--disabled > .Checkbox__input:checked,
.Checkbox--disabled > .Checkbox__input:indeterminate,
.Checkbox > .Checkbox__input:disabled:checked {
background-image: svg.escape(theme.$input-checked-mark-disabled);
}

.Checkbox > .Checkbox__input:disabled:indeterminate {
background-image: svg.escape(theme.$input-indeterminate-mark-disabled);
}

.Checkbox > .Checkbox__input:disabled:checked,
.Checkbox > .Checkbox__input:disabled:indeterminate {
background-color: form-fields-theme.$input-color-disabled;
border-color: form-fields-theme.$input-background-color-disabled;
}

.Checkbox--item {
Expand Down
11 changes: 7 additions & 4 deletions packages/web/src/scss/components/Checkbox/_theme.scss
View file
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);
2 changes: 1 addition & 1 deletion packages/web/src/scss/components/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@forward 'Breadcrumbs';

// @forward 'Button';
// @forward 'Checkbox';
@forward 'Checkbox';
@forward 'Collapse';
@forward 'Container';
@forward 'Divider';
Expand Down
110 changes: 57 additions & 53 deletions packages/web/src/scss/theme/_form-fields.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
@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;
$gap: global-tokens.$space-500;
$input-typography: global-tokens.$body-3-regular;
$input-color-disabled: var(--#{globals.$prefix}color-disabled-text);
$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background);
$input-border-color-success: var(--#{globals.$prefix}color-border-interactive-success);
$input-border-color-warning: var(--#{globals.$prefix}color-border-interactive-warning);
$input-border-color-danger: var(--#{globals.$prefix}color-border-interactive-danger);
$input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border);
$input-focus-shadow: global-tokens.$focus;
$label-color-default: var(--#{globals.$prefix}color-text-primary);
$label-color-disabled: var(--#{globals.$prefix}color-disabled-text);
$label-required-margin-left: global-tokens.$space-200;
$label-required-color: var(--#{globals.$prefix}color-emotion-danger-content-basic);
$validation-text-typography: global-tokens.$body-4-semibold;
$validation-text-margin-top: global-tokens.$space-400;
$validation-text-color-disabled: var(--#{globals.$prefix}color-disabled-text);
$validation-text-color-success: var(--#{globals.$prefix}color-emotion-success-content-basic);
$validation-text-color-warning: var(--#{globals.$prefix}color-emotion-warning-content-basic);
$validation-text-color-danger: var(--#{globals.$prefix}color-emotion-danger-content-basic);
$helper-text-typography: global-tokens.$body-4-regular;
$helper-text-margin-top: global-tokens.$space-400;
$helper-text-color-default: var(--#{globals.$prefix}color-text-secondary);
$helper-text-color-disabled: var(--#{globals.$prefix}color-disabled-text);

// 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-input-color-unchecked: var(--#{globals.$prefix}color-border-interactive-default);
$inline-field-input-color-unchecked-active: var(--#{globals.$prefix}color-border-interactive-active);
$inline-field-input-color-unchecked-hover: var(--#{globals.$prefix}color-border-interactive-hover);
$inline-field-input-color-checked: var(--#{globals.$prefix}color-selected-default);
$inline-field-input-color-checked-active: var(--#{globals.$prefix}color-selected-active);
$inline-field-input-color-checked-hover: var(--#{globals.$prefix}color-selected-hover);
$inline-field-input-outline-width: global-tokens.$border-width-200;

// 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-color-default: var(--#{globals.$prefix}color-text-primary);
$box-field-input-border-width: global-tokens.$border-width-100;
$box-field-input-border-style: solid;
$box-field-input-border-color-default: var(--#{globals.$prefix}color-border-interactive-default);
$box-field-input-border-color-disabled: var(--#{globals.$prefix}color-border-disabled);
$box-field-input-focus-shadow: global-tokens.$focus;

$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-border-radius: global-tokens.$radius-300;
$box-field-input-background: var(--#{globals.$prefix}color-background-form-field-default);
$box-field-input-background-hover: var(--#{globals.$prefix}color-background-form-field-hover);
$box-field-input-background-active: var(--#{globals.$prefix}color-background-form-field-active);
$box-field-input-background-disabled: var(--#{globals.$prefix}color-disabled-background);
$box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-text-secondary);
$box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-text);
$box-field-input-padding-x: global-tokens.$space-600;
$box-field-input-padding-y: calc(#{global-tokens.$space-500} - #{global-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;
$box-field-label-typography: global-tokens.$body-4-semibold;
$box-field-label-margin-bottom: global-tokens.$space-300;

$validation-states: (
success: (
Expand All @@ -68,11 +72,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-700;
$item-border-radius: global-tokens.$radius-200;
$item-background-color-default: var(--#{globals.$prefix}color-background-form-field-default);
$item-background-color-hover: var(--#{globals.$prefix}color-background-form-field-hover);
$item-background-color-active: var(--#{globals.$prefix}color-background-form-field-active);
$item-label-checked-typography: global-tokens.$body-3-semibold;
$item-validation-text-typography: global-tokens.$body-4-semibold;
$item-helper-text-typography: global-tokens.$body-4-regular;
1 change: 0 additions & 1 deletion packages/web/src/scss/tools/_form-fields.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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 Down
1 change: 0 additions & 1 deletion tests/e2e/demo-components-compare.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ const IGNORED_TESTS: string[] = [
'Alert',
'Button',
'ButtonLink',
'Checkbox',
'Collapse',
'Dropdown',
'FieldGroup',
Expand Down
Binary file modified tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 68e4daa

Please sign in to comment.