Skip to content

Commit a954bc4

Browse files
rafalwolakrafalwolak
authored
Merge pull request #30 from design4pro/develop
feat(angular-jss): theme options
2 parents eca813e + 5f4c0cd commit a954bc4

20 files changed

Lines changed: 259 additions & 49 deletions

‎README.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515

1616
- [x] Component decorator `Styled`
1717
- [x] Theming with `Theme`
18+
- [ ] Theme switching (dark/light mode)
1819
- [x] Server Side Rendering with Angular Universal
20+
- [ ] Critical CSS
1921

2022
## Table of Contents
2123

@@ -107,6 +109,45 @@ export class AppComponent {
107109

108110
## Config options
109111

112+
```ts
113+
import { create, Jss } from 'jss';
114+
import extend from 'jss-plugin-extend';
115+
import propsSort from 'jss-plugin-props-sort';
116+
import { JssOptions } from '@design4pro/angular-jss';
117+
118+
const jss: Jss = create({
119+
// additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
120+
plugins: [
121+
extend(),
122+
propsSort()
123+
],
124+
});
125+
126+
const jssOptions: JssOptions = {
127+
jss: jss,
128+
normalize: false // disable normalizing (normalize.css)
129+
};
130+
131+
const theme: Theme = {
132+
palette: {
133+
primary: {
134+
main: '#00bcd4' // use in decorator `theme.palette?.primary?.main`
135+
},
136+
secondary: {
137+
main: '#f50057'
138+
}
139+
}
140+
};
141+
142+
@NgModule({
143+
declarations: [AppComponent],
144+
imports: [BrowserModule, AngularJssModule.forRoot(jssOptions, theme)],
145+
providers: [],
146+
bootstrap: [AppComponent],
147+
})
148+
export class AppModule {}
149+
```
150+
110151
## License
111152

112153
[MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ

‎apps/webpage/src/app/app.component.css‎

Whitespace-only changes.

‎apps/webpage/src/app/app.component.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1-
<div [ngClass]="classes.root"></div>
2-
3-
<button (click)="click()">Change color</button>
1+
<!--The content below is only a placeholder and can be replaced.-->
2+
<div [ngClass]="classes?.root">
3+
<h1 [ngClass]="classes?.title">
4+
Welcome to {{ title }}!
5+
</h1>
6+
<p [ngClass]="classes?.hint">Hover the logo</p>
7+
<img width="300"
8+
alt="Angular Logo"
9+
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' x='0' y='0' viewBox='0 0 250 250' style='enable-background:new 0 0 250 250' xml:space='preserve'%3E%3Cstyle type='text/css' id='style833'%3E.st2%7Bfill:%23fff%7D%3C/style%3E%3Cg id='g841'%3E%3Cpath id='polygon835' style='fill:%23f7df1e;fill-opacity:1' d='M125 30 31.9 63.2l14.2 123.1L125 230l78.9-43.7 14.2-123.1z'/%3E%3Cpath id='polygon837' style='fill:%23ceb828;fill-opacity:1' d='M125 30v22.2-.1V230l78.9-43.7 14.2-123.1L125 30z'/%3E%3Cg id='g867' transform='matrix(.98438 0 0 1 65.938 65)'%3E%3Cpath fill='transparent' d='M0 13h95v94H0Z' id='path850' style='fill:none'/%3E%3Cpath fill='%23eee' d='M96 107.5H0v-95h96Zm-94.197-1.795h92.393v-91.41H1.803Z' id='path852' style='fill:%23eee;fill-opacity:1'/%3E%3Cpath fill='%23fff' d='M64.294 86.574c1.903 3.108 4.379 5.392 8.759 5.392 3.679 0 6.029-1.839 6.029-4.379 0-3.044-2.414-4.123-6.464-5.894l-2.219-.952c-6.407-2.729-10.663-6.149-10.663-13.378 0-6.659 5.073-11.728 13.003-11.728 5.645 0 9.704 1.965 12.628 7.109l-6.914 4.439c-1.522-2.73-3.164-3.805-5.714-3.805-2.601 0-4.249 1.65-4.249 3.805 0 2.663 1.65 3.742 5.459 5.392l2.22.951c7.544 3.235 11.803 6.533 11.803 13.948 0 7.993-6.279 12.373-14.713 12.373-8.246 0-13.573-3.929-16.18-9.079 0-.002 7.215-4.194 7.215-4.194zm32.029 0c1.903 3.108 4.379 5.392 8.759 5.392 3.679 0 6.029-1.839 6.029-4.379 0-3.044-2.414-4.123-6.464-5.894l-2.219-.952c-6.407-2.729-10.663-6.149-10.663-13.378 0-6.659 5.073-11.728 13.003-11.728 5.645 0 9.704 1.965 12.628 7.109l-6.914 4.439c-1.522-2.73-3.164-3.805-5.714-3.805-2.601 0-4.249 1.65-4.249 3.805 0 2.663 1.65 3.742 5.459 5.392l2.22.951C115.741 76.76 120 80.058 120 87.473c0 7.993-6.279 12.373-14.713 12.373-8.246 0-13.573-3.929-16.18-9.079zm-63.393.77c1.395 2.475 2.664 4.567 5.714 4.567 2.917 0 4.757-1.141 4.757-5.579V56.141h8.878v30.31c0 9.193-5.39 13.378-13.258 13.378-7.109 0-11.226-3.679-13.32-8.11l7.229-4.375c0-.001 0 0 0 0z' id='path854'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
10+
(mouseenter)="onMouseEvent()"
11+
(mouseleave)="onMouseEvent()" />
12+
</div>

‎apps/webpage/src/app/app.component.ts‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
33

44
@Component({
55
selector: 'angular-jss-root',
66
templateUrl: './app.component.html',
7-
styleUrls: ['./app.component.css'],
7+
changeDetection: ChangeDetectionStrategy.OnPush,
88
})
99
@Styled(({ css, injectGlobal }) => {
1010
injectGlobal({
@@ -18,25 +18,29 @@ import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
1818
return css(
1919
(theme: Theme) => ({
2020
root: {
21-
color: '#fff',
21+
textAlign: 'center',
22+
},
23+
title: {
24+
color: theme.palette?.common?.white,
2225
backgroundColor: 'var(--background-color)',
2326
padding: '20px',
2427
direction: theme.direction,
2528
},
29+
hint: {
30+
color: theme.palette?.common?.black,
31+
},
2632
}),
2733
{ name: 'first' }
2834
);
2935
})
3036
export class AppComponent {
31-
title = 'angular-jss';
37+
title = 'Angular JSS';
3238
classes: any;
33-
name?: string;
3439

3540
@StyledProp()
3641
color = 'red';
3742

38-
click() {
43+
onMouseEvent() {
3944
this.color = this.color === 'red' ? 'green' : 'red';
40-
this.name = this.color;
4145
}
4246
}

‎libs/angular-jss/README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313

1414
## Features
1515

16+
- [x] Component decorator `Styled`
17+
- [x] Theming with `Theme`
18+
- [ ] Theme switching (dark/light mode)
19+
- [x] Server Side Rendering with Angular Universal
20+
- [ ] Critical CSS
21+
1622
## Table of Contents
1723

1824
- [Installation](#installation)
@@ -103,6 +109,45 @@ export class AppComponent {
103109

104110
## Config options
105111

112+
```ts
113+
import { create, Jss } from 'jss';
114+
import extend from 'jss-plugin-extend';
115+
import propsSort from 'jss-plugin-props-sort';
116+
import { JssOptions } from '@design4pro/angular-jss';
117+
118+
const jss: Jss = create({
119+
// additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
120+
plugins: [
121+
extend(),
122+
propsSort()
123+
],
124+
});
125+
126+
const jssOptions: JssOptions = {
127+
jss: jss,
128+
normalize: false // disable normalizing (normalize.css)
129+
};
130+
131+
const theme: Theme = {
132+
palette: {
133+
primary: {
134+
main: '#00bcd4' // use in decorator `theme.palette?.primary?.main`
135+
},
136+
secondary: {
137+
main: '#f50057'
138+
}
139+
}
140+
};
141+
142+
@NgModule({
143+
declarations: [AppComponent],
144+
imports: [BrowserModule, AngularJssModule.forRoot(jssOptions, theme)],
145+
providers: [],
146+
bootstrap: [AppComponent],
147+
})
148+
export class AppModule {}
149+
```
150+
106151
## License
107152

108153
[MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ

‎libs/angular-jss/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './lib/angular-jss.service';
44
export * from './lib/angular-jss.types';
55
export * from './lib/ssr';
66
export * from './lib/styled';
7+
export * from './lib/theme';

‎libs/angular-jss/src/lib/angular-jss.types.ts‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { JssOptions } from './jss/types';
2+
import { ColorCommon } from './theme/colors/common';
23

34
export interface Options extends JssOptions {
45
normalize?: boolean;
@@ -7,8 +8,7 @@ export interface Options extends JssOptions {
78
export interface Theme {
89
breakpoints?: ThemeBreakpoints;
910
direction?: string;
10-
overrides?: object;
11-
props?: object;
11+
palette?: ThemePalette;
1212
}
1313

1414
export interface ThemeBreakpoints {
@@ -24,3 +24,14 @@ export interface ThemeBreakpoints {
2424
unit?: string;
2525
step?: number;
2626
}
27+
28+
export type ThemeType = string | 'auto' | 'light' | 'dark';
29+
30+
export interface ThemePaletteCommonColor {
31+
[key: string]: ColorCommon;
32+
}
33+
34+
export interface ThemePalette {
35+
mode: ThemeType;
36+
common: typeof ColorCommon;
37+
}

‎libs/angular-jss/src/lib/jss/utils/sheets.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getDynamicStyles, StyleSheet, StyleSheetFactoryOptions } from 'jss';
22
import { Theme } from '../../angular-jss.types';
3-
import { StyledProps } from '../../styled/styled.interface';
3+
import { StyledProps } from '../../styled/styled.types';
44
import { ThemeContext } from '../../theme/theme-context';
55
import { JssContext } from '../context';
66
import { getManager } from '../managers';

‎libs/angular-jss/src/lib/styled/create-use-styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
updateDynamicRules,
1616
} from '../jss/utils/sheets';
1717
import { ThemeContext } from '../theme/theme-context';
18-
import { StyledProps } from './styled.interface';
18+
import { StyledProps } from './styled.types';
1919

2020
const createUseStyles =
2121
(doCheck: BehaviorSubject<StyledProps>, onDestroy: Subject<void>) =>

‎libs/angular-jss/src/lib/styled/internals.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
DirectiveDef,
1010
DirectiveType,
1111
} from './ivy';
12-
import { StyledProps } from './styled.interface';
12+
import { StyledProps } from './styled.types';
1313

1414
/**
1515
* Applied to definitions and informs that class is decorated

0 commit comments

Comments
 (0)