Skip to content

Commit

Permalink
feat(stark-ui): update styles to allow theme customization
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuperITMan
SuperITMan committed Aug 25, 2021
1 parent 1be66d3 commit 5a2a1fb
Show file tree
Hide file tree
Showing 28 changed files with 271 additions and 231 deletions.
38 changes: 32 additions & 6 deletions packages/stark-ui/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,37 @@
// Theming APIs
@forward "./styles/theming/material-palettes" show $backgrounds, $foregrounds, $accent-palette, $primary-palette,
$warning-palette, $mat-light-theme-background, $mat-light-theme-foreground, $base-theme, $material-theme,
set-stark-ui-material-theme;
$stark-accent-palette: null !default;
$stark-primary-palette: null !default;
/*
@deprecated
*/
$stark-warning-palette: null !default;
$stark-warn-palette: $stark-warning-palette !default;

$stark-alert-palette: null !default;
$stark-grey-palette: null !default;
$stark-success-palette: null !default;

$stark-typography-theme: null !default;

@use "./styles/theming/material-palette" with (
$stark-accent-palette: $stark-accent-palette,
$stark-primary-palette: $stark-primary-palette,
$stark-warn-palette: $stark-warn-palette
);
@forward "./styles/theming/material-palette" show $backgrounds, $foregrounds, $accent-palette, $primary-palette, $warning-palette;

@use "./styles/theming/stark-palettes" with (
$stark-alert-palette: $stark-alert-palette,
$stark-grey-palette: $stark-grey-palette,
$stark-success-palette: $stark-success-palette
);
@forward "./styles/theming/stark-palettes" show $alert-palette, $grey-palette, $success-palette;
@forward "./styles/theming/typography" show $typography-theme, $typography-config, set-typography;

@use "./styles/theming/typography" with ($stark-typography-theme: $stark-typography-theme);
@forward "./styles/theming/typography" show $typography-theme, $typography-config;

// Core APIs
@forward "./styles/old-variables" hide $base-theme;
@forward "./styles/old-variables" hide $material-theme-config, $_primary-palette, $_accent-palette, $_warn-palette;
@forward "./styles/media-queries";
@forward "./styles/stark-ui-bundle" show set-default-stark-ui-styles;
@forward "./styles/stark-ui-bundle" show set-stark-ui-styles, stark-button-color, stark-app-footer-color, stark-collapsible-color,
stark-dropdown-color, stark-message-pane-color;
18 changes: 8 additions & 10 deletions packages/stark-ui/src/modules/action-bar/components/_action-bar-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,39 @@
@use "sass:map";
@use "~@angular/material" as mat;
@use "~@angular/material/core/theming/palette" as mat-palette;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;
@use "../../../../styles/components/button-theme" as stark-button-theme;
@use "../../../../styles/media-queries" as *;

@mixin stark-action-bar-theme() {
@mixin stark-action-bar-theme($material-theme-config, $stark-theme-config) {
@media #{$tablet-query} {
.stark-action-bar {
.action-label {
&.primary {
color: mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, primary-palette));
color: mat.get-color-from-palette(map.get($material-theme-config, primary));
}

&.warn {
color: mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, warn-palette));
color: mat.get-color-from-palette(map.get($material-theme-config, warn));
}

&.accent {
color: mat.get-color-from-palette(stark-mat-palettes.$accent-palette, 500);
color: mat.get-color-from-palette(map.get($material-theme-config, accent), 500);
}

&.success {
color: mat.get-color-from-palette(stark-palettes.$success-palette, 500);
color: mat.get-color-from-palette(map.get($stark-theme-config, success-palette), 500);
}

&.alert {
color: mat.get-color-from-palette(stark-palettes.$alert-palette, 500);
color: mat.get-color-from-palette(map.get($stark-theme-config, alert-palette), 500);
}

&.alt {
color: mat.get-color-from-palette(stark-palettes.$grey-palette, 900);
color: mat.get-color-from-palette(map.get($stark-theme-config, grey-palette), 900);
}

&.neutral {
color: mat.get-color-from-palette(stark-palettes.$grey-palette, 400);
color: mat.get-color-from-palette(map.get($stark-theme-config, grey-palette), 400);
}

