diff --git a/package.json b/package.json
index 152e368..aad6cdf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "design-system-utils",
- "version": "1.4.0",
+ "version": "1.5.0",
"description": "Design-system utils for working with JS-in-CSS",
"main": "build/cjs.js",
"module": "build/es.js",
@@ -49,7 +49,8 @@
"author": "Zander Martineau",
"license": "MIT",
"dependencies": {
- "@ngard/tiny-get": "^1.0.1"
+ "@ngard/tiny-get": "^1.0.1",
+ "dset": "^2.0.1"
},
"devDependencies": {
"@types/jest": "^24.0.9",
diff --git a/readme.md b/readme.md
index 657f9f5..a78d413 100644
--- a/readme.md
+++ b/readme.md
@@ -9,31 +9,7 @@
-Design System Utils is a micro framework that standardises your design-system tokens & provides helpful utility functions to access it’s information. It can be used with [styled-components](https://styled-components.com), [emotion](https://emotion.sh), [glamorous](https://glamorous.rocks/) or any other [CSS-in-JS framework](https://css-in-js-playground.com/).
-
-
- Table of contents
-
-- [Install](#install)
-- [Usage](#usage)
- - [Setting up your design system](#setting-up-your-design-system)
- - [Initialise the design system framework](#initialise-the-design-system-framework)
- - [Accessing the design system data in your app](#accessing-the-design-system-data-in-your-app)
-- [Options](#options)
-- [API methods](#api-methods)
- - [`tokens.get()` - Get any value from the design tokens](#tokensget---get-any-value-from-the-design-tokens)
- - [`tokens.fontSize()` or `tokens.fs()` - Get font-size values](#tokensfontsize-or-tokensfs---get-font-size-values)
- - [Color palette](#color-palette)
- - [`tokens.color()` - Get color palette values](#tokenscolor---get-color-palette-values)
- - [`tokens.brand()` - Get brand palette values](#tokensbrand---get-brand-palette-values)
- - [`tokens.bp()` - Get responsive breakpoint values](#tokensbp---get-responsive-breakpoint-values)
- - [`tokens.z()` - Get `z-index` values](#tokensz---get-z-index-values)
- - [`tokens.spacing()` or `tokens.space()` - Get spacing values](#tokensspacing-or-tokensspace---get-spacing-values)
- - [Calculations](#calculations)
-- [Usage with Typescript](#usage-with-typescript)
-- [Demo & examples](#demo--examples)
-
-
+Design System Utils is a micro framework that standardises your design-system tokens & provides helpful utility functions to access the information. It can be used with [styled-components](https://styled-components.com), [emotion](https://emotion.sh), [glamorous](https://glamorous.rocks/) or any other [CSS-in-JS framework](https://css-in-js-playground.com/).
## Install
@@ -50,7 +26,7 @@ npm install --save design-system-utils
```
$ size-limit
- cjs/index.js
+ build/cjs.js
Package size: 814 B
Size limit: 1 KB
@@ -61,6 +37,45 @@ $ size-limit
With all dependencies, minified and gzipped
```
+
+ 🤓 Table of contents
+
+
+
+
+
+- [Usage](#usage)
+ - [Setup](#setup)
+ - [Initialise the design system framework](#initialise-the-design-system-framework)
+- [Accessing the design system data in your app](#accessing-the-design-system-data-in-your%C2%A0app)
+- [Options](#options)
+- [Basic API methods](#basic-api-methods)
+ - [`tokens.get()` - Get a token value](#tokensget---get-a-token-value)
+ - [`tokens.set()` - Set a token value](#tokensset---set-a-token-value)
+- [API helper methods](#api-helper-methods)
+ - [`tokens.fontSize()` or `tokens.fs()` - Get font-size values](#tokensfontsize-or-tokensfs---get-font-size-values)
+ - [Modular scale](#modular-scale)
+ - [Color palette](#color-palette)
+ - [`tokens.color()` - Get color palette values](#tokenscolor---get-color-palette-values)
+ - [`tokens.brand()` - Get brand palette values](#tokensbrand---get-brand-palette-values)
+ - [`tokens.bp()` - Get responsive breakpoint values](#tokensbp---get-responsive-breakpoint-values)
+ - [`tokens.z()` - Get `z-index` values](#tokensz---get-z-index-values)
+ - [`tokens.spacing()` or `tokens.space()` - Get spacing values](#tokensspacing-or-tokensspace---get-spacing-values)
+ - [Array example:](#array-example)
+ - [Object example:](#object-example)
+ - [Calculations](#calculations)
+ - [`tokens.multiply()`](#tokensmultiply)
+ - [`pxTo()`](#pxto)
+ - [`toPx()`](#topx)
+ - [`parseUnit()`](#parseunit)
+- [Usage with Typescript](#usage-with-typescript)
+- [Demo & examples](#demo--examples)
+- [Licence](#licence)
+
+
+
+
+
## Usage
First create your design system file, this contains all your design tokens that your app or site will use; things like font-sizes, color palette, spacing etc (kind of like a Sass/Less variables file).
@@ -84,7 +99,7 @@ const designTokens = {...}
export default new DesignSystem(designTokens)
```
-### Setting up your design system
+### Setup
The "shape" and structure of your design tokens object **_can_** actually be anything you want, however, if you want to make use of the shortcut/helper methods like `tokens.fontSize|bp|z|color|brand|spacing` etc, there is a particular shape that your data will need to follow, see below:
@@ -230,18 +245,44 @@ export default new DesignSystem(myDesignSystem, {
})
```
-## API methods
+## Basic API methods
-### `tokens.get()` - Get any value from the design tokens
+### `tokens.get()` - Get a token value
The `tokens.get()` function can be used to get any value from the design-system. Use object dot notation to find the value you need from your design system object.
```js
// with the system setup, as above
tokens.get('lineHeight.headings') // 1.1
+tokens.get('a.really.deeply.nested.value')
+```
+
+### `tokens.set()` - Set a token value
+
+The `tokens.set()` function can be used to set tokens values. This means you can overwrite existing items, or create new items that are specific to your application.
+
+Like the `.get()` method, use object dot notation to find the value you need from your design system object.
+
+This method uses [dset](https://github.com/lukeed/dset#usage) under the hood, so please read the docs there for more info.
+
+```js
+// with the system setup, as above
+tokens.set('forms.inputBackground', '#fff')
+
+// then use it later like so:
+tokens.get('forms.inputBackground')
```
-There are a few more helper methods to make finding certain values more simple.
+## API helper methods
+
+The helper methods make getting values _much_ more simple.
+
+- [`tokens.fontSize()` or `tokens.fs()`](#tokensfontsize-or-tokensfs---get-font-size-values) - Get font-size values
+- [`tokens.color()`](#tokenscolor---get-color-palette-values) - Get color palette values
+- [`tokens.brand()`](#tokensbrand---get-brand-palette-values) - Get brand palette values
+- [`tokens.bp()`](#tokensbp---get-responsive-breakpoint-values) - Get responsive breakpoint values
+- [`tokens.z()`](#tokensz---get-z-index-values) - Get `z-index` values
+- [`tokens.spacing()` or `tokens.space()`](#tokensspacing-or-tokensspace---get-spacing-values) - Get spacing values
### `tokens.fontSize()` or `tokens.fs()` - Get font-size values
@@ -464,7 +505,27 @@ parseUnit('18px') // 'px'
## Usage with Typescript
-Typescript types and interfaces should be imported as named imports. Below is an example where a new item (`baseline`) is added to the `spacing` object.
+Typescript types and interfaces should be imported as named imports.
+
+See all the type definitions in the [types.ts](https://github.com/mrmartineau/design-system-utils/blob/master/src/types.ts) file. Here are all the exported types that can be extended:
+
+```
+{
+ System,
+ SystemOptions,
+ SystemBreakpoints,
+ SystemZIndex,
+ SystemFontSizes,
+ SystemSpacing,
+ SystemScale,
+ SystemColorPalette,
+ SystemBrandPalette,
+ SystemType,
+ SystemOptionalKey,
+}
+```
+
+Below is an example where a new item (`baseline`) is added to the `spacing` object.
```ts
import DesignSystem, { System, SystemOptions, SystemSpacing } from '../index'
diff --git a/src/index.test.ts b/src/index.test.ts
index 274b63c..80d84c1 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -3,268 +3,277 @@ import ds2 from './testData/ds2'
import DesignSystem from './index'
import { pxTo, toPx, parseUnit } from './index'
-describe('design-system-utils methods', () => {
- test('get', () => {
- expect(ds1.get('type.baseFontSize')).toBe('30px')
- expect(ds1.get('foo')).toBeUndefined()
- expect(ds1.get('foo.bar')).toBeUndefined()
- expect(ds2.get('type.baseFontSize')).toBe('30px')
- })
-
- test('multiply', () => {
- expect(ds1.multiply(20, 2)).toBe(40)
- expect(ds1.multiply('type.baseFontSize', 2)).toBe(60)
- expect(ds1.multiply('spacing.baseline', 2)).toBe(40)
- })
-
- test('breakpoints', () => {
- expect(ds1.bp('s')).toBe(200)
- expect(ds1.bp('m')).toBe('500px')
- expect(ds2.bp('s')).toBe('400px')
-
- // Errors
- expect(() => ds1.bp('xxxxl')).toThrow(
- 'design-system-utils: There is a missing value at this key: breakpoints.xxxxl'
- )
-
- const ds = new DesignSystem({})
- expect(() => ds.bp('m')).toThrow(
- 'design-system-utils: Values missing at: breakpoints within your design tokens config'
- )
- })
-
- test('z-index', () => {
- expect(ds1.z('low')).toBe(10)
- expect(ds2.z('mid')).toBe(100)
-
- // Errors
- expect(() => ds1.z('xxxxl')).toThrow(
- 'design-system-utils: There is a missing value at this key: zIndex.xxxxl'
- )
-
- const ds = new DesignSystem({})
- expect(() => ds.z('m')).toThrow(
- 'design-system-utils: Values missing at: zIndex within your design tokens config'
- )
- })
-
- describe('spacing', () => {
- test('when using an array', () => {
- expect(ds1.spacing(0)).toBe('0px')
- expect(ds1.space(2)).toBe('16px')
- expect(ds1.spacing(3)).toBe('24px')
+describe('design-system-utils', () => {
+ describe('get values', () => {
+ test('get', () => {
+ expect(ds1.get('type.baseFontSize')).toBe('30px')
+ expect(ds1.get('foo')).toBeUndefined()
+ expect(ds1.get('foo.bar')).toBeUndefined()
+ expect(ds2.get('type.baseFontSize')).toBe('30px')
})
- test('when using an object', () => {
- expect(ds2.space('s')).toBe('10rem')
- expect(ds2.space('m')).toBe('100rem')
- expect(ds2.space('l')).toBe('1000rem')
+ test('multiply', () => {
+ expect(ds1.multiply(20, 2)).toBe(40)
+ expect(ds1.multiply('type.baseFontSize', 2)).toBe(60)
+ expect(ds1.multiply('spacing.baseline', 2)).toBe(40)
})
- // Errors
- test('should return errors', () => {
- expect(() => ds1.spacing('xxxxl')).toThrow(
- 'design-system-utils: There is a missing value at this key: spacing.scale.xxxxl'
- )
- expect(() => ds1.spacing(10)).toThrow(
- 'design-system-utils: There is a missing value at this key: spacing.scale.10'
+ test('breakpoints', () => {
+ expect(ds1.bp('s')).toBe(200)
+ expect(ds1.bp('m')).toBe('500px')
+ expect(ds2.bp('s')).toBe('400px')
+
+ // Errors
+ expect(() => ds1.bp('xxxxl')).toThrow(
+ 'design-system-utils: There is a missing value at this key: breakpoints.xxxxl'
)
const ds = new DesignSystem({})
- expect(() => ds.spacing('m')).toThrow(
- 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
- )
- expect(() => ds.space('m')).toThrow(
- 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
- )
- expect(() => ds.space(2)).toThrow(
- 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
+ expect(() => ds.bp('m')).toThrow(
+ 'design-system-utils: Values missing at: breakpoints within your design tokens config'
)
})
- })
- describe('fontSize', () => {
- test('fontSize - ds1 - px', () => {
- expect(ds1.fontSize('base')).toBe('30px')
- expect(ds1.fontSize('l')).toBe('42px')
+ test('z-index', () => {
+ expect(ds1.z('low')).toBe(10)
+ expect(ds2.z('mid')).toBe(100)
// Errors
- expect(() => ds1.fontSize('xxxxl')).toThrow(
- 'design-system-utils: There is a missing value at this key: type.sizes.xxxxl'
+ expect(() => ds1.z('xxxxl')).toThrow(
+ 'design-system-utils: There is a missing value at this key: zIndex.xxxxl'
)
const ds = new DesignSystem({})
- expect(() => ds.fontSize('l')).toThrow(
- 'design-system-utils: Values missing at: type.sizes within your design tokens config'
+ expect(() => ds.z('m')).toThrow(
+ 'design-system-utils: Values missing at: zIndex within your design tokens config'
)
})
- test('fontSize - ds2 - em', () => {
- expect(ds2.fs('medium')).toBe('1.5em')
- expect(ds2.fs('large')).toBe('2.4em')
+ describe('spacing', () => {
+ test('when using an array', () => {
+ expect(ds1.spacing(0)).toBe('0px')
+ expect(ds1.space(2)).toBe('16px')
+ expect(ds1.spacing(3)).toBe('24px')
+ })
+
+ test('when using an object', () => {
+ expect(ds2.space('s')).toBe('10rem')
+ expect(ds2.space('m')).toBe('100rem')
+ expect(ds2.space('l')).toBe('1000rem')
+ })
// Errors
- expect(() => ds2.fontSize('xxxxl')).toThrow(
- 'design-system-utils: There is a missing value at this key: type.sizes.xxxxl'
- )
+ test('should return errors', () => {
+ expect(() => ds1.spacing('xxxxl')).toThrow(
+ 'design-system-utils: There is a missing value at this key: spacing.scale.xxxxl'
+ )
+ expect(() => ds1.spacing(10)).toThrow(
+ 'design-system-utils: There is a missing value at this key: spacing.scale.10'
+ )
+
+ const ds = new DesignSystem({})
+ expect(() => ds.spacing('m')).toThrow(
+ 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
+ )
+ expect(() => ds.space('m')).toThrow(
+ 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
+ )
+ expect(() => ds.space(2)).toThrow(
+ 'design-system-utils: Values missing at: spacing.scale within your design tokens config'
+ )
+ })
})
- test('fontSize - rem', () => {
- const system = {
- type: {
- baseFontSize: '20px',
+ describe('fontSize', () => {
+ test('fontSize - ds1 - px', () => {
+ expect(ds1.fontSize('base')).toBe('30px')
+ expect(ds1.fontSize('l')).toBe('42px')
+
+ // Errors
+ expect(() => ds1.fontSize('xxxxl')).toThrow(
+ 'design-system-utils: There is a missing value at this key: type.sizes.xxxxl'
+ )
+
+ const ds = new DesignSystem({})
+ expect(() => ds.fontSize('l')).toThrow(
+ 'design-system-utils: Values missing at: type.sizes within your design tokens config'
+ )
+ })
+
+ test('fontSize - ds2 - em', () => {
+ expect(ds2.fs('medium')).toBe('1.5em')
+ expect(ds2.fs('large')).toBe('2.4em')
+
+ // Errors
+ expect(() => ds2.fontSize('xxxxl')).toThrow(
+ 'design-system-utils: There is a missing value at this key: type.sizes.xxxxl'
+ )
+ })
- sizes: {
- s: '1rem',
- m: '2rem',
- l: '3rem',
+ test('fontSize - rem', () => {
+ const system = {
+ type: {
+ baseFontSize: '20px',
+
+ sizes: {
+ s: '1rem',
+ m: '2rem',
+ l: '3rem',
+ },
},
- },
- }
+ }
- const ds = new DesignSystem(system)
- expect(ds.fontSize('m')).toBe('2rem')
- expect(ds.fontSize('l')).toBe('3rem')
+ const ds = new DesignSystem(system)
+ expect(ds.fontSize('m')).toBe('2rem')
+ expect(ds.fontSize('l')).toBe('3rem')
- // Errors
- expect(() => ds.fontSize('l')).not.toThrow()
- })
+ // Errors
+ expect(() => ds.fontSize('l')).not.toThrow()
+ })
- test('fontSize - px to rem', () => {
- const system = {
- type: {
- baseFontSize: '20px',
+ test('fontSize - px to rem', () => {
+ const system = {
+ type: {
+ baseFontSize: '20px',
- sizes: {
- s: '20px',
- m: '25px',
- l: '40px',
+ sizes: {
+ s: '20px',
+ m: '25px',
+ l: '40px',
+ },
},
- },
- }
+ }
- const ds = new DesignSystem(system, {
- fontSizeUnit: 'rem',
+ const ds = new DesignSystem(system, {
+ fontSizeUnit: 'rem',
+ })
+ expect(ds.fs('m')).toBe('1.25rem')
+ expect(ds.fs('l')).toBe('2rem')
})
- expect(ds.fs('m')).toBe('1.25rem')
- expect(ds.fs('l')).toBe('2rem')
- })
- test('fontSize - px to em', () => {
- const system = {
- type: {
- baseFontSize: '20px',
+ test('fontSize - px to em', () => {
+ const system = {
+ type: {
+ baseFontSize: '20px',
- sizes: {
- s: '20px',
- m: '25px',
- l: '40px',
+ sizes: {
+ s: '20px',
+ m: '25px',
+ l: '40px',
+ },
},
- },
- }
+ }
- const ds = new DesignSystem(system, {
- fontSizeUnit: 'em',
+ const ds = new DesignSystem(system, {
+ fontSizeUnit: 'em',
+ })
+ expect(ds.fs('m')).toBe('1.25em')
+ expect(ds.fs('l')).toBe('2em')
})
- expect(ds.fs('m')).toBe('1.25em')
- expect(ds.fs('l')).toBe('2em')
- })
- test('fontSize - rem to px', () => {
- const system = {
- type: {
- baseFontSize: '20px',
+ test('fontSize - rem to px', () => {
+ const system = {
+ type: {
+ baseFontSize: '20px',
- sizes: {
- s: '1rem',
- m: '2rem',
- l: '3rem',
+ sizes: {
+ s: '1rem',
+ m: '2rem',
+ l: '3rem',
+ },
},
- },
- }
+ }
- const ds = new DesignSystem(system, {
- fontSizeUnit: 'px',
+ const ds = new DesignSystem(system, {
+ fontSizeUnit: 'px',
+ })
+ expect(ds.fs('m')).toBe('40px')
+ expect(ds.fs('l')).toBe('60px')
})
- expect(ds.fs('m')).toBe('40px')
- expect(ds.fs('l')).toBe('60px')
- })
- test('fontSize - px to px', () => {
- const system = {
- type: {
- baseFontSize: '20px',
+ test('fontSize - px to px', () => {
+ const system = {
+ type: {
+ baseFontSize: '20px',
- sizes: {
- s: '20px',
- m: '25px',
- l: '40px',
+ sizes: {
+ s: '20px',
+ m: '25px',
+ l: '40px',
+ },
},
- },
- }
+ }
- const ds = new DesignSystem(system, {
- fontSizeUnit: 'px',
+ const ds = new DesignSystem(system, {
+ fontSizeUnit: 'px',
+ })
+ expect(ds.fs('m')).toBe('25px')
+ expect(ds.fs('l')).toBe('40px')
})
- expect(ds.fs('m')).toBe('25px')
- expect(ds.fs('l')).toBe('40px')
})
- })
- test('brand', () => {
- expect(ds1.brand('orange')).toBe('#ff9500')
- expect(ds1.brand('teal')).toBe('#1aa5c8')
-
- // Errors
- expect(() => ds1.brand('text')).toThrow(
- 'design-system-utils: There is a missing value at this key: colors.brand.text'
- )
- const ds = new DesignSystem({})
- expect(() => ds.brand('text')).toThrow(
- 'design-system-utils: Values missing at: colors.brand within your design tokens config'
- )
- })
+ test('brand', () => {
+ expect(ds1.brand('orange')).toBe('#ff9500')
+ expect(ds1.brand('teal')).toBe('#1aa5c8')
- test('color', () => {
- expect(ds1.color('primary')).toBe('#181830')
- expect(ds1.color('secondary', 'light')).toBe('#fea04c')
- expect(ds1.color('nested.secondary.light')).toBe('#fea04c')
- expect(ds1.color('nested.secondary.deep.nested.light')).toBe('#fea04c')
-
- // Errors
- expect(() => ds1.color('text', 'dark')).toThrow(
- 'design-system-utils: There is a missing value at this key: colors.colorPalette.text.dark'
- )
- const ds = new DesignSystem({})
- expect(() => ds.color('text')).toThrow(
- 'design-system-utils: Values missing at: colors.colorPalette within your design tokens config'
- )
- })
-})
+ // Errors
+ expect(() => ds1.brand('text')).toThrow(
+ 'design-system-utils: There is a missing value at this key: colors.brand.text'
+ )
+ const ds = new DesignSystem({})
+ expect(() => ds.brand('text')).toThrow(
+ 'design-system-utils: Values missing at: colors.brand within your design tokens config'
+ )
+ })
-describe('design-system-utils helpers', () => {
- test(`pxTo`, () => {
- expect(pxTo('30px', 16, 'em')).toBe('1.875em')
- expect(pxTo('30px', 16, 'rem')).toBe('1.875rem')
- expect(pxTo('30px', 20)).toBe('1.5rem')
- expect(pxTo('30px')).toBe('1.875rem')
+ test('color', () => {
+ expect(ds1.color('primary')).toBe('#181830')
+ expect(ds1.color('secondary', 'light')).toBe('#fea04c')
+ expect(ds1.color('nested.secondary.light')).toBe('#fea04c')
+ expect(ds1.color('nested.secondary.deep.nested.light')).toBe('#fea04c')
+
+ // Errors
+ expect(() => ds1.color('text', 'dark')).toThrow(
+ 'design-system-utils: There is a missing value at this key: colors.colorPalette.text.dark'
+ )
+ const ds = new DesignSystem({})
+ expect(() => ds.color('text')).toThrow(
+ 'design-system-utils: Values missing at: colors.colorPalette within your design tokens config'
+ )
+ })
})
- test(`toPx`, () => {
- expect(toPx('1.875em', 16)).toBe('30px')
- expect(toPx('1.875em')).toBe('30px')
- expect(toPx('1.875rem', 16)).toBe('30px')
+ describe('design-system-utils helpers', () => {
+ test(`pxTo`, () => {
+ expect(pxTo('30px', 16, 'em')).toBe('1.875em')
+ expect(pxTo('30px', 16, 'rem')).toBe('1.875rem')
+ expect(pxTo('30px', 20)).toBe('1.5rem')
+ expect(pxTo('30px')).toBe('1.875rem')
+ })
+
+ test(`toPx`, () => {
+ expect(toPx('1.875em', 16)).toBe('30px')
+ expect(toPx('1.875em')).toBe('30px')
+ expect(toPx('1.875rem', 16)).toBe('30px')
+ })
+
+ test(`parseUnit`, () => {
+ expect(parseUnit('1.875em')).toBe('em')
+ expect(parseUnit('1.875rem')).toBe('rem')
+ expect(parseUnit('1.875 rem')).toBe('rem')
+ expect(parseUnit('18px')).toBe('px')
+ expect(parseUnit('18 px')).toBe('px')
+ expect(parseUnit('18 px ')).toBe('px')
+ expect(parseUnit(' 18 px')).toBe('px')
+ expect(parseUnit(' 18 px ')).toBe('px')
+ expect(parseUnit(' 18 px ')).toBe('px')
+ })
})
- test(`parseUnit`, () => {
- expect(parseUnit('1.875em')).toBe('em')
- expect(parseUnit('1.875rem')).toBe('rem')
- expect(parseUnit('1.875 rem')).toBe('rem')
- expect(parseUnit('18px')).toBe('px')
- expect(parseUnit('18 px')).toBe('px')
- expect(parseUnit('18 px ')).toBe('px')
- expect(parseUnit(' 18 px')).toBe('px')
- expect(parseUnit(' 18 px ')).toBe('px')
- expect(parseUnit(' 18 px ')).toBe('px')
+ describe('set values', () => {
+ test('set', () => {
+ ds1.set('foo', 'bar')
+ expect(ds1.get('foo')).toBe('bar')
+ })
})
})
diff --git a/src/index.ts b/src/index.ts
index c5def39..ed7562a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
import { get } from '@ngard/tiny-get'
+import set from 'dset'
import {
System,
SystemOptions,
@@ -71,17 +72,6 @@ export default class DesignSystem {
this.ds = system
}
- /**
- * multiply()
- * multiply a given value
- */
- public multiply(initial: any, multiplier: number): number {
- const initialVal =
- typeof initial === 'string' ? parseFloat(this.get(initial)) : initial
-
- return initialVal * multiplier
- }
-
/**
* get()
* get any value from the design system object
@@ -91,41 +81,11 @@ export default class DesignSystem {
}
/**
- * bp()
- * get a breakpoint value from the design system object
+ * set()
+ * set any value in the design system object
*/
- public bp(breakpoint: string): string {
- const location = 'breakpoints'
- if (this.get(location, this.ds) === undefined) {
- throw new Error(MissingParent(location))
- }
-
- const value: string | undefined = this.get(breakpoint, this.ds.breakpoints)
-
- if (value === undefined) {
- throw new Error(MissingKey(location, breakpoint))
- }
-
- return value
- }
-
- /**
- * z()
- * get a z-index value from the design system object
- */
- public z(z: string): string {
- const location = 'zIndex'
- if (this.get(location, this.ds) === undefined) {
- throw new Error(MissingParent(location))
- }
-
- const value: string | undefined = this.get(z, this.ds.zIndex)
-
- if (value === undefined) {
- throw new Error(MissingKey(location, z))
- }
-
- return value
+ public set(location: string, value: any): void {
+ return set(this.ds, location, value)
}
/**
@@ -252,6 +212,55 @@ export default class DesignSystem {
return value
}
+ /**
+ * bp()
+ * get a breakpoint value from the design system object
+ */
+ public bp(breakpoint: string): string {
+ const location = 'breakpoints'
+ if (this.get(location, this.ds) === undefined) {
+ throw new Error(MissingParent(location))
+ }
+
+ const value: string | undefined = this.get(breakpoint, this.ds.breakpoints)
+
+ if (value === undefined) {
+ throw new Error(MissingKey(location, breakpoint))
+ }
+
+ return value
+ }
+
+ /**
+ * z()
+ * get a z-index value from the design system object
+ */
+ public z(z: string): string {
+ const location = 'zIndex'
+ if (this.get(location, this.ds) === undefined) {
+ throw new Error(MissingParent(location))
+ }
+
+ const value: string | undefined = this.get(z, this.ds.zIndex)
+
+ if (value === undefined) {
+ throw new Error(MissingKey(location, z))
+ }
+
+ return value
+ }
+
+ /**
+ * multiply()
+ * multiply a given value
+ */
+ public multiply(initial: any, multiplier: number): number {
+ const initialVal =
+ typeof initial === 'string' ? parseFloat(this.get(initial)) : initial
+
+ return initialVal * multiplier
+ }
+
private parentCheck(loc: string) {
const locPt1 = loc.split('.')
if (
diff --git a/types/dset.d.ts b/types/dset.d.ts
new file mode 100644
index 0000000..64f3be9
--- /dev/null
+++ b/types/dset.d.ts
@@ -0,0 +1,3 @@
+declare module 'dset' {
+ export default function set(object: object, keys: string, value: any): void
+}
diff --git a/yarn.lock b/yarn.lock
index 76d51c5..7ebbf77 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1792,6 +1792,11 @@ dot-prop@^4.1.1:
dependencies:
is-obj "^1.0.0"
+dset@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/dset/-/dset-2.0.1.tgz#a15fff3d1e4d60ac0c95634625cbd5441a76deb1"
+ integrity sha512-nI29OZMRYq36hOcifB6HTjajNAAiBKSXsyWZrq+VniusseuP2OpNlTiYgsaNRSGvpyq5Wjbc2gQLyBdTyWqhnQ==
+
duplexer@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"