ng-configcat-publicapi-ui 4.2.2 → 5.0.0

package/src/css/theme.scss

@@ -0,0 +1,47 @@
+@use "@angular/material" as mat;
+@use "./vars/theme.scss";
+
+@include mat.elevation-classes();
+@include mat.app-background();
+
+$typography: mat.m2-define-typography-config(
+  $font-family: 'Montserrat, Roboto, "Helvetica Neue", sans-serif',
+  $subtitle-1: mat.m2-define-typography-level(16px, 28px, 700),
+  $body-1: mat.m2-define-typography-level(13px, 24px, 400),
+);
+
+$light-primary: mat.m2-define-palette(mat.$m2-orange-palette, 400);
+$light-accent: mat.m2-define-palette(mat.$m2-grey-palette, 50);
+$light-warn: mat.m2-define-palette(mat.$m2-red-palette);
+
+$light-theme: mat.m2-define-light-theme(
+  (
+    color: (
+      primary: $light-primary,
+      accent: $light-accent,
+      warn: $light-warn,
+    ),
+    typography: $typography,
+    density: -1,
+  )
+);
+
+$dark-primary: mat.m2-define-palette(theme.$dark-theme-primary-color-palette, 500);
+$dark-accent: mat.m2-define-palette(mat.$m2-grey-palette, 50);
+$dark-warn: mat.m2-define-palette(theme.$dark-theme-warn-color-palette, 400);
+
+$dark-theme: mat.m2-define-dark-theme(
+  (
+    color: (
+      primary: $dark-primary,
+      accent: $dark-accent,
+      warn: $dark-warn,
+    ),
+  )
+);
+
+@include mat.all-component-themes($light-theme);
+
+[data-theme="dark"] {
+  @include mat.all-component-colors($dark-theme);
+}

package/src/css/tooltip.scss

@@ -0,0 +1,12 @@
+html > body {
+  // there's a bug where tooltips are preventing the scroll on touch devices
+  // https://github.com/angular/components/issues/25566
+  .mat-mdc-tooltip-trigger {
+    touch-action: auto !important;
+    -webkit-user-drag: auto !important;
+  }
+
+  .multiline-tooltip {
+    white-space: pre-line;
+  }
+}

package/src/css/variables.scss

