@dnb/eufemia 10.13.0 → 10.15.0

package/es/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","innerRef","createRef","_id","id","render","_this$context","_this$context2","defaultProps","skeleton","context","getTranslation","FormRow","formElement","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_supportsSpacingProps"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/**\n * Web Checkbox Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    element: PropTypes.node,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    class: PropTypes.string,\n    innerRef: PropTypes.object,\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    element: 'input',\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_state_update: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Checkbox.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = props.innerRef || React.createRef()\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Checkbox.defaultProps,\n      { skeleton: this.context && this.context.skeleton },\n      this.context.getTranslation(this.props).Checkbox,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Checkbox\n    )\n\n    const {\n      value,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      size,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      element,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-checkbox',\n        status && `dnb-checkbox__status--${status_state}`,\n        size && `dnb-checkbox--${size}`,\n        label &&\n          `dnb-checkbox--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled,\n      checked,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const statusComp = (\n      <FormStatus\n        show={showStatus}\n        id={id + '-form-status'}\n        globalStatus={globalStatus}\n        label={label}\n        text_id={id + '-status'} // used for \"aria-describedby\"\n        width_selector={id + ', ' + id + '-label'}\n        text={status}\n        state={status_state}\n        no_animation={status_no_animation}\n        skeleton={skeleton}\n        {...status_props}\n      />\n    )\n\n    const Element = element || 'input'\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-checkbox__order\">\n          {label && (\n            <FormLabel\n              id={id + '-label'}\n              for_id={id}\n              text={label}\n              disabled={disabled}\n              skeleton={skeleton}\n              sr_only={label_sr_only}\n            />\n          )}\n\n          <span className=\"dnb-checkbox__inner\">\n            <AlignmentHelper />\n            {label_position === 'left' && statusComp}\n\n            <span className=\"dnb-checkbox__shell\">\n              <Element\n                id={id}\n                name={id}\n                type=\"checkbox\"\n                title={title}\n                className=\"dnb-checkbox__input\"\n                value={checked ? value || '' : ''}\n                disabled={isTrue(disabled)}\n                {...inputParams}\n                onChange={this.onChangeHandler}\n                onKeyDown={this.onKeyDownHandler}\n                ref={this._refInput}\n              />\n\n              <span\n                className={classnames(\n                  'dnb-checkbox__button',\n                  createSkeletonClass('shape', skeleton, this.context)\n                )}\n                aria-hidden\n              >\n                <span className=\"dnb-checkbox__focus\" />\n              </span>\n\n              <CheckIcon size={size} />\n            </span>\n          </span>\n\n          {suffix && (\n            <Suffix\n              className=\"dnb-checkbox__suffix\"\n              id={id + '-suffix'} // used for \"aria-describedby\"\n              context={props}\n            >\n              {suffix}\n            </Suffix>\n          )}\n        </span>\n\n        {(label_position === 'right' || !label_position) && statusComp}\n      </span>\n    )\n  }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\nCheckIcon.propTypes = {\n  size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n  size: 'default',\n}\n\nCheckIcon._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","pickFormElementProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","createRef","_id","id","componentDidMount","innerRef","render","_this$context","_this$context2","defaultProps","skeleton","context","getTranslation","FormRow","formElement","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/**\n * Web Checkbox Component\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  isTrue,\n  makeUniqueId,\n  extendPropsWithContextInClassComponent,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/**\n * The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    label_sr_only: PropTypes.bool,\n    title: PropTypes.string,\n    element: PropTypes.node,\n    checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n    readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    class: PropTypes.string,\n    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n    on_change: PropTypes.func,\n    on_state_update: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_position: null,\n    label_sr_only: null,\n    title: null,\n    element: 'input',\n    checked: null,\n    disabled: null,\n    id: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    value: null,\n    attributes: null,\n    readOnly: false,\n    skeleton: null,\n    class: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n    on_state_update: null,\n\n    innerRef: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.checked !== state._checked) {\n        state.checked = Checkbox.parseChecked(props.checked)\n      }\n    }\n    state._listenForPropChanges = true\n\n    if (state.checked !== state.__checked) {\n      dispatchCustomElementEvent({ props }, 'on_state_update', {\n        checked: state.checked,\n      })\n    }\n\n    state._checked = props.checked\n    state.__checked = state.checked\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  componentDidMount() {\n    if (this.props.innerRef) {\n      typeof this.props.innerRef === 'function'\n        ? this.props.innerRef(this._refInput.current)\n        : (this.props.innerRef.current = this._refInput.current)\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'enter':\n        this.onChangeHandler(event)\n        break\n    }\n  }\n\n  onChangeHandler = (event) => {\n    if (isTrue(this.props.readOnly)) {\n      return event.preventDefault()\n    }\n    const checked = !this.state.checked\n    this.setState({ checked, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n    // help firefox and safari to have an correct state after a click\n    if (this._refInput.current) {\n      this._refInput.current.focus()\n    }\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      Checkbox.defaultProps,\n      { skeleton: this.context && this.context.skeleton },\n      this.context.getTranslation(this.props).Checkbox,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.Checkbox\n    )\n\n    const {\n      value,\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      size,\n      label,\n      label_position,\n      label_sr_only,\n      title,\n      element,\n      disabled,\n      readOnly,\n      skeleton,\n      className,\n      class: _className,\n\n      id: _id, // eslint-disable-line\n      checked: _checked, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n      on_state_update, // eslint-disable-line\n      innerRef, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { checked } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const mainParams = {\n      className: classnames(\n        'dnb-checkbox',\n        status && `dnb-checkbox__status--${status_state}`,\n        size && `dnb-checkbox--${size}`,\n        label &&\n          `dnb-checkbox--label-position-${label_position || 'right'}`,\n        'dnb-form-component',\n        createSkeletonClass(null, skeleton),\n        createSpacingClasses(props),\n        className,\n        _className\n      ),\n    }\n\n    const inputParams = {\n      disabled,\n      checked,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, inputParams)\n\n    const statusComp = (\n      <FormStatus\n        show={showStatus}\n        id={id + '-form-status'}\n        globalStatus={globalStatus}\n        label={label}\n        text_id={id + '-status'} // used for \"aria-describedby\"\n        width_selector={id + ', ' + id + '-label'}\n        text={status}\n        state={status_state}\n        no_animation={status_no_animation}\n        skeleton={skeleton}\n        {...status_props}\n      />\n    )\n\n    const Element = element || 'input'\n\n    return (\n      <span {...mainParams}>\n        <span className=\"dnb-checkbox__order\">\n          {label && (\n            <FormLabel\n              id={id + '-label'}\n              for_id={id}\n              text={label}\n              disabled={disabled}\n              skeleton={skeleton}\n              sr_only={label_sr_only}\n            />\n          )}\n\n          <span className=\"dnb-checkbox__inner\">\n            <AlignmentHelper />\n            {label_position === 'left' && statusComp}\n\n            <span className=\"dnb-checkbox__shell\">\n              <Element\n                id={id}\n                name={id}\n                type=\"checkbox\"\n                title={title}\n                className=\"dnb-checkbox__input\"\n                value={checked ? value || '' : ''}\n                disabled={isTrue(disabled)}\n                {...inputParams}\n                onChange={this.onChangeHandler}\n                onKeyDown={this.onKeyDownHandler}\n                ref={this._refInput}\n              />\n\n              <span\n                className={classnames(\n                  'dnb-checkbox__button',\n                  createSkeletonClass('shape', skeleton, this.context)\n                )}\n                aria-hidden\n              >\n                <span className=\"dnb-checkbox__focus\" />\n              </span>\n\n              <CheckIcon size={size} />\n            </span>\n          </span>\n\n          {suffix && (\n            <Suffix\n              className=\"dnb-checkbox__suffix\"\n              id={id + '-suffix'} // used for \"aria-describedby\"\n              context={props}\n            >\n              {suffix}\n            </Suffix>\n          )}\n        </span>\n\n        {(label_position === 'right' || !label_position) && statusComp}\n      </span>\n    )\n  }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n  let vB = 16\n  if (size === 'large') {\n    vB = 24\n  }\n  return (\n    <svg\n      width={vB}\n      height={vB}\n      viewBox={`0 0 ${vB} ${vB}`}\n      fill=\"none\"\n      className=\"dnb-checkbox__gfx\"\n      aria-hidden\n      {...props}\n    >\n      <path\n        d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\nCheckIcon.propTypes = {\n  size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n  size: 'default',\n}\n\nCheckIcon._formElement = true\nCheckIcon._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/checkbox/style/dnb-checkbox.css

