Merge pull request #21 from nicheinc/feature/breakpoints

Feature/breakpoints

Author: MikeRawding

CHANGELOG.md

@@ -18,6 +18,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 ---
+## [1.2.0] - 2022-02-21
+### Added
+ - `breakpoints.ts` based on Expedite v0.5 breakpoints
+---
 ## [1.1.1] - 2022-02-21
 ### Changed
  - The value of `warm500` from `#CEAE98` to `#D2AD94`.  Releasing this as a patch update since nothing depends on warm500 yet.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@nicheinc/expedite-tokens",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Design Tokens for the Expedite Design System",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package.json

@@ -1,14 +1,16 @@
 import { colors } from '../dist/index.js'
 import { shadows } from '../dist/index.js'
+import { breakpoints } from '../dist/index.js'
 import path from 'path'
 import * as fs from 'fs'
 const __dirname = path.resolve()
 
-const writeJsObjectToLessFile = ({ jsObject, outPath }) => {
+const writeJsObjectToLessFile = ({ jsObject, outPath, transform }) => {
     const outFileLines = []
     outFileLines.push('// THIS FILE WAS AUTOMATICALLY GENERATED')
     Object.keys(jsObject).forEach(varName => {
-        outFileLines.push(`@${varName}: ${jsObject[varName]};`)
+        const value = transform ? transform(jsObject[varName]) : jsObject[varName]
+        outFileLines.push(`@${varName}: ${value};`)
     })
     const finalOutput = `${outFileLines.join('\n')}\n`
 
@@ -22,3 +24,11 @@ console.log('Finished generating .less version of colors.ts...')
 console.log('Starting to generate .less version of shadows.ts...')
 writeJsObjectToLessFile({ jsObject: shadows, outPath: `${__dirname}/dist/shadows/shadows.less` })
 console.log('Finished generating .less version of shadows.ts...')
+
+console.log('Starting to generate .less version of breakpoints.ts...')
+writeJsObjectToLessFile({
+    jsObject: breakpoints,
+    outPath: `${__dirname}/dist/breakpoints/breakpoints.less`,
+    transform: value => `~'only screen and (min-width: ${value}px)'`,
+})
+console.log('Finished generating .less version of breakpoints.ts...')

scripts/generateLessTokens.mjs

@@ -0,0 +1,9 @@
+export const breakpoints = {
+    breakpoint_base: 0,
+    breakpoint_500: 500,
+    breakpoint_768: 768,
+    breakpoint_960: 960,
+    breakpoint_1200: 1200,
+    breakpoint_1440: 1440,
+    breakpoint_1800: 1800,
+}

tokens/breakpoints/breakpoints.ts

@@ -1,2 +1,3 @@
+export { breakpoints } from './breakpoints/breakpoints'
 export { colors } from './colors/colors'
 export { shadows } from './shadows/shadows'