From f96c7e6153d0d0ba982bba744ff22bc011ce0d7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rui=20Sim=C3=A3o?= Date: Fri, 1 Mar 2024 17:25:00 +0000 Subject: [PATCH] feat: changes to existing theme and add input --- .storybook/preview.tsx | 13 ++ packages/components/src/Input/BaseInput.tsx | 40 ++---- .../components/src/Input/Input.stories.tsx | 106 +++++++-------- packages/components/src/Input/Input.style.tsx | 121 +++++++++++------- .../components/src/Text/Em/Em.stories.tsx | 41 ++---- .../components/src/Text/H1/H1.stories.tsx | 41 ++---- packages/components/src/Text/H1/H1.tsx | 2 +- .../components/src/Text/H2/H2.stories.tsx | 41 ++---- packages/components/src/Text/H2/H2.tsx | 2 +- .../components/src/Text/H3/H3.stories.tsx | 41 ++---- packages/components/src/Text/H3/H3.tsx | 2 +- .../components/src/Text/H4/H4.stories.tsx | 41 ++---- packages/components/src/Text/H4/H4.tsx | 2 +- .../components/src/Text/H5/H5.stories.tsx | 41 ++---- packages/components/src/Text/H5/H5.tsx | 2 +- .../components/src/Text/H6/H6.stories.tsx | 39 ++---- packages/components/src/Text/H6/H6.tsx | 2 +- packages/components/src/Text/P/P.stories.tsx | 44 ++----- .../components/src/Text/Span/Span.stories.tsx | 41 ++---- .../src/Text/Strong/Strong.stories.tsx | 41 ++---- .../components/src/Text/Strong/Strong.tsx | 2 +- packages/components/src/Text/style.tsx | 40 +++--- packages/components/src/Text/types.ts | 5 +- packages/components/src/Text/utils.ts | 6 +- packages/components/src/utils/overlay.ts | 2 +- packages/core/themeV2/src/core/colors.ts | 28 ++-- packages/core/themeV2/src/core/icon.ts | 10 +- packages/core/themeV2/src/core/index.ts | 2 + packages/core/themeV2/src/core/space.ts | 2 +- packages/core/themeV2/src/core/transition.ts | 4 +- packages/core/themeV2/src/define.ts | 4 +- packages/core/themeV2/src/index.ts | 18 ++- .../core/themeV2/src/themes/bob/button.ts | 36 +++--- .../core/themeV2/src/themes/bob/colors.ts | 60 +++++---- packages/core/themeV2/src/themes/bob/input.ts | 35 +++-- .../core/themeV2/src/themes/bob/spinner.ts | 2 +- packages/icons/common/src/core/Icon.style.tsx | 4 +- packages/icons/common/src/core/Icon.tsx | 4 +- 38 files changed, 420 insertions(+), 547 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a256e2689..edb124dbb 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -16,6 +16,19 @@ const preview: Preview = { color: /(background|color)$/i, date: /Date$/ } + }, + backgrounds: { + default: 'dark', + values: [ + { + name: 'dark', + value: bobTheme.color('dark') + }, + { + name: 'light', + value: bobTheme.color('light') + } + ] } }, decorators: [ diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx index d81825f9d..f0d039ff7 100644 --- a/packages/components/src/Input/BaseInput.tsx +++ b/packages/components/src/Input/BaseInput.tsx @@ -1,14 +1,6 @@ -import { Sizes, Spacing } from '@interlay/theme'; -import { - FocusEvent, - forwardRef, - InputHTMLAttributes, - ReactNode, - TextareaHTMLAttributes, - useEffect, - useRef, - useState -} from 'react'; +import { Spacing } from '@interlay/theme'; +import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react'; +import { InputSizes } from '@interlay/themev2'; import { ElementTypeProp } from '../utils/types'; import { Field, FieldProps, useFieldProps } from '../Field'; @@ -16,7 +8,7 @@ import { HelperTextProps } from '../HelperText'; import { LabelProps } from '../Label'; import { hasError } from '../utils/input'; -import { Adornment, StyledBaseInput } from './Input.style'; +import { StyledAdornmentBottom, StyledAdornmentLeft, StyledAdornmentRight, StyledBaseInput } from './Input.style'; // TODO: might need to consolidate this later interface HTMLInputProps extends ElementTypeProp { @@ -39,7 +31,7 @@ type Props = { bottomAdornment?: ReactNode; value?: string | ReadonlyArray | number; defaultValue?: string | ReadonlyArray | number; - size?: Sizes; + size?: InputSizes; isInvalid?: boolean; minHeight?: Spacing; onFocus?: (e: FocusEvent) => void; @@ -59,7 +51,7 @@ const BaseInput = forwardRef( startAdornment, endAdornment, bottomAdornment, - size = 'medium', + size = 'md', isInvalid, inputProps, minHeight, @@ -68,27 +60,17 @@ const BaseInput = forwardRef( }, ref ): JSX.Element => { - const endAdornmentRef = useRef(null); - const [endAdornmentWidth, setEndAdornmentWidth] = useState(0); - // FIXME: move this into Field const { fieldProps } = useFieldProps(props); - useEffect(() => { - if (!endAdornmentRef.current || !endAdornment) return; - - setEndAdornmentWidth(endAdornmentRef.current.getBoundingClientRect().width); - }, [endAdornment]); - const error = hasError({ isInvalid, errorMessage: props.errorMessage }); return ( - {startAdornment && {startAdornment}} + {startAdornment && {startAdornment}} ( as={elementType} {...inputProps} /> - {bottomAdornment && {bottomAdornment}} - {endAdornment && ( - - {endAdornment} - - )} + {bottomAdornment && {bottomAdornment}} + {endAdornment && {endAdornment}} ); } diff --git a/packages/components/src/Input/Input.stories.tsx b/packages/components/src/Input/Input.stories.tsx index 0ac6c7be4..ee5b961ac 100644 --- a/packages/components/src/Input/Input.stories.tsx +++ b/packages/components/src/Input/Input.stories.tsx @@ -1,8 +1,8 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; -import { useState } from 'react'; import { InformationCircle } from '@interlay/icons'; -import { Flex, Span } from '..'; +import { Span } from '../Text'; +import { Flex } from '../Flex'; import { Input, InputProps } from '.'; @@ -19,74 +19,66 @@ export default { export const Default: StoryObj = {}; -export const Controlled: StoryFn = (args) => { - const [state, setState] = useState(); +// export const Controlled: StoryFn = (args) => { +// const [state, setState] = useState(); - return setState(e.target.value)} />; -}; +// return setState(e.target.value)} />; +// }; -export const DefaultValue: StoryObj = { - args: { - defaultValue: 'Sesame Street' - } -}; +// export const DefaultValue: StoryObj = { +// args: { +// defaultValue: 'Sesame Street' +// } +// }; -export const WithDescription: StoryObj = { - args: { - description: 'Please enter your street address' - } -}; +// export const WithDescription: StoryObj = { +// args: { +// description: 'Please enter your street address' +// } +// }; -export const WithErrorMessage: StoryObj = { - args: { - errorMessage: 'Please enter your street address' - } -}; +// export const WithErrorMessage: StoryObj = { +// args: { +// errorMessage: 'Please enter your street address' +// } +// }; -export const WithMultipleErrorMessage: StoryObj = { - args: { - errorMessage: ['Please enter your street address', 'Please enter your street address'] - } -}; +// export const WithMultipleErrorMessage: StoryObj = { +// args: { +// errorMessage: ['Please enter your street address', 'Please enter your street address'] +// } +// }; -export const SideLabel: StoryObj = { - args: { - labelPosition: 'side' - } -}; +// export const SideLabel: StoryObj = { +// args: { +// labelPosition: 'side' +// } +// }; -export const MaxWidth: StoryObj = { - args: { - maxWidth: 'spacing28' - } -}; +// export const MaxWidth: StoryObj = { +// args: { +// maxWidth: 'spacing28' +// } +// }; export const Adornments: StoryFn = (args) => ( } /> } label='End Adornment' /> - - $0.00 - - } - label='Bottom Adornment' - /> + $0.00} label='Bottom Adornment' /> ); -export const Sizes: StoryFn = (args) => ( - - - - - -); +// export const Sizes: StoryFn = (args) => ( +// +// +// +// +// +// ); -export const Disabled: StoryObj = { - args: { - isDisabled: true - } -}; +// export const Disabled: StoryObj = { +// args: { +// isDisabled: true +// } +// }; diff --git a/packages/components/src/Input/Input.style.tsx b/packages/components/src/Input/Input.style.tsx index 6976bfcfc..295e2c32c 100644 --- a/packages/components/src/Input/Input.style.tsx +++ b/packages/components/src/Input/Input.style.tsx @@ -1,20 +1,15 @@ -import styled from 'styled-components'; -import { Spacing, theme } from '@interlay/theme'; -import { Placement, Sizes } from '@interlay/theme'; +import styled, { css } from 'styled-components'; +import { Spacing, theme as oldTheme } from '@interlay/theme'; +import { InputSizes } from '@interlay/themev2'; type BaseInputProps = { - $size: Sizes; + $size: InputSizes; $adornments: { bottom: boolean; left: boolean; right: boolean }; $isDisabled: boolean; $hasError: boolean; - $endAdornmentWidth: number; $minHeight?: Spacing; }; -type AdornmentProps = { - $position: Placement; -}; - const StyledBaseInput = styled.input` display: block; width: 100%; @@ -25,57 +20,58 @@ const StyledBaseInput = styled.input` letter-spacing: inherit; background: none; - color: ${(props) => (props.disabled ? theme.input.disabled.color : theme.input.color)}; - font-size: ${({ $size, $adornments }) => - $adornments.bottom ? theme.input.overflow.large.text : theme.input[$size].text}; - line-height: ${theme.lineHeight.base}; - font-weight: ${({ $size }) => theme.input[$size].weight}; text-overflow: ellipsis; - background-color: ${({ $isDisabled }) => ($isDisabled ? theme.input.disabled.bg : theme.input.background)}; + /* background-color: ${({ $isDisabled }) => + $isDisabled ? oldTheme.input.disabled.bg : oldTheme.input.background}; */ overflow: hidden; border: ${(props) => props.$isDisabled - ? theme.input.disabled.border + ? oldTheme.input.disabled.border : props.$hasError - ? theme.input.error.border - : theme.border.default}; - border-radius: ${theme.rounded.lg}; + ? oldTheme.input.error.border + : oldTheme.border.default}; transition: - border-color ${theme.transition.duration.duration150}ms ease-in-out, - box-shadow ${theme.transition.duration.duration150}ms ease-in-out; + border-color ${oldTheme.transition.duration.duration150}ms ease-in-out, + box-shadow ${oldTheme.transition.duration.duration150}ms ease-in-out; - padding-top: ${theme.spacing.spacing2}; - padding-left: ${({ $adornments }) => ($adornments.left ? theme.input.paddingX.md : theme.spacing.spacing2)}; + min-height: ${({ $minHeight, as }) => + $minHeight ? oldTheme.spacing[$minHeight] : as === 'textarea' && oldTheme.spacing.spacing16}; + resize: ${({ as }) => as === 'textarea' && 'vertical'}; - padding-right: ${({ $adornments, $endAdornmentWidth }) => { - if (!$adornments.right) theme.spacing.spacing2; + ${({ theme, $size, $adornments }) => { + const { paddingRight, paddingTop, paddingBottom, paddingLeft, fontSize, ...sizeCss } = theme.input.size[$size]; // MEMO: adding `spacing6` is a hacky solution because // the `endAdornmentWidth` does not update width correctly // after fonts are loaded. Instead of falling back to a more // complex solution, an extra offset does the job of not allowing // the input overlap the adornment. - return `calc(${$endAdornmentWidth}px + ${theme.spacing.spacing6})`; - }}; - padding-bottom: ${({ $adornments }) => ($adornments.bottom ? theme.spacing.spacing6 : theme.spacing.spacing2)}; - - min-height: ${({ $minHeight, as }) => - $minHeight ? theme.spacing[$minHeight] : as === 'textarea' && theme.spacing.spacing16}; - resize: ${({ as }) => as === 'textarea' && 'vertical'}; + //$adornments.bottom ? `calc(${fontSize} - ${theme.spacing('md')})` : + return css` + font-size: ${fontSize}; + padding-top: ${paddingTop}; + padding-left: ${$adornments.left ? theme.spacing('5xl') : paddingLeft}; + padding-right: ${$adornments.right ? theme.spacing('5xl') : paddingRight}; + padding-bottom: ${$adornments.bottom ? theme.spacing('3xl') : paddingBottom}; + + ${sizeCss} + ${theme.input.base} + `; + }} &:hover:not(:disabled):not(:focus) { - border: ${(props) => !props.$isDisabled && !props.$hasError && theme.border.focus}; + border: ${(props) => !props.$isDisabled && !props.$hasError && oldTheme.border.focus}; } &:focus { - border: ${(props) => !props.$isDisabled && theme.border.focus}; - box-shadow: ${(props) => !props.$isDisabled && theme.boxShadow.focus}; + border: ${(props) => !props.$isDisabled && oldTheme.border.focus}; + box-shadow: ${(props) => !props.$isDisabled && oldTheme.boxShadow.focus}; } &::placeholder { - color: ${(props) => (props.disabled ? theme.input.disabled.color : theme.colors.textTertiary)}; + color: ${(props) => (props.disabled ? oldTheme.input.disabled.color : oldTheme.colors.textTertiary)}; } /* MEMO: inspired by https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */ @@ -93,29 +89,64 @@ const StyledBaseInput = styled.input` const BaseInputWrapper = styled.div` position: relative; - color: ${theme.colors.textPrimary}; + color: ${oldTheme.colors.textPrimary}; box-sizing: border-box; display: flex; align-items: center; `; -// TODO: simplify this (put into theme) -const Adornment = styled.div` +type StyledAdornmentProps = { + $size: InputSizes; +}; + +const StyledAdornment = styled.div` display: inline-flex; align-items: center; position: absolute; - top: ${({ $position }) => ($position === 'left' || $position === 'right') && '50%'}; - left: ${({ $position }) => ($position === 'left' || $position === 'bottom') && theme.spacing.spacing2}; - right: ${({ $position }) => $position === 'right' && theme.spacing.spacing2}; - transform: ${({ $position }) => ($position === 'left' || $position === 'right') && 'translateY(-50%)'}; - bottom: ${({ $position }) => $position === 'bottom' && theme.spacing.spacing1}; // to not allow adornment to take more than 50% of the input. We might want to reduce this in the future. max-width: 50%; `; +const StyledAdornmentRight = styled(StyledAdornment)` + top: 50%; + right: ${({ theme }) => theme.spacing('md')}; + transform: translateY(-50%); +`; + +const StyledAdornmentLeft = styled(StyledAdornment)` + top: 50%; + left: ${({ theme }) => theme.spacing('md')}; + transform: translateY(-50%); +`; + +const StyledAdornmentBottom = styled(StyledAdornment)` + left: ${({ theme, $size }) => theme.input.size[$size].paddingLeft}; + bottom: ${({ theme }) => theme.spacing('s')}; +`; + const Wrapper = styled.div` display: flex; flex-direction: column; `; -export { Adornment, BaseInputWrapper, StyledBaseInput, Wrapper }; +// TODO: here +const StyledAddon = styled.div` + display: flex; + align-items: center; + width: auto; +`; + +const StyledLeftAddon = styled(StyledAddon)` + border-top-right-radius: ${({ theme }) => theme.input.base.borderRadius}; + border-bottom-right-radius: ${({ theme }) => theme.input.base.borderRadius}; +`; + +export { + StyledAdornmentRight, + StyledAdornmentLeft, + StyledLeftAddon, + StyledAdornmentBottom, + BaseInputWrapper, + StyledBaseInput, + Wrapper +}; diff --git a/packages/components/src/Text/Em/Em.stories.tsx b/packages/components/src/Text/Em/Em.stories.tsx index fa2dd76a3..c56c21dca 100644 --- a/packages/components/src/Text/Em/Em.stories.tsx +++ b/packages/components/src/Text/Em/Em.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { Em, EmProps } from '.'; +import { EmProps } from './Em'; -const Template: Story = (args) => ; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary emphasis' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary emphasis' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary emphasis' -}; - -export { Primary, Secondary, Tertiary }; +import { Em } from '.'; export default { title: 'Text/Em', - component: Em -} as Meta; + component: Em, + parameters: { + layout: 'centered' + }, + args: { + children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H1/H1.stories.tsx b/packages/components/src/Text/H1/H1.stories.tsx index b75fefecb..b1be54d1f 100644 --- a/packages/components/src/Text/H1/H1.stories.tsx +++ b/packages/components/src/Text/H1/H1.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { H1, H1Props } from '.'; +import { H1Props } from './H1'; -const Template: Story = (args) =>

; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 1' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 1' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 1' -}; - -export { Primary, Secondary, Tertiary }; +import { H1 } from '.'; export default { title: 'Text/H1', - component: H1 -} as Meta; + component: H1, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 1' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H1/H1.tsx b/packages/components/src/Text/H1/H1.tsx index 393d00163..25b7e2059 100644 --- a/packages/components/src/Text/H1/H1.tsx +++ b/packages/components/src/Text/H1/H1.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H1Props = TextProps; const H1 = forwardRef( - ({ size = 'xl5', ...props }, ref): JSX.Element => + ({ size = '7xl', ...props }, ref): JSX.Element => ); H1.displayName = 'H1'; diff --git a/packages/components/src/Text/H2/H2.stories.tsx b/packages/components/src/Text/H2/H2.stories.tsx index d1a1b65a6..17e70d4e5 100644 --- a/packages/components/src/Text/H2/H2.stories.tsx +++ b/packages/components/src/Text/H2/H2.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { H2, H2Props } from '.'; +import { H2Props } from './H2'; -const Template: Story = (args) =>

; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 2' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 2' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 2' -}; - -export { Primary, Secondary, Tertiary }; +import { H2 } from '.'; export default { title: 'Text/H2', - component: H2 -} as Meta; + component: H2, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 2' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H2/H2.tsx b/packages/components/src/Text/H2/H2.tsx index 53c73eb18..e1e1069c6 100644 --- a/packages/components/src/Text/H2/H2.tsx +++ b/packages/components/src/Text/H2/H2.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H2Props = TextProps; const H2 = forwardRef( - ({ size = 'xl4', ...props }, ref): JSX.Element => + ({ size = '6xl', ...props }, ref): JSX.Element => ); H2.displayName = 'H2'; diff --git a/packages/components/src/Text/H3/H3.stories.tsx b/packages/components/src/Text/H3/H3.stories.tsx index 1199a260f..db38dc893 100644 --- a/packages/components/src/Text/H3/H3.stories.tsx +++ b/packages/components/src/Text/H3/H3.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { H3, H3Props } from '.'; +import { H3Props } from './H3'; -const Template: Story = (args) =>

; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 3' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 3' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 3' -}; - -export { Primary, Secondary, Tertiary }; +import { H3 } from '.'; export default { title: 'Text/H3', - component: H3 -} as Meta; + component: H3, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 3' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H3/H3.tsx b/packages/components/src/Text/H3/H3.tsx index e72ef9881..f10c927d2 100644 --- a/packages/components/src/Text/H3/H3.tsx +++ b/packages/components/src/Text/H3/H3.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H3Props = TextProps; const H3 = forwardRef( - ({ size = 'xl3', ...props }, ref): JSX.Element => + ({ size = '5xl', ...props }, ref): JSX.Element => ); H3.displayName = 'H3'; diff --git a/packages/components/src/Text/H4/H4.stories.tsx b/packages/components/src/Text/H4/H4.stories.tsx index 7d9b38a82..9bddfa56f 100644 --- a/packages/components/src/Text/H4/H4.stories.tsx +++ b/packages/components/src/Text/H4/H4.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { H4, H4Props } from '.'; +import { H4Props } from './H4'; -const Template: Story = (args) =>

; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 4' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 4' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 4' -}; - -export { Primary, Secondary, Tertiary }; +import { H4 } from '.'; export default { title: 'Text/H4', - component: H4 -} as Meta; + component: H4, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 4' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H4/H4.tsx b/packages/components/src/Text/H4/H4.tsx index 09cbc6ad6..eda2fdc5c 100644 --- a/packages/components/src/Text/H4/H4.tsx +++ b/packages/components/src/Text/H4/H4.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H4Props = TextProps; const H4 = forwardRef( - ({ size = 'xl2', ...props }, ref): JSX.Element => + ({ size = '4xl', ...props }, ref): JSX.Element => ); H4.displayName = 'H4'; diff --git a/packages/components/src/Text/H5/H5.stories.tsx b/packages/components/src/Text/H5/H5.stories.tsx index 6a1530bbd..6b00e95fd 100644 --- a/packages/components/src/Text/H5/H5.stories.tsx +++ b/packages/components/src/Text/H5/H5.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { H5, H5Props } from '.'; +import { H5Props } from './H5'; -const Template: Story = (args) =>
; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 5' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 5' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 5' -}; - -export { Primary, Secondary, Tertiary }; +import { H5 } from '.'; export default { title: 'Text/H5', - component: H5 -} as Meta; + component: H5, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 5' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H5/H5.tsx b/packages/components/src/Text/H5/H5.tsx index e803b467e..37a856bb7 100644 --- a/packages/components/src/Text/H5/H5.tsx +++ b/packages/components/src/Text/H5/H5.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H5Props = TextProps; const H5 = forwardRef( - ({ size = 'xl', ...props }, ref): JSX.Element => + ({ size = '3xl', ...props }, ref): JSX.Element => ); H5.displayName = 'H5'; diff --git a/packages/components/src/Text/H6/H6.stories.tsx b/packages/components/src/Text/H6/H6.stories.tsx index 3054dee64..ffab8339f 100644 --- a/packages/components/src/Text/H6/H6.stories.tsx +++ b/packages/components/src/Text/H6/H6.stories.tsx @@ -1,35 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import { H6Props } from './H6'; import { H6 } from '.'; -const Template: Story = (args) =>
; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary heading 6' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary heading 6' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary heading 6' -}; - -export { Primary, Secondary, Tertiary }; - export default { title: 'Text/H6', - component: H6 -} as Meta; + component: H6, + parameters: { + layout: 'centered' + }, + args: { + children: 'Heading 6' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/H6/H6.tsx b/packages/components/src/Text/H6/H6.tsx index 9d5fb91b9..47406314a 100644 --- a/packages/components/src/Text/H6/H6.tsx +++ b/packages/components/src/Text/H6/H6.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type H6Props = TextProps; const H6 = forwardRef( - ({ size = 'lg', ...props }, ref): JSX.Element => + ({ size = '2xl', ...props }, ref): JSX.Element => ); H6.displayName = 'H6'; diff --git a/packages/components/src/Text/P/P.stories.tsx b/packages/components/src/Text/P/P.stories.tsx index 1f2203a2c..0c4aabcca 100644 --- a/packages/components/src/Text/P/P.stories.tsx +++ b/packages/components/src/Text/P/P.stories.tsx @@ -1,36 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { P, PProps } from '.'; +import { PProps } from './P'; -const Template: Story = (args) =>

; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus maiores cumque quidem voluptate odit explicabo asperiores itaque tenetur illum iusto possimus quae, sequi natus corporis voluptas cupiditate ipsa eius officiis?' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus maiores cumque quidem voluptate odit explicabo asperiores itaque tenetur illum iusto possimus quae, sequi natus corporis voluptas cupiditate ipsa eius officiis?' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus maiores cumque quidem voluptate odit explicabo asperiores itaque tenetur illum iusto possimus quae, sequi natus corporis voluptas cupiditate ipsa eius officiis?' -}; - -export { Primary, Secondary, Tertiary }; +import { P } from '.'; export default { title: 'Text/P', - component: P -} as Meta; + component: P, + parameters: { + layout: 'centered' + }, + args: { + children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/Span/Span.stories.tsx b/packages/components/src/Text/Span/Span.stories.tsx index 3f4bf6710..97875064c 100644 --- a/packages/components/src/Text/Span/Span.stories.tsx +++ b/packages/components/src/Text/Span/Span.stories.tsx @@ -1,35 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { TextProps } from '../types'; +import { SpanProps } from './Span'; import { Span } from '.'; -const Template: Story = (args) => ; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary span' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary span' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary span' -}; - -export { Primary, Secondary, Tertiary }; - export default { title: 'Text/Span', - component: Span -} as Meta; + component: Span, + parameters: { + layout: 'centered' + }, + args: { + children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/Strong/Strong.stories.tsx b/packages/components/src/Text/Strong/Strong.stories.tsx index 6c983c064..c6bee4270 100644 --- a/packages/components/src/Text/Strong/Strong.stories.tsx +++ b/packages/components/src/Text/Strong/Strong.stories.tsx @@ -1,33 +1,18 @@ -import { Meta, Story } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; -import { Strong, StrongProps } from '.'; +import { StrongProps } from './Strong'; -const Template: Story = (args) => ; - -const Primary = Template.bind({}); - -Primary.args = { - color: 'primary', - children: 'Primary strong' -}; - -const Secondary = Template.bind({}); - -Secondary.args = { - color: 'secondary', - children: 'Secondary strong' -}; - -const Tertiary = Template.bind({}); - -Tertiary.args = { - color: 'tertiary', - children: 'Tertiary strong' -}; - -export { Primary, Secondary, Tertiary }; +import { Strong } from '.'; export default { title: 'Text/Strong', - component: Strong -} as Meta; + component: Strong, + parameters: { + layout: 'centered' + }, + args: { + children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' + } +} as Meta; + +export const Default: StoryObj = {}; diff --git a/packages/components/src/Text/Strong/Strong.tsx b/packages/components/src/Text/Strong/Strong.tsx index 83d22d90d..3e7b0b5f2 100644 --- a/packages/components/src/Text/Strong/Strong.tsx +++ b/packages/components/src/Text/Strong/Strong.tsx @@ -7,7 +7,7 @@ import { mapTextProps } from '../utils'; type StrongProps = TextProps; const Strong = forwardRef( - (props, ref): JSX.Element => + (props, ref): JSX.Element => ); Strong.displayName = 'Strong'; diff --git a/packages/components/src/Text/style.tsx b/packages/components/src/Text/style.tsx index 5d557bb05..cddd50e71 100644 --- a/packages/components/src/Text/style.tsx +++ b/packages/components/src/Text/style.tsx @@ -1,38 +1,32 @@ +import { Color, FontWeight, NormalAlignments, Typography } from '@interlay/themev2'; import styled, { css } from 'styled-components'; -import { theme, resolveColor, resolveHeight } from '../../../core/theme/src'; -import { Colors, FontSize, FontWeight, NormalAlignments } from '../../../core/theme/src'; - type StyledTextProps = { - $color?: Colors; - $size?: FontSize; + $color: Color; + $size: Typography; + $weight: FontWeight; $align?: NormalAlignments; - $weight?: FontWeight; $rows?: number; $noWrap?: boolean; }; const Text = styled.p` - color: ${({ $color }) => resolveColor($color)}; - font-size: ${({ $size }) => $size && theme.text[$size]}; - line-height: ${({ $size }) => resolveHeight($size)}; - font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]}; + ${({ theme, $size }) => theme.typography($size)} + color: ${({ theme, $color }) => theme.color($color)}; + font-weight: ${({ theme, $weight }) => theme.fontWeight($weight)}; text-align: ${({ $align }) => $align}; white-space: ${({ $noWrap }) => $noWrap && 'nowrap'}; - ${({ $rows }) => { - return ( - $rows && - css` - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - line-clamp: ${$rows}; - -webkit-line-clamp: ${$rows}; - -webkit-box-orient: vertical; - ` - ); - }} + ${({ $rows }) => + $rows && + css` + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-clamp: ${$rows}; + -webkit-line-clamp: ${$rows}; + -webkit-box-orient: vertical; + `} `; export { Text }; diff --git a/packages/components/src/Text/types.ts b/packages/components/src/Text/types.ts index c4c8bb9a1..34b36b5de 100644 --- a/packages/components/src/Text/types.ts +++ b/packages/components/src/Text/types.ts @@ -1,9 +1,10 @@ import { HTMLAttributes } from 'react'; +import { Color, FontSize, FontWeight } from '@interlay/themev2'; -import { Colors, FontSize, FontWeight, NormalAlignments } from '../../../core/theme/src'; +import { NormalAlignments } from '../../../core/theme/src'; type Props = { - color?: Colors; + color?: Color; size?: FontSize; align?: NormalAlignments; weight?: FontWeight; diff --git a/packages/components/src/Text/utils.ts b/packages/components/src/Text/utils.ts index acfc68cd3..f501af359 100644 --- a/packages/components/src/Text/utils.ts +++ b/packages/components/src/Text/utils.ts @@ -2,10 +2,10 @@ import { StyledTextProps } from './style'; import { TextProps } from './types'; const mapTextProps = ({ - color, - size, + color = 'light', + size = 'md', + weight = 'normal', align, - weight, rows, noWrap, ...props diff --git a/packages/components/src/utils/overlay.ts b/packages/components/src/utils/overlay.ts index c844d5589..c0ecdb364 100644 --- a/packages/components/src/utils/overlay.ts +++ b/packages/components/src/utils/overlay.ts @@ -26,7 +26,7 @@ const getOverlayPlacementCSS = (placement: Placement): RuleSet => } }; -const overlayCSS = (isOpen: boolean): RuleSet => css` +const overlayCSS = (isOpen: boolean) => css` visibility: ${isOpen ? 'visible' : 'hidden'}; opacity: ${isOpen ? 1 : 0}; pointer-events: ${isOpen ? 'auto' : 'none'}; diff --git a/packages/core/themeV2/src/core/colors.ts b/packages/core/themeV2/src/core/colors.ts index 7aba7ab96..0205b2a08 100644 --- a/packages/core/themeV2/src/core/colors.ts +++ b/packages/core/themeV2/src/core/colors.ts @@ -1,26 +1,18 @@ -type ColorHue = keyof Colors; - type ColorShade = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; -type Colors = { +type PrimaryColors = Record<`primary-${ColorShade}`, string>; + +type GreyColors = Record<`grey-${ColorShade}`, string>; + +type Palette = { light: string; dark: string; - primary: Record; - // secondary: Color; - grey: Record; - // success: Color; - // error: Color; -}; +} & PrimaryColors & + GreyColors; -const color = - (colors: Colors) => - (hue: ColorHue, shade: ColorShade = 500) => { - if (hue === 'light' || hue === 'dark') { - return colors[hue]; - } +type Color = keyof Palette; - return colors[hue][shade]; - }; +const color = (colors: Palette) => (color: Color) => colors[color]; export { color }; -export type { Colors, ColorHue, ColorShade }; +export type { Color, Palette, PrimaryColors, GreyColors }; diff --git a/packages/core/themeV2/src/core/icon.ts b/packages/core/themeV2/src/core/icon.ts index 05de45c48..f819c4caa 100644 --- a/packages/core/themeV2/src/core/icon.ts +++ b/packages/core/themeV2/src/core/icon.ts @@ -2,12 +2,10 @@ import { Styles } from 'styled-components/dist/types'; import { css } from 'styled-components'; import { spacing } from './space'; -import { ColorHue, Colors, color } from './colors'; +import { Color, Palette, color } from './colors'; type IconsSizes = 'xs' | 's' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'; -type IconColors = ColorHue; - const iconSizeBase: Record> = { xs: { height: spacing('xl'), @@ -43,14 +41,14 @@ const iconSizeBase: Record> = { } }; -const icon = (colors: Colors) => { +const icon = (colors: Palette) => { const getColor = color(colors); - return (size: IconsSizes, color: ColorHue = 'light') => css` + return (size: IconsSizes, color: Color = 'light') => css` ${iconSizeBase[size]} color: ${getColor(color)}; `; }; export { icon }; -export type { IconsSizes, IconColors }; +export type { IconsSizes }; diff --git a/packages/core/themeV2/src/core/index.ts b/packages/core/themeV2/src/core/index.ts index 57853e0bb..bb22862b8 100644 --- a/packages/core/themeV2/src/core/index.ts +++ b/packages/core/themeV2/src/core/index.ts @@ -1,3 +1,5 @@ +export type NormalAlignments = 'start' | 'center' | 'end'; + export * from './font-size'; export * from './font-weight'; export * from './line-height'; diff --git a/packages/core/themeV2/src/core/space.ts b/packages/core/themeV2/src/core/space.ts index 2c07fbfbc..302e349ac 100644 --- a/packages/core/themeV2/src/core/space.ts +++ b/packages/core/themeV2/src/core/space.ts @@ -6,7 +6,7 @@ const baseSpacing = { none: 0, xxs: 2, xs: 4, - sm: 6, + s: 6, md: 8, lg: 12, xl: 16, diff --git a/packages/core/themeV2/src/core/transition.ts b/packages/core/themeV2/src/core/transition.ts index eab340588..a8ec99e71 100644 --- a/packages/core/themeV2/src/core/transition.ts +++ b/packages/core/themeV2/src/core/transition.ts @@ -1,5 +1,3 @@ -import { Styles } from 'styled-components/dist/types'; - type TransitionProperty = keyof typeof transitionProprety; const transitionProprety = { @@ -34,7 +32,7 @@ const transition = ( property: TransitionProperty, duration: TransitionDuration, timingFunction?: TransitionTimingFunction -): Styles => ({ +) => ({ transitionProperty: transitionProprety[property], transitionDuration: transitionDuration[duration], transitionTimingFunction: timingFunction && transitionTimingFunction[timingFunction] diff --git a/packages/core/themeV2/src/define.ts b/packages/core/themeV2/src/define.ts index 2b8cd753f..5c43bac89 100644 --- a/packages/core/themeV2/src/define.ts +++ b/packages/core/themeV2/src/define.ts @@ -1,4 +1,4 @@ -import type { Colors } from './core'; +import type { Palette } from './core'; import { fontSize, @@ -39,7 +39,7 @@ const baseTheme = { }; type ThemeParams = { - colors: Colors; + colors: Palette; accordion: AccordionTheme; alert: AlertTheme; button: ButtonTheme; diff --git a/packages/core/themeV2/src/index.ts b/packages/core/themeV2/src/index.ts index 19431a796..42501129b 100644 --- a/packages/core/themeV2/src/index.ts +++ b/packages/core/themeV2/src/index.ts @@ -1,4 +1,18 @@ -export type { ButtonSizes, ButtonVariants, ButtonColors, SpinnerColors, SpinnerSizes } from './components'; -export type { IconsSizes, IconColors } from './core'; +export type { ButtonSizes, ButtonVariants, ButtonColors, SpinnerColors, SpinnerSizes, InputSizes } from './components'; +export type { + IconsSizes, + Color, + BreakPoints, + FontSize, + FontWeight, + LineHeight, + Rounded, + Spacing, + TransitionDuration, + TransitionProperty, + TransitionTimingFunction, + Typography, + NormalAlignments +} from './core'; export { bobTheme } from './themes'; export type { Theme } from './define'; diff --git a/packages/core/themeV2/src/themes/bob/button.ts b/packages/core/themeV2/src/themes/bob/button.ts index 9849f98fd..62d0a125f 100644 --- a/packages/core/themeV2/src/themes/bob/button.ts +++ b/packages/core/themeV2/src/themes/bob/button.ts @@ -47,14 +47,14 @@ const button: ButtonTheme = { color: { default: { base: { - backgroundColor: color('grey', 200), + backgroundColor: color('grey-200'), color: color('light') }, hover: { - backgroundColor: color('grey', 100) + backgroundColor: color('grey-100') }, active: { - backgroundColor: color('grey', 100) + backgroundColor: color('grey-100') }, focus: { boxShadow: '0px 0px 0px 4px #4040403D, 0px 1px 2px 0px #1018280D' @@ -65,14 +65,14 @@ const button: ButtonTheme = { }, primary: { base: { - backgroundColor: color('primary', 300), + backgroundColor: color('primary-300'), color: color('light') }, hover: { - backgroundColor: color('primary', 200) + backgroundColor: color('primary-200') }, active: { - backgroundColor: color('primary', 200) + backgroundColor: color('primary-200') }, focus: { boxShadow: '0px 0px 0px 4px #FA45163D, 0px 1px 2px 0px #1018280D' @@ -87,14 +87,14 @@ const button: ButtonTheme = { color: { default: { base: { - border: `1px solid ${color('grey', 200)}`, + border: `1px solid ${color('grey-200')}`, color: color('light') }, hover: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, active: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, focus: { boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D' @@ -105,14 +105,14 @@ const button: ButtonTheme = { }, primary: { base: { - border: `1px solid ${color('primary', 300)}`, - color: color('primary', 300) + border: `1px solid ${color('primary-300')}`, + color: color('primary-300') }, hover: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, active: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, focus: { boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D' @@ -130,10 +130,10 @@ const button: ButtonTheme = { color: color('light') }, hover: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, active: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, focusVisible: { boxShadow: '0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D' @@ -144,13 +144,13 @@ const button: ButtonTheme = { }, primary: { base: { - color: color('primary', 300) + color: color('primary-300') }, hover: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, active: { - backgroundColor: color('grey', 300) + backgroundColor: color('grey-300') }, focusVisible: { boxShadow: '0px 0px 0px 4px #D92D2040, 0px 1px 2px 0px #1018280D' diff --git a/packages/core/themeV2/src/themes/bob/colors.ts b/packages/core/themeV2/src/themes/bob/colors.ts index 30a1ebe36..1e8aa8a07 100644 --- a/packages/core/themeV2/src/themes/bob/colors.ts +++ b/packages/core/themeV2/src/themes/bob/colors.ts @@ -1,34 +1,38 @@ -import { Colors, color as baseColor } from '../../core'; +import { Palette, GreyColors, PrimaryColors, color as baseColor } from '../../core'; -const colors: Colors = { +const primary: PrimaryColors = { + 'primary-50': '#ffefe6', + 'primary-75': '#ffbf97', + 'primary-100': '#ffa56c', + 'primary-200': '#ff7e2c', + 'primary-300': '#ff6301', + 'primary-400': '#b34501', + 'primary-500': '#9c3c01', + 'primary-600': '#9c3c01', + 'primary-700': '#9c3c01', + 'primary-800': '#9c3c01', + 'primary-900': '#9c3c01' +}; + +const grey: GreyColors = { + 'grey-50': '#e8e8e9', + 'grey-75': '#9fa2a6', + 'grey-100': '#787b81', + 'grey-200': '#3e424b', + 'grey-300': '#161b26', + 'grey-400': '#0f131b', + 'grey-500': '#0d1017', + 'grey-600': '#0d1017', + 'grey-700': '#0d1017', + 'grey-800': '#0d1017', + 'grey-900': '#0d1017' +}; + +const colors: Palette = { light: '#ffffff', dark: '#030303', - primary: { - 50: '#ffefe6', - 75: '#ffbf97', - 100: '#ffa56c', - 200: '#ff7e2c', - 300: '#ff6301', - 400: '#b34501', - 500: '#9c3c01', - 600: '#9c3c01', - 700: '#9c3c01', - 800: '#9c3c01', - 900: '#9c3c01' - }, - grey: { - 50: '#e8e8e9', - 75: '#9fa2a6', - 100: '#787b81', - 200: '#3e424b', - 300: '#161b26', - 400: '#0f131b', - 500: '#0d1017', - 600: '#0d1017', - 700: '#0d1017', - 800: '#0d1017', - 900: '#0d1017' - } + ...primary, + ...grey }; const color = baseColor(colors); diff --git a/packages/core/themeV2/src/themes/bob/input.ts b/packages/core/themeV2/src/themes/bob/input.ts index 63ab118d3..e688bbc1c 100644 --- a/packages/core/themeV2/src/themes/bob/input.ts +++ b/packages/core/themeV2/src/themes/bob/input.ts @@ -1,6 +1,8 @@ -import { fontWeight, spacing, typography } from '../../core'; +import { fontWeight, rounded, spacing, typography } from '../../core'; import { InputTheme } from '../../components'; +import { color } from './colors'; + // color: 'var(--colors-input-text)', // background: 'var(--colors-input-background)', // height: '4rem', @@ -28,7 +30,7 @@ import { InputTheme } from '../../components'; // color: 'var(--colors-error-dark)' // } // }, -// small: { +// sall: { // text: 'var(--text-s)', // maxHeight: 'var(--spacing-8)', // weight: 'var(--font-weights-book)' @@ -55,27 +57,38 @@ import { InputTheme } from '../../components'; // xl: '8rem', // xl2: '9.5rem' // } -typography; const input: InputTheme = { + base: { + color: color('light'), + backgroundColor: color('grey-500'), + border: `1px solid ${color('grey-200')}`, + borderRadius: rounded('md') + }, size: { s: { ...typography('s'), fontWeight: fontWeight('normal'), - paddingLeft: spacing('md'), - paddingRight: spacing('md') + paddingLeft: spacing('s'), + paddingRight: spacing('s'), + paddingTop: spacing('xs'), + paddingBottom: spacing('xs') }, md: { ...typography('md'), fontWeight: fontWeight('medium'), - paddingLeft: spacing('xl'), - paddingRight: spacing('xl') + paddingLeft: spacing('md'), + paddingRight: spacing('md'), + paddingTop: spacing('s'), + paddingBottom: spacing('s') }, lg: { - ...typography('4xl'), - fontWeight: fontWeight('medium'), - paddingLeft: spacing('2xl'), - paddingRight: spacing('2xl') + ...typography('xl'), + fontWeight: fontWeight('semibold'), + paddingLeft: spacing('lg'), + paddingRight: spacing('lg'), + paddingTop: spacing('md'), + paddingBottom: spacing('md') } } }; diff --git a/packages/core/themeV2/src/themes/bob/spinner.ts b/packages/core/themeV2/src/themes/bob/spinner.ts index 44a2d091d..8195c92cf 100644 --- a/packages/core/themeV2/src/themes/bob/spinner.ts +++ b/packages/core/themeV2/src/themes/bob/spinner.ts @@ -39,7 +39,7 @@ const spinner: SpinnerTheme = { borderColor: `${color('light')} ${color('light')} ${'transparent'}` }, primary: { - borderColor: `${color('primary', 300)} ${color('primary', 300)} ${'transparent'}` + borderColor: `${color('primary-300')} ${color('primary-300')} ${'transparent'}` } } }; diff --git a/packages/icons/common/src/core/Icon.style.tsx b/packages/icons/common/src/core/Icon.style.tsx index c1c9d52bd..a21cfa1bd 100644 --- a/packages/icons/common/src/core/Icon.style.tsx +++ b/packages/icons/common/src/core/Icon.style.tsx @@ -1,9 +1,9 @@ -import { IconColors, IconsSizes } from '@interlay/themev2'; +import { Color, IconsSizes } from '@interlay/themev2'; import styled from 'styled-components'; type StyledIconProps = { $size: IconsSizes; - $color: IconColors; + $color: Color; }; const StyledIcon = styled.svg` diff --git a/packages/icons/common/src/core/Icon.tsx b/packages/icons/common/src/core/Icon.tsx index eb416a4a2..1b43e7803 100644 --- a/packages/icons/common/src/core/Icon.tsx +++ b/packages/icons/common/src/core/Icon.tsx @@ -1,11 +1,11 @@ import { SVGAttributes, forwardRef } from 'react'; -import { IconColors, IconsSizes } from '@interlay/themev2'; +import { Color, IconsSizes } from '@interlay/themev2'; import { StyledIcon } from './Icon.style'; type Props = { size?: IconsSizes; - color?: IconColors; + color?: Color; }; type NativeAttrs = Omit, keyof Props>;