add new semantic colours and update surface reverse

packages/components/src/Avatar/Avatar.css

@@ -25,7 +25,7 @@
 }
 
 .isDark {
-  color: var(--color-white);
+  color: var(--color-text--reverse);
 }
 
 .initials {

packages/components/src/InlineLabel/InlineLabel.css

@@ -76,7 +76,7 @@
 }
 
 .blueDark {
-  color: var(--color-white);
+  color: var(--color-text--reverse);
   background-color: var(--color-blue--light);
 }
 

packages/design/src/Colors.mdx

@@ -39,31 +39,66 @@ readability.
   background-color:var(--color-heading)"
 ></div>
 
+`--color-heading`
+
 Headings have a bold, high-contrast color to cement their hierarchy.
 
 #### Text
 
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-text)"
-></div>
+  display:flex;"
+>
+  <div
+    style="flex: 1;
+    height:var(--space-extravagant);
+    background-color:var(--color-text)"
+  ></div>
+  <div
+    style="flex: 1;
+    height:var(--space-extravagant);
+    background-color:var(--color-text--secondary)"
+  ></div>
+</div>
+
+`--color-text` | `--color-text--secondary`
 
 A slightly softer color is used for body text for greater readability.
 
-##### Text--Secondary
+Text that is relevant but less important ("secondary") can be lower-contrast to
+suggest its’ reduced importance. This color should only be used when there is
+more important text content already present.
+
+##### Text--Reverse
 
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-text--secondary)"
-></div>
+  display:flex;
+  box-shadow:var(--shadow-base);"
+>
+  <div
+    style="flex: 1;
+    height:var(--space-extravagant);
+    background-color:var(--color-text--reverse)"
+  ></div>
+  <div
+    style="flex: 1;
+    height:var(--space-extravagant);
+    background-color:var(--color-text--reverse--secondary)"
+  ></div>
+</div>
 
-Text that is relevant but less important can be lower-contrast to suggest its’
-reduced importance. This color should only be used when there is more important
-text content already present.
+`--color-text--reverse` | `--color-text--reverse--secondary`
 
-### Interactive
+When used against a [reversed surface](#surface--reverse), reversed text should
+be used to maintain readability.
+
+Reverse text also has a secondary value following the same rules outlined for
+standard secondary text.
+
+### Interactions
 
 Use these colors in buttons and form controls to communicate the presence and
 meaning of interaction. In cases such as [Buttons](/components/button) where the
@@ -78,8 +113,21 @@ currently tied our interactive color to our brand color._
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-interactive)"
-></div>
+  display:flex;"
+>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-interactive)"
+  ></div>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-interactive--hover)"
+  ></div>
+</div>
+
+`--color-interactive` | `--color-interactive--hover`
 
 The default color used for interactive elements.
 
@@ -88,8 +136,21 @@ The default color used for interactive elements.
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-destructive)"
-></div>
+  display:flex;"
+>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-destructive)"
+  ></div>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-destructive--hover)"
+  ></div>
+</div>
+
+`--color-destructive` | `--color-destructive--hover`
 
 Use to signify that an interaction will destroy something in the users’ account
 or workflow.
@@ -99,31 +160,49 @@ or workflow.
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-cancel)"
-></div>
+  display:flex;"
+>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-cancel)"
+  ></div>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-cancel--hover)"
+  ></div>
+</div>
+
+`--color-cancel` | `--color-cancel--hover`
 
-Use to signify that an interaction will cancel or exit a workflow
+Use to signify that an interaction will cancel or exit a workflow.
 
 #### Disabled
 
 <div
   style="width:100%;
   height:var(--space-extravagant);
-  background-color:var(--color-disabled)"
-></div>
-
-Use to signify that an interactive element is disabled.
+  display:flex;"
+>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-disabled)"
+  ></div>
+  <div
+    style="width:100%;
+    height:var(--space-extravagant);
+    background-color:var(--color-disabled--secondary)"
+  ></div>
+</div>
 
-##### Disabled--Secondary
+`--color-disabled` | `--color-disabled--secondary`
 
-<div
-  style="width:100%;
-  height:var(--space-extravagant);
-  background-color:var(--color-disabled--secondary)"
-></div>
+Use to signify that an interactive element is disabled.
 
-Use when a disabled element needs more than one color to be readable in a
-disabled state; for example, a button's background and label colors must be
+Use `secondary` when a disabled element needs more than one color to be readable
+in a disabled state; for example, a button's background and label colors must be
 different.
 
 #### Focus
@@ -135,6 +214,8 @@ different.
   box-shadow:var(--shadow-focus);"
 ></div>
 
+`--color-focus`
+
 Use to indicate that an element has been focused (ideally using the
 `--shadow-focus` property).
 
@@ -172,6 +253,8 @@ sufficient color contrast.
   ></div>
 </div>
 
+`--color-critical` | `--color-critical--surface` | `--color-critical--onSurface`
+
 Action required; user must see this status to be unblocked.
 
 #### Warning
@@ -198,6 +281,8 @@ Action required; user must see this status to be unblocked.
   ></div>
 </div>
 
