Dynamic theme generation (#1012)

- ComponentsProvider now accepts coreColors for dynamic theme specification
- NOTE: If explicit key color is not specified we'll simply pass through the fallback values. This means that existing users of @looker/components will see no effective changes when this feature is added unless they use the coreColors prop on ComponentsProvider

Author: Luke Bowerman

.vscode/settings.json

@@ -41,7 +41,6 @@
     "xxxxlarge"
   ],
   "prettier.arrowParens": "always",
-  "extensions.ignoreRecommendations": true,
   "files.autoSave": "off",
   "debug.allowBreakpointsEverywhere": true
 }

CHANGELOG.md

@@ -5,45 +5,48 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [UNRELEASED]
+## [0.8.0]
+
+### NOTABLE
+
+- `ComponentsProvider` now supports `coreColors` attribute for dynamic theme generation
+- `theme.colors.palette` no longer used internally except in very limited (and soon-to-be-deprecated) cases.
+- `theme.colors` shape has been significantly refactored (documentation updates to follow)
+- `Tooltip` now uses `keyAccent` for link color
 
 ### Added
 
-- update InputColor to have an empty `Swatch`
-- `Status` component
-- `Tree`, `TreeItem` components
-  - Includes docs and test suite
 - `ActionListItem` accepts `actionsButtonLabel` prop to help with testing
 - `ComboboxList` and `ComboboxOption` now both support a custom `indicator`
   - `Select` and `SelectMulti` also support `indicator` at both the component and option level
+- `InputColor` now supports a "null" state
+- `Status` component
+- `Tree`, `TreeItem` components
+  - Includes docs and test suite
 - Test helper functions for `Combobox` component using react-testing-library
 
 ### Changed
 
-- `theme.colors.palette` no longer used internally except in very limited (and soon-to-be-deprecated) cases.
-- `Button*` font sizes updated to match design specifications
-- `theme.colors` shape has been significantly refactored (documentation updates to follow)
+- `Badge` - `default` intent is now `key`
 - `Banner` is now `MessageBar`
   - Major style changes to be more Material-esque
   - `warning` is now `warn`
   - `error` is now `critical`
   - `info` is now `inform`
   - `confirmation` is now `positive`
-- ``
-- `Badge` - `default` intent is now `key`
+- `Button*` font sizes updated to match design specifications
 - `CheckboxGroup` and `RadioGroup` `name` is now optional
-- Updated `LookerLogo` and `LogoRings` to match new branding
-- `Tooltip` now uses `keyAccent` for link color
+- `TextArea` now supports min-height
+- Icons: `LookerLogo` and `LogoRings` updated to match new branding
 
 ### Fixed
 
-- update `TextArea` to have min-height as `defaultProps`
+- `CheckboxGroup` and `RadioGroup` now reflect changes to `value` prop
+- `InlineInputText` no longer adds a special character to prevent vertical-collapse when empty
+- `InlineInputText` `simple` option _actually_ removes border-bottom
 - `InlineInputText` & `InlineInputTextArea` inherit color and text-alignment from parent
-- `InlineInputText` prop simple removes border-bottom
 - `Popover` positioning when placement is "top" and the height changes
   - `usePopper` reinstate the `adaptive` option of `computeStyles`
-- `CheckboxGroup` and `RadioGroup` now reflect changes to `value` prop
-- `InlineInputText` no longer adds a special character to prevent vertical-collapse when empty
 
 ### Removed
 

packages/components/src/Text/text_variant.ts

@@ -49,7 +49,7 @@ export const textVariant = variant({
       color: 'text1',
     },
     inverted: {
-      color: 'onInverse',
+      color: 'inverseOn',
     },
     positive: {
       color: 'positive',

packages/components/src/Tooltip/Tooltip.tsx

@@ -217,7 +217,7 @@ export function useTooltip({
           backgroundColor="inverse"
           borderRadius="medium"
           boxShadow={3}
-          color="onInverse"
+          color="inverseOn"
           {...surfaceStyles}
         >
           <TooltipContent

packages/design-tokens/src/index.ts

@@ -33,6 +33,7 @@ export * from './GlobalStyle'
 export { palette }
 export { prismTheme } from './prismTheme'
 
-// Useful external helpers
+// Useful external utilities
 export * from './customizeable_attributes'
-export * from './helpers/animations'
+export * from './utils/animations'
+export { generateThemeFromCoreColors } from './utils/theme'

packages/design-tokens/src/system/color/index.ts

@@ -25,10 +25,8 @@
  */
 
 import { BlendColors } from './blends'
-import { IntentColors, SurfaceColors } from './specifiable'
 import { StatefulColors } from './stateful'
-
-export type { ColorProps } from 'styled-system'
+import { IntentColors, SurfaceColors } from './specifiable'
 
 export interface CoreColors {
   /**
@@ -61,4 +59,10 @@ export interface Colors
     BlendColors,
     StatefulColors {}
 
-export { StatefulColor } from './stateful'
+export type { BlendColors } from './blends'
+export type {
+  StatefulColor,
+  StatefulColors,
+  StatefulColorChoices,
+} from './stateful'
+export type { ColorProps } from 'styled-system'

packages/design-tokens/src/system/color/specifiable.ts

@@ -42,7 +42,7 @@ export interface SurfaceColors {
    * Used for: Icons in main nav, Text on primary buttons
    * @default white
    */
-  onInverse: string
+  inverseOn: string
 }
 
 export interface IntentColors {

packages/design-tokens/src/system/color/stateful.ts

@@ -29,7 +29,7 @@ export type StatefulColor = 'key' | 'critical' | 'neutral'
 export interface StatefulColorChoices {
   subtle: string
   accent: string
-  main: string
+  focus: string
   interactive: string
   pressed: string
   text: string
@@ -44,6 +44,7 @@ export interface StatefulColors
 interface CriticalStatefulColors {
   criticalSubtle: string
   criticalAccent: string
+  criticalFocus: string
   criticalInteractive: string
   criticalPressed: string
   criticalText: string
@@ -53,6 +54,7 @@ interface CriticalStatefulColors {
 interface NeutralStatefulColors {
   neutralSubtle: string
   neutralAccent: string
+  neutralFocus: string
   neutralInteractive: string
   neutralPressed: string
   neutralText: string

packages/design-tokens/src/theme.ts

@@ -58,7 +58,7 @@ import {
 } from './tokens'
 import * as palette from './tokens/color/palette'
 
-interface ThemeColors extends Colors {
+export interface ThemeColors extends Colors {
   palette: Palette
 }
 

packages/design-tokens/src/tokens/color/fallbacks.ts

@@ -45,6 +45,7 @@ import {
   purple600,
   red000,
   red100,
+  red300,
   red400,
   red700,
   red600,
@@ -79,13 +80,15 @@ export const fallbackStateful: StatefulColors = {
 
   criticalSubtle: red000,
   criticalAccent: red100,
+  criticalFocus: red300,
   criticalInteractive: red600,
   criticalPressed: red700,
   criticalText: white,
   criticalBorder: red400,
 
   neutralSubtle: charcoal000,
   neutralAccent: charcoal100,
+  neutralFocus: charcoal300,
   neutralInteractive: charcoal500,
   neutralPressed: charcoal600,
   neutralText: white,