@@ -14,10 +14,43 @@
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-color-gfx-on: black;
+  --checkbox-color-gfx-off: black;
+  --checkbox-color-background-on: white;
+  --checkbox-color-background-off: white;
+  --checkbox-color-border-on: black;
+  --checkbox-color-border-off: black;
+  --checkbox-color-gfx--disabled: grey;
+  --checkbox-color-background-on--disabled: lightgrey;
+  --checkbox-color-background-off--disabled: lightgrey;
+  --checkbox-color-border-on--disabled: grey;
+  --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-background--active: lightgrey;
+  --checkbox-color-border--active: transparent;
+  --checkbox-color-gfx--hover: grey;
+  --checkbox-color-background--hover: white;
+  --checkbox-color-border-on--hover: grey;
+  --checkbox-color-border-off--hover: grey;
+  --checkbox-color-gfx--focus: grey;
+  --checkbox-color-background--focus: lightgrey;
+  --checkbox-color-gfx--error: lavenderblush;
+  --checkbox-color-gfx--error-contrast: red;
+  --checkbox-color-background-on--error: red;
+  --checkbox-color-background--error-contrast: lavenderblush;
+  --checkbox-color-border--error: red;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-checkbox__inner {
   display: inline-flex;
@@ -72,6 +105,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: calc(var(--checkbox-width--medium) - 0.5rem);
   height: calc(var(--checkbox-height--medium) - 0.5rem);
   shape-rendering: geometricprecision;
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-checkbox--large {
   line-height: var(--checkbox-height--large);
@@ -134,9 +168,104 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   vertical-align: top;
   margin-top: 0.5rem;
 }
+.dnb-checkbox__input:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__gfx {
+  opacity: 1;
+  transform: scale(1);
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on);
+  border-color: var(--checkbox-color-border-on);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+  opacity: 0;
+  transform: scale(0.8);
+  color: var(--checkbox-color-gfx-off);
+}
+.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-off);
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--disabled);
+  border-color: var(--checkbox-color-border-on--disabled);
+}
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--disabled);
+}
+.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--disabled);
+  background-color: var(--checkbox-color-background-off--disabled);
+}
+.dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--active);
+  border-color: var(--checkbox-color-border--active);
+}
+.dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx-on);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-off--hover);
+  background-color: var(--checkbox-color-background--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--hover);
+}
+.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border-color: var(--checkbox-color-border-on--hover);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--focus);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--focus);
+}
+.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
+  border: none;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
+  display: block;
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
+  border-color: var(--checkbox-color-border--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error);
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
+  border: none;
+  background-color: var(--checkbox-color-background--error-contrast);
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-on--error);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button::before {
   border-radius: 0;
+}
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
+  color: var(--skeleton-color);
 }

