globals.scss

@use "@carbon/react";
@use "@/components/AppHeader/app-header";
@use "@/components/AppHeader/profile-panel";
@use "@/components/QAPanel/qa-panel";
@use "@/components/InitialMessage/initial-message";
@use "@/components/QuickChatButton/quick-chat-button";
@use "@/components/Avatar/avatar";
@use "@/app/home/landing-page";
@use "@carbon/styles/scss/theme";
@use "@carbon/styles/scss/themes";

@mixin light {
  @include theme.theme(themes.$g10);
}

@mixin dark {
  @include theme.theme(themes.$g100);
}

// :root[data-carbon-theme='g10'] {
//   @include theme.theme(themes.$g10);
// }

// :root[data-carbon-theme='g100'] {
//   @include theme.theme(themes.$g100);
// }

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  overflow: visible;
  // background-color: $ui-background;
  // color: $text-01;
}

/// Remove overrides once Carbon bugs are fixed upstream.
/// Need grid option to not add page gutters at large viewports, to also use when nesting grids
/// @link https://github.com/carbon-design-system/carbon/issues/2792
@media (min-width: 42rem) {
  .cds--grid--no-gutter {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/// Padding was introduced in 10.3.0, needs an option to let grid set the viewport gutter
/// @link https://github.com/carbon-design-system/carbon/issues/3010
.cds--content {
  margin-top: 3rem;
  background: var(--cds-background);
}

// data theme

body[data-theme="light"] {
  @include light;
}

body[data-theme="dark"] {
  @include dark;

  color-scheme: dark;
}

header[data-theme="dark"] {
  @include dark;
}

header[data-theme="light"] {
  @include light;
}

@media (prefers-color-scheme: light) {
  body[data-theme="system"] {
    @include light;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-theme="system"] {
    @include dark;

    color-scheme: dark;
  }
}