# @dreamworld/material-styles

> This is used to define custom css properties for the app colors and typography.

Latest version **3.2.4** (published 2024-04-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dreamworld/material-styles
pnpm add @dreamworld/material-styles
yarn add @dreamworld/material-styles
bun add @dreamworld/material-styles
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.2.4 |
| Published | 2024-04-30 |
| First published | 2019-08-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | chiragmoradiya, chetang7, ajay-dhameliya, dw-devops |

## Links

- npm: https://www.npmjs.com/package/@dreamworld/material-styles
- Repository: https://github.com/DreamworldSolutions/material-styles
- Homepage: https://github.com/DreamworldSolutions/material-styles#readme
- Issues: https://github.com/DreamworldSolutions/material-styles/issues
- npm.io page: https://npm.io/package/@dreamworld/material-styles

## Dependencies (1)

- [@dreamworld/pwa-helpers](https://npm.io/package/@dreamworld/pwa-helpers.md) ^1.13.1

## Recent versions

- 3.2.4 (latest) — 2024-04-30
- 3.2.5-add-new-attribute-for-theme.1 (add-new-attribute-for-theme) — 2025-05-08
- 3.2.5-add-typography-headline7.2 (add-typography-headline7) — 2025-02-05
- 3.2.5-update-activated-overlay-opacity.1 (update-activated-overlay-opacity) — 2024-11-14
- 3.2.4-update-surface-overlay-opacity-activated.1 (update-surface-overlay-opacity-activated) — 2024-04-30
- 3.2.3-add-css-property-for-warning-dark-theme.1 (add-css-property-for-warning-dark-theme) — 2023-06-20
- 3.3.0-add-js-extension-import-file.1 (add-js-extension-import-file) — 2023-02-09
- 3.2.1-type-module.1 (type-module) — 2023-02-08
- 3.2.0-add-custom-css-property-for-warning.1 (add-custom-css-property-for-warning) — 2022-12-02
- 3.1.0-add-divider-color.1 (add-divider-color) — 2022-10-19
- 2.6.0-development.2 (development) — 2022-09-19
- 1.3.1-remove-polymer-roboto.1 (remove-polymer-roboto) — 2022-01-19
- 1.4.0-update-theme.7 (update-theme) — 2021-10-21
- 1.3.1-customize-font-family.2 (customize-font-family) — 2021-10-01
- 1.3.0-change-typography.2 (change-typography) — 2021-06-30
- … 43 more at https://npm.io/package/@dreamworld/material-styles/versions

## README

# material-styles

This is used to define custom css properties for the app colors and typography.

CSS properties should be used for themeing by custom elements developed by Dreamworld. Exact values of these CSS 
properties will be set by the app based on it's theme.

### Theme

It defines custom css properties to be used. Application can override value of that properties and can add new properties as per need.

#### Usage

It can be used directly in app-shell or you can create custom theme.

##### Custom theme
```js
import {ThemeStyle} from '@dreamworld/material-styles/theme.js';
import { css } from 'lit-element';

export const AppThemeStyle = css`
    ${ThemeStyle}

    :host {
      --mdc-theme-on-surface: #000;
    }

    :host[dark-theme] {
      --mdc-theme-on-surface: #fff;
    }
    
`;

class MyApp extends LitElement {
  static get styles() {
    return [
      AppThemeStyle,
    ];
  },

  static get properties() {
    return {
      
      /**
       * True, when application's dark mode is on
       */
      darkTheme: {
        type: String,
        reflect: true
      },
    }
  }
}
```

### Typography

It provides css properties for the material typography. Application Theme can override it's provided css properties if required.

#### Usage

```js
class MyApp extends LitElement {
  static get styles() {
    return [
      :host {
        --overline-font-size: 15px;
      }
    ];
  },
}
```

### Link (Anchor tag)

App should create it's own module by extending these modules. Application's module should be used in other elements of the app. These style modules shouldn't be directly use. This way app can change/override a particular style easily in future, when needed.

#### Usage


```js
import { linkStyle } from '@dreamworld/material-styles/link.js';

class MyApp extends LitElement {
  static get styles() {
    return [
      linkStyle,

      :host {
      }
    ];
  },

  render(){
    return html`<a href="https://www.google.com/">Go to google</a>`;
  }
}
```

---
_Source: https://npm.io/package/@dreamworld/material-styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._