Skip to content
This repository was archived by the owner on Mar 4, 2023. It is now read-only.

Commit 1db76a8

Browse files
author
evombau
committed
theming, CI/CD
1 parent 5f8e5e4 commit 1db76a8

File tree

4 files changed

+249
-2
lines changed

4 files changed

+249
-2
lines changed

‎.gitlab-ci.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ build_app:
5151
npm-publish:
5252
stage: npm-publish
5353
script:
54+
- ls -a
5455
- touch /home/node/.npmrc
5556
- echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > /home/node/.npmrc
5657
- cat /home/node/.npmrc

‎projects/material-calendar/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "material-calendar",
3-
"version": "0.0.8",
3+
"version": "1.0.0",
44
"license": "MIT",
55
"peerDependencies": {
66
"@angular/common": "^9.1.9",

‎projects/my-first-app/src/myTheme.scss‎

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

‎projects/my-first-app/src/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
/* You can add global styles to this file, and also import other style files */
22

3-
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
3+
@import "./myTheme.scss";

0 commit comments

Comments
 (0)