Skip to content

Latest commit

 

History

History
1689 lines (1295 loc) · 39.6 KB

sass.md

File metadata and controls

1689 lines (1295 loc) · 39.6 KB
Raw

Sass API

Mark Description
✅ Public functions, mixins, placeholders, and variables
❌ Private items - not supported outside package's build
⚠️ Deprecated items - may not be available in future releases

@carbon/themes

✅carbon--theme [mixin]

Define theme variables from a map of tokens

Source code 
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
  $interactive-01: map-get($theme, 'interactive-01') !global;
  $interactive-02: map-get($theme, 'interactive-02') !global;
  $interactive-03: map-get($theme, 'interactive-03') !global;
  $interactive-04: map-get($theme, 'interactive-04') !global;
  $ui-background: map-get($theme, 'ui-background') !global;
  $ui-01: map-get($theme, 'ui-01') !global;
  $ui-02: map-get($theme, 'ui-02') !global;
  $ui-03: map-get($theme, 'ui-03') !global;
  $ui-04: map-get($theme, 'ui-04') !global;
  $ui-05: map-get($theme, 'ui-05') !global;
  $text-01: map-get($theme, 'text-01') !global;
  $text-02: map-get($theme, 'text-02') !global;
  $text-03: map-get($theme, 'text-03') !global;
  $text-04: map-get($theme, 'text-04') !global;
  $icon-01: map-get($theme, 'icon-01') !global;
  $icon-02: map-get($theme, 'icon-02') !global;
  $icon-03: map-get($theme, 'icon-03') !global;
  $link-01: map-get($theme, 'link-01') !global;
  $field-01: map-get($theme, 'field-01') !global;
  $field-02: map-get($theme, 'field-02') !global;
  $inverse-01: map-get($theme, 'inverse-01') !global;
  $inverse-02: map-get($theme, 'inverse-02') !global;
  $support-01: map-get($theme, 'support-01') !global;
  $support-02: map-get($theme, 'support-02') !global;
  $support-03: map-get($theme, 'support-03') !global;
  $support-04: map-get($theme, 'support-04') !global;
  $inverse-support-01: map-get($theme, 'inverse-support-01') !global;
  $inverse-support-02: map-get($theme, 'inverse-support-02') !global;
  $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
  $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
  $overlay-01: map-get($theme, 'overlay-01') !global;
  $focus: map-get($theme, 'focus') !global;
  $hover-primary: map-get($theme, 'hover-primary') !global;
  $active-primary: map-get($theme, 'active-primary') !global;
  $hover-primary-text: map-get($theme, 'hover-primary-text') !global;
  $hover-secondary: map-get($theme, 'hover-secondary') !global;
  $active-secondary: map-get($theme, 'active-secondary') !global;
  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
  $active-tertiary: map-get($theme, 'active-tertiary') !global;
  $hover-ui: map-get($theme, 'hover-ui') !global;
  $active-ui: map-get($theme, 'active-ui') !global;
  $selected-ui: map-get($theme, 'selected-ui') !global;
  $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
  $hover-danger: map-get($theme, 'hover-danger') !global;
  $active-danger: map-get($theme, 'active-danger') !global;
  $hover-row: map-get($theme, 'hover-row') !global;
  $visited-link: map-get($theme, 'visited-link') !global;
  $disabled-01: map-get($theme, 'disabled-01') !global;
  $disabled-02: map-get($theme, 'disabled-02') !global;
  $disabled-03: map-get($theme, 'disabled-03') !global;
  $highlight: map-get($theme, 'highlight') !global;
  $skeleton-01: map-get($theme, 'skeleton-01') !global;
  $skeleton-02: map-get($theme, 'skeleton-02') !global;
  $brand-01: map-get($theme, 'brand-01') !global;
  $brand-02: map-get($theme, 'brand-02') !global;
  $brand-03: map-get($theme, 'brand-03') !global;
  $active-01: map-get($theme, 'active-01') !global;
  $hover-field: map-get($theme, 'hover-field') !global;

  @if $emit-custom-properties == true {
    --interactive-01: #{map-get($theme, 'interactive-01')};
    --interactive-02: #{map-get($theme, 'interactive-02')};
    --interactive-03: #{map-get($theme, 'interactive-03')};
    --interactive-04: #{map-get($theme, 'interactive-04')};
    --ui-background: #{map-get($theme, 'ui-background')};
    --ui-01: #{map-get($theme, 'ui-01')};
    --ui-02: #{map-get($theme, 'ui-02')};
    --ui-03: #{map-get($theme, 'ui-03')};
    --ui-04: #{map-get($theme, 'ui-04')};
    --ui-05: #{map-get($theme, 'ui-05')};
    --text-01: #{map-get($theme, 'text-01')};
    --text-02: #{map-get($theme, 'text-02')};
    --text-03: #{map-get($theme, 'text-03')};
    --text-04: #{map-get($theme, 'text-04')};
    --icon-01: #{map-get($theme, 'icon-01')};
    --icon-02: #{map-get($theme, 'icon-02')};
    --icon-03: #{map-get($theme, 'icon-03')};
    --link-01: #{map-get($theme, 'link-01')};
    --field-01: #{map-get($theme, 'field-01')};
    --field-02: #{map-get($theme, 'field-02')};
    --inverse-01: #{map-get($theme, 'inverse-01')};
    --inverse-02: #{map-get($theme, 'inverse-02')};
    --support-01: #{map-get($theme, 'support-01')};
    --support-02: #{map-get($theme, 'support-02')};
    --support-03: #{map-get($theme, 'support-03')};
    --support-04: #{map-get($theme, 'support-04')};
    --inverse-support-01: #{map-get($theme, 'inverse-support-01')};
    --inverse-support-02: #{map-get($theme, 'inverse-support-02')};
    --inverse-support-03: #{map-get($theme, 'inverse-support-03')};
    --inverse-support-04: #{map-get($theme, 'inverse-support-04')};
    --overlay-01: #{map-get($theme, 'overlay-01')};
    --focus: #{map-get($theme, 'focus')};
    --hover-primary: #{map-get($theme, 'hover-primary')};
    --active-primary: #{map-get($theme, 'active-primary')};
    --hover-primary-text: #{map-get($theme, 'hover-primary-text')};
    --hover-secondary: #{map-get($theme, 'hover-secondary')};
    --active-secondary: #{map-get($theme, 'active-secondary')};
    --hover-tertiary: #{map-get($theme, 'hover-tertiary')};
    --active-tertiary: #{map-get($theme, 'active-tertiary')};
    --hover-ui: #{map-get($theme, 'hover-ui')};
    --active-ui: #{map-get($theme, 'active-ui')};
    --selected-ui: #{map-get($theme, 'selected-ui')};
    --hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
    --hover-danger: #{map-get($theme, 'hover-danger')};
    --active-danger: #{map-get($theme, 'active-danger')};
    --hover-row: #{map-get($theme, 'hover-row')};
    --visited-link: #{map-get($theme, 'visited-link')};
    --disabled-01: #{map-get($theme, 'disabled-01')};
    --disabled-02: #{map-get($theme, 'disabled-02')};
    --disabled-03: #{map-get($theme, 'disabled-03')};
    --highlight: #{map-get($theme, 'highlight')};
    --skeleton-01: #{map-get($theme, 'skeleton-01')};
    --skeleton-02: #{map-get($theme, 'skeleton-02')};
    --brand-01: #{map-get($theme, 'brand-01')};
    --brand-02: #{map-get($theme, 'brand-02')};
    --brand-03: #{map-get($theme, 'brand-03')};
    --active-01: #{map-get($theme, 'active-01')};
    --hover-field: #{map-get($theme, 'hover-field')};
  }

  @content;
  // Reset to default theme after apply in content
  @if $theme != $carbon--theme {
    @include carbon--theme();
  }
}
  • Parameters:
