diff --git a/docs/stark-ui/GETTING_STARTED.md b/docs/stark-ui/GETTING_STARTED.md new file mode 100644 index 0000000000..9a8c832ec1 --- /dev/null +++ b/docs/stark-ui/GETTING_STARTED.md @@ -0,0 +1,54 @@ +# Getting started + +The recommended way to get started with **Stark** is to download the [starter](../../starter) and run `npm install`. + +## Styling + +The starter comes with most things preconfigured and all SCSS files needed for stark-ui are imported by default via `~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle`: + +```scss +/* +IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! +*/ +@import "theme"; +@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle"; +/* App */ +@import "../app/app.component"; +``` + +You can also pick and choose which parts of the Stark styling/theming you want to use. Simply remove `@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle";` from `src/styles/styles.scss` and import only the desired files. + +**IMPORTANT:** Import `base.scss` and `base-theme.scss` since these provide you with a clean basis and some basics for styling/theming your app. + +```scss +/* +IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! +*/ +@import "theme"; +/* Stark styles */ +@import "~@nationalbankbelgium/stark-ui/assets/styles/base"; +@import "~@nationalbankbelgium/stark-ui/assets/theming/base-theme"; +/* Stark component styles */ +@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; +@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; +/* App */ +@import "../app/app.component"; +``` + +Or you can replace the Stark styling with your own: + +```scss +/* +IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! +*/ +@import "theme"; +/* Stark styles */ +@import "~@nationalbankbelgium/stark-ui/assets/styles/base"; +@import "~@nationalbankbelgium/stark-ui/assets/theming/base-theme"; +/* Stark component styles */ +@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; +/* Custom Stark component styles */ +@import "your-custom-stark-styles/app-logo.component"; +/* App */ +@import "../app/app.component"; +``` \ No newline at end of file diff --git a/packages/stark-ui/README.md b/packages/stark-ui/README.md index d2493fc45c..7b8eb87713 100644 --- a/packages/stark-ui/README.md +++ b/packages/stark-ui/README.md @@ -9,3 +9,5 @@ Stark's UI module (aka stark-ui) provides the UI related features of the Stark framework. It includes the UI component kit of Stark as well as other services and utilities. + +**[Getting Started](../../docs/stark-ui/GETTING_STARTED.md)** diff --git a/packages/stark-ui/assets/stark-ui-bundle.scss b/packages/stark-ui/assets/stark-ui-bundle.scss new file mode 100644 index 0000000000..2bfbb05e7d --- /dev/null +++ b/packages/stark-ui/assets/stark-ui-bundle.scss @@ -0,0 +1,49 @@ +/* Stark styles */ +@import "../assets/styles/base"; +@import "../assets/theming/base-theme"; +@import "../assets/styles/components/button"; +@import "../assets/styles/components/button-theme"; +@import "../assets/styles/components/icon"; +@import "../assets/styles/components/card"; +@import "../assets/styles/components/card-theme"; +@import "../assets/styles/components/header"; +@import "../assets/styles/components/header-theme"; +/* Stark components */ +@import "../src/modules/app-logo/components/app-logo.component"; +@import "../src/modules/app-logo/components/app-logo-theme"; +@import "../src/modules/app-data/components/app-data.component"; +@import "../src/modules/app-data/components/app-data-theme"; +@import "../src/modules/app-footer/components/app-footer.component"; +@import "../src/modules/app-footer/components/app-footer-theme"; +@import "../src/modules/app-menu/components/app-menu.component"; +@import "../src/modules/app-menu/components/app-menu-theme"; +@import "../src/modules/action-bar/components/action-bar.component"; +@import "../src/modules/action-bar/components/action-bar-theme"; +@import "../src/modules/app-sidebar/components/app-sidebar.component"; +@import "../src/modules/app-sidebar/components/app-sidebar-theme"; +@import "../src/modules/breadcrumb/components/breadcrumb.component"; +@import "../src/modules/collapsible/components/collapsible.component"; +@import "../src/modules/collapsible/components/collapsible-theme"; +@import "../src/modules/date-range-picker/components/date-range-picker.component"; +@import "../src/modules/language-selector/components/language-selector.component"; +@import "../src/modules/message-pane/components/message-pane.component"; +@import "../src/modules/message-pane/components/message-pane-theme"; +@import "../src/modules/minimap/components/minimap.component"; +@import "../src/modules/minimap/components/minimap-theme"; +@import "../src/modules/slider/components/slider-theme"; +@import "../src/modules/pagination/components/pagination.component"; +@import "../src/modules/pagination/components/pagination-theme"; +@import "../src/modules/pretty-print/components/pretty-print.component"; +@import "../src/modules/table/components/table.component"; +@import "../src/modules/table/components/table-theme"; +@import "../src/modules/table/components/dialogs/multisort.component"; +@import "../src/modules/dropdown/components/dropdown-theme"; +@import "../src/modules/toast-notification/components/toast-notification.component"; +@import "../src/modules/toast-notification/components/toast-notification-theme"; +@import "../src/modules/dropdown/components/dropdown.component"; +/* Stark session-ui pages */ +@import "../src/modules/session-ui/pages/session-ui-pages"; +@import "../src/modules/session-ui/pages/login/login-page.component"; +@import "../src/modules/session-ui/pages/preloading/preloading-page.component"; +@import "../src/modules/session-ui/pages/session-expired/session-expired-page.component"; +@import "../src/modules/session-ui/pages/session-logout/session-logout-page.component"; diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss index 35725b0199..966dbd1c71 100644 --- a/packages/stark-ui/assets/styles/_base.scss +++ b/packages/stark-ui/assets/styles/_base.scss @@ -17,59 +17,33 @@ body { margin-bottom: 64px; } -.stark-header-container { - padding: 0 15px; -} - .stark-main-container { align-self: stretch; min-height: 670px; padding: 64px 15px; } -.stark-basic-table { - border-collapse: collapse; - border-radius: 2px; - border-spacing: 0; - margin: 0 0 32px; - width: 100%; - box-shadow: $elevation-4; - - th { - font-size: mat-font-size($typography-config, subheading-2); - font-weight: mat-font-weight($typography-config, subheading-2); - line-height: mat-line-height($typography-config, subheading-2); - padding: 13px 32px; - text-align: left; - } - - td { - padding: 8px 16px; - } -} - @media screen { .stark-app { display: flex; flex-direction: column; height: 100%; - & .content-wrapper { + + .content-wrapper { flex: 1; display: flex; overflow-y: hidden; position: relative; } - & .stark-app-menu { - display: flex; - flex-direction: column; - } - & main { + + main { flex: 1; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; - & > ui-view { + + > ui-view { flex: 1 0 auto; } } @@ -91,73 +65,6 @@ body { } } -/********** COLORS **********/ -body { - background-color: $offwhite; - color: $primary-dark-text-color; -} - -a { - color: $md-primary-700; -} - -/* utility class to fill to max. size in flex systems */ -.flex-fill { - flex: 1; -} - -td { - background: #fff; - border-bottom: solid 1px #fafafa; -} - -@media screen and (max-width: 1230px) { - .stark-header-extra, - .stark-page-header-actions { - margin-right: 15px; - } - - .stark-header-container, - .stark-fixed-header-container .stark-generic-search .stark-generic-search-container .stark-header-container, - .stark-table-action-bar-container { - box-sizing: border-box; - padding-left: 15px; - padding-right: 15px; - } -} - -/* stark session ui pages */ -.stark-session-ui-page { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - box-sizing: border-box; - max-width: 100%; - width: 500px; - overflow: hidden; - border: solid 1px $divider-color; - box-shadow: $elevation-2; - & header { - padding: 16px; - background: mat-color(map-get($base-theme, primary-palette), 900) url(/assets/images/app-header.png) top right no-repeat; - border-radius: 2px 2px 0 0; - & i { - margin: auto; - display: block; - width: 200px; - height: 60px; - background: url("/assets/stark-core/logo/stark_logo_transparent.svg") no-repeat; - background-size: 100% 100%; - } - } - & content { - display: block; - padding: 16px; - background: #fff; - } -} - .stark-loading { margin: 16px auto; box-sizing: border-box; @@ -187,3 +94,8 @@ td { } } } + +/* utility class to fill to max. size in flex systems */ +.flex-fill { + flex: 1; +} diff --git a/packages/stark-ui/assets/styles/_colors.scss b/packages/stark-ui/assets/styles/_colors.scss deleted file mode 100644 index 07fdf08ac4..0000000000 --- a/packages/stark-ui/assets/styles/_colors.scss +++ /dev/null @@ -1,39 +0,0 @@ -$mat-light-theme-background: $backgrounds; -$mat-light-theme-foreground: $foregrounds; - -@if variable-exists(stark-accent-palette) { - $accent-palette: map-merge($accent-palette, $stark-accent-palette); -} - -@if variable-exists(stark-alert-palette) { - $alert-palette: map-merge($alert-palette, $stark-alert-palette); -} - -@if variable-exists(stark-grey-palette) { - $grey-palette: map-merge($grey-palette, $stark-grey-palette); -} - -@if variable-exists(stark-primary-palette) { - $primary-palette: map-merge($primary-palette, $stark-primary-palette); -} - -@if variable-exists(stark-success-palette) { - $success-palette: map-merge($success-palette, $stark-success-palette); -} - -@if variable-exists(stark-warning-palette) { - $warning-palette: map-merge($warning-palette, $stark-warning-palette); -} - -$base-theme: ( - primary-palette: mat-palette($primary-palette), - accent-palette: mat-palette($accent-palette), - warn-palette: mat-palette($warning-palette) -); - -$material-theme: mat-light-theme( - map-get($base-theme, primary-palette), - map-get($base-theme, accent-palette), - map-get($base-theme, warn-palette) -) !default; -@include angular-material-theme($material-theme); diff --git a/packages/stark-ui/assets/styles/components/_button-theme.scss b/packages/stark-ui/assets/styles/components/_button-theme.scss new file mode 100644 index 0000000000..858db998e7 --- /dev/null +++ b/packages/stark-ui/assets/styles/components/_button-theme.scss @@ -0,0 +1,53 @@ +@mixin stark-button-color($color, $contrast) { + &.mat-button, + &.mat-icon-button, + &.mat-stroked-button { + color: $color; + + .mat-button-focus-overlay { + background-color: rgba($color: $color, $alpha: 0.12); + } + + .mat-ripple-element { + background-color: rgba($color: $color, $alpha: 0.1); + } + } + &.mat-flat-button, + &.mat-raised-button, + &.mat-fab, + &.mat-mini-fab { + color: $contrast; + background-color: $color; + + .mat-ripple-element { + background-color: rgba($color: $contrast, $alpha: 0.1); + } + } + .mat-icon-button { + .mat-ripple-element { + background-color: rgba($color: $color, $alpha: 0.2); + } + } +} + +button { + &.mat-success { + @include stark-button-color(mat-color($success-palette, 500), mat-contrast($success-palette, 500)); + } + + &.mat-alert { + @include stark-button-color(mat-color($alert-palette, 500), mat-contrast($alert-palette, 500)); + } + + &.mat-alt { + @include stark-button-color(mat-color($grey-palette, 900), mat-contrast($grey-palette, 900)); + } + + &.mat-neutral { + @include stark-button-color(mat-color($grey-palette, 400), mat-contrast($grey-palette, 400)); + } + + &.mat-white { + @include stark-button-color(#fff, $dark-primary-text); + } +} diff --git a/packages/stark-ui/assets/styles/components/_button.scss b/packages/stark-ui/assets/styles/components/_button.scss new file mode 100644 index 0000000000..88953a3d58 --- /dev/null +++ b/packages/stark-ui/assets/styles/components/_button.scss @@ -0,0 +1,9 @@ +.mat-button, +.mat-icon-button, +.mat-stroked-button, +.mat-flat-button, +.mat-raised-button, +.mat-fab, +.mat-mini-fab { + text-transform: uppercase; +} diff --git a/packages/stark-ui/assets/styles/components/_card-theme.scss b/packages/stark-ui/assets/styles/components/_card-theme.scss new file mode 100644 index 0000000000..07def924cf --- /dev/null +++ b/packages/stark-ui/assets/styles/components/_card-theme.scss @@ -0,0 +1,4 @@ +.mat-card.stark-card .mat-card-header { + background-color: mat-color(map-get($base-theme, primary-palette), 800); + color: mat-contrast(map-get($base-theme, primary-palette), 800); +} diff --git a/packages/stark-ui/assets/themes/_card-theme.scss b/packages/stark-ui/assets/styles/components/_card.scss similarity index 89% rename from packages/stark-ui/assets/themes/_card-theme.scss rename to packages/stark-ui/assets/styles/components/_card.scss index 561cf18c47..0324c8856b 100644 --- a/packages/stark-ui/assets/themes/_card-theme.scss +++ b/packages/stark-ui/assets/styles/components/_card.scss @@ -6,8 +6,6 @@ padding: 0; .mat-card-header { align-items: center; - background-color: mat-color(map-get($base-theme, primary-palette), 800); - color: mat-contrast(map-get($base-theme, primary-palette), 800); display: flex; justify-content: space-between; margin-bottom: 16px; diff --git a/packages/stark-ui/assets/styles/components/_header-theme.scss b/packages/stark-ui/assets/styles/components/_header-theme.scss new file mode 100644 index 0000000000..0d769d8d14 --- /dev/null +++ b/packages/stark-ui/assets/styles/components/_header-theme.scss @@ -0,0 +1,4 @@ +.stark-app-header { + background-color: mat-color(map-get($base-theme, primary-palette), 900); + color: #fff; +} diff --git a/packages/stark-ui/assets/styles/_header.scss b/packages/stark-ui/assets/styles/components/_header.scss similarity index 86% rename from packages/stark-ui/assets/styles/_header.scss rename to packages/stark-ui/assets/styles/components/_header.scss index 3c6cc5b4d4..77da183cd4 100644 --- a/packages/stark-ui/assets/styles/_header.scss +++ b/packages/stark-ui/assets/styles/components/_header.scss @@ -6,8 +6,10 @@ left: 0; z-index: 110; /* z-index of sticky header in NG Table is 100. z-index of header should be bigger */ overflow: visible; - background: mat-color(map-get($base-theme, primary-palette), 900) url(/assets/images/app-header.png) top right no-repeat; - color: #fff; + background-image: url(/assets/images/app-header.png); + background-position: top right; + background-repeat: no-repeat; + .stark-app-bar { align-items: center; display: flex; @@ -20,24 +22,30 @@ flex-direction: column; justify-content: flex-start; width: 50%; + > div { display: flex; justify-content: flex-start; + &.stark-actions { margin-left: -10px; + .stark-home-button { display: none; } } + > * { margin-right: 3px; } } } + .stark-app-bar-content-center { display: none; width: 0%; } + .stark-app-bar-content-right { display: flex; flex-direction: row-reverse; @@ -52,14 +60,17 @@ display: flex; justify-content: flex-end; margin-bottom: 5px; + &.stark-app-bar-content-right-actions-alt { position: fixed; right: 15px; bottom: 15px; } + &:last-child { margin-bottom: 0; } + > * { margin-left: 3px; } @@ -71,6 +82,7 @@ left: 0; position: absolute; max-width: 100%; + h1 { font-size: 24px; font-weight: 200; @@ -86,11 +98,14 @@ @media #{$tablet-query} { .stark-app-header { height: $stark-header-size-desktop; + .stark-app-bar { align-items: flex-start; margin-top: 6px; + .stark-app-bar-content-left { width: 33%; + > div { &.stark-actions { .stark-home-button { @@ -99,11 +114,13 @@ } } } + .stark-app-bar-content-center { display: flex; justify-content: center; width: 34%; } + .stark-app-bar-content-right { flex-direction: column; width: 33%; @@ -116,6 +133,7 @@ &.stark-app-bar-content-right-center { margin-top: -10px; } + &.stark-app-bar-content-right-actions-alt { margin-top: -10px; position: inherit; @@ -127,6 +145,7 @@ bottom: auto; max-width: 67%; top: 75px; + h1 { font-size: 32px; } @@ -140,24 +159,13 @@ .app-data { display: flex; } + .app-data-alt { display: none; } } } -/* Temporary classes to simulate components that have not been implemented yet */ -.app-data { - background-color: rgba($color: #000, $alpha: 0.4); - border-radius: 20px; - display: none; //To be kept - margin-right: 20px; //To be kept - justify-content: center; - align-items: center; - height: 44px; - width: 290px; -} - @media #{$tablet-query} { } @@ -182,3 +190,17 @@ } } } + +.stark-header-container { + padding: 0 15px; +} + +@media screen and (max-width: 1230px) { + //FIXME: Move to generic-search when it is implemented + .stark-header-container, + .stark-fixed-header-container .stark-generic-search .stark-generic-search-container .stark-header-container { + box-sizing: border-box; + padding-left: 15px; + padding-right: 15px; + } +} diff --git a/packages/stark-ui/assets/styles/components/_icon.scss b/packages/stark-ui/assets/styles/components/_icon.scss new file mode 100644 index 0000000000..93dcf4534e --- /dev/null +++ b/packages/stark-ui/assets/styles/components/_icon.scss @@ -0,0 +1,5 @@ +.mat-icon.stark-small-icon { + $small-icon-size: 18px; + height: $small-icon-size; + width: $small-icon-size; +} diff --git a/packages/stark-ui/assets/themes/_button-theme.scss b/packages/stark-ui/assets/themes/_button-theme.scss deleted file mode 100644 index bd1b1cd0a3..0000000000 --- a/packages/stark-ui/assets/themes/_button-theme.scss +++ /dev/null @@ -1,68 +0,0 @@ -$small-icon-size: 18px; - -@mixin stark-button-color($color, $contrast) { - &.mat-button, - &.mat-icon-button, - &.mat-stroked-button { - color: $color; - - .mat-button-focus-overlay { - background-color: rgba($color: $color, $alpha: 0.12); - } - - .mat-ripple-element { - background-color: rgba($color: $color, $alpha: 0.1); - } - } - &.mat-flat-button, - &.mat-raised-button, - &.mat-fab, - &.mat-mini-fab { - color: $contrast; - background-color: $color; - - .mat-ripple-element { - background-color: rgba($color: $contrast, $alpha: 0.1); - } - } - .mat-icon-button { - .mat-ripple-element { - background-color: rgba($color: $color, $alpha: 0.2); - } - } -} - -.mat-success { - @include stark-button-color(mat-color($success-palette, 500), mat-contrast($success-palette, 500)); -} - -.mat-alert { - @include stark-button-color(mat-color($alert-palette, 500), mat-contrast($alert-palette, 500)); -} - -.mat-alt { - @include stark-button-color(mat-color($grey-palette, 900), mat-contrast($grey-palette, 900)); -} - -.mat-neutral { - @include stark-button-color(mat-color($grey-palette, 400), mat-contrast($grey-palette, 400)); -} - -.mat-white { - @include stark-button-color(#fff, $dark-primary-text); -} - -.mat-icon.stark-small-icon { - height: $small-icon-size; - width: $small-icon-size; -} - -.mat-button, -.mat-icon-button, -.mat-stroked-button, -.mat-flat-button, -.mat-raised-button, -.mat-fab, -.mat-mini-fab { - text-transform: uppercase; -} diff --git a/packages/stark-ui/assets/themes/_theming.scss b/packages/stark-ui/assets/themes/_theming.scss deleted file mode 100644 index a037e03ede..0000000000 --- a/packages/stark-ui/assets/themes/_theming.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "~@angular/material/theming"; - -@import "../styles/variables"; -@import "../styles/colors"; -@import "../styles/typography"; -@import "../styles/material-fixes"; -@import "../styles/media-queries"; -@import "../styles/old-variables"; -@import "../styles/base"; diff --git a/packages/stark-ui/assets/theming.scss b/packages/stark-ui/assets/theming.scss new file mode 100644 index 0000000000..93736c5846 --- /dev/null +++ b/packages/stark-ui/assets/theming.scss @@ -0,0 +1,6 @@ +@import "~@angular/material/theming"; +@import "theming/typography"; +@import "theming/material-palettes"; +@import "theming/stark-palettes"; +@import "styles/old-variables"; +@import "styles/media-queries"; diff --git a/packages/stark-ui/assets/theming/_base-theme.scss b/packages/stark-ui/assets/theming/_base-theme.scss new file mode 100644 index 0000000000..dbef97c71a --- /dev/null +++ b/packages/stark-ui/assets/theming/_base-theme.scss @@ -0,0 +1,47 @@ +body { + background-color: $offwhite; + color: $primary-dark-text-color; +} + +a { + color: $md-primary-700; +} + +/* +Angular Material body-1, body-2,... are to be used only for components +In the body, a different font size is used +*/ +body { + font-family: mat-font-family($typography-config); + font-size: 16px; + font-weight: 400; + line-height: 26px; +} + +h1 { + font-size: mat-font-size($typography-config, headline); + font-weight: mat-font-weight($typography-config, headline); + line-height: mat-line-height($typography-config, headline); + margin: 0 0 16px; +} + +h2 { + font-size: mat-font-size($typography-config, title); + font-weight: mat-font-weight($typography-config, title); + line-height: mat-line-height($typography-config, title); + margin: 0 0 16px; +} + +h3 { + font-size: mat-font-size($typography-config, subheading-2); + font-weight: mat-font-weight($typography-config, subheading-2); + line-height: mat-line-height($typography-config, subheading-2); + margin: 0 0 16px; +} + +h4 { + font-size: mat-font-size($typography-config, subheading-1); + font-weight: mat-font-weight($typography-config, subheading-1); + line-height: mat-line-height($typography-config, subheading-1); + margin: 0 0 16px; +} diff --git a/packages/stark-ui/assets/styles/_variables.scss b/packages/stark-ui/assets/theming/_material-palettes.scss similarity index 51% rename from packages/stark-ui/assets/styles/_variables.scss rename to packages/stark-ui/assets/theming/_material-palettes.scss index 245f52c1e4..4ccc3013be 100644 --- a/packages/stark-ui/assets/styles/_variables.scss +++ b/packages/stark-ui/assets/theming/_material-palettes.scss @@ -1,3 +1,38 @@ +$backgrounds: ( + status-bar: map_get($mat-grey, 300), + app-bar: map_get($mat-grey, 100), + background: #fafafa, + background-light: rgba(#000, 0.02), + hover: rgba(black, 0.04), + card: #fff, + dialog: #fff, + disabled-button: rgba(black, 0.12), + raised-button: #fff, + focused-button: $dark-focused, + selected-button: map_get($mat-grey, 300), + selected-disabled-button: map_get($mat-grey, 400), + disabled-button-toggle: map_get($mat-grey, 200), + unselected-chip: map_get($mat-grey, 300), + disabled-list-option: map_get($mat-grey, 200) +); + +$foregrounds: ( + base: black, + divider: $dark-dividers, + dividers: $dark-dividers, + disabled: $dark-disabled-text, + disabled-button: rgba(black, 0.26), + disabled-text: $dark-disabled-text, + hint-text: $dark-disabled-text, + secondary-text: $dark-secondary-text, + icon: rgba(black, 0.54), + icons: rgba(black, 0.54), + text: rgba(black, 0.87), + slider-min: rgba(black, 0.87), + slider-off: rgba(black, 0.26), + slider-off-active: rgba(black, 0.38) +); + $accent-palette: ( 50: #f2e0e7, 100: #ddb3c4, @@ -30,70 +65,7 @@ $accent-palette: ( A700: $light-primary-text ) ); -$alert-palette: ( - 50: #fae6e6, - 100: #f2c1c1, - 200: #e99797, - 300: #e06d6d, - 400: #da4e4e, - 500: #d32f2f, - 600: #ce2a2a, - 700: #c82323, - 800: #c21d1d, - 900: #b71212, - A100: #ffe7e7, - A200: #ffb4b4, - A400: #ff8181, - A700: #ff6868, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) -); -$grey-palette: ( - 50: #fafafa, - 100: #f5f5f5, - 200: #eee, - 300: #e0e0e0, - 400: #bdbdbd, - 500: #9e9e9e, - 600: #757575, - 700: #616161, - 800: #424242, - 900: #212121, - A100: #fff, - A200: #eee, - A400: #bdbdbd, - A700: #616161, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $light-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $light-primary-text - ) -); + $primary-palette: ( 50: #e0eff8, 100: #b3d6ef, @@ -126,38 +98,7 @@ $primary-palette: ( A700: $dark-primary-text ) ); -$success-palette: ( - 50: #eaf5ea, - 100: #c9e7cb, - 200: #a6d7a8, - 300: #82c785, - 400: #67bb6a, - 500: #4caf50, - 600: #45a849, - 700: #3c9f40, - 800: #339637, - 900: #248627, - A100: #c5ffc7, - A200: #92ff95, - A400: #5fff64, - A700: #46ff4b, - contrast: ( - 50: $dark-primary-text, - 100: $dark-primary-text, - 200: $dark-primary-text, - 300: $dark-primary-text, - 400: $dark-primary-text, - 500: $light-primary-text, - 600: $light-primary-text, - 700: $light-primary-text, - 800: $light-primary-text, - 900: $light-primary-text, - A100: $dark-primary-text, - A200: $dark-primary-text, - A400: $dark-primary-text, - A700: $dark-primary-text - ) -); + $warning-palette: ( 50: #fff3e0, 100: #ffe0b3, @@ -190,105 +131,32 @@ $warning-palette: ( A700: $dark-primary-text ) ); -$backgrounds: ( - status-bar: map_get($mat-grey, 300), - app-bar: map_get($mat-grey, 100), - background: #fafafa, - background-light: rgba(#000, 0.02), - hover: rgba(black, 0.04), - card: #fff, - dialog: #fff, - disabled-button: rgba(black, 0.12), - raised-button: #fff, - focused-button: $dark-focused, - selected-button: map_get($mat-grey, 300), - selected-disabled-button: map_get($mat-grey, 400), - disabled-button-toggle: map_get($mat-grey, 200), - unselected-chip: map_get($mat-grey, 300), - disabled-list-option: map_get($mat-grey, 200) -); -$foregrounds: ( - base: black, - divider: $dark-dividers, - dividers: $dark-dividers, - disabled: $dark-disabled-text, - disabled-button: rgba(black, 0.26), - disabled-text: $dark-disabled-text, - hint-text: $dark-disabled-text, - secondary-text: $dark-secondary-text, - icon: rgba(black, 0.54), - icons: rgba(black, 0.54), - text: rgba(black, 0.87), - slider-min: rgba(black, 0.87), - slider-off: rgba(black, 0.26), - slider-off-active: rgba(black, 0.38) -); -// https://material.angular.io/guide/typography -$typography-theme: ( - font-family: "BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif", - display-4: ( - 112px, - 112px, - 300 - ), - display-3: ( - 56px, - 56px, - 400 - ), - display-2: ( - 45px, - 48px, - 400 - ), - display-1: ( - 34px, - 40px, - 400 - ), - headline: ( - 24px, - 32px, - 400 - ), - title: ( - 20px, - 32px, - 500 - ), - subheading-2: ( - 16px, - 28px, - 400 - ), - subheading-1: ( - 15px, - 24px, - 400 - ), - body-2: ( - 14px, - 24px, - 500 - ), - body-1: ( - 14px, - 20px, - 400 - ), - caption: ( - 12px, - 20px, - 400 - ), - button: ( - 14px, - 16px, - 500 - ), - input: ( - inherit, - 1.125, - 400 - ) + +$mat-light-theme-background: $backgrounds; +$mat-light-theme-foreground: $foregrounds; + +@if variable-exists(stark-accent-palette) { + $accent-palette: map-merge($accent-palette, $stark-accent-palette); +} + +@if variable-exists(stark-primary-palette) { + $primary-palette: map-merge($primary-palette, $stark-primary-palette); +} + +@if variable-exists(stark-warning-palette) { + $warning-palette: map-merge($warning-palette, $stark-warning-palette); +} + +$base-theme: ( + primary-palette: mat-palette($primary-palette), + accent-palette: mat-palette($accent-palette), + warn-palette: mat-palette($warning-palette) ); + +$material-theme: mat-light-theme( + map-get($base-theme, primary-palette), + map-get($base-theme, accent-palette), + map-get($base-theme, warn-palette) +) !default; + +@include angular-material-theme($material-theme); diff --git a/packages/stark-ui/assets/theming/_stark-palettes.scss b/packages/stark-ui/assets/theming/_stark-palettes.scss new file mode 100644 index 0000000000..635475c97f --- /dev/null +++ b/packages/stark-ui/assets/theming/_stark-palettes.scss @@ -0,0 +1,110 @@ +$alert-palette: ( + 50: #fae6e6, + 100: #f2c1c1, + 200: #e99797, + 300: #e06d6d, + 400: #da4e4e, + 500: #d32f2f, + 600: #ce2a2a, + 700: #c82323, + 800: #c21d1d, + 900: #b71212, + A100: #ffe7e7, + A200: #ffb4b4, + A400: #ff8181, + A700: #ff6868, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text + ) +); + +$grey-palette: ( + 50: #fafafa, + 100: #f5f5f5, + 200: #eee, + 300: #e0e0e0, + 400: #bdbdbd, + 500: #9e9e9e, + 600: #757575, + 700: #616161, + 800: #424242, + 900: #212121, + A100: #fff, + A200: #eee, + A400: #bdbdbd, + A700: #616161, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $light-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $light-primary-text + ) +); + +$success-palette: ( + 50: #eaf5ea, + 100: #c9e7cb, + 200: #a6d7a8, + 300: #82c785, + 400: #67bb6a, + 500: #4caf50, + 600: #45a849, + 700: #3c9f40, + 800: #339637, + 900: #248627, + A100: #c5ffc7, + A200: #92ff95, + A400: #5fff64, + A700: #46ff4b, + contrast: ( + 50: $dark-primary-text, + 100: $dark-primary-text, + 200: $dark-primary-text, + 300: $dark-primary-text, + 400: $dark-primary-text, + 500: $light-primary-text, + 600: $light-primary-text, + 700: $light-primary-text, + 800: $light-primary-text, + 900: $light-primary-text, + A100: $dark-primary-text, + A200: $dark-primary-text, + A400: $dark-primary-text, + A700: $dark-primary-text + ) +); + +@if variable-exists(stark-grey-palette) { + $grey-palette: map-merge($grey-palette, $stark-grey-palette); +} + +@if variable-exists(stark-alert-palette) { + $alert-palette: map-merge($alert-palette, $stark-alert-palette); +} + +@if variable-exists(stark-success-palette) { + $success-palette: map-merge($success-palette, $stark-success-palette); +} diff --git a/packages/stark-ui/assets/styles/_typography.scss b/packages/stark-ui/assets/theming/_typography.scss similarity index 57% rename from packages/stark-ui/assets/styles/_typography.scss rename to packages/stark-ui/assets/theming/_typography.scss index ae2dc1433a..27a4d2166c 100644 --- a/packages/stark-ui/assets/styles/_typography.scss +++ b/packages/stark-ui/assets/theming/_typography.scss @@ -1,3 +1,73 @@ +// https://material.angular.io/guide/typography +$typography-theme: ( + font-family: "BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif", + display-4: ( + 112px, + 112px, + 300 + ), + display-3: ( + 56px, + 56px, + 400 + ), + display-2: ( + 45px, + 48px, + 400 + ), + display-1: ( + 34px, + 40px, + 400 + ), + headline: ( + 24px, + 32px, + 400 + ), + title: ( + 20px, + 32px, + 500 + ), + subheading-2: ( + 16px, + 28px, + 400 + ), + subheading-1: ( + 15px, + 24px, + 400 + ), + body-2: ( + 14px, + 24px, + 500 + ), + body-1: ( + 14px, + 20px, + 400 + ), + caption: ( + 12px, + 20px, + 400 + ), + button: ( + 14px, + 16px, + 500 + ), + input: ( + inherit, + 1.125, + 400 + ) +); + @function mat-typography-level-create($list) { @return mat-typography-level(nth($list, 1), nth($list, 2), nth($list, 3)); } @@ -25,42 +95,3 @@ $typography-config: mat-typography-config( ); @include mat-core($typography-config); - -/* -Angular Material body-1, body-2,... are to be used only for components -In the body, a different font size is used -*/ -body { - font-family: mat-font-family($typography-config); - font-size: 16px; - font-weight: 400; - line-height: 26px; -} - -h1 { - font-size: mat-font-size($typography-config, headline); - font-weight: mat-font-weight($typography-config, headline); - line-height: mat-line-height($typography-config, headline); - margin: 0 0 16px; -} - -h2 { - font-size: mat-font-size($typography-config, title); - font-weight: mat-font-weight($typography-config, title); - line-height: mat-line-height($typography-config, title); - margin: 0 0 16px; -} - -h3 { - font-size: mat-font-size($typography-config, subheading-2); - font-weight: mat-font-weight($typography-config, subheading-2); - line-height: mat-line-height($typography-config, subheading-2); - margin: 0 0 16px; -} - -h4 { - font-size: mat-font-size($typography-config, subheading-1); - font-weight: mat-font-weight($typography-config, subheading-1); - line-height: mat-line-height($typography-config, subheading-1); - margin: 0 0 16px; -} diff --git a/packages/stark-ui/src/modules/app-logo/components/_app-logo-theme.scss b/packages/stark-ui/src/modules/app-logo/components/_app-logo-theme.scss index d34db7e8ad..1ea8744ed8 100644 --- a/packages/stark-ui/src/modules/app-logo/components/_app-logo-theme.scss +++ b/packages/stark-ui/src/modules/app-logo/components/_app-logo-theme.scss @@ -3,8 +3,6 @@ /* ============================================================================== */ /* stark-ui: src/modules/app-logo/components/_app-logo-theme.scss */ -@import "~@angular/material/theming"; - @mixin nbb-logo-theme($theme, $button-vars) { } diff --git a/packages/stark-ui/src/modules/app-menu/components/_app-menu-theme.scss b/packages/stark-ui/src/modules/app-menu/components/_app-menu-theme.scss index 7c497cce0d..6ed84589fe 100644 --- a/packages/stark-ui/src/modules/app-menu/components/_app-menu-theme.scss +++ b/packages/stark-ui/src/modules/app-menu/components/_app-menu-theme.scss @@ -4,9 +4,13 @@ /* stark-ui: src/modules/app-menu/components/_app-menu-theme.scss */ .stark-app-menu { + display: flex; + flex-direction: column; + .mat-expansion-panel:not([class*="mat-elevation-z"]) { background: none; box-shadow: none; + .mat-expansion-panel-body { background: none; padding: 0; @@ -17,6 +21,7 @@ &.stark-disabled { opacity: 0.3; cursor: default; + &:hover { background: none; } diff --git a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss index fcc7b15eb5..54ab1be026 100644 --- a/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss +++ b/packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss @@ -2,6 +2,7 @@ /* S t a r k A p p S i d e b a r - T h e m e */ /* ============================================================================== */ /* stark-ui: src/modules/app-sidebar/components/_app-sidebar-theme.scss */ + .stark-app-sidebar { .stark-app-sidenav-menu { background-color: map-get($backgrounds, background); diff --git a/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages-theme.scss b/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages-theme.scss new file mode 100644 index 0000000000..362fc71ea8 --- /dev/null +++ b/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages-theme.scss @@ -0,0 +1,4 @@ +/* stark session ui pages */ +.stark-session-ui-page header { + background-color: mat-color(map-get($base-theme, primary-palette), 900); +} diff --git a/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages.scss b/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages.scss new file mode 100644 index 0000000000..ba2112dd61 --- /dev/null +++ b/packages/stark-ui/src/modules/session-ui/pages/_session-ui-pages.scss @@ -0,0 +1,36 @@ +/* stark session ui pages */ +.stark-session-ui-page { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-sizing: border-box; + max-width: 100%; + width: 500px; + overflow: hidden; + border: solid 1px $divider-color; + box-shadow: $elevation-2; + + & header { + padding: 16px; + background-image: url(/assets/images/app-header.png); + background-position: top right; + background-repeat: no-repeat; + border-radius: 2px 2px 0 0; + + & i { + margin: auto; + display: block; + width: 200px; + height: 60px; + background: url(/assets/stark-core/logo/stark_logo_transparent.svg) no-repeat; + background-size: 100% 100%; + } + } + + & content { + display: block; + padding: 16px; + background: #fff; + } +} diff --git a/showcase/src/app/styleguide/pages/typography/styleguide-typography-page-theme.scss b/showcase/src/app/styleguide/pages/typography/styleguide-typography-page-theme.scss new file mode 100644 index 0000000000..25f20c3e4c --- /dev/null +++ b/showcase/src/app/styleguide/pages/typography/styleguide-typography-page-theme.scss @@ -0,0 +1,22 @@ +.basic-table { + border-collapse: collapse; + border-radius: 2px; + border-spacing: 0; + margin: 0 0 32px; + width: 100%; + box-shadow: $elevation-4; + + th { + font-size: mat-font-size($typography-config, subheading-2); + font-weight: mat-font-weight($typography-config, subheading-2); + line-height: mat-line-height($typography-config, subheading-2); + padding: 13px 32px; + text-align: left; + } + + td { + background: #fff; + border-bottom: solid 1px #fafafa; + padding: 8px 16px; + } +} diff --git a/showcase/src/app/styleguide/pages/typography/styleguide-typography-page.component.html b/showcase/src/app/styleguide/pages/typography/styleguide-typography-page.component.html index 866c12e074..403208e976 100644 --- a/showcase/src/app/styleguide/pages/typography/styleguide-typography-page.component.html +++ b/showcase/src/app/styleguide/pages/typography/styleguide-typography-page.component.html @@ -46,7 +46,7 @@