package/es/components/checkbox/style/dnb-checkbox.min.css

@@ -1 +1 @@
-:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-border-width:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-checkbox__button,.dnb-checkbox__focus{border-radius:.25rem;height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:.25rem;height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}
+:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-border-width:0.125rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#000;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-checkbox__button,.dnb-checkbox__focus{border-radius:.25rem;height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:.25rem;height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-checkbox__button{border-color:var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--focus-ring-width) + 0.0625rem);background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}

package/es/components/checkbox/style/dnb-checkbox.scss

@@ -14,6 +14,36 @@
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
   --checkbox-border-width: 0.125rem;
+  // Normal state
+  --checkbox-color-gfx-on: black;
+  --checkbox-color-gfx-off: black;
+  --checkbox-color-background-on: white;
+  --checkbox-color-background-off: white;
+  --checkbox-color-border-on: black;
+  --checkbox-color-border-off: black;
+  // Disabled state
+  --checkbox-color-gfx--disabled: grey;
+  --checkbox-color-background-on--disabled: lightgrey;
+  --checkbox-color-background-off--disabled: lightgrey;
+  --checkbox-color-border-on--disabled: grey;
+  --checkbox-color-border-off--disabled: grey;
+  // Active state
+  --checkbox-color-background--active: lightgrey;
+  --checkbox-color-border--active: transparent;
+  // Hover state
+  --checkbox-color-gfx--hover: grey;
+  --checkbox-color-background--hover: white;
+  --checkbox-color-border-on--hover: grey;
+  --checkbox-color-border-off--hover: grey;
+  // Focus state
+  --checkbox-color-gfx--focus: grey;
+  --checkbox-color-background--focus: lightgrey;
+  // Error state
+  --checkbox-color-gfx--error: lavenderblush;
+  --checkbox-color-gfx--error-contrast: red;
+  --checkbox-color-background-on--error: red;
+  --checkbox-color-background--error-contrast: lavenderblush;
+  --checkbox-color-border--error: red;
 
   display: inline-flex;
   flex-direction: column;