Name Description Type Default value
$theme Map of theme tokens Map $carbon--theme
$emit-custom-properties Output CSS Custom Properties for theme tokens Bool false

Example:

Example code 
// Default usage
@include carbon--theme();

// Alternate styling (not white theme)
@include carbon--theme($carbon--theme--g90) {
  // declarations...
}

// Inline styling
@include carbon--theme($carbon--theme--g90) {
  .my-dark-theme {
    // declarations...
  }
}

✅carbon--theme--white [variable]

Carbon's white color theme

Source code 
$carbon--theme--white: (
  interactive-01: #0062ff,
  interactive-02: #171717,
  interactive-03: #0062ff,
  interactive-04: #0062ff,
  ui-background: #ffffff,
  ui-01: #f3f3f3,
  ui-02: #ffffff,
  ui-03: #dcdcdc,
  ui-04: #8c8c8c,
  ui-05: #171717,
  text-01: #171717,
  text-02: #565656,
  text-03: #8c8c8c,
  text-04: #ffffff,
  icon-01: #171717,
  icon-02: #565656,
  icon-03: #ffffff,
  link-01: #0062ff,
  field-01: #f3f3f3,
  field-02: #ffffff,
  inverse-01: #ffffff,
  inverse-02: #3d3d3d,
  support-01: #da1e28,
  support-02: #24a148,
  support-03: #fdd13a,
  support-04: #054ada,
  inverse-support-01: #fb4b53,
  inverse-support-02: #3dbb61,
  inverse-support-03: #fdd13a,
  inverse-support-04: #408bfc,
  overlay-01: rgba(23, 23, 23, 0.5),
  focus: #0062ff,
  hover-primary: #0353e9,
  active-primary: #0530ad,
  hover-primary-text: #054ada,
  hover-secondary: #4c4c4c,
  active-secondary: #6f6f6f,
  hover-tertiary: #0353e9,
  active-tertiary: #0530ad,
  hover-ui: #e5e5e5,
  active-ui: #bebebe,
  selected-ui: #dcdcdc,
  hover-selected-ui: #cacaca,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #e5e5e5,
  visited-link: #8a3ffc,
  disabled-01: #f3f3f3,
  disabled-02: #bebebe,
  disabled-03: #8c8c8c,
  highlight: #c9deff,
  skeleton-01: #e5e5e5,
  skeleton-02: #bebebe,
  brand-01: #0062ff,
  brand-02: #171717,
  brand-03: #0062ff,
  active-01: #bebebe,
  hover-field: #e5e5e5,
);

