Add showbie-green-200 and yellows (#279)

Author: elidupuis

.changeset/tasty-pandas-share.md

@@ -0,0 +1,5 @@
+---
+'@showbie/backpack-tokens': minor
+---
+
+Add Showbie green-200 and yellows

package.json

@@ -25,6 +25,9 @@
   "prettier": {
     "singleQuote": true
   },
+  "resolutions": {
+    "@babel/compat-data": "^7.9.0"
+  },
   "dependencies": {
     "@changesets/changelog-github": "0.4.0",
     "@changesets/cli": "2.16.0",

packages/backpack-tokens/docs/colour/showbie/README.md

@@ -100,6 +100,60 @@ Used for background colours within the previewer, as well as the async
 notification UI. Also available as a 95% opaque value by using
 `slate-900-95`.
 
+
+## Blue
+
+### Blue 50
+
+<ColorSwatch hue="blue" scale="50" />
+
+A super-super-light blue used in:
+
+- panel background for pending group invites
+- header background for post list headers (e.g. announcements-only,
+  new live-update posts)
+- hover, active, and focused state of text box `.handle`, in
+  slightly transparentized form.
+
+#### Notes:
+
+Hover variant was decided during dev (not spec'd via PSD) so it could
+be easily expressed as SCSS function relative to main definition.
+
+Use in `.handle` states was decided during dev. Use here is not
+closely coupled with the other two contexts. Debatable whether the
+addition of transparency makes sense (default state of handles is
+opaque), and whether hover state is needed, given that the cursor also
+changes on hover.
+
+### Blue 100
+
+<ColorSwatch hue="blue" scale="100" />
+
+Used for background-color of select boxes. Also used in AudioNote
+component controls.
+
+### Blue 200
+
+<ColorSwatch hue="blue" scale="200" />
+
+Used as a background-color.
+
+### Blue 500
+
+<ColorSwatch hue="blue" scale="500" />
+
+### Blue 600
+
+<ColorSwatch hue="blue" scale="600" />
+
+Used for fine lines and small objects in our primary blue (text,
+stroke, icons). Also used in AudioNote component controls.
+
+### Blue 700
+
+<ColorSwatch hue="blue" scale="700" />
+
 ## Red
 
 ### Red 50
@@ -146,6 +200,10 @@ for async notifications.
 
 Background colour for positive notification messages.
 
+### Green 200
+
+<ColorSwatch hue="green" scale="200" />
+
 ### Green 500
 
 <ColorSwatch hue="green" scale="500" />
@@ -157,55 +215,28 @@ Background colour for positive notification messages.
 Used for text or icons against a background colour of `green-100`. Added
 for async notifications.
 
-## Blue
-
-### Blue 50
-
-<ColorSwatch hue="blue" scale="50" />
-
-A super-super-light blue used in:
-
-- panel background for pending group invites
-- header background for post list headers (e.g. announcements-only,
-  new live-update posts)
-- hover, active, and focused state of text box `.handle`, in
-  slightly transparentized form.
-
-#### Notes:
-
-Hover variant was decided during dev (not spec'd via PSD) so it could
-be easily expressed as SCSS function relative to main definition.
-
-Use in `.handle` states was decided during dev. Use here is not
-closely coupled with the other two contexts. Debatable whether the
-addition of transparency makes sense (default state of handles is
-opaque), and whether hover state is needed, given that the cursor also
-changes on hover.
-
-### Blue 100
+## Yellow
 
-<ColorSwatch hue="blue" scale="100" />
+### Yellow 50
 
-Used for background-color of select boxes. Also used in AudioNote
-component controls.
+<ColorSwatch hue="yellow" scale="50" />
 
-### Blue 200
+### Yellow 100
 
-<ColorSwatch hue="blue" scale="200" />
+<ColorSwatch hue="yellow" scale="100" />
 
-Used as a background-color.
+### Yellow 200
 
-### Blue 500
+<ColorSwatch hue="yellow" scale="200" />
 
-<ColorSwatch hue="blue" scale="500" />
+### Yellow 500
 
-### Blue 600
+<ColorSwatch hue="yellow" scale="500" />
 
-<ColorSwatch hue="blue" scale="600" />
+### Yellow 600
 
-Used for fine lines and small objects in our primary blue (text,
-stroke, icons). Also used in AudioNote component controls.
+<ColorSwatch hue="yellow" scale="600" />
 
-### Blue 700
+### Yellow 700
 
-<ColorSwatch hue="blue" scale="700" />
+<ColorSwatch hue="yellow" scale="700" />

packages/backpack-tokens/src/backpack-showbie.ts

@@ -48,23 +48,23 @@ export const colors = {
     900: '',
   },
 
-  // yellow: {
-  //   50: '',
-  //   100: '', // '#faf0a6',
-  //   200: '', // '#f7df68',
-  //   300: '',
-  //   400: '',
-  //   500: '', // '#ddc62a', // aka 'rgb(221, 198, 42)',
-  //   600: '',
-  //   700: '',
-  //   800: '',
-  //   900: '',
-  // },
+  yellow: {
+    50: '#FEFBED', // ally
+    100: '#FCF5D4', // ally
+    200: '#FAECA6', // ally
+    // 300: '',
+    // 400: '',
+    500: '#B16301', // ally
+    600: '#A75D00', // ally
+    // 700: '',
+    // 800: '',
+    // 900: '',
+  },
 
   green: {
     50: '#EBF7EB', // a11y
     100: '#DAF0DA', // a11y
-    200: '',
+    200: '#C1E6C7', // ally
     300: '',
     400: '',
     500: '#158809', // ally