
/*!
* 
*
* Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
* and/or its subsidiaries and/or its affiliates and/or their licensors.
*
*
*/


// Do not edit directly
// Generated on Wed, 13 Dec 2023 20:43:42 GMT

$dlt-time-duration-long: 6.00s;
$dlt-time-duration-default: 4.00s;
$dlt-time-duration-short: 2.00s;
$dlt-time-delay-long: 0.20s;
$dlt-time-delay-default: 0.10s;
$dlt-time-delay-short: 0.05s;
$dlt-time-transition-xl: 1.00s;
$dlt-time-transition-long: 0.60s;
$dlt-time-transition-default: 0.30s;
$dlt-time-transition-short: 0.25s;
$dlt-spacing-6-x: 3rem; // 48px
$dlt-spacing-5-x: 2.5rem; // 40px
$dlt-spacing-4-x: 2rem; // 32px
$dlt-spacing-3-x-half: 1.75rem; // 28px
$dlt-spacing-3-x: 1.5rem; // 24px
$dlt-spacing-2-x-half: 1.25rem; // 20px
$dlt-spacing-2-x: 1rem; // 16px
$dlt-spacing-1-x-half: 0.75rem; // 12px
$dlt-spacing-1-x: 0.5rem; // 8px
$dlt-spacing-half-x: 0.25rem; // 4px
$dlt-spacing-quarter-x: 0.125rem; // 2px
$dlt-spacing-none: 0rem; // 0
$dlt-sizing-xxl: 4rem;
$dlt-sizing-xl: 3rem;
$dlt-sizing-lg: 2.5rem; // For large input field height
$dlt-sizing-md: 2rem; // For large size icons, default input field height
$dlt-sizing-sm: 1.5rem; // For default size icons, small input field height, default toggle switch height
$dlt-sizing-xs: 1rem; // For small size icons, default checkboxes & radio buttons, small toggle switch height
$dlt-sizing-xxs: 0.75rem; // For small checkboxes & radio buttons
$dlt-opacity-disabled: .5; // Opacity for all disabled states
$dlt-border-style-dropzone: dashed;
$dlt-border-style-hover: solid;
$dlt-border-style-default: solid;
$dlt-border-width-separator-md: 2px;
$dlt-border-width-separator-sm: 1px;
$dlt-border-width-stepper: 2px; // Border width for all states indicators and connecting lines in stepper
$dlt-border-width-focus: 2px; // Border width for focus states except checkboxes and radio buttons
$dlt-border-width-hover: 2px; // Border width for hover states except checkboxes and radio buttons
$dlt-border-width-default: 1px; // Border width for default input field, and hover & focus for checkboxes and radio buttons
$dlt-border-radii-emphasis: 20px; // Emphasis buttons
$dlt-border-radii-toggle: 16px; // Toggle switches
$dlt-border-radii-checkbox: 0; // Checkboxes
$dlt-border-radii-sm: 4px;
$dlt-border-radii-default: 0;
$dlt-border-radii-smooth: 100%;
$dlt-font-line-height-xxl: 64px; // 64px
$dlt-font-line-height-xl: 56px; // 56px
$dlt-font-line-height-lg: 32px; // 32px
$dlt-font-line-height-md: 28px; // 28px
$dlt-font-line-height-sm: 24px; // 24px
$dlt-font-line-height-xs: 20px; // 20px
$dlt-font-line-height-xxs: 16px; // 16px
$dlt-font-line-height-reset: 0; // 0
$dlt-font-weight-bolder: 900; // Black
$dlt-font-weight-bold: 700; // Bold
$dlt-font-weight-medium: 500; // Medium
$dlt-font-weight-regular: 400; // Regular
$dlt-font-weight-light: 300; // Light
$dlt-font-size-h1-xxl: 3.5rem; // 56px
$dlt-font-size-h1-xl: 3rem; // 48px
$dlt-font-size-h1-lg: 2rem; // 32px
$dlt-font-size-xxl: 1.5rem; // 24px
$dlt-font-size-xl: 1.375rem; // 22px
$dlt-font-size-lg: 1.25rem; // 20px
$dlt-font-size-md: 1.125rem; // 18px
$dlt-font-size-sm: 1rem; // 16px
$dlt-font-size-xs: 0.875rem; // 14px
$dlt-font-size-xxs: 0.75rem; // 12px
$dlt-font-family-base: Roboto,Helvetica,Arial,sans-serif; // Roboto
$dlt-elevation-tooltip-nose: drop-shadow(0 -1px 0 rgba(1,31,61, .25)); // For the Tooltips nose
$dlt-elevation-border: 0px 0px 1px 0px rgba(1,31,61, 1); // For App switchers, Overflow menus, Tooltips
$dlt-elevation-lg: 0px 8px 24px 8px rgba(1,31,61, 0.24); // Elevation 24 - For Modals
$dlt-elevation-md: 0px 2px 12px 2px rgba(1,31,61, 0.12); // Elevation 12 - For Panels, App switchers, Overflow menus, Tooltips
$dlt-elevation-sm: 0px 2px 4px 1px rgba(1,31,61, 0.16); // Elevation 4 - For Cards, Select dropdowns, Date pickers, Time pickers, Dropdown buttons
$dlt-color-palette-gray-980: #f9fafb;
$dlt-color-palette-gray-950: #f0f2f4;
$dlt-color-palette-gray-920: #e7ebee;
$dlt-color-palette-gray-900: #e1e5ea;
$dlt-color-palette-gray-850: #d2d9e0;
$dlt-color-palette-gray-600: #7e96ae;
$dlt-color-palette-gray-450: #537393;
$dlt-color-palette-gray-350: #36597d;
$dlt-color-palette-gray-200: #193857;
$dlt-color-palette-gray-120: #011f3d; // Core dark
$dlt-color-palette-beige-990: #fdfdfc;
$dlt-color-palette-beige-980: #fbfbf8;
$dlt-color-palette-beige-960: #f7f7f2;
$dlt-color-palette-beige-930: #f2f2ea;
$dlt-color-palette-beige-850: #ddddd5;
$dlt-color-palette-beige-700: #b6b6af;
$dlt-color-palette-beige-550: #909089;
$dlt-color-palette-beige-430: #70706b;
$dlt-color-palette-pear-940: #fafde3;
$dlt-color-palette-pear-840: #f2f8b4;
$dlt-color-palette-pear-740: #eaf485;
$dlt-color-palette-pear-540: #d9ec45;
$dlt-color-palette-pear-490: #c4dd1d;
$dlt-color-palette-pear-440: #afce12;
$dlt-color-palette-pear-390: #90b710;
$dlt-color-palette-pear-340: #7ea028;
$dlt-color-palette-purple-950: #f1e7fe;
$dlt-color-palette-purple-870: #dabffc;
$dlt-color-palette-purple-800: #c69dfb;
$dlt-color-palette-purple-700: #a96cf9;
$dlt-color-palette-purple-600: #8e3cf7; // Accent
$dlt-color-palette-purple-500: #712dd2;
$dlt-color-palette-purple-400: #5b25a7;
$dlt-color-palette-purple-270: #3b2c5e;
$dlt-color-palette-teal-950: #ebf9f8;
$dlt-color-palette-teal-850: #c5edea;
$dlt-color-palette-teal-700: #8adbd5;
$dlt-color-palette-teal-500: #3cb7c1;
$dlt-color-palette-teal-390: #21a2a6;
$dlt-color-palette-teal-300: #058192; // Primary
$dlt-color-palette-teal-260: #1c5569;
$dlt-color-palette-teal-200: #134158;
$dlt-color-palette-white: #ffffff;
$dlt-color-overlay: rgba(1, 31, 61, 0.32); // Overlays for modal pop-ups
$dlt-color-system-message-warning: #e07800; // Color to show warning in validations and system messages
$dlt-color-system-message-success: #71a112; // Color to show success in validations and system messages
$dlt-color-system-message-error: #d22d3d; // Color to show error in validations and system messages
$dlt-color-system-message-info: #1776bf; // Color to show information in validations and system messages
$dlt-color-category-warmgray-subtle: #ececdf; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-green-bold: #507702; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-green-vibrant: #bfea6c; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-green-subtle: #dff7ab; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-yellow-bold: #a35700; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-yellow-vibrant: #f7ca73; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-yellow-subtle: #faf3a0; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-red-bold: #ba1936; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-red-vibrant: #f39a95; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-red-subtle: #f9e0c3; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-teal-bold: #00718a; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-teal-vibrant: #7fd9c3; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-teal-subtle: #bbf1ee; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-blue-bold: #0264c0; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-blue-vibrant: #96cdf8; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-blue-subtle: #cde6f9; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-purple-bold: #6537d7; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-purple-vibrant: #b0affe; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-purple-subtle: #e0d6ff; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-category-violet-bold: #9a27b7; // Text color for bold elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-violet-vibrant: #efb0e1; // Background/fill for vibrant elements with color-coded categories, Usually in: HTTP Method tags (Contribution)
$dlt-color-category-violet-subtle: #ffd6ef; // Background/fill for subtle elements with color-coded categories, Usually in: colored tags
$dlt-color-palette-gradient-end: $dlt-color-palette-gray-120; // Background/fill used rarely. Usually in: Loader indicator fill gradient end color.
$dlt-color-palette-gradient-start: $dlt-color-palette-gray-120; // Background/fill used rarely. Usually in: Loader indicator fill gradient start color.
$dlt-color-global-neutral-980: $dlt-color-palette-white;
$dlt-color-global-neutral-900: $dlt-color-palette-gray-980;
$dlt-color-global-neutral-800: $dlt-color-palette-gray-950;
$dlt-color-global-neutral-700: $dlt-color-palette-gray-920;
$dlt-color-global-neutral-600: $dlt-color-palette-gray-850;
$dlt-color-global-neutral-400: $dlt-color-palette-gray-450;
$dlt-color-global-neutral-300: $dlt-color-palette-gray-350;
$dlt-color-global-neutral-100: $dlt-color-palette-gray-120; // Core dark
$dlt-color-global-gradient-end: $dlt-color-palette-teal-500; // Background/fill used rarely. Usually in: Loader indicator fill gradient end color.
$dlt-color-global-gradient-start: $dlt-color-palette-purple-600; // Background/fill used rarely. Usually in: Loader indicator fill gradient start color.
$dlt-color-global-accent-subtle: $dlt-color-palette-purple-950; // Background/fill for emphasis buttons in active state
$dlt-color-global-accent-highlighted: $dlt-color-palette-purple-270; // Background/fill for emphasis buttons in active state
$dlt-color-global-accent-default: $dlt-color-palette-purple-600; // Background/fill for emphasis buttons
$dlt-color-global-secondary-highlighted: $dlt-color-palette-teal-850; // Background/fill for active states in interactive component parts
$dlt-color-global-secondary-default: $dlt-color-palette-white; // Background/fill for interactive component parts. Usually in: Secondary button, text input, radio button, checkbox, select dropdown. Others: Tab bar items, tags, toggle switches, overflow menu
$dlt-color-global-primary-highlighted: $dlt-color-palette-teal-260; // Background/fill to show active states. Usually in: primary buttons
$dlt-color-global-primary-default: $dlt-color-palette-teal-300; // Background/fill for action componentsUsually in: Primary buttons Others: Stepper, toggle knob, etc.
$dlt-color-icon-static-inverse: $dlt-color-palette-white; // Icon color for non-interactive descriptive icons in reversed backgrounds/fills
$dlt-color-icon-interactive-inverse: $dlt-color-palette-white; // Icon color in reversed backgrounds/fills
$dlt-color-text-static-inverse: $dlt-color-palette-white; // Text color in reversed backgrounds/fills
$dlt-color-text-interactive-inverse: $dlt-color-palette-white; // Text color on reversed backgrounds/fills. Usually in: primary button
$dlt-color-border-interactive-inverse: $dlt-color-palette-white; // Border/strokes color for reverse colored elements (owing to the background). Usually in: Secondary button border on reversed backgrounds/fills
$dlt-color-icon-static-subtle: $dlt-color-global-neutral-300; // Icon color for non-interactive descriptive icons
$dlt-color-icon-interactive-accent: $dlt-color-global-accent-default; // Icon color for accent icon buttons (special cases only). Usually in: Heart icon button
$dlt-color-icon-interactive-secondary: $dlt-color-global-neutral-100; // Icon color for interactive icon buttons with less importance. Usually in: Navigation
$dlt-color-icon-interactive-primary-highlighted: $dlt-color-global-primary-highlighted; // Icon color in interactive icon buttons for hover states. Usually in: Tags close icon
$dlt-color-icon-interactive-primary: $dlt-color-global-primary-default; // Icon color in interactive icon buttons
$dlt-color-text-static-subtle: $dlt-color-global-neutral-300; // Text color with low importance. Usually in: Breadcrumbs, pagination, footer
$dlt-color-text-static-primary: $dlt-color-global-neutral-100; // Default static text color. Usually in: Headings, legends, labels, text blocks
$dlt-color-text-interactive-navigation-secondary-hover: $dlt-color-global-primary-highlighted; // Navigation menu item text color secondary
$dlt-color-text-interactive-navigation-secondary: $dlt-color-global-neutral-100; // Navigation menu item text color secondary
$dlt-color-text-interactive-navigation-primary-hover: $dlt-color-global-primary-highlighted; // Navigation menu item text color primary
$dlt-color-text-interactive-navigation-primary: $dlt-color-global-neutral-100; // Navigation menu item text color primary
$dlt-color-text-interactive-link-highlighted: $dlt-color-global-primary-highlighted; // Link text color for active and visited states
$dlt-color-text-interactive-link-default: $dlt-color-global-primary-default; // Link text color default
$dlt-color-text-interactive-subtle: $dlt-color-global-neutral-300; // Text color with low importance. Usually in: Placeholders, steppers
$dlt-color-text-interactive-accent: $dlt-color-global-accent-default; // Text color in interactive emphasis elements Usually in: Emphasis buttons
$dlt-color-text-interactive-secondary: $dlt-color-global-neutral-100; // Text color in primary and secondary interactive elements. Usually in: Input, navigation menu
$dlt-color-text-interactive-primary-highlighted: $dlt-color-global-primary-highlighted; // Text color for interactive highlighted elements, Usually in: Selectable Tags
$dlt-color-text-interactive-primary: $dlt-color-global-primary-default; // Text color in primary interactive elements. Usually in: Buttons
$dlt-color-border-static-primary: $dlt-color-global-neutral-600; // Border for static discreet elements. Usually in: All separators, loaders, tab bars
$dlt-color-border-interactive-subtle: $dlt-color-global-neutral-600; // Used as border color for interactive discreet elements, Usually in: selectable tags
$dlt-color-border-interactive-accent: $dlt-color-global-accent-default; // Accent border/strokes color for emphasis elements. Usually in: Button borders
$dlt-color-border-interactive-contrast: $dlt-color-global-neutral-400; // Borders/strokes for UI elements contrasting the primary color. Usually in: Steppers
$dlt-color-border-interactive-secondary: $dlt-color-global-neutral-300; // Border/strokes for most of the interactive UI elements. Usually in: Default/hover input field, checkboxes, radio buttons, and toggle
$dlt-color-border-interactive-primary: $dlt-color-global-primary-default; // Border/strokes for buttons or to show focus states. Usually in: Primary button, secondary button. Others: Focus input field, checkboxes, radio buttons, and toggle borders
$dlt-color-background-static-navigation-tertiary: $dlt-color-global-neutral-800; // Background/fill for panel and additional navigation items
$dlt-color-background-static-navigation-secondary: $dlt-color-global-neutral-900; // Background/fill for secondary navigation
$dlt-color-background-static-navigation-primary: $dlt-color-global-neutral-980; // Background/fill for primary navigation
$dlt-color-background-static-contrast: $dlt-color-global-primary-default; // Background/fill used rarely. Usually in: Loader indicator fill. Others: Data table multi-select first row
$dlt-color-background-static-tertiary: $dlt-color-global-neutral-800; // Tertiary background/fill used rarely. Usually in: Card pages with optional offering of vertical and horizontal navigation. Others: Loaders track background
$dlt-color-background-static-secondary: $dlt-color-global-neutral-900; // Alternative background/fill. Usually in: Background of card pages as optional offering. Others: Data table zebra stripes 2
$dlt-color-background-static-primary: $dlt-color-global-neutral-980; // Non-standard interactive background/fill. Usually in: The whole screen. Others: Data table zebra stripes 1, tooltips
$dlt-color-background-interactive-navigation-menu-item-secondary-hover: $dlt-color-global-neutral-800; // Background/fill for secondary navigation menu item in hover state
$dlt-color-background-interactive-navigation-menu-item-secondary-active: $dlt-color-global-secondary-highlighted; // Background/fill for secondary navigation menu item in active state
$dlt-color-background-interactive-navigation-menu-item-secondary-selected: $dlt-color-global-neutral-700; // Background/fill for secondary navigation menu item in selected state
$dlt-color-background-interactive-navigation-menu-item-secondary-default: $dlt-color-global-neutral-900; // Background/fill for secondary navigation menu item in default state
$dlt-color-background-interactive-navigation-menu-item-primary-hover: $dlt-color-global-neutral-900; // Background/fill for primary navigation menu item in hover state
$dlt-color-background-interactive-navigation-menu-item-primary-active: $dlt-color-global-secondary-highlighted; // Background/fill for primary navigation menu item in active state
$dlt-color-background-interactive-navigation-menu-item-primary-selected: $dlt-color-global-neutral-800; // Background/fill for primary navigation menu item in selected state
$dlt-color-background-interactive-navigation-menu-item-primary-default: $dlt-color-global-secondary-default; // Background/fill for primary navigation menu item in default state
$dlt-color-background-interactive-contrast: $dlt-color-global-neutral-400; // For interactive elements with color contrasting the primary-default. Usually in: Toggle knob off
$dlt-color-background-interactive-subtle: $dlt-color-global-neutral-600; // For subtle interactive UI elements. Usually in: Scrollbar thumb
$dlt-color-background-interactive-tertiary-highlighted: $dlt-color-global-secondary-highlighted; // Background/fill for highlighted interactive discreet elements. Usually in: Selected tags
$dlt-color-background-interactive-tertiary-hover: $dlt-color-global-neutral-700; // Background/fill for hover states in interactive subtle elements. Usually in: tags
$dlt-color-background-interactive-tertiary-default: $dlt-color-global-neutral-800; // Background/fill for interactive subtle elements. Usually in: Input group add-on and tags
$dlt-color-background-interactive-accent-subtle: $dlt-color-global-accent-subtle; // Background/fill for emphasis selected tags
$dlt-color-background-interactive-accent-active: $dlt-color-global-accent-highlighted; // Background/fill for emphasis buttons in active state
$dlt-color-background-interactive-accent-default: $dlt-color-global-accent-default; // Background/fill for emphasis buttons
$dlt-color-background-interactive-secondary-hover: $dlt-color-global-neutral-800; // Background/fill for hover states in interactive component parts. Currently in: Data table
$dlt-color-background-interactive-secondary-active: $dlt-color-global-secondary-highlighted; // Background/fill for active states in interactive component parts
$dlt-color-background-interactive-secondary-default: $dlt-color-global-secondary-default; // Background/fill for interactive component parts. Usually in: Secondary button, text input, radio button, checkbox, select dropdown. Others: Tab bar items, tags, toggle switches, overflow menu
$dlt-color-background-interactive-primary-active: $dlt-color-global-primary-highlighted; // Background/fill to show active states. Usually in: primary buttons
$dlt-color-background-interactive-primary-default: $dlt-color-global-primary-default; // Background/fill for action components. Usually in: Primary buttons Others: Stepper, toggle knob, etc.
$dlt-color-background-interactive-add-on: $dlt-color-background-interactive-tertiary-default; // Background/fill for interactive add-ons. Usually in: Input group add-on