&.white {
Expand Down
6 changes: 3 additions & 3 deletions packages/stark-ui/src/modules/app-data/components/_app-data-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
/* ============================================================================== */
/* stark-ui: src/modules/app-data/components/_app-data-theme.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;
@use "../../../../styles/old-variables" as old-vars;

@mixin stark-app-data-theme() {
@mixin stark-app-data-theme($material-theme-config, $stark-theme-config) {
.stark-app-data {
& .label {
color: mat.get-color-from-palette(stark-palettes.$grey-palette, 700);
color: mat.get-color-from-palette(map.get($stark-theme-config, grey-palette), 700);
}

&.dropdown {
Expand Down
11 changes: 5 additions & 6 deletions packages/stark-ui/src/modules/app-footer/components/_app-footer-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
/* ============================================================================== */
/* stark-ui: src/modules/app-footer/components/_app-footer.component.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;

@mixin stark-app-footer-color($color_high, $color_low) {
.stark-app-footer-container {
Expand All @@ -18,12 +18,11 @@
}
}

@mixin stark-app-footer-theme() {
@mixin stark-app-footer-theme($material-theme-config, $stark-theme-config) {
$grey-palette: map.get($stark-theme-config, grey-palette);

.stark-app-footer {
@include stark-app-footer-color(
mat.get-color-from-palette(stark-palettes.$grey-palette, A100),
mat.get-color-from-palette(stark-palettes.$grey-palette, 800)
);
@include stark-app-footer-color(mat.get-color-from-palette($grey-palette, A100), mat.get-color-from-palette($grey-palette, 800));
}
}

Expand Down
16 changes: 9 additions & 7 deletions packages/stark-ui/src/modules/app-menu/components/_app-menu.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
/* ============================================================================== */
/* stark-ui: src/modules/app-menu/components/app-menu/_app-menu.component.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/typography" as stark-typography;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;

@mixin stark-app-menu() {
@mixin stark-app-menu($material-theme-config, $stark-theme-config) {
$primary-palette: map.get($material-theme-config, primary);
$typography-config: map.get($material-theme-config, typography);

.stark-app-menu {
section {
border-bottom: 1px solid #ddd;
Expand All @@ -20,15 +22,15 @@

.mat-nav-list {
.mat-list-item {
font-size: mat.font-size(stark-typography.$typography-config, button);
font-weight: mat.font-weight(stark-typography.$typography-config, button);
font-size: mat.font-size($typography-config, button);
font-weight: mat.font-weight($typography-config, button);
height: 42px;
line-height: mat.line-height(stark-typography.$typography-config, button);
line-height: mat.line-height($typography-config, button);

&.active {
.mat-list-text > * {
font-weight: bold;
color: mat.get-color-from-palette(stark-mat-palettes.$primary-palette, 500);
color: mat.get-color-from-palette($primary-palette, 500);
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/stark-ui/src/modules/app-sidebar/components/_app-sidebar-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
/* 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 */
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;
@use "~@angular/material" as mat;

@mixin stark-app-sidebar-theme() {
.stark-app-sidebar {
.stark-app-sidenav-menu {
background-color: map-get(stark-mat-palettes.$backgrounds, background);
background-color: map-get(mat.$light-theme-background-palette, background);
border-right: 1px solid #ddd;
}
}
Expand Down
18 changes: 8 additions & 10 deletions packages/stark-ui/src/modules/collapsible/components/_collapsible-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;
@use "../../../../styles/old-variables" as old-vars;

@mixin stark-collapsible-color($color_high, $color_low) {
Expand Down Expand Up @@ -38,23 +36,23 @@
}
}

@mixin stark-collapsible-theme() {
@mixin stark-collapsible-theme($material-theme-config, $stark-theme-config) {
$primary-palette: map.get($material-theme-config, primary);
$grey-palette: map.get($stark-theme-config, grey-palette);

.stark-collapsible {
@include stark-collapsible-color(
mat.get-color-from-palette(stark-palettes.$grey-palette, A100),
mat.get-color-from-palette(stark-palettes.$grey-palette, 900)
);
@include stark-collapsible-color(mat.get-color-from-palette($grey-palette, A100), mat.get-color-from-palette($grey-palette, 900));

.mat-expansion-panel-header-description {
color: mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, primary-palette), 900);
color: mat.get-color-from-palette($primary-palette, 900);
}

.mat-expansion-panel-header-title {
color: mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, primary-palette), 500);
color: mat.get-color-from-palette($primary-palette, 500);
}

.stark-collapsible-icon {
color: mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, primary-palette), 500);
color: mat.get-color-from-palette($primary-palette, 500);
}
}
}
Expand Down
11 changes: 6 additions & 5 deletions packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
/* stark-ui: packages/stark-ui/src/modules/collapsible/components/_collapsible.component.scss */
@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/typography" as stark-typography;

