diff --git a/packages/web/src/scss/components/Checkbox/_Checkbox.scss b/packages/web/src/scss/components/Checkbox/_Checkbox.scss index f3de871201..69f94ca0e7 100644 --- a/packages/web/src/scss/components/Checkbox/_Checkbox.scss +++ b/packages/web/src/scss/components/Checkbox/_Checkbox.scss @@ -1,4 +1,6 @@ -@use 'sass:map'; +// 1. 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; @@ -37,17 +39,28 @@ $_field-name: 'Checkbox'; background-position: center; background-size: contain; background-repeat: no-repeat; + background-color: form-fields-theme.$inline-field-input-background-color; + + &:hover { + background-color: form-fields-theme.$inline-field-input-background-color-hover; + } + + &:active { + background-color: form-fields-theme.$inline-field-input-background-color-active; + } + + &:checked, + &:indeterminate { + border-color: form-fields-theme.$inline-field-input-border-color; + background-color: form-fields-theme.$inline-field-input-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; } } @@ -81,13 +94,31 @@ $_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-border-color-disabled; } .Checkbox--disabled > .Checkbox__input:checked, +.Checkbox > .Checkbox__input:disabled:checked { + background-image: svg.escape(theme.$input-checked-mark-disabled); +} + +// stylelint-disable no-descending-specificity -- We allow specificity order, because we don't want to set the background-image with SVG twice .Checkbox--disabled > .Checkbox__input:indeterminate, +.Checkbox > .Checkbox__input:disabled:indeterminate { + background-image: svg.escape(theme.$input-indeterminate-mark-disabled); +} +// stylelint-enable no-descending-specificity + .Checkbox > .Checkbox__input:disabled:checked, .Checkbox > .Checkbox__input:disabled:indeterminate { - background-color: form-fields-theme.$input-color-disabled; + border-color: form-fields-theme.$input-border-color-disabled; } .Checkbox--item { @@ -100,10 +131,16 @@ $_field-name: 'Checkbox'; @include form-fields-tools.item-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(); +.Checkbox--item .Checkbox__label { + @include form-fields-tools.item-label(); +} + +// stylelint-disable selector-max-specificity -- We need to override the default styles, but not in disabled state +.Checkbox--item:not(.Checkbox--disabled) .Checkbox__input:hover:not(:checked), +.Checkbox--item:not(.Checkbox--disabled) .Checkbox__input:active:not(:checked) { + background-color: form-fields-theme.$inline-field-input-background-color; } +// stylelint-enable selector-max-specificity .Checkbox--item .Checkbox__validationText { @include form-fields-tools.item-validation-text(); @@ -113,6 +150,7 @@ $_field-name: 'Checkbox'; @include form-fields-tools.item-helper-text(); } +// 1. .Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__validationText, .Checkbox--item:not(.Checkbox--disabled):active .Checkbox__validationText, .Checkbox--item:not(.Checkbox--disabled):hover .Checkbox__helperText, 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 0648ac9bb8..6c4eeef158 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -3,8 +3,7 @@ @forward 'Alert'; @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..ddb0fce77c 100644 --- a/packages/web/src/scss/theme/_form-fields.scss +++ b/packages/web/src/scss/theme/_form-fields.scss @@ -1,56 +1,65 @@ -@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-medium-regular; +$input-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$input-background-color-disabled: var(--#{globals.$prefix}color-disabled-background); +$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: $input-background-color-disabled; +$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-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; +$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-input-color-unchecked: var(--#{globals.$prefix}color-form-field-border-default); +$inline-field-input-color-unchecked-hover: var(--#{globals.$prefix}color-form-field-border-hover); +$inline-field-input-color-unchecked-active: var(--#{globals.$prefix}color-form-field-border-active); +$inline-field-input-color-checked: var(--#{globals.$prefix}color-selected-default); +$inline-field-input-color-checked-hover: var(--#{globals.$prefix}color-selected-hover); +$inline-field-input-color-checked-active: var(--#{globals.$prefix}color-selected-active); +$inline-field-input-outline-width: global-tokens.$border-width-200; +$inline-field-input-border-color: var(--#{globals.$prefix}color-form-field-border-selected); +$inline-field-input-background-color: var(--#{globals.$prefix}color-form-field-default); +$inline-field-input-background-color-hover: var(--#{globals.$prefix}color-form-field-hover); +$inline-field-input-background-color-active: var(--#{globals.$prefix}color-form-field-active); // 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-form-field-content); +$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-form-field-border-default); +$box-field-input-border-color-disabled: var(--#{globals.$prefix}color-disabled-border); +$box-field-input-border-color-focus: var(--#{globals.$prefix}color-border-focus); +$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-form-field-default); +$box-field-input-background-hover: var(--#{globals.$prefix}color-form-field-hover); +$box-field-input-background-active: var(--#{globals.$prefix}color-form-field-active); +$box-field-input-background-disabled: var(--#{globals.$prefix}color-disabled-background); +$box-field-input-placeholder-color-default: var(--#{globals.$prefix}color-form-field-placeholder); +$box-field-input-placeholder-color-disabled: var(--#{globals.$prefix}color-disabled-content); +$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-small-semibold; +$box-field-label-margin-bottom: global-tokens.$space-300; $validation-states: ( success: ( @@ -68,11 +77,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; diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss index 925bc4770e..e8d16e51b2 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() { @@ -206,8 +205,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() { diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts index a4c8ebdeed..9ae27dc1c5 100644 --- a/tests/e2e/demo-components-compare.spec.ts +++ b/tests/e2e/demo-components-compare.spec.ts @@ -7,7 +7,6 @@ import { formatPackageName, getServerUrl, takeScreenshot, waitForPageLoad } from // Tests that are intentionally broken, but will be fixed in the future const IGNORED_TESTS: string[] = [ 'Accordion', - 'Checkbox', 'Dropdown', 'FieldGroup', 'FileUploader', @@ -97,7 +96,7 @@ const testConfigs: TestConfig[] = [ ]; // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet. -if (!isTestingEnvironment()) { +if (isTestingEnvironment()) { testConfigs.push({ componentsDir: '/components', packageDir: 'packages/web-twig', 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..0ca929b3b0 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