@dnb/eufemia/style/themes/sbanken/tokens-tailwind.css

DNB Eufemia Design System UI Library

/* This file is auto generated by makePropertiesFile.ts */

/* stylelint-disable-next-line scss/at-rule-no-unknown */
@theme {
  --color-background-page-background: var(--sbanken-greyscale-0);
  --color-background-action: var(--sbanken-purple-700);
  --color-background-action-hover: var(--sbanken-purple-700);
  --color-background-action-hover-subtle: var(--sbanken-purple-100);
  --color-background-action-pressed: var(--sbanken-purple-950);
  --color-background-action-pressed-subtle: var(--sbanken-purple-200);
  --color-background-action-focus: var(--sbanken-blue-600);
  --color-background-action-focus-subtle: var(--sbanken-blue-100);
  --color-background-action-disabled: var(--sbanken-greyscale-200);
  --color-background-action-inverse: var(--sbanken-green-300);
  --color-background-action-hover-inverse: var(--sbanken-green-300);
  --color-background-action-hover-subtle-inverse: var(
    --sbanken-purple-900
  );
  --color-background-action-pressed-subtle-inverse: var(
    --sbanken-purple-950
  );
  --color-background-action-ondark: var(--sbanken-green-300);
  --color-background-action-hover-ondark: var(--sbanken-green-300);
  --color-background-action-hover-subtle-ondark: var(--sbanken-green-900);
  --color-background-action-pressed-ondark: var(--sbanken-green-400);
  --color-background-action-pressed-subtle-ondark: var(
    --sbanken-green-950
  );
  --color-background-action-disabled-ondark: var(--sbanken-greyscale-600);
  --color-background-action-alternative: var(--sbanken-greyscale-500);
  --color-background-action-alternative-hover-subtle: var(
    --sbanken-greyscale-100
  );
  --color-background-selected: var(--sbanken-purple-950);
  --color-background-selected-subtle: var(--sbanken-purple-100);
  --color-background-selected-ondark: var(--sbanken-green-100);
  --color-background-selected-subtle-ondark: var(--sbanken-green-900);
  --color-background-neutral: var(--sbanken-greyscale-0);
  --color-background-neutral-static: var(--sbanken-greyscale-0);
  --color-background-neutral-subtle: var(--sbanken-greyscale-100);
  --color-background-neutral-base: var(--sbanken-greyscale-100);
  --color-background-neutral-bold: var(--sbanken-greyscale-300);
  --color-background-neutral-alternative: var(--sbanken-greyscale-100);
  --color-background-info: var(--sbanken-green-600);
  --color-background-info-subtle: var(--sbanken-green-50);
  --color-background-positive: var(--sbanken-green-700);
  --color-background-positive-subtle: var(--sbanken-green-100);
  --color-background-warning: var(--sbanken-yellow-600);
  --color-background-warning-subtle: var(--sbanken-yellow-50);
  --color-background-error: var(--sbanken-red-700);
  --color-background-error-subtle: var(--sbanken-red-200);
  --color-background-marketing: var(--sbanken-purple-900);
  --color-background-marketing-subtle: var(--sbanken-purple-100);
  --color-text-action: var(--sbanken-purple-700);
  --color-text-action-hover: var(--sbanken-purple-700);
  --color-text-action-pressed: var(--sbanken-purple-900);
  --color-text-action-focus: var(--sbanken-blue-600);
  --color-text-action-disabled: var(--sbanken-greyscale-300);
  --color-text-action-inverse: var(--sbanken-green-300);
  --color-text-action-hover-inverse: var(--sbanken-green-300);
  --color-text-action-pressed-inverse: var(--sbanken-green-400);
  --color-text-selected: var(--sbanken-purple-950);
  --color-text-action-ondark: var(--sbanken-green-300);
  --color-text-action-hover-ondark: var(--sbanken-green-300);
  --color-text-action-pressed-ondark: var(--sbanken-green-400);
  --color-text-action-disabled-ondark: var(--sbanken-greyscale-500);
  --color-text-action-alternative-ondark: var(--sbanken-greyscale-0);
  --color-text-neutral: var(--sbanken-purple-1000);
  --color-text-neutral-onlight: var(--sbanken-purple-1000);
  --color-text-neutral-alternative: var(--sbanken-greyscale-600);
  --color-text-neutral-inverse: var(--sbanken-greyscale-0);
  --color-text-neutral-ondark: var(--sbanken-greyscale-0);
  --color-text-neutral-subtle: var(--sbanken-greyscale-600);
  --color-text-neutral-subtle-ondark: var(--sbanken-greyscale-200);
  --color-text-destructive: var(--sbanken-red-700);
  --color-text-destructive-inverse: var(--sbanken-orange-500);
  --color-text-warning: var(--sbanken-yellow-800);
  --color-text-warning-inverse: var(--sbanken-yellow-600);
  --color-text-positive: var(--sbanken-green-700);
  --color-text-positive-inverse: var(--sbanken-green-600);
  --color-icon-action: var(--sbanken-purple-700);
  --color-icon-action-hover: var(--sbanken-purple-700);
  --color-icon-action-pressed: var(--sbanken-purple-900);
  --color-icon-action-focus: var(--sbanken-blue-600);
  --color-icon-action-disabled: var(--sbanken-greyscale-300);
  --color-icon-action-inverse: var(--sbanken-green-300);
  --color-icon-action-hover-inverse: var(--sbanken-green-300);
  --color-icon-action-pressed-inverse: var(--sbanken-green-300);
  --color-icon-selected: var(--sbanken-purple-950);
  --color-icon-selected-ondark: var(--sbanken-green-400);
  --color-icon-action-ondark: var(--sbanken-green-300);
  --color-icon-action-alternative-ondark: var(--sbanken-greyscale-0);
  --color-icon-action-hover-ondark: var(--sbanken-green-300);
  --color-icon-action-pressed-ondark: var(--sbanken-green-400);
  --color-icon-action-disabled-ondark: var(--sbanken-greyscale-500);
  --color-icon-neutral: var(--sbanken-purple-1000);
  --color-icon-neutral-static: var(--sbanken-purple-1000);
  --color-icon-neutral-inverse: var(--sbanken-greyscale-0);
  --color-icon-neutral-ondark: var(--sbanken-greyscale-0);
  --color-icon-neutral-alternative: var(--sbanken-greyscale-600);
  --color-icon-destructive: var(--sbanken-red-700);
  --color-icon-info: var(--sbanken-green-600);
  --color-icon-info-subtle: var(--sbanken-green-50);
  --color-icon-positive: var(--sbanken-green-700);
  --color-icon-positive-subtle: var(--sbanken-green-100);
  --color-icon-warning: var(--sbanken-yellow-600);
  --color-icon-warning-subtle: var(--sbanken-yellow-50);
  --color-icon-error: var(--sbanken-red-700);
  --color-icon-error-subtle: var(--sbanken-red-200);
  --color-icon-marketing: var(--sbanken-purple-900);
  --color-icon-marketing-subtle: var(--sbanken-purple-100);
  --color-stroke-action: var(--sbanken-purple-700);
  --color-stroke-action-alternative: var(--sbanken-greyscale-500);
  --color-stroke-action-hover: var(--sbanken-purple-700);
  --color-stroke-action-pressed: var(--sbanken-purple-950);
  --color-stroke-action-inverse: var(--sbanken-green-300);
  --color-stroke-action-hover-inverse: var(--sbanken-green-300);
  --color-stroke-action-pressed-inverse: var(--sbanken-green-500);
  --color-stroke-action-focus: var(--sbanken-blue-600);
  --color-stroke-action-focus-subtle: var(--sbanken-blue-100);
  --color-stroke-action-disabled: var(--sbanken-greyscale-300);
  --color-stroke-selected: var(--sbanken-purple-950);
  --color-stroke-selected-ondark: var(--sbanken-green-100);
  --color-stroke-action-ondark: var(--sbanken-green-300);
  --color-stroke-action-alternative-ondark: var(--sbanken-greyscale-400);
  --color-stroke-action-hover-ondark: var(--sbanken-green-300);
  --color-stroke-action-pressed-ondark: var(--sbanken-green-400);
  --color-stroke-action-disabled-ondark: var(--sbanken-greyscale-600);
  --color-stroke-neutral: var(--sbanken-purple-900);
  --color-stroke-neutral-ondark: var(--sbanken-greyscale-0);
  --color-stroke-neutral-subtle: var(--sbanken-greyscale-300);
  --color-stroke-neutral-bold: var(--sbanken-greyscale-300);
  --color-stroke-neutral-alternative: var(--sbanken-greyscale-300);
  --color-stroke-info: var(--sbanken-green-600);
  --color-stroke-positive: var(--sbanken-green-700);
  --color-stroke-warning: var(--sbanken-yellow-600);
  --color-stroke-error: var(--sbanken-red-700);
  --color-stroke-marketing: var(--sbanken-purple-900);
  --color-decorative-first-muted: var(--sbanken-purple-100);
  --color-decorative-first-muted-static: var(--sbanken-purple-100);
  --color-decorative-first-subtle: var(--sbanken-purple-300);
  --color-decorative-first-subtle-static: var(--sbanken-purple-300);
  --color-decorative-first-base: var(--sbanken-purple-600);
  --color-decorative-first-base-static: var(--sbanken-purple-600);
  --color-decorative-first-bold: var(--sbanken-purple-700);
  --color-decorative-first-bold-static: var(--sbanken-purple-700);
  --color-decorative-first-intense: var(--sbanken-purple-900);
  --color-decorative-first-intense-static: var(--sbanken-purple-900);
  --color-decorative-second-muted: var(--sbanken-green-100);
  --color-decorative-second-muted-static: var(--sbanken-green-100);
  --color-decorative-second-subtle: var(--sbanken-green-300);
  --color-decorative-second-subtle-static: var(--sbanken-green-300);
  --color-decorative-second-base: var(--sbanken-green-500);
  --color-decorative-second-base-static: var(--sbanken-green-500);
  --color-decorative-second-bold: var(--sbanken-green-700);
  --color-decorative-second-bold-static: var(--sbanken-green-700);
  --color-decorative-second-intense: var(--sbanken-green-900);
  --color-decorative-second-intense-static: var(--sbanken-green-900);
  --color-decorative-third-muted: var(--sbanken-purple-50);
  --color-decorative-third-muted-static: var(--sbanken-purple-50);
  --color-decorative-third-subtle: var(--sbanken-purple-300);
  --color-decorative-third-subtle-static: var(--sbanken-purple-300);
  --color-decorative-third-base: var(--sbanken-purple-500);
  --color-decorative-third-base-static: var(--sbanken-purple-500);
  --color-decorative-third-bold: var(--sbanken-purple-700);
  --color-decorative-third-bold-static: var(--sbanken-purple-700);
  --color-decorative-third-intense: var(--sbanken-purple-900);
  --color-decorative-third-intense-static: var(--sbanken-purple-900);
  --color-component-button-background-action: var(--sbanken-purple-900);
  --color-component-button-background-action-hover: var(
    --sbanken-purple-900
  );
  --color-component-button-background-action-destructive: var(
    --sbanken-orange-700
  );
  --color-component-button-background-action-destructive-hover: var(
    --sbanken-orange-700
  );
  --color-component-button-background-action-destructive-hover-subtle: var(
    --sbanken-red-100
  );
  --color-component-button-background-action-destructive-pressed: var(
    --sbanken-orange-800
  );
  --color-component-button-background-action-destructive-pressed-subtle: var(
    --sbanken-red-200
  );
  --color-component-button-text-neutral: var(--sbanken-greyscale-0);
  --color-component-button-text-neutral-inverse: var(
    --sbanken-purple-1000
  );
  --color-component-button-text-neutral-ondark: var(--sbanken-purple-1000);
  --color-component-button-text-action: var(--sbanken-purple-900);
  --color-component-button-text-action-hover: var(--sbanken-purple-900);
  --color-component-button-text-action-inverse: var(--sbanken-green-300);
  --color-component-button-text-action-hover-inverse: var(
    --sbanken-green-300
  );
  --color-component-button-text-action-ondark: var(--sbanken-green-300);
  --color-component-button-text-action-hover-ondark: var(
    --sbanken-green-300
  );
  --color-component-button-text-action-disabled: var(
    --sbanken-greyscale-0
  );
  --color-component-button-text-neutral-destructive: var(
    --sbanken-greyscale-0
  );
  --color-component-button-text-action-destructive: var(
    --sbanken-orange-700
  );
  --color-component-button-text-action-destructive-hover: var(
    --sbanken-orange-700
  );
  --color-component-button-text-action-destructive-pressed: var(
    --sbanken-orange-500
  );
  --color-component-button-icon-neutral: var(--sbanken-greyscale-0);
  --color-component-button-icon-neutral-ondark: var(--sbanken-purple-1000);
  --color-component-button-icon-action: var(--sbanken-purple-900);
  --color-component-button-icon-action-hover: var(--sbanken-purple-900);
  --color-component-button-icon-action-disabled: var(
    --sbanken-greyscale-0
  );
  --color-component-button-icon-neutral-destructive: var(
    --sbanken-greyscale-0
  );
  --color-component-button-icon-action-destructive: var(
    --sbanken-orange-700
  );
  --color-component-button-icon-action-destructive-hover: var(
    --sbanken-orange-700
  );
  --color-component-button-icon-action-destructive-pressed: var(
    --sbanken-orange-500
  );
  --color-component-button-stroke-action: var(--sbanken-purple-900);
  --color-component-button-stroke-action-hover: var(--sbanken-purple-900);
  --color-component-button-stroke-action-destructive: var(
    --sbanken-orange-700
  );
  --color-component-button-stroke-action-destructive-hover: var(
    --sbanken-orange-700
  );
  --color-component-button-stroke-action-destructive-pressed: var(
    --sbanken-orange-500
  );
  --color-component-button-stroke-selected: var(--sbanken-purple-700-40);
  --color-component-tooltip-background-neutral: var(
    --sbanken-greyscale-800
  );
  --color-component-table-background-neutral-alternative: var(
    --sbanken-greyscale-25
  );
  --color-component-dimmer-background: var(--sbanken-greyscale-1000-30);
  --color-component-switch-action-disabled-ondark: var(
    --sbanken-purple-1000
  );
  --color-component-progressbar-neutral-onsubtle: var(
    --sbanken-greyscale-300
  );
}