diff --git a/packages/web/src/scss/components/Checkbox/_Checkbox.scss b/packages/web/src/scss/components/Checkbox/_Checkbox.scss index f3de871201..4613782361 100644 --- a/packages/web/src/scss/components/Checkbox/_Checkbox.scss +++ b/packages/web/src/scss/components/Checkbox/_Checkbox.scss @@ -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; @@ -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 { diff --git a/packages/web/src/scss/components/Checkbox/_theme.scss b/packages/web/src/scss/components/Checkbox/_theme.scss index 8d91d567ef..c235d2a59c 100644 --- a/packages/web/src/scss/components/Checkbox/_theme.scss +++ b/packages/web/src/scss/components/Checkbox/_theme.scss @@ -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,'); -$input-indeterminate-mark: url('data:image/svg+xml,'); +$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); diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index 553ffe6320..8872b44246 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -4,7 +4,7 @@ @forward 'Breadcrumbs'; // @forward 'Button'; -// @forward 'Checkbox'; +@forward 'Checkbox'; @forward 'Collapse'; @forward 'Container'; @forward 'Divider'; diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss index ee1711ce21..ca7beab09e 100644 --- a/packages/web/src/scss/theme/_form-fields.scss +++ b/packages/web/src/scss/theme/_form-fields.scss @@ -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: ( @@ -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; diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss index 925bc4770e..72110b8ef5 100644 --- a/packages/web/src/scss/tools/_form-fields.scss +++ b/packages/web/src/scss/tools/_form-fields.scss @@ -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() { diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index a5feac8f3b..144f1a1b83 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -10,7 +10,6 @@ const IGNORED_TESTS: string[] = [ 'Alert', 'Button', 'ButtonLink', - 'Checkbox', 'Collapse', 'Dropdown', 'FieldGroup', diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png index 1a622e326d..87d76aac02 100644 Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/checkbox-chromium-linux.png differ