From a72701c79c3113496f388148bcd3a10a863cd414 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Thu, 25 May 2023 12:47:43 -0600 Subject: [PATCH] feat: text designation colors, fontStyle --- src/colorPalette.tsx | 27 ++++ src/content/Text.tsx | 35 ++++- src/content/types.ts | 9 +- src/field/FieldColorDesignation.tsx | 3 +- src/theme.tsx | 193 ++++++++++++++++++++++++++++ src/types/core.ts | 4 + stories/Text.stories.tsx | 46 ++++++- 7 files changed, 307 insertions(+), 10 deletions(-) create mode 100644 src/colorPalette.tsx create mode 100644 src/theme.tsx diff --git a/src/colorPalette.tsx b/src/colorPalette.tsx new file mode 100644 index 00000000..8b057e8e --- /dev/null +++ b/src/colorPalette.tsx @@ -0,0 +1,27 @@ +export const purpleColors = { + purple900: ' rgb(192, 143, 252)', + purple800: 'rgb(178, 119, 250)', + purple700: '#AE8DF8', + purple600: '#A17AF7', + purple500: '#9468F6', + purple400: '#8755F4', + purple300: '#7A43F3', + purple200: '#6D30F2', + purple100: '#5F1EF1', +} as const; + +// export const turquoiseColors = { +// turquoise900: '#9efcfd', +// } as const; + +export const grayColors = { + gray900: '#181B1F', + gray800: '#1d2126', + gray700: '#23282e', + gray600: '#282e35', + gray500: '#2f353d', + gray400: '#3d434a', + gray300: '#4a5057', + gray200: '#585d64', // disabled text + gray100: '#666b71', +} as const; diff --git a/src/content/Text.tsx b/src/content/Text.tsx index 22ab7ea4..124ab1d7 100644 --- a/src/content/Text.tsx +++ b/src/content/Text.tsx @@ -1,10 +1,17 @@ -import React, { ElementType, ReactNode, forwardRef, HTMLProps } from 'react'; +import React, { + ElementType, + ReactNode, + forwardRef, + HTMLProps, + CSSProperties, +} from 'react'; import { css } from '@emotion/react'; import { DOMRef } from '../types'; import { useDOMRef } from '../utils/useDOMRef'; -import theme from '../theme'; -import { Color, Size, TextElementType, Weight } from './types'; +import theme, { designationColors } from '../theme'; +import { TextColor, Size, TextElementType, Weight } from './types'; import { textSizeCSS, textWeightCSS } from './styles'; +import { filterDOMProps } from '@react-aria/utils'; export interface TextProps extends HTMLProps { /** @@ -30,7 +37,12 @@ export interface TextProps extends HTMLProps { * The color of the text * @default 'white90' */ - color?: Color; + color?: TextColor; + /** + * The font style + * @default 'normal' + */ + fontStyle?: CSSProperties['fontStyle']; /** * The disabled state of the text */ @@ -41,10 +53,17 @@ export interface TextProps extends HTMLProps { className?: string; } -const textCSS = (color: Color) => css` +const getTextColor = (color: TextColor) => { + if (color.startsWith('designation')) { + // Return the designation color (e.x. the main primary / reference colors) + return designationColors[color]; + } + return theme.textColors[color]; +}; +const textCSS = (color: TextColor) => css` /* default to no margin */ margin: 0; - color: ${theme.textColors[color]}; + color: ${getTextColor(color)}; `; /** @@ -58,6 +77,7 @@ function Text(props: TextProps, ref: DOMRef) { textSize = 'medium', elementType = 'span', weight = 'normal', + fontStyle = 'normal', ...otherProps } = props; const TextTag = elementType as ElementType; @@ -66,11 +86,12 @@ function Text(props: TextProps, ref: DOMRef) { return ( diff --git a/src/content/types.ts b/src/content/types.ts index c4ccc23a..1693594a 100644 --- a/src/content/types.ts +++ b/src/content/types.ts @@ -1,3 +1,5 @@ +import { DesignationColorValue } from '../types'; + export type Size = | 'xxxlarge' | 'xxlarge' @@ -9,7 +11,12 @@ export type Size = export type Weight = 'heavy' | 'normal'; -export type Color = 'white90' | 'white70' | 'white30' | 'inherit'; +export type TextColor = + | 'white90' + | 'white70' + | 'white30' + | 'inherit' + | DesignationColorValue; export type TextElementType = | 'span' diff --git a/src/field/FieldColorDesignation.tsx b/src/field/FieldColorDesignation.tsx index 241b6443..c2fe96bb 100644 --- a/src/field/FieldColorDesignation.tsx +++ b/src/field/FieldColorDesignation.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import React, { ReactNode } from 'react'; import { designationColors } from '../theme'; +import { DesignationColorValue } from '../types'; /** * A decorative wrapper around a field to designate the field's color. @@ -11,7 +12,7 @@ type FieldColorDesignationProps = { /** * The color to use for the field's border */ - color: keyof typeof designationColors; + color: DesignationColorValue; }; export function FieldColorDesignation(props: FieldColorDesignationProps) { diff --git a/src/theme.tsx b/src/theme.tsx new file mode 100644 index 00000000..711d77f7 --- /dev/null +++ b/src/theme.tsx @@ -0,0 +1,193 @@ +import { lighten, darken } from 'polished'; +import * as _colorPalette from './colorPalette'; + +export const colorPalette = _colorPalette; + +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, + ..._colorPalette.grayColors, + ...borderColors, + statusInfo: '#72D9FF', + statusSuccess: '#7EE787', // RGB independent success color + statusWarning: '#E69958', + statusDanger: '#F85149', + dividerColor: '#32383f', + hoverBgColor: _colorPalette.grayColors.gray400, + }, + textColors, + labelColors, + // Add any component specific overrides here + components: { + card: { + backgroundColor: _colorPalette.grayColors.gray800, + borderColor: _colorPalette.grayColors.gray400, + }, + accordion: { + backgroundColor: _colorPalette.grayColors.gray500, + borderColor: _colorPalette.grayColors.gray400, + }, + tabs: { + borderColor: _colorPalette.grayColors.gray400, + }, + tooltip: { + backgroundColor: '#3C4C5D', + borderColor: lighten(0.3, '#3C4C5D'), + }, + actionTooltip: { + backgroundColor: '#2D3845', + borderColor: '#6F7D8C', + }, + dropdown: { + backgroundColor: _colorPalette.grayColors.gray500, + borderColor: _colorPalette.grayColors.gray100, + hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100), + activeBorderColor: arizeColors.arizeLightBlue, + activeBackgroundColor: darken(0.02, _colorPalette.grayColors.gray500), + }, + textField: { + borderColor: _colorPalette.grayColors.gray100, + hoverBorderColor: lighten(0.2, _colorPalette.grayColors.gray100), + activeBorderColor: arizeColors.arizeLightBlue, + backgroundColor: _colorPalette.grayColors.gray500, + activeBackgroundColor: darken(0.02, _colorPalette.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: _colorPalette.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..e611e80e 100644 --- a/src/types/core.ts +++ b/src/types/core.ts @@ -106,3 +106,7 @@ export type ColorValue = | 'gray-800' | 'gray-900' | 'danger'; + +export type DesignationColorValue = + | 'designationPurple' + | 'designationTurquoise'; diff --git a/stories/Text.stories.tsx b/stories/Text.stories.tsx index 1abdf2c6..c4e79b12 100644 --- a/stories/Text.stories.tsx +++ b/stories/Text.stories.tsx @@ -24,6 +24,14 @@ const sizes: TextProps['textSize'][] = [ 'xxlarge', 'xxxlarge', ]; + +const colors: TextProps['color'][] = [ + 'white30', + 'white70', + 'white90', + 'designationPurple', + 'designationTurquoise', +]; /** * A gallery of all the variants */ @@ -32,7 +40,7 @@ export const Gallery = () => {

{ ); })}

+

+ {colors.map(color => { + return ( + + {`I will not waste chalk`} + + ); + })} +

+

+ {colors.map(color => { + return ( + + {`I will not waste chalk`} + + ); + })} +

); };