✅carbon--theme--g10 [variable]

Carbon's g10 color theme

Source code 
$carbon--theme--g10: (
  interactive-01: #0062ff,
  interactive-02: #171717,
  interactive-03: #0062ff,
  interactive-04: #0062ff,
  ui-background: #f3f3f3,
  ui-01: #ffffff,
  ui-02: #f3f3f3,
  ui-03: #dcdcdc,
  ui-04: #8c8c8c,
  ui-05: #171717,
  text-01: #171717,
  text-02: #565656,
  text-03: #8c8c8c,
  text-04: #ffffff,
  icon-01: #171717,
  icon-02: #565656,
  icon-03: #ffffff,
  link-01: #0062ff,
  field-01: #ffffff,
  field-02: #f3f3f3,
  inverse-01: #ffffff,
  inverse-02: #3d3d3d,
  support-01: #da1e28,
  support-02: #24a148,
  support-03: #fdd13a,
  support-04: #054ada,
  inverse-support-01: #fb4b53,
  inverse-support-02: #3dbb61,
  inverse-support-03: #fdd13a,
  inverse-support-04: #408bfc,
  overlay-01: rgba(23, 23, 23, 0.5),
  focus: #0062ff,
  hover-primary: #0353e9,
  active-primary: #0530ad,
  hover-primary-text: #054ada,
  hover-secondary: #4c4c4c,
  active-secondary: #6f6f6f,
  hover-tertiary: #0353e9,
  active-tertiary: #0530ad,
  hover-ui: #e5e5e5,
  active-ui: #bebebe,
  selected-ui: #dcdcdc,
  hover-selected-ui: #cacaca,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #e5e5e5,
  visited-link: #8a3ffc,
  disabled-01: #ffffff,
  disabled-02: #bebebe,
  disabled-03: #8c8c8c,
  highlight: #c9deff,
  skeleton-01: #e5e5e5,
  skeleton-02: #bebebe,
  brand-01: #0062ff,
  brand-02: #171717,
  brand-03: #0062ff,
  active-01: #bebebe,
  hover-field: #e5e5e5,
);

✅carbon--theme--g90 [variable]

