cf-style-const - npm Package Compare versions

Comparing version 2.5.3 to 2.6.0

CHANGELOG.md

 # Change Log
 
 All notable changes to this project will be documented in this file.
-See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="2.6.0"></a>
+# [2.6.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-const@2.5.3...cf-style-const@2.6.0) (2017-10-03)
+
+
+### Bug Fixes
+
+* **cf-style-const:** UI-72 fixing name collision and missing comma ([493d8df](http://stash.cfops.it:7999/www/cf-ux/commits/493d8df))
+
+
+### Features
+
+* **cf-style-const:** UI-72 ([896d307](http://stash.cfops.it:7999/www/cf-ux/commits/896d307))
+
+
+
+
 <a name="2.5.2"></a>
@@ -7,0 +23,0 @@ ## [2.5.2](https://github.com/cloudflare/cf-ui/compare/cf-style-const@2.5.1...cf-style-const@2.5.2) (2017-09-20)

es/variables.js

@@ -1,2 +0,2 @@
-var _color;
+var _color, _base;
 
@@ -10,3 +10,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var base = {
+var base = (_base = {
   breakpoints: {
@@ -21,2 +21,14 @@ mobile: '13.6em',
   },
+  fontSizes: [10, 12, 14, 16, 20, 24, 32, 48, 64, 80],
+  space: [0, 4, 8, 16, 32, 64, 128, 256],
+  measure: {
+    narrow: '20em',
+    default: '30em',
+    wide: '34em'
+  },
+  lineHeight: {
+    solid: 1,
+    title: 1.25,
+    copy: 1.5
+  },
   gradient: {
@@ -66,66 +78,4 @@ skyDew: 'linear-gradient(left, #76C4E2, #85CBA8)',
   boxShadow: '0 0 20px 0 rgba(136,136,136,0.50)',
-  inputFontSize: '13px',
-  lineHeight: 1.5,
-  inputLineHeight: 1.4,
-  inputHeight: '2.26667rem',
-  em: '1em',
-  rem: '1rem',
-  fontFamily: '"Open Sans", Helvetica, Arial, sans-serif',
-  weightLight: 300,
-  weightNormal: 400,
-  weightSemiBold: 600,
-  weightBold: 700,
-  fontWeight: 400,
-  fontWeightLight: 300,
-  fontColorHeadingCaption: '#888',
-  borderRadius: '2px',
-  arrowSize: '5px',
-  disabledBackground: '#ededed',
-  bodyBackground: '#ebebeb',
-  bodyAccentColor: darken(0.8, '#fff'),
-  bodyOffsetColor: darken(0.53, '#fff'),
-  fontColor: darken(0.8, '#fff'),
-  colorWhite: '#fff',
-  colorBlack: '#000',
-  colorOffsetLight: colorOffsetLight,
-  colorOffsetDark: colorOffsetDark,
-  colorInfo: '#00a9eb',
-  colorSuccess: '#68970f',
-  colorWarning: '#fca520',
-  colorError: '#ff3100',
-  colorMuted: darken(0.5125, '#fff'),
-  colorSmoke: '#f2f2f2',
-  colorBlue: '#2f7bbf',
-  colorBlueLight: lighten(colorOffsetLight, '#2f7bbf'),
-  colorBlueDark: darken(colorOffsetDark, '#2f7bbf'),
-  colorOrange: '#ff7900',
-  colorOrangeLight: lighten(colorOffsetLight, '#ff7900'),
-  colorOrangeDark: darken(colorOffsetDark, '#ff7900'),
-  colorGray: darken(0.5125, '#fff'),
-  colorGrayLight: darken(0.13, '#fff'),
-  colorGrayLightOnboarding: '#F7F7F7',
-  colorGrayDark: darken(0.8, '#fff'),
-  colorGrayBorder: '#666',
-  colorGreen: '#9bca3e',
-  colorGreenLight: lighten(colorOffsetLight, '#9bca3e'),
-  colorGreenDark: darken(colorOffsetDark, '#9bca3e'),
-  colorRed: '#bd2527',
-  colorRedLight: lighten(colorOffsetLight, '#bd2527'),
-  colorRedDark: darken(colorOffsetDark, '#bd2527'),
-  colorYellow: '#ffd24d',
-  colorYellowLight: lighten(colorOffsetLight, '#ffd24d'),
-  colorYellowDark: darken(colorOffsetDark, '#ffd24d'),
-  colorPink: '#d91698',
-  colorPinkLight: lighten(colorOffsetLight, '#d91698'),
-  colorPinkDark: darken(colorOffsetDark, '#d91698'),
-  colorPurple: '#9545e5',
-  colorPurpleLight: lighten(colorOffsetLight, '#d91698'),
-  colorPurpleDark: darken(colorOffsetDark, '#d91698'),
-  colorTwitterBlue: '#00aced',
-  colorFacebookBlue: '#3b5998',
-  colorMainBackground: '#e6e6e6',
-  colorOverlay: 'rgba(0, 0, 0, .7)',
-  colorImportantInformation: 'rgba(64,139,201,0.2)',
-  zIndexMax: 1000
-};
+  inputFontSize: '13px'
+}, _defineProperty(_base, 'lineHeight', 1.5), _defineProperty(_base, 'inputLineHeight', 1.4), _defineProperty(_base, 'inputHeight', '2.26667rem'), _defineProperty(_base, 'em', '1em'), _defineProperty(_base, 'rem', '1rem'), _defineProperty(_base, 'fontFamily', '"Open Sans", Helvetica, Arial, sans-serif'), _defineProperty(_base, 'weightLight', 300), _defineProperty(_base, 'weightNormal', 400), _defineProperty(_base, 'weightSemiBold', 600), _defineProperty(_base, 'weightBold', 700), _defineProperty(_base, 'fontWeight', 400), _defineProperty(_base, 'fontWeightLight', 300), _defineProperty(_base, 'fontColorHeadingCaption', '#888'), _defineProperty(_base, 'borderRadius', '2px'), _defineProperty(_base, 'arrowSize', '5px'), _defineProperty(_base, 'disabledBackground', '#ededed'), _defineProperty(_base, 'bodyBackground', '#ebebeb'), _defineProperty(_base, 'bodyAccentColor', darken(0.8, '#fff')), _defineProperty(_base, 'bodyOffsetColor', darken(0.53, '#fff')), _defineProperty(_base, 'fontColor', darken(0.8, '#fff')), _defineProperty(_base, 'colorWhite', '#fff'), _defineProperty(_base, 'colorBlack', '#000'), _defineProperty(_base, 'colorOffsetLight', colorOffsetLight), _defineProperty(_base, 'colorOffsetDark', colorOffsetDark), _defineProperty(_base, 'colorInfo', '#00a9eb'), _defineProperty(_base, 'colorSuccess', '#68970f'), _defineProperty(_base, 'colorWarning', '#fca520'), _defineProperty(_base, 'colorError', '#ff3100'), _defineProperty(_base, 'colorMuted', darken(0.5125, '#fff')), _defineProperty(_base, 'colorSmoke', '#f2f2f2'), _defineProperty(_base, 'colorBlue', '#2f7bbf'), _defineProperty(_base, 'colorBlueLight', lighten(colorOffsetLight, '#2f7bbf')), _defineProperty(_base, 'colorBlueDark', darken(colorOffsetDark, '#2f7bbf')), _defineProperty(_base, 'colorOrange', '#ff7900'), _defineProperty(_base, 'colorOrangeLight', lighten(colorOffsetLight, '#ff7900')), _defineProperty(_base, 'colorOrangeDark', darken(colorOffsetDark, '#ff7900')), _defineProperty(_base, 'colorGray', darken(0.5125, '#fff')), _defineProperty(_base, 'colorGrayLight', darken(0.13, '#fff')), _defineProperty(_base, 'colorGrayLightOnboarding', '#F7F7F7'), _defineProperty(_base, 'colorGrayDark', darken(0.8, '#fff')), _defineProperty(_base, 'colorGrayBorder', '#666'), _defineProperty(_base, 'colorGreen', '#9bca3e'), _defineProperty(_base, 'colorGreenLight', lighten(colorOffsetLight, '#9bca3e')), _defineProperty(_base, 'colorGreenDark', darken(colorOffsetDark, '#9bca3e')), _defineProperty(_base, 'colorRed', '#bd2527'), _defineProperty(_base, 'colorRedLight', lighten(colorOffsetLight, '#bd2527')), _defineProperty(_base, 'colorRedDark', darken(colorOffsetDark, '#bd2527')), _defineProperty(_base, 'colorYellow', '#ffd24d'), _defineProperty(_base, 'colorYellowLight', lighten(colorOffsetLight, '#ffd24d')), _defineProperty(_base, 'colorYellowDark', darken(colorOffsetDark, '#ffd24d')), _defineProperty(_base, 'colorPink', '#d91698'), _defineProperty(_base, 'colorPinkLight', lighten(colorOffsetLight, '#d91698')), _defineProperty(_base, 'colorPinkDark', darken(colorOffsetDark, '#d91698')), _defineProperty(_base, 'colorPurple', '#9545e5'), _defineProperty(_base, 'colorPurpleLight', lighten(colorOffsetLight, '#d91698')), _defineProperty(_base, 'colorPurpleDark', darken(colorOffsetDark, '#d91698')), _defineProperty(_base, 'colorTwitterBlue', '#00aced'), _defineProperty(_base, 'colorFacebookBlue', '#3b5998'), _defineProperty(_base, 'colorMainBackground', '#e6e6e6'), _defineProperty(_base, 'colorOverlay', 'rgba(0, 0, 0, .7)'), _defineProperty(_base, 'colorImportantInformation', 'rgba(64,139,201,0.2)'), _defineProperty(_base, 'zIndexMax', 1000), _base);
 
@@ -132,0 +82,0 @@ var alias = { colors: base.color };

lib/variables.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var _color;
+var _color, _base;
 
@@ -15,3 +15,3 @@ var _polished = require('polished');
 
-var base = {
+var base = (_base = {
   breakpoints: {
@@ -26,2 +26,14 @@ mobile: '13.6em',
   },
+  fontSizes: [10, 12, 14, 16, 20, 24, 32, 48, 64, 80],
+  space: [0, 4, 8, 16, 32, 64, 128, 256],
+  measure: {
+    narrow: '20em',
+    default: '30em',
+    wide: '34em'
+  },
+  lineHeight: {
+    solid: 1,
+    title: 1.25,
+    copy: 1.5
+  },
   gradient: {
@@ -71,66 +83,4 @@ skyDew: 'linear-gradient(left, #76C4E2, #85CBA8)',
   boxShadow: '0 0 20px 0 rgba(136,136,136,0.50)',
-  inputFontSize: '13px',
-  lineHeight: 1.5,
-  inputLineHeight: 1.4,
-  inputHeight: '2.26667rem',
-  em: '1em',
-  rem: '1rem',
-  fontFamily: '"Open Sans", Helvetica, Arial, sans-serif',
-  weightLight: 300,
-  weightNormal: 400,
-  weightSemiBold: 600,
-  weightBold: 700,
-  fontWeight: 400,
-  fontWeightLight: 300,
-  fontColorHeadingCaption: '#888',
-  borderRadius: '2px',
-  arrowSize: '5px',
-  disabledBackground: '#ededed',
-  bodyBackground: '#ebebeb',
-  bodyAccentColor: (0, _polished.darken)(0.8, '#fff'),
-  bodyOffsetColor: (0, _polished.darken)(0.53, '#fff'),
-  fontColor: (0, _polished.darken)(0.8, '#fff'),
-  colorWhite: '#fff',
-  colorBlack: '#000',
-  colorOffsetLight: colorOffsetLight,
-  colorOffsetDark: colorOffsetDark,
-  colorInfo: '#00a9eb',
-  colorSuccess: '#68970f',
-  colorWarning: '#fca520',
-  colorError: '#ff3100',
-  colorMuted: (0, _polished.darken)(0.5125, '#fff'),
-  colorSmoke: '#f2f2f2',
-  colorBlue: '#2f7bbf',
-  colorBlueLight: (0, _polished.lighten)(colorOffsetLight, '#2f7bbf'),
-  colorBlueDark: (0, _polished.darken)(colorOffsetDark, '#2f7bbf'),
-  colorOrange: '#ff7900',
-  colorOrangeLight: (0, _polished.lighten)(colorOffsetLight, '#ff7900'),
-  colorOrangeDark: (0, _polished.darken)(colorOffsetDark, '#ff7900'),
-  colorGray: (0, _polished.darken)(0.5125, '#fff'),
-  colorGrayLight: (0, _polished.darken)(0.13, '#fff'),
-  colorGrayLightOnboarding: '#F7F7F7',
-  colorGrayDark: (0, _polished.darken)(0.8, '#fff'),
-  colorGrayBorder: '#666',
-  colorGreen: '#9bca3e',
-  colorGreenLight: (0, _polished.lighten)(colorOffsetLight, '#9bca3e'),
-  colorGreenDark: (0, _polished.darken)(colorOffsetDark, '#9bca3e'),
-  colorRed: '#bd2527',
-  colorRedLight: (0, _polished.lighten)(colorOffsetLight, '#bd2527'),
-  colorRedDark: (0, _polished.darken)(colorOffsetDark, '#bd2527'),
-  colorYellow: '#ffd24d',
-  colorYellowLight: (0, _polished.lighten)(colorOffsetLight, '#ffd24d'),
-  colorYellowDark: (0, _polished.darken)(colorOffsetDark, '#ffd24d'),
-  colorPink: '#d91698',
-  colorPinkLight: (0, _polished.lighten)(colorOffsetLight, '#d91698'),
-  colorPinkDark: (0, _polished.darken)(colorOffsetDark, '#d91698'),
-  colorPurple: '#9545e5',
-  colorPurpleLight: (0, _polished.lighten)(colorOffsetLight, '#d91698'),
-  colorPurpleDark: (0, _polished.darken)(colorOffsetDark, '#d91698'),
-  colorTwitterBlue: '#00aced',
-  colorFacebookBlue: '#3b5998',
-  colorMainBackground: '#e6e6e6',
-  colorOverlay: 'rgba(0, 0, 0, .7)',
-  colorImportantInformation: 'rgba(64,139,201,0.2)',
-  zIndexMax: 1000
-};
+  inputFontSize: '13px'
+}, _defineProperty(_base, 'lineHeight', 1.5), _defineProperty(_base, 'inputLineHeight', 1.4), _defineProperty(_base, 'inputHeight', '2.26667rem'), _defineProperty(_base, 'em', '1em'), _defineProperty(_base, 'rem', '1rem'), _defineProperty(_base, 'fontFamily', '"Open Sans", Helvetica, Arial, sans-serif'), _defineProperty(_base, 'weightLight', 300), _defineProperty(_base, 'weightNormal', 400), _defineProperty(_base, 'weightSemiBold', 600), _defineProperty(_base, 'weightBold', 700), _defineProperty(_base, 'fontWeight', 400), _defineProperty(_base, 'fontWeightLight', 300), _defineProperty(_base, 'fontColorHeadingCaption', '#888'), _defineProperty(_base, 'borderRadius', '2px'), _defineProperty(_base, 'arrowSize', '5px'), _defineProperty(_base, 'disabledBackground', '#ededed'), _defineProperty(_base, 'bodyBackground', '#ebebeb'), _defineProperty(_base, 'bodyAccentColor', (0, _polished.darken)(0.8, '#fff')), _defineProperty(_base, 'bodyOffsetColor', (0, _polished.darken)(0.53, '#fff')), _defineProperty(_base, 'fontColor', (0, _polished.darken)(0.8, '#fff')), _defineProperty(_base, 'colorWhite', '#fff'), _defineProperty(_base, 'colorBlack', '#000'), _defineProperty(_base, 'colorOffsetLight', colorOffsetLight), _defineProperty(_base, 'colorOffsetDark', colorOffsetDark), _defineProperty(_base, 'colorInfo', '#00a9eb'), _defineProperty(_base, 'colorSuccess', '#68970f'), _defineProperty(_base, 'colorWarning', '#fca520'), _defineProperty(_base, 'colorError', '#ff3100'), _defineProperty(_base, 'colorMuted', (0, _polished.darken)(0.5125, '#fff')), _defineProperty(_base, 'colorSmoke', '#f2f2f2'), _defineProperty(_base, 'colorBlue', '#2f7bbf'), _defineProperty(_base, 'colorBlueLight', (0, _polished.lighten)(colorOffsetLight, '#2f7bbf')), _defineProperty(_base, 'colorBlueDark', (0, _polished.darken)(colorOffsetDark, '#2f7bbf')), _defineProperty(_base, 'colorOrange', '#ff7900'), _defineProperty(_base, 'colorOrangeLight', (0, _polished.lighten)(colorOffsetLight, '#ff7900')), _defineProperty(_base, 'colorOrangeDark', (0, _polished.darken)(colorOffsetDark, '#ff7900')), _defineProperty(_base, 'colorGray', (0, _polished.darken)(0.5125, '#fff')), _defineProperty(_base, 'colorGrayLight', (0, _polished.darken)(0.13, '#fff')), _defineProperty(_base, 'colorGrayLightOnboarding', '#F7F7F7'), _defineProperty(_base, 'colorGrayDark', (0, _polished.darken)(0.8, '#fff')), _defineProperty(_base, 'colorGrayBorder', '#666'), _defineProperty(_base, 'colorGreen', '#9bca3e'), _defineProperty(_base, 'colorGreenLight', (0, _polished.lighten)(colorOffsetLight, '#9bca3e')), _defineProperty(_base, 'colorGreenDark', (0, _polished.darken)(colorOffsetDark, '#9bca3e')), _defineProperty(_base, 'colorRed', '#bd2527'), _defineProperty(_base, 'colorRedLight', (0, _polished.lighten)(colorOffsetLight, '#bd2527')), _defineProperty(_base, 'colorRedDark', (0, _polished.darken)(colorOffsetDark, '#bd2527')), _defineProperty(_base, 'colorYellow', '#ffd24d'), _defineProperty(_base, 'colorYellowLight', (0, _polished.lighten)(colorOffsetLight, '#ffd24d')), _defineProperty(_base, 'colorYellowDark', (0, _polished.darken)(colorOffsetDark, '#ffd24d')), _defineProperty(_base, 'colorPink', '#d91698'), _defineProperty(_base, 'colorPinkLight', (0, _polished.lighten)(colorOffsetLight, '#d91698')), _defineProperty(_base, 'colorPinkDark', (0, _polished.darken)(colorOffsetDark, '#d91698')), _defineProperty(_base, 'colorPurple', '#9545e5'), _defineProperty(_base, 'colorPurpleLight', (0, _polished.lighten)(colorOffsetLight, '#d91698')), _defineProperty(_base, 'colorPurpleDark', (0, _polished.darken)(colorOffsetDark, '#d91698')), _defineProperty(_base, 'colorTwitterBlue', '#00aced'), _defineProperty(_base, 'colorFacebookBlue', '#3b5998'), _defineProperty(_base, 'colorMainBackground', '#e6e6e6'), _defineProperty(_base, 'colorOverlay', 'rgba(0, 0, 0, .7)'), _defineProperty(_base, 'colorImportantInformation', 'rgba(64,139,201,0.2)'), _defineProperty(_base, 'zIndexMax', 1000), _base);
 
@@ -137,0 +87,0 @@ var alias = { colors: base.color };

package.json

 {
   "name": "cf-style-const",
   "description": "Cloudflare Style Constants",
-  "version": "2.5.3",
+  "version": "2.6.0",
   "main": "lib/index.js",
@@ -6,0 +6,0 @@ "module": "es/index.js",

src/variables.js

@@ -16,2 +16,34 @@ import { lighten, darken } from 'polished';
   },
+  fontSizes: [
+    10,
+    12,
+    14,
+    16,
+    20,
+    24,
+    32,
+    48,
+    64,
+    80
+  ],
+  space: [
+    0,
+    4,
+    8,
+    16,
+    32,
+    64,
+    128,
+    256,
+  ],
+  measure: {
+    narrow: '20em',
+    default: '30em',
+    wide: '34em',
+  },
+  lineHeight: {
+    solid: 1,
+    title: 1.25,
+    copy: 1.5
+  },
   gradient: {
@@ -18,0 +50,0 @@ skyDew: 'linear-gradient(left, #76C4E2, #85CBA8)',

No alert changes

Improved metrics

Total package byte prevSize

21878

23.75%

Worsened metrics

Lines of code

358

-10.28%

No dependency changes