@@ -88,6 +118,9 @@
 
     // fill: currentColor; // old svg fix
     shape-rendering: geometricprecision;
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out;
   }
 
   &--large {
@@ -178,10 +211,176 @@
     }
   }
 
+  /*
+   * Color scheme
+   */
+
+  // stylelint-disable no-descending-specificity
+  // We prioritise categorisation and readability over specificity here
+
+  /** Normal state **/
+
+  // On
+  &__input:checked ~ &__gfx,
+  &__input[data-checked='true'] ~ &__gfx {
+    opacity: 1;
+    transform: scale(1);
+    color: var(--checkbox-color-gfx-on);
+  }
+  &__input:checked ~ &__button,
+  &__input[data-checked='true'] ~ &__button {
+    background-color: var(--checkbox-color-background-on);
+    border-color: var(--checkbox-color-border-on);
+  }
+
+  // Off
+  &__input:not(:checked):not([data-checked='true']) ~ &__gfx {
+    opacity: 0;
+    transform: scale(0.8);
+    // Needed during transition
+    color: var(--checkbox-color-gfx-off);
+  }
+  &__input:not(:checked):not([data-checked='true']) ~ &__button {
+    background-color: var(--checkbox-color-background-off);
+    border-color: var(--checkbox-color-border-off);
+  }
+
+  /** Disabled state **/
+
+  // On
+  &__input[disabled]:checked ~ &__button,
+  &__input[disabled][data-checked='true'] ~ &__button {
+    background-color: var(--checkbox-color-background-on--disabled);
+    border-color: var(--checkbox-color-border-on--disabled);
+  }
+  &__input[disabled]:checked ~ &__gfx,
+  &__input[disabled][data-checked='true'] ~ &__gfx {
+    color: var(--checkbox-color-gfx--disabled);
+  }
+
+  // Off
+  &__input[disabled]:not(:checked):not([data-checked='true']) ~ &__button {
+    border-color: var(--checkbox-color-border-off--disabled);
+    background-color: var(--checkbox-color-background-off--disabled);
+  }
+
+  /** Active state **/
+
+  // General
+  &__input:not([disabled]):active ~ &__button {
+    background-color: var(--checkbox-color-background--active);
+    border-color: var(--checkbox-color-border--active);
+  }
+
+  // On
+  &__input:not([disabled]):checked:active ~ &__gfx,
+  &__input:not([disabled])[data-checked='true']:active ~ &__gfx {
+    color: var(--checkbox-color-gfx-on);
+  }
+
+  /** Hover state **/
+
+  // General
+  &__input:not([disabled]):not(:focus):hover ~ &__button {
+    border-color: var(--checkbox-color-border-off--hover);
+    background-color: var(--checkbox-color-background--hover);
+  }
+  &__input:not([disabled]):not(:focus):hover ~ &__gfx {
+    color: var(--checkbox-color-gfx--hover);
+  }
+
+  // On
+  &__input:not([disabled]):not(:focus):checked:hover ~ &__button,
+  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
+    ~ &__button {
+    border-color: var(--checkbox-color-border-on--hover);
+  }
+
+  /** Focus state **/
+
+  // General
+  &__input:not([disabled]):focus ~ &__button {
+    html[data-whatinput='keyboard'] & {
+      border: none;
+      background-color: var(--checkbox-color-background--focus);
+    }
+  }
+  &__input:not([disabled]):focus ~ &__gfx {
+    html[data-whatinput='keyboard'] & {
+      color: var(--checkbox-color-gfx--focus);
+    }
+  }
+  &__input:not([disabled]):focus ~ &__button &__focus,
+  &__input:not([disabled]):active ~ &__button &__focus {
+    display: block;
+  }
+
+  /** Error state **/
+
+  // General
+  &__status--error &__input:not([disabled]):not(:active) ~ &__button {
+    border: none;
+  }
+  &__status--error
+    &__input:not([disabled]):not(:active)
+    ~ &__button
+    &__focus {
+    display: block;
+    @include fakeBorder(
+      var(--checkbox-color-border--error),
+      var(--focus-ring-width)
+    );
+  }
+  &__status--error &__input:not([disabled]):hover ~ &__button {
+    &[data-checked='true'] {
+      // Needed during transition
+      border-color: var(--checkbox-color-border--error);
+    }
+    background-color: var(--checkbox-color-background--error-contrast);
+  }
+  &__status--error &__input:not([disabled]):hover ~ &__gfx {
+    color: var(--checkbox-color-gfx--error-contrast);
+  }
+  &__status--error
+    &__input:not([disabled]):not(:active):not(:hover)
+    ~ &__gfx {
+    color: var(--checkbox-color-gfx--error);
+  }
+  &__status--error &__input:not([disabled]):focus ~ &__button,
+  &__status--error &__input:not([disabled]):focus:hover ~ &__button {
+    html[data-whatinput='keyboard'] & {
+      border: none;
+      background-color: var(--checkbox-color-background--error-contrast);
+      @include fakeBorder(
+        var(--checkbox-color-border--error),
+        calc(var(--focus-ring-width) + 0.0625rem)
+      );
+    }
+  }
+  &__status--error &__input:not([disabled]):focus:hover ~ &__gfx {
+    html[data-whatinput='keyboard'] & {
+      color: var(--checkbox-color-gfx--error-contrast);
+    }
+  }
+
+  // On
+  &__status--error
+    &__input:not([disabled]):not(:active):not(:hover):checked
+    ~ &__button,
+  &__status--error
+    &__input:not([disabled]):not(:active):not(:hover)[data-checked='true']
+    ~ &__button {
+    background-color: var(--checkbox-color-background-on--error);
+  }
+
   &.dnb-skeleton &__input[disabled] ~ &__button {
     &::before {
       border-radius: 0;
     }
     border-color: var(--skeleton-color);
   }