Carbon's g90 color theme

Source code 
$carbon--theme--g90: (
  interactive-01: #0062ff,
  interactive-02: #6f6f6f,
  interactive-03: #ffffff,
  interactive-04: #408bfc,
  ui-background: #282828,
  ui-01: #3d3d3d,
  ui-02: #565656,
  ui-03: #565656,
  ui-04: #8c8c8c,
  ui-05: #f3f3f3,
  text-01: #f3f3f3,
  text-02: #bebebe,
  text-03: #8c8c8c,
  text-04: #ffffff,
  icon-01: #f3f3f3,
  icon-02: #bebebe,
  icon-03: #ffffff,
  link-01: #6ea6ff,
  field-01: #3d3d3d,
  field-02: #565656,
  inverse-01: #171717,
  inverse-02: #f3f3f3,
  support-01: #fb4b53,
  support-02: #3dbb61,
  support-03: #fdd13a,
  support-04: #408bfc,
  inverse-support-01: #da1e28,
  inverse-support-02: #24a148,
  inverse-support-03: #fdd13a,
  inverse-support-04: #0062ff,
  overlay-01: rgba(23, 23, 23, 0.7),
  focus: #ffffff,
  hover-primary: #0353e9,
  active-primary: #0530ad,
  hover-primary-text: #97c1ff,
  hover-secondary: #606060,
  active-secondary: #3d3d3d,
  hover-tertiary: #f3f3f3,
  active-tertiary: #bebebe,
  hover-ui: #4c4c4c,
  active-ui: #6f6f6f,
  selected-ui: #565656,
  hover-selected-ui: #656565,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #4c4c4c,
  visited-link: #bb8eff,
  disabled-01: #3d3d3d,
  disabled-02: #565656,
  disabled-03: #8c8c8c,
  highlight: #054ada,
  skeleton-01: #353535,
  skeleton-02: #565656,
  brand-01: #0062ff,
  brand-02: #6f6f6f,
  brand-03: #ffffff,
  active-01: #6f6f6f,
  hover-field: #4c4c4c,
);

✅carbon--theme--g100 [variable]

Carbon's g100 color theme

Source code 
$carbon--theme--g100: (
  interactive-01: #0062ff,
  interactive-02: #6f6f6f,
  interactive-03: #ffffff,
  interactive-04: #408bfc,
  ui-background: #171717,
  ui-01: #282828,
  ui-02: #3d3d3d,
  ui-03: #3d3d3d,
  ui-04: #6f6f6f,
  ui-05: #f3f3f3,
  text-01: #f3f3f3,
  text-02: #bebebe,
  text-03: #6f6f6f,
  text-04: #ffffff,
  icon-01: #f3f3f3,
  icon-02: #bebebe,
  icon-03: #ffffff,
  link-01: #6ea6ff,
  field-01: #282828,
  field-02: #3d3d3d,
  inverse-01: #171717,
  inverse-02: #f3f3f3,
  support-01: #fb4b53,
  support-02: #3dbb61,
  support-03: #fdd13a,
  support-04: #408bfc,
  inverse-support-01: #da1e28,
  inverse-support-02: #24a148,
  inverse-support-03: #fdd13a,
  inverse-support-04: #0062ff,
  overlay-01: rgba(23, 23, 23, 0.7),
  focus: #ffffff,
  hover-primary: #0353e9,
  active-primary: #0530ad,
  hover-primary-text: #97c1ff,
  hover-secondary: #606060,
  active-secondary: #3d3d3d,
  hover-tertiary: #f3f3f3,
  active-tertiary: #bebebe,
  hover-ui: #353535,
  active-ui: #565656,
  selected-ui: #3d3d3d,
  hover-selected-ui: #4c4c4c,
  hover-danger: #ba1b23,
  active-danger: #750e13,
  hover-row: #353535,
  visited-link: #bb8eff,
  disabled-01: #282828,
  disabled-02: #3d3d3d,
  disabled-03: #6f6f6f,
  highlight: #0530ad,
  skeleton-01: #353535,
  skeleton-02: #3d3d3d,
  brand-01: #0062ff,
  brand-02: #6f6f6f,
  brand-03: #ffffff,
  active-01: #565656,
  hover-field: #353535,
);

