ng-configcat-publicapi-ui 6.0.2 → 6.0.3

package/src/css/vars/box.scss

@@ -1,5 +1,5 @@
-@use 'sass:color';
-@use 'theme';
+@use "sass:color";
+@use "theme";
 
 $admonition-box-font-color: #2b2b2b;
 
@@ -23,8 +23,9 @@ $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 {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --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};
@@ -34,7 +35,9 @@ $admonition-box-error-border-color-dark: #ff00005e;
     --admonition-box-error-background-color: #{$admonition-box-error-background-color};
     --admonition-box-error-border-color: #{$admonition-box-error-border-color};
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [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};

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

@@ -1,5 +1,6 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --config-overview-table-background-color: #f5f5f5;
     --config-overview-table-border-color: white;
     --config-overview-table-fullscreen-key-column-background: #303030;
@@ -19,7 +20,9 @@
     --config-overview-fullscreen-background-color: black;
     --config-overview-fullscreen-footer-color: white;
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --config-overview-table-background-color: #30363d;
       --config-overview-table-border-color: #1b1f25;
     }

package/src/css/vars/flag.scss

@@ -1,5 +1,6 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --flag-tutorial-background: #d9e8fa;
 
     --flag-box-background: #dee5f0;
@@ -73,7 +74,9 @@
     --save-separator-color: #ffffff56;
     --save-separator-disabled-color: #9c9c9c41;
 
-    [data-theme="dark"] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --flag-tutorial-background: #3180ee23;
 
       --flag-box-background: #1f242b;

package/src/css/vars/header.scss