@@ -0,0 +1,324 @@
+@use "@angular/material" as mat;
+@use "sass:color";
+
+@use "./vars/icon";
+@use "./vars/box";
+@use "./vars/banner";
+@use "./vars/auth";
+@use "./vars/header";
+@use "./vars/config-overview" as co;
+@use "./vars/flag";
+@use "./vars/overview";
+@use "./vars/sidenav";
+@use "./vars/prism";
+@use "./vars/logo";
+@use "./vars/notification.scss";
+@use "./vars/theme.scss";
+
+:root {
+  --color-scheme: light;
+  --theme-color: #{theme.$primary-color};
+  --page-background-color: white;
+  --boxed-management-page-background-color: #f8f8f8;
+  --code-highlight-background-color: #e0e0e0;
+  --link-color: var(--theme-color);
+  --text-color: #{theme.$text-color};
+  --error-text-color: red;
+  --success-text-color: #4caf50;
+  --menu-icon-color: #0000008a;
+  --tab-border-bottom-color: #0000001f;
+  --reorder-icon-color: #6b6b6b;
+  --environment-color-opacity: 0.8;
+  --breadcrumb-dropdown-colored-shade-background: #9c9c9c;
+  --environment-color-bar-shade-background: #9c9c9c;
+  --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.3)};
+  --popup-panel-border: none;
+
+  // ==== PANEL ====
+  --panel-hint-color: #{color.adjust(theme.$text-color, $lightness: 30%)};
+  --panel-description-color: #{color.adjust(theme.$text-color, $lightness: 10%)};
+  --panel-background-color: white;
+  --panel-border-color: #d4d4d4;
+  --panel-content-box-background-color: #f5f5f5;
+  --panel-content-box-border-color: #d4d4d4;
+
+  // ==== TABLE ====
+  --table-header-color: #ffe2bc;
+  --table-border-color: #e0c7a5;
+  --table-border-height: 1px;
+  --table-border: solid var(--table-border-height) var(--table-border-color);
+  --table-even-row-color: #f8f8f8;
+  --table-border-radius: 4px;
+  --table-cell-border-color: #e0e0e0;
+  --table-status-green: var(--success-text-color);
+  --table-status-red: var(--error-text-color);
+  --table-header-font-weight: 600;
+  --table-row-height: 48px;
+  --table-odd-row-color: white;
+  --table-detail-background: white;
+  --table-row-hover-background: #f5f5f5;
+  --table-row-active-background: #efefef;
+
+  // ==== BUTTON ====
+  --action-icon-button-color: #9e9e9e;
+  --action-icon-button-disabled-opacity: 0.5;
+  --outlined-button-color: #{theme.$primary-color};
+  --diabled-button-color: #99999981;
+  --primary-button-state-layer-color: black;
+  --warn-button-state-layer-color: white;
+
+  // ==== CONTROLS ====
+  --input-outline-focused-color: #{color.adjust(theme.$primary-color, $lightness: 5%)};
+  --input-outline-invalid-color: var(--error-text-color);
+  --input-background: #{theme.$input-background};
+  --input-border-color: #dbdbdb;
+  --input-transparent-background: #{color.adjust(theme.$input-background, $alpha: -0.2)};
+  --input-placeholder-opacity: 0.87;
+
+  // ==== NAV ====
+  --nav-background-color: var(--panel-background-color);
+  --nav-bottom-border-color: var(--panel-border-color);
+
+  --nav-menu-item-font-weight: 500;
+  --nav-menu-item-color: #4d4d4d;
+  --nav-menu-item-active-color: black;
+  --nav-menu-item-active-border-color: #f14321;
+
+  // ==== COPYABLE CONTROL ====
+  --copyable-text-color: #000000be;
+  --copyable-icon-opacity: 0.6;
+  --copyable-border-color: #d6d6d6;
+  --copyable-background-color: #f0f0f0;
+  --copyable-border-color-darker: #b8bdc9;
+  --copyable-background-color-darker: #d9dadf;
+
+  // ==== NEWS ====
+  --news-card-background: #fff3e2;
+  --news-card-border: #e7c697;
+  --news-table-border: #b4b4b4;
+
+  // ==== CODE REFERENCES ====
+  --code-reference-header-background: #fdfdfd;
+  --code-reference-border: #d6d6d6;
+  --code-reference-line-number-highlight: #555555;
+  --code-reference-line-number-separator: #e6e6e6;
+  --code-reference-line-highlight: #77bbd6;
+  --code-reference-line-highlight-border: #acd5e6;
+
+  // ==== REORDER DIALOG ====
+  --reorder-item-background: var(--panel-background-color);
+  --reorder-item-border: var(--panel-border-color);
+
+  // ==== INTEGRATIONS ====
+  --integration-box-background: #fcfcfc;
+
+  // ==== NEW DASHBOARD SNACK ====
+  --new-dashboard-snack-background-color: #f7ec9a;
+  --new-dashboard-snack-text-color: #000000;
+  --new-dashboard-snack-button-background-color: #fdb64b;
+  --new-dashboard-snack-button-background-color-hover: #ffaf38;
+  
+  // ==== BO =====
+  --invoice-box-background: #e7e7e7;
+
+  // ==== LD Migrator ====
+  --ld-migrator-environment-circle-border-color: #666;
+
+  // ==== MATERIAL OVERRIDES ====
+  @include mat.form-field-overrides(
+    (
+      outlined-focus-label-text-color: theme.$primary-color,
+    )
+  );
+  @include mat.snack-bar-overrides(
+    (
+      supporting-text-weight: 500,
+    )
+  );
+  @include mat.checkbox-overrides(
+    (
+      label-text-size: 13px,
+    )
+  );
+
+  [data-theme="dark"] {
+    --color-scheme: dark;
+    --theme-color: #{theme.$primary-color-dark};
+    --page-background-color: #0d1117;
+    --boxed-management-page-background-color: #0f1113;
+    --code-highlight-background-color: #52555a;
+    --link-color: var(--theme-color);
+    --text-color: #{theme.$text-color-dark};
+    --error-text-color: #ff6a6a;
+    --success-text-color: #50c053;
+    --menu-icon-color: white;
+    --tab-border-bottom-color: #30363d;
+    --environment-color-opacity: 0.7;
+    --breadcrumb-dropdown-colored-shade-background: #3b3b3b;
+    --environment-color-bar-shade-background: #3b3b3b;
+    --saving-indicator-backdrop-color: #{color.adjust(black, $alpha: -0.25)};
+    --popup-panel-border: 1px solid #424952;
+
+    // ==== PANEL ====
+    --panel-hint-color: #{color.adjust(theme.$text-color-dark, $lightness: -15%)};
+    --panel-description-color: #{color.adjust(theme.$text-color-dark, $lightness: -10%)};
+    --panel-background-color: #1b1f25;
+    --panel-border-color: #30363d;
+    --panel-content-box-background-color: #22262e;
+    --panel-content-box-border-color: #394049;
+
+    // ==== TABLE ====
+    --table-header-color: #273e4b;
+    --table-border-color: #364c53;
+    --table-border-height: 1px;
+    --table-border: solid var(--table-border-height) var(--table-border-color);
+    --table-even-row-color: #252a31;
+    --table-odd-row-color: #1f242b;
+    --table-border-radius: 4px;
+    --table-cell-border-color: #363c44;
+    --table-status-green: var(--success-text-color);
+    --table-status-red: var(--error-text-color);
+    --table-header-font-weight: 600;
+    --table-row-height: 48px;
+    --table-detail-background: #1b1f25;
+    --table-row-hover-background: #272c35;
+    --table-row-active-background: #272c35;
+
+    // ==== BUTTON ====
+    --action-icon-button-color: #9e9e9e;
+    --action-icon-button-disabled-opacity: 0.5;
+    --outlined-button-color: #{theme.$primary-color-dark};
+    --diabled-button-color: #99999981;
+    --primary-button-state-layer-color: white;
+    --warn-button-state-layer-color: black;
+
+    // ==== CONTROLS ====
+    --input-outline-focused-color: #{color.adjust(theme.$primary-color-dark, $lightness: -10%)};
+    --input-outline-invalid-color: var(--error-text-color);
+    --input-background: #{theme.$input-background-dark};
+    --input-border-color: #474e57;
+    --input-transparent-background: #{color.adjust(theme.$input-background-dark, $alpha: -0.2)};
+    --input-placeholder-opacity: 0.6;
+
+    // ==== NAV ====
+    --nav-background-color: var(--panel-background-color);
+    --nav-bottom-border-color: var(--panel-border-color);
+
+    --nav-menu-item-font-weight: 500;
+    --nav-menu-item-color: #c2c2c2;
+    --nav-menu-item-active-color: #ebebeb;
+    --nav-menu-item-active-border-color: #af3356;
+
+    // ==== COPYABLE CONTROL ====
+    --copyable-text-color: var(--text-color);
+    --copyable-icon-opacity: 0.74;
+    --copyable-border-color: var(--input-border-color);
+    --copyable-background-color: #252a31;
+    --copyable-border-color-darker: #565e69;
+    --copyable-background-color-darker: #343a42;
+
+    // ==== NEWS ====
+    --news-card-background: #1b1f25;
+    --news-card-border: #30363d;
+    --news-table-border: #7a7a7a;
+
+    // ==== CODE REFERENCES ====
+    --code-reference-header-background: #1b1f25;
+    --code-reference-border: #363e46;
+    --code-reference-line-number-highlight: #a8a8a8;
+    --code-reference-line-number-separator: #2b333a;
+    --code-reference-line-highlight: #77bbd6;
+    --code-reference-line-highlight-border: #3e6675;
+
+    // ==== REORDER ====
+    --reorder-item-background: #242a31;
+    --reorder-item-border: var(--panel-content-box-border-color);
+    --reorder-icon-color: var(--action-icon-button-color);
+
+    // ==== INTEGRATIONS ====
+    --integration-box-background: var(--panel-content-box-background-color);
+
+    // ==== NEW DASHBOARD SNACK ====
+    --new-dashboard-snack-background-color: #ebde80;
+    --new-dashboard-snack-button-background-color: #ffa726;
+    --new-dashboard-snack-button-background-color-hover: #ffaf38;
+
+    // ==== BO =====
+    --invoice-box-background: #2c313b;
+
+    // ==== LD Migrator ====
+    --ld-migrator-environment-circle-border-color: #bebebe;
+
+    // ==== MATERIAL OVERRIDES ====
+    $mat-panel-background-override: #272d35;
+
+    @include mat.dialog-overrides(
+      (
+        container-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.menu-overrides(
+      (
+        container-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.tooltip-overrides(
+      (
+        container-color: color.adjust($mat-panel-background-override, $lightness: 20%),
+      )
+    );
+    @include mat.button-toggle-overrides(
+      (
+        background-color: transparent,
+        divider-color: var(--input-border-color),
+        selected-state-background-color: #21252c,
+        selected-state-text-color: #{color.adjust(theme.$primary-color, $lightness: 10%)},
+        text-color: var(--text-color),
+        disabled-state-background-color: transparent,
+      )
+    );
+    @include mat.stepper-overrides(
+      (
+        container-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.autocomplete-overrides(
+      (
+        background-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.select-overrides(
+      (
+        panel-background-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.datepicker-overrides(
+      (
+        calendar-container-background-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.timepicker-overrides(
+      (
+        container-background-color: $mat-panel-background-override,
+      )
+    );
+    @include mat.form-field-overrides(
+      (
+        outlined-focus-label-text-color: theme.$primary-color-dark,
+      )
+    );
+  }
+}
+
+@include icon.render-css-vars();
+@include box.render-css-vars();
+@include banner.render-css-vars();
+@include auth.render-css-vars();
+@include header.render-css-vars();
+@include co.render-css-vars();
+@include flag.render-css-vars();
+@include overview.render-css-vars();
+@include sidenav.render-css-vars();
+@include prism.render-css-vars();
+@include logo.render-css-vars();
+@include notification.render-css-vars();

package/src/css/vars/auth.scss

@@ -0,0 +1,24 @@
+@mixin render-css-vars {
+  :root {
+    --auth-panel-background: white;
+    --auth-panel-border: #dadada;
+    --auth-panel-shadow: drop-shadow(1px 0px 10px lightgrey);
+    --auth-saml-login-error-description: #e7e7e7;
+    --auth-saml-login-error-hint: #f3f2f2;
+
+    [data-theme='dark'] {
+      --auth-panel-background: #1b1f25;
+      --auth-panel-border: #30363d;
+      --auth-panel-shadow: none;
+      --auth-saml-login-error-description: #e7e7e7;
+      --auth-saml-login-error-hint: #f3f2f2;
+    }
+  }
+}
+
+@mixin panel {
+  background-color: var(--auth-panel-background);
+  border: 1px solid var(--auth-panel-border);
+  filter: var(--auth-panel-shadow);
+  padding: 1rem 1.2rem;
+}

package/src/css/vars/banner.scss

@@ -0,0 +1,116 @@
+@use "sass:color";
+@use "icon";
+@use "box";
+
+@mixin render-css-vars {
+  :root {
+    --banner-warn-background-color: #{color.adjust(
+        box.$admonition-box-warn-background-color,
+        $alpha: 1,
+        $lightness: 44%
+      )};
+    --banner-warn-dismiss-color: #{color.adjust(box.$admonition-box-warn-border-color, $alpha: 0.4, $lightness: -5%)};
+    --banner-info-dismiss-color: #{color.adjust(box.$admonition-box-info-border-color, $alpha: 0.4, $lightness: -10%)};
+    --banner-error-dismiss-color: #{color.adjust(box.$admonition-box-error-border-color, $alpha: 0.4, $lightness: -10%)};
+    --banner-promo-background: linear-gradient(
+      90deg,
+      rgba(234, 61, 110, 1) 0%,
+      rgba(141, 63, 162, 1) 35%,
+      rgba(64, 61, 222, 1) 100%
+    );
+
+    [data-theme="dark"] {
+      --banner-warn-background-color: #{color.adjust(
+          box.$admonition-box-warn-background-color-dark,
+          $alpha: 1,
+          $lightness: -50%
+        )};
+      --banner-warn-dismiss-color: #{color.adjust(
+          box.$admonition-box-warn-border-color-dark,
+          $alpha: 0.3,
+          $lightness: 5%
+        )};
+      --banner-info-dismiss-color: #{color.adjust(
+          box.$admonition-box-info-border-color-dark,
+          $alpha: 0.6,
+          $lightness: 5%
+        )};
+      --banner-error-dismiss-color: #{color.adjust(
+          box.$admonition-box-error-border-color-dark,
+          $alpha: 0.3,
+          $lightness: 5%
+        )};
+      --banner-promo-background: linear-gradient(
+        90deg,
+        rgb(185, 100, 30) 0%,
+        rgb(177, 93, 8) 35%,
+        rgb(168, 38, 18) 100%
+      );
+    }
+  }
+}
+
+@mixin banner-base {
+  margin-top: 1rem;
+  display: flex;
+  font-weight: 500;
+  border-radius: 5px;
+  line-height: var(--text-line-height);
+}
+
+@mixin warn-base {
+  @include banner-base();
+  width: 100%;
+  padding: 2rem 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin info-base {
+  @include banner-base();
+  padding: 1rem;
+}
+
+@mixin icon-base {
+  margin-right: 10px;
+  align-self: flex-start;
+}
+
+@mixin warn {
+  @include warn-base();
+  border: 1px solid var(--admonition-box-warn-border-color);
+  background-color: var(--banner-warn-background-color);
+
+  &::before {
+    @include icon.mat-icon();
+    @include icon-base();
+    content: var(--warn-icon-content);
+    color: var(--warn-icon-color);
+  }
+}
+
+@mixin info {
+  @include info-base();
+  border: 1px solid var(--admonition-box-info-border-color);
+  background-color: var(--admonition-box-info-background-color);
+}
+
+@mixin dismissable($location: "center", $kind: "warn") {
+  .dismiss {
+    @if $location == "top" {
+      margin-top: -0.8rem;
+    } @else {
+      align-self: center;
+    }
+
+    position: absolute;
+    right: 1.5rem;
+    color: var(--banner-#{$kind}-dismiss-color);
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/src/css/vars/box.scss

@@ -0,0 +1,48 @@
+@use 'sass:color';
+@use 'theme';
+
+$admonition-box-font-color: #2b2b2b;
+
+$admonition-box-info-background-color: #e2eefc;
+$admonition-box-info-border-color: #8f99c94d;
+
+$admonition-box-warn-background-color: #ff910010;
+$admonition-box-warn-border-color: #ff910081;
+
+$admonition-box-error-background-color: #ff292917;
+$admonition-box-error-border-color: #ff000050;
+
+$admonition-box-font-color-dark: #e3e3e3;
+
+$admonition-box-info-background-color-dark: #388afd25;
+$admonition-box-info-border-color-dark: #388bfd66;
+
+$admonition-box-warn-background-color-dark: #fda13818;
+$admonition-box-warn-border-color-dark: #ff910070;
+
+$admonition-box-error-background-color-dark: #fd38382c;
+$admonition-box-error-border-color-dark: #ff00005e;
+
+@mixin render-css-vars {
+  :root {
+    --admonition-box-font-color: #{$admonition-box-font-color};
+    --admonition-box-link-color: #{color.adjust(theme.$primary-color, $lightness: -6%)};
+    --admonition-box-info-background-color: #{$admonition-box-info-background-color};
+    --admonition-box-info-border-color: #{$admonition-box-info-border-color};
+    --admonition-box-warn-background-color: #{$admonition-box-warn-background-color};
+    --admonition-box-warn-border-color: #{$admonition-box-warn-border-color};
+    --admonition-box-error-background-color: #{$admonition-box-error-background-color};
+    --admonition-box-error-border-color: #{$admonition-box-error-border-color};
+
+    [data-theme='dark'] {
+      --admonition-box-font-color: #{$admonition-box-font-color-dark};
+      --admonition-box-link-color: #{theme.$primary-color-dark};
+      --admonition-box-info-background-color: #{$admonition-box-info-background-color-dark};
+      --admonition-box-info-border-color: #{$admonition-box-info-border-color-dark};
+      --admonition-box-warn-background-color: #{$admonition-box-warn-background-color-dark};
+      --admonition-box-warn-border-color: #{$admonition-box-warn-border-color-dark};
+      --admonition-box-error-background-color: #{$admonition-box-error-background-color-dark};
+      --admonition-box-error-border-color: #{$admonition-box-error-border-color-dark};
+    }
+  }
+}

package/src/css/vars/config-overview.scss

@@ -0,0 +1,27 @@
+@mixin render-css-vars {
+  :root {
+    --config-overview-table-background-color: #f5f5f5;
+    --config-overview-table-border-color: white;
+    --config-overview-table-fullscreen-key-column-background: #303030;
+    --config-overview-table-fullscreen-key-column-text-color: white;
+    --config-overview-table-fullscreen-key-column-hint-color: #dfdfdf;
+    --config-overview-table-fullscreen-column-background: #cacaca;
+    --config-overview-table-env-header-color: white;
+    --config-overview-table-key-column-color: black;
+    --config-overview-table-green-column-color: #006002;
+    --config-overview-table-green-column-background-color: lightgreen;
+    --config-overview-table-lightgreen-column-color: #006002;
+    --config-overview-table-lightgreen-column-background-color: #c8f5bf;
+    --config-overview-table-red-column-color: #da0c0c;
+    --config-overview-table-red-column-background-color: #fcdcdc;
+    --config-overview-table-blue-column-color: #03294c;
+    --config-overview-table-blue-column-background-color: #d7ebff;
+    --config-overview-fullscreen-background-color: black;
+    --config-overview-fullscreen-footer-color: white;
+
+    [data-theme='dark'] {
+      --config-overview-table-background-color: #30363d;
+      --config-overview-table-border-color: #1b1f25;
+    }
+  }
+}