+  &.dnb-skeleton &__input[disabled] ~ &__gfx {
+    color: var(--skeleton-color);
+  }
+  // stylelint-enable no-descending-specificity
 }

package/es/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.css

@@ -0,0 +1,32 @@
+/*
+* Checkbox theme for Sbanken
+*
+*/
+.dnb-checkbox {
+  --checkbox-color-gfx-on: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-background-on: var(--sb-color-white);
+  --checkbox-color-background-off: var(--sb-color-white);
+  --checkbox-color-border-on: var(--sb-color-violet);
+  --checkbox-color-border-off: var(--sb-color-violet);
+  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background--active: var(--sb-color-white);
+  --checkbox-color-border--active: var(--sb-color-gray);
+  --checkbox-color-gfx--hover: var(--sb-color-violet-light);
+  --checkbox-color-background--hover: var(--sb-color-violet-light-3);
+  --checkbox-color-border-on--hover: var(--sb-color-violet);
+  --checkbox-color-border-off--hover: var(--sb-color-violet);
+  --checkbox-color-gfx--focus: var(--focus-ring-color);
+  --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  --checkbox-color-gfx--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
+  --checkbox-color-background-on--error: var(--sb-color-white);
+  --checkbox-color-background--error-contrast: var(
+    --sb-color-magenta-light-2
+  );
+  --checkbox-color-border--error: var(--sb-color-magenta);
+}

package/es/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.min.css

@@ -0,0 +1,3 @@
+.dnb-checkbox{--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-violet-light);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
+    --sb-color-magenta-light-2
+  );--checkbox-color-border--error:var(--sb-color-magenta)}

package/es/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss

@@ -0,0 +1,39 @@
+/*
+* Checkbox theme for Sbanken
+*
+*/
+
+.dnb-checkbox {
+  // Normal state
+  --checkbox-color-gfx-on: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-background-on: var(--sb-color-white);
+  --checkbox-color-background-off: var(--sb-color-white);
+  --checkbox-color-border-on: var(--sb-color-violet);
+  --checkbox-color-border-off: var(--sb-color-violet);
+  // Disabled state
+  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  // Active state
+  --checkbox-color-background--active: var(--sb-color-white);
+  --checkbox-color-border--active: var(--sb-color-gray);
+  // Hover state
+  --checkbox-color-gfx--hover: var(--sb-color-violet-light);
+  --checkbox-color-background--hover: var(--sb-color-violet-light-3);
+  --checkbox-color-border-on--hover: var(--sb-color-violet);
+  --checkbox-color-border-off--hover: var(--sb-color-violet);
+  // Focus state
+  --checkbox-color-gfx--focus: var(--focus-ring-color);
+  --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  // Error state
+  --checkbox-color-gfx--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
+  --checkbox-color-background-on--error: var(--sb-color-white);
+  --checkbox-color-background--error-contrast: var(
+    --sb-color-magenta-light-2
+  );
+  --checkbox-color-border--error: var(--sb-color-magenta);
+}