gcp-material-ui 0.0.4

package/src/styles.scss

@@ -0,0 +1,739 @@
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use '@angular/material' as mat;
+@use './variables' as *;
+
+html {
+  height: 100%;
+
+  // Include core styles for Angular Material
+  @include mat.core();
+
+  // Apply the custom M3 theme
+  @include mat.all-component-themes($my-theme);
+
+  // Global Mat Icon Button Size Override using Angular Material Override System
+  @include mat.icon-button-overrides(
+    (
+      'icon-size': 18px,
+    )
+  );
+
+  // Global Table Styling Overrides
+}
+
+body {
+  color-scheme: light;
+  margin: 0;
+  height: 100%;
+
+  // Custom Body Styles
+  color: #202124;
+  font-weight: var(--cm-sys-type-body-medium-font-weight);
+  font-size: var(--cm-sys-type-body-medium-font-size);
+  line-height: var(--cm-sys-type-body-medium-line-height);
+  font-family: var(--cm-sys-type-body-medium-font-family);
+  letter-spacing: normal;
+  line-height: 16px;
+}
+
+p {
+  margin-bottom: 16px;
+  margin-top: 0;
+  color: #202124;
+  font-weight: var(--cm-sys-type-body-medium-font-weight);
+  font-size: var(--cm-sys-type-body-medium-font-size);
+  line-height: var(--cm-sys-type-body-medium-line-height);
+  font-family: var(--cm-sys-type-body-medium-font-family);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.btn-small.mat-mdc-button-base {
+  height: 28px !important;
+  --mat-button-container-height: 28px !important;
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+
+mat-toolbar {
+  border-bottom: 1px solid #e8eaed;
+
+  // Title spacing
+  > span:first-child {
+    margin: 0 48px 0 0px;
+  }
+}
+
+/* Pagination Overrides - Global */
+.mat-mdc-paginator {
+  .mdc-notched-outline {
+    display: none !important; /* Remove Select border outline */
+  }
+
+  .mat-mdc-form-field-flex {
+    background: transparent !important; /* Remove default background fill */
+    padding: 0 !important; /* Remove container padding overlap */
+  }
+
+  .mat-mdc-select-value {
+    font-size: 13px !important; /* Align height matching rest sets */
+  }
+}
+
+
+:root {
+  // --- Typography Reference Variables ---
+  --cm-ref-type-family-display: Google Sans, sans-serif;
+  --cm-ref-type-family-body: Roboto, sans-serif;
+  --cm-ref-type-family-code: Roboto Mono, monospace;
+  --cm-ref-type-weight-bold: 700;
+  --cm-ref-type-weight-medium: 500;
+  --cm-ref-type-weight-regular: 400;
+  --cm-ref-type-size-11: 11px;
+  --cm-ref-type-size-12: 12px;
+  --cm-ref-type-size-14: 14px;
+  --cm-ref-type-size-16: 16px;
+  --cm-ref-type-size-18: 18px;
+  --cm-ref-type-size-20: 20px;
+  --cm-ref-type-size-22: 22px;
+  --cm-ref-type-size-24: 24px;
+  --cm-ref-type-size-28: 28px;
+  --cm-ref-type-size-32: 32px;
+  --cm-ref-type-size-36: 36px;
+  --cm-ref-type-size-44: 44px;
+  --cm-ref-type-size-56: 56px;
+  --cm-ref-type-line-height-16: 16px;
+  --cm-ref-type-line-height-20: 20px;
+  --cm-ref-type-line-height-24: 24px;
+  --cm-ref-type-line-height-28: 28px;
+  --cm-ref-type-line-height-32: 32px;
+  --cm-ref-type-line-height-36: 36px;
+  --cm-ref-type-line-height-40: 40px;
+  --cm-ref-type-line-height-44: 44px;
+  --cm-ref-type-line-height-52: 52px;
+  --cm-ref-type-line-height-64: 64px;
+
+  // --- Typography System Variables ---
+  --cm-sys-type-display-large: 400 3.5rem / 4rem Google Sans, sans-serif;
+  --cm-sys-type-display-large-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-display-large-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-display-large-font-size: var(--cm-ref-type-size-56);
+  --cm-sys-type-display-large-line-height: var(--cm-ref-type-line-height-64);
+  --cm-sys-type-display-medium: 400 2.75rem / 3.25rem Google Sans, sans-serif;
+  --cm-sys-type-display-medium-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-display-medium-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-display-medium-font-size: var(--cm-ref-type-size-44);
+  --cm-sys-type-display-medium-line-height: var(--cm-ref-type-line-height-52);
+  --cm-sys-type-display-small: 400 2.25rem / 2.75rem Google Sans, sans-serif;
+  --cm-sys-type-display-small-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-display-small-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-display-small-font-size: var(--cm-ref-type-size-36);
+  --cm-sys-type-display-small-line-height: var(--cm-ref-type-line-height-44);
+  --cm-sys-type-headline-large: 400 2rem / 2.5rem Google Sans, sans-serif;
+  --cm-sys-type-headline-large-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-headline-large-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-headline-large-font-size: var(--cm-ref-type-size-32);
+  --cm-sys-type-headline-large-line-height: var(--cm-ref-type-line-height-40);
+  --cm-sys-type-headline-medium: 400 1.75rem / 2.25rem Google Sans, sans-serif;
+  --cm-sys-type-headline-medium-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-headline-medium-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-headline-medium-font-size: var(--cm-ref-type-size-28);
+  --cm-sys-type-headline-medium-line-height: var(--cm-ref-type-line-height-36);
+  --cm-sys-type-headline-small: 400 1.5rem / 2rem Google Sans, sans-serif;
+  --cm-sys-type-headline-small-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-headline-small-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-headline-small-font-size: var(--cm-ref-type-size-24);
+  --cm-sys-type-headline-small-line-height: var(--cm-ref-type-line-height-32);
+  --cm-sys-type-title-large: 400 1.375rem / 1.75rem Google Sans, sans-serif;
+  --cm-sys-type-title-large-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-title-large-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-title-large-font-size: var(--cm-ref-type-size-22);
+  --cm-sys-type-title-large-line-height: var(--cm-ref-type-line-height-28);
+  --cm-sys-type-title-medium: 400 1.25rem / 1.5rem Google Sans, sans-serif;
+  --cm-sys-type-title-medium-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-title-medium-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-title-medium-font-size: var(--cm-ref-type-size-20);
+  --cm-sys-type-title-medium-line-height: var(--cm-ref-type-line-height-24);
+  --cm-sys-type-title-small: 400 1.125rem / 1.5rem Google Sans, sans-serif;
+  --cm-sys-type-title-small-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-title-small-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-title-small-font-size: var(--cm-ref-type-size-18);
+  --cm-sys-type-title-small-line-height: var(--cm-ref-type-line-height-24);
+  --cm-sys-type-label-large: 500 1rem / 1.5rem Google Sans, sans-serif;
+  --cm-sys-type-label-large-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-label-large-font-weight: var(--cm-ref-type-weight-medium);
+  --cm-sys-type-label-large-font-size: var(--cm-ref-type-size-16);
+  --cm-sys-type-label-large-line-height: var(--cm-ref-type-line-height-24);
+  --cm-sys-type-label-medium: 500 0.875rem / 1.25rem Google Sans, sans-serif;
+  --cm-sys-type-label-medium-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-label-medium-font-weight: var(--cm-ref-type-weight-medium);
+  --cm-sys-type-label-medium-font-size: var(--cm-ref-type-size-14);
+  --cm-sys-type-label-medium-line-height: var(--cm-ref-type-line-height-20);
+  --cm-sys-type-label-small: 500 0.75rem / 1rem Google Sans, sans-serif;
+  --cm-sys-type-label-small-font-family: var(--cm-ref-type-family-display);
+  --cm-sys-type-label-small-font-weight: var(--cm-ref-type-weight-medium);
+  --cm-sys-type-label-small-font-size: var(--cm-ref-type-size-12);
+  --cm-sys-type-label-small-line-height: var(--cm-ref-type-line-height-16);
+  --cm-sys-type-body-large: 400 1rem / 1.5rem Roboto, sans-serif;
+  --cm-sys-type-body-large-font-family: var(--cm-ref-type-family-body);
+  --cm-sys-type-body-large-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-body-large-font-size: var(--cm-ref-type-size-16);
+  --cm-sys-type-body-large-line-height: var(--cm-ref-type-line-height-24);
+  --cm-sys-type-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
+  --cm-sys-type-body-medium-font-family: var(--cm-ref-type-family-body);
+  --cm-sys-type-body-medium-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-body-medium-font-size: var(--cm-ref-type-size-14);
+  --cm-sys-type-body-medium-line-height: var(--cm-ref-type-line-height-20);
+  --cm-sys-type-body-small: 400 0.75rem / 1rem Roboto, sans-serif;
+  --cm-sys-type-body-small-font-family: var(--cm-ref-type-family-body);
+  --cm-sys-type-body-small-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-body-small-font-size: var(--cm-ref-type-size-12);
+  --cm-sys-type-body-small-line-height: var(--cm-ref-type-line-height-16);
+  --cm-sys-type-code: 400 0.75rem / 1rem Roboto Mono, monospace;
+  --cm-sys-type-code-font-family: var(--cm-ref-type-family-code);
+  --cm-sys-type-code-font-weight: var(--cm-ref-type-weight-regular);
+  --cm-sys-type-code-font-size: var(--cm-ref-type-size-12);
+  --cm-sys-type-code-line-height: var(--cm-ref-type-line-height-16);
+
+  // --- Typography Utility Classes ---
+  .cm-t-display-large {
+    font: var(--cm-sys-type-display-large);
+  }
+  .cm-t-display-medium {
+    font: var(--cm-sys-type-display-medium);
+  }
+  .cm-t-display-small {
+    font: var(--cm-sys-type-display-small);
+  }
+  .cm-t-headline-large {
+    font: var(--cm-sys-type-headline-large);
+  }
+  .cm-t-headline-medium {
+    font: var(--cm-sys-type-headline-medium);
+  }
+  .cm-t-headline-small {
+    font: var(--cm-sys-type-headline-small);
+  }
+  .cm-t-title-large {
+    font: var(--cm-sys-type-title-large);
+  }
+  .cm-t-title-medium {
+    font: var(--cm-sys-type-title-medium);
+  }
+  .cm-t-title-small {
+    font: var(--cm-sys-type-title-small);
+  }
+  .cm-t-label-large {
+    font: var(--cm-sys-type-label-large);
+  }
+  .cm-t-label-medium {
+    font: var(--cm-sys-type-label-medium);
+  }
+  .cm-t-label-small {
+    font: var(--cm-sys-type-label-small);
+  }
+  .cm-t-body-large {
+    font: var(--cm-sys-type-body-large);
+  }
+  .cm-t-body-medium {
+    font: var(--cm-sys-type-body-medium);
+  }
+  .cm-t-body-small {
+    font: var(--cm-sys-type-body-small);
+  }
+  .cm-t-code {
+    font: var(--cm-sys-type-code);
+  }
+
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+    top: calc(22px / 2) !important;
+  }
+  @include mat.select-overrides(
+    (
+      panel-background-color: #fff,
+      trigger-text-size: 14px,
+    )
+  );
+  @include mat.stepper-overrides(
+    (
+      header-height: 44px,
+      header-label-text-size: 20px,
+      header-selected-state-label-text-size: 20px,
+      header-label-text-weight: 400,
+      header-selected-state-label-text-weight: 400,
+    )
+  );
+
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-background-color: #fff,
+      calendar-container-elevation-shadow: 0 0 0 1px #dadce0,
+      calendar-container-shape: 0px,
+    )
+  );
+
+  @include mat.list-overrides(
+    (
+      list-item-leading-icon-size: 18px,
+      list-item-label-text-size: 0.875rem,
+      list-item-leading-icon-start-space: 8px,
+    )
+  );
+  @include mat.toolbar-overrides(
+    (
+      standard-height: 50px,
+      container-background-color: #fff,
+      title-text-size: 18px,
+    )
+  );
+  @include mat.sidenav-overrides(
+    (
+      content-background-color: #fff,
+      container-shape: 0px,
+    )
+  );
+  @include mat.button-overrides(
+    (
+      filled-container-shape: 4px,
+      filled-container-height: 32px,
+      filled-horizontal-padding: 12px,
+      filled-icon-offset: 0px,
+      filled-label-text-font: (
+        '"Google Sans"',
+        Roboto,
+        Arial,
+        sans-serif,
+      ),
+      filled-label-text-size: 0.875rem,
+      filled-label-text-tracking: 0.0107143em,
+      filled-label-text-weight: 500,
+
+      outlined-container-shape: 4px,
+      outlined-container-height: 32px,
+      outlined-horizontal-padding: 12px,
+      outlined-outline-color: #dadce0,
+      /* Change edge from blue to grey default */ outlined-icon-offset: 0px,
+      outlined-label-text-font: (
+        '"Google Sans"',
+        Roboto,
+        Arial,
+        sans-serif,
+      ),
+      outlined-label-text-size: 0.875rem,
+      outlined-label-text-tracking: 0.0107143em,
+      outlined-label-text-weight: 500,
+      outlined-label-text-color: #5f6368,
+
+      text-container-shape: 4px,
+      text-container-height: 32px,
+      text-horizontal-padding: 12px,
+      text-with-icon-horizontal-padding: 12px,
+      text-icon-offset: 0px,
+      text-label-text-font: (
+        '"Google Sans"',
+        Roboto,
+        Arial,
+        sans-serif,
+      ),
+      text-label-text-size: 0.875rem,
+      text-label-text-tracking: 0.0107143em,
+      text-label-text-weight: 500,
+      text-label-text-color: #5f6368,
+    )
+  );
+
+  @include mat.expansion-overrides(
+    (
+      container-elevation-shadow: none,
+      header-text-weight: 400,
+    )
+  );
+
+  @include mat.dialog-overrides(
+    (
+      container-shape: 8px,
+      subhead-weight: 400,
+      subhead-size: 20px,
+    )
+  );
+
+  @include mat.card-overrides(
+    (
+      elevated-container-elevation: 0 0 0 1px #dadce0,
+      elevated-container-shape: 8px,
+      outlined-container-shape: 8px,
+      outlined-outline-color: #000,
+      outlined-outline-width: 1px,
+      title-text-size: 20px,
+      subtitle-text-size: 14px,
+      subtitle-text-weight: 500,
+      subtitle-text-color: rgba(0, 0, 0, 0.54),
+    )
+  );
+  @include mat.table-overrides(
+    (
+      background-color: #fff,
+      header-container-height: 32px,
+      row-item-container-height: 32px,
+      header-headline-color: #3c4043,
+      row-item-label-text-size: 14px,
+      row-item-outline-color: #dadce0,
+      row-item-label-text-color: #3c4043,
+    )
+  );
+
+  @include mat.form-field-overrides(
+    (
+      /* Filled Color Tokens */ 'filled-caret-color': $blue600,
+      'filled-focus-label-text-color': $blue600,
+      'filled-focus-active-indicator-color': #185abc,
+      'filled-active-indicator-color': #5f6368,
+      'filled-container-color': #f1f3f4,
+      'filled-disabled-active-indicator-color': rgba(95, 99, 104, 0.38),
+      'filled-disabled-container-color': rgba(95, 99, 104, 0.04),
+      'filled-disabled-input-text-color': rgba(60, 64, 67, 0.38),
+      'filled-disabled-label-text-color': rgba(95, 99, 104, 0.38),
+      'filled-error-active-indicator-color': #c5221f,
+      'filled-error-caret-color': #c5221f,
+      'filled-error-focus-active-indicator-color': #c5221f,
+      'filled-error-hover-active-indicator-color': #a50e0e,
+      'filled-error-hover-label-text-color': #a50e0e,
+      'filled-error-label-text-color': #c5221f,
+      'filled-hover-active-indicator-color': #202124,
+      'filled-hover-label-text-color': #202124,
+      'filled-input-text-color': #3c4043,
+      'filled-input-text-placeholder-color': #5f6368,
+      'filled-label-text-color': #5f6368,
+
+      /* Outlined Color Tokens */ 'outlined-caret-color': $blue600,
+      'outlined-focus-label-text-color': $blue600,
+      'outlined-focus-outline-color': $blue600,
+      'outlined-disabled-input-text-color': rgba(60, 64, 67, 0.38),
+      'outlined-disabled-label-text-color': rgba(95, 99, 104, 0.38),
+      'outlined-disabled-outline-color': rgba(60, 64, 67, 0.12),
+      'outlined-error-caret-color': #d93025,
+      'outlined-error-focus-outline-color': #d93025,
+      'outlined-error-hover-label-text-color': #a50e0e,
+      'outlined-error-hover-outline-color': #a50e0e,
+      'outlined-error-label-text-color': #d93025,
+      'outlined-error-outline-color': #d93025,
+      'outlined-hover-label-text-color': #202124,
+      'outlined-hover-outline-color': #202124,
+      'outlined-input-text-color': #3c4043,
+      'outlined-input-text-placeholder-color': #5f6368,
+      'outlined-label-text-color': #5f6368,
+      'outlined-outline-color': #80868b,
+
+      /* General/Disabled Inputs */ 'disabled-input-text-placeholder-color': rgba(60, 64, 67, 0.38),
+      /* Typography */ 'container-text-font': (Roboto, Arial, sans-serif),
+      'container-text-line-height': 36px,
+      'container-text-size': 0.875rem,
+      'outlined-label-text-size': 0.875rem,
+      'container-vertical-padding': 0px,
+      'container-text-weight': 400,
+      container-height: 36px,
+      'container-text-tracking': 0.00625em
+    )
+  );
+
+  @include mat.tabs-overrides(
+    (
+      active-indicator-color: $blue600,
+      active-label-text-color: $blue600,
+      active-focus-indicator-color: $blue600,
+      active-hover-indicator-color: $blue600,
+      active-focus-label-text-color: $blue600,
+      active-hover-label-text-color: $blue600,
+      inactive-label-text-color: $grey700,
+      inactive-focus-label-text-color: $grey700,
+      inactive-hover-label-text-color: $grey700,
+      container-height: 36px,
+    )
+  );
+
+  /* Explicit Primary Button overrides */
+  .mat-mdc-button.mat-primary {
+    color: $blue600 !important;
+  }
+  .mat-mdc-outlined-button.mat-primary {
+    color: $blue600 !important;
+    border-color: $blue600 !important; /* Forces primary blue border frame */
+  }
+  .mat-mdc-flat-button.mat-primary,
+  .mat-mdc-raised-button.mat-primary,
+  .mat-mdc-unelevated-button.mat-primary {
+    background-color: $blue600 !important;
+    color: #fff !important; /* Continuous contrast setups */
+  }
+
+  mat-form-field {
+    .mat-icon {
+      height: 18px;
+      width: 18px;
+      font-size: 18px;
+      padding: 0;
+    }
+    .mat-mdc-form-field-icon-prefix,
+    [dir='rtl'] .mat-mdc-form-field-icon-suffix,
+    .mat-mdc-form-field-icon-suffix,
+    [dir='rtl'] .mat-mdc-form-field-icon-prefix {
+      padding: 0 8px;
+    }
+  }
+  .mat-mdc-table {
+    @include mat.checkbox-overrides(
+      (
+        touch-target-size: 18px,
+        state-layer-size: 18px,
+      )
+    );
+    .mat-column-select {
+      width: 50px;
+      text-align: center;
+    }
+    a {
+      color: var(--mat-sys-primary, #1a73e8);
+      text-decoration: underline;
+      cursor: pointer;
+      font-weight: 400;
+    }
+  }
+
+  .mat-mdc-option {
+    max-height: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  .mat-mdc-option:focus.mdc-list-item,
+  .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+    background-color: $blue50;
+
+    .mdc-list-item__primary-text {
+      color: $blue900;
+    }
+  }
+
+  .mat-mdc-option .mdc-list-item__primary-text {
+    font-size: 14px;
+  }
+
+  .details-table {
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid $grey100;
+    margin-top: 16px;
+    margin-bottom: 24px;
+  }
+
+  .table-row {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    border-bottom: 1px solid $grey100;
+    align-items: center;
+    min-height: 30px;
+
+    &:hover {
+      background-color: $grey50;
+    }
+  }
+
+  .table-label {
+    font-size: 14px;
+    color: $grey800;
+    font-weight: 500;
+  }
+
+  .table-value {
+    font-size: 14px;
+    color: $grey900;
+  }
+
+  .form-container {
+    max-width: 600px;
+    margin-top: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .row {
+      display: flex;
+      gap: 16px;
+
+      mat-form-field {
+        flex: 1;
+      }
+    }
+
+    .actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+      justify-content: flex-start; // Align left
+    }
+  }
+
+  /* --- Global Table & Filter Layout Support --- */
+  .filter-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid #e8eaed;
+    border-top: 1px solid #e8eaed;
+    width: 100%;
+    background-color: #ffffff;
+    box-sizing: border-box; /* Match edge renders */
+
+    mat-icon {
+      color: rgba(0, 0, 0, 0.54);
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+
+    .filter-title {
+      font-weight: 500;
+      font-size: 13px;
+      color: #3c4043;
+    }
+
+    .filter-input {
+      border: none;
+      outline: none;
+      flex: 1;
+      font-size: 13px;
+      color: #3c4043;
+      background: transparent;
+
+      &::placeholder {
+        color: #9aa0a6;
+      }
+    }
+  }
+
+  .table-container {
+    overflow: auto;
+  }
+
+  table {
+    width: 100%;
+  }
+
+  .mat-mdc-row:hover {
+    background-color: #f8f8f8;
+  }
+
+  .mat-mdc-row.selected {
+    background-color: #e8f0fe !important;
+  }
+
+  .mat-mdc-header-row {
+    background-color: #f1f3f4;
+  }
+
+  .mat-mdc-header-cell {
+    color: #3c4043;
+    font-weight: 500;
+    padding: 0 8px;
+  }
+
+  .mat-mdc-cell {
+    color: #3c4043;
+    padding: 0 8px;
+  }
+
+  mat-toolbar {
+    .mat-icon {
+      line-height: 20px;
+    }
+  }
+  // --- Global Heading Typography Styles ---
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: $grey900;
+    font-weight: var(--cm-ref-type-weight-regular);
+    font-family: var(--cm-ref-type-family-display);
+  }
+
+  h1 {
+    font-size: var(--cm-sys-type-title-large-font-size);
+  }
+  h2 {
+    font-size: var(--cm-sys-type-title-medium-font-size);
+  }
+  h3 {
+    font-size: var(--cm-sys-type-title-small-font-size);
+  }
+  h4 {
+    font-size: var(--cm-sys-type-body-large-font-size);
+  }
+
+  .default-container-padding {
+    padding: 24px;
+  }
+
+  .mdc-switch__track {
+    height: 15px;
+
+    &:after {
+      background-color: $blue300;
+    }
+  }
+
+  .mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track::after {
+      border-color: $blue500;
+      border-width: 1px;
+  }
+
+  .mdc-switch--selected:enabled .mdc-switch__handle::after {
+    background-color: $blue500;
+  }
+
+  .mdc-switch--selected .mdc-switch__icon {
+    fill: #fff;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons) {
+    margin: 0;
+  }
+
+  .mdc-switch {
+    width: 40px;
+  }
+
+  .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons) {
+    margin: 0 18px;
+  }
+
+  .code-block {
+    width: 100%;
+    max-width: 800px;
+    background-color: $grey100; // Light gray background
+    color: $grey900; // Dark text
+    padding: 16px;
+    border-radius: 8px;
+    font-family: 'Roboto Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    overflow-x: auto;
+    border: 1px solid $grey300;
+    margin: 0;
+
+    code {
+      white-space: pre-wrap;
+    }
+  }
+}
+
+