Skip to content

Commit

Permalink
0.12.0:
Browse files Browse the repository at this point in the history 
- Added `all-static-component-dimensions` mixin for declaring all component dimensions that don't rely on theme data.
- Removed support for legacy Material components.
- Removed deprecated input `ThemeContainer::disabled`.
- Removed deprecated `app-declare-theme` and `app-theme` mixins.
  • Loading branch information
@lVlyke
lVlyke committed Jan 24, 2024
1 parent ff62558 commit 1967a72
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 158 deletions.
3 changes: 2 additions & 1 deletion docs/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,11 @@ If you aren't already using custom Angular Material theming, add the following t

```scss
@use "@angular/material" as mat;
@use "@lithiumjs/ngx-material-theming" as mat-theming;

// Only include these once in your app:
@include mat.all-component-typographies();
@include mat.core();
@include mat-theming.all-static-component-dimensions();
```

## Create your first theme
Expand Down
43 changes: 32 additions & 11 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@lithiumjs/ngx-material-theming",
"description": "Dynamic and customizable Angular Material theming made easy.",
"version": "0.11.0",
"version": "0.12.0",
"license": "MIT",
"private": false,
"repository": "https://github.com/lVlyke/lithium-ngx-material-theming",
Expand Down Expand Up @@ -38,10 +38,10 @@
}
},
"peerDependencies": {
"@angular/cdk": ">=15.0.0 <18.0.0",
"@angular/common": ">=15.0.0 <18.0.0",
"@angular/core": ">=15.0.0 <18.0.0",
"@angular/material": ">=15.0.0 <18.0.0",
"@angular/cdk": ">=17.0.0 <18.0.0",
"@angular/common": ">=17.0.0 <18.0.0",
"@angular/core": ">=17.0.0 <18.0.0",
"@angular/material": ">=17.0.0 <18.0.0",
"@lithiumjs/angular": ">=7.0.0",
"rxjs": "7.x.x"
},
Expand All @@ -56,7 +56,7 @@
"@angular/material": "^16.2.12",
"@angular/platform-browser": "^17.0.7",
"@lithiumjs/angular": "^7.3.1",
"@lithiumjs/ngx-material-theming-templates": "0.10.0",
"@lithiumjs/ngx-material-theming-templates": "0.11.0",
"@types/chroma-js": "^2.1.3",
"@types/node": "^20.9.0",
"chroma-js": "^2.4.2",
Expand Down
14 changes: 1 addition & 13 deletions src/directives/theme-container.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Directive, Input, Optional, SkipSelf, ChangeDetectorRef, forwardRef, Inject } from "@angular/core";
import { AutoPush, OnInit, OnDestroy, createDirectiveState, stateTokenFor, DirectiveStateRef } from "@lithiumjs/angular";
import { combineLatest, Observable } from "rxjs";
import { filter, skip, tap } from "rxjs/operators";
import { filter } from "rxjs/operators";
import { OverlayContainer } from "@angular/cdk/overlay";

export const DEFAULT_THEME_NAME = "default";
Expand All @@ -20,8 +20,6 @@ export class ThemeContainer {

public readonly theme$ = this.stateRef.get("theme");
public readonly active$ = this.stateRef.get("active");
/** @deprecated `disabled$` has been deprecated in favor of `active$`. */
public readonly disabled$ = this.stateRef.get("disabled");
public readonly manageOverlay$ = this.stateRef.get("manageOverlay");

@OnInit()
Expand All @@ -33,10 +31,6 @@ export class ThemeContainer {
@Input()
public theme = DEFAULT_THEME_NAME;

/** @deprecated `disabled` has been deprecated in favor of the `active` input parameter. */
@Input()
public disabled = false;

@Input()
public active = true;

Expand All @@ -63,12 +57,6 @@ export class ThemeContainer {
filter(() => this.manageOverlay && this.active)
).subscribe(() => overlayContainer.getContainerElement().removeAttribute("li-theme"));

/** @deprecated */
stateRef.get("disabled").pipe(
skip(1),
tap(() => console.warn("Parameter `disabled` on `<li-theme-container>` has been deprecated and replaced with `active`."))
).subscribe(disabled => this.active = !disabled);

// Update the overlay if the state changes and we're managing the overlay
combineLatest(stateRef.getAll("active", "theme", "manageOverlay")).subscribe(([active, theme, manageOverlay]) => {
const overlay = overlayContainer.getContainerElement();
Expand Down
141 changes: 14 additions & 127 deletions src/styles/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@
@use "template" as template;
@forward "template";

/** @deprecated */
@import "./template";

/* Disable duplication warnings caused by nested theming support. */
mat.$theme-ignore-duplication-warnings: true;

Expand Down Expand Up @@ -33,21 +30,6 @@ mat.$theme-ignore-duplication-warnings: true;
}
}

/** @deprecated */
@function define-legacy-theme(
$primary,
$accent,
$warn,
$is-dark: false
) {
@return define-theme(
$primary: $primary,
$accent: $accent,
$warn: $warn,
$is-dark: $is-dark
);
}

@mixin create-theme($name, $definition, $nested-only: false) {
$theme-container: "[li-theme='#{$name}']:not([active='false'])";

Expand All @@ -69,28 +51,6 @@ mat.$theme-ignore-duplication-warnings: true;
}
}

/** @deprecated */
@mixin create-legacy-theme($name, $definition, $nested-only: false) {
$theme-container: "[li-theme='#{$name}']:not([active='false'])";

@if ($nested-only == false) {
#{$theme-container} {
@include mat.all-legacy-component-themes($definition);

@content;
}
}

/* Support nested theme container definitions */
[li-theme]:not([li-theme="#{$name}"]) {
#{$theme-container} {
@include mat.all-legacy-component-colors($definition);

@content;
}
}
}

