https://github.com/wealthbar/peak-style

Base style for the Peak Design System - includes only basic elemental styling and themes, no layout or structure patterns
https://github.com/wealthbar/peak-style

design-system

Last synced: about 3 hours ago
JSON representation

Base style for the Peak Design System - includes only basic elemental styling and themes, no layout or structure patterns

• Host: GitHub
• URL: https://github.com/wealthbar/peak-style
• Owner: WealthBar
• License: mit
• Created: 2019-07-18T20:59:36.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T15:56:01.000Z (5 months ago)
• Last Synced: 2024-08-09T23:24:56.375Z (3 months ago)
• Topics: design-system
• Language: SCSS
• Homepage: https://peak.wealth.bar
• Size: 378 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# peak-style

This package is used to install the SCSS or CSS style for the *Peak Design System*. Included in this package:

* **Themes** - The colour values, variables, and settings associated with the brand (SCSS only for now).

* **Base styles** - Basic HTML document setup, typography and elemental styling. No layout or structure patterns.

* **Pattern library** - a resource of commonly used patterns for component structures and page layout.

## Crafting a Release

1. Update `package.json` with new version.

2. Complete Standard PR -> Approve process.

2. Compile CSS with `yarn run css` locally – then merge PR to `master`.

4. Go to [Release Page](https://github.com/WealthBar/peak-style/releases) and click `Draft a new release` Button.

5. Tag with updated matching version in `package.json` and write description.

6. Click `Publish release`.

7. Nothing, there is no 7th step.

## Usage

### Option 1 - SCSS

A `theme` file is required to be `@import`-ed prior to the other style files. The theme file will pre-load all required vaiables for the for `base` styling and the `patterns` library. `base` styles are also required prior to the `pattern` files. These steps ensures the cascade of styles works as intended.

**example:**

```

@import '~@wealthbar/peak-style/scss/theme/wealthbar';

@import '~@wealthbar/peak-style/scss/base/index';

@import '~@wealthbar/peak-style/scss/patterns/index';

```

**OR** to load both `base` and `patterns` in one shot:

```

@import '~@wealthbar/peak-style/scss/theme/wealthbar';

@import '~@wealthbar/peak-style/scss/index';

```

Additionally, `theme` files can be loaded on a per component/page basis to allow use of colour and setting variables within the templated file. Ideally this should be handled by webpack so the developers aren't bothered with having to import a theme everytime they choose to use a variable in the template. The biggest advantage of the webpack setup is the ability to switch theme based on build config ENV variables.

**example webpack setup:**

```

const theme = JSON.parse(configEnv.WHITELABEL_BRAND);

…

loader: 'sass-loader',

  options: {

    data: `@import "~@wealthbar/peak-style/theme/${theme}.scss";`,

    includePaths: ['src/styles'],

  },

```

### Option 2 - CSS

CSS files are compiled based on `theme` and style package, they are directly imported into any html file. `base` and `patterns` for each theme are split into different files to save weight. As a result of the pre-compile there is *no access* to SCSS variables outside the scope of the file.

`theme-base` - minimal css  (reset, basic elements, typography, minimal button and input styling)

`theme-patterns` - common css patterns applied via classes (button and input style options)

So if you want the *wealthbar* themed *base* styles it is served as `wealthbar-base.css`

**example:**

```

  

  

```