@dnb/eufemia/cjs/components/accordion/style/themes/dnb-accordion-theme-ui.css

DNB Eufemia Design System UI Library

/* 
 * Accordion theme
 *
 */
.dnb-accordion__variant--outlined {
  --accordion-color-text--default: var(
    --token-color-text-action
  );
  --accordion-color-text--hover: var(--token-color-text-action);
  --accordion-color-text--after-click: var(
    --token-color-text-neutral-inverse
  );
  --accordion-color-bg--default: var(--token-color-background-neutral);
  --accordion-color-bg--after-click: var(
    --token-color-background-action
  );
  --accordion-color-bg--hover: var(--token-color-background-neutral);
  --accordion-color-bg--active: var(
    --token-color-background-action-pressed-subtle
  );
  --accordion-color-bg--disabled: var(--token-color-background-neutral);
  --accordion-color-border--default: var(
    --token-color-stroke-neutral-bold
  );
  --accordion-color-border--hover: var(
    --token-color-stroke-action-hover
  );
  --accordion-color-border--active: var(
    --token-color-stroke-action-pressed
  );
  --accordion-color-border--after-click: var(
    --token-color-stroke-action
  );
  --accordion-border-width--hover: 0.125rem;
  --accordion-border-width--active: 0.125rem;
}
.dnb-accordion__variant--outlined.dnb-accordion--expanded {
  --accordion-color-text--default: var(
    --token-color-text-neutral-inverse
  );
  --accordion-color-text--active: var(--token-color-text-action);
  --accordion-color-bg--default: var(--token-color-background-action);
  --accordion-color-border--default: var(--accordion-color-bg);
}
.dnb-accordion__variant--filled {
  --accordion-color-text--default: var(--token-color-text-action);
  --accordion-color-text--hover: var(--token-color-text-action-hover);
  --accordion-color-text--active: var(
    --token-color-text-neutral-inverse
  );
  --accordion-color-text--disabled: var(
    --token-color-text-action-disabled
  );
  --accordion-color-bg--default: var(
    --token-color-decorative-third-muted
  );
  --accordion-color-bg--hover: var(--token-color-background-neutral);
  --accordion-color-bg--active: var(
    --token-color-background-action-pressed
  );
  --accordion-color-border--default: var(
    --token-color-decorative-third-muted
  );
  --accordion-color-border--active: var(
    --token-color-stroke-action-pressed
  );
  --accordion-border-width--default: 0.125rem;
}
.dnb-accordion__variant--outlined, .dnb-accordion__variant--filled {
  --accordion-color-text--disabled: var(
    --token-color-text-action-disabled
  );
  --accordion-color-text--focus: var(--token-color-text-action-focus);
  --accordion-color-description--default: var(
    --token-color-text-neutral-alternative
  );
  --accordion-color-description--hover: var(
    --token-color-text-neutral-alternative
  );
  --accordion-color-description--active: var(
    --token-color-text-neutral-alternative
  );
  --accordion-color-description--focus: var(
    --token-color-text-neutral-alternative
  );
  --accordion-color-description--after-click: var(
    --accordion-color-text
  );
  --accordion-color-description--disabled: var(
    --token-color-text-action-disabled
  );
  --accordion-color-bg--focus: var(
    --token-color-background-action-focus-subtle
  );
  --accordion-color-border--focus: var(
    --token-color-stroke-action-focus
  );
  --accordion-color-border--disabled: var(
    --token-color-stroke-action-disabled
  );
  --accordion-border-width--focus: 0.25rem;
  --accordion-border-inset--default: inset;
  --accordion-border-inset--hover: ;
  --accordion-border-inset--active: inset;
  --accordion-border-inset--focus: ;
}
.dnb-accordion__variant--outlined.dnb-accordion--expanded, .dnb-accordion__variant--filled.dnb-accordion--expanded {
  --accordion-color-text--disabled: var(
    --token-color-text-neutral-inverse
  );
  --accordion-color-description--default: var(--accordion-color-text);
  --accordion-color-description--disabled: var(
    --token-color-text-neutral-inverse
  );
  --accordion-color-bg--disabled: var(
    --token-color-background-action-disabled
  );
  --accordion-color-border--disabled: var(
    --accordion-color-bg--disabled
  );
}