@mixin create-nested-theme($name, $definition) {
@include create-theme(
$name,
Expand All @@ -101,17 +61,6 @@ mat.$theme-ignore-duplication-warnings: true;
}
}

/** @deprecated */
@mixin create-legacy-nested-theme($name, $definition) {
@include create-legacy-theme(
$name,
$definition,
$nested-only: true
) {
@content;
}
}

@mixin declare-theme(
$name,
$primary,
Expand All @@ -129,24 +78,6 @@ mat.$theme-ignore-duplication-warnings: true;
}
}

/** @deprecated */
@mixin declare-legacy-theme(
$name,
$primary,
$accent,
$warn,
$is-dark: false
) {
@include create-legacy-theme($name, define-legacy-theme(
$primary: $primary,
$accent: $accent,
$warn: $warn,
$is-dark: $is-dark
)) {
@content;
}
}

@mixin declare-template-theme($is-dark: false) {
@include declare-theme(
$name: template.$template-theme-name,
Expand All @@ -159,64 +90,20 @@ mat.$theme-ignore-duplication-warnings: true;
}
}

/** @deprecated */
@mixin declare-legacy-template-theme($is-dark: false) {
@include declare-legacy-theme(
$name: template.$template-theme-name,
/**
* @description Includes base styles for the application that are not theme-dependent.
*/
@mixin all-static-component-dimensions() {
@include mat.all-component-typographies();

// The following mixins include base theme styles that are only needed once per application. These
// theme styles do not depend on the color, typography, or density settings in your theme. However,
// these styles may differ depending on the theme's design system. Currently all themes use the
// Material 2 design system, but in the future it may be possible to create theme based on other
// design systems, such as Material 3.
@include mat.all-component-bases(define-theme(
$primary: template.$template-primary-palette,
$accent: template.$template-accent-palette,
$warn: template.$template-warn-palette,
$is-dark: $is-dark
) {
@content;
}
}

/** @deprecated */
@mixin app-declare-theme($theme-name) {
@warn "app-declare-theme is deprecated and replaced with the following syntax: @use '~@lithiumjs/ngx-material-theming' as mat-theming; mat-theming.declare-theme;";
$theme-container: "[li-theme='#{$theme-name}']:not([active='false'])";

#{$theme-container} {
@content;
}

/* Support nested theme container definitions */
[li-theme]:not([li-theme="#{$theme-name}"]) {
#{$theme-container} {
@content;
}
}
}

/** @deprecated */
@mixin app-theme(
$theme-name,
$theme-primary,
$theme-accent,
$theme-warn,
$is-dark: false
) {
@warn "app-declare-theme is deprecated and replaced with the following syntax: @use '~@lithiumjs/ngx-material-theming' as mat-theming; mat-theming.declare-theme;";
@include app-declare-theme($theme-name) {
@if $is-dark {
@include mat.all-component-themes(mat.define-dark-theme((
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn
)
)));
} @else {
@include mat.all-component-themes(mat.define-light-theme((
color: (
primary: $theme-primary,
accent: $theme-accent,
warn: $theme-warn
)
)));
}

@content;
}
$warn: template.$template-warn-palette
));
}

0 comments on commit 1967a72

Please sign in to comment.