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