✅carbon--theme [variable]

Carbon's default theme

Source code 
$carbon--theme: $carbon--theme--white;

✅interactive-01 [variable]

Primary interactive color; Primary buttons

Source code 
$interactive-01: map-get($carbon--theme, 'interactive-01');

✅interactive-02 [variable]

Secondary interactive color; Secondary button

Source code 
$interactive-02: map-get($carbon--theme, 'interactive-02');

✅interactive-03 [variable]

4.5:1 AA contrast; Tertiary button

Source code 
$interactive-03: map-get($carbon--theme, 'interactive-03');

✅interactive-04 [variable]

3:1 AA contrast; Selected elements; Active elements; Accent icons

Source code 
$interactive-04: map-get($carbon--theme, 'interactive-04');

✅ui-background [variable]

Default page background

Source code 
$ui-background: map-get($carbon--theme, 'ui-background');

✅ui-01 [variable]

Primary container background; Secondary page background

Source code 
$ui-01: map-get($carbon--theme, 'ui-01');

✅ui-02 [variable]

Primary page background; Secondary container background

Source code 
$ui-02: map-get($carbon--theme, 'ui-02');

✅ui-03 [variable]

Subtle border; Tertiary background color

Source code 
$ui-03: map-get($carbon--theme, 'ui-03');

✅ui-04 [variable]

3:1 AA element contrast; Medium contrast border

Source code 
$ui-04: map-get($carbon--theme, 'ui-04');

✅ui-05 [variable]

4.5:1 AA element contrast; High contrast border; Emphasis elements

Source code 
$ui-05: map-get($carbon--theme, 'ui-05');

✅text-01 [variable]

Primary text; Body copy; Headers; Hover text color for $text-02

Source code 
$text-01: map-get($carbon--theme, 'text-01');

✅text-02 [variable]

Secondary text; Input labels; Help text

Source code 
$text-02: map-get($carbon--theme, 'text-02');

✅text-03 [variable]

Placeholder text

Source code 
$text-03: map-get($carbon--theme, 'text-03');

✅text-04 [variable]

Text on interactive colors

Source code 
$text-04: map-get($carbon--theme, 'text-04');

✅icon-01 [variable]

Primary icons

Source code 
$icon-01: map-get($carbon--theme, 'icon-01');

✅icon-02 [variable]

Secondary icons

Source code 
$icon-02: map-get($carbon--theme, 'icon-02');

✅icon-03 [variable]

Tertiary icons; Icons on interactive colors; Icons on non-ui colors

Source code 
$icon-03: map-get($carbon--theme, 'icon-03');

✅link-01 [variable]

Primary links; Ghost button

Source code 
$link-01: map-get($carbon--theme, 'link-01');

✅field-01 [variable]

Default input fields; Field color on $ui-backgrounds

Source code 
$field-01: map-get($carbon--theme, 'field-01');

✅field-02 [variable]

Input field color on $ui-02 backgrounds

Source code 
$field-02: map-get($carbon--theme, 'field-02');

✅inverse-01 [variable]

Inverse text color; Inverse icon color

Source code 
$inverse-01: map-get($carbon--theme, 'inverse-01');

✅inverse-02 [variable]

High contrast backgrounds; High contrast elements

Source code 
$inverse-02: map-get($carbon--theme, 'inverse-02');

✅support-01 [variable]

Error

Source code 
$support-01: map-get($carbon--theme, 'support-01');

✅support-02 [variable]

Success

Source code 
$support-02: map-get($carbon--theme, 'support-02');

✅support-03 [variable]

Warning

Source code 
$support-03: map-get($carbon--theme, 'support-03');

✅support-04 [variable]

Information

Source code 
$support-04: map-get($carbon--theme, 'support-04');

✅inverse-support-01 [variable]

Error on high contrast backgrounds

Source code 
$inverse-support-01: map-get($carbon--theme, 'inverse-support-01');

✅inverse-support-02 [variable]

Success on high contrast backgrounds

Source code 
$inverse-support-02: map-get($carbon--theme, 'inverse-support-02');

✅inverse-support-03 [variable]

Warning on high contrast backgrounds

