Skip to content

Commit

Permalink
fix(theme): fix dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Enlcxx committed Jul 26, 2021
1 parent e47027c commit f44a258
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 68 deletions.
15 changes: 13 additions & 2 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import {
LyTheme2,
lyl,
StyleRenderer,
LyHammerGestureConfig
LyHammerGestureConfig,
LyClasses
} from '@alyle/ui';
import { LyButtonModule } from '@alyle/ui/button';

Expand All @@ -28,7 +29,7 @@ import { environment } from '@env/environment';
import { LyIconModule } from '@alyle/ui/icon';
import { MinimaLight, MinimaDark, MinimaDeepDark } from '@alyle/ui/themes/minima';
import { TitleComponent } from './document/title/title.component';
import { DemoViewModule } from './demo-view';
import { DemoViewModule, STYLES as DEMO_VIEWER_STYLES } from './demo-view';
import { LyTypographyModule, LyTypographyTheme } from '@alyle/ui/typography';
import { LyCardModule } from '@alyle/ui/card';
import { AppBarComponent } from './app-bar/app-bar.component';
Expand Down Expand Up @@ -92,10 +93,20 @@ export class CustomMinimaDark {
keyword: '#3cd2ad'
};
stackblitz = '#fff';
demoViewer: ((__: LyClasses<typeof DEMO_VIEWER_STYLES>)
=> (className: string) => string) | null = null;
}
@Injectable()
export class CustomMinimaDeepDark extends CustomMinimaDark {
name = 'minima-deep-dark';
demoViewer = (__: LyClasses<typeof DEMO_VIEWER_STYLES>) => lyl `{
> div {
box-shadow: 0px 0px 0px 2px #353535
border-radius: 9px
overflow: hidden
background: none
}
}`
}

@Injectable()
Expand Down
1 change: 1 addition & 0 deletions src/app/demo-view/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { DemoViewModule } from './demo-view.module';
export * from './view/view.component';
92 changes: 48 additions & 44 deletions src/app/demo-view/view/view.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@ import {
ChangeDetectionStrategy,
VERSION,
isDevMode,
Renderer2
} from '@angular/core';
import { VERSION as CDK_VERSION } from '@angular/cdk';
import { Observable, of, merge, forkJoin } from 'rxjs';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';
import { catchError, retry, map } from 'rxjs/operators';
import { AUI_VERSION, LyTheme2 } from '@alyle/ui';
import { AUI_VERSION, lyl, StyleRenderer, ThemeRef } from '@alyle/ui';
import { AUIThemeVariables } from '../../app.module';
import { DomSanitizer } from '@angular/platform-browser';
import { Platform } from '@angular/cdk/platform';
Expand All @@ -25,41 +24,46 @@ const DECLARATIONS_REGEXP = /declarations: \[\:?(?:[\s]+)?([\w]+)(?:[\,\s\w]+)?\
const SELECTOR_REGEXP = /selector: \'([\w-]+)\'/;
const SELECTOR_APP = 'root-app';

const styles = (theme: AUIThemeVariables) => ({
root: {
position: 'relative',
display: 'block',
'> div > ly-paper': {
display: 'block'
}
},
codeContainer: {
overflowY: 'auto',
height: '100%',
background: 'transparent',
marginTop: '1px',
'> *': {
margin: 0
}
},
tabContainer: {
padding: '48px 24px 24px 24px'
},
tabContent: {
padding: '24px 24px 0 24px'
},
code: {
position: 'absolute',
after: 0,
top: '4px',
zIndex: 1
},
stackblitzButton: {
'&:hover': {
color: theme.stackblitz
}
}
});
export const STYLES = (theme: AUIThemeVariables, ref: ThemeRef) => {
const classes = ref.selectorsOf(STYLES);
const { after } = theme;
return {
root: () => lyl `{
position: relative
display: block
> div > ly-paper {
display: block
}
...${theme.demoViewer?.(classes)}
}`,
codeContainer: lyl `{
overflow-y: auto
height: 100%
background: transparent
margin-top: 1px
> * {
margin: 0
}
}`,
tabContainer: lyl `{
padding: 48px 24px 24px 24px
}`,
tabContent: lyl `{
padding: 24px 24px 0 24px
}`,
code: lyl `{
position: absolute
${after}: 0
top: 4px
z-index: 1
}`,
stackblitzButton: lyl `{
&:hover {
color: ${theme.stackblitz}
}
}`
};
};

interface Demos {
path?: string;
Expand All @@ -72,10 +76,13 @@ interface Demos {
selector: 'demo-view',
templateUrl: './view.component.html',
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
StyleRenderer
]
})
export class ViewComponent implements OnInit {
readonly classes = this.theme.addStyleSheet(styles);
readonly classes = this.sRenderer.renderSheet(STYLES, 'root');
hasCode = false;
name: string;
folderName: string;
Expand All @@ -102,16 +109,13 @@ export class ViewComponent implements OnInit {
this.files.push();
}
constructor(
renderer: Renderer2,
readonly sRenderer: StyleRenderer,
private http: HttpClient,
private el: ElementRef,
private router: Router,
private sanitizer: DomSanitizer,
private theme: LyTheme2,
private _platform: Platform
) {
renderer.addClass(el.nativeElement, this.classes.root);
}
) { }
toggleCode() {
this.hasCode = !this.hasCode;
}
Expand Down
10 changes: 5 additions & 5 deletions src/lib/themes/minima/dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,19 @@ export class MinimaDark extends MinimaBase {
contrast: new Color(0, 0, 0, 0.87)
};
background = {
default: new Color(0x303030), // secondary
default: new Color(0x212121), // secondary
primary: {
default: new Color(0x242424),
default: new Color(0x303030),
shadow
},
secondary: new Color(47, 47, 47),
secondary: new Color(0x212121),
tertiary: new Color(65, 65, 65),
};
hover = new Color(255, 255, 255, 0.04);
paper = {
default: new Color(0x242424),
default: new Color(0x303030),
shadow
};
hover = new Color(255, 255, 255, 0.04);
text = {
default: new Color(0xffffff),
primary: new Color(0xffffff),
Expand Down
17 changes: 0 additions & 17 deletions src/lib/themes/minima/deep-dark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,4 @@ export class MinimaDeepDark extends MinimaDark implements ThemeConfig {
default: new Color(29, 29, 29),
shadow
};
// field: LyFieldTheme = mergeThemes<LyFieldTheme, LyFieldTheme>(this.field, {
// root: _ => lyl `{
// ${_.container}:after, ${_.fieldset}, ${_.labelContainer} {
// border-color: ${new Color(255, 255, 255, 0.12)}
// }
// ${_.label}, ${_.placeholder} {
// color: ${new Color(255, 255, 255, 0.4)}
// }
// }`,
// appearance: {
// filled: _ => lyl `{
// ${_.container} {
// background-color: ${new Color(255, 255, 255, 0.04)}
// }
// }`
// }
// });
}

0 comments on commit f44a258

Please sign in to comment.