diff --git a/.changeset/quick-timers-decide.md b/.changeset/quick-timers-decide.md deleted file mode 100644 index 83ee9251..00000000 --- a/.changeset/quick-timers-decide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@showbie/backpack-tokens': minor ---- - -Add CSS custom property template diff --git a/BackpackTokens.podspec b/BackpackTokens.podspec index 1fdfae1a..2d0e90d4 100644 --- a/BackpackTokens.podspec +++ b/BackpackTokens.podspec @@ -1,6 +1,6 @@ Pod::Spec.new do |s| s.name = 'BackpackTokens' - s.version = '3.1.1' + s.version = '3.2.0' s.license = { :type => 'ISC', :file => 'packages/backpack-tokens/LICENSE.txt' } s.homepage = 'https://design.showbie.com' s.author = 'Showbie Inc.' diff --git a/packages/backpack-react/package.json b/packages/backpack-react/package.json index 3c527b9e..d6017c2d 100644 --- a/packages/backpack-react/package.json +++ b/packages/backpack-react/package.json @@ -35,7 +35,7 @@ }, "devDependencies": { "@babel/core": "7.11.x", - "@showbie/backpack-tokens": "3.1.1", + "@showbie/backpack-tokens": "3.2.0", "@storybook/addon-a11y": "6.0.21", "@storybook/addon-essentials": "6.0.21", "@storybook/react": "6.0.21", diff --git a/packages/backpack-tokens/CHANGELOG.md b/packages/backpack-tokens/CHANGELOG.md index 74cb2287..fa347863 100644 --- a/packages/backpack-tokens/CHANGELOG.md +++ b/packages/backpack-tokens/CHANGELOG.md @@ -1,6 +1,14 @@ # Change Log -## 3.1.1 — 2022-01-20 +## 3.2.0 — 2022-01-26 + +#### 🎁 Added + +- [#194](https://github.com/showbie/backpack/pull/194) Add CSS custom property template + + Thanks [@elidupuis](https://github.com/elidupuis)! + +### 3.1.1 — 2022-01-20 #### ♻️ Changed diff --git a/packages/backpack-tokens/dist/showbie-color.css b/packages/backpack-tokens/dist/showbie-color.css new file mode 100644 index 00000000..3d9821dc --- /dev/null +++ b/packages/backpack-tokens/dist/showbie-color.css @@ -0,0 +1,49 @@ +/** + * BACKPACK COLOURS + * v3.2.0 + */ + +:root { + + /* Grey */ + --sbe-grey-50: #f8f8f8; + --sbe-grey-100: #f2f3f4; + --sbe-grey-200: #e6e5e7; + --sbe-grey-300: #cccccf; + --sbe-grey-400: #c4c4ca; + --sbe-grey-500: #b9bbbd; + + /* Slate */ + --sbe-slate-600: #8aa4af; + --sbe-slate-900: #152024; + --sbe-slate-900-95: rgba(21,32,36,0.95); + + /* Red */ + --sbe-red-50: #ffeeee; + --sbe-red-100: #fce5e5; + --sbe-red-200: #f9cccc; + --sbe-red-500: #f07f7f; + --sbe-red-600: #eb5f5f; + --sbe-red-700: #e13c3c; + --sbe-red-800: #e10000; + + /* Green */ + --sbe-green-100: #daf0de; + --sbe-green-500: #5dbe6e; + --sbe-green-600: #49af5b; + + /* Blue */ + --sbe-blue-50: #f1faff; + --sbe-blue-100: #dcf3ff; + --sbe-blue-200: #cbeeff; + --sbe-blue-500: #29b1f0; + --sbe-blue-600: #009fe8; + --sbe-blue-700: #007ec2; + + /* Brand */ + --sbe-brand-feide: #068f8d; + --sbe-brand-google: #dc4e41; + --sbe-brand-microsoft: #07a6f0; + --sbe-brand-showbie: #009fe8; + --sbe-brand-socrative: #ff602b; +} diff --git a/packages/backpack-tokens/dist/showbie-color.js b/packages/backpack-tokens/dist/showbie-color.js index c3a024df..2eabc1be 100644 --- a/packages/backpack-tokens/dist/showbie-color.js +++ b/packages/backpack-tokens/dist/showbie-color.js @@ -1,6 +1,6 @@ /** * BACKPACK COLOURS - * v3.1.1 + * v3.2.0 */ var colors = { diff --git a/packages/backpack-tokens/dist/showbie-color.scss b/packages/backpack-tokens/dist/showbie-color.scss index 80c73a56..fddec18d 100644 --- a/packages/backpack-tokens/dist/showbie-color.scss +++ b/packages/backpack-tokens/dist/showbie-color.scss @@ -1,6 +1,6 @@ //// /// BACKPACK COLOURS -/// v3.1.1 +/// v3.2.0 //// /// diff --git a/packages/backpack-tokens/dist/showbie-color.swift b/packages/backpack-tokens/dist/showbie-color.swift index a4095de7..f32878d2 100644 --- a/packages/backpack-tokens/dist/showbie-color.swift +++ b/packages/backpack-tokens/dist/showbie-color.swift @@ -1,6 +1,6 @@ //// /// BACKPACK COLOURS -/// v3.1.1 +/// v3.2.0 //// import UIKit diff --git a/packages/backpack-tokens/dist/socrative-color.css b/packages/backpack-tokens/dist/socrative-color.css new file mode 100644 index 00000000..16cc8aed --- /dev/null +++ b/packages/backpack-tokens/dist/socrative-color.css @@ -0,0 +1,86 @@ +/** + * BACKPACK COLOURS + * v3.2.0 + */ + +:root { + + /* Grey */ + --soc-grey-50: #f5f7f8; + --soc-grey-100: #eff3f5; + --soc-grey-200: #e7edf0; + --soc-grey-300: #dde5ea; + --soc-grey-400: #d3dce1; + --soc-grey-500: #c2cbd2; + --soc-grey-600: #abb4bd; + --soc-grey-700: #8c97a1; + --soc-grey-800: #788490; + + /* Red */ + --soc-red-50: #ffeeee; + --soc-red-100: #fce5e5; + --soc-red-200: #f9cccc; + --soc-red-300: #f5b2b2; + --soc-red-400: #f39999; + --soc-red-500: #f07f7f; + --soc-red-600: #eb5f5f; + --soc-red-700: #e13c3c; + --soc-red-800: #e10000; + --soc-red-900: #4d2828; + + /* Orange */ + --soc-orange-50: #ffece6; + --soc-orange-100: #ffdfd5; + --soc-orange-200: #ffcbb6; + --soc-orange-600: #ff753f; + --soc-orange-700: #ed580f; + --soc-orange-800: #d14600; + + /* Amber */ + --soc-amber-50: #fff7e5; + --soc-amber-100: #fff0ce; + --soc-amber-200: #ffe9b7; + --soc-amber-300: #ffdf98; + --soc-amber-400: #ffd374; + --soc-amber-500: #ffc857; + --soc-amber-600: #efa946; + --soc-amber-700: #e39100; + --soc-amber-900: #3d321f; + + /* Green */ + --soc-green-50: #e7f6ea; + --soc-green-100: #daf0de; + --soc-green-200: #c9e9cf; + --soc-green-300: #a6dcb1; + --soc-green-500: #5dbe6e; + --soc-green-600: #49af5b; + --soc-green-700: #2d953f; + --soc-green-800: #008a19; + --soc-green-900: #284d2f; + + /* Cyan */ + --soc-cyan-50: #e4fbff; + --soc-cyan-100: #d8f8ff; + --soc-cyan-500: #00b5e2; + --soc-cyan-600: #0099c7; + --soc-cyan-700: #0075a3; + + /* Blue */ + --soc-blue-600: #446178; + --soc-blue-800: #2c4458; + --soc-blue-900: #273b4c; + + /* Indigo */ + --soc-indigo-50: #e9eefb; + --soc-indigo-100: #e1e7f7; + --soc-indigo-200: #c3cee4; + --soc-indigo-600: #5971a4; + --soc-indigo-700: #335498; + + /* Brand */ + --soc-brand-feide: #068f8d; + --soc-brand-google: #dc4e41; + --soc-brand-microsoft: #07a6f0; + --soc-brand-showbie: #009fe8; + --soc-brand-socrative: #ff602b; +} diff --git a/packages/backpack-tokens/dist/socrative-color.js b/packages/backpack-tokens/dist/socrative-color.js index db8fb869..950ab96d 100644 --- a/packages/backpack-tokens/dist/socrative-color.js +++ b/packages/backpack-tokens/dist/socrative-color.js @@ -1,6 +1,6 @@ /** * BACKPACK COLOURS - * v3.1.1 + * v3.2.0 */ var colors = { diff --git a/packages/backpack-tokens/dist/socrative-color.less b/packages/backpack-tokens/dist/socrative-color.less index d571cb4e..12fc9f2b 100644 --- a/packages/backpack-tokens/dist/socrative-color.less +++ b/packages/backpack-tokens/dist/socrative-color.less @@ -1,6 +1,6 @@ //// /// BACKPACK COLOURS -/// v3.1.1 +/// v3.2.0 //// /// diff --git a/packages/backpack-tokens/dist/socrative-color.scss b/packages/backpack-tokens/dist/socrative-color.scss index 041eb7fd..ef311d01 100644 --- a/packages/backpack-tokens/dist/socrative-color.scss +++ b/packages/backpack-tokens/dist/socrative-color.scss @@ -1,6 +1,6 @@ //// /// BACKPACK COLOURS -/// v3.1.1 +/// v3.2.0 //// /// diff --git a/packages/backpack-tokens/dist/socrative-color.swift b/packages/backpack-tokens/dist/socrative-color.swift index 200ff08e..b8d4d3e4 100644 --- a/packages/backpack-tokens/dist/socrative-color.swift +++ b/packages/backpack-tokens/dist/socrative-color.swift @@ -1,6 +1,6 @@ //// /// BACKPACK COLOURS -/// v3.1.1 +/// v3.2.0 //// import UIKit diff --git a/packages/backpack-tokens/package.json b/packages/backpack-tokens/package.json index 3dcd8b10..49c5144c 100644 --- a/packages/backpack-tokens/package.json +++ b/packages/backpack-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@showbie/backpack-tokens", - "version": "3.1.1", + "version": "3.2.0", "description": "Showbie Backpack design system tokens", "homepage": "https://design.showbie.com", "repository": {