Source code 
$inverse-support-03: map-get($carbon--theme, 'inverse-support-03');

✅inverse-support-04 [variable]

Information on high contrast backgrounds

Source code 
$inverse-support-04: map-get($carbon--theme, 'inverse-support-04');

✅overlay-01 [variable]

Background overlay

Source code 
$overlay-01: map-get($carbon--theme, 'overlay-01');

✅focus [variable]

Focus border; Focus underline

Source code 
$focus: map-get($carbon--theme, 'focus');

✅hover-primary [variable]

$interactive-01 hover

Source code 
$hover-primary: map-get($carbon--theme, 'hover-primary');

✅active-primary [variable]

$interactive-01 active

Source code 
$active-primary: map-get($carbon--theme, 'active-primary');

✅hover-primary-text [variable]

$interactive-01 text hover

Source code 
$hover-primary-text: map-get($carbon--theme, 'hover-primary-text');

✅hover-secondary [variable]

$interactive-02 hover

Source code 
$hover-secondary: map-get($carbon--theme, 'hover-secondary');

✅active-secondary [variable]

$interactive-02 active; $inverse-01 active

Source code 
$active-secondary: map-get($carbon--theme, 'active-secondary');

✅hover-tertiary [variable]

$interactive-03 hover; $inverse-01 hover

Source code 
$hover-tertiary: map-get($carbon--theme, 'hover-tertiary');

✅active-tertiary [variable]

$interactive-03 active

Source code 
$active-tertiary: map-get($carbon--theme, 'active-tertiary');

✅hover-ui [variable]

$ui-01 hover; $ui-02 hover; Transparent background hover

Source code 
$hover-ui: map-get($carbon--theme, 'hover-ui');

✅active-ui [variable]

$ui-01 active; $ui-02 active

Source code 
$active-ui: map-get($carbon--theme, 'active-ui');

✅selected-ui [variable]

Selected UI elements

Source code 
$selected-ui: map-get($carbon--theme, 'selected-ui');

✅hover-selected-ui [variable]

Data table selected row hover

Source code 
$hover-selected-ui: map-get($carbon--theme, 'hover-selected-ui');

✅hover-danger [variable]

Danger hover; $support-01 hover

Source code 
$hover-danger: map-get($carbon--theme, 'hover-danger');

✅active-danger [variable]

Danger active; $support-01 active

Source code 
$active-danger: map-get($carbon--theme, 'active-danger');

✅hover-row [variable]

Row hover

Source code 
$hover-row: map-get($carbon--theme, 'hover-row');

✅visited-link [variable]

Visited links

Source code 
$visited-link: map-get($carbon--theme, 'visited-link');

✅disabled-01 [variable]

Disabled fields; Disabled backgrounds; Disabled border

Source code 
$disabled-01: map-get($carbon--theme, 'disabled-01');

✅disabled-02 [variable]

Disabled elements on $disabled-01; Disabled label; Disabled text on $disabled-01; Disabled icons; Disabled border

Source code 
$disabled-02: map-get($carbon--theme, 'disabled-02');

✅disabled-03 [variable]

Disabled text on $disabled-02; Disabled icons on $disabled-02

Source code 
$disabled-03: map-get($carbon--theme, 'disabled-03');

✅highlight [variable]

$interactive-01 high light

Source code 
$highlight: map-get($carbon--theme, 'highlight');

✅skeleton-01 [variable]

Skeleton state of graphics

Source code 
$skeleton-01: map-get($carbon--theme, 'skeleton-01');

✅skeleton-02 [variable]

Skeleton state of text

Source code 
$skeleton-02: map-get($carbon--theme, 'skeleton-02');

✅⚠️brand-01 [variable]

Source code 
$brand-01: map-get($carbon--theme, 'brand-01');

✅⚠️brand-02 [variable]

Source code 
$brand-02: map-get($carbon--theme, 'brand-02');

✅⚠️brand-03 [variable]

Source code 
$brand-03: map-get($carbon--theme, 'brand-03');

✅⚠️active-01 [variable]

Source code 
$active-01: map-get($carbon--theme, 'active-01');

✅⚠️hover-field [variable]

Source code 
$hover-field: map-get($carbon--theme, 'hover-field');