devtools/projects/ng-devtools/src/styles/_global.scss - main - githubmirror/angular

devtools/projects/ng-devtools/src/styles/_global.scss
131 строка3 KB
Edu
refactor(devtools): convert router details panel to description list
10 июн 2026, 20:23
10 июн 2026, 20:23781cc84
/* Global styles imported in the main styles.scss of the app wrapper (shell, demo apps). */

@use 'sass:map';
@use '@angular/material' as mat;
@use './colors' as clr;
@use './typography' as tg;
@use './overrides' as ovr;
@use './theme' as th;
@use './inputs';
@use './tables';
@use './dl';
@use '../lib/devtools-tabs/directive-explorer/property-pane/property-view/property-view-body/prop-actions-menu/prop-actions-menu-cdk';

@include mat.all-component-typographies();
@include mat.core();
@include clr.root-colors();
@include tg.fonts();

$body-tg-level: mat.m2-define-typography-level(
  $font-family: tg.$font-family,
  $font-weight: 400,
  $font-size: tg.$font-size,
  $line-height: 1rem,
  $letter-spacing: normal,
);

$typography: mat.m2-define-typography-config(
  $font-family: tg.$font-family,
  $body-1: $body-tg-level,
  $body-2: $body-tg-level,
);

// Light theme
$light-primary: mat.m2-define-palette(mat.$m2-grey-palette, 700, 200);
$light-accent: mat.m2-define-palette(mat.$m2-blue-palette, 800);
$light-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $light-primary,
      accent: $light-accent,
    ),
  )
);

// Dark theme
$dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette, 50);
$dark-accent: mat.m2-define-palette(mat.$m2-blue-palette, 200);
$dark-theme: map.deep-merge(
  mat.m2-define-dark-theme(
    (
      color: (
        primary: $dark-primary,
        accent: $dark-accent,
      ),
    )
  ),
  (
    'color': (
      'background': (
        background: map.get(clr.$colors, gray-800),
        card: map.get(clr.$colors, gray-800),
      ),
      'foreground': (
        text: map.get(clr.$colors, gray-200),
      ),
    ),
    'background': (
      background: map.get(clr.$colors, gray-800),
      card: map.get(clr.$colors, gray-800),
    ),
    'foreground': (
      'text': map.get(clr.$colors, gray-200),
    ),
    'typography': $typography,
  )
);

@include th.light-theme(true) {
  color-scheme: light;
  @include mat.all-component-themes($light-theme);
}

@include th.dark-theme(true) {
  color-scheme: dark;
  @include mat.all-component-themes($dark-theme);
}

:root {
  @include ovr.mat-cmp-overrides();
}

body {
  padding: 0;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  @extend %body-01;
}

a {
  /*
    There are some anchor instance inside mat elements
    that inherit the mat parent font styles; hence, we
    need to have an explicit override.
  */
  @extend %body-01;
  color: var(--dynamic-blue-02);
}

.multiline-tooltip {
  white-space: pre-line;
}

[hidden] {
  display: none !important;
}

hr {
  width: 100%;
  height: 1px;
  background-color: var(--color-separator);
  border: none;
  margin-block: 0.875rem;
}

.ver-ruler {
  width: 1px;
  height: 100%;
  background-color: var(--color-separator);
  margin-inline: 0.875rem;
}