Skip to content

Commit 4a90a47

Browse files
eksrhaeksrha
committed
improve styling and theaming
1 parent 8a2131c commit 4a90a47

File tree

9 files changed

+158
-329
lines changed

9 files changed

+158
-329
lines changed

‎projects/lib-workspace/src/app/content/showcase-calendar-table/showcase-calendar-table.component.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<section class="mat-elevation-z4" style="padding: 1rem;">
2-
<fs-calendar-table [dataSource]="calTableData">
3-
<fs-calendar-table-name> Persons </fs-calendar-table-name>
4-
</fs-calendar-table>
5-
</section>
1+
<fs-calendar-table class="mat-elevation-z4" [dataSource]="calTableData">
2+
<fs-calendar-table-name> Persons </fs-calendar-table-name>
3+
</fs-calendar-table>

‎projects/lib-workspace/src/palettes.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// http://mcg.mbitson.com/#!?primary=%234c7c3c&accent=%236b999b&themename=fsdevops
2+
3+
/* For use in src/lib/core/theming/_palette.scss */
4+
$md-primary: (
5+
50 : #eaefe8,
6+
100 : #c9d8c5,
7+
200 : #a6be9e,
8+
300 : #82a377,
9+
400 : #679059,
10+
500 : #4c7c3c,
11+
600 : #457436,
12+
700 : #3c692e,
13+
800 : #335f27,
14+
900 : #244c1a,
15+
A100 : #9fff8b,
16+
A200 : #75ff58,
17+
A400 : #4bff25,
18+
A700 : #36ff0c,
19+
contrast: (50 : #000000,
20+
100 : #000000,
21+
200 : #000000,
22+
300 : #000000,
23+
400 : #ffffff,
24+
500 : #ffffff,
25+
600 : #ffffff,
26+
700 : #ffffff,
27+
800 : #ffffff,
28+
900 : #ffffff,
29+
A100 : #000000,
30+
A200 : #000000,
31+
A400 : #000000,
32+
A700 : #000000,
33+
)
34+
);
35+
36+
$md-accent: (
37+
50 : #edf3f3,
38+
100 : #d3e0e1,
39+
200 : #b5cccd,
40+
300 : #97b8b9,
41+
400 : #81a8aa,
42+
500 : #6b999b,
43+
600 : #639193,
44+
700 : #588689,
45+
800 : #4e7c7f,
46+
900 : #3c6b6d,
47+
A100 : #c2fbff,
48+
A200 : #8ff8ff,
49+
A400 : #5cf5ff,
50+
A700 : #42f4ff,
51+
contrast: (50 : #000000,
52+
100 : #000000,
53+
200 : #000000,
54+
300 : #000000,
55+
400 : #000000,
56+
500 : #000000,
57+
600 : #000000,
58+
700 : #ffffff,
59+
800 : #ffffff,
60+
900 : #ffffff,
61+
A100 : #000000,
62+
A200 : #000000,
63+
A400 : #000000,
64+
A700 : #000000,
65+
)
66+
);

‎projects/lib-workspace/src/styles.scss‎