+`--color-warning` | `--color-warning--surface` | `--color-warning--onSurface`
+
 Action _may_ be required as a consequence of current state.
 
 #### Success
@@ -224,6 +309,8 @@ Action _may_ be required as a consequence of current state.
   ></div>
 </div>
 
+`--color-success` | `--color-success--surface` | `--color-success--onSurface`
+
 No action required; an action has completed successfully.
 
 #### Informative
@@ -250,6 +337,9 @@ No action required; an action has completed successfully.
   ></div>
 </div>
 
+`--color-informative` | `--color-informative--surface` |
+`--color-informative--onSurface`
+
 No action required; but helpful to know about.
 
 #### Inactive
@@ -276,6 +366,8 @@ No action required; but helpful to know about.
   ></div>
 </div>
 
+`--color-inactive` | `--color-inactive--surface` | `--color-inactive--onSurface`
+
 No action required; not part of an active workflow.
 
 ### Surfaces
@@ -309,6 +401,8 @@ focus.
   ></div>
 </div>
 
+`--color-surface` | `--color-surface--hover` | `--color-surface--active`
+
 Most elements in Jobber have a light surface to indicate their nearness to the
 user; if interactive, they have a hover color and an active color to indicate
 state.
@@ -321,6 +415,8 @@ state.
   background-color:var(--color-surface--background);"
 ></div>
 
+`--color-surface--background`
+
 A slightly darker surface gives a receded appearance relative to main surfaces.
 
 #### Surface--Reverse
@@ -331,8 +427,10 @@ A slightly darker surface gives a receded appearance relative to main surfaces.
   background-color:var(--color-surface--reverse);"
 ></div>
 
-When a strong contrast is needed with the rest of the application, a reversed
-surface can be used.
+`--color-surface--reverse`
+
+Use a reversed surface when a strong contrast is needed with the rest of the
+application.
 
 #### Overlay
 
@@ -342,6 +440,8 @@ surface can be used.
   background-color:var(--color-overlay);"
 ></div>
 
+`--color-overlay`
+
 Use to mask an area of the interface to promote focus to a foreground action,
 such as a [Modal](/components/modal)’s appearance. Overlay includes built-in
 opacity values.
@@ -355,9 +455,11 @@ opacity values.
   box-shadow: var(--shadow-base);"
 ></div>
 
-A transparent version of [Surface](#surface), this masks an area of the nterface
-to indicate inactivity (i.e. waiting for updates). Overlay--Dimmed includes
-built-in opacity values.
+`--color-overlay--dimmed`
+
+A transparent version of [Surface](#surface), this masks an area of the
+interface to indicate inactivity (i.e. waiting for updates). Overlay--Dimmed
+includes built-in opacity values.
 
 ### Borders
 
@@ -374,6 +476,8 @@ the subtle maintainers of layout structure. Learn more about borders in our
   border: var(--border-base) solid var(--color-border)"
 ></div>
 
+`--color-border`
+
 Most borders should use `--color-border` for subtle definition.
 
 #### Border--Section
@@ -385,6 +489,8 @@ Most borders should use `--color-border` for subtle definition.
   border: var(--border-base) solid var(--color-border--section)"
 ></div>
 
+`--color-border--section`
+
 Use `--color-border--section` where other bordered content is being further
 sectioned, such as table headers or list sections.
 
@@ -400,6 +506,8 @@ Use these colors to represent the Jobber brand visual language.
   background-color:var(--color-brand);"
 ></div>
 
+`--color-brand`
+
 The primary color associated with our brand, from website to ads to product; AKA
 “Jobber Green”.
 
@@ -411,6 +519,8 @@ The primary color associated with our brand, from website to ads to product; AKA
   background-color:var(--color-brand--highlight);"
 ></div>
 
+`--color-brand--highlight`
+
 Use to highlight an element in a way that aligns with our website. Use with
 caution, it’s _bright!_
 

packages/design/src/colors.css

@@ -40,13 +40,15 @@
   --color-heading: var(--color-blue);
   --color-text: var(--color-greyBlue--dark);
   --color-text--secondary: var(--color-greyBlue);
+  --color-text--reverse: var(--color-white);
+  --color-text--reverse--secondary: var(--color-greyBlue--lighter);
 
   /* Surfaces and Borders */
   --color-surface: var(--color-white);
   --color-surface--hover: var(--color-yellow--lightest);
   --color-surface--active: var(--color-green--lightest);
   --color-surface--background: var(--color-grey--lightest);
-  --color-surface--reverse: var(--color-greyBlue--dark);
+  --color-surface--reverse: var(--color-blue);
 
   --color-border: var(--color-grey--lighter);
   --color-border--section: var(--color-blue);

packages/docz-tools/src/gatsby-theme-docz/components/Navigation/Navigation.module.css

@@ -29,7 +29,7 @@
 
 .label:hover,
 .active {
-  color: var(--color-white);
+  color: var(--color-text--reverse);
 }
 
 /**
@@ -80,7 +80,7 @@
 
 .level2 .pageLabel.active,
 .level2 .pageLabel:hover {
-  color: var(--color-white);
+  color: var(--color-text--reverse);
 }
 
 .level2 .pageLabel.active::before {