diff --git a/packages/components/src/Avatar/Avatar.css b/packages/components/src/Avatar/Avatar.css index f938a4fb75..f4e0eed44d 100644 --- a/packages/components/src/Avatar/Avatar.css +++ b/packages/components/src/Avatar/Avatar.css @@ -25,7 +25,7 @@ } .isDark { - color: var(--color-white); + color: var(--color-text--reverse); } .initials { diff --git a/packages/components/src/InlineLabel/InlineLabel.css b/packages/components/src/InlineLabel/InlineLabel.css index 440839c83e..842520122e 100644 --- a/packages/components/src/InlineLabel/InlineLabel.css +++ b/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); } diff --git a/packages/design/src/Colors.mdx b/packages/design/src/Colors.mdx index f7622c97ce..a4b46ca657 100644 --- a/packages/design/src/Colors.mdx +++ b/packages/design/src/Colors.mdx @@ -39,6 +39,8 @@ readability. background-color:var(--color-heading)" > +`--color-heading` + Headings have a bold, high-contrast color to cement their hierarchy. #### Text @@ -46,24 +48,57 @@ Headings have a bold, high-contrast color to cement their hierarchy.
+ display:flex;" +> +
+
+ + +`--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
+ display:flex; + box-shadow:var(--shadow-base);" +> +
+
+ -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._
+ display:flex;" +> +
+
+ + +`--color-interactive` | `--color-interactive--hover` The default color used for interactive elements. @@ -88,8 +136,21 @@ The default color used for interactive elements.
+ display:flex;" +> +
+
+ + +`--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.
+ display:flex;" +> +
+
+ + +`--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
- -Use to signify that an interactive element is disabled. + display:flex;" +> +
+
+ -##### Disabled--Secondary +`--color-disabled` | `--color-disabled--secondary` -
+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);" > +`--color-focus` + Use to indicate that an element has been focused (ideally using the `--shadow-focus` property). @@ -172,6 +253,8 @@ sufficient color contrast. > +`--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. > +`--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. > +`--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. > +`--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. > +`--color-inactive` | `--color-inactive--surface` | `--color-inactive--onSurface` + No action required; not part of an active workflow. ### Surfaces @@ -309,6 +401,8 @@ focus. > +`--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);" > +`--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);" > -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);" > +`--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);" > -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)" > +`--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)" > +`--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);" > +`--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);" > +`--color-brand--highlight` + Use to highlight an element in a way that aligns with our website. Use with caution, it’s _bright!_ diff --git a/packages/design/src/colors.css b/packages/design/src/colors.css index fea56d9452..6206f2076e 100644 --- a/packages/design/src/colors.css +++ b/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); diff --git a/packages/docz-tools/src/gatsby-theme-docz/components/Navigation/Navigation.module.css b/packages/docz-tools/src/gatsby-theme-docz/components/Navigation/Navigation.module.css index 1e64d19601..55e54ee7f5 100644 --- a/packages/docz-tools/src/gatsby-theme-docz/components/Navigation/Navigation.module.css +++ b/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 { diff --git a/packages/docz-tools/src/gatsby-theme-docz/components/Sidebar/styles.ts b/packages/docz-tools/src/gatsby-theme-docz/components/Sidebar/styles.ts index e246458aa6..293918e91c 100644 --- a/packages/docz-tools/src/gatsby-theme-docz/components/Sidebar/styles.ts +++ b/packages/docz-tools/src/gatsby-theme-docz/components/Sidebar/styles.ts @@ -1,6 +1,6 @@ export const sidebar = (width: number, sidebarOffset: number) => ({ - bg: "greyBlueDark", + bg: "blue", height: `calc(100vh - ${sidebarOffset}px)`, position: "fixed", top: sidebarOffset, @@ -30,7 +30,7 @@ export const input = { appearance: "none", border: 0, width: "100%", - bg: "blue", + bg: "greyBlueLightest", outline: "none", transition: "box-shadow 300ms", borderRadius: "base", @@ -39,9 +39,9 @@ export const input = { pl: "38px", fontSize: "base", fontFamily: "body", - color: "white", + color: "blue", "&:focus": { - boxShadow: (t: any) => `0 0 3px ${t.colors.greyBlueLightest}`, + boxShadow: (t: any) => `0 0 4px ${t.colors.blueDark}`, }, } as const;