@atlassian/aui/src/less/imports/aui-theme/theme.less

Atlassian User Interface library

@import (reference) 'core-variables';
@import (reference) 'component-variables';
@import (reference) '../mixins/look-and-feel';
@import './design-tokens';
@import '@atlassian/aui/entry/token-themes-generated/aui-prototyping-lf-extracted-color-channels';

:root {
    #aui-themes.design-tokens();
}

// The L&F switched colors are dependent on color channels of the design
// tokens, so will be available only when design tokens are loaded.
#aui.lf-define-switched-color(
    @switch-on: --atl-theme-header-bg-color;
    @token: '--ds-text';
);
#aui.lf-define-switched-color(
    @switch-on: --atl-theme-header-bg-color;
    @token: '--ds-background-neutral-hovered';
);
#aui.lf-define-switched-color(
    @switch-on: --atl-theme-header-bg-color;
    @token: '--ds-background-neutral-subtle-pressed';
);
#aui.lf-define-switched-color(
    @switch-on: --atl-theme-header-primary-button-bg-color;
    @token: '--ds-text-inverse';
);
#aui.lf-define-switched-color(
    @switch-on: --atl-theme-header-bg-color;
    @token: '--ds-icon';
);

#aui.lf-define-tinted-color(
    @input-color: --atl-theme-header-bg-color;
    @tinting-mode: contrasting;
);
#aui.lf-define-tinted-color(
    @input-color: --atl-theme-header-primary-button-bg-color;
    @tinting-mode: slight;
);

#aui-themes {
    .when-light-mode(@rules) {
        html:not([data-color-mode]),
        html[data-color-mode='light'] {
            @rules();
        }
        @media (prefers-color-scheme: light) {
            html[data-color-mode-auto]:not([data-color-mode]) {
                @rules();
            }
        }
    }
    .when-dark-mode(@rules) {
        html[data-color-mode='dark'] {
            @rules();
        }
        @media (prefers-color-scheme: dark) {
            html[data-color-mode-auto]:not([data-color-mode]) {
                @rules();
            }
        }
    }
}