example-custom.scss

@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as light;
@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as dark;
@use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors;
@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss' as types;

@use '@bcgov-nr/nr-theme/style-sheets/carbon-components-overrides.scss';

@use '@carbon/type/scss/_font-family.scss' with (
    $font-families: types.$type-family,
    $font-weights: types.$font-weights
);

// Set the correct light theme
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with (
    $fallback: themes.$white,
    $theme: (
        light.$light-theme,
    )
);
@use '@carbon/themes/scss/utilities';

// Buttons, tags and notifications components tokens doesn't work properly
// when setting directly on the theme, so we override the tokens directly
// on the components
// (Open issue: https://github.com/carbon-design-system/carbon/issues/12376)
@use '@carbon/react/scss/components/button/tokens' as button-tokens;
@use '@bcgov-nr/nr-theme/design-tokens/light-buttons.scss' as
    light-button-overrides;
@use '@bcgov-nr/nr-theme/design-tokens/dark-buttons.scss' as
    dark-button-overrides;

@use '@carbon/react/scss/components/tag/tokens' as tag-tokens;
@use '@bcgov-nr/nr-theme/design-tokens/light-tags.scss' as light-tag-overrides;
@use '@bcgov-nr/nr-theme/design-tokens/dark-tags.scss' as dark-tag-overrides;

@use '@carbon/react/scss/components/notification/tokens' as notification-tokens;
@use '@bcgov-nr/nr-theme/design-tokens/light-notifications.scss' as
    light-notification-overrides;
@use '@bcgov-nr/nr-theme/design-tokens/dark-notifications.scss' as
    dark-notification-overrides;

@use '@carbon/react';
@use '@carbon/grid';

// Emit the flex-grid styles
@include grid.flex-grid();

:root {
    @include theme.theme();
}

[data-carbon-theme='g100'] {
    $button-tokens: utilities.merge(
        button-tokens.$button-tokens,
        dark-button-overrides.$dark-button-token-overrides
    );

    $tag-tokens: utilities.merge(
        tag-tokens.$tag-tokens,
        dark-tag-overrides.$dark-tag-token-overrides
    );

    $notification-tokens: utilities.merge(
        notification-tokens.$notification-tokens,
        dark-notification-overrides.$dark-notification-token-overrides
    );

    @include theme.add-component-tokens($button-tokens);
    @include theme.add-component-tokens($tag-tokens);
    @include theme.add-component-tokens($notification-tokens);
    @include react.theme(dark.$dark-theme);
}

[data-carbon-theme='g10'] {
    $button-tokens: utilities.merge(
        button-tokens.$button-tokens,
        light-button-overrides.$light-button-token-overrides
    );

    $tag-tokens: utilities.merge(
        tag-tokens.$tag-tokens,
        light-tag-overrides.$light-tag-token-overrides
    );

    $notification-tokens: utilities.merge(
        notification-tokens.$notification-tokens,
        light-notification-overrides.$light-notification-token-overrides
    );

    @include theme.add-component-tokens($button-tokens);
    @include theme.add-component-tokens($tag-tokens);
    @include theme.add-component-tokens($notification-tokens);
    @include react.theme(light.$light-theme);
}