@@ -1,5 +1,6 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --header-text-color: white;
     --header-background-base: #f8912c;
     --header-background: linear-gradient(to right, var(--header-background-base), #f14321);
@@ -7,7 +8,9 @@
     --header-logo-cat-fill: #ed1c24;
     --header-dropdown-border-color: #ececec;
 
-    [data-theme="dark"] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --header-background-base: #733a83;
       --header-background: linear-gradient(90deg, #af3356 0%, #8c3fa2 35%, #37359c 100%);
       --header-border-color: #30363d;

package/src/css/vars/icon.scss

@@ -1,15 +1,18 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --info-icon-color: #7fb2ff;
     --warn-icon-color: #ff9900;
     --error-icon-color: red;
     --success-icon-color: #4caf50;
-    --info-icon-content: '\e88e';
-    --warn-icon-content: '\e002';
-    --error-icon-content: '\e000';
-    --success-icon-content: '\e86c';
+    --info-icon-content: "\e88e";
+    --warn-icon-content: "\e002";
+    --error-icon-content: "\e000";
+    --success-icon-content: "\e86c";
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --info-icon-color: #6b9fee;
       --warn-icon-color: #ec8e00;
       --error-icon-color: #dd4848;
@@ -19,7 +22,7 @@
 }
 
 @mixin mat-icon {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   direction: ltr;
   display: inline-block;
   font-size: 24px;

package/src/css/vars/logo.scss

@@ -1,5 +1,6 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --lang-logo-inactive-correction-filter-1: grayscale(1);
     --lang-logo-inactive-correction-filter-2: grayscale(1) brightness(200%);
     --lang-logo-inactive-correction-filter-3: grayscale(1) brightness(100%);
@@ -7,7 +8,9 @@
     --lang-logo-inactive-correction-filter-5: grayscale(1) brightness(50%);
     --lang-logo-inactive-correction-filter-6: grayscale(1) brightness(80%);
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --lang-logo-inactive-correction-filter-1: grayscale(1);
       --lang-logo-inactive-correction-filter-2: grayscale(1) brightness(150%);
       --lang-logo-inactive-correction-filter-3: grayscale(1) brightness(200%);

package/src/css/vars/notification.scss

@@ -10,8 +10,9 @@ $notification-box-info-color-dark: #48638a;
 $notification-box-warn-color-dark: #ac5d1c;
 $notification-box-error-color-dark: #9c2f2f;
 
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --notification-font-color: #e3e3e3;
     --notification-success-background-color: #{$notification-box-success-color};
     --notification-info-background-color: #{$notification-box-info-color};
@@ -23,7 +24,9 @@ $notification-box-error-color-dark: #9c2f2f;
     --notification-warn-icon-color: #{color.adjust($notification-box-warn-color, $lightness: 33%)};
     --notification-error-icon-color: #{color.adjust($notification-box-error-color, $lightness: 28%)};
 
-    [data-theme="dark"] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --notification-success-background-color: #{$notification-box-success-color-dark};
       --notification-info-background-color: #{$notification-box-info-color-dark};
       --notification-warn-background-color: #{$notification-box-warn-color-dark};

package/src/css/vars/overview.scss

@@ -1,4 +1,4 @@
-@use 'sass:color';
+@use "sass:color";
 
 $overview-box-text-color: #333;
 $overview-box-add-text-color: color.adjust($overview-box-text-color, $alpha: -0.4);
@@ -8,8 +8,9 @@ $overview-box-text-color-dark: #cacaca;
 $overview-box-add-text-color-dark: color.adjust($overview-box-text-color-dark, $alpha: -0.4);
 $overview-box-add-text-disabled-color-dark: color.adjust($overview-box-text-color-dark, $alpha: -0.7);
 
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --overview-box-background-color: var(--panel-content-box-background-color);
     --overview-box-config-header-color: #ddebf8;
     --overview-box-config-header-hover-color: #b9d4ef;
@@ -28,7 +29,9 @@ $overview-box-add-text-disabled-color-dark: color.adjust($overview-box-text-colo
     --overview-box-product-header-circle-background-color: #2a9d8f;
     --overview-box-status-text-color: gray;
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --overview-box-background-color: #242931;
       --overview-box-config-header-color: #333a44;
       --overview-box-config-header-hover-color: #3c4450;

package/src/css/vars/prism.scss

@@ -1,10 +1,11 @@
-@use 'sass:color';
+@use "sass:color";
 
 $prism-background: #f6f8fa;
 $prism-background-dark: #20262c;
 
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --prism-foreground: #111b27;
     --prism-background: #{$prism-background};
     --prism-selection: #8da1b9;
@@ -22,7 +23,9 @@ $prism-background-dark: #20262c;
     --prism-line-number-foreground: #8da1b9da;
     --prism-line-number-separator: #{color.adjust($prism-background, $lightness: -10%)};
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --prism-foreground: #e3eaf2;
       --prism-background: #{$prism-background-dark};
       --prism-selection: #3c526d;

package/src/css/vars/sidenav.scss

@@ -1,5 +1,6 @@
-@mixin render-css-vars {
-  :root {
+/// @param {String} $scope-selector
+@mixin render-css-vars($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  #{$scope-selector} {
     --sidenav-background-color: #1d2227;
     --sidenav-text-color: #dfdfdf;
     --sidenav-border-color: #2f343a;
@@ -19,7 +20,9 @@
     --sidenav-cello-badge-text-color: white;
     --sidenav-right-border: none;
 
-    [data-theme='dark'] {
+    &[data-theme="dark"],
+    [data-theme="dark"] &,
+    & [data-theme="dark"] {
       --sidenav-background-color: #15191d;
       --sidenav-text-color: #ececec;
       --sidenav-border-color: #24272c;

package/src/public-api.scss

@@ -1,49 +1,57 @@
-@use "sass:meta";
-/* You can add global styles to this file, and also import other style files */
-
 @use "@angular/material" as mat;
 @use "./css/variables.scss";
 @use "./css/theme.scss";
+@use "./css/table.scss";
+@use "./css/controls.scss";
+@use "./css/dialog.scss";
+@use "./css/tooltip.scss";
+@use "./css/button.scss";
+@use "./css/snackbar.scss";
+@use "./css/icon.scss";
+@use "./css/variation.scss";
+
+/*
+By default, styles are applied globally.
+To scope them instead, opt in from your Angular host app's styles.scss:
+
+@use "ng-configcat-publicapi-ui/src/public-api" as ng-configcat-publicapi-ui with ($global-styles: false);
+
+@include ng-configcat-publicapi-ui.apply-ng-configcat-publicapi-ui-styles(".ng-configcat-publicapi-ui-scope, .ng-configcat-publicapi-ui-overlay");
+
+Wrap the package components in an element with the scope class.
+Dialogs, menus, etc. open in an Angular CDK overlay outside that element, so give them the
+overlay class, e.g. panelClass: "ng-configcat-publicapi-ui-overlay".
+*/
+
+$global-styles: true !default;
+
+/// @param {String} $scope-selector
+@mixin apply-ng-configcat-publicapi-ui-styles($scope-selector: ".ng-configcat-publicapi-ui-scope") {
+  // 1. Material theme, then densities, then CSS variables
+  @include theme.apply-package-core-theme($scope-selector);
+
+  #{$scope-selector} {
+    @include mat.button-density(0);
+    @include mat.icon-button-density(-2);
+    @include mat.form-field-density(-2);
+    @include mat.checkbox-density(-3);
+  }
 
-@include mat.button-density(0);
-@include mat.icon-button-density(-2);
-@include mat.form-field-density(-2);
-@include mat.checkbox-density(-3);
-
-@include meta.load-css("./css/table.scss");
-@include meta.load-css("./css/controls.scss");
-@include meta.load-css("css/dialog.scss");
-@include meta.load-css("css/tooltip.scss");
-@include meta.load-css("./css/button.scss");
-@include meta.load-css("./css/snackbar.scss");
-@include meta.load-css("./css/icon.scss");
-@include meta.load-css("./css/variation.scss");
-
-html {
-  overflow: -moz-scrollbars-vertical;
-  overflow-y: scroll;
-
-  body {
-    margin: 0;
-    color-scheme: var(--color-scheme);
-    font-family: Montserrat, Roboto, "Helvetica Neue", sans-serif;
-    font-size: 13px;
-    background-color: var(--page-background-color);
-    color: var(--text-color);
-
-    a {
-      color: var(--link-color);
-      text-decoration: none;
-    }
-
-    h3 {
-      font-weight: 700;
-    }
-
-    .mat-mdc-standard-chip .mdc-evolution-chip__text-label {
-      font-size: 12px;
-    }
-
+  @include variables.apply-package-variables-theme($scope-selector);
+
+  // 2. Component styles
+  @include table.apply-table-theme($scope-selector);
+  @include controls.apply-form-field-theme($scope-selector);
+  @include dialog.apply-dialog-theme($scope-selector);
+  @include tooltip.apply-tooltip-theme($scope-selector);
+  @include button.apply-button-theme($scope-selector);
+  @include snackbar.apply-snackbar-theme($scope-selector);
+  @include icon.apply-icon-theme($scope-selector);
+  @include variation.apply-variation-theme($scope-selector);
+
+  // 3. Overlay menu styles (menus render in cdk-overlay-container, outside the scope)
+  // `html > body` keeps the specificity high enough to win over Material's own styles.
+  html > body {
     .hide-menu-overflow-text {
       .mat-mdc-menu-item-text {
         max-width: 100%;
@@ -87,6 +95,28 @@ html {
         }
       }
     }
+  }
+
+  // 4. Scoped Layout, Typography, and Component Styles
+  #{$scope-selector} {
+    color-scheme: var(--color-scheme);
+    font-family: Montserrat, Roboto, "Helvetica Neue", sans-serif;
+    font-size: 13px;
+    background-color: var(--page-background-color);
+    color: var(--text-color);
+
+    a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+
+    h3 {
+      font-weight: 700;
+    }
+
+    .mat-mdc-standard-chip .mdc-evolution-chip__text-label {
+      font-size: 12px;
+    }
 
     .mat-mdc-tab-group {
       .mat-mdc-tab-header {
@@ -146,7 +176,8 @@ html {
       }
     }
 
-    &[data-theme="dark"] {
+    &[data-theme="dark"],
+    [data-theme="dark"] & {
       code.highlight {
         &.copyable-like {
           background-color: var(--copyable-background-color-darker);
@@ -206,24 +237,39 @@ html {
       background-color: var(--error-text-color);
     }
   }
-}
 
-/* clears the 'X' from Internet Explorer */
-input.hide-clear[type="search"]::-ms-clear,
-input.hide-clear[type="search"]::-ms-reveal {
-  display: none;
-  width: 0;
-  height: 0;
-}
+  /* Browser-specific helper cleanup within scope */
+  #{$scope-selector} {
+    input.hide-clear[type="search"]::-ms-clear,
+    input.hide-clear[type="search"]::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
 
-/* clears the 'X' from Chrome */
-input.hide-clear[type="search"]::-webkit-search-decoration,
-input.hide-clear[type="search"]::-webkit-search-cancel-button,
-input.hide-clear[type="search"]::-webkit-search-results-button,
-input.hide-clear[type="search"]::-webkit-search-results-decoration {
-  display: none;
+    input.hide-clear[type="search"]::-webkit-search-decoration,
+    input.hide-clear[type="search"]::-webkit-search-cancel-button,
+    input.hide-clear[type="search"]::-webkit-search-results-button,
+    input.hide-clear[type="search"]::-webkit-search-results-decoration {
+      display: none;
+    }
+
+    .add-btn span[matchipaction][aria-disabled="false"] {
+      cursor: pointer;
+    }
+  }
 }
 
-.add-btn span[matchipaction][aria-disabled="false"] {
-  cursor: pointer;
+// Fallback for apps that have not opted in to scoped styles ($global-styles is true by default)
+@if $global-styles {
+  html {
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+  }
+
+  html > body {
+    margin: 0;
+  }
+
+  @include apply-ng-configcat-publicapi-ui-styles("html > body");
 }