Extended palette (#1695)

* Initial take at exposing "highlight" colors
* Add additional accent colors
* Update color swatch stories
* Removed actionlist aliases

Author: Luke Bowerman

packages/components/CHANGELOG.md

@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `useTooltip` no longer supports `surfaceStyles` property
 - `Heading` & `Paragraph`, `Span`, `Text` no longer support `variant` (use `color` instead)
+- `ActionList` aliases to `DataTable`
 
 ## [0.9.25]
 

packages/components/src/DataTable/index.ts

@@ -24,23 +24,7 @@
 
  */
 
-import { DataTable } from './DataTable'
-import { DataTableAction, DataTableItem } from './Item'
-import { DataTableCell, DataTableColumns } from './Column'
-
 export * from './DataTable'
 export * from './Column'
 export * from './Item'
 export * from './utils'
-
-/**
- * Legacy exports
- * NOTE: These will be removed in the not-too-distant future
- */
-export const ActionList = DataTable
-export const ActionListItem = DataTableItem
-export const ActionListItemAction = DataTableAction
-export const ActionListItemColumn = DataTableCell
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ActionListColumns extends DataTableColumns {}

packages/design-tokens/CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - `AliasColor` to support color aliases previously used via `variant` property
+- Added colors: `secondary` & `subdued`
+- Added colors: `informAccent`, `positiveAccent`, & `warnAccent`
 
 ## [0.9.20]
 

packages/design-tokens/snapshots/Colors/All Colors-snap.png

@@ -24,35 +24,78 @@
 
  */
 
-import React, { useContext } from 'react'
-import styled, { ThemeContext } from 'styled-components'
+import React, { Fragment, ReactNode } from 'react'
+import styled from 'styled-components'
 import sortBy from 'lodash/sortBy'
+
 /**
  * IMPORTANT: It is only acceptable to reach across package boundaries like this
  * because this is a Story and will never be run in a "production" environment.
  *
  * In this case we don't want to create a dependency loop between @looker/design-tokens
  * and @looker/components
  */
-import { Code, Flex, Heading } from '../../components/src'
+import { Tooltip } from '../../components/src'
+import { theme } from './theme'
+
+const CELL_SIZE = '3rem'
+
+const sortedColorsArray = sortBy(Object.entries(theme.colors), 0)
 
-const CELL_SIZE = '6rem'
+export const AllColors = () => {
+  const colors = sortedColorsArray.map(([name, color]) => {
+    return { color, label: `${name} - ${color}` }
+  })
 
-export const Complete = () => (
-  <GridLayout>
-    <ColorSlots />
-  </GridLayout>
-)
+  return <MiniSwatches>{colors}</MiniSwatches>
+}
+
+export const GroupedByOutput = () => {
+  const grouped: { [key: string]: string[] } = {}
+
+  sortedColorsArray.forEach(([name, color]) => {
+    if (grouped[color]) {
+      grouped[color] = [...grouped[color], name]
+    } else {
+      grouped[String(color)] = [name]
+    }
+  })
+
+  const colors = Object.entries(grouped).map(([color, entries]) => {
+    const labels = entries.map((label, index) => (
+      <Fragment key={index}>
+        {label} <br />
+      </Fragment>
+    ))
+
+    return {
+      color,
+      label: (
+        <>
+          <strong>{color}</strong>
+          <br />
+          {labels}
+        </>
+      ),
+    }
+  })
+
+  return <MiniSwatches>{colors}</MiniSwatches>
+}
+
+GroupedByOutput.parameters = {
+  storyshots: { disable: true },
+}
 
 export default {
-  component: Complete,
   title: 'Colors',
 }
 
 const GridLayout = styled.div`
   display: grid;
   grid-gap: 1rem;
   grid-template-columns: repeat(auto-fill, minmax(${CELL_SIZE}, 1fr));
+  padding: 1rem;
 `
 
 /**
@@ -74,31 +117,16 @@ const CircleSwatch = styled.div<SwatchProps>`
   width: 3rem;
 `
 
-const ColorSlots = () => {
-  const { colors } = useContext(ThemeContext)
-
-  const colorSwatches = sortBy(Object.entries(colors), 0).map(
-    ([name, color]) => (
-      <Flex
-        flexDirection="column"
-        key={name}
-        alignItems="center"
-        width={CELL_SIZE}
-      >
-        <CircleSwatch color={color}></CircleSwatch>
-        <Heading
-          truncate
-          fontSize="small"
-          pt="xsmall"
-          fontWeight="semiBold"
-          fontFamily="body"
-        >
-          {name}
-        </Heading>
-        <Code fontSize="xsmall">{color.toUpperCase()}</Code>
-      </Flex>
-    )
-  )
-
-  return <>{colorSwatches}</>
+interface MiniSwatchesProps {
+  children: { color: string; label: ReactNode }[]
+}
+
+const MiniSwatches = ({ children }: MiniSwatchesProps) => {
+  const colorSwatches = children.map(({ label, color }, index) => (
+    <Tooltip key={index} content={label} textAlign="left">
+      <CircleSwatch color={color}></CircleSwatch>
+    </Tooltip>
+  ))
+
+  return <GridLayout>{colorSwatches}</GridLayout>
 }

packages/design-tokens/snapshots/Colors/Complete-snap.png

@@ -24,7 +24,22 @@
 
  */
 
-export interface DerivativeColors {
+interface HighlightColors {
+  /**
+   * Used to highlight / accent  content
+   */
+  informAccent: string
+  /**
+   * Used to highlight / accent content
+   */
+  positiveAccent: string
+  /**
+   * Used to highlight / accent  content
+   */
+  warnAccent: string
+}
+
+export interface DerivativeColors extends HighlightColors {
   /**
    * Default input background
    * Text input, select input

packages/design-tokens/src/colors.story.tsx

@@ -25,19 +25,29 @@
  */
 
 import { DerivativeColors, SpecifiableColors } from '../../system'
-import { generateInteractive } from './stateful'
-import { mixColors, textBlends } from './blend'
+import { accentBlendScale, generateInteractive } from './stateful'
+import { mixColors, mixScaledColors, textBlends } from './blend'
 
 export const generateDerivativeColors = ({
+  background,
+  inform,
   link,
+  positive,
   text,
-  background,
+  warn,
 }: SpecifiableColors): DerivativeColors => {
+  const accents = {
+    informAccent: mixScaledColors(accentBlendScale, inform, background),
+    positiveAccent: mixScaledColors(accentBlendScale, positive, background),
+    warnAccent: mixScaledColors(accentBlendScale, warn, background),
+  }
+
   return {
     field: background,
     inverse: text,
     inverseOn: background,
     linkInteractive: generateInteractive(link),
     neutral: mixColors(textBlends[1], text, background),
+    ...accents,
   }
 }

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

@@ -39,13 +39,15 @@ import { mixScaledColors } from './blend'
 export const generateInteractive = (color: string) => lighten(0.04, color)
 export const generatePressed = (color: string) => darken(0.07, color)
 
+export const accentBlendScale = 16
+
 const generateStatefulColor = (
   background: string,
   color: string
 ): StatefulColorChoices => {
   return {
     subtle: mixScaledColors(10, color, background),
-    accent: mixScaledColors(16, color, background),
+    accent: mixScaledColors(accentBlendScale, color, background),
     focus: mixScaledColors(60, color, background),
     interactive: generateInteractive(color),
     pressed: generatePressed(color),