diff --git a/src/content/Text.tsx b/src/content/Text.tsx index 22ab7ea4..894eb574 100644 --- a/src/content/Text.tsx +++ b/src/content/Text.tsx @@ -1,9 +1,9 @@ import React, { ElementType, ReactNode, forwardRef, HTMLProps } from 'react'; import { css } from '@emotion/react'; -import { DOMRef } from '../types'; +import { DOMRef, TextColorValue } from '../types'; import { useDOMRef } from '../utils/useDOMRef'; import theme from '../theme'; -import { Color, Size, TextElementType, Weight } from './types'; +import { Size, TextElementType, Weight } from './types'; import { textSizeCSS, textWeightCSS } from './styles'; export interface TextProps extends HTMLProps { @@ -30,7 +30,7 @@ export interface TextProps extends HTMLProps { * The color of the text * @default 'white90' */ - color?: Color; + color?: TextColorValue; /** * The disabled state of the text */ @@ -41,7 +41,7 @@ export interface TextProps extends HTMLProps { className?: string; } -const textCSS = (color: Color) => css` +const textCSS = (color: TextColorValue) => css` /* default to no margin */ margin: 0; color: ${theme.textColors[color]}; diff --git a/src/content/types.ts b/src/content/types.ts index c4ccc23a..a6dca2ab 100644 --- a/src/content/types.ts +++ b/src/content/types.ts @@ -9,8 +9,6 @@ export type Size = export type Weight = 'heavy' | 'normal'; -export type Color = 'white90' | 'white70' | 'white30' | 'inherit'; - export type TextElementType = | 'span' | 'h1' diff --git a/src/index.tsx b/src/index.tsx index d5c53a18..88a1d191 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -32,7 +32,7 @@ export * from './empty'; export * from './contextualhelp'; export * from './counter'; export * from './layout'; -export { theme, designationColors } from './theme'; +export { theme, designationColors, colorPalette } from './theme'; // export interface Props extends HTMLAttributes { // /** custom content, defaults to 'the snozzberries taste like snozzberries' */ // children?: ReactChild; diff --git a/src/theme.ts b/src/theme.ts deleted file mode 100644 index e4e17dd0..00000000 --- a/src/theme.ts +++ /dev/null @@ -1,202 +0,0 @@ -import { lighten, darken } from 'polished'; - -const grayColors = { - gray900: '#181B1F', - gray800: '#1d2126', - gray700: '#23282e', - gray600: '#282e35', - gray500: '#2f353d', - gray400: '#3d434a', - gray300: '#4a5057', - gray200: '#585d64', // disabled text - gray100: '#666b71', -} as const; - -const arizeColors = { - arizePink: '#CA2A76', - arizeGreen: '#48BB95', - arizeBlue: '#227C9D', - arizeLightBlue: '#72D9FF', -}; - -const borderColors = { - grayBorder: '#2e363e', - lightGrayBorder: '#768CA3', - lightGrayHoverBorder: lighten(0.2, '#768CA3'), -}; - -const textColors = { - white90: `rgba(255, 255, 255, 0.9)`, - white70: `rgba(255, 255, 255, 0.7)`, - white50: `rgba(255, 255, 255, 0.5)`, - white30: `rgba(255, 255, 255, 0.3)`, - inherit: 'inherit', -} as const; - -const labelColors = { - white: `rgba(255, 255, 255, 0.9)`, - red: '#F85149', - green: '#7EE787', - orange: '#E69958', - blue: '#72D9FF', - purple: '#ADA1FF', - gray: 'rgba(255, 255, 255, 0.7)', -} as const; - -/** - * Colors to designate specific meaning (e.g. primary / reference) - */ -export const designationColors = { - designationTurquoise: '#9efcfd', - designationPurple: '#ADA1FF', -} as const; - -export const theme = { - colors: { - ...arizeColors, - ...grayColors, - ...borderColors, - statusInfo: '#72D9FF', - statusSuccess: '#7EE787', // RGB independent success color - statusWarning: '#E69958', - statusDanger: '#F85149', - dividerColor: '#32383f', - hoverBgColor: grayColors.gray400, - }, - textColors, - labelColors, - // Add any component specific overrides here - components: { - card: { - backgroundColor: grayColors.gray800, - borderColor: grayColors.gray400, - }, - accordion: { - backgroundColor: grayColors.gray500, - borderColor: grayColors.gray400, - }, - tabs: { - borderColor: grayColors.gray400, - }, - tooltip: { - backgroundColor: '#3C4C5D', - borderColor: lighten(0.3, '#3C4C5D'), - }, - actionTooltip: { - backgroundColor: '#2D3845', - borderColor: '#6F7D8C', - }, - dropdown: { - backgroundColor: grayColors.gray500, - borderColor: grayColors.gray100, - hoverBorderColor: lighten(0.2, grayColors.gray100), - activeBorderColor: arizeColors.arizeLightBlue, - activeBackgroundColor: darken(0.02, grayColors.gray500), - }, - textField: { - borderColor: grayColors.gray100, - hoverBorderColor: lighten(0.2, grayColors.gray100), - activeBorderColor: arizeColors.arizeLightBlue, - backgroundColor: grayColors.gray500, - activeBackgroundColor: darken(0.02, grayColors.gray500), - }, - button: { - primaryBorderColor: '#5BAECC', - primaryHoverBackgroundColor: '#5BAECC', - defaultBorderColor: borderColors.lightGrayBorder, - defaultHoverBackgroundColor: '#64768A', - dangerBorderColor: lighten(0.1, '#F85149'), - dangerHoverBackgroundColor: lighten(0.1, '#F85149'), - successColor: '#3C6E40', - successBorderColor: '#7EE787', - successHoverBackgroundColor: '#7EE787', - }, - modal: { - backgroundColor: grayColors.gray800, - }, - }, - typography: { - weights: { - heavy: 500, - normal: 400, - }, - sizes: { - xxxlarge: { - fontSize: 44, - lineHeight: 52, - }, - xxlarge: { - fontSize: 28, - lineHeight: 36, - }, - xlarge: { - fontSize: 18, - lineHeight: 28, - }, - large: { - fontSize: 16, - lineHeight: 24, - }, - medium: { - fontSize: 14, - lineHeight: 20, - }, - small: { - fontSize: 12, - lineHeight: 16, - }, - xsmall: { - fontSize: 10, - lineHeight: 16, - }, - }, - }, - spacing: { - padding4: 4, - padding8: 8, - padding16: 16, - padding24: 24, - margin4: 4, - margin8: 8, - margin16: 16, - margin24: 24, - popover: { - /** - * The offset is the distance between the source and the popover edge (or the end of the tip, when there is a tip). - */ - offset: 6, - }, - tooltip: { - /** - * The offset is the distance between the source and the tooltip edge (or the end of the tip, when there is a tip). - */ - offset: 6, - }, - outline: { - thin: 2, - }, - }, - rounding: { - rounding4: 4, - }, - animation: { - global: { - /** - * Fallback to 200ms as an animation duration - */ - duration: 200, - }, - }, - /** - * The height of a single line of form input etc. - */ - singleLineHeight: 36, - borderRadius: { - medium: 4, - }, - opacity: { - disabled: 0.6, - }, -}; - -export default theme; diff --git a/src/types/core.ts b/src/types/core.ts index d9e25954..96c23b3c 100644 --- a/src/types/core.ts +++ b/src/types/core.ts @@ -106,3 +106,5 @@ export type ColorValue = | 'gray-800' | 'gray-900' | 'danger'; + +export type TextColorValue = 'white90' | 'white70' | 'white30' | 'inherit'; diff --git a/stories/Colors.stories.tsx b/stories/Colors.stories.tsx index fcb4e0a5..6f6c8787 100644 --- a/stories/Colors.stories.tsx +++ b/stories/Colors.stories.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties } from 'react'; -import { theme, designationColors, Text, Heading } from '../src'; +import { theme, designationColors, colorPalette, Text, Heading } from '../src'; import { Meta, Story } from '@storybook/react'; // @ts-ignore import { withDesign } from 'storybook-addon-designs'; @@ -60,15 +60,17 @@ function Colors() { ))} + z ); }); + const designationColorKeys = Object.keys(designationColors); const designations = (
Designation Colors
    - {Object.keys(designationColors).map((c, i) => ( + {designationColorKeys.map((c, i) => (
    • @@ -77,6 +79,27 @@ function Colors() {
); + const colorGroups = Object.keys(colorPalette); + const colorPaletteEl = ( +
+ Color Palette + {/*
+ {colorGroups.map((colorGroup, i) => { + return ( +
+ {colorGroup} +
    + {colorPalette[colorGroup].map(color => ( +
  • {color}
    • + ))} +
+
+ ); + })} +
*/} +
+ ); + return (
    @@ -86,6 +109,7 @@ function Colors() {

{designations} + {colorPaletteEl} {components}
);