# rewards-ds-css

> Everyday Rewards DS css

Latest version **0.1.7** (published 2021-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install rewards-ds-css
pnpm add rewards-ds-css
yarn add rewards-ds-css
bun add rewards-ds-css
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2021-01-18 |
| First published | 2020-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 855.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | kwoo@woolworths.com.au |
| Maintainers | kwooms |

## Links

- npm: https://www.npmjs.com/package/rewards-ds-css
- Repository: https://github.com/woolworthslimited/rewards-ds-css
- Homepage: https://github.com/woolworthslimited/rewards-ds-css#readme
- Issues: https://github.com/woolworthslimited/rewards-ds-css/issues
- npm.io page: https://npm.io/package/rewards-ds-css

## Dependencies (3)

- [theo](https://npm.io/package/theo.md) ^8.1.5
- [node-sass](https://npm.io/package/node-sass.md) ^4.13.1
- [bulma-scss](https://npm.io/package/bulma-scss.md) ^0.7.5

## Recent versions

- 0.1.7 (latest) — 2021-01-18
- 0.1.6 — 2021-01-18
- 0.1.5 — 2021-01-18
- 0.1.4 — 2021-01-18
- 0.1.3 — 2021-01-14
- 0.1.2 — 2021-01-14
- 0.1.1 — 2021-01-14
- 0.1.0 — 2021-01-14
- 0.0.6 — 2021-01-14
- 0.0.5 — 2021-01-13
- 0.0.4 — 2021-01-13
- 0.0.3 — 2021-01-13
- 0.0.2 — 2020-12-17
- 0.0.1 — 2020-12-13

## README

# Rewards Design System CSS

This repo contains the CSS part of the Rewards Design System.

### How it works
Brand and design variables are stored as design tokens, using yaml format. These are transformed into web styles (scss and css variables) using Theo. (TODO: iOS and Android related style formats can be generated). The resulting rds.css file is published to npm repository rewards-ds-css.

The Rewards DS CSS currently uses Bulma CSS framework as a base.

### How to consume
Reference the rds stylesheet in the HTML head:

`<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/rewards-ds-css@0.0.2/dist/rds.css"/>`

### How to build
`npm run generate-tokens`
This will transform the tokens into scss files

`npm run build`
This will generate the css files from scss files

### TODO
- Decide which design tokens to store [IN PROGRESS]
  - Convert more values into tokens eg break points, borders, form styling [TO DO]
- Port custom rds styles from current rewards-ds
  - core.scss
    - colour [DONE]
    - typography [DONE]
    - mixins [DONE] moved one and only mixins into typography
    - spacing [DONE] spacing helpers moved here
    - layout [DONE] (moved rds custom import into bulma import)
    - grid [DONE] (moved rds custom import into bulma import)
    - icons [SKIPPED] - currently relies on custom icomoon font
    - *TODO: create new icon component and port references to custom icomoon font and replace in relevant components*
    - helpers [DONE] - helpers included in spacing
    - shadows [DONE];

  - forms.scss [DONE] - this was just including bulma form scss .. have removed this and updated bulma.scss. forms.scss is now under rds and has rds cusomisations only
  - elements.scss [IN PROGRESS] - not sure how helpful the elements category is.
    - form.scss [DONE] 
      - checkradio *TO DO checkradio css seems bloated and should be reviewed*
    - buttons.scss [DONE] - moved to misc
    - delete.scss [DONE] - moved to misc
    - checkradio [DONE] moved inside forms
    - divider.scss [REMOVED] no component uses is-divider class. duplicate animation
    - image.scss [DONE] - moved to misc

# Next to do
- minify css output (source maps, remove comments etc)
- (maybe) create 'skeleton' css with just tokens and font
- exclude certain tokens from css variables 
- verify if use of jsDelvr CDN is adequate
- consider if Roboto should be default sans serif (as before). currently set to default font stack (ie. changes with OS). i think this looks better
  ## In existing rewards-ds:
  - Reference rewards-css-ds 
    - import rewards-ds-css [DONE]
    - update stencil.config.ts [DONE]
    - fix broken scss references [DONE]
    - replaces instances of local /build/rds.css with CDN reference to this css library [DONE BUT HARDCODED]
    - remove references to bulma mixins - how? [TO DO]
    - review all copmoents and remove @imports if possible [TO DO]
  - Check which components look different [TO DO]
  - Fix components [TO DO]
  - Remove local css
- Create / update icon component that references SVGs inline [TO DO]
- Update any components that use font-awesome icons to use new icon component (since font awesome wont be used in rewards-ds-css) [TO DO]

## In OAP and Rendering layer
  - Consume new css rather than rewards-ds css
  - Regression test and fix any issues
- 
### Proposed rewards-ds heirarchy
- rewards-ds-css (css)
  - rewards-ds (web components stencil - requires css global)
  - rewards-ds-widgets (web components stencil that are 'smart' and/or encapsulated - requires just skeleton css)

---
_Source: https://npm.io/package/rewards-ds-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._