path: root/resources/assets/stylesheets/scss/root.scss

:root {
    --text-color: #{$color--font-primary};
    --active-color: #{$active-color};
    --activity-color: #{$activity-color};
    --activity-color-20: #{$activity-color-20};
    --activity-color-40: #{$activity-color-40};
    --activity-color-60: #{$activity-color-60};
    --activity-color-80: #{$activity-color-80};
    --base-color: #{$base-color};
    --base-color-20: #{$base-color-20};
    --base-color-40: #{$base-color-40};
    --base-color-60: #{$base-color-60};
    --base-color-80: #{$base-color-80};
    --base-gray: #{$base-gray};
    --black: #{$black};
    --brand-color-dark: #{$brand-color-dark};
    --brand-color-darker: #{$brand-color-darker};
    --brand-color-light: #{$brand-color-light};
    --brand-color-lighter: #{$brand-color-lighter};
    --brown: #{$brown};
    --brown-20: #{$brown-20};
    --brown-40: #{$brown-40};
    --brown-60: #{$brown-60};
    --brown-80: #{$brown-80};
    --content-color: #{$content-color};
    --content-color-10: #{$content-color-10};
    --content-color-20: #{$content-color-20};
    --content-color-40: #{$content-color-40};
    --content-color-60: #{$content-color-60};
    --content-color-80: #{$content-color-80};
    --contrast-content-gray: #{$contrast-content-gray};
    --contrast-content-hovergray: #{$contrast-content-hovergray};
    --contrast-content-white: #{$contrast-content-white};
    --dark-gray-color: #{$dark-gray-color};
    --dark-gray-color-10: #{$dark-gray-color-10};
    --dark-gray-color-15: #{$dark-gray-color-15};
    --dark-gray-color-20: #{$dark-gray-color-20};
    --dark-gray-color-30: #{$dark-gray-color-30};
    --dark-gray-color-40: #{$dark-gray-color-40};
    --dark-gray-color-45: #{$dark-gray-color-45};
    --dark-gray-color-5: #{$dark-gray-color-5};
    --dark-gray-color-60: #{$dark-gray-color-60};
    --dark-gray-color-75: #{$dark-gray-color-75};
    --dark-gray-color-80: #{$dark-gray-color-80};
    --dark-green: #{$dark-green};
    --dark-green-20: #{$dark-green-20};
    --dark-green-40: #{$dark-green-40};
    --dark-green-60: #{$dark-green-60};
    --dark-green-80: #{$dark-green-80};
    --dark-violet: #{$dark-violet};
    --dark-violet-20: #{$dark-violet-20};
    --dark-violet-40: #{$dark-violet-40};
    --dark-violet-60: #{$dark-violet-60};
    --dark-violet-80: #{$dark-violet-80};
    --green: #{$green};
    --green-20: #{$green-20};
    --green-40: #{$green-40};
    --green-60: #{$green-60};
    --green-80: #{$green-80};
    --light-gray-color: #{$light-gray-color};
    --light-gray-color-20: #{$light-gray-color-20};
    --light-gray-color-40: #{$light-gray-color-40};
    --light-gray-color-60: #{$light-gray-color-60};
    --light-gray-color-80: #{$light-gray-color-80};
    --orange: #{$orange};
    --orange-20: #{$orange-20};
    --orange-40: #{$orange-40};
    --orange-60: #{$orange-60};
    --orange-80: #{$orange-80};
    --origin-base-color: #{$origin-base-color};
    --petrol: #{$petrol};
    --petrol-20: #{$petrol-20};
    --petrol-40: #{$petrol-40};
    --petrol-60: #{$petrol-60};
    --petrol-80: #{$petrol-80};
    --public-course-bgcolor: #{$public-course-bgcolor};
    --red: #{$red};
    --red-20: #{$red-20};
    --red-40: #{$red-40};
    --red-60: #{$red-60};
    --red-80: #{$red-80};
    --table-footer-color: #{$color--table-header};
    --table-header-color: #{$color--table-header};
    --violet: #{$violet};
    --violet-20: #{$violet-20};
    --violet-40: #{$violet-40};
    --violet-60: #{$violet-60};
    --violet-80: #{$violet-80};
    --white: #{$white};
    --yellow: #{$yellow};
    --yellow-20: #{$yellow-20};
    --yellow-40: #{$yellow-40};
    --yellow-60: #{$yellow-60};
    --yellow-80: #{$yellow-80};

    --group-color-0: #{$dark-violet};
    --group-color-1: #{$violet};
    --group-color-2: #{$red};
    --group-color-3: #{$orange};
    --group-color-4: #{$yellow};
    --group-color-5: #{$green};
    --group-color-6: #{$dark-green};
    --group-color-7: #{$petrol};
    --group-color-8: #{$brown};

    --avatar-small: #{$avatar-small};
    --avatar-medium: #{$avatar-medium};
    --avatar-normal: #{$avatar-normal};

    --icon-size-default: #{$icon-size-default};
    --icon-size-button: #{$icon-size-button};
    --icon-size-inline: #{$icon-size-inline};
    #{"--"}icon-size-action-menu: var(--icon-size-default);

    --transition-duration: #{$transition-duration};
    --transition-duration-slow: #{$transition-duration-slow};
    --transition-duration-superslow: #{$transition-duration-superslow};

    --color--black: #{$color--black};
    --color--blue-1: #{$color--blue-1};
    --color--blue-2: #{$color--blue-2};
    --color--gray-1: #{$color--gray-1};
    --color--gray-2: #{$color--gray-2};
    --color--gray-3: #{$color--gray-3};
    --color--gray-4: #{$color--gray-4};
    --color--gray-5: #{$color--gray-5};
    --color--gray-6: #{$color--gray-6};
    --color--gray-7: #{$color--gray-7};
    --color--green-1: #{$color--green-1};
    --color--red-1: #{$color--red-1};
    --color--white: #{$color--white};
    --color--yellow-1: #{$color--yellow-1};

    --color--global-background: #{$color--global-background};

    --color--brand-primary: #{$color--brand-primary};
    --color--brand-primary-contrast: #{$color--brand-primary-contrast};
    --color--brand-secondary: #{$color--brand-secondary};
    --color--brand-secondary-contrast: #{$color--brand-secondary-contrast};

    --color--highlight: #{$color--highlight};
    --color--highlight-hover: #{$color--highlight-hover};
    --color--highlight-contrast: #{$color--highlight-contrast};

    --color--sidebar-item: #{$color--sidebar-item};
    --color--sidebar-item-hover: #{$color--sidebar-item-hover};

    --color--content-link: #{$color--content-link};
    --color--content-link-hover: #{$color--content-link-hover};

    --color--font-primary: #{$color--font-primary};
    --color--font-secondary: #{$color--font-secondary};
    --color--font-inactive: #{$color--font-inactive};
    --color--font-inverted: #{$color--font-inverted};

    --color--main-navigation-background: #{$color--main-navigation-background};
    --color--main-navigation-border: #{$color--main-navigation-border};
    --color--main-navigation-item: #{$color--main-navigation-item};
    --color--main-navigation-item-inactive: #{$color--main-navigation-item-inactive};

    --color--sidebar-marker-active: #{$color--sidebar-marker-active};
    --color--sidebar-marker-active-navigation: #{$color--sidebar-marker-active-navigation};
    --color--sidebar-marker-active-view: #{$color--sidebar-marker-active-view};
    --color--sidebar-marker-focus: #{$color--sidebar-marker-focus};
    --color--sidebar-marker-hover: #{$color--sidebar-marker-hover};
    --color--sidebar-active: #{$color--sidebar-active};
    --color--sidebar-focus: #{$color--sidebar-focus};
    --color--sidebar-hover: #{$color--sidebar-hover};
    --color--sidebar-divider: #{$color--sidebar-divider};

    --color--action-menu-border: #{$color--action-menu-border};
    --color--action-menu-divider: #{$color--action-menu-divider};
    --color--action-menu-hover: #{$color--action-menu-hover};
    --color--action-menu-marker-hover: #{$color--action-menu-marker-hover};
    --color--action-menu-shadow: #{$color--action-menu-shadow};

    --color--dialog-overlay: #{$color--dialog-overlay};

    --color--tile-border-focus: #{$color--tile-border-focus};
    --color--tile-border-hover: #{$color--tile-border-hover};
    --color--tile-border: #{$color--tile-border};
    --color--tile-background: #{$color--tile-background};
    --color--tile-background-active: #{$color--tile-background-active};
    --color--tile-background-focus: #{$color--tile-background-focus};
    --color--tile-background-hover: #{$color--tile-background-hover};
    --color--tile-marker-inactive: #{$color--tile-marker-inactive};
    --color--tile-marker-active: #{$color--tile-marker-active};
    --color--tile-marker-attention: #{$color--tile-marker-attention};
    --color--tile-title-background: #{$color--tile-title-background};

    --color--scrollbar-thumb: #{$color--scrollbar-thumb};

    --color--content-bar-background: #{$color--content-bar-background};

    --color--content-box-border: #{$color--content-box-border};
    --color--content-box-header: #{$color--content-box-header};
    --color--content-box-background: #{$color--content-box-background};

    --color--table-header: #{$color--table-header};
    --color--table-border: #{$color--table-border};
    --color--table-focus: #{$color--table-focus};
    --color--table-hover: #{$color--table-hover};

    --color--fieldset-border: #{$color--fieldset-border};
    --color--fieldset-header: #{$color--fieldset-header};

    --color--tabs-marker-hover: #{$color--tabs-marker-hover};
    --color--tabs-marker-active: #{$color--tabs-marker-active};

    --color--button-inactive-background: #{$color--button-inactive-background};
    --color--button-inactive-background-contrast: #{$color--button-inactive-background-contrast};
    --color--button-inactive-border: #{$color--button-inactive-border};

    --color--radiobuttonset-background: #{$color--radiobuttonset-background};
    --color--radiobuttonset-background-selected: #{$color--radiobuttonset-background-selected};
    --color--radiobuttonset-border: #{$color--radiobuttonset-border};

    --color--input-field-border: #{$color--input-field-border};
    --color--input-field-background: #{$color--input-field-background};

    --color--divider: #{$color--divider};
    --color--line: #{$color--line};

    --color--shadow: #{$color--shadow};
    --color--focus: #{$color--focus};

    --color--warning: #{$color--warning};
    --color--warning-secondary: #{$color--warning-secondary};
    --color--warning-contrast: #{$color--warning-contrast};
    --color--warning-secondary-contrast: #{$color--warning-secondary-contrast};

    --color--attention: #{$color--attention};
    --color--attention-secondary: #{$color--attention-secondary};
    --color--attention-contrast: #{$color--attention-contrast};
    --color--attention-secondary-contrast: #{$color--attention-secondary-contrast};

    --color--good: #{$color--good};
    --color--good-secondary: #{$color--good-secondary};
    --color--good-contrast: #{$color--good-contrast};
    --color--good-secondary-contrast: #{$color--good-secondary-contrast};

    --color--info: #{$color--info};
    --color--info-secondary: #{$color--info-secondary};
    --color--info-contrast: #{$color--info-contrast};
    --color--info-secondary-contrast: #{$color--info-secondary-contrast};

    --color--image-placeholder-background: #{$color--image-placeholder-background};
    --color--image-placeholder-icon: #{$color--image-placeholder-icon};

    --color--header-inverted: #{$color-header-inverted};

    --color--calendar-today: #{$color--calendar-today};

    --border-radius-default: #{$border-radius};
    --border-radius-avatar-menu: #{$border-radius-avatar-menu};
    --border-radius-search: #{$border-radius-search};

    @media (prefers-reduced-motion) {
        --transition-duration: 0s;
        --transition-duration-slow: 0s;
    }
}