npm - @i-cell/ids-styles - Versions diffs - 0.0.2 → 0.0.3 - Mend

@i-cell/ids-styles 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/dist/accordion/accordion.css +69 -68
package/dist/accordion/accordion.min.css +1 -1
package/dist/accordion/accordion.plugin.js +69 -73
package/dist/action-item/action-item.css +67 -55
package/dist/action-item/action-item.min.css +1 -1
package/dist/action-item/action-item.plugin.js +67 -73
package/dist/action-panel/action-panel.css +29 -28
package/dist/action-panel/action-panel.min.css +1 -1
package/dist/action-panel/action-panel.plugin.js +35 -39
package/dist/avatar/avatar.css +77 -154
package/dist/avatar/avatar.min.css +1 -1
package/dist/avatar/avatar.plugin.js +77 -148
package/dist/button/button.css +134 -178
package/dist/button/button.min.css +1 -1
package/dist/button/button.plugin.js +141 -179
package/dist/card/card.css +137 -184
package/dist/card/card.min.css +1 -1
package/dist/card/card.plugin.js +137 -189
package/dist/checkbox/checkbox.css +554 -0
package/dist/checkbox/checkbox.min.css +1 -0
package/dist/checkbox/checkbox.plugin.js +539 -0
package/dist/components.css +1566 -1326
package/dist/components.min.css +1 -1
package/dist/components.plugin.js +1511 -1374
package/dist/dialog/dialog.css +99 -95
package/dist/dialog/dialog.min.css +1 -1
package/dist/dialog/dialog.plugin.js +103 -102
package/dist/divider/divider.css +21 -23
package/dist/divider/divider.min.css +1 -1
package/dist/divider/divider.plugin.js +22 -30
package/dist/form-elements/message/message.css +165 -0
package/dist/form-elements/message/message.min.css +1 -0
package/dist/form-elements/message/message.plugin.js +116 -0
package/dist/form-elements/required-marker/required-marker.css +6 -0
package/dist/form-elements/required-marker/required-marker.min.css +1 -0
package/dist/form-elements/required-marker/required-marker.plugin.js +15 -0
package/dist/icon-button/icon-button.css +101 -124
package/dist/icon-button/icon-button.min.css +1 -1
package/dist/icon-button/icon-button.plugin.js +108 -125
package/dist/tag/tag.css +104 -417
package/dist/tag/tag.min.css +1 -1
package/dist/tag/tag.plugin.js +111 -418
package/package.json +6 -4

package/dist/checkbox/checkbox.plugin.js ADDED Viewed