SHOWCASE.DEMO.TYPOGRAPHY.CUSTOMIZATION.TITLE

SHOWCASE.DEMO.TYPOGRAPHY.CUSTOMIZATION.MAP_EXPLAINED

- +
diff --git a/showcase/src/styles/_stark-styles.scss b/showcase/src/styles/_stark-styles.scss deleted file mode 100644 index b8814bed9c..0000000000 --- a/showcase/src/styles/_stark-styles.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* -IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! -*/ -/* Stark styles */ -@import "~@nationalbankbelgium/stark-ui/assets/styles/header"; - -/* Stark components */ -@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-data/components/app-data.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-data/components/app-data-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/action-bar/components/action-bar.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/breadcrumb/components/breadcrumb.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/collapsible/components/collapsible-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/collapsible/components/collapsible.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/date-range-picker/components/date-range-picker.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/language-selector/components/language-selector.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/message-pane/components/message-pane.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/message-pane/components/message-pane-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/minimap/components/minimap.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/minimap/components/minimap-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/slider/components/slider-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/pagination/components/pagination.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/pagination/components/pagination-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/pretty-print/components/pretty-print.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/table/components/table.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/table/components/table-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/table/components/dialogs/multisort.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown.component"; - -/* Stark session-ui pages */ -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/login/login-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/session-expired/session-expired-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/session-logout/session-logout-page.component"; diff --git a/showcase/src/styles/_theme.scss b/showcase/src/styles/_theme.scss index f5302d9af0..bf309bcf64 100644 --- a/showcase/src/styles/_theme.scss +++ b/showcase/src/styles/_theme.scss @@ -1,12 +1,12 @@ -@import "~@angular/material/theming"; +/* +Import the local variables file first to set the correct variables, see: + - https://stark.nbb.be/showcase/latest/styleguide/typography + - https://stark.nbb.be/showcase/latest/styleguide/colors +*/ @import "variables"; - -/* Stark NG Material themes */ -@import "~@nationalbankbelgium/stark-ui/assets/themes/theming"; -@import "~@nationalbankbelgium/stark-ui/assets/themes/button-theme"; -@import "~@nationalbankbelgium/stark-ui/assets/themes/card-theme"; - +@import "~@nationalbankbelgium/stark-ui/assets/theming"; @import "../app/app.component-theme"; @import "../app/shared/components/example-viewer/example-viewer-theme"; @import "../app/shared/components/table-of-contents/table-of-contents-theme"; @import "../app/welcome/pages/getting-started/getting-started-page-theme"; +@import "../app/styleguide/pages/typography/styleguide-typography-page-theme"; diff --git a/showcase/src/styles/styles.scss b/showcase/src/styles/styles.scss index 567d5ace21..ab7e33f77d 100644 --- a/showcase/src/styles/styles.scss +++ b/showcase/src/styles/styles.scss @@ -1,9 +1,11 @@ @import "basscss-missing-variables.pcss"; /* FIXME: Remove this import once the issue in basscss is solved (see: https://github.com/basscss/basscss/issues/257) */ @import "~basscss/css/basscss.css"; @import "~prismjs/themes/prism-okaidia.css"; - +/* +IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! +*/ @import "theme"; -@import "stark-styles.scss"; +@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle"; @import "../app/app.component"; @import "../app/shared/components/reference-block/reference-block.component"; @import "../app/shared/components/table-of-contents/table-of-contents.component"; diff --git a/starter/src/styles/_stark-styles.scss b/starter/src/styles/_stark-styles.scss deleted file mode 100644 index 1c2e0fd391..0000000000 --- a/starter/src/styles/_stark-styles.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* -IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! -*/ -/* Stark styles */ -@import "~@nationalbankbelgium/stark-ui/assets/styles/header"; - -/* Stark components */ -@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-footer/components/app-footer-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-logo/components/app-logo.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-menu/components/app-menu.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/app-sidebar/components/app-sidebar.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/dropdown/components/dropdown-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/language-selector/components/language-selector.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/toast-notification/components/toast-notification-theme"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/components/session-timeout-warning-dialog.component"; - -/* Stark session-ui pages */ -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/login/login-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/session-expired/session-expired-page.component"; -@import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/session-logout/session-logout-page.component"; diff --git a/starter/src/styles/_theme.scss b/starter/src/styles/_theme.scss index 4df05be254..e0b192d4be 100644 --- a/starter/src/styles/_theme.scss +++ b/starter/src/styles/_theme.scss @@ -1,7 +1,7 @@ -@import "~@angular/material/theming"; +/* +Import the local variables file first to set the correct variables, see: + - https://stark.nbb.be/showcase/latest/styleguide/typography + - https://stark.nbb.be/showcase/latest/styleguide/colors +*/ @import "variables"; - -/* Stark NG Material themes */ -@import "~@nationalbankbelgium/stark-ui/assets/themes/theming"; -@import "~@nationalbankbelgium/stark-ui/assets/themes/button-theme"; -@import "~@nationalbankbelgium/stark-ui/assets/themes/card-theme"; +@import "~@nationalbankbelgium/stark-ui/assets/theming"; diff --git a/starter/src/styles/styles.scss b/starter/src/styles/styles.scss index 52de30699a..b5875264e4 100644 --- a/starter/src/styles/styles.scss +++ b/starter/src/styles/styles.scss @@ -1,3 +1,6 @@ +/* +IMPORTANT: Stark styles are provided as SCSS styles so they should be imported in a SCSS file! +*/ @import "theme"; -@import "stark-styles.scss"; -@import "../app/app.component.scss"; +@import "~@nationalbankbelgium/stark-ui/assets/stark-ui-bundle"; +@import "../app/app.component";
SCSS map property