feat(theme): enable CSS custom properties mode by default (#2965)

BREAKING CHANGE: Custom properties mode is enabled by default. `@nebular/theme/styles/_components.scss` file removed. Replace imports from this files with: ``` @import 'theming'; @import 'themes'; ``` Removes `layout-window-mode-max-width`, `tabset-tab-text-hide-breakpoint`, `route-tabset-tab-text-hide-breakpoint` theme properties. Use `$layout-window-mode-max-width`, `$tabset-tab-text-hide-breakpoint`, `$route-tabset-tab-text-hide-breakpoint` variables instead.
akveo · Dec 1, 2021 · 3a88e9b · 3a88e9b
1 parent a0997d2
commit 3a88e9b
Show file tree

Hide file tree

Showing 208 changed files with 1,452 additions and 1,467 deletions.
diff --git a/docs/app/@theme/components/components-promo/components-promo.component.scss b/docs/app/@theme/components/components-promo/components-promo.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;

diff --git a/docs/app/@theme/components/footer/footer.component.scss b/docs/app/@theme/components/footer/footer.component.scss
@@ -1,7 +1,7 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 @include nb-install-component() {
-
   $text-fg: nb-theme(footer-text-color);
   $icon-color: nb-theme(footer-icon-color);
   $title-fg: nb-theme(color-fg-heading);

diff --git a/docs/app/@theme/components/for-business/for-business.component.scss b/docs/app/@theme/components/for-business/for-business.component.scss
@@ -4,7 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../styles/themes';
+@use '../../styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 :host {
   display: flex;

diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
@@ -1,7 +1,7 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 @include nb-install-component() {
-
   $left-section-width: nb-theme(sidebar-width);
   $right-section-width: nb-theme(settings-col-width);
   $logo-fg: nb-theme(header-fg);
@@ -59,9 +59,11 @@
           color: $menu-item-fg;
           display: block;
 
-          &:hover, &.active, &:focus {
+          &:hover,
+          &.active,
+          &:focus {
             color: $menu-item-fg-active;
-            outline: none!important;
+            outline: none !important;
           }
         }
       }

diff --git a/docs/app/@theme/components/hero/hero.component.scss b/docs/app/@theme/components/hero/hero.component.scss
@@ -1,15 +1,14 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 @include nb-install-component() {
-
   $shadow: 0 12px 34px rgba(0, 60, 183, 0.25);
   $btn-bg: linear-gradient(90deg, #18f297 0%, #00e6e6 100%);
   $btn-shadow-hover: 0 18px 34px 0 rgba(0, 60, 183, 0.35);
   $btn-shadow-active: inset 0 1px 3px 0 rgba(0, 60, 183, 0.5);
   $get-started-fg: #3381ff;
   $title-fg: nb-theme(color-fg-heading-light);
 
-
   width: 100%;
   max-width: 100%;
   display: flex;
@@ -175,7 +174,9 @@
     }
   }
 
-  h1,h2,h3 {
+  h1,
+  h2,
+  h3 {
     color: $title-fg;
   }
 
@@ -243,7 +244,6 @@
   }
 
   @include media-breakpoint-up(md) {
-
     .block {
       font-size: 0.875rem;
     }

diff --git a/docs/app/@theme/components/icon-card/icon-card.component.scss b/docs/app/@theme/components/icon-card/icon-card.component.scss
@@ -1,7 +1,7 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 @include nb-install-component() {
-
   $shadow-hover: 0 8px 24px 0 rgba(0, 31, 97, 0.07);
   $text-fg: nb-theme(color-fg-text);
   $title-fg: nb-theme(color-fg-heading);
@@ -49,8 +49,8 @@
     text-align: center;
   }
 
-  &:hover, &:active {
-
+  &:hover,
+  &:active {
     &::before {
       opacity: 1;
     }
@@ -71,4 +71,3 @@
     padding-right: 1.5rem;
   }
 }
-
diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.scss b/docs/app/@theme/components/page-tabs/page-tabs.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;

diff --git a/docs/app/@theme/components/page-toc/page-toc.component.scss b/docs/app/@theme/components/page-toc/page-toc.component.scss
@@ -1,7 +1,6 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
-
   $title-fg: nb-theme(color-fg-heading-light);
   $item-fg: rgba(102, 110, 128, 0.87);
   $item-fg-active: #202020;

diff --git a/docs/app/@theme/components/search/search.component.scss b/docs/app/@theme/components/search/search.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   position: relative;

diff --git a/docs/app/@theme/components/text-card/text-card.component.scss b/docs/app/@theme/components/text-card/text-card.component.scss
@@ -1,7 +1,7 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '../../../../../src/framework/theme/styles/globals' as *;
 
 @include nb-install-component() {
-
   $accent-line-bg: linear-gradient(180deg, #3366ff 0%, #7396ff 100%);
   $title-fg: nb-theme(color-fg-heading);
   $text-fg: nb-theme(color-fg-text);
@@ -21,7 +21,8 @@
       border-right: 1px solid #d9e4ff;
     }
 
-    &:nth-child(1), &:nth-child(2) {
+    &:nth-child(1),
+    &:nth-child(2) {
       border-bottom: 1px solid #d9e4ff;
     }
   }

diff --git a/docs/app/@theme/styles/_common.scss b/docs/app/@theme/styles/_common.scss
@@ -1,5 +1,6 @@
-@mixin nbd-common() {
+@use 'themes' as *;
 
+@mixin nbd-common() {
   .ds-dropdown-menu {
     box-shadow: nb-theme(shadow);
     border-radius: nb-theme(border-radius);
@@ -14,7 +15,7 @@
       }
     }
 
-    .ds-dropdown-menu [class^=ds-dataset-] {
+    .ds-dropdown-menu [class^='ds-dataset-'] {
       border: none;
     }
   }
@@ -28,7 +29,8 @@
     background-color: transparent;
   }
 
-  .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
+  .visually-hidden {
+    /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
     position: absolute !important;
     height: 1px;
     width: 1px;

diff --git a/docs/app/@theme/styles/hs-form.scss b/docs/app/@theme/styles/hs-form.scss
@@ -4,6 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@use 'themes' as *;
+
 @mixin hs-custom-form() {
   .hs-custom-form {
     .modal-header {
@@ -45,7 +47,8 @@
       padding: 0;
     }
 
-    .hs-form-required, .hs-error-msg {
+    .hs-form-required,
+    .hs-error-msg {
       margin-top: 0.5rem;
       color: nb-theme(text-danger-color);
     }

diff --git a/docs/app/@theme/styles/pace.theme.scss b/docs/app/@theme/styles/pace.theme.scss
@@ -4,8 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
- @mixin ngd-pace-theme() {
+@use 'themes' as *;
 
+@mixin ngd-pace-theme() {
   .pace .pace-progress {
     background: nb-theme(color-fg-highlight);
   }

diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss
@@ -1,13 +1,13 @@
-@import 'themes';
-@import 'common';
+@use 'themes' as *;
+@use 'common';
 
-@import 'pace.theme';
+@use 'pace.theme';
 
-@import '../../../../src/framework/theme/styles/global/normalize';
-@import '../../../../src/framework/theme/styles/global/components';
-@import '../../../../src/framework/theme/styles/global/typography/typography';
-@import '../../../../src/framework/bootstrap/styles/globals';
-@import './hs-form';
+@use '../../../../src/framework/theme/styles/global/normalize';
+@use '../../../../src/framework/theme/styles/global/components' as *;
+@use '../../../../src/framework/theme/styles/global/typography/typography';
+@use '../../../../src/framework/bootstrap/styles/globals' as bootstrap-globals;
+@use 'hs-form';
 
 @include nb-install() {
   @include nb-layout-theme();
@@ -16,28 +16,28 @@
   @include nb-menu-theme();
   @include nb-actions-theme();
   @include nb-search-theme();
-  @include nb-bootstrap-global();
+  @include bootstrap-globals.nb-bootstrap-global();
   @include nb-icon-theme();
   @include nb-input-theme();
-  @include nb-typography();
+  @include typography.nb-typography();
   @include nb-buttons-theme();
   @include nb-select-theme();
   @include nb-option-list-theme();
   @include nb-input-theme();
   @include nb-overlay-theme();
   @include nb-spinner-theme();
 
-  @include nbd-common();
+  @include common.nbd-common();
 
   // loading progress bar
-  @include ngd-pace-theme();
+  @include pace.ngd-pace-theme();
 
-  @include hs-custom-form();
-};
+  @include hs-form.hs-custom-form();
+}
 
 body {
   scrollbar-face-color: rgba(0, 0, 0, 0.3);
   scrollbar-track-color: rgba(255, 255, 255, 0.7);
-  min-width: 320px!important;
+  min-width: 320px !important;
   -webkit-font-smoothing: antialiased;
 }