@@ -0,0 +1,539 @@
+// Tailwind CSS plugin for the checkbox component in the i-Cell Design System
+module.exports = function CheckboxPlugin() {
+  return function ({ addComponents }) {
+    const cssObj = {
+      '.ids-checkbox': { display: 'inline-flex', alignSelf: 'stretch', alignItems: 'flex-start' },
+      '.ids-checkbox .ids-checkbox__input-wrapper': {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      '.ids-checkbox .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { position: 'absolute', zIndex: 1 },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]': {
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        flexShrink: 0,
+        borderStyle: 'solid',
+      },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]:focus': { outlineOffset: '3px', outlineStyle: 'solid' },
+      '.ids-checkbox .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': { position: 'absolute' },
+      '.ids-checkbox .ids-checkbox__label-wrapper': { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: '1 0 0' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container': { textAlign: 'start' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': { fontStyle: 'normal' },
+      '.ids-checkbox .ids-checkbox__label-wrapper .ids-checkbox__message-container': { width: '100%' },
+      '.ids-checkbox.ids-checkbox-compact': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-compact) var(--ids-comp-checkbox-container-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-compact) - var(--ids-comp-checkbox-input-size-touchtarget-height-compact))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-compact) - var(--ids-comp-checkbox-input-size-touchtarget-width-compact))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-compact)',
+        height: 'var(--ids-comp-checkbox-input-size-height-compact)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-compact)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper': {
+        padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-compact) var(--ids-comp-checkbox-label-group-size-padding-x-compact)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-compact .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-compact)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-compact)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-compact)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-compact)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-compact)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable': {
+        padding:
+          'var(--ids-comp-checkbox-container-size-padding-y-comfortable) var(--ids-comp-checkbox-container-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-comfortable) - var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-comfortable)',
+        height: 'var(--ids-comp-checkbox-input-size-height-comfortable)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-comfortable)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper': {
+        padding:
+          'var(--ids-comp-checkbox-label-group-size-padding-y-comfortable) var(--ids-comp-checkbox-label-group-size-padding-x-comfortable)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-comfortable .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-comfortable)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-comfortable)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-comfortable)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-comfortable)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-comfortable)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-spacious) var(--ids-comp-checkbox-container-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-height-spacious))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-spacious) - var(--ids-comp-checkbox-input-size-touchtarget-width-spacious))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-spacious)',
+        height: 'var(--ids-comp-checkbox-input-size-height-spacious)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-spacious)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper': {
+        padding:
+          'var(--ids-comp-checkbox-label-group-size-padding-y-spacious) var(--ids-comp-checkbox-label-group-size-padding-x-spacious)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-spacious .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-spacious)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-spacious)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-spacious)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-spacious)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-spacious)',
+      },
+      '.ids-checkbox.ids-checkbox-dense': {
+        padding: 'var(--ids-comp-checkbox-container-size-padding-y-dense) var(--ids-comp-checkbox-container-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-container-size-gap-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__touch-target': {
+        top: 'calc((var(--ids-comp-checkbox-input-size-height-dense) - var(--ids-comp-checkbox-input-size-touchtarget-height-dense))/2)',
+        left: 'calc((var(--ids-comp-checkbox-input-size-width-dense) - var(--ids-comp-checkbox-input-size-touchtarget-width-dense))/2)',
+        height: 'var(--ids-comp-checkbox-input-size-touchtarget-height-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-touchtarget-width-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]': {
+        width: 'var(--ids-comp-checkbox-input-size-width-dense)',
+        height: 'var(--ids-comp-checkbox-input-size-height-dense)',
+        borderRadius: 'var(--ids-comp-checkbox-input-size-border-radius-dense)',
+        borderWidth: 'var(--ids-comp-checkbox-input-size-border-width-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper input[type=checkbox]:focus': {
+        outlineWidth: 'var(--ids-comp-checkbox-focused-outline-outline-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__input-wrapper .ids-checkbox__icon': {
+        height: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+        width: 'var(--ids-comp-checkbox-input-size-icon-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper': {
+        padding: 'var(--ids-comp-checkbox-label-group-size-padding-y-dense) var(--ids-comp-checkbox-label-group-size-padding-x-dense)',
+        gap: 'var(--ids-comp-checkbox-label-group-size-gap-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-dense .ids-checkbox__label-wrapper .ids-checkbox__label-container': {
+        fontFamily: 'var(--ids-comp-checkbox-label-typography-font-family-dense)',
+        fontWeight: 'var(--ids-comp-checkbox-label-typography-font-weight-dense)',
+        letterSpacing: 'var(--ids-comp-checkbox-label-typography-letter-spacing-dense)',
+        fontSize: 'var(--ids-comp-checkbox-label-typography-font-size-dense)',
+        lineHeight: 'var(--ids-comp-checkbox-label-typography-line-height-dense)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-light-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-default)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-hovered)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-pressed)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-focused)' },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-light .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-light-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-light.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-light-disabled)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-dark-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-default)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-hovered)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-pressed)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-focused)' },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-dark .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-dark-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-dark.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-dark-disabled)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-default)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-hovered)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-pressed)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-focused)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
+        outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:disabled': {
+        borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-disabled)',
+        backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-disabled)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+          outlineColor: 'var(--ids-comp-checkbox-input-selected-color-focused-outline-surface-focused)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:disabled,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:disabled':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-disabled)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-disabled)',
+          color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-disabled)',
+        },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-default)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-hovered)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-pressed)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-focused)' },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:hover': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-hovered)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:active': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-pressed)',
+      },
+      '.ids-checkbox.ids-checkbox-surface .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label:focus': {
+        color: 'var(--ids-comp-checkbox-label-color-fg-surface-focused)',
+      },
+      '.ids-checkbox.ids-checkbox-surface.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label':
+        { color: 'var(--ids-comp-checkbox-label-color-fg-surface-disabled)' },
+      '.ids-checkbox.ids-checkbox-disabled': { opacity: 'var(--ids-comp-checkbox-disabled)' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'not-allowed' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'not-allowed' },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
+        cursor: 'not-allowed',
+      },
+      '.ids-checkbox.ids-checkbox-disabled .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        cursor: 'not-allowed',
+      },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper .ids-checkbox__touch-target': { cursor: 'pointer' },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]': { cursor: 'pointer' },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__input-wrapper input[type=checkbox]+.ids-checkbox__icon': {
+        cursor: 'pointer',
+      },
+      '.ids-checkbox:not(.ids-checkbox-disabled) .ids-checkbox__label-wrapper .ids-checkbox__label-container .ids-checkbox__label': {
+        cursor: 'pointer',
+      },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-light-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-light-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-light-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-light .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-light-error-focused)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-dark-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-dark-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-dark-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-dark .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-dark-error-focused)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-unselected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-unselected-color-bg-surface-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled),.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-default)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-default)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-hovered)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-hovered)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-pressed)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-pressed)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus':
+        {
+          borderColor: 'var(--ids-comp-checkbox-input-selected-color-border-surface-error-focused)',
+          backgroundColor: 'var(--ids-comp-checkbox-input-selected-color-bg-surface-focused)',
+        },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled)+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled)+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-default)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):hover+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):hover+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-hovered)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):active+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):active+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-pressed)' },
+      '.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ng-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:checked:not(:disabled):focus+.ids-checkbox__icon,.ids-checkbox.ids-checkbox-invalid.ids-checkbox.ids-checkbox-surface .ids-checkbox__input-wrapper input[type=checkbox]:indeterminate:not(:disabled):focus+.ids-checkbox__icon':
+        { color: 'var(--ids-comp-checkbox-input-selected-color-fg-icon-surface-error-focused)' },
+    };
+    addComponents(cssObj);
+  };
+};