Lines changed: 29 additions & 272 deletions
Original file line numberDiff line numberDiff line change
@@ -1,277 +1,34 @@
1-
/**
2-
* Generated theme by Material Theme Generator
3-
* https://materialtheme.arcsine.dev
4-
* Fork at: https://materialtheme.arcsine.dev/?c=YHBhbGV0dGU$YHByaW1hcnk$YF48IzRjN2MzYyIsIj9lcjwjYzlkOGM1IiwiO2VyPCMzMzVmMjd$LCIlPmBePCM0OTg0OTciLCI~ZXI8I2M4ZGFlMCIsIjtlcjwjMzE2Nzdhfiwid2Fybj5gXjwjZWY5YjAwIiwiP2VyPCNmYWUxYjMiLCI7ZXI8I2U4N2YwMH4sIj9UZXh0PCMwMDAwMDAiLCI~PTwjZmFmYWZhIiwiO1RleHQ8I2ZmZmZmZiIsIjs9PCMyYzJjMmN$LCJmb250cz5bYEA8KC00fixgQDwoLTN$LGBAPCgtMn4sYEA8KC0xfixgQDxoZWFkbGluZX4sYEA8dGl0bGV$LGBAPHN1YiktMn4sYEA8c3ViKS0xfixgQDxib2R5LTJ$LGBAPGJvZHktMX4sYEA8YnV0dG9ufixgQDxjYXB0aW9ufixgQDxpbnB1dCIsInNpemU$bnVsbH1dLCJpY29uczxGaWxsZWQiLCI~bmVzcz5mYWxzZSwidmVyc2lvbj4xM30=
5-
*/
6-
@use "sass:map";
7-
@use "@angular/material/" as mat;
1+
@use '@angular/material' as mat;
82
@use "../../ng-mat-components" as fsc;
9-
10-
// Include the common styles for Angular Material. We include this here so that you only
11-
// have to load a single css file for Angular Material in your app.
12-
13-
// fonts
14-
// @import "material-icons/iconfont/material-icons.scss";
15-
// @import "@fontsource/roboto";
16-
17-
$fontConfig: (
18-
display-4: mat.define-typography-level(112px, 112px, 300, "Roboto", -0.0134em),
19-
display-3: mat.define-typography-level(56px, 56px, 400, "Roboto", -0.0089em),
20-
display-2: mat.define-typography-level(45px, 48px, 400, "Roboto", 0em),
21-
display-1: mat.define-typography-level(34px, 40px, 400, "Roboto", 0.0074em),
22-
headline: mat.define-typography-level(24px, 32px, 400, "Roboto", 0em),
23-
title: mat.define-typography-level(20px, 32px, 500, "Roboto", 0.0075em),
24-
subheading-2: mat.define-typography-level(16px, 28px, 400, "Roboto", 0.0094em),
25-
subheading-1: mat.define-typography-level(15px, 24px, 500, "Roboto", 0.0067em),
26-
body-2: mat.define-typography-level(14px, 24px, 500, "Roboto", 0.0179em),
27-
body-1: mat.define-typography-level(14px, 20px, 400, "Roboto", 0.0179em),
28-
button: mat.define-typography-level(14px, 14px, 500, "Roboto", 0.0893em),
29-
caption: mat.define-typography-level(12px, 20px, 400, "Roboto", 0.0333em),
30-
input: mat.define-typography-level(inherit, 1.125, 400, "Roboto", 1.5px),
31-
);
32-
33-
// Foreground Elements
34-
35-
// Light Theme Text
36-
$dark-text: #000000;
37-
$dark-primary-text: rgba($dark-text, 0.87);
38-
$dark-accent-text: rgba($dark-primary-text, 0.54);
39-
$dark-disabled-text: rgba($dark-primary-text, 0.38);
40-
$dark-dividers: rgba($dark-primary-text, 0.12);
41-
$dark-focused: rgba($dark-primary-text, 0.12);
42-
43-
$mat-light-theme-foreground: (
44-
base: black,
45-
divider: $dark-dividers,
46-
dividers: $dark-dividers,
47-
disabled: $dark-disabled-text,
48-
disabled-button: rgba($dark-text, 0.26),
49-
disabled-text: $dark-disabled-text,
50-
elevation: black,
51-
secondary-text: $dark-accent-text,
52-
hint-text: $dark-disabled-text,
53-
accent-text: $dark-accent-text,
54-
icon: $dark-accent-text,
55-
icons: $dark-accent-text,
56-
text: $dark-primary-text,
57-
slider-min: $dark-primary-text,
58-
slider-off: rgba($dark-text, 0.26),
59-
slider-off-active: $dark-disabled-text,
60-
);
61-
62-
// Dark Theme text
63-
$light-text: #ffffff;
64-
$light-primary-text: $light-text;
65-
$light-accent-text: rgba($light-primary-text, 0.7);
66-
$light-disabled-text: rgba($light-primary-text, 0.5);
67-
$light-dividers: rgba($light-primary-text, 0.12);
68-
$light-focused: rgba($light-primary-text, 0.12);
69-
70-
$mat-dark-theme-foreground: (
71-
base: $light-text,
72-
divider: $light-dividers,
73-
dividers: $light-dividers,
74-
disabled: $light-disabled-text,
75-
disabled-button: rgba($light-text, 0.3),
76-
disabled-text: $light-disabled-text,
77-
elevation: black,
78-
hint-text: $light-disabled-text,
79-
secondary-text: $light-accent-text,
80-
accent-text: $light-accent-text,
81-
icon: $light-text,
82-
icons: $light-text,
83-
text: $light-text,
84-
slider-min: $light-text,
85-
slider-off: rgba($light-text, 0.3),
86-
slider-off-active: rgba($light-text, 0.3),
87-
);
88-
89-
// Background config
90-
// Light bg
91-
$light-background: #fafafa;
92-
$light-bg-darker-5: darken($light-background, 5%);
93-
$light-bg-darker-10: darken($light-background, 10%);
94-
$light-bg-darker-20: darken($light-background, 20%);
95-
$light-bg-darker-30: darken($light-background, 30%);
96-
$light-bg-lighter-5: lighten($light-background, 5%);
97-
$dark-bg-tooltip: lighten(#2c2c2c, 20%);
98-
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
99-
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
100-
101-
$mat-light-theme-background: (
102-
background: $light-background,
103-
status-bar: $light-bg-darker-20,
104-
app-bar: $light-bg-darker-5,
105-
hover: $dark-bg-alpha-4,
106-
card: $light-bg-lighter-5,
107-
dialog: $light-bg-lighter-5,
108-
tooltip: $dark-bg-tooltip,
109-
disabled-button: $dark-bg-alpha-12,
110-
raised-button: $light-bg-lighter-5,
111-
focused-button: $dark-focused,
112-
selected-button: $light-bg-darker-20,
113-
selected-disabled-button: $light-bg-darker-30,
114-
disabled-button-toggle: $light-bg-darker-10,
115-
unselected-chip: $light-bg-darker-10,
116-
disabled-list-option: $light-bg-darker-10,
117-
);
118-
119-
// Dark bg
120-
$dark-background: #2c2c2c;
121-
$dark-bg-lighter-5: lighten($dark-background, 5%);
122-
$dark-bg-lighter-10: lighten($dark-background, 10%);
123-
$dark-bg-lighter-20: lighten($dark-background, 20%);
124-
$dark-bg-lighter-30: lighten($dark-background, 30%);
125-
$light-bg-alpha-4: rgba(#fafafa, 0.04);
126-
$light-bg-alpha-12: rgba(#fafafa, 0.12);
127-
128-
// Background palette for dark themes.
129-
$mat-dark-theme-background: (
130-
background: $dark-background,
131-
status-bar: $dark-bg-lighter-20,
132-
app-bar: $dark-bg-lighter-5,
133-
hover: $light-bg-alpha-4,
134-
card: $dark-bg-lighter-5,
135-
dialog: $dark-bg-lighter-5,
136-
tooltip: $dark-bg-lighter-20,
137-
disabled-button: $light-bg-alpha-12,
138-
raised-button: $dark-bg-lighter-5,
139-
focused-button: $light-focused,
140-
selected-button: $dark-bg-lighter-20,
141-
selected-disabled-button: $dark-bg-lighter-30,
142-
disabled-button-toggle: $dark-bg-lighter-10,
143-
unselected-chip: $dark-bg-lighter-20,
144-
disabled-list-option: $dark-bg-lighter-10,
145-
);
146-
147-
// Compute font config
148-
@include mat.core($fontConfig);
149-
150-
// Theme Config
151-
152-
body {
153-
--primary-color: #4c7c3c;
154-
--primary-lighter-color: #c9d8c5;
155-
--primary-darker-color: #335f27;
156-
--text-primary-color: #{$light-primary-text};
157-
--text-primary-lighter-color: #{$dark-primary-text};
158-
--text-primary-darker-color: #{$light-primary-text};
159-
}
160-
161-
$mat-primary: (
162-
main: #4c7c3c,
163-
lighter: #c9d8c5,
164-
darker: #335f27,
165-
200: #4c7c3c,
166-
// For slide toggle,
167-
contrast: (main: $light-primary-text,
168-
lighter: $dark-primary-text,
169-
darker: $light-primary-text,
170-
),
171-
);
172-
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
173-
174-
body {
175-
--accent-color: #498497;
176-
--accent-lighter-color: #c8dae0;
177-
--accent-darker-color: #31677a;
178-
--text-accent-color: #{$light-primary-text};
179-
--text-accent-lighter-color: #{$dark-primary-text};
180-
--text-accent-darker-color: #{$light-primary-text};
181-
}
182-
183-
$mat-accent: (
184-
main: #498497,
185-
lighter: #c8dae0,
186-
darker: #31677a,
187-
200: #498497,
188-
// For slide toggle,
189-
contrast: (main: $light-primary-text,
190-
lighter: $dark-primary-text,
191-
darker: $light-primary-text,
192-
),
193-
);
194-
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
195-
196-
body {
197-
--warn-color: #ef9b00;
198-
--warn-lighter-color: #fae1b3;
199-
--warn-darker-color: #e87f00;
200-
--text-warn-color: #{$dark-primary-text};
201-
--text-warn-lighter-color: #{$dark-primary-text};
202-
--text-warn-darker-color: #{$dark-primary-text};
203-
}
204-
205-
$mat-warn: (
206-
main: #ef9b00,
207-
lighter: #fae1b3,
208-
darker: #e87f00,
209-
200: #ef9b00,
210-
// For slide toggle,
211-
contrast: (main: $dark-primary-text,
212-
lighter: $dark-primary-text,
213-
darker: $dark-primary-text,
214-
),
215-
);
216-
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
217-
$theme: (
218-
primary: $theme-primary,
219-
accent: $theme-accent,
220-
warn: $theme-warn,
221-
is-dark: true,
222-
foreground: $mat-dark-theme-foreground,
223-
background: $mat-dark-theme-background,
224-
);
225-
$altTheme: (
226-
primary: $theme-primary,
227-
accent: $theme-accent,
228-
warn: $theme-warn,
229-
is-dark: false,
230-
foreground: $mat-light-theme-foreground,
231-
background: $mat-light-theme-background,
232-
);
233-
234-
// Specific component overrides, pieces that are not in line with the general theming
235-
236-
// Handle buttons appropriately, with respect to line-height
237-
.mat-raised-button,
238-
.mat-stroked-button,
239-
.mat-flat-button {
240-
padding: 0 1.15em;
241-
margin: 0 0.65em;
242-
min-width: 3em;
243-
line-height: 36.4px;
244-
}
245-
246-
.mat-standard-chip {
247-
padding: 0.5em 0.85em;
248-
min-height: 2.5em;
249-
}
250-
251-
.material-icons {
252-
font-size: 24px;
253-
font-family: "Material Icons", "Material Icons";
254-
255-
.mat-badge-content {
256-
font-family: "Roboto";
257-
}
258-
}
259-
260-
$background: map.get($theme, "background");
261-
$foreground: map.get($theme, "foreground");
262-
263-
@media (prefers-color-scheme: dark) {
264-
@include mat.all-component-themes($theme);
265-
@include fsc.all-component-themes($theme);
266-
$background: map.get($theme, "background");
267-
$foreground: map.get($theme, "foreground");
268-
}
269-
3+
@use "./palettes";
4+
5+
@include mat.core();
6+
7+
// Define a dark theme
8+
$dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
9+
accent: mat.define-palette(palettes.$md-accent),
10+
),
11+
// Only include `typography` and `density` in the default dark theme.
12+
typography: mat.define-typography-config(),
13+
density: 0,
14+
));
15+
16+
// Define a light theme
17+
$light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palettes.$md-primary),
18+
accent: mat.define-palette(palettes.$md-accent),
19+
),
20+
));
21+
22+
// Apply the dark theme by default
23+
@include mat.all-component-themes($dark-theme);
24+
@include fsc.all-component-themes($dark-theme);
25+
26+
// Apply the light theme only when the user prefers light themes.
27027
@media (prefers-color-scheme: light) {
271-
@include mat.all-component-themes($altTheme);
272-
@include fsc.all-component-themes($altTheme);
273-
$background: map.get($altTheme, "background");
274-
$foreground: map.get($altTheme, "foreground");
28+
// Use the `-color` mixins to only apply color styles without reapplying the same
29+
// typography and density styles.
30+
@include mat.all-component-themes($light-theme);
31+
@include fsc.all-component-themes($light-theme);
27532
}
27633

27734
@tailwind components;

‎projects/ng-mat-components/_theme.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@mixin all-component-themes($theme) {
55
// Extract whichever individual palettes you need from the theme.
66
$primary: map-get($theme, primary);
7-
$primaryContrast: map-get($primary, contrast);
87
$accent: map-get($theme, accent);
98
// Gets the standard material maps of fore/background
109
$background: map-get($theme, "background");

0 commit comments

Comments
 (0)