@lightspeed/cirrus-tokens - npm Package Compare versions

Comparing version 2.8.0 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,27 @@ # Change Log
 
+<a name="3.0.0"></a>
+# [3.0.0](https://github.com/lightspeedretail/cirrus/compare/@lightspeed/cirrus-tokens@2.8.0...@lightspeed/cirrus-tokens@3.0.0) (2018-10-15)
+
+
+* Colour & Style refresh (#492) ([30bbb53](https://github.com/lightspeedretail/cirrus/commit/30bbb53)), closes [#492](https://github.com/lightspeedretail/cirrus/issues/492)
+
+
+### BREAKING CHANGES
+
+* Styling and colour adjustments for the following components:
+
+- Button 
+- Select
+- Radio
+- Checkbox 
+- Modal Header shadow
+- Card shadow style
+- Alert
+
+Most changes are done at the sass level and are simple colour replacement or removal of properties, namely box shadows.
+
+
+
+
+
 <a name="2.8.0"></a>
@@ -8,0 +33,0 @@ # [2.8.0](https://github.com/lightspeedretail/cirrus/compare/@lightspeed/cirrus-tokens@2.7.1...@lightspeed/cirrus-tokens@2.8.0) (2018-07-05)

package.json

 {
   "name": "@lightspeed/cirrus-tokens",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "Cirrus's Foundation",
@@ -18,3 +18,3 @@ "main": "index.js",
   },
-  "gitHead": "909b9a06fab192b35308411e0abfa21e34160db2"
+  "gitHead": "000e0d73610795331d13163697cb4943d99f2ee6"
 }

README.md

@@ -9,7 +9,7 @@ # Tokens
 
+- [Colors](#colors)
 - [Typography](#typography)
-- [Colors](#colors)
+- [Spacing](#spacing)
 - [Shadows](#shadows)
 - [Radii](#radii)
-- [Spacing](#spacing)
 - [Transitions](#transitions)
@@ -69,7 +69,7 @@
 ```scss
+@import '@lightspeed/cirrus-tokens/partials/_colors.scss';
 @import '@lightspeed/cirrus-tokens/partials/_typography.scss';
-@import '@lightspeed/cirrus-tokens/partials/_colors.scss';
+@import '@lightspeed/cirrus-tokens/partials/_spacing.scss';
 @import '@lightspeed/cirrus-tokens/partials/_shadows.scss';
 @import '@lightspeed/cirrus-tokens/partials/_radii.scss';
-@import '@lightspeed/cirrus-tokens/partials/_spacing.scss';
 @import '@lightspeed/cirrus-tokens/partials/_transitions.scss';
@@ -86,11 +86,11 @@ ```
 
-#### Typography
+---
 
-- Typefaces: `.cr-serif`, `.cr-sans-serif`, `.cr-monospace`
-- Weights: `.cr-regular`, `.cr-bold`
-- Sizes: `.cr-text-{size}`
-- Letter-spacing: `.cr-letter-spacing-{scale}`
 
-#### Colors
+## Colors
+Every color is structured in the following way: We have one base color (_e.g., **blue**_) and each base color has three variants which are scaled on brightness with a numeric system similar to fonts (**blue-100** being the lighter variant and **blue-300** being the darker one*). That leaves space for potential new colors and makes things clear if you have to pick a non-base color for something.
 
+We name our colors by their original name except for our brand colors. It makes things more clear when you are using a brand color which is a good thing to take in mind.
+
+
 - Text colors: `.cr-{color}-{value}`
@@ -100,15 +100,24 @@ - Background colors: `.cr-bg-{color}-{value}`
 
-#### Shadows
+---
 
-- Outer: `.cr-shadow-{scale}`
-- Inner: `.cr-inner-shadow-{scale}`, `.cr-inner-shadow-n{scale}`
-- Border: `.cr-border-shadow`
+## Typography
 
-#### Radii
+#### Our Typeface
 
-- Scale: `.cr-radius-{scale}`
-- Circle: `.cr-radius-circle`
+**Lato** is the font we use as our body and product font. This sans-serif typeface was designed by Łukasz Dziedzic in 2010.
 
-#### Spacing
+So why do we use Lato over all the others? Simply put, we appreciate its rich character and effortless legibility. With Lato, numbers appear crisp and decipherable no matter the size. This is important for us, given our extensive use of digits across our products (prices, orders, etc.).
 
+#### Font scale
+The font scale consists of seven different font sizes. No other sizes are accepted. The `text-xxs` text style should only be used in uppercase because 8 is generally too small for text, by making it uppercase it has the same height as normal `text-xs` text.
+
+- Typefaces: `.cr-serif`, `.cr-sans-serif`, `.cr-monospace`
+- Weights: `.cr-regular`, `.cr-bold`
+- Sizes: `.cr-text-{size}`
+- Letter-spacing: `.cr-letter-spacing-{scale}`
+
+---
+
+## Spacing
+
 We use shorthand notation for spacing to keep things terse. `m` is for margin, `p` is for padding.
@@ -124,2 +133,23 @@
 
+---
+
+## Shadows
+Shadows make things tangible on screen. It gives the illusion of things coming off the screen and not being flat. They will also help to create depth levels, which enables hierarchy.
+
+Inputs become more recognizable when they have an inner shadow in place. Also, to provide more feeling to the pressed states of buttons we need to create the illusion that it is being pushed into the background, an inner shadow will help with that.
+
+
+- Outer: `.cr-shadow-{scale}`
+- Inner: `.cr-inner-shadow-{scale}`, `.cr-inner-shadow-n{scale}
+- Border: `.cr-border-shadow`
+
+---
+## Radii
+Border radius applies to all corners. We use them to make our elements look friendlier and softer to the eye.
+
+- Scale: `.cr-radius-{scale}`
+- Circle: `.cr-radius-circle`
+
+---
+
 #### Transitions
@@ -126,0 +156,0 @@

src/shadows.js

@@ -19,3 +19,3 @@ const { parseToRgb } = require('polished');
   // eslint-disable-next-line no-param-reassign
-  obj[`inner-shadow-${scale}`] = `inset 0 ${pxToRem(y)} ${pxToRem(blur)} rgba(${red}, ${green}, ${blue}, 0.2)`;
+  obj[`inner-shadow-${scale}`] = `inset 0 ${pxToRem(y)} ${pxToRem(blur)} rgba(${red}, ${green}, ${blue}, 0.18)`;
   return obj;
@@ -28,3 +28,3 @@ }, {});
   // eslint-disable-next-line no-param-reassign
-  obj[`inner-shadow-n${scale}`] = `inset 0 ${pxToRem(y)} ${pxToRem(blur)} rgba(${red}, ${green}, ${blue}, 0.2)`;
+  obj[`inner-shadow-n${scale}`] = `inset 0 ${pxToRem(y)} ${pxToRem(blur)} rgba(${red}, ${green}, ${blue}, 0.18)`;
   return obj;
@@ -31,0 +31,0 @@ }, {});

No alert changes

Improved metrics

Total package byte prevSize

50323

increased by9.03%

Number of package files

23

increased by4.55%

Number of lines in readme file

394

increased by8.24%

No dependency changes