@mixin stark-collapsible() {
@mixin stark-collapsible($material-theme-config, $stark-theme-config) {
$typography-config: map.get($material-theme-config, typography);

.stark-collapsible {
.mat-expansion-panel {
transition: box-shadow 150ms linear;
Expand All @@ -32,9 +33,9 @@
align-items: center;

.stark-collapsible-title {
font-size: mat.font-size(stark-typography.$typography-config, subheading-1);
font-weight: mat.font-weight(stark-typography.$typography-config, subheading-1);
line-height: mat.line-height(stark-typography.$typography-config, subheading-1);
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);
}
}
}
Expand Down
12 changes: 7 additions & 5 deletions packages/stark-ui/src/modules/dialogs/components/alert-dialog-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@
/* ============================================================================== */
/* stark-ui: src/modules/dialogs/components/alert-dialog.component.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;

@mixin stark-alert-dialog-theme() {
@mixin stark-alert-dialog-theme($material-theme-config, $stark-theme-config) {
$alert-palette: map.get($stark-theme-config, alert-palette);

.stark-alert-dialog {
[mat-dialog-title] {
color: mat.get-color-from-palette(stark-palettes.$alert-palette, 500);
color: mat.get-color-from-palette($alert-palette, 500);
}

.button-ok {
background-color: mat.get-color-from-palette(stark-palettes.$alert-palette, 500);
color: mat.get-contrast-color-from-palette(stark-palettes.$alert-palette, 500);
background-color: mat.get-color-from-palette($alert-palette, 500);
color: mat.get-contrast-color-from-palette($alert-palette, 500);
}
}
}
10 changes: 6 additions & 4 deletions packages/stark-ui/src/modules/dialogs/components/confirm-dialog-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@
/* ============================================================================== */
/* stark-ui: src/modules/dialogs/components/confirm-dialog.component.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;

@mixin stark-confirm-dialog-theme() {
@mixin stark-confirm-dialog-theme($material-theme-config, $stark-theme-config) {
$primary-palette: map.get($material-theme-config, primary);

.stark-confirm-dialog {
.button-ok {
background-color: mat.get-color-from-palette(stark-mat-palettes.$primary-palette, 500);
color: mat.get-contrast-color-from-palette(stark-mat-palettes.$primary-palette, 500);
background-color: mat.get-color-from-palette($primary-palette, 500);
color: mat.get-contrast-color-from-palette($primary-palette, 500);
}
}
}
10 changes: 6 additions & 4 deletions packages/stark-ui/src/modules/dialogs/components/prompt-dialog-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@
/* ============================================================================== */
/* stark-ui: src/modules/dialogs/components/prompt-dialog.component.scss */

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;

@mixin stark-prompt-dialog-theme() {
@mixin stark-prompt-dialog-theme($material-theme-config, $stark-theme-config) {
$primary-palette: map.get($material-theme-config, primary);

.stark-prompt-dialog {
.button-ok {
background-color: mat.get-color-from-palette(stark-mat-palettes.$primary-palette, 500);
color: mat.get-contrast-color-from-palette(stark-mat-palettes.$primary-palette, 500);
background-color: mat.get-color-from-palette($primary-palette, 500);
color: mat.get-contrast-color-from-palette($primary-palette, 500);
}
}
}
20 changes: 9 additions & 11 deletions packages/stark-ui/src/modules/dropdown/components/_dropdown-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

@use "sass:map";
@use "~@angular/material" as mat;
@use "../../../../styles/theming/material-palettes" as stark-mat-palettes;
@use "../../../../styles/theming/stark-palettes" as stark-palettes;

@mixin stark-dropdown-color($color) {
.mat-form-field-label {
Expand All @@ -31,38 +29,38 @@
}
}

@mixin stark-dropdown-theme() {
@mixin stark-dropdown-theme($material-theme-config, $stark-theme-config) {
.stark-dropdown-mat-form-field {
&.stark-primary {
@include stark-dropdown-color(mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, primary-palette), 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($material-theme-config, primary), 900));
}

&.stark-accent {
@include stark-dropdown-color(mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, accent-palette), 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($material-theme-config, accent), 900));
}

&.stark-warn {
@include stark-dropdown-color(mat.get-color-from-palette(map.get(stark-mat-palettes.$base-theme, warn-palette), 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($material-theme-config, warn), 900));
}

&.stark-white {
@include stark-dropdown-color(mat.get-color-from-palette(stark-palettes.$grey-palette, A100));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($stark-theme-config, grey-palette), A100));
}

&.stark-success {
@include stark-dropdown-color(mat.get-color-from-palette(stark-palettes.$success-palette, 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($stark-theme-config, success-palette), 900));
}

&.stark-alert {
@include stark-dropdown-color(mat.get-color-from-palette(stark-palettes.$alert-palette, 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($stark-theme-config, alert-palette), 900));
}

&.stark-alt {
@include stark-dropdown-color(mat.get-color-from-palette(stark-palettes.$grey-palette, 900));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($stark-theme-config, grey-palette), 900));
}

&.stark-neutral {
@include stark-dropdown-color(mat.get-color-from-palette(stark-palettes.$success-palette, 400));
@include stark-dropdown-color(mat.get-color-from-palette(map.get($stark-theme-config, success-palette), 400));
}
}
}

0 comments on commit 5a2a1fb

Please sign in to comment.