From 3a88e9b1c776fbdb61239e7340c84d7757d62c97 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 1 Dec 2021 18:04:55 +0300 Subject: [PATCH] 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. --- .../components-promo.component.scss | 2 +- .../components/footer/footer.component.scss | 4 +- .../for-business/for-business.component.scss | 3 +- .../components/header/header.component.scss | 10 +- .../components/hero/hero.component.scss | 10 +- .../icon-card/icon-card.component.scss | 9 +- .../page-tabs/page-tabs.component.scss | 2 +- .../page-toc/page-toc.component.scss | 3 +- .../components/search/search.component.scss | 2 +- .../text-card/text-card.component.scss | 7 +- docs/app/@theme/styles/_common.scss | 8 +- docs/app/@theme/styles/hs-form.scss | 5 +- docs/app/@theme/styles/pace.theme.scss | 3 +- docs/app/@theme/styles/styles.scss | 30 +- docs/app/@theme/styles/themes.scss | 193 ++++++----- .../code-block/code-block.component.scss | 3 +- .../components-overview-block.component.scss | 6 +- .../live-example-block.component.scss | 7 +- .../pager-block/pager-block.component.scss | 5 +- .../tabbed-example-block.component.scss | 13 +- .../theme-block/theme-block.component.scss | 3 +- .../documentation.component.scss | 12 +- .../documentation/page/page.component.scss | 24 +- docs/app/home/home.component.scss | 4 +- docs/articles/auth/install.md | 23 +- docs/articles/design-system/css-properties.md | 31 +- docs/articles/design-system/custom-theme.md | 328 +++++++++--------- .../enable-customizable-theme.md | 78 +++-- .../design-system/multiple-runtime-themes.md | 45 ++- .../design-system/use-theme-variables.md | 25 +- docs/themes.scss | 11 +- packages-smoke/src/styles.scss | 8 +- src/app/app.component.scss | 2 + .../layout-direction-toggle.component.scss | 5 +- .../layout-theme-toggle.component.scss | 7 +- .../_auth-block.component.theme.scss | 3 +- .../auth/components/auth.component.scss | 2 +- src/framework/auth/styles/_globals.scss | 4 +- .../auth/styles/global/_components.scss | 4 +- .../prebuilt/corporate-custom-properties.scss | 9 + .../auth/styles/prebuilt/corporate.scss | 8 +- .../prebuilt/cosmic-custom-properties.scss | 9 + .../auth/styles/prebuilt/cosmic.scss | 8 +- .../prebuilt/dark-custom-properties.scss | 9 + src/framework/auth/styles/prebuilt/dark.scss | 8 +- .../prebuilt/default-custom-properties.scss | 9 + .../auth/styles/prebuilt/default.scss | 8 +- .../bootstrap/styles/_button-group.scss | 46 ++- src/framework/bootstrap/styles/_buttons.scss | 24 +- .../styles/_default-form-control.scss | 2 + .../bootstrap/styles/_dropdowns.scss | 3 +- src/framework/bootstrap/styles/_forms.scss | 12 +- src/framework/bootstrap/styles/_globals.scss | 28 +- .../bootstrap/styles/_hero-buttons.scss | 2 + .../bootstrap/styles/_icon-buttons.scss | 7 +- src/framework/bootstrap/styles/_layout.scss | 2 + src/framework/bootstrap/styles/_modals.scss | 21 +- .../bootstrap/styles/_outline-buttons.scss | 3 +- .../bootstrap/styles/_shape-buttons.scss | 2 + .../bootstrap/styles/_size-buttons.scss | 2 + .../bootstrap/styles/_size-form-control.scss | 2 + .../bootstrap/styles/_status-buttons.scss | 5 +- .../prebuilt/corporate-custom-properties.scss | 15 + .../bootstrap/styles/prebuilt/corporate.scss | 8 +- .../prebuilt/cosmic-custom-properties.scss | 15 + .../bootstrap/styles/prebuilt/cosmic.scss | 8 +- .../prebuilt/dark-custom-properties.scss | 15 + .../bootstrap/styles/prebuilt/dark.scss | 8 +- .../prebuilt/default-custom-properties.scss | 15 + .../bootstrap/styles/prebuilt/default.scss | 8 +- .../accordion/_accordion.component.theme.scss | 3 +- .../actions/_actions.component.theme.scss | 3 +- .../alert/_alert.component.theme.scss | 10 +- .../components/alert/alert.component.scss | 2 +- .../badge/_badge.component.theme.scss | 2 + .../components/badge/badge.component.scss | 2 +- .../_button-group.component.theme.scss | 2 + .../theme/components/button/_button-core.scss | 2 +- .../components/button/_button-filled.scss | 2 + .../components/button/_button-ghost.scss | 2 + .../theme/components/button/_button-hero.scss | 2 +- .../components/button/_button-outline.scss | 2 + .../button/_button.component.theme.scss | 21 +- .../calendar-kit/_calendar-kit.theme.scss | 12 +- .../components/_calendar-cell.theme.scss | 2 + .../calendar-actions.component.scss | 2 +- .../_calendar-day-picker.component.theme.scss | 2 + .../_calendar-days-names.component.theme.scss | 6 +- .../_calendar-navigation.theme.scss | 2 + ...alendar-pageable-navigation.component.scss | 2 - .../_calendar-picker.component.theme.scss | 6 +- ..._calendar-week-number.component.theme.scss | 2 + .../calendar/_calendar.component.theme.scss | 3 +- .../card/_card.component.theme.scss | 17 +- .../flip-card/_flip-card.component.theme.scss | 2 + .../_reveal-card.component.theme.scss | 2 + .../cdk/overlay/_overlay.theme.scss | 3 +- .../chat/_chat.component.theme.scss | 18 +- .../checkbox/_checkbox.component.theme.scss | 2 +- .../checkbox/checkbox.component.scss | 2 +- .../_context-menu.component.theme.scss | 3 +- ..._datepicker-container.component.theme.scss | 4 +- ...alendar-with-time-container.component.scss | 3 +- .../_form-field.component.theme.scss | 2 + .../icon/_icon.component.theme.scss | 3 +- .../theme/components/input/_input-shapes.scss | 2 + .../theme/components/input/_input-sizes.scss | 2 + .../components/input/_input-statuses.scss | 2 + .../input/_input.directive.theme.scss | 21 +- .../layout/_layout.component.theme.scss | 23 +- .../components/layout/layout.component.scss | 3 +- .../components/layout/layout.component.ts | 1 - .../list/_list.component.theme.scss | 12 +- .../menu/_menu.component.theme.scss | 2 + .../theme/components/menu/menu.component.scss | 2 +- .../option/_option-list.component.theme.scss | 7 +- .../components/option/option.component.scss | 3 +- .../popover/_popover.component.theme.scss | 6 +- .../_progress-bar.component.theme.scss | 5 +- .../radio/_radio.component.theme.scss | 2 + .../components/radio/radio.component.scss | 2 +- .../_route-tabset.component.theme.scss | 16 +- .../route-tabset/route-tabset.component.scss | 2 +- .../route-tabset/route-tabset.component.ts | 44 +-- .../search/_search.component.theme.scss | 4 +- .../search.component.column-curtain.scss | 3 +- .../styles/search.component.curtain.scss | 3 +- .../search.component.layout-rotate.scss | 3 +- .../styles/search.component.modal-drop.scss | 5 +- .../styles/search.component.modal-half.scss | 3 +- .../styles/search.component.modal-move.scss | 4 +- .../styles/search.component.modal-zoomin.scss | 4 +- .../components/select/_select-filled.scss | 8 +- .../theme/components/select/_select-hero.scss | 8 +- .../components/select/_select-outline.scss | 8 +- .../select/_select.component.theme.scss | 16 +- .../components/select/select.component.scss | 2 +- .../sidebar/_sidebar.component.theme.scss | 3 + .../components/sidebar/sidebar.component.scss | 6 +- .../spinner/_spinner.component.theme.scss | 3 +- .../stepper/_stepper.component.theme.scss | 4 +- .../tabset/_tabset.component.theme.scss | 12 +- .../components/tabset/tabset.component.scss | 3 +- .../components/tabset/tabset.component.ts | 3 +- .../theme/components/tag/_tag-filled.scss | 2 + .../theme/components/tag/_tag-input.scss | 2 + .../theme/components/tag/_tag-list.scss | 12 +- .../theme/components/tag/_tag-outline.scss | 2 + .../components/tag/_tag.component.theme.scss | 12 +- src/framework/theme/components/tag/_tag.scss | 9 +- .../_timepicker.component.theme.scss | 3 + .../timepicker/timepicker.component.scss | 1 - .../toastr/_toast.component.theme.scss | 2 + .../toggle/_toggle.component.theme.scss | 17 +- .../components/toggle/toggle.component.scss | 2 +- .../tooltip/_tooltip.component.theme.scss | 2 + .../components/tooltip/tooltip.component.scss | 10 +- .../_tree-grid-sort.component.theme.scss | 2 + .../tree-grid/_tree-grid.component.theme.scss | 8 +- .../user/_user.component.theme.scss | 2 + .../theme/components/user/user.component.scss | 2 +- .../theme/schematics/ng-add/index.spec.ts | 9 +- .../ng-add/register-theme/theme-content.ts | 9 +- src/framework/theme/styles/_all.scss | 6 +- src/framework/theme/styles/_component.scss | 2 - src/framework/theme/styles/_globals.scss | 12 +- src/framework/theme/styles/_themes.scss | 8 +- .../theme/styles/_theming-variables.scss | 34 ++ src/framework/theme/styles/_theming.scss | 43 +-- .../theme/styles/core/_functions.scss | 16 +- src/framework/theme/styles/core/_mixins.scss | 13 +- .../theme/styles/core/_variants.scss | 5 +- .../theme/styles/core/theming/_get-value.scss | 33 +- .../theme/styles/core/theming/_install.scss | 43 ++- .../theme/styles/core/theming/_register.scss | 41 +-- .../theme/styles/global/_breakpoints.scss | 18 +- .../theme/styles/global/_components.scss | 206 ++++++----- .../theme/styles/global/_overrides.scss | 11 +- .../global/tables/_smart-table.theme.scss | 52 ++- .../styles/global/typography/_typography.scss | 19 +- .../prebuilt/corporate-custom-properties.scss | 7 + .../theme/styles/prebuilt/corporate.scss | 5 +- .../prebuilt/cosmic-custom-properties.scss | 7 + .../theme/styles/prebuilt/cosmic.scss | 5 +- .../prebuilt/dark-custom-properties.scss | 7 + src/framework/theme/styles/prebuilt/dark.scss | 5 +- .../prebuilt/default-custom-properties.scss | 7 + .../theme/styles/prebuilt/default.scss | 5 +- .../theme/styles/themes/_corporate.scss | 15 +- .../theme/styles/themes/_cosmic.scss | 12 +- src/framework/theme/styles/themes/_dark.scss | 13 +- .../theme/styles/themes/_default.scss | 101 +----- .../theme/styles/themes/_mapping.scss | 323 +---------------- src/playground/styles/example-helpers.scss | 3 +- src/playground/styles/styles.scss | 10 +- src/playground/styles/themes.scss | 7 +- .../alert/alert-example.component.scss | 2 - .../button-group-interactive.component.scss | 2 - .../button-group-showcase.component.scss | 2 +- .../button/button-interactive.component.scss | 2 - .../chat-custom-message-table.component.scss | 2 +- .../checkbox/checkbox-status.component.scss | 2 - .../icon/icon-colors.component.scss | 2 - .../news-post-placeholder.component.scss | 2 +- .../input/input-colors.component.scss | 2 - .../progress-bar-status.component.scss | 2 - .../spinner/spinner-colors.component.scss | 2 +- .../without-styles/bootstrap/styles.scss | 13 +- 208 files changed, 1452 insertions(+), 1467 deletions(-) create mode 100644 src/framework/auth/styles/prebuilt/corporate-custom-properties.scss create mode 100644 src/framework/auth/styles/prebuilt/cosmic-custom-properties.scss create mode 100644 src/framework/auth/styles/prebuilt/dark-custom-properties.scss create mode 100644 src/framework/auth/styles/prebuilt/default-custom-properties.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/corporate-custom-properties.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/cosmic-custom-properties.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/dark-custom-properties.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/default-custom-properties.scss delete mode 100644 src/framework/theme/styles/_component.scss create mode 100644 src/framework/theme/styles/_theming-variables.scss create mode 100644 src/framework/theme/styles/prebuilt/corporate-custom-properties.scss create mode 100644 src/framework/theme/styles/prebuilt/cosmic-custom-properties.scss create mode 100644 src/framework/theme/styles/prebuilt/dark-custom-properties.scss create mode 100644 src/framework/theme/styles/prebuilt/default-custom-properties.scss diff --git a/docs/app/@theme/components/components-promo/components-promo.component.scss b/docs/app/@theme/components/components-promo/components-promo.component.scss index 5c1f1b7d8a..940cbbd768 100644 --- 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 index 6f67d7422d..64ff330e6c 100644 --- 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 index 5fcd86cd7a..dc4b858685 100644 --- 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 index 8fd2dd7300..745733b8b9 100644 --- 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 index 9f2bd1737e..90cff2f45a 100644 --- a/docs/app/@theme/components/hero/hero.component.scss +++ b/docs/app/@theme/components/hero/hero.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: 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); @@ -9,7 +9,6 @@ $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 index 74bd4d1bae..9e0327b5a8 100644 --- 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 index 10460dee3e..7673c0e96f 100644 --- 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 index 815cd1e536..4ca7701554 100644 --- 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 index 1aef4fc4db..7fe2e10709 100644 --- 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 index b6f9c07f56..3c0eef2722 100644 --- 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 index dcd7cc69b8..19389f2d6d 100644 --- 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 index 55fc4be220..da668235a8 100644 --- 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 index a532778174..a4bf423207 100644 --- 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 index 8d8c14e9b2..b39fc5a0db 100644 --- 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,10 +16,10 @@ @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(); @@ -27,17 +27,17 @@ @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; } diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss index b4f301712a..cb81cbba4f 100644 --- a/docs/app/@theme/styles/themes.scss +++ b/docs/app/@theme/styles/themes.scss @@ -1,6 +1,8 @@ -@import '../../../../src/framework/theme/styles/theming'; -@import '../../../../src/framework/theme/styles/themes/default'; -@import '../../../../src/framework/theme/styles/global/breakpoints'; +@use 'sass:string'; +@forward '../../../../src/framework/theme/styles/theming'; +@use '../../../../src/framework/theme/styles/theming' as *; +@use '../../../../src/framework/theme/styles/themes/default'; +@use '../../../../src/framework/theme/styles/global/breakpoints' as *; $nb-enable-css-custom-properties: false; @@ -17,98 +19,103 @@ $grid-breakpoints: ( xl: 1200px, macpro: 1280px, xxl: 1400px, - xxxl: 1600px + xxxl: 1600px, ); $nb-enabled-themes: (docs-home, docs-page); -/* stylelint-disable max-line-length */ -$nb-themes: nb-register-theme(( - font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'), - font-family-secondary: font-family-primary, - - // custom - content-width: 1140px, - settings-col-width: 0, - settings-col-margin: 0, - color-fg-heading-light: #ffffff, - header-menu-fg-active: color-fg, - footer-menu-fg: color-fg-text, - code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%), - color-gray-light: #ced5dd, - radius: 0.375rem, - color-fg-highlight: #40dc7e, - - select-min-width: 5rem, - - color-fg: white, - color-fg-heading: #0d1c2e, - color-fg-text: #919fb1, - shadow: none, - layout-background-color: transparent, - layout-padding: 0, - layout-medium-padding: 0, - layout-small-padding: 0, - footer-text-color: color-fg-text, - footer-icon-color: #cdd6e3, - footer-background-color: transparent, - footer-divider-width: 0, - header-padding: 0 0, - header-height: 4.25rem, - header-fg: color-fg-heading-light, - menu-item-padding: 0.675rem 1rem, - menu-fg: color-fg-heading-light, - menu-active-fg: menu-fg, - footer-height: 18.75rem, - footer-padding: 1.25rem 0, - menu-font-size: 0.95rem, - menu-font-weight: font-weight-normal, - link-text-decoration: none, -), docs-home, default); -/* stylelint-enable max-line-length */ - -$nb-themes: nb-register-theme(( - // custom - content-width: 1440px, - settings-col-width: 19rem, - settings-col-margin: 0.375rem, - color-gray-light: #ced5dd, - color-fg-heading-light: #8994a3, - code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%), - color-info: #5699f0, - color-warning: #f09301, - header-menu-fg-active: color-fg-highlight, +$nb-themes: nb-register-theme( + ( + font-family-primary: + string.unquote( + '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"' + ), + font-family-secondary: font-family-primary, + // custom + content-width: 1140px, + settings-col-width: 0, + settings-col-margin: 0, + color-fg-heading-light: #ffffff, + header-menu-fg-active: color-fg, + footer-menu-fg: color-fg-text, + code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%), + color-gray-light: #ced5dd, + radius: 0.375rem, + color-fg-highlight: #40dc7e, + select-min-width: 5rem, + color-fg: white, + color-fg-heading: #0d1c2e, + color-fg-text: #919fb1, + shadow: none, + layout-background-color: transparent, + layout-padding: 0, + layout-medium-padding: 0, + layout-small-padding: 0, + footer-text-color: color-fg-text, + footer-icon-color: #cdd6e3, + footer-background-color: transparent, + footer-divider-width: 0, + header-padding: 0 0, + header-height: 4.25rem, + header-fg: color-fg-heading-light, + menu-item-padding: 0.675rem 1rem, + menu-fg: color-fg-heading-light, + menu-active-fg: menu-fg, + footer-height: 18.75rem, + footer-padding: 1.25rem 0, + menu-font-size: 0.95rem, + menu-font-weight: font-weight-normal, + link-text-decoration: none, + ), + docs-home, + default +); - radius: 0.25rem, - separator: transparent, - color-bg: transparent, - color-fg: #494949, - color-fg-text: #494949, - color-fg-heading: rgba(0, 0, 0, 0.88), - shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6), - layout-background-color: #fafafa, - layout-padding: 3.25rem 1.25rem 3.25rem 1rem, - header-bg: white, - sidebar-padding: 2rem, - sidebar-shadow: none, - color-fg-highlight: color-primary-default, - link-color: color-fg-highlight, - link-color-hover: color-fg-highlight, - link-color-visited: color-fg-highlight, - header-padding: 0, - header-fg: black, - menu-fg: black, - menu-submenu-fg: color-fg-heading-light, - menu-active-fg: menu-fg, - menu-submenu-item-container-padding: 0 1rem, - menu-submenu-active-border-color: transparent, - menu-submenu-active-fg: color-fg-highlight, - menu-active-font-weight: bold, - card-bg: white, - card-header-font-size: 2rem, - card-header-font-weight: bold, - card-header-fg-heading: black, - card-margin: 2.5rem, - footer-shadow: none, - footer-text-color: color-fg-heading-light, -), docs-page, docs-home); +$nb-themes: nb-register-theme( + ( + // custom + content-width: 1440px, + settings-col-width: 19rem, + settings-col-margin: 0.375rem, + color-gray-light: #ced5dd, + color-fg-heading-light: #8994a3, + code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%), + color-info: #5699f0, + color-warning: #f09301, + header-menu-fg-active: color-fg-highlight, + radius: 0.25rem, + separator: transparent, + color-bg: transparent, + color-fg: #494949, + color-fg-text: #494949, + color-fg-heading: rgba(0, 0, 0, 0.88), + shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6), + layout-background-color: #fafafa, + layout-padding: 3.25rem 1.25rem 3.25rem 1rem, + header-bg: white, + sidebar-padding: 2rem, + sidebar-shadow: none, + color-fg-highlight: color-primary-default, + link-color: color-fg-highlight, + link-color-hover: color-fg-highlight, + link-color-visited: color-fg-highlight, + header-padding: 0, + header-fg: black, + menu-fg: black, + menu-submenu-fg: color-fg-heading-light, + menu-active-fg: menu-fg, + menu-submenu-item-container-padding: 0 1rem, + menu-submenu-active-border-color: transparent, + menu-submenu-active-fg: color-fg-highlight, + menu-active-font-weight: bold, + card-bg: white, + card-header-font-size: 2rem, + card-header-font-weight: bold, + card-header-fg-heading: black, + card-margin: 2.5rem, + footer-shadow: none, + footer-text-color: color-fg-heading-light + ), + docs-page, + docs-home +); diff --git a/docs/app/blocks/components/code-block/code-block.component.scss b/docs/app/blocks/components/code-block/code-block.component.scss index 3c9a4d9fb9..018a85a95c 100644 --- a/docs/app/blocks/components/code-block/code-block.component.scss +++ b/docs/app/blocks/components/code-block/code-block.component.scss @@ -1,7 +1,6 @@ -@import '../../../@theme/styles/themes'; +@use '../../../@theme/styles/themes' as *; @include nb-install-component() { - $code-lines-fg: #515877; $code-block-bg: nb-theme(code-block-bg); diff --git a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss b/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss index 9a22a099ab..3c5ced570b 100644 --- a/docs/app/blocks/components/components-overview-block/components-overview-block.component.scss +++ b/docs/app/blocks/components/components-overview-block/components-overview-block.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() { - .header-card .page-heading { margin-bottom: 0; } @@ -36,7 +36,6 @@ text-decoration: none; } - nb-card { box-shadow: 0 4px 27px 0 rgba(230, 234, 240, 0.2); transition: transform 0.25s ease; @@ -62,7 +61,6 @@ @include media-breakpoint-up(is) { .components-list { - .component-card-wrapper { flex: 1 0 auto; width: 50%; diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss index aad94bcd74..8799325b1f 100644 --- a/docs/app/blocks/components/live-example-block/live-example-block.component.scss +++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss @@ -1,7 +1,6 @@ -@import '../../../@theme/styles/themes'; +@use '../../../@theme/styles/themes' as *; @include nb-install-component() { - // TODO: move some variables in Nebular themes // colors $action-bg: white; @@ -62,7 +61,8 @@ margin-left: 0; } - &:hover, &:focus { + &:hover, + &:focus { text-decoration: none; } } @@ -174,4 +174,3 @@ } } } - diff --git a/docs/app/blocks/components/pager-block/pager-block.component.scss b/docs/app/blocks/components/pager-block/pager-block.component.scss index defadeddcb..c0ab707d4d 100644 --- a/docs/app/blocks/components/pager-block/pager-block.component.scss +++ b/docs/app/blocks/components/pager-block/pager-block.component.scss @@ -1,8 +1,7 @@ -@import '../../../@theme/styles/themes'; - +@use '../../../@theme/styles/themes' as *; +@use '../../../../../src/framework/theme/styles/globals' as *; @include nb-install-component() { - $title-fg: nb-theme(color-fg-heading); $text-fg: nb-theme(color-fg-text); $arrow-fg: nb-theme(color-fg-highlight); diff --git a/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss b/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss index f9208a8a64..043574373b 100644 --- a/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.component.scss +++ b/docs/app/blocks/components/tabbed-example-block/tabbed-example-block.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() { - $tab-fg: nb-theme(color-fg-heading-light); $tab-active-fg: #ffffff; $tab-active-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%); @@ -27,7 +27,9 @@ vertical-align: middle; } - &:focus, &:active, &:hover { + &:focus, + &:active, + &:hover { cursor: pointer; color: $tab-fg; outline: 0; @@ -43,7 +45,7 @@ > ul { padding: 0; - margin-bottom: 0!important; // TODO: check selectors + margin-bottom: 0 !important; // TODO: check selectors border-radius: 0.5rem 0.5rem 0 0; background-color: $tabs-bb; overflow: hidden; @@ -51,7 +53,7 @@ li { padding: 0.4rem; width: 20%; - margin-bottom: 0!important; // TODO: check selectors + margin-bottom: 0 !important; // TODO: check selectors &:first-child { margin-left: 0; @@ -81,4 +83,3 @@ } } } - diff --git a/docs/app/blocks/components/theme-block/theme-block.component.scss b/docs/app/blocks/components/theme-block/theme-block.component.scss index 6c1056b6d8..9e7b5a3733 100644 --- a/docs/app/blocks/components/theme-block/theme-block.component.scss +++ b/docs/app/blocks/components/theme-block/theme-block.component.scss @@ -1,7 +1,6 @@ -@import '../../../@theme/styles/themes'; +@use '../../../@theme/styles/themes' as *; @include nb-install-component() { - $inherited-fg: nb-theme(color-fg); $selected-row-bg: nb-theme(color-gray-light); diff --git a/docs/app/documentation/documentation.component.scss b/docs/app/documentation/documentation.component.scss index 4fa992eea6..25b137439e 100644 --- a/docs/app/documentation/documentation.component.scss +++ b/docs/app/documentation/documentation.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() { - $content-width: nb-theme(content-width); $settings-width: nb-theme(settings-col-width); $settings-margin: nb-theme(settings-col-margin); @@ -71,7 +71,7 @@ } .menu-item { - border: none!important; + border: none !important; .menu-title { flex: 1 1 auto; @@ -79,8 +79,10 @@ } .menu-items .menu-item .menu-item a { - &:hover, &.active, &:focus { - outline: none!important; + &:hover, + &.active, + &:focus { + outline: none !important; } } } diff --git a/docs/app/documentation/page/page.component.scss b/docs/app/documentation/page/page.component.scss index 2ebd52bb09..439634fd0b 100644 --- a/docs/app/documentation/page/page.component.scss +++ b/docs/app/documentation/page/page.component.scss @@ -1,4 +1,5 @@ -@import '../../@theme/styles/themes'; +@use '../../@theme/styles/themes' as *; +@use '../../../../src/framework/theme/styles/globals' as *; @include nb-install-component() { display: flex; @@ -31,12 +32,11 @@ } ::ng-deep nb-card { - nb-card-body { padding: 2rem 1rem; > *:last-child { - margin-bottom: 0!important; + margin-bottom: 0 !important; *:last-child { margin-bottom: 0 !important; @@ -44,7 +44,12 @@ } } - h1, h2, h3, h4, h5, h6 { + h1, + h2, + h3, + h4, + h5, + h6 { margin-bottom: 1.25rem; &:first-child { @@ -56,7 +61,9 @@ } } - h1, h2, h3 { + h1, + h2, + h3 { font-family: nb-theme(text-heading-4-font-family); font-size: nb-theme(text-heading-4-font-size); font-weight: nb-theme(text-heading-4-font-weight); @@ -265,9 +272,10 @@ padding: 1.5rem 1.5rem 0; @include nb-scrollbars( - nb-theme(sidebar-scrollbar-color), - nb-theme(sidebar-scrollbar-background-color), - nb-theme(sidebar-scrollbar-width)); + nb-theme(sidebar-scrollbar-color), + nb-theme(sidebar-scrollbar-background-color), + nb-theme(sidebar-scrollbar-width) + ); } } } diff --git a/docs/app/home/home.component.scss b/docs/app/home/home.component.scss index 42ad77c001..5047e2a8cb 100644 --- a/docs/app/home/home.component.scss +++ b/docs/app/home/home.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() { - $convex-bg: linear-gradient(to bottom, #f1f3f6 0, transparent 18%); $content-width: nb-theme(content-width); $max-width: 960px; diff --git a/docs/articles/auth/install.md b/docs/articles/auth/install.md index 09162e44f5..5df5122107 100644 --- a/docs/articles/auth/install.md +++ b/docs/articles/auth/install.md @@ -10,11 +10,12 @@ ## Install the module First, let's install the module as it's distributed as npm package. Make sure you have the [Nebular Theme module up and running](https://akveo.github.io/nebulardocs/installation/add-into-existing-project). -Nebular Theme is required to use built-in Auth Components. If you are not going to use those at all, you can use `Auth Module` without the `Nebular Theme` module. +Nebular Theme is required to use built-in Auth Components. If you are not going to use those at all, you can use `Auth Module` without the `Nebular Theme` module. ```bash npm i @nebular/auth ``` +
## HttpClientModule @@ -54,7 +55,7 @@ To add a strategy we need to call static `setup` method to pass a list of option @NgModule({ imports: [ // ... - + NbAuthModule.forRoot({ strategies: [ NbPasswordAuthStrategy.setup({ @@ -62,7 +63,7 @@ To add a strategy we need to call static `setup` method to pass a list of option }), ], forms: {}, - }), + }), ], }); @@ -70,13 +71,13 @@ To add a strategy we need to call static `setup` method to pass a list of option We also specified `forms` key, that configures available options for the Auth Components. We leave it empty for now and get back to it in the [Configuring UI](docs/auth/configuring-ui) article. +
## Enable Auth Components Next, we need to configure Auth Components routes, let's add those into your `app-routing.module.ts`: - ```ts import { NbAuthComponent, @@ -88,8 +89,8 @@ import { } from '@nebular/auth'; export const routes: Routes = [ - // ... - + // ... + { path: 'auth', component: NbAuthComponent, @@ -120,9 +121,9 @@ export const routes: Routes = [ }, ], }, - ]; ``` +
## Enable Styles @@ -130,15 +131,13 @@ export const routes: Routes = [ Last but not least - install the component styles into your styles.scss ([more details](docs/design-system/enable-customizable-theme)): ```scss -@import '@nebular/auth/styles/globals'; - -// ... +// ... +@use '@nebular/auth/styles/globals' as *; @include nb-install() { @include nb-theme-global(); @include nb-auth-global(); // append the install mixin inside of the nb-install -}; - +} ; ``` At this point, if you navigate to http://localhost:4200/#/auth/login the login form is shown. diff --git a/docs/articles/design-system/css-properties.md b/docs/articles/design-system/css-properties.md index 511b924d6a..d9c236b473 100644 --- a/docs/articles/design-system/css-properties.md +++ b/docs/articles/design-system/css-properties.md @@ -3,13 +3,13 @@ Custom CSS properties - custom variables that could be declared in CSS, changed and resolved in browser runtime. This allows dynamically change application themes with no need to reload the page. Moreover, no additional CSS is loaded, resulting in good performance achievements. -Starting with Nebular 4, Nebular can run in custom CSS properties mode in a simple configuration change. +Starting with Nebular 4, Nebular can run in custom CSS properties mode in a simple configuration change.
Setup Required
- This guide assumes you already enabled [Theme Customization](docs/design-system/enable-customizable-theme) - and reviewed [Eva Design System Theme](docs/design-system/eva-design-system-theme) rules. + This guide assumes you already enabled Theme Customization + and reviewed Eva Design System Theme rules.
@@ -18,18 +18,21 @@ Starting with Nebular 4, Nebular can run in custom CSS properties mode in a simp To enable the mode, find your `themes.scss` and set the `$nb-enable-css-custom-properties` to `true`: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; $nb-enable-css-custom-properties: true; // <-- enable css custom properties -$nb-themes: nb-register-theme(( - - // your theme - - text-basic-color: color-basic-800, - text-disabled-color: color-basic-600, -), default, default); +$nb-themes: nb-register-theme( + ( + // your theme + text-basic-color: color-basic-800, + text-disabled-color: color-basic-600 + ), + default, + default +); ``` As a result, all theme properties will be placed under `body` element as custom css properties: @@ -43,9 +46,9 @@ As a result, all theme properties will be placed under `body` element as custom ``` -When you change a theme, the theme class will be changed, resulting in a new set of css properties, and changing all the component styles dynamically, in the runtime. -
+When you change a theme, the theme class will be changed, resulting in a new set of css properties, and changing all the component styles dynamically, in the runtime. +
## Related Articles diff --git a/docs/articles/design-system/custom-theme.md b/docs/articles/design-system/custom-theme.md index 58be9332bc..7bb9c992dd 100644 --- a/docs/articles/design-system/custom-theme.md +++ b/docs/articles/design-system/custom-theme.md @@ -1,18 +1,19 @@ # Create Custom Theme Custom theme creation is a very similar process to [Theme Customization](docs/design-system/enable-customizable-theme). -Only in this case, we suggest following simple but very important rules so that we can minimize the number of necessary changes +Only in this case, we suggest following simple but very important rules so that we can minimize the number of necessary changes and avoid repeated code.
Setup Required
- This guide assumes you already enabled [Theme Customization](docs/design-system/enable-customizable-theme) - and reviewed [Eva Design System Theme](docs/design-system/eva-design-system-theme) rules. + This guide assumes you already enabled Theme Customization + and reviewed Eva Design System Theme rules.
-Before we start, let's pretend we want to create an `aquamarine` theme with a violet primary color. +Before we start, let's pretend we want to create an `aquamarine` theme with a violet primary color. +
## Select parent Theme @@ -20,6 +21,7 @@ Before we start, let's pretend we want to create an `aquamarine` theme with a vi In order to minify the amount of work, parent theme selection is a very important step. Though it is very simple - for colored and dark themes - use `dark` base theme, otherwise - `default` theme. In our case `aquamarine` theme is a colored one, let's use `dark` as a parent. +
## Register new Theme @@ -27,15 +29,11 @@ In our case `aquamarine` theme is a colored one, let's use `dark` as a parent. Now, let's register the new theme in `themes.scss`: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/dark'; - - -$nb-themes: nb-register-theme(( - - -), aquamarine, dark); // <- theme name and a parent theme +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/dark'; +$nb-themes: nb-register-theme((), aquamarine, dark); // <- theme name and a parent theme ``` Next, find your `NbThemeModule.forRoot` declaration and change the value of the `name` setting: @@ -50,9 +48,11 @@ Next, find your `NbThemeModule.forRoot` declaration and change the value of the ``` Now the new theme is enabled, let's modify it. +
## Start with Basic + Basic shades are one of the most important as they are the source for backgrounds, borders and text colors. In the dark theme, text colors utilize the upper part of the shades (whitish colors) and backgrounds the lower part. @@ -61,59 +61,69 @@ Let's modify them and put our aquamarine colors, starting with white for `color- for `color-basic-1100`: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/dark'; - -$nb-themes: nb-register-theme(( - color-basic-100: white, - color-basic-200: #eefafc, - color-basic-300: #e8f5fa, - color-basic-400: #d6e6f2, - color-basic-500: #c7dbeb, - color-basic-600: #a9c0db, - color-basic-700: #4f969e, - color-basic-800: #336a77, - color-basic-900: #295c66, - color-basic-1000: #244555, - color-basic-1100: #121a2b, -), aquamarine, dark); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/dark'; + +$nb-themes: nb-register-theme( + ( + color-basic-100: white, + color-basic-200: #eefafc, + color-basic-300: #e8f5fa, + color-basic-400: #d6e6f2, + color-basic-500: #c7dbeb, + color-basic-600: #a9c0db, + color-basic-700: #4f969e, + color-basic-800: #336a77, + color-basic-900: #295c66, + color-basic-1000: #244555, + color-basic-1100: #121a2b, + ), + aquamarine, + dark +); ``` +
## Tweak backgrounds In a case we need to tweak the color more accurately, we can change how basic colors are used. -For example, we can make the theme backgrounds and borders lighter, by using basic color lighter for one grade up: +For example, we can make the theme backgrounds and borders lighter, by using basic color lighter for one grade up: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/dark'; - -$nb-themes: nb-register-theme(( - color-basic-100: white, - color-basic-200: #eefafc, - color-basic-300: #e8f5fa, - color-basic-400: #d6e6f2, - color-basic-500: #c7dbeb, - color-basic-600: #a9c0db, - color-basic-700: #4f969e, - color-basic-800: #336a77, - color-basic-900: #295c66, - color-basic-1000: #244555, - color-basic-1100: #121a2b, - - background-basic-color-1: color-basic-700, // <- 800 by default - background-basic-color-2: color-basic-800, // <- 900 by default - background-basic-color-3: color-basic-900, // <- etc - background-basic-color-4: color-basic-100, - - border-basic-color-1: color-basic-700, - border-basic-color-2: color-basic-800, - border-basic-color-3: color-basic-900, - border-basic-color-4: color-basic-1000, - border-basic-color-5: color-basic-1100, -), aquamarine, dark); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/dark'; + +$nb-themes: nb-register-theme( + ( + color-basic-100: white, + color-basic-200: #eefafc, + color-basic-300: #e8f5fa, + color-basic-400: #d6e6f2, + color-basic-500: #c7dbeb, + color-basic-600: #a9c0db, + color-basic-700: #4f969e, + color-basic-800: #336a77, + color-basic-900: #295c66, + color-basic-1000: #244555, + color-basic-1100: #121a2b, + background-basic-color-1: color-basic-700, + background-basic-color-2: color-basic-800, + background-basic-color-3: color-basic-900, + background-basic-color-4: color-basic-100, + border-basic-color-1: color-basic-700, + border-basic-color-2: color-basic-800, + border-basic-color-3: color-basic-900, + border-basic-color-4: color-basic-1000, + border-basic-color-5: color-basic-1100, + ), + aquamarine, + dark +); ``` +
## Adjust shadows @@ -121,76 +131,81 @@ $nb-themes: nb-register-theme(( Since we changed backgrounds to a lighter ones, we might need to change elements shadow, making it lighter as well: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/dark'; - -$nb-themes: nb-register-theme(( - color-basic-100: white, - color-basic-200: #eefafc, - color-basic-300: #e8f5fa, - color-basic-400: #d6e6f2, - color-basic-500: #c7dbeb, - color-basic-600: #a9c0db, - color-basic-700: #4f969e, - color-basic-800: #336a77, - color-basic-900: #295c66, - color-basic-1000: #244555, - color-basic-1100: #121a2b, - - background-basic-color-1: color-basic-700, - background-basic-color-2: color-basic-800, - background-basic-color-3: color-basic-900, - background-basic-color-4: color-basic-100, - - border-basic-color-1: color-basic-700, - border-basic-color-2: color-basic-800, - border-basic-color-3: color-basic-900, - border-basic-color-4: color-basic-1000, - border-basic-color-5: color-basic-1100, - - shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), // <- lighter shadow -), aquamarine, dark); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/dark'; + +$nb-themes: nb-register-theme( + ( + color-basic-100: white, + color-basic-200: #eefafc, + color-basic-300: #e8f5fa, + color-basic-400: #d6e6f2, + color-basic-500: #c7dbeb, + color-basic-600: #a9c0db, + color-basic-700: #4f969e, + color-basic-800: #336a77, + color-basic-900: #295c66, + color-basic-1000: #244555, + color-basic-1100: #121a2b, + background-basic-color-1: color-basic-700, + background-basic-color-2: color-basic-800, + background-basic-color-3: color-basic-900, + background-basic-color-4: color-basic-100, + border-basic-color-1: color-basic-700, + border-basic-color-2: color-basic-800, + border-basic-color-3: color-basic-900, + border-basic-color-4: color-basic-1000, + border-basic-color-5: color-basic-1100, + shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), + ), + aquamarine, + dark +); ``` +
## Text Colors Texts color may also be affected by the backgrounds change. In our case, `disabled` text is now the same -color as a background. Let's make it one shade lighter: +color as a background. Let's make it one shade lighter: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/dark'; - -$nb-themes: nb-register-theme(( - color-basic-100: white, - color-basic-200: #eefafc, - color-basic-300: #e8f5fa, - color-basic-400: #d6e6f2, - color-basic-500: #c7dbeb, - color-basic-600: #a9c0db, - color-basic-700: #4f969e, - color-basic-800: #336a77, - color-basic-900: #295c66, - color-basic-1000: #244555, - color-basic-1100: #121a2b, - - background-basic-color-1: color-basic-700, - background-basic-color-2: color-basic-800, - background-basic-color-3: color-basic-900, - background-basic-color-4: color-basic-100, - - border-basic-color-1: color-basic-700, - border-basic-color-2: color-basic-800, - border-basic-color-3: color-basic-900, - border-basic-color-4: color-basic-1000, - border-basic-color-5: color-basic-1100, - - shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), - - text-disabled-color: color-basic-600, // <- 700 is default -), aquamarine, dark); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/dark'; + +$nb-themes: nb-register-theme( + ( + color-basic-100: white, + color-basic-200: #eefafc, + color-basic-300: #e8f5fa, + color-basic-400: #d6e6f2, + color-basic-500: #c7dbeb, + color-basic-600: #a9c0db, + color-basic-700: #4f969e, + color-basic-800: #336a77, + color-basic-900: #295c66, + color-basic-1000: #244555, + color-basic-1100: #121a2b, + background-basic-color-1: color-basic-700, + background-basic-color-2: color-basic-800, + background-basic-color-3: color-basic-900, + background-basic-color-4: color-basic-100, + border-basic-color-1: color-basic-700, + border-basic-color-2: color-basic-800, + border-basic-color-3: color-basic-900, + border-basic-color-4: color-basic-1000, + border-basic-color-5: color-basic-1100, + shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), + text-disabled-color: color-basic-600, + ), + aquamarine, + dark +); ``` +
## Primary Color @@ -199,52 +214,53 @@ Lastly, let's make the final change and replace the primary blue color with desi [Eva Colors](https://colors.eva.design?utm_campaign=eva_design%20-%20eva%20colors%20-%20nebular%20docs%20link&utm_source=nebular&utm_medium=referral&utm_content=custom_theme_primary_color) is a great tool to generate colors pallet from a given brand color. ```scss -$nb-themes: nb-register-theme(( - - color-primary-100: #faf7ff, // <- primary violet shades - color-primary-200: #ece3ff, - color-primary-300: #d5bfff, - color-primary-400: #b18aff, - color-primary-500: #a16eff, - color-primary-600: #7b51db, - color-primary-700: #5a37b8, - color-primary-800: #3e2494, - color-primary-900: #29157a, - - color-basic-100: white, - color-basic-200: #eefafc, - color-basic-300: #e8f5fa, - color-basic-400: #d6e6f2, - color-basic-500: #c7dbeb, - color-basic-600: #a9c0db, - color-basic-700: #497d8e, - color-basic-800: #336a77, - color-basic-900: #295c66, - color-basic-1000: #244555, - color-basic-1100: #121a2b, - - background-basic-color-1: color-basic-700, - background-basic-color-2: color-basic-800, - background-basic-color-3: color-basic-900, - background-basic-color-4: color-basic-100, - - border-basic-color-1: color-basic-700, - border-basic-color-2: color-basic-800, - border-basic-color-3: color-basic-900, - border-basic-color-4: color-basic-1000, - border-basic-color-5: color-basic-1100, - - shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), - - text-disabled-color: color-basic-600, -), aquamarine, dark); +$nb-themes: nb-register-theme( + ( + color-primary-100: #faf7ff, + // <- primary violet shades + color-primary-200: #ece3ff, + color-primary-300: #d5bfff, + color-primary-400: #b18aff, + color-primary-500: #a16eff, + color-primary-600: #7b51db, + color-primary-700: #5a37b8, + color-primary-800: #3e2494, + color-primary-900: #29157a, + color-basic-100: white, + color-basic-200: #eefafc, + color-basic-300: #e8f5fa, + color-basic-400: #d6e6f2, + color-basic-500: #c7dbeb, + color-basic-600: #a9c0db, + color-basic-700: #497d8e, + color-basic-800: #336a77, + color-basic-900: #295c66, + color-basic-1000: #244555, + color-basic-1100: #121a2b, + background-basic-color-1: color-basic-700, + background-basic-color-2: color-basic-800, + background-basic-color-3: color-basic-900, + background-basic-color-4: color-basic-100, + border-basic-color-1: color-basic-700, + border-basic-color-2: color-basic-800, + border-basic-color-3: color-basic-900, + border-basic-color-4: color-basic-1000, + border-basic-color-5: color-basic-1100, + shadow: 0 0.5rem 1rem 0 rgba(25, 30, 51, 0.24), + text-disabled-color: color-basic-600, + ), + aquamarine, + dark +); ``` + Simple as that, here's our result: ![image](assets/images/articles/design-system/aquamarine-theme.png) That's it. In a similar way, the rest of the available theme variables could be changed to achieve the desired result. Complete list of variables could be found under [Default Theme Variables](docs/design-system/default-theme) table. +
## Related Articles diff --git a/docs/articles/design-system/enable-customizable-theme.md b/docs/articles/design-system/enable-customizable-theme.md index a232262ad8..9b657697ef 100644 --- a/docs/articles/design-system/enable-customizable-theme.md +++ b/docs/articles/design-system/enable-customizable-theme.md @@ -17,10 +17,11 @@ Create a `themes.scss` in your `src` folder and import a theme of your choice: ```scss // import Nebular Theme System and the default theme -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; - +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; ``` +
## Modify theme variables @@ -29,38 +30,50 @@ To adjust some of the theme variables, we need to register our changes using `nb Let's make text color lighter and disabled text - darker: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; - -$nb-themes: nb-register-theme(( - text-basic-color: color-basic-800, // <- we setting color-basic-800 instead of color-basic-1000 - text-disabled-color: color-basic-600, // <- and color-basic-600 as instead of color-basic-500 -), default, default); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; + +$nb-themes: nb-register-theme( + ( + // we setting color-basic-800 instead of color-basic-1000 + text-basic-color: color-basic-800, + // and color-basic-600 as instead of color-basic-500 + text-disabled-color: color-basic-600 + ), + default, + default +); ``` We can also modify a primary color, for example make it violet. [Eva Colors](https://colors.eva.design?utm_campaign=eva_design%20-%20eva%20colors%20-%20nebular%20docs%20link&utm_source=nebular&utm_medium=referral&utm_content=enable_customizable_theme_primary_color) is a great tool to generate colors pallet from a given brand color. ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; - -$nb-themes: nb-register-theme(( - - color-primary-100: #faf7ff, // <- new primary color - color-primary-200: #ece3ff, - color-primary-300: #d5bfff, - color-primary-400: #b18aff, - color-primary-500: #a16eff, - color-primary-600: #7b51db, - color-primary-700: #5a37b8, - color-primary-800: #3e2494, - color-primary-900: #29157a, - - text-basic-color: color-basic-800, - text-disabled-color: color-basic-600, -), default, default); +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; + +$nb-themes: nb-register-theme( + ( + // new primary color + color-primary-100: #faf7ff, + color-primary-200: #ece3ff, + color-primary-300: #d5bfff, + color-primary-400: #b18aff, + color-primary-500: #a16eff, + color-primary-600: #7b51db, + color-primary-700: #5a37b8, + color-primary-800: #3e2494, + color-primary-900: #29157a, + text-basic-color: color-basic-800, + text-disabled-color: color-basic-600 + ), + default, + default +); ``` +
## Enable Nebular Styles @@ -69,16 +82,17 @@ The last thing, find your `styles.scss` (or create one and add it into `angular. ```scss // this is our just created themes.scss file, make sure the path to the file is correct -@import 'themes'; +@use 'themes' as *; // framework component styles -@import '@nebular/theme/styles/globals'; +@use '@nebular/theme/styles/globals' as *; // install the framework styles @include nb-install() { @include nb-theme-global(); -}; +} ``` +
## Related Articles @@ -86,5 +100,3 @@ The last thing, find your `styles.scss` (or create one and add it into `angular. - [Use Theme Variables](docs/design-system/use-theme-variables) - [Create Custom Theme](docs/design-system/create-custom-theme) - [Multiple Runtime Themes](docs/design-system/enable-multiple-runtime-themes) - - diff --git a/docs/articles/design-system/multiple-runtime-themes.md b/docs/articles/design-system/multiple-runtime-themes.md index d1a7db7630..f311daf8a0 100644 --- a/docs/articles/design-system/multiple-runtime-themes.md +++ b/docs/articles/design-system/multiple-runtime-themes.md @@ -2,37 +2,48 @@ This mode comes in handy when you need to have multiple themes and be able to change them in the run-time. -
Setup Required
- This guide assumes you already enabled [Theme Customization](docs/design-system/enable-customizable-theme) - and reviewed [Eva Design System Theme](docs/design-system/eva-design-system-theme) rules. + This guide assumes you already enabled Theme Customization + and reviewed Eva Design System Theme rules.
## Enable Second Theme + Assuming you already have the `themes.scss` file with the `default` theme enabled, let's add a second theme: ```scss -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; -@import '@nebular/theme/styles/themes/dark'; - -$nb-themes: nb-register-theme(( - text-basic-color: color-basic-800, // some styles we changed - text-disabled-color: color-basic-600, -), default, default); - -$nb-themes: nb-register-theme(( - text-basic-color: color-basic-800, // some styles we changed - text-disabled-color: color-basic-600, -), dark, dark); - +@forward '@nebular/theme/styles/theming'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; +@use '@nebular/theme/styles/themes/dark'; + +$nb-themes: nb-register-theme( + ( + // some styles we changed + text-basic-color: color-basic-800, + text-disabled-color: color-basic-600 + ), + default, + default +); + +$nb-themes: nb-register-theme( + ( + // some styles we changed + text-basic-color: color-basic-800, + text-disabled-color: color-basic-600 + ), + dark, + dark +); ``` Basically, that's it. Now you have two themes registered. +
## Related Articles diff --git a/docs/articles/design-system/use-theme-variables.md b/docs/articles/design-system/use-theme-variables.md index 496a7148c2..7533576301 100644 --- a/docs/articles/design-system/use-theme-variables.md +++ b/docs/articles/design-system/use-theme-variables.md @@ -1,7 +1,8 @@ # Use Theme Variable -In case when you need to access theme variables from your application component, +In case when you need to access theme variables from your application component, Nebular provides you with simple sass function called `nb-theme`. +
## Import Theme @@ -10,8 +11,9 @@ In you `*.component.scss` add an import of `themes.scss` (created in [Enable Customizable Theme](docs/design-system/enable-customizable-theme) step): ```scss -@import '../../../themes'; +@use '../../../themes' as *; ``` +
## Access Variable @@ -19,14 +21,15 @@ In you `*.component.scss` add an import of `themes.scss` Now we can simply call `nb-theme(variable-name)` to access a variable: ```scss -@import '../../../themes'; +@use '../../../themes' as *; :host { - background: nb-theme(background-basic-color-1); } ``` + Complete list of variables could be found under [Default Theme Variables](docs/design-system/default-theme) table. +
## Access with Multiples Theme Mode @@ -35,23 +38,19 @@ In a case when you have [Multiple Runtime Themes](docs/design-system/enable-mult using `nb-install-component` mixin like this: ```scss - -@import '../../../themes'; +@use '../../../themes' as *; @include nb-install-component { - background: nb-theme(background-basic-color-1); } - ``` -The mixin will multiple the component styles per each enabled theme, giving the ability to use run-time themes. -Note, in case when [Custom CSS Properties](docs/design-system/enable-css-properties-mode) mode enables, +The mixin will multiple the component styles per each enabled theme, giving the ability to use run-time themes. +Note, in case when [Custom CSS Properties](docs/design-system/enable-css-properties-mode) mode enables, the mixin **is not needed**, since there is no need to multiple the styles. ## Related Articles - [Design System Theme](docs/design-system/design-system-theme) -- [Enable Customizable Theme](docs/design-system/enable-customizable-theme) -- [Create Custom Theme](docs/design-system/create-custom-theme) - +- [Enable Customizable Theme](docs/design-system/enable-customizable-theme) +- [Create Custom Theme](docs/design-system/create-custom-theme) diff --git a/docs/themes.scss b/docs/themes.scss index 0f1a8d4a25..8239f594d4 100644 --- a/docs/themes.scss +++ b/docs/themes.scss @@ -3,10 +3,11 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -$nb-theme-export-mode: true; -@import '../src/framework/theme/styles/theming'; -@import '../src/framework/theme/styles/themes'; -@import '../src/framework/theme/styles/themes/mapping'; +@use '../src/framework/theme/styles/theming-variables'; +theming-variables.$nb-theme-export-mode: true; +@use '../src/framework/theme/styles/theming'; +@use '../src/framework/theme/styles/themes'; +@use '../src/framework/theme/styles/themes/mapping'; -$v: export('output.json', $nb-themes-export, $eva-mapping); +$v: export('output.json', theming-variables.$nb-themes-export, mapping.$eva-mapping); diff --git a/packages-smoke/src/styles.scss b/packages-smoke/src/styles.scss index 586b8cdba2..badc292f48 100644 --- a/packages-smoke/src/styles.scss +++ b/packages-smoke/src/styles.scss @@ -1,10 +1,10 @@ /* You can add global styles to this file, and also import other style files */ // import Nebular Theme System and the default theme -@import '@nebular/theme/styles/theming'; -@import '@nebular/theme/styles/themes/default'; -@import '@nebular/theme/styles/globals'; +@use '@nebular/theme/styles/theming' as *; +@use '@nebular/theme/styles/themes/default'; +@use '@nebular/theme/styles/globals' as *; // install the framework @include nb-install() { @include nb-theme-global(); -} ; +} diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f17e0e0fd8..9593ceb24a 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,6 +3,8 @@ align-items: center; flex-wrap: wrap; + color: black; + &.tools-visible { padding: 0.25rem; } diff --git a/src/app/layout-direction-toggle/layout-direction-toggle.component.scss b/src/app/layout-direction-toggle/layout-direction-toggle.component.scss index 021424f224..d05e2b1794 100644 --- a/src/app/layout-direction-toggle/layout-direction-toggle.component.scss +++ b/src/app/layout-direction-toggle/layout-direction-toggle.component.scss @@ -1,8 +1,9 @@ input { - margin: 0.125rem 0.125rem 0 0; - vertical-align: top; + margin-right: 0.125rem; } label { margin: 0; + display: inline-flex; + align-items: center; } diff --git a/src/app/layout-theme-toggle/layout-theme-toggle.component.scss b/src/app/layout-theme-toggle/layout-theme-toggle.component.scss index e60fd8e2e9..32962bcd54 100644 --- a/src/app/layout-theme-toggle/layout-theme-toggle.component.scss +++ b/src/app/layout-theme-toggle/layout-theme-toggle.component.scss @@ -3,7 +3,9 @@ } .theme-radio-label { - margin-right: 0.25rem; + display: inline-flex; + align-items: center; + margin-right: 0.5rem; &:last-child { margin-right: 0; @@ -11,6 +13,5 @@ } .theme-radio { - margin: 0.125rem 0.125rem 0 0; - vertical-align: top; + margin-right: 0.125rem; } diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss index 76a328cb3a..03ed9f3978 100644 --- a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss +++ b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../theme/styles/theming' as *; + @mixin nb-auth-block-theme() { nb-auth-block { .text-link { @@ -19,4 +21,3 @@ } } } - diff --git a/src/framework/auth/components/auth.component.scss b/src/framework/auth/components/auth.component.scss index da94ab5e1f..cb1e461750 100644 --- a/src/framework/auth/components/auth.component.scss +++ b/src/framework/auth/components/auth.component.scss @@ -1,4 +1,4 @@ -@import '../../theme/styles/global/breakpoints'; +@use '../../theme/styles/globals' as *; :host { $auth-layout-padding: 2.5rem; diff --git a/src/framework/auth/styles/_globals.scss b/src/framework/auth/styles/_globals.scss index 2b0c573d8a..348d4fefea 100644 --- a/src/framework/auth/styles/_globals.scss +++ b/src/framework/auth/styles/_globals.scss @@ -4,8 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'global/components'; +@use 'global/components'; @mixin nb-auth-global() { - @include nb-auth-components(); + @include components.nb-auth-components(); } diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss index 403dc4ca2e..17274ee7d3 100644 --- a/src/framework/auth/styles/global/_components.scss +++ b/src/framework/auth/styles/global/_components.scss @@ -4,9 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../components/auth-block/auth-block.component.theme'; +@use '../../components/auth-block/auth-block.component.theme' as auth-block-theme; // Create a theme @mixin nb-auth-components() { - @include nb-auth-block-theme(); + @include auth-block-theme.nb-auth-block-theme(); } diff --git a/src/framework/auth/styles/prebuilt/corporate-custom-properties.scss b/src/framework/auth/styles/prebuilt/corporate-custom-properties.scss new file mode 100644 index 0000000000..5a38042189 --- /dev/null +++ b/src/framework/auth/styles/prebuilt/corporate-custom-properties.scss @@ -0,0 +1,9 @@ +@use '../../../theme/styles/themes/corporate'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (corporate); + +@include nb-install() { + @include nb-auth-global(); +} diff --git a/src/framework/auth/styles/prebuilt/corporate.scss b/src/framework/auth/styles/prebuilt/corporate.scss index 016bdaa9b5..141fdffd38 100644 --- a/src/framework/auth/styles/prebuilt/corporate.scss +++ b/src/framework/auth/styles/prebuilt/corporate.scss @@ -1,8 +1,10 @@ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/corporate'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (corporate); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-auth-global(); -}; +} diff --git a/src/framework/auth/styles/prebuilt/cosmic-custom-properties.scss b/src/framework/auth/styles/prebuilt/cosmic-custom-properties.scss new file mode 100644 index 0000000000..15609b49ac --- /dev/null +++ b/src/framework/auth/styles/prebuilt/cosmic-custom-properties.scss @@ -0,0 +1,9 @@ +@use '../../../theme/styles/themes/cosmic'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (cosmic); + +@include nb-install() { + @include nb-auth-global(); +} diff --git a/src/framework/auth/styles/prebuilt/cosmic.scss b/src/framework/auth/styles/prebuilt/cosmic.scss index 8533dbf47d..211b16e8d4 100644 --- a/src/framework/auth/styles/prebuilt/cosmic.scss +++ b/src/framework/auth/styles/prebuilt/cosmic.scss @@ -1,8 +1,10 @@ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/cosmic'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (cosmic); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-auth-global(); -}; +} diff --git a/src/framework/auth/styles/prebuilt/dark-custom-properties.scss b/src/framework/auth/styles/prebuilt/dark-custom-properties.scss new file mode 100644 index 0000000000..0683710c17 --- /dev/null +++ b/src/framework/auth/styles/prebuilt/dark-custom-properties.scss @@ -0,0 +1,9 @@ +@use '../../../theme/styles/themes/dark'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (dark); + +@include nb-install() { + @include nb-auth-global(); +} diff --git a/src/framework/auth/styles/prebuilt/dark.scss b/src/framework/auth/styles/prebuilt/dark.scss index 127af36361..e34fa24bf4 100644 --- a/src/framework/auth/styles/prebuilt/dark.scss +++ b/src/framework/auth/styles/prebuilt/dark.scss @@ -1,8 +1,10 @@ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/dark'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (dark); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-auth-global(); -}; +} diff --git a/src/framework/auth/styles/prebuilt/default-custom-properties.scss b/src/framework/auth/styles/prebuilt/default-custom-properties.scss new file mode 100644 index 0000000000..27267aeb43 --- /dev/null +++ b/src/framework/auth/styles/prebuilt/default-custom-properties.scss @@ -0,0 +1,9 @@ +@use '../../../theme/styles/themes/default'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (default); + +@include nb-install() { + @include nb-auth-global(); +} diff --git a/src/framework/auth/styles/prebuilt/default.scss b/src/framework/auth/styles/prebuilt/default.scss index 8a6f6d8852..e7edd5dc27 100644 --- a/src/framework/auth/styles/prebuilt/default.scss +++ b/src/framework/auth/styles/prebuilt/default.scss @@ -1,8 +1,10 @@ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/default'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (default); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-auth-global(); -}; +} diff --git a/src/framework/bootstrap/styles/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss index cdeb3af6ab..b476db12ba 100644 --- a/src/framework/bootstrap/styles/_button-group.scss +++ b/src/framework/bootstrap/styles/_button-group.scss @@ -4,7 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'status-buttons'; +@use '../../theme/styles/theming' as *; +@use 'status-buttons'; @mixin btn-group-primary-separator() { @include nb-theme(color-primary-600); @@ -30,7 +31,6 @@ @include nb-theme(color-primary-600); } - @mixin dropdown-separator($color) { border-left: 1px solid $color; } @@ -59,9 +59,7 @@ @include dropdown-separator(nb-theme(button-filled-primary-active-background-color)); } - @mixin nb-b-button-group-theme() { - .btn-group:not(.btn-divided-group) > .btn + .btn { &.btn-primary { @include dropdown-primary-separator(); @@ -112,13 +110,13 @@ border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; - }; + } @include nb-rtl() { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } } &:last-child { @include nb-ltr() { @@ -126,13 +124,13 @@ border-bottom-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } @include nb-rtl() { border-top-left-radius: nb-theme(button-rectangle-border-radius); border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; - }; + } } } @@ -141,21 +139,21 @@ @include nb-ltr() { border-top-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; - }; + } @include nb-rtl() { border-top-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); - }; + } } & > .btn:last-of-type.dropdown-toggle { @include nb-ltr() { border-top-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); - }; + } @include nb-rtl() { border-top-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; - }; + } } &:not(.show) { @@ -163,21 +161,21 @@ @include nb-ltr() { border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: 0; - }; + } @include nb-rtl() { border-bottom-left-radius: 0; border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } } & > .btn:last-of-type.dropdown-toggle { @include nb-ltr() { border-bottom-left-radius: 0; border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } @include nb-rtl() { border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: 0; - }; + } } } @@ -192,21 +190,21 @@ @include nb-ltr() { border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: 0; - }; + } @include nb-rtl() { border-bottom-left-radius: 0; border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } } & > .btn:last-of-type.dropdown-toggle { @include nb-ltr() { border-bottom-left-radius: 0; border-bottom-right-radius: nb-theme(button-rectangle-border-radius); - }; + } @include nb-rtl() { border-bottom-left-radius: nb-theme(button-rectangle-border-radius); border-bottom-right-radius: 0; - }; + } } &:not(.show) { @@ -214,21 +212,21 @@ @include nb-ltr() { border-top-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; - }; + } @include nb-rtl() { border-top-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); - }; + } } & > .btn:last-of-type.dropdown-toggle { @include nb-ltr() { border-top-left-radius: 0; border-top-right-radius: nb-theme(button-rectangle-border-radius); - }; + } @include nb-rtl() { border-top-left-radius: nb-theme(button-rectangle-border-radius); border-top-right-radius: 0; - }; + } } } diff --git a/src/framework/bootstrap/styles/_buttons.scss b/src/framework/bootstrap/styles/_buttons.scss index 01069491ee..a5c274e623 100644 --- a/src/framework/bootstrap/styles/_buttons.scss +++ b/src/framework/bootstrap/styles/_buttons.scss @@ -4,14 +4,14 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'shape-buttons'; -@import 'size-buttons'; -@import 'status-buttons'; -@import 'hero-buttons'; -@import 'outline-buttons'; +@use '../../theme/styles/theming' as *; +@use 'shape-buttons'; +@use 'size-buttons'; +@use 'status-buttons'; +@use 'hero-buttons'; +@use 'outline-buttons'; @mixin nb-b-buttons-theme() { - .btn { cursor: nb-theme(button-cursor); font-family: nb-theme(button-text-font-family); @@ -26,12 +26,12 @@ cursor: nb-theme(button-disabled-cursor); } - @include b-btn-size(medium); + @include size-buttons.b-btn-size(medium); } - @include b-btn-shapes(); - @include b-btn-sizes(); - @include b-btn-statuses(); - @include b-btn-heros(); - @include b-btn-outlines(); + @include shape-buttons.b-btn-shapes(); + @include size-buttons.b-btn-sizes(); + @include status-buttons.b-btn-statuses(); + @include hero-buttons.b-btn-heros(); + @include outline-buttons.b-btn-outlines(); } diff --git a/src/framework/bootstrap/styles/_default-form-control.scss b/src/framework/bootstrap/styles/_default-form-control.scss index 37690b6290..c84aff3771 100644 --- a/src/framework/bootstrap/styles/_default-form-control.scss +++ b/src/framework/bootstrap/styles/_default-form-control.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin form-control-default() { .form-control-success { @include form-control-success(); diff --git a/src/framework/bootstrap/styles/_dropdowns.scss b/src/framework/bootstrap/styles/_dropdowns.scss index 6e0a44133d..c056cd6e98 100644 --- a/src/framework/bootstrap/styles/_dropdowns.scss +++ b/src/framework/bootstrap/styles/_dropdowns.scss @@ -3,8 +3,9 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'outline-buttons'; +@use '../../theme/styles/theming' as *; +@use 'outline-buttons'; @mixin nb-b-dropdowns-theme() { .dropdown-menu { diff --git a/src/framework/bootstrap/styles/_forms.scss b/src/framework/bootstrap/styles/_forms.scss index a096216526..6fe34f5663 100644 --- a/src/framework/bootstrap/styles/_forms.scss +++ b/src/framework/bootstrap/styles/_forms.scss @@ -3,12 +3,12 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../theme/styles/core/mixins'; -@import 'size-form-control'; -@import 'default-form-control'; -@mixin nb-b-forms-theme() { +@use '../../theme/styles/theming' as *; +@use 'size-form-control'; +@use 'default-form-control'; +@mixin nb-b-forms-theme() { .form-control { background-color: nb-theme(input-basic-background-color); border-color: nb-theme(input-basic-border-color); @@ -48,6 +48,6 @@ } } - @include form-control-size(); - @include form-control-default(); + @include size-form-control.form-control-size(); + @include default-form-control.form-control-default(); } diff --git a/src/framework/bootstrap/styles/_globals.scss b/src/framework/bootstrap/styles/_globals.scss index 079cfe4f89..949bd29184 100644 --- a/src/framework/bootstrap/styles/_globals.scss +++ b/src/framework/bootstrap/styles/_globals.scss @@ -4,24 +4,24 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use 'buttons'; +@use 'button-group'; +@use 'dropdowns'; +@use 'icon-buttons'; +@use 'forms'; +@use 'modals'; +@use 'layout'; @import 'bootstrap/scss/functions'; @import 'bootstrap/scss/variables'; @import 'bootstrap/scss/mixins'; @import 'bootstrap/scss/grid'; -@import 'buttons'; -@import 'button-group'; -@import 'dropdowns'; -@import 'icon-buttons'; -@import 'forms'; -@import 'modals'; -@import 'layout'; @mixin nb-bootstrap-global() { - @include nb-b-buttons-theme(); - @include nb-b-button-group-theme(); - @include nb-b-dropdowns-theme(); - @include nb-b-icon-buttons-theme(); - @include nb-b-forms-theme(); - @include nb-b-modals-theme(); - @include nb-b-layout-theme(); + @include buttons.nb-b-buttons-theme(); + @include button-group.nb-b-button-group-theme(); + @include dropdowns.nb-b-dropdowns-theme(); + @include icon-buttons.nb-b-icon-buttons-theme(); + @include forms.nb-b-forms-theme(); + @include modals.nb-b-modals-theme(); + @include layout.nb-b-layout-theme(); } diff --git a/src/framework/bootstrap/styles/_hero-buttons.scss b/src/framework/bootstrap/styles/_hero-buttons.scss index d34b497f11..56c110d814 100644 --- a/src/framework/bootstrap/styles/_hero-buttons.scss +++ b/src/framework/bootstrap/styles/_hero-buttons.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin b-btn-hero($status) { $left-color: nb-theme(button-hero-#{$status}-left-background-color); $right-color: nb-theme(button-hero-#{$status}-right-background-color); diff --git a/src/framework/bootstrap/styles/_icon-buttons.scss b/src/framework/bootstrap/styles/_icon-buttons.scss index 3c76335e81..798d13bc36 100644 --- a/src/framework/bootstrap/styles/_icon-buttons.scss +++ b/src/framework/bootstrap/styles/_icon-buttons.scss @@ -4,8 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-b-icon-buttons-theme() { +@use '../../theme/styles/theming' as *; +@mixin nb-b-icon-buttons-theme() { .btn-icon { font-size: 1.75rem; padding: 0.5rem 1rem; @@ -20,11 +21,11 @@ @include nb-ltr() { padding-left: 1rem; text-align: left; - }; + } @include nb-rtl() { padding-right: 1rem; text-align: right; - }; + } nb-icon, .icon { diff --git a/src/framework/bootstrap/styles/_layout.scss b/src/framework/bootstrap/styles/_layout.scss index f75f642f74..ed0094e0b1 100644 --- a/src/framework/bootstrap/styles/_layout.scss +++ b/src/framework/bootstrap/styles/_layout.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/globals' as *; + @mixin nb-b-layout-theme() { @include media-breakpoint-down(is) { .row { diff --git a/src/framework/bootstrap/styles/_modals.scss b/src/framework/bootstrap/styles/_modals.scss index 8e7871055e..a437ee47c3 100644 --- a/src/framework/bootstrap/styles/_modals.scss +++ b/src/framework/bootstrap/styles/_modals.scss @@ -3,10 +3,11 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../theme/styles/core/mixins'; -@mixin nb-b-modals-theme() { +@use '../../theme/styles/theming' as *; +@use '../../theme/components/card/card.component.theme' as card-theme; +@mixin nb-b-modals-theme() { .modal-content { display: flex; flex-direction: column; @@ -25,9 +26,10 @@ margin-bottom: nb-theme(card-margin-bottom); @include nb-scrollbars( - nb-theme(card-scrollbar-color), - nb-theme(card-scrollbar-background-color), - nb-theme(card-scrollbar-width)); + nb-theme(card-scrollbar-color), + nb-theme(card-scrollbar-background-color), + nb-theme(card-scrollbar-width) + ); } .modal-header { @@ -63,9 +65,10 @@ padding: nb-theme(card-padding); position: relative; @include nb-scrollbars( - nb-theme(card-scrollbar-color), - nb-theme(card-scrollbar-background-color), - nb-theme(card-scrollbar-width)); + nb-theme(card-scrollbar-color), + nb-theme(card-scrollbar-background-color), + nb-theme(card-scrollbar-width) + ); } .modal-footer { @@ -76,6 +79,6 @@ } nb-card-header { - @include nb-card-header(); + @include card-theme.nb-card-header(); } } diff --git a/src/framework/bootstrap/styles/_outline-buttons.scss b/src/framework/bootstrap/styles/_outline-buttons.scss index c8938aae2c..8f910bb206 100644 --- a/src/framework/bootstrap/styles/_outline-buttons.scss +++ b/src/framework/bootstrap/styles/_outline-buttons.scss @@ -4,7 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'status-buttons'; +@use '../../theme/styles/theming' as *; +@use 'status-buttons'; @mixin b-btn-outline($status) { background-color: nb-theme(button-outline-#{$status}-background-color); diff --git a/src/framework/bootstrap/styles/_shape-buttons.scss b/src/framework/bootstrap/styles/_shape-buttons.scss index cb26c65666..97065a976b 100644 --- a/src/framework/bootstrap/styles/_shape-buttons.scss +++ b/src/framework/bootstrap/styles/_shape-buttons.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin b-btn-shape($shape) { border-radius: nb-theme(button-#{$shape}-border-radius); } diff --git a/src/framework/bootstrap/styles/_size-buttons.scss b/src/framework/bootstrap/styles/_size-buttons.scss index 59396c3e28..bf3e4b0006 100644 --- a/src/framework/bootstrap/styles/_size-buttons.scss +++ b/src/framework/bootstrap/styles/_size-buttons.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin b-btn-size($size) { font-size: nb-theme(button-#{$size}-text-font-size); line-height: nb-theme(button-#{$size}-text-line-height); diff --git a/src/framework/bootstrap/styles/_size-form-control.scss b/src/framework/bootstrap/styles/_size-form-control.scss index 79fceb56be..fa3df2c6f1 100644 --- a/src/framework/bootstrap/styles/_size-form-control.scss +++ b/src/framework/bootstrap/styles/_size-form-control.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin size($size) { font-size: nb-theme(input-#{$size}-text-font-size); font-weight: nb-theme(input-#{$size}-text-font-weight); diff --git a/src/framework/bootstrap/styles/_status-buttons.scss b/src/framework/bootstrap/styles/_status-buttons.scss index 22bd90fbf5..d99568ba1d 100644 --- a/src/framework/bootstrap/styles/_status-buttons.scss +++ b/src/framework/bootstrap/styles/_status-buttons.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../theme/styles/theming' as *; + @mixin b-btn-status($status) { background-color: nb-theme(button-filled-#{$status}-background-color); border-color: nb-theme(button-filled-#{$status}-border-color); @@ -32,7 +34,6 @@ } @mixin b-btn-statuses() { - .btn.btn-primary { @include b-btn-status(primary); } @@ -42,7 +43,7 @@ } .btn.btn-warning { - @include b-btn-status(warning ); + @include b-btn-status(warning); } .btn.btn-info { diff --git a/src/framework/bootstrap/styles/prebuilt/corporate-custom-properties.scss b/src/framework/bootstrap/styles/prebuilt/corporate-custom-properties.scss new file mode 100644 index 0000000000..d85808cbc2 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/corporate-custom-properties.scss @@ -0,0 +1,15 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@use '../../../theme/styles/themes/corporate'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (corporate); + +@include nb-install() { + @include nb-bootstrap-global(); +} diff --git a/src/framework/bootstrap/styles/prebuilt/corporate.scss b/src/framework/bootstrap/styles/prebuilt/corporate.scss index c5f91fa479..1c01401c11 100644 --- a/src/framework/bootstrap/styles/prebuilt/corporate.scss +++ b/src/framework/bootstrap/styles/prebuilt/corporate.scss @@ -4,11 +4,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/corporate'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (corporate); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-bootstrap-global(); -}; +} diff --git a/src/framework/bootstrap/styles/prebuilt/cosmic-custom-properties.scss b/src/framework/bootstrap/styles/prebuilt/cosmic-custom-properties.scss new file mode 100644 index 0000000000..5f8855cfa2 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/cosmic-custom-properties.scss @@ -0,0 +1,15 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@use '../../../theme/styles/themes/cosmic'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (cosmic); + +@include nb-install() { + @include nb-bootstrap-global(); +} diff --git a/src/framework/bootstrap/styles/prebuilt/cosmic.scss b/src/framework/bootstrap/styles/prebuilt/cosmic.scss index 99923e0636..6742b7768f 100644 --- a/src/framework/bootstrap/styles/prebuilt/cosmic.scss +++ b/src/framework/bootstrap/styles/prebuilt/cosmic.scss @@ -4,11 +4,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/cosmic'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (cosmic); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-bootstrap-global(); -}; +} diff --git a/src/framework/bootstrap/styles/prebuilt/dark-custom-properties.scss b/src/framework/bootstrap/styles/prebuilt/dark-custom-properties.scss new file mode 100644 index 0000000000..82a4b4d914 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/dark-custom-properties.scss @@ -0,0 +1,15 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@use '../../../theme/styles/themes/dark'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (dark); + +@include nb-install() { + @include nb-bootstrap-global(); +} diff --git a/src/framework/bootstrap/styles/prebuilt/dark.scss b/src/framework/bootstrap/styles/prebuilt/dark.scss index 52354d1426..692476f382 100644 --- a/src/framework/bootstrap/styles/prebuilt/dark.scss +++ b/src/framework/bootstrap/styles/prebuilt/dark.scss @@ -4,11 +4,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/dark'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (dark); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-bootstrap-global(); -}; +} diff --git a/src/framework/bootstrap/styles/prebuilt/default-custom-properties.scss b/src/framework/bootstrap/styles/prebuilt/default-custom-properties.scss new file mode 100644 index 0000000000..3455c0b613 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/default-custom-properties.scss @@ -0,0 +1,15 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@use '../../../theme/styles/themes/default'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; + +$nb-enabled-themes: (default); + +@include nb-install() { + @include nb-bootstrap-global(); +} diff --git a/src/framework/bootstrap/styles/prebuilt/default.scss b/src/framework/bootstrap/styles/prebuilt/default.scss index cb4a7fe926..b04d4e29ed 100644 --- a/src/framework/bootstrap/styles/prebuilt/default.scss +++ b/src/framework/bootstrap/styles/prebuilt/default.scss @@ -4,11 +4,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../../theme/styles/all'; -@import '../globals'; +@use '../../../theme/styles/themes/default'; +@use '../../../theme/styles/theming' as *; +@use '../globals' as *; $nb-enabled-themes: (default); +$nb-enable-css-custom-properties: false; @include nb-install() { @include nb-bootstrap-global(); -}; +} diff --git a/src/framework/theme/components/accordion/_accordion.component.theme.scss b/src/framework/theme/components/accordion/_accordion.component.theme.scss index 77045c3c59..e5b0d8cbc7 100644 --- a/src/framework/theme/components/accordion/_accordion.component.theme.scss +++ b/src/framework/theme/components/accordion/_accordion.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-accordion-item-header() { border-bottom-width: nb-theme(accordion-header-border-width); border-bottom-style: nb-theme(accordion-header-border-style); @@ -19,7 +21,6 @@ } @mixin nb-accordion-theme() { - nb-accordion { display: block; box-shadow: nb-theme(accordion-shadow); diff --git a/src/framework/theme/components/actions/_actions.component.theme.scss b/src/framework/theme/components/actions/_actions.component.theme.scss index c18cb204c5..04815486a4 100644 --- a/src/framework/theme/components/actions/_actions.component.theme.scss +++ b/src/framework/theme/components/actions/_actions.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-actions-theme() { nb-actions { background-color: nb-theme(actions-background-color); @@ -25,7 +27,6 @@ } } - nb-action { $divider: nb-theme(actions-divider-width) nb-theme(actions-divider-style) nb-theme(actions-divider-color); @include nb-ltr(border-left, $divider); diff --git a/src/framework/theme/components/alert/_alert.component.theme.scss b/src/framework/theme/components/alert/_alert.component.theme.scss index 74423733c6..486f545dc1 100644 --- a/src/framework/theme/components/alert/_alert.component.theme.scss +++ b/src/framework/theme/components/alert/_alert.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-alert-theme() { nb-alert { border-radius: nb-theme(alert-border-radius); @@ -18,9 +20,10 @@ margin-bottom: nb-theme(alert-bottom-margin); @include nb-scrollbars( - nb-theme(alert-scrollbar-color), - nb-theme(alert-scrollbar-background-color), - nb-theme(alert-scrollbar-width)); + nb-theme(alert-scrollbar-color), + nb-theme(alert-scrollbar-background-color), + nb-theme(alert-scrollbar-width) + ); &.closable { @include nb-ltr(padding-right, nb-theme(alert-closable-start-padding)); @@ -64,4 +67,3 @@ } } } - diff --git a/src/framework/theme/components/alert/alert.component.scss b/src/framework/theme/components/alert/alert.component.scss index fcb5d145c9..1530dac0ec 100644 --- a/src/framework/theme/components/alert/alert.component.scss +++ b/src/framework/theme/components/alert/alert.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { display: flex; diff --git a/src/framework/theme/components/badge/_badge.component.theme.scss b/src/framework/theme/components/badge/_badge.component.theme.scss index 1ca87df9cb..4121b0ac01 100644 --- a/src/framework/theme/components/badge/_badge.component.theme.scss +++ b/src/framework/theme/components/badge/_badge.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-badge-theme() { nb-badge { border-radius: nb-theme(badge-border-radius); diff --git a/src/framework/theme/components/badge/badge.component.scss b/src/framework/theme/components/badge/badge.component.scss index c079c09a0a..d287640203 100644 --- a/src/framework/theme/components/badge/badge.component.scss +++ b/src/framework/theme/components/badge/badge.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { position: absolute; diff --git a/src/framework/theme/components/button-group/_button-group.component.theme.scss b/src/framework/theme/components/button-group/_button-group.component.theme.scss index c23ef877df..5d26fe6014 100644 --- a/src/framework/theme/components/button-group/_button-group.component.theme.scss +++ b/src/framework/theme/components/button-group/_button-group.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-buttons-group-theme() { nb-button-group { display: inline-flex; diff --git a/src/framework/theme/components/button/_button-core.scss b/src/framework/theme/components/button/_button-core.scss index 2376bc60f2..fc714beb55 100644 --- a/src/framework/theme/components/button/_button-core.scss +++ b/src/framework/theme/components/button/_button-core.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; @mixin nb-button-core() { appearance: none; diff --git a/src/framework/theme/components/button/_button-filled.scss b/src/framework/theme/components/button/_button-filled.scss index 33f147d880..633da5a942 100644 --- a/src/framework/theme/components/button/_button-filled.scss +++ b/src/framework/theme/components/button/_button-filled.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin button-filled() { [nbButton].appearance-filled { border-style: nb-theme(button-filled-border-style); diff --git a/src/framework/theme/components/button/_button-ghost.scss b/src/framework/theme/components/button/_button-ghost.scss index 18c61e6512..64c71ef09a 100644 --- a/src/framework/theme/components/button/_button-ghost.scss +++ b/src/framework/theme/components/button/_button-ghost.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin button-ghost() { [nbButton].appearance-ghost { background-color: nb-theme(button-ghost-background-color); diff --git a/src/framework/theme/components/button/_button-hero.scss b/src/framework/theme/components/button/_button-hero.scss index 73a8c061e0..5e281a70c4 100644 --- a/src/framework/theme/components/button/_button-hero.scss +++ b/src/framework/theme/components/button/_button-hero.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; @mixin button-hero() { [nbButton].appearance-hero { diff --git a/src/framework/theme/components/button/_button-outline.scss b/src/framework/theme/components/button/_button-outline.scss index 708936ab63..6e570943a3 100644 --- a/src/framework/theme/components/button/_button-outline.scss +++ b/src/framework/theme/components/button/_button-outline.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin button-outline() { [nbButton].appearance-outline { border-style: nb-theme(button-outline-border-style); diff --git a/src/framework/theme/components/button/_button.component.theme.scss b/src/framework/theme/components/button/_button.component.theme.scss index 2e42f95e03..0bcd3dbf3f 100644 --- a/src/framework/theme/components/button/_button.component.theme.scss +++ b/src/framework/theme/components/button/_button.component.theme.scss @@ -4,15 +4,16 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './button-core'; -@import './button-filled'; -@import './button-outline'; -@import './button-ghost'; -@import './button-hero'; +@use '../../styles/theming' as *; +@use 'button-core'; +@use 'button-filled'; +@use 'button-outline'; +@use 'button-ghost'; +@use 'button-hero'; @mixin nb-buttons-theme() { [nbButton] { - @include nb-button-core(); + @include button-core.nb-button-core(); cursor: nb-theme(button-cursor); font-family: nb-theme(button-text-font-family); @@ -73,8 +74,8 @@ text-decoration: none; } - @include button-filled; - @include button-outline; - @include button-ghost; - @include button-hero; + @include button-filled.button-filled; + @include button-outline.button-outline; + @include button-ghost.button-ghost; + @include button-hero.button-hero; } diff --git a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss index a39dfdcc35..c0e3cbf55a 100644 --- a/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss +++ b/src/framework/theme/components/calendar-kit/_calendar-kit.theme.scss @@ -4,12 +4,12 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './components/calendar-navigation/calendar-navigation.theme'; -@import './components/calendar-picker/calendar-picker.component.theme'; -@import './components/calendar-days-names/calendar-days-names.component.theme'; -@import './components/calendar-week-number/calendar-week-number.component.theme'; -@import './components/calendar-day-picker/calendar-day-picker.component.theme'; -@import './components/calendar-cell.theme'; +@use 'components/calendar-navigation/calendar-navigation.theme' as *; +@use 'components/calendar-picker/calendar-picker.component.theme' as *; +@use 'components/calendar-days-names/calendar-days-names.component.theme' as *; +@use 'components/calendar-week-number/calendar-week-number.component.theme' as *; +@use 'components/calendar-day-picker/calendar-day-picker.component.theme' as *; +@use 'components/calendar-cell.theme' as *; @mixin nb-calendar-kit-theme() { @include nb-calendar-navigation-theme(); diff --git a/src/framework/theme/components/calendar-kit/components/_calendar-cell.theme.scss b/src/framework/theme/components/calendar-kit/components/_calendar-cell.theme.scss index 3a916c0df6..6e522fe55d 100644 --- a/src/framework/theme/components/calendar-kit/components/_calendar-cell.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/_calendar-cell.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../styles/theming' as *; + @mixin nb-calendar-cell-theme() { nb-calendar-picker { .day-cell { diff --git a/src/framework/theme/components/calendar-kit/components/calendar-actions/calendar-actions.component.scss b/src/framework/theme/components/calendar-kit/components/calendar-actions/calendar-actions.component.scss index 72b0b281ac..0c01aa538e 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-actions/calendar-actions.component.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-actions/calendar-actions.component.scss @@ -1,4 +1,4 @@ -@import '../../../../styles/core/mixins'; +@use '../../../../styles/theming' as *; :host { display: flex; diff --git a/src/framework/theme/components/calendar-kit/components/calendar-day-picker/_calendar-day-picker.component.theme.scss b/src/framework/theme/components/calendar-kit/components/calendar-day-picker/_calendar-day-picker.component.theme.scss index eb691fd62e..a2cfc24e97 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-day-picker/_calendar-day-picker.component.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-day-picker/_calendar-day-picker.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../../styles/theming' as *; + @mixin nb-calendar-day-picker-theme { nb-calendar-day-picker nb-calendar-week-numbers { $border: nb-theme(calendar-weeknumber-divider-width) solid nb-theme(calendar-weeknumber-divider-color); diff --git a/src/framework/theme/components/calendar-kit/components/calendar-days-names/_calendar-days-names.component.theme.scss b/src/framework/theme/components/calendar-kit/components/calendar-days-names/_calendar-days-names.component.theme.scss index 4f7d10f7db..711c6a7e54 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-days-names/_calendar-days-names.component.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-days-names/_calendar-days-names.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../../styles/theming' as *; + @mixin nb-calendar-days-names-theme() { nb-calendar-days-names { background: nb-theme(calendar-weekday-background); @@ -14,11 +16,11 @@ @include nb-ltr() { padding-left: nb-theme(calendar-picker-padding-start); padding-right: nb-theme(calendar-picker-padding-end); - }; + } @include nb-rtl() { padding-left: nb-theme(calendar-picker-padding-end); padding-right: nb-theme(calendar-picker-padding-start); - }; + } .day { width: nb-theme(calendar-weekday-width); diff --git a/src/framework/theme/components/calendar-kit/components/calendar-navigation/_calendar-navigation.theme.scss b/src/framework/theme/components/calendar-kit/components/calendar-navigation/_calendar-navigation.theme.scss index 5380013ac1..33db5ed568 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-navigation/_calendar-navigation.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-navigation/_calendar-navigation.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../../styles/theming' as *; + @mixin nb-calendar-navigation-theme() { nb-calendar-view-mode, nb-calendar-pageable-navigation { diff --git a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss b/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss index 459d849c0e..b9dc4e3237 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-navigation/calendar-pageable-navigation.component.scss @@ -4,8 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../../../styles/core/mixins'; - :host { display: flex; align-items: center; diff --git a/src/framework/theme/components/calendar-kit/components/calendar-picker/_calendar-picker.component.theme.scss b/src/framework/theme/components/calendar-kit/components/calendar-picker/_calendar-picker.component.theme.scss index e4958ce634..4b4cdddb86 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-picker/_calendar-picker.component.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-picker/_calendar-picker.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../../styles/theming' as *; + @mixin nb-calendar-picker-theme() { nb-calendar-picker { display: block; @@ -13,10 +15,10 @@ @include nb-ltr() { padding-right: nb-theme(calendar-picker-padding-end); padding-left: nb-theme(calendar-picker-padding-start); - }; + } @include nb-rtl() { padding-right: nb-theme(calendar-picker-padding-start); padding-left: nb-theme(calendar-picker-padding-end); - }; + } } } diff --git a/src/framework/theme/components/calendar-kit/components/calendar-week-number/_calendar-week-number.component.theme.scss b/src/framework/theme/components/calendar-kit/components/calendar-week-number/_calendar-week-number.component.theme.scss index 71fe416a91..84a796fdec 100644 --- a/src/framework/theme/components/calendar-kit/components/calendar-week-number/_calendar-week-number.component.theme.scss +++ b/src/framework/theme/components/calendar-kit/components/calendar-week-number/_calendar-week-number.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../../../styles/theming' as *; + @mixin nb-calendar-week-numbers-theme() { nb-calendar-week-numbers { background: nb-theme(calendar-weeknumber-background); diff --git a/src/framework/theme/components/calendar/_calendar.component.theme.scss b/src/framework/theme/components/calendar/_calendar.component.theme.scss index 1f17aedf20..5142caf70b 100644 --- a/src/framework/theme/components/calendar/_calendar.component.theme.scss +++ b/src/framework/theme/components/calendar/_calendar.component.theme.scss @@ -4,8 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-calendar-theme() { +@use '../../styles/theming' as *; +@mixin nb-calendar-theme() { nb-base-calendar { nb-card { background-color: nb-theme(calendar-background-color); diff --git a/src/framework/theme/components/card/_card.component.theme.scss b/src/framework/theme/components/card/_card.component.theme.scss index bba7d9f03e..db6c1f0b31 100644 --- a/src/framework/theme/components/card/_card.component.theme.scss +++ b/src/framework/theme/components/card/_card.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-card-header() { padding: nb-theme(card-padding); border-bottom: nb-theme(card-divider-width) nb-theme(card-divider-style) nb-theme(card-divider-color); @@ -36,9 +38,10 @@ margin-bottom: nb-theme(card-margin-bottom); @include nb-scrollbars( - nb-theme(card-scrollbar-color), - nb-theme(card-scrollbar-background-color), - nb-theme(card-scrollbar-width)); + nb-theme(card-scrollbar-color), + nb-theme(card-scrollbar-background-color), + nb-theme(card-scrollbar-width) + ); @each $size in nb-get-sizes() { &.size-#{$size} { @@ -85,9 +88,10 @@ padding: nb-theme(card-padding); position: relative; @include nb-scrollbars( - nb-theme(card-scrollbar-color), - nb-theme(card-scrollbar-background-color), - nb-theme(card-scrollbar-width)); + nb-theme(card-scrollbar-color), + nb-theme(card-scrollbar-background-color), + nb-theme(card-scrollbar-width) + ); } nb-card-footer { @@ -101,4 +105,3 @@ @include nb-card-header(); } } - diff --git a/src/framework/theme/components/card/flip-card/_flip-card.component.theme.scss b/src/framework/theme/components/card/flip-card/_flip-card.component.theme.scss index 43105251cd..d6f613cf64 100644 --- a/src/framework/theme/components/card/flip-card/_flip-card.component.theme.scss +++ b/src/framework/theme/components/card/flip-card/_flip-card.component.theme.scss @@ -1,3 +1,5 @@ +@use '../../../styles/theming' as *; + @mixin nd-flip-card-theme { .flip-button { line-height: nb-theme(card-text-line-height); diff --git a/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss b/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss index 96ad704cf0..77bd54ab32 100644 --- a/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss +++ b/src/framework/theme/components/card/reveal-card/_reveal-card.component.theme.scss @@ -1,3 +1,5 @@ +@use '../../../styles/theming' as *; + @mixin nd-reveal-card-theme { nb-reveal-card { box-shadow: nb-theme(card-shadow); diff --git a/src/framework/theme/components/cdk/overlay/_overlay.theme.scss b/src/framework/theme/components/cdk/overlay/_overlay.theme.scss index ec75527340..5eff2cd219 100644 --- a/src/framework/theme/components/cdk/overlay/_overlay.theme.scss +++ b/src/framework/theme/components/cdk/overlay/_overlay.theme.scss @@ -1,4 +1,5 @@ -@import '@angular/cdk/overlay-prebuilt'; +@use '@angular/cdk/overlay-prebuilt'; +@use '../../../styles/theming' as *; @mixin nb-overlay-theme { .overlay-backdrop { diff --git a/src/framework/theme/components/chat/_chat.component.theme.scss b/src/framework/theme/components/chat/_chat.component.theme.scss index 1c892228b4..feed35ffa8 100644 --- a/src/framework/theme/components/chat/_chat.component.theme.scss +++ b/src/framework/theme/components/chat/_chat.component.theme.scss @@ -4,8 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-chat-theme() { +@use '../../styles/theming' as *; +@mixin nb-chat-theme() { nb-chat { background-color: nb-theme(chat-background-color); border: nb-theme(chat-border); @@ -38,9 +39,10 @@ overflow: auto; flex: 1; @include nb-scrollbars( - nb-theme(chat-scrollbar-color), - nb-theme(chat-scrollbar-background-color), - nb-theme(chat-scrollbar-width)); + nb-theme(chat-scrollbar-color), + nb-theme(chat-scrollbar-background-color), + nb-theme(chat-scrollbar-width) + ); } .messages { @@ -98,7 +100,6 @@ } nb-chat-message-text { - display: flex; flex-direction: column; @@ -141,7 +142,8 @@ align-items: center; flex-shrink: 0; border-radius: 0.5rem; - &:hover, &:focus { + &:hover, + &:focus { text-decoration: none; color: nb-theme(chat-message-file-text-color); } @@ -174,7 +176,6 @@ } nb-chat-message-quote { - p.quote { font-style: italic; font-size: 0.875rem; @@ -354,7 +355,7 @@ a, a:hover, - a:focus, { + a:focus { color: nb-theme(chat-message-text-color); } } @@ -367,4 +368,3 @@ @include nb-rtl(border-top-left-radius, 0); } } - diff --git a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss index 1fa5490b8b..54f23c218f 100644 --- a/src/framework/theme/components/checkbox/_checkbox.component.theme.scss +++ b/src/framework/theme/components/checkbox/_checkbox.component.theme.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; @mixin nb-checkbox-theme() { nb-checkbox { diff --git a/src/framework/theme/components/checkbox/checkbox.component.scss b/src/framework/theme/components/checkbox/checkbox.component.scss index b119f172b9..ea7d734376 100644 --- a/src/framework/theme/components/checkbox/checkbox.component.scss +++ b/src/framework/theme/components/checkbox/checkbox.component.scss @@ -1,4 +1,4 @@ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { .label { diff --git a/src/framework/theme/components/context-menu/_context-menu.component.theme.scss b/src/framework/theme/components/context-menu/_context-menu.component.theme.scss index bd02d560c8..343bddc70c 100644 --- a/src/framework/theme/components/context-menu/_context-menu.component.theme.scss +++ b/src/framework/theme/components/context-menu/_context-menu.component.theme.scss @@ -3,7 +3,8 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; + +@use '../../styles/theming' as *; @mixin nb-context-menu-theme() { .context-menu-host { diff --git a/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss b/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss index d7bbbf881a..4111e15fc4 100644 --- a/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss +++ b/src/framework/theme/components/datepicker/_datepicker-container.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-datepicker-theme { $border: nb-theme(datepicker-border-width) nb-theme(datepicker-border-style) nb-theme(datepicker-border-color); @@ -40,7 +42,7 @@ } .timepicker-single-column-width { - width: nb-theme(timepicker-single-column-width);; + width: nb-theme(timepicker-single-column-width); } .timepicker-multiple-column-width { diff --git a/src/framework/theme/components/datepicker/calendar-with-time-container.component.scss b/src/framework/theme/components/datepicker/calendar-with-time-container.component.scss index 860203fb19..0bec9574ac 100644 --- a/src/framework/theme/components/datepicker/calendar-with-time-container.component.scss +++ b/src/framework/theme/components/datepicker/calendar-with-time-container.component.scss @@ -3,7 +3,8 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; + +@use '../../styles/theming' as *; :host { ::ng-deep nb-card.nb-timepicker-container { diff --git a/src/framework/theme/components/form-field/_form-field.component.theme.scss b/src/framework/theme/components/form-field/_form-field.component.theme.scss index 5456f5d319..991ad1f46a 100644 --- a/src/framework/theme/components/form-field/_form-field.component.theme.scss +++ b/src/framework/theme/components/form-field/_form-field.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-form-field-theme() { .nb-form-control-container { max-width: inherit; diff --git a/src/framework/theme/components/icon/_icon.component.theme.scss b/src/framework/theme/components/icon/_icon.component.theme.scss index 6f5d252f49..14541284fa 100644 --- a/src/framework/theme/components/icon/_icon.component.theme.scss +++ b/src/framework/theme/components/icon/_icon.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-icon-theme() { nb-icon { font-size: nb-theme(icon-font-size); @@ -22,4 +24,3 @@ } } } - diff --git a/src/framework/theme/components/input/_input-shapes.scss b/src/framework/theme/components/input/_input-shapes.scss index d27b4d2820..50fbceb59c 100644 --- a/src/framework/theme/components/input/_input-shapes.scss +++ b/src/framework/theme/components/input/_input-shapes.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin input-shapes() { @each $shape in nb-get-shapes() { &.shape-#{$shape} { diff --git a/src/framework/theme/components/input/_input-sizes.scss b/src/framework/theme/components/input/_input-sizes.scss index 021018d471..5c4e5a2676 100644 --- a/src/framework/theme/components/input/_input-sizes.scss +++ b/src/framework/theme/components/input/_input-sizes.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin input-sizes() { @each $size in nb-get-sizes() { &.size-#{$size} { diff --git a/src/framework/theme/components/input/_input-statuses.scss b/src/framework/theme/components/input/_input-statuses.scss index 77a3fcc6b2..1025c611d7 100644 --- a/src/framework/theme/components/input/_input-statuses.scss +++ b/src/framework/theme/components/input/_input-statuses.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin input-statuses() { @each $status in nb-get-statuses() { &.status-#{$status} { diff --git a/src/framework/theme/components/input/_input.directive.theme.scss b/src/framework/theme/components/input/_input.directive.theme.scss index be9bce0ce5..1ce15ce2bd 100644 --- a/src/framework/theme/components/input/_input.directive.theme.scss +++ b/src/framework/theme/components/input/_input.directive.theme.scss @@ -4,24 +4,25 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './input-statuses'; -@import './input-sizes'; -@import './input-shapes'; +@use '../../styles/theming' as *; +@use '../form-field/form-field.component.theme' as form-field-theme; +@use 'input-statuses'; +@use 'input-sizes'; +@use 'input-shapes'; @mixin nb-input-theme() { - [nbInput] { @include nb-input-core-theme(); - @include input-statuses(); - @include input-sizes(); - @include input-shapes(); + @include input-statuses.input-statuses(); + @include input-sizes.input-sizes(); + @include input-shapes.input-shapes(); } - @include nb-form-field-root-component('[nbInput]'); + @include form-field-theme.nb-form-field-root-component('[nbInput]'); @each $size in nb-get-sizes() { - @include nb-form-field-with-prefix('[nbInput].size-#{$size}', $size); - @include nb-form-field-with-suffix('[nbInput].size-#{$size}', $size); + @include form-field-theme.nb-form-field-with-prefix('[nbInput].size-#{$size}', $size); + @include form-field-theme.nb-form-field-with-suffix('[nbInput].size-#{$size}', $size); } } diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss index e2644b5979..e4a53df5f3 100644 --- a/src/framework/theme/components/layout/_layout.component.theme.scss +++ b/src/framework/theme/components/layout/_layout.component.theme.scss @@ -4,6 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/global/breakpoints' as *; +@use '../../styles/theming' as *; + @mixin window-mode($padding-top) { padding-top: $padding-top; @@ -17,12 +20,12 @@ } nb-sidebar.fixed { - left: calc((100vw - #{nb-theme(layout-window-mode-max-width)}) / 2); + left: calc((100vw - #{$layout-window-mode-max-width}) / 2); } .layout .layout-container { nb-sidebar.fixed.right { - right: calc((100vw - #{nb-theme(layout-window-mode-max-width)}) / 2); + right: calc((100vw - #{$layout-window-mode-max-width}) / 2); } nb-sidebar.fixed { @@ -65,24 +68,24 @@ display: block; .scrollable-container { - max-width: nb-theme(layout-window-mode-max-width); + max-width: $layout-window-mode-max-width; margin: 0 auto; } .layout nb-layout-header { - max-width: nb-theme(layout-window-mode-max-width); + max-width: $layout-window-mode-max-width; margin-left: auto; margin-right: auto; width: 100%; nav { - max-width: nb-theme(layout-window-mode-max-width); + max-width: $layout-window-mode-max-width; margin: 0 auto; } } - @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) { - $padding-top: nb-theme(layout-window-mode-padding-top) * 0.25; + @media screen and (min-width: $layout-window-mode-max-width + 20px) { + $padding-top: calc(#{nb-theme(layout-window-mode-padding-top)} * 0.25); @include window-mode($padding-top); @@ -93,8 +96,8 @@ } } - @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) { - $padding-top: nb-theme(layout-window-mode-padding-top) * 0.5; + @media screen and(min-width: $layout-window-mode-max-width + 150px) { + $padding-top: calc(#{nb-theme(layout-window-mode-padding-top)} * 0.5); @include window-mode($padding-top); @@ -105,7 +108,7 @@ } } - @media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) { + @media screen and (min-width: $layout-window-mode-max-width + 300px) { $padding-top: nb-theme(layout-window-mode-padding-top); @include window-mode($padding-top); diff --git a/src/framework/theme/components/layout/layout.component.scss b/src/framework/theme/components/layout/layout.component.scss index c6e921af8f..079ecc81cd 100644 --- a/src/framework/theme/components/layout/layout.component.scss +++ b/src/framework/theme/components/layout/layout.component.scss @@ -4,10 +4,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { - @include nb-ltr(text-align, left); @include nb-rtl(text-align, right); diff --git a/src/framework/theme/components/layout/layout.component.ts b/src/framework/theme/components/layout/layout.component.ts index e97e8dc899..bc01e02938 100644 --- a/src/framework/theme/components/layout/layout.component.ts +++ b/src/framework/theme/components/layout/layout.component.ts @@ -113,7 +113,6 @@ import { NbOverlayContainerAdapter } from '../cdk/adapter/overlay-container-adap * layout-min-height: * layout-content-width: * layout-window-mode-min-width: - * layout-window-mode-max-width: * layout-window-mode-background-color: * layout-window-mode-padding-top: * layout-window-shadow: diff --git a/src/framework/theme/components/list/_list.component.theme.scss b/src/framework/theme/components/list/_list.component.theme.scss index d51ed4995d..a498d582e7 100644 --- a/src/framework/theme/components/list/_list.component.theme.scss +++ b/src/framework/theme/components/list/_list.component.theme.scss @@ -1,9 +1,8 @@ +@use '../../styles/theming' as *; + @mixin nb-list-theme() { nb-list-item { - border-bottom: - nb-theme(list-item-divider-width) - nb-theme(list-item-divider-style) - nb-theme(list-item-divider-color); + border-bottom: nb-theme(list-item-divider-width) nb-theme(list-item-divider-style) nb-theme(list-item-divider-color); color: nb-theme(list-item-text-color); font-family: nb-theme(list-item-font-family); @@ -13,10 +12,7 @@ padding: nb-theme(list-item-padding); &:first-child { - border-top: - nb-theme(list-item-divider-width) - nb-theme(list-item-divider-style) - nb-theme(list-item-divider-color); + border-top: nb-theme(list-item-divider-width) nb-theme(list-item-divider-style) nb-theme(list-item-divider-color); } } } diff --git a/src/framework/theme/components/menu/_menu.component.theme.scss b/src/framework/theme/components/menu/_menu.component.theme.scss index 662d01a39d..ec9e7d1e88 100644 --- a/src/framework/theme/components/menu/_menu.component.theme.scss +++ b/src/framework/theme/components/menu/_menu.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-menu-theme() { nb-menu { background-color: nb-theme(menu-background-color); diff --git a/src/framework/theme/components/menu/menu.component.scss b/src/framework/theme/components/menu/menu.component.scss index e35c30e3e4..94886cf085 100644 --- a/src/framework/theme/components/menu/menu.component.scss +++ b/src/framework/theme/components/menu/menu.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host ::ng-deep { display: block; diff --git a/src/framework/theme/components/option/_option-list.component.theme.scss b/src/framework/theme/components/option/_option-list.component.theme.scss index f470249079..8744b17f17 100644 --- a/src/framework/theme/components/option/_option-list.component.theme.scss +++ b/src/framework/theme/components/option/_option-list.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-option-list-theme() { nb-option-list { background-color: nb-theme(option-list-background-color); @@ -22,9 +24,8 @@ overflow: auto; } - $adjacent-border: nb-theme(option-list-adjacent-border-width) - nb-theme(option-list-adjacent-border-style) - nb-theme(option-list-adjacent-border-color); + $adjacent-border: nb-theme(option-list-adjacent-border-width) nb-theme(option-list-adjacent-border-style) + nb-theme(option-list-adjacent-border-color); &.position-top { border-bottom: $adjacent-border; } diff --git a/src/framework/theme/components/option/option.component.scss b/src/framework/theme/components/option/option.component.scss index 5488003d4a..81da9f3399 100644 --- a/src/framework/theme/components/option/option.component.scss +++ b/src/framework/theme/components/option/option.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { display: flex; @@ -32,4 +32,3 @@ :host(.nb-transition) { @include nb-component-animation(background-color, color); } - diff --git a/src/framework/theme/components/popover/_popover.component.theme.scss b/src/framework/theme/components/popover/_popover.component.theme.scss index 53ec0c784f..79d8a004de 100644 --- a/src/framework/theme/components/popover/_popover.component.theme.scss +++ b/src/framework/theme/components/popover/_popover.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-popover-theme { nb-popover { $arrow-size: nb-theme(popover-arrow-size); @@ -60,7 +62,7 @@ &.nb-overlay-left .arrow { right: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px); - top: calc(50% - #{$arrow-size * 0.5}); + top: calc(50% - #{$arrow-size} * 0.5); transform: rotate(90deg); } @@ -98,7 +100,7 @@ &.nb-overlay-right .arrow { left: calc(-1 * #{$arrow-size} - #{$arrow-size} / 2 + 2px); - top: calc(50% - #{$arrow-size * 0.5}); + top: calc(50% - #{$arrow-size} * 0.5); transform: rotate(270deg); } diff --git a/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss index 82ec7c92a7..8a4932b2d5 100644 --- a/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss +++ b/src/framework/theme/components/progress-bar/_progress-bar.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-progress-bar-theme() { nb-progress-bar { .progress-container { @@ -21,7 +23,6 @@ } @each $size in nb-get-sizes() { - nb-progress-bar.size-#{$size} { .progress-container { height: nb-theme(progress-bar-#{$size}-height); @@ -36,7 +37,6 @@ } @each $status in nb-get-statuses() { - nb-progress-bar.status-#{$status} { .progress-container { background-color: nb-theme(progress-bar-#{$status}-background-color); @@ -49,4 +49,3 @@ } } } - diff --git a/src/framework/theme/components/radio/_radio.component.theme.scss b/src/framework/theme/components/radio/_radio.component.theme.scss index a80f8bf0c6..cb6803d8cc 100644 --- a/src/framework/theme/components/radio/_radio.component.theme.scss +++ b/src/framework/theme/components/radio/_radio.component.theme.scss @@ -4,6 +4,8 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@use '../../styles/theming' as *; + @mixin nb-radio-theme() { nb-radio { .outer-circle, diff --git a/src/framework/theme/components/radio/radio.component.scss b/src/framework/theme/components/radio/radio.component.scss index 81dde3b4dc..a25b54c58d 100644 --- a/src/framework/theme/components/radio/radio.component.scss +++ b/src/framework/theme/components/radio/radio.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; :host { display: block; diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss index 3e59388c2b..c623944947 100644 --- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss +++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss @@ -4,22 +4,22 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-route-tabset-theme() { +@use '../../styles/theming' as *; +@mixin nb-route-tabset-theme() { nb-route-tabset { @include nb-scrollbars( - nb-theme(route-tabset-scrollbar-color), - nb-theme(route-tabset-scrollbar-background-color), - nb-theme(route-tabset-scrollbar-width)); + nb-theme(route-tabset-scrollbar-color), + nb-theme(route-tabset-scrollbar-background-color), + nb-theme(route-tabset-scrollbar-width) + ); background-color: nb-theme(route-tabset-background-color); border-radius: nb-theme(route-tabset-border-radius); box-shadow: nb-theme(route-tabset-shadow); .route-tabset { - border-bottom: - nb-theme(route-tabset-divider-width) - nb-theme(route-tabset-divider-style) + border-bottom: nb-theme(route-tabset-divider-width) nb-theme(route-tabset-divider-style) nb-theme(route-tabset-divider-color); } @@ -86,7 +86,7 @@ } .route-tab.responsive { - @media screen and (max-width: nb-theme(route-tabset-tab-text-hide-breakpoint)) { + @media screen and (max-width: $route-tabset-tab-text-hide-breakpoint) { .tab-text { display: none; } diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.scss b/src/framework/theme/components/route-tabset/route-tabset.component.scss index 0c832287f3..789ce2d3f0 100644 --- a/src/framework/theme/components/route-tabset/route-tabset.component.scss +++ b/src/framework/theme/components/route-tabset/route-tabset.component.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/core/mixins'; +@use '../../styles/theming' as *; .route-tabset { display: flex; diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts index c7d434ecdc..f52485267b 100644 --- a/src/framework/theme/components/route-tabset/route-tabset.component.ts +++ b/src/framework/theme/components/route-tabset/route-tabset.component.ts @@ -19,7 +19,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers'; * title: 'Route tab #1', * route: '/pages/description', * icon: 'home', - * responsive: true, // hide title before `tabset-tab-text-hide-breakpoint` value + * responsive: true, // hide title before `$tabset-tab-text-hide-breakpoint` value * }, * { * title: 'Route tab #2', @@ -77,7 +77,6 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers'; * route-tabset-scrollbar-color: * route-tabset-scrollbar-background-color: * route-tabset-scrollbar-width: - * route-tabset-tab-text-hide-breakpoint: */ @Component({ selector: 'nb-route-tabset', @@ -85,10 +84,12 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers'; template: `