🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

angular-material-css-vars

Package Overview
Dependencies
Maintainers
2
Versions
64
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-material-css-vars - npm Package Compare versions

Comparing version

5.0.2
to
5.0.3

2

lib/default-cfg.const.d.ts

@@ -1,2 +0,2 @@

import { MaterialCssVariablesConfig } from './model';
import { MaterialCssVariablesConfig } from "./model";
export declare const DEFAULT_MAT_CSS_CFG: MaterialCssVariablesConfig;

6

lib/material-css-vars.module.d.ts

@@ -1,4 +0,4 @@

import { ModuleWithProviders } from '@angular/core';
import { MaterialCssVariablesConfig } from './model';
import { MaterialCssVarsService } from './material-css-vars.service';
import { ModuleWithProviders } from "@angular/core";
import { MaterialCssVariablesConfig } from "./model";
import { MaterialCssVarsService } from "./material-css-vars.service";
import * as i0 from "@angular/core";

@@ -5,0 +5,0 @@ import * as i1 from "@angular/common";

10

lib/material-css-vars.service.d.ts

@@ -1,3 +0,3 @@

import { RendererFactory2 } from '@angular/core';
import { HueValue, MatCssHueColorContrastMapItem, MatCssHueColorMapItem, MatCssPalettePrefix, MaterialCssVariables, MaterialCssVariablesConfig } from './model';
import { RendererFactory2 } from "@angular/core";
import { HueValue, MatCssHueColorContrastMapItem, MatCssHueColorMapItem, MatCssPalettePrefix, MaterialCssVariables, MaterialCssVariablesConfig } from "./model";
import * as i0 from "@angular/core";

@@ -10,4 +10,2 @@ /** @dynamic */

private static LIGHT_TEXT_VAR;
private renderer;
private ROOT;
cfg: MaterialCssVariablesConfig;

@@ -22,2 +20,4 @@ primary: string;

isAutoContrast: boolean;
private renderer;
private ROOT;
constructor(rendererFactory: RendererFactory2, document: Document, cfg: MaterialCssVariablesConfig);

@@ -47,5 +47,5 @@ setPrimaryColor(hex: string): void;

getPaletteForColor(hex: string): MatCssHueColorMapItem[];
getPaletteWithContrastForColor(hex: string): MatCssHueColorContrastMapItem[];
private getTraditionalPaletteForColor;
private getConstantinPaletteForColor;
getPaletteWithContrastForColor(hex: string): MatCssHueColorContrastMapItem[];
private _computePaletteColors;

@@ -52,0 +52,0 @@ private _recalculateAndSetContrastColor;

122

lib/model.d.ts

@@ -1,2 +0,2 @@

export type HueValue = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'A100' | 'A200' | 'A400' | 'A700';
export type HueValue = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "A100" | "A200" | "A400" | "A700";
export declare enum MatCssPalettePrefix {

@@ -44,62 +44,62 @@ Primary = "--palette-primary-",

export declare enum MaterialCssVariables {
'Primary50' = "--palette-primary-50",
'Primary100' = "--palette-primary-100",
'Primary200' = "--palette-primary-200",
'Primary300' = "--palette-primary-300",
'Primary400' = "--palette-primary-400",
'Primary500' = "--palette-primary-500",
'Primary600' = "--palette-primary-600",
'Primary700' = "--palette-primary-700",
'Primary800' = "--palette-primary-800",
'Primary900' = "--palette-primary-900",
'PrimaryA100' = "--palette-primary-A100",
'PrimaryA200' = "--palette-primary-A200",
'PrimaryA400' = "--palette-primary-A400",
'PrimaryA700' = "--palette-primary-A700",
'PrimaryContrast50' = "--palette-primary-contrast-50",
'PrimaryContrast100' = "--palette-primary-contrast-100",
'PrimaryContrast200' = "--palette-primary-contrast-200",
'PrimaryContrast300' = "--palette-primary-contrast-300",
'PrimaryContrast400' = "--palette-primary-contrast-400",
'PrimaryContrast500' = "--palette-primary-contrast-500",
'PrimaryContrast600' = "--palette-primary-contrast-600",
'PrimaryContrast700' = "--palette-primary-contrast-700",
'PrimaryContrast800' = "--palette-primary-contrast-800",
'PrimaryContrast900' = "--palette-primary-contrast-900",
'PrimaryContrastA100' = "--palette-primary-contrast-A100",
'PrimaryContrastA200' = "--palette-primary-contrast-A200",
'PrimaryContrastA400' = "--palette-primary-contrast-A400",
'PrimaryContrastA700' = "--palette-primary-contrast-A700",
'Accent50' = "--palette-accent-50",
'Accent100' = "--palette-accent-100",
'Accent200' = "--palette-accent-200",
'Accent300' = "--palette-accent-300",
'Accent400' = "--palette-accent-400",
'Accent500' = "--palette-accent-500",
'Accent600' = "--palette-accent-600",
'Accent700' = "--palette-accent-700",
'Accent800' = "--palette-accent-800",
'Accent900' = "--palette-accent-900",
'AccentA100' = "--palette-accent-A100",
'AccentA200' = "--palette-accent-A200",
'AccentA400' = "--palette-accent-A400",
'AccentA700' = "--palette-accent-A700",
'DarkAccentText' = "--dark-accent-text",
'LightAccentText' = "--light-accent-text",
'Warn50' = "--palette-warn-50",
'Warn100' = "--palette-warn-100",
'Warn200' = "--palette-warn-200",
'Warn300' = "--palette-warn-300",
'Warn400' = "--palette-warn-400",
'Warn500' = "--palette-warn-500",
'Warn600' = "--palette-warn-600",
'Warn700' = "--palette-warn-700",
'Warn800' = "--palette-warn-800",
'Warn900' = "--palette-warn-900",
'WarnA100' = "--palette-warn-A100",
'WarnA200' = "--palette-warn-A200",
'WarnA400' = "--palette-warn-A400",
'WarnA700' = "--palette-warn-A700",
'DarkWarnText' = "--dark-warn-text",
'LightWarnText' = "--light-warn-text"
"Primary50" = "--palette-primary-50",
"Primary100" = "--palette-primary-100",
"Primary200" = "--palette-primary-200",
"Primary300" = "--palette-primary-300",
"Primary400" = "--palette-primary-400",
"Primary500" = "--palette-primary-500",
"Primary600" = "--palette-primary-600",
"Primary700" = "--palette-primary-700",
"Primary800" = "--palette-primary-800",
"Primary900" = "--palette-primary-900",
"PrimaryA100" = "--palette-primary-A100",
"PrimaryA200" = "--palette-primary-A200",
"PrimaryA400" = "--palette-primary-A400",
"PrimaryA700" = "--palette-primary-A700",
"PrimaryContrast50" = "--palette-primary-contrast-50",
"PrimaryContrast100" = "--palette-primary-contrast-100",
"PrimaryContrast200" = "--palette-primary-contrast-200",
"PrimaryContrast300" = "--palette-primary-contrast-300",
"PrimaryContrast400" = "--palette-primary-contrast-400",
"PrimaryContrast500" = "--palette-primary-contrast-500",
"PrimaryContrast600" = "--palette-primary-contrast-600",
"PrimaryContrast700" = "--palette-primary-contrast-700",
"PrimaryContrast800" = "--palette-primary-contrast-800",
"PrimaryContrast900" = "--palette-primary-contrast-900",
"PrimaryContrastA100" = "--palette-primary-contrast-A100",
"PrimaryContrastA200" = "--palette-primary-contrast-A200",
"PrimaryContrastA400" = "--palette-primary-contrast-A400",
"PrimaryContrastA700" = "--palette-primary-contrast-A700",
"Accent50" = "--palette-accent-50",
"Accent100" = "--palette-accent-100",
"Accent200" = "--palette-accent-200",
"Accent300" = "--palette-accent-300",
"Accent400" = "--palette-accent-400",
"Accent500" = "--palette-accent-500",
"Accent600" = "--palette-accent-600",
"Accent700" = "--palette-accent-700",
"Accent800" = "--palette-accent-800",
"Accent900" = "--palette-accent-900",
"AccentA100" = "--palette-accent-A100",
"AccentA200" = "--palette-accent-A200",
"AccentA400" = "--palette-accent-A400",
"AccentA700" = "--palette-accent-A700",
"DarkAccentText" = "--dark-accent-text",
"LightAccentText" = "--light-accent-text",
"Warn50" = "--palette-warn-50",
"Warn100" = "--palette-warn-100",
"Warn200" = "--palette-warn-200",
"Warn300" = "--palette-warn-300",
"Warn400" = "--palette-warn-400",
"Warn500" = "--palette-warn-500",
"Warn600" = "--palette-warn-600",
"Warn700" = "--palette-warn-700",
"Warn800" = "--palette-warn-800",
"Warn900" = "--palette-warn-900",
"WarnA100" = "--palette-warn-A100",
"WarnA200" = "--palette-warn-A200",
"WarnA400" = "--palette-warn-A400",
"WarnA700" = "--palette-warn-A700",
"DarkWarnText" = "--dark-warn-text",
"LightWarnText" = "--light-warn-text"
}

4

mat-css-config-token.const.d.ts

@@ -1,3 +0,3 @@

import { InjectionToken } from '@angular/core';
import { MaterialCssVariablesConfig } from './lib/model';
import { InjectionToken } from "@angular/core";
import { MaterialCssVariablesConfig } from "./lib/model";
export declare const MATERIAL_CSS_VARS_CFG: InjectionToken<MaterialCssVariablesConfig>;

3

package.json
{
"name": "angular-material-css-vars",
"version": "5.0.2",
"version": "5.0.3",
"description": "Little library to use css variables for @angular/material",

@@ -9,2 +9,3 @@ "author": "johannesjo <contact@super-productivity.com> (http://super-productivity.com)",

"name": "Daniel Kimmich",
"email": "json-derulo@outlook.com",
"url": "https://github.com/json-derulo"

@@ -11,0 +12,0 @@ }

6

public-api.d.ts

@@ -1,3 +0,3 @@

export * from './lib/material-css-vars.service';
export * from './lib/material-css-vars.module';
export * from './lib/model';
export * from "./lib/material-css-vars.service";
export * from "./lib/material-css-vars.module";
export * from "./lib/model";

160

README.md

@@ -8,25 +8,20 @@ <p align="center"><img alt="logo" src="logo.png"></p>

## Setup
1. Install:
```bash
npm i angular-material-css-vars -S
```
```bash
npm i angular-material-css-vars -S
```
2. If @angular/material is already configured remove `@include mat.core()` from your main stylesheet file if present.
3. Add this to your main stylesheet instead:
```scss
@use 'angular-material-css-vars' as mat-css-vars;
// init theme
@include mat-css-vars.init-material-css-vars(
// optional
$dark-theme-selector: '.isDarkTheme',
$light-theme-selector: '.isLightTheme',
) using($mat-css-theme) {
// If your app has any theme mixins, call them here.
// $mat-css-theme gets set to an appropriate value before this content is called.
// @include your-custom-component-theme($mat-css-theme);
};
```
```scss
@use "angular-material-css-vars" as mat-css-vars;
@include mat-css-vars.init-material-css-vars();
```
4. Add to your main module:
```typescript
import {MaterialCssVarsModule} from 'angular-material-css-vars';
import { MaterialCssVarsModule } from "angular-material-css-vars";

@@ -38,4 +33,3 @@ @NgModule({

isAutoContrast: true,
darkThemeClass: 'isDarkTheme',
lightThemeClass: 'isLightTheme',
primary: "#3f51b5",
// ...

@@ -45,32 +39,37 @@ }),

})
export class AppModule {
}
export class AppModule {}
```
5. Then use it like so:
```typescript
import {MaterialCssVarsService} from 'angular-material-css-vars';
export class SomeComponentOrService {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = '#3f51b5';
this.materialCssVarsService.setDarkTheme(true);
this.materialCssVarsService.setPrimaryColor(hex);
this.materialCssVarsService.setAccentColor('#333');
}
}
```
5. If you want to adjust the theme at runtime, you can use `MaterialCssVarsService`:
```typescript
import { MaterialCssVarsService } from "angular-material-css-vars";
export class SomeComponentOrService {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = "#3f51b5";
this.materialCssVarsService.setDarkTheme(true);
this.materialCssVarsService.setPrimaryColor(hex);
this.materialCssVarsService.setAccentColor("#333");
}
}
```
## Additional Features
* Auto or manually set contrast color via
* `setAutoContrastEnabled(bool)`
* `setContrastColorThreshold(hueVal: HueValue)`
* Helper to set all variables
* `setVariable(cssVarName: MaterialCssVariables, value: string)`
* You can use the `MaterialCssVariables` enum [from here](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/model.ts) to make sure you get the variable name right.
* Rudimentary dark theme support via body class
* `setDarkTheme(isDark: boolean)`
- Auto or manually set contrast color via
- `setAutoContrastEnabled(bool)`
- `setContrastColorThreshold(hueVal: HueValue)`
- Helper to set all variables
- `setVariable(cssVarName: MaterialCssVariables, value: string)`
- You can use the `MaterialCssVariables` enum [from here](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/model.ts) to make sure you get the variable name right.
- Rudimentary dark theme support via body class
- `setDarkTheme(isDark: boolean)`
## Utility
There are also several [utility functions and mixins](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_public-util.scss).
```scss
@use 'angular-material-css-vars' as mat-css-vars;
@use "angular-material-css-vars" as mat-css-vars;

@@ -93,56 +92,37 @@ .with-color {

## Initialization Options
You can provide different options before initialization to change the body class used for the dark theme and to provide different default styles:
```scss
...
@use 'angular-material-css-vars' as mat-css-vars;
...
@include mat-css-vars.init-material-css-vars(
// $default-light-theme: ... ;
// $text: ... ;
@use 'angular-material-css-vars' as mat-css-vars with (
$dark-theme-selector: '.isDarkTheme',
$light-theme-selector: '.isLightTheme',
$light-theme-selector: '.isLightTheme'
);
...
```
To make those variables take effect with your mixins, you need to make sure that they are also defined before using them. E.g.:
```scss
@use 'angular-material-css-vars' as mat-css-vars;
@include mat-css-vars.init-material-css-vars();
@include mat-css-vars.init-material-css-vars(
// probably best put in a common variables file and imported before the mixins
$dark-theme-selector: '.isDarkTheme',
);
.my-component {
@include mat-css-vars.mat-css-dark-theme {
// dark theme styles ...
}
}
```
A full list of the theme map [can be found here](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
### Set default (fallback palettes)
There are two ways to set the default fallback theme. One is using the `mat-css-palette-defaults` mixin.
### Set default (fallback palettes)
There are two ways to set the default fallback theme. One is using the `mat-css-palette-defaults` mixin.
```scss
@use 'angular-material-css-vars' as mat-css-vars;
@use '@angular/material' as mat;
@use "angular-material-css-vars" as mat-css-vars;
@use "@angular/material" as mat;
@include mat-css-vars.init-material-css-vars();
@include mat-css-vars.mat-css-set-palette-defaults(mat.$light-blue-palette, 'primary');
@include mat-css-vars.mat-css-set-palette-defaults(mat.$pink-palette, 'accent');
@include mat-css-vars.mat-css-set-palette-defaults(mat.$red-palette, 'warn');
@include mat-css-vars.mat-css-set-palette-defaults(mat.$light-blue-palette, "primary");
@include mat-css-vars.mat-css-set-palette-defaults(mat.$pink-palette, "accent");
@include mat-css-vars.mat-css-set-palette-defaults(mat.$red-palette, "warn");
```
The other is to include your own variables for [$mat-css-default-light-theme](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
The other is to include your own variables for [$default-light-theme](https://github.com/johannesjo/angular-material-css-vars/blob/master/projects/material-css-vars/src/lib/_variables.scss).
```scss
@use 'angular-material-css-vars' as mat-css-vars;
$mat-css-default-light-theme: map-merge(
// if you don't want to enter ALL the properties
mat-css-vars.$default-light-theme,
(
@use "angular-material-css-vars" as mat-css-vars with (
$default-light-theme: (
--palette-primary-50: mat-css-vars.hex-to-rgb(#e1f5fe),

@@ -162,6 +142,7 @@ --palette-primary-100: mat-css-vars.hex-to-rgb(#b3e5fc),

### Set global density
To set the global density level, just pass the `$density` variable to the `init-material-css-vars()` mixin like the following:
```scss
@use 'angular-material-css-vars' as mat-css-vars;
@use "angular-material-css-vars" as mat-css-vars;

@@ -172,2 +153,3 @@ @include mat-css-vars.init-material-css-vars($density: -2);

## App Theme Mixins
The `init-material-css-vars` mixin allows content to be passed into it. This allows you to create app themes that can take advantage of the dynamic theme created inside this mixin. It may be possible to do all theming using the utility mixins outlined above, but in other cases, you may need access to the theme palette, including foreground and background palettes.

@@ -178,6 +160,8 @@

## Font config
If needed the typography can be adjusted as well. You can introduce your own CSS variables, if you wish.
```scss
@use 'angular-material-css-vars' as mat-css-vars;
@use '@angular/material' as mat;
@use "angular-material-css-vars" as mat-css-vars;
@use "@angular/material" as mat;

@@ -187,3 +171,3 @@ // example

// optionally, you introduce your own CSS variables: `$font-family: var(--my-custom-font-family)`
$font-family: 'Roboto, monospace',
$font-family: "Roboto, monospace",
$headline: mat.define-typography-level(32px, 48px, 700),

@@ -195,3 +179,3 @@ $body-1: mat.define-typography-level(16px, 24px, 500)

@include app-theme($mat-css-theme);
};
}

@@ -204,2 +188,3 @@ @mixin app-theme($theme) {

## Legacy components support
Angular Material v15 introduces MDC based components, which is basically a re-write for a lot of the available components. `angular-material-css-vars` v5+ only supports MDC components.

@@ -212,3 +197,3 @@

| Angular | angular-material-css-vars |
|---------|---------------------------|
| ------- | ------------------------- |
| 16 | 5.x |

@@ -221,2 +206,3 @@ | 15 | 4.x |

## Credit...
...goes to @zbirizdo [project](https://github.com/zbirizdo/material-css-vars) on which parts of this are based which is in turn supposedly based on [this gist](https://gist.github.com/shprink/c7f333e3ad51830f14a6383f3ab35439).

@@ -223,0 +209,0 @@ 

esm2022/lib/default-cfg.const.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/material-css-vars.module.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/material-css-vars.service.mjs

Sorry, the diff of this file is not supported yet

esm2022/lib/model.mjs

Sorry, the diff of this file is not supported yet

esm2022/mat-css-config-token.const.mjs

Sorry, the diff of this file is not supported yet

esm2022/public-api.mjs

Sorry, the diff of this file is not supported yet

fesm2022/angular-material-css-vars.mjs

Sorry, the diff of this file is not supported yet

fesm2022/angular-material-css-vars.mjs.map

Sorry, the diff of this file is not supported yet

src/lib/_internal-helper.scss

Sorry, the diff of this file is not supported yet

src/lib/_main.scss

Sorry, the diff of this file is not supported yet

src/lib/_mat-lib-overwrites.scss

Sorry, the diff of this file is not supported yet

src/lib/_public-util.scss

Sorry, the diff of this file is not supported yet

src/lib/_variables.scss

Sorry, the diff of this file is not supported yet