From c5ca5f161de345cd4756897fe1f87597b7a8c4e2 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Tue, 2 Jul 2024 09:50:59 +0100 Subject: [PATCH 01/18] update changes --- package.json | 1 + src/blocks/dropdown/Dropdown.tsx | 57 ++++++++ src/blocks/dropdown/Dropdown.types.ts | 24 ++++ src/blocks/dropdown/Dropdown.utils.tsx | 35 +++++ src/blocks/dropdown/index.ts | 3 + src/blocks/index.ts | 2 + src/blocks/menu/Menu.constants.ts | 10 ++ src/blocks/menu/Menu.tsx | 50 +++++++ src/blocks/menu/Menu.types.ts | 37 ++++++ src/blocks/menu/MenuItem.tsx | 68 ++++++++++ src/blocks/menu/index.ts | 4 + .../components/FeaturedChannelsListItem.tsx | 43 +++++- yarn.lock | 124 ++++++++++++++++++ 13 files changed, 457 insertions(+), 1 deletion(-) create mode 100644 src/blocks/dropdown/Dropdown.tsx create mode 100644 src/blocks/dropdown/Dropdown.types.ts create mode 100644 src/blocks/dropdown/Dropdown.utils.tsx create mode 100644 src/blocks/dropdown/index.ts create mode 100644 src/blocks/menu/Menu.constants.ts create mode 100644 src/blocks/menu/Menu.tsx create mode 100644 src/blocks/menu/Menu.types.ts create mode 100644 src/blocks/menu/MenuItem.tsx create mode 100644 src/blocks/menu/index.ts diff --git a/package.json b/package.json index 918fc6257f..0da062e186 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@pushprotocol/restapi": "1.7.20", "@pushprotocol/socket": "0.5.3", "@pushprotocol/uiweb": "1.4.1", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-tooltip": "^1.1.1", "@reach/tabs": "^0.18.0", "@reduxjs/toolkit": "^1.7.1", diff --git a/src/blocks/dropdown/Dropdown.tsx b/src/blocks/dropdown/Dropdown.tsx new file mode 100644 index 0000000000..ff478598ce --- /dev/null +++ b/src/blocks/dropdown/Dropdown.tsx @@ -0,0 +1,57 @@ +import { FC, forwardRef, useState } from 'react'; +import styled from 'styled-components'; +import * as RadixDropdown from '@radix-ui/react-dropdown-menu'; + +import { DropdownProps } from './Dropdown.types'; +import { getDropdownPositionalCSS } from './Dropdown.utils'; + +const RadixDropdownContent = styled(RadixDropdown.Content)` + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const Dropdown: FC = forwardRef( + ({ overlay, trigger = 'click', children, dropdownPosition = 'bottom', ...props }, ref) => { + const [isOpen, setIsOpen] = useState(false); + + const showDropdown = () => setIsOpen(true); + const hideDropdown = () => setIsOpen(false); + const toggleDropdown = () => setIsOpen(!isOpen); + + const { ...cssProps } = getDropdownPositionalCSS(dropdownPosition); + + return ( + + trigger == 'hover' && showDropdown()} + onMouseLeave={() => trigger == 'hover' && hideDropdown()} + onClick={() => trigger == 'click' && toggleDropdown} + > + {children && typeof children === 'function' ? children({ isOpen }) : children} + + + trigger == 'hover' && showDropdown()} + onMouseLeave={() => trigger == 'hover' && hideDropdown()} + onPointerDownOutside={() => hideDropdown()} + {...cssProps} + {...props} + > + {overlay} + + + + ); + } +); + +Dropdown.displayName = 'Dropdown'; + +export { Dropdown }; diff --git a/src/blocks/dropdown/Dropdown.types.ts b/src/blocks/dropdown/Dropdown.types.ts new file mode 100644 index 0000000000..390e9c3949 --- /dev/null +++ b/src/blocks/dropdown/Dropdown.types.ts @@ -0,0 +1,24 @@ +import { ReactElement, ReactNode } from 'react'; +import { FlattenSimpleInterpolation } from 'styled-components'; +import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; + +export type DropdownPosition = 'bottom' | 'left' | 'top' | 'right'; + +export type DropdownTrigger = 'hover' | 'click'; + +export type DropdownComponentProps = { + // This will be content upon clicking on which the dropdown overlay will open + children?: ((props: { isOpen: boolean }) => ReactElement) | ReactNode | any; + // children?: ((props: { isOpen: boolean }) => ReactElement) | ReactElement | ReactNode | any; + // children?: ReactNode; + // position of menu + dropdownPosition?: DropdownPosition; + // on which action to open the dropdown + trigger?: DropdownTrigger; + // This is used for custom css instead of style prop, check Box/Text component + css?: FlattenSimpleInterpolation; + // This will be the contents of the dropdown overlay + overlay?: ReactNode; +}; + +export type DropdownProps = DropdownComponentProps & DropdownMenuContentProps; diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx new file mode 100644 index 0000000000..e726e923f2 --- /dev/null +++ b/src/blocks/dropdown/Dropdown.utils.tsx @@ -0,0 +1,35 @@ +import { DropdownPosition } from './Dropdown.types'; +import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; + +export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { + let style: { + align: DropdownMenuContentProps['align']; + side: DropdownMenuContentProps['side']; + } = { + align: 'center', + side: 'bottom', + }; + + switch (dropdownPosition) { + case 'top': + style = { + align: 'center', + side: 'top', + }; + break; + case 'left': + style = { + align: 'center', + side: 'left', + }; + break; + case 'right': + style = { + align: 'center', + side: 'right', + }; + break; + } + + return style; +}; diff --git a/src/blocks/dropdown/index.ts b/src/blocks/dropdown/index.ts new file mode 100644 index 0000000000..5eb60d0962 --- /dev/null +++ b/src/blocks/dropdown/index.ts @@ -0,0 +1,3 @@ +export * from './Dropdown'; +export * from './Dropdown.types'; +export * from './Dropdown.utils'; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 4867ab5b8d..0c4ffec8cc 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -1,7 +1,9 @@ export { Box, type BoxProps } from './box'; export { Button, type ButtonProps } from './button'; +export { Dropdown, type DropdownProps } from './dropdown'; export { HoverableSVG, type HoverableSVGProps } from './hoverableSVG'; export { Link, type LinkProps } from './link'; +export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu'; export { Separator, type SeparatorProps } from './separator'; export { Skeleton, type SkeletonProps } from './skeleton'; export { Tabs, type TabsProps, type TabItem } from './tabs'; diff --git a/src/blocks/menu/Menu.constants.ts b/src/blocks/menu/Menu.constants.ts new file mode 100644 index 0000000000..cc560bcb31 --- /dev/null +++ b/src/blocks/menu/Menu.constants.ts @@ -0,0 +1,10 @@ +import { MenuProps } from './Menu.types'; + +export const menuCSSPropsKeys: (keyof MenuProps)[] = [ + 'height', + 'maxHeight', + 'minHeight', + 'maxWidth', + 'minWidth', + 'width', +]; diff --git a/src/blocks/menu/Menu.tsx b/src/blocks/menu/Menu.tsx new file mode 100644 index 0000000000..1dc9bb50d7 --- /dev/null +++ b/src/blocks/menu/Menu.tsx @@ -0,0 +1,50 @@ +import { FC } from 'react'; +import styled from 'styled-components'; + +import type { MenuProps } from './Menu.types'; +import { getBlocksColor } from 'blocks/Blocks.utils'; +import { ModeProp } from 'blocks/Blocks.types'; +import { useBlocksTheme } from 'blocks/Blocks.hooks'; +import { menuCSSPropsKeys } from './Menu.constants'; + +const StyledMenu = styled.div.withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => + !menuCSSPropsKeys.includes(prop as keyof MenuProps) && defaultValidatorFn(prop), +})` + display: flex; + flex-direction: column; + background-color: ${({ mode }) => getBlocksColor(mode, { light: 'white', dark: 'gray-900' })}; + border: 1px solid ${({ mode }) => getBlocksColor(mode, { light: 'gray-200', dark: 'gray-800' })}; + border-radius: var(--r3); + padding: var(--s2); + margin: var(--s0); + gap: var(--s3); + + /* Menu non-responsive styles */ + width: ${(props) => props.width}; + min-width: ${(props) => props.minWidth || '145px'}; + max-width: ${(props) => props.maxWidth}; + height: ${(props) => props.height}; + min-height: ${(props) => props.minHeight}; + max-height: ${(props) => props.maxHeight}; + + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const Menu: FC = ({ children, ...props }) => { + const { mode } = useBlocksTheme(); + + return ( + + {children} + + ); +}; + +Menu.displayName = 'Menu'; + +export { Menu }; diff --git a/src/blocks/menu/Menu.types.ts b/src/blocks/menu/Menu.types.ts new file mode 100644 index 0000000000..162a506321 --- /dev/null +++ b/src/blocks/menu/Menu.types.ts @@ -0,0 +1,37 @@ +import { ReactNode } from 'react'; +import { FlattenSimpleInterpolation } from 'styled-components'; + +export type MenuNonResponsiveProps = { + /* Sets height css property */ + height?: string; + /* Sets max-height css property */ + maxHeight?: string; + /* Sets min-height css property */ + minHeight?: string; + /* Sets max-width css property */ + maxWidth?: string; + /* Sets min-width css property */ + minWidth?: string; + /* Sets width css property */ + width?: string; +}; + +export type MenuComponentProps = { + /* Additional prop from styled components to apply custom css to Menu */ + css?: FlattenSimpleInterpolation; + /* Child react nodes rendered by Menu */ + children: ReactNode; +}; + +export type MenuItemComponentProps = { + /* icon element */ + icon?: ReactNode; + /* function attached to the menu item */ + onClick?: () => void; + /* menu item text */ + label?: string; + /* Additional prop from styled components to apply custom css to Menu */ + css?: FlattenSimpleInterpolation; +}; + +export type MenuProps = MenuNonResponsiveProps & MenuComponentProps; diff --git a/src/blocks/menu/MenuItem.tsx b/src/blocks/menu/MenuItem.tsx new file mode 100644 index 0000000000..9d753841c5 --- /dev/null +++ b/src/blocks/menu/MenuItem.tsx @@ -0,0 +1,68 @@ +import { FC } from 'react'; +import styled from 'styled-components'; + +import { MenuItemComponentProps } from './Menu.types'; +import { ModeProp } from 'blocks/Blocks.types'; +import { getBlocksColor } from '../Blocks.utils'; +import { useBlocksTheme } from 'blocks/Blocks.hooks'; +import { Text } from 'blocks/text'; +import { Box } from 'blocks/box'; + +const StyledMenuItem = styled.div.withConfig({ + shouldForwardProp: (prop, defaultValidatorFn) => !['mode'].includes(prop) && defaultValidatorFn(prop), +})` + // Menu default styles + padding: var(--s1); + display: flex; + flex-direction: row; + flex: 1; + align-items: center; + gap: var(--s1); + border-radius: var(--r2); + &:hover { + background-color: ${({ mode }) => getBlocksColor(mode, { light: 'gray-100', dark: 'gray-1000' })}; + } + .menu-icon { + svg { + width: 100%; + height: 100%; + } + } + cursor: pointer; + font-size: 15px; + /* Extra CSS props */ + ${(props) => props.css || ''} +`; + +const MenuItem: FC = ({ icon, label, onClick, ...props }) => { + const { mode } = useBlocksTheme(); + + return ( + + {icon && ( + + {icon && {icon}} + + )} + + + {label} + + + ); +}; + +MenuItem.displayName = 'MenuItem'; + +export { MenuItem }; diff --git a/src/blocks/menu/index.ts b/src/blocks/menu/index.ts new file mode 100644 index 0000000000..6cb277673b --- /dev/null +++ b/src/blocks/menu/index.ts @@ -0,0 +1,4 @@ +export * from './Menu'; +export * from './MenuItem'; +export * from './Menu.types'; +export * from './Menu.constants'; diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index 0e337d9c4a..63c6d57a3e 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -13,7 +13,8 @@ import { useAccount } from 'hooks'; import { formatSubscriberCount } from '../Dashboard.utils'; // Components -import { Box, Button, CaretDown, NotificationMobile, Skeleton, Text } from 'blocks'; +import { Box, Button, CaretDown, CaretUp, Dropdown, Menu, MenuItem, NotificationMobile, Skeleton, Text } from 'blocks'; +import { AiFillExclamationCircle } from 'react-icons/ai'; import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown'; import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown'; import TickDecoratedCircleFilled from 'blocks/icons/components/TickDecoratedCircleFilled'; @@ -82,6 +83,46 @@ const FeaturedChannelsListItem: FC = (props) => { /> + + } + onClick={() => { + alert('wewe'); + }} + label="Archive" + /> + } + onClick={() => {}} + label="New Archive" + /> + } + onClick={() => {}} + label="New Test" + /> + } + onClick={() => {}} + label="Delete" + /> + + } + trigger="hover" + // dropdownPosition="top" + > + {({ isOpen }: { isOpen: boolean }) => ( + + )} + + {!isSubscribed && ( Date: Tue, 2 Jul 2024 10:33:33 +0100 Subject: [PATCH 02/18] add props type --- src/blocks/dropdown/Dropdown.tsx | 2 +- src/blocks/dropdown/Dropdown.types.ts | 2 -- .../dashboard/components/FeaturedChannelsListItem.tsx | 8 ++++++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/blocks/dropdown/Dropdown.tsx b/src/blocks/dropdown/Dropdown.tsx index ff478598ce..d5ae5927b3 100644 --- a/src/blocks/dropdown/Dropdown.tsx +++ b/src/blocks/dropdown/Dropdown.tsx @@ -37,7 +37,7 @@ const Dropdown: FC = forwardRef trigger == 'hover' && showDropdown()} onMouseLeave={() => trigger == 'hover' && hideDropdown()} onPointerDownOutside={() => hideDropdown()} diff --git a/src/blocks/dropdown/Dropdown.types.ts b/src/blocks/dropdown/Dropdown.types.ts index 390e9c3949..db6be6bb2f 100644 --- a/src/blocks/dropdown/Dropdown.types.ts +++ b/src/blocks/dropdown/Dropdown.types.ts @@ -9,8 +9,6 @@ export type DropdownTrigger = 'hover' | 'click'; export type DropdownComponentProps = { // This will be content upon clicking on which the dropdown overlay will open children?: ((props: { isOpen: boolean }) => ReactElement) | ReactNode | any; - // children?: ((props: { isOpen: boolean }) => ReactElement) | ReactElement | ReactNode | any; - // children?: ReactNode; // position of menu dropdownPosition?: DropdownPosition; // on which action to open the dropdown diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx index 63c6d57a3e..cf5405241d 100644 --- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx +++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx @@ -33,6 +33,10 @@ type FeaturedChannelsListItemProps = { width: string; }; +type isOpenProps = { + isOpen: boolean; +}; + const FeaturedChannelsListItem: FC = (props) => { const { channelAddress, width } = props; @@ -110,10 +114,10 @@ const FeaturedChannelsListItem: FC = (props) => { /> } - trigger="hover" + // trigger="hover" // dropdownPosition="top" > - {({ isOpen }: { isOpen: boolean }) => ( + {({ isOpen }: isOpenProps) => ( - )} - - {!isSubscribed && ( Date: Wed, 3 Jul 2024 13:39:26 +0530 Subject: [PATCH 04/18] theme in progress --- src/blocks/Blocks.utils.ts | 6 +- src/blocks/theme/colors/colors.primitives.ts | 89 +++++++++++++++++++ .../device/theme.device.ts} | 2 +- src/blocks/theme/index.ts | 9 ++ src/blocks/theme/variables/variables.blur.ts | 8 ++ .../theme/variables/variables.borderRadius.ts | 13 +++ .../theme/variables/variables.borderSize.ts | 7 ++ .../theme/variables/variables.opacity.ts | 13 +++ .../theme/variables/variables.spacing.ts | 12 +++ 9 files changed, 155 insertions(+), 4 deletions(-) create mode 100644 src/blocks/theme/colors/colors.primitives.ts rename src/blocks/{Blocks.constants.ts => theme/device/theme.device.ts} (91%) create mode 100644 src/blocks/theme/index.ts create mode 100644 src/blocks/theme/variables/variables.blur.ts create mode 100644 src/blocks/theme/variables/variables.borderRadius.ts create mode 100644 src/blocks/theme/variables/variables.borderSize.ts create mode 100644 src/blocks/theme/variables/variables.opacity.ts create mode 100644 src/blocks/theme/variables/variables.spacing.ts diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index 33d97c2fb4..e0221f0304 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import { deviceMediaQ, deviceSizes, breakpointMap } from './Blocks.constants'; +import { deviceMediaQ, deviceSizes, breakpointMap } from './theme'; import { BlocksColors, Breakpoint, @@ -11,7 +11,7 @@ import { ResponsiveCSSPropertyData, ThemeMode, ThemeModeBorder, - BorderValue + BorderValue, } from './Blocks.types'; /** @@ -109,7 +109,7 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => { tablet: '', laptop: '', laptopL: '', - desktop: '' + desktop: '', }; data.forEach(({ prop, propName }) => { diff --git a/src/blocks/theme/colors/colors.primitives.ts b/src/blocks/theme/colors/colors.primitives.ts new file mode 100644 index 0000000000..242bc38b25 --- /dev/null +++ b/src/blocks/theme/colors/colors.primitives.ts @@ -0,0 +1,89 @@ +export const colorPrimitives = { + 'gray-100': '#F5F6F8', + 'gray-200': '#EAEBF2', + 'gray-300': '#C4CBD5', + 'gray-400': '#B0B3B9', + 'gray-500': '#8C93A0', + 'gray-600': '#757D8D', + 'gray-700': '#484D58', + 'gray-800': '#313338', + 'gray-900': '#202124', + 'gray-1000': '#17181B', + + 'pink-100': '#FCEBFF', + 'pink-200': '#FBE8FF', + 'pink-300': '#F3AEFF', + 'pink-400': '#CF59E2', + 'pink-500': '#D548EC', + 'pink-600': '#C742DD', + 'pink-700': '#AA30BE', + 'pink-800': '#7B0090', + 'pink-900': '#570066', + 'pink-1000': '#35003F', + + 'blue-100': '#E8F2FF', + 'blue-200': '#D1E4FF', + 'blue-300': '#A2C9FF', + 'blue-400': '#73ADFF', + 'blue-500': '#4090FF', + 'blue-600': '#076EFF', + 'blue-700': '#0056D0', + 'blue-800': '#00419D', + 'blue-900': '#002D6D', + 'blue-1000': '#001A40', + + 'green-100': '#D8F7F0', + 'green-200': '#AFEFE1', + 'green-300': '#51DCBD', + 'green-400': '#00C296', + 'green-500': '#00A47F', + 'green-600': '#008769', + 'green-700': '#006B53', + 'green-800': '#00513F', + 'green-900': '#00382B', + 'green-1000': '#002019', + + 'red-100': '#FFECEC', + 'red-200': '#FFD9D9', + 'red-300': '#FFB1B1', + 'red-400': '#FF8585', + 'red-500': '#FF4E4E', + 'red-600': '#F11F1F', + 'red-700': '#D43B3B', + 'red-800': '#A40A0A', + 'red-900': '#670000', + 'red-1000': '#400000', + + 'yellow-100': '#FFF0CB', + 'yellow-200': '#FFDF93', + 'yellow-300': '#FFBB16', + 'yellow-400': '#E99B00', + 'yellow-500': '#C77100', + 'yellow-600': '#A85A00', + 'yellow-700': '#8A4900', + 'yellow-800': '#663600', + 'yellow-900': '#472600', + 'yellow-1000': '#291500', + + 'white-10': '#', + 'white-20': '#', + 'white-30': '#', + 'white-40': '#', + 'white-50': '#', + 'white-60': '#', + 'white-70': '#', + 'white-80': '#', + 'white-90': '#', + 'white-100': '#', + + 'black-10': '#', + 'black-20': '#', + 'black-30': '#', + 'black-40': '#', + 'black-50': '#', + 'black-60': '#', + 'black-70': '#', + 'black-80': '#', + 'black-90': '#', + 'black-100': '#', +}; diff --git a/src/blocks/Blocks.constants.ts b/src/blocks/theme/device/theme.device.ts similarity index 91% rename from src/blocks/Blocks.constants.ts rename to src/blocks/theme/device/theme.device.ts index e12ed383ff..0d9fcd90b9 100644 --- a/src/blocks/Blocks.constants.ts +++ b/src/blocks/theme/device/theme.device.ts @@ -1,4 +1,4 @@ -import { DeviceSizeName, DeviceSize, Breakpoint } from './Blocks.types'; +import { DeviceSizeName, DeviceSize, Breakpoint } from '../../Blocks.types'; export const deviceSizes: Record = { mobileS: '320px', diff --git a/src/blocks/theme/index.ts b/src/blocks/theme/index.ts new file mode 100644 index 0000000000..221b53841f --- /dev/null +++ b/src/blocks/theme/index.ts @@ -0,0 +1,9 @@ +export * from './colors/colors.primitives'; + +export * from './device/theme.device'; + +export * from './variables/variables.blur'; +export * from './variables/variables.borderRadius'; +export * from './variables/variables.borderSize'; +export * from './variables/variables.opacity'; +export * from './variables/variables.spacing'; diff --git a/src/blocks/theme/variables/variables.blur.ts b/src/blocks/theme/variables/variables.blur.ts new file mode 100644 index 0000000000..01a25d1b82 --- /dev/null +++ b/src/blocks/theme/variables/variables.blur.ts @@ -0,0 +1,8 @@ +export const blurVariables = { + 'blur-xs': '8px', + 'blur-sm': '16px', + 'blur-md': '24px', + 'blur-lg': '40px', + 'blur-xl': '72px', + 'blur-xxl': '128px', +}; diff --git a/src/blocks/theme/variables/variables.borderRadius.ts b/src/blocks/theme/variables/variables.borderRadius.ts new file mode 100644 index 0000000000..63d1ff035f --- /dev/null +++ b/src/blocks/theme/variables/variables.borderRadius.ts @@ -0,0 +1,13 @@ +export const borderRadiusVariables = { + 'radius-none': '0px', + 'radius-xxxs': '4px', + 'radius-xxs': '8px', + 'radius-xs': '12px', + 'radius-sm': '16px', + 'radius-md': '24px', + 'radius-lg': '32px', + 'radius-xl': '40px', + 'radius-xxl': '48px', + 'radius-xxxl': '64px', + 'radius-round': '1000px', +}; diff --git a/src/blocks/theme/variables/variables.borderSize.ts b/src/blocks/theme/variables/variables.borderSize.ts new file mode 100644 index 0000000000..1e9e7ee81d --- /dev/null +++ b/src/blocks/theme/variables/variables.borderSize.ts @@ -0,0 +1,7 @@ +export const borderSizeVariables = { + 'spacing-xs': '0.5px', + 'spacing-sm': '1px', + 'spacing-md': '2px', + 'spacing-lg': '3px', + 'spacing-xl': '4px', +}; diff --git a/src/blocks/theme/variables/variables.opacity.ts b/src/blocks/theme/variables/variables.opacity.ts new file mode 100644 index 0000000000..e41d086a14 --- /dev/null +++ b/src/blocks/theme/variables/variables.opacity.ts @@ -0,0 +1,13 @@ +export const opacityVariables = { + 'opacity-0': '0', + 'opacity-10': '0.1', + 'opacity-20': '0.2', + 'opacity-30': '0.3', + 'opacity-40': '0.4', + 'opacity-50': '0.5', + 'opacity-60': '0.6', + 'opacity-70': '0.7', + 'opacity-80': '0.8', + 'opacity-90': '0.9', + 'opacity-100': '1', +}; diff --git a/src/blocks/theme/variables/variables.spacing.ts b/src/blocks/theme/variables/variables.spacing.ts new file mode 100644 index 0000000000..21083656f1 --- /dev/null +++ b/src/blocks/theme/variables/variables.spacing.ts @@ -0,0 +1,12 @@ +export const spacingVariables = { + 'spacing-none': '0px', + 'spacing-xxxs': '4px', + 'spacing-xxs': '8px', + 'spacing-xs': '12px', + 'spacing-sm': '16px', + 'spacing-md': '24px', + 'spacing-lg': '32px', + 'spacing-xl': '40px', + 'spacing-xxl': '48px', + 'spacing-xxxl': '64px', +}; From ea3c4ab39f8c3f36810660db85a0edfb44ec3eeb Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Wed, 3 Jul 2024 19:08:42 +0530 Subject: [PATCH 05/18] semantics in progress --- src/blocks/Blocks.colors.ts | 2 + src/blocks/theme/colors/colors.brands.ts | 69 +++++++++++++++++++ src/blocks/theme/colors/colors.primitives.ts | 42 +++++------ src/blocks/theme/colors/colors.semantics.ts | 32 +++++++++ .../colors/semantics/semantics.button.ts | 11 +++ .../colors/semantics/semantics.checkbox.ts | 0 .../colors/semantics/semantics.dropdown.ts | 0 .../theme/colors/semantics/semantics.icon.ts | 29 ++++++++ .../theme/colors/semantics/semantics.input.ts | 0 .../theme/colors/semantics/semantics.radio.ts | 0 .../colors/semantics/semantics.stroke.ts | 31 +++++++++ .../colors/semantics/semantics.surface.ts | 33 +++++++++ .../colors/semantics/semantics.switch.ts | 0 .../theme/colors/semantics/semantics.text.ts | 35 ++++++++++ .../colors/semantics/semantics.textarea.ts | 0 .../colors/semantics/semantics.tooltip.ts | 0 src/blocks/theme/index.ts | 2 + 17 files changed, 266 insertions(+), 20 deletions(-) create mode 100644 src/blocks/theme/colors/colors.brands.ts create mode 100644 src/blocks/theme/colors/colors.semantics.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.button.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.checkbox.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.dropdown.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.icon.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.input.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.radio.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.stroke.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.surface.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.switch.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.text.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.textarea.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.tooltip.ts diff --git a/src/blocks/Blocks.colors.ts b/src/blocks/Blocks.colors.ts index 22df3b8e61..7e66e2a33b 100644 --- a/src/blocks/Blocks.colors.ts +++ b/src/blocks/Blocks.colors.ts @@ -1,5 +1,7 @@ import { BlocksColorData, BlocksColors, GlobalColors } from './Blocks.types'; +// TODO This file needs to be removed after all the blcoks components uses the new design theme + const brandColors = { /* New brand colors */ diff --git a/src/blocks/theme/colors/colors.brands.ts b/src/blocks/theme/colors/colors.brands.ts new file mode 100644 index 0000000000..c2a159d552 --- /dev/null +++ b/src/blocks/theme/colors/colors.brands.ts @@ -0,0 +1,69 @@ +import { colorPrimitives } from './colors.primitives'; + +export const colorBrands = { + 'primary-100': colorPrimitives['pink-100'], + 'primary-200': colorPrimitives['pink-200'], + 'primary-300': colorPrimitives['pink-300'], + 'primary-400': colorPrimitives['pink-400'], + 'primary-500': colorPrimitives['pink-500'], + 'primary-600': colorPrimitives['pink-600'], + 'primary-700': colorPrimitives['pink-700'], + 'primary-800': colorPrimitives['pink-800'], + 'primary-900': colorPrimitives['pink-900'], + 'primary-1000': colorPrimitives['pink-1000'], + + 'neutral-100': colorPrimitives['gray-100'], + 'neutral-200': colorPrimitives['gray-200'], + 'neutral-300': colorPrimitives['gray-300'], + 'neutral-400': colorPrimitives['gray-400'], + 'neutral-500': colorPrimitives['gray-500'], + 'neutral-600': colorPrimitives['gray-600'], + 'neutral-700': colorPrimitives['gray-700'], + 'neutral-800': colorPrimitives['gray-800'], + 'neutral-900': colorPrimitives['gray-900'], + 'neutral-1000': colorPrimitives['gray-1000'], + + 'info-100': colorPrimitives['blue-100'], + 'info-200': colorPrimitives['blue-200'], + 'info-300': colorPrimitives['blue-300'], + 'info-400': colorPrimitives['blue-400'], + 'info-500': colorPrimitives['blue-500'], + 'info-600': colorPrimitives['blue-600'], + 'info-700': colorPrimitives['blue-700'], + 'info-800': colorPrimitives['blue-800'], + 'info-900': colorPrimitives['blue-900'], + 'info-1000': colorPrimitives['blue-1000'], + + 'success-100': colorPrimitives['green-100'], + 'success-200': colorPrimitives['green-200'], + 'success-300': colorPrimitives['green-300'], + 'success-400': colorPrimitives['green-400'], + 'success-500': colorPrimitives['green-500'], + 'success-600': colorPrimitives['green-600'], + 'success-700': colorPrimitives['green-700'], + 'success-800': colorPrimitives['green-800'], + 'success-900': colorPrimitives['green-900'], + 'success-1000': colorPrimitives['green-1000'], + + 'warning-100': colorPrimitives['yellow-100'], + 'warning-200': colorPrimitives['yellow-200'], + 'warning-300': colorPrimitives['yellow-300'], + 'warning-400': colorPrimitives['yellow-400'], + 'warning-500': colorPrimitives['yellow-500'], + 'warning-600': colorPrimitives['yellow-600'], + 'warning-700': colorPrimitives['yellow-700'], + 'warning-800': colorPrimitives['yellow-800'], + 'warning-900': colorPrimitives['yellow-900'], + 'warning-1000': colorPrimitives['yellow-1000'], + + 'danger-100': colorPrimitives['red-100'], + 'danger-200': colorPrimitives['red-200'], + 'danger-300': colorPrimitives['red-300'], + 'danger-400': colorPrimitives['red-400'], + 'danger-500': colorPrimitives['red-500'], + 'danger-600': colorPrimitives['red-600'], + 'danger-700': colorPrimitives['red-700'], + 'danger-800': colorPrimitives['red-800'], + 'danger-900': colorPrimitives['red-900'], + 'danger-1000': colorPrimitives['red-1000'], +}; diff --git a/src/blocks/theme/colors/colors.primitives.ts b/src/blocks/theme/colors/colors.primitives.ts index 242bc38b25..e639c3c302 100644 --- a/src/blocks/theme/colors/colors.primitives.ts +++ b/src/blocks/theme/colors/colors.primitives.ts @@ -65,25 +65,27 @@ export const colorPrimitives = { 'yellow-900': '#472600', 'yellow-1000': '#291500', - 'white-10': '#', - 'white-20': '#', - 'white-30': '#', - 'white-40': '#', - 'white-50': '#', - 'white-60': '#', - 'white-70': '#', - 'white-80': '#', - 'white-90': '#', - 'white-100': '#', + 'white-10': 'rgba(255,255,255,0.1)', + 'white-20': 'rgba(255,255,255,0.2)', + 'white-30': 'rgba(255,255,255,0.3)', + 'white-40': 'rgba(255,255,255,0.4)', + 'white-50': 'rgba(255,255,255,0.5)', + 'white-60': 'rgba(255,255,255,0.6)', + 'white-70': 'rgba(255,255,255,0.7)', + 'white-80': 'rgba(255,255,255,0.8)', + 'white-90': 'rgba(255,255,255,0.9)', + 'white-100': 'rgba(255,255,255,1)', - 'black-10': '#', - 'black-20': '#', - 'black-30': '#', - 'black-40': '#', - 'black-50': '#', - 'black-60': '#', - 'black-70': '#', - 'black-80': '#', - 'black-90': '#', - 'black-100': '#', + 'black-10': 'rgba(0,0,0,0.1)', + 'black-20': 'rgba(0,0,0,0.2)', + 'black-30': 'rgba(0,0,0,0.3)', + 'black-40': 'rgba(0,0,0,0.4)', + 'black-50': 'rgba(0,0,0,0.5)', + 'black-60': 'rgba(0,0,0,0.6)', + 'black-70': 'rgba(0,0,0,0.7)', + 'black-80': 'rgba(0,0,0,0.8)', + 'black-90': 'rgba(0,0,0,0.9)', + 'black-100': 'rgba(0,0,0,1)', + + transparent: 'transparent', }; diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts new file mode 100644 index 0000000000..e59317dd93 --- /dev/null +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -0,0 +1,32 @@ +import { + SecondaryButtonSemantics, + dangerButtonSemantics, + dangerSecondaryButtonSemantics, + outlineButtonSemantics, + primaryButtonSemantics, + tertiaryButtonSemantics, +} from './semantics/semantics.button'; +import { iconSemantics } from './semantics/semantics.icon'; +import { strokeSemantics } from './semantics/semantics.stroke'; +import { surfaceSemantics } from './semantics/semantics.surface'; +import { textSemantics } from './semantics/semantics.text'; + +export const colorSemantics = { + 'button-primary': primaryButtonSemantics, + 'button-secondary': SecondaryButtonSemantics, + 'button-tertiary': tertiaryButtonSemantics, + 'button-outline': outlineButtonSemantics, + 'button-danger': dangerButtonSemantics, + 'button-danger-secondary': dangerSecondaryButtonSemantics, + dropdown: {}, + icon: iconSemantics, + 'input-field': {}, + 'radio-button': {}, + surface: surfaceSemantics, + stroke: strokeSemantics, + text: textSemantics, + textarea: {}, + toast: {}, + 'toggle-switch': {}, + tooltip: {}, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.button.ts b/src/blocks/theme/colors/semantics/semantics.button.ts new file mode 100644 index 0000000000..f65176ab3e --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.button.ts @@ -0,0 +1,11 @@ +export const primaryButtonSemantics = {}; + +export const SecondaryButtonSemantics = {}; + +export const tertiaryButtonSemantics = {}; + +export const outlineButtonSemantics = {}; + +export const dangerButtonSemantics = {}; + +export const dangerSecondaryButtonSemantics = {}; diff --git a/src/blocks/theme/colors/semantics/semantics.checkbox.ts b/src/blocks/theme/colors/semantics/semantics.checkbox.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.dropdown.ts b/src/blocks/theme/colors/semantics/semantics.dropdown.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.icon.ts b/src/blocks/theme/colors/semantics/semantics.icon.ts new file mode 100644 index 0000000000..86f009e1cd --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.icon.ts @@ -0,0 +1,29 @@ +import { colorBrands } from '../colors.brands'; + +export const iconSemantics = { + primary: { light: colorBrands['neutral-900'], dark: colorBrands['neutral-400'] }, + secondary: { light: colorBrands['neutral-200'], dark: colorBrands['neutral-100'] }, + tertiary: { light: colorBrands['neutral-300'], dark: colorBrands['neutral-700'] }, + + 'hero-icons': { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-100'] }, + + 'brand-subtle': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, + 'brand-medium': { light: colorBrands['primary-500'], dark: colorBrands['primary-400'] }, + 'brand-bold': { light: colorBrands['primary-800'], dark: colorBrands['primary-300'] }, + + // icon states + + 'success-subtle': { light: colorBrands['success-200'], dark: colorBrands['success-600'] }, + 'success-bold': { light: colorBrands['success-600'], dark: colorBrands['success-300'] }, + + 'info-subtle': { light: colorBrands['info-200'], dark: colorBrands['info-600'] }, + 'info-bold': { light: colorBrands['info-600'], dark: colorBrands['info-200'] }, + + 'warning-subtle': { light: colorBrands['warning-200'], dark: colorBrands['warning-600'] }, + 'warning-bold': { light: colorBrands['warning-600'], dark: colorBrands['warning-200'] }, + + 'danger-subtle': { light: colorBrands['danger-200'], dark: colorBrands['danger-600'] }, + 'danger-bold': { light: colorBrands['danger-600'], dark: colorBrands['danger-300'] }, + + disabled: { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.input.ts b/src/blocks/theme/colors/semantics/semantics.input.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.radio.ts b/src/blocks/theme/colors/semantics/semantics.radio.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.stroke.ts b/src/blocks/theme/colors/semantics/semantics.stroke.ts new file mode 100644 index 0000000000..6268ec7169 --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.stroke.ts @@ -0,0 +1,31 @@ +import { colorBrands } from '../colors.brands'; + +export const strokeSemantics = { + primary: { light: colorBrands['neutral-100'], dark: colorBrands['neutral-900'] }, + secondary: { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] }, + tertiary: { light: colorBrands['neutral-300'], dark: colorBrands['neutral-700'] }, + + 'brand-subtle': { light: colorBrands['primary-300'], dark: colorBrands['primary-500'] }, + 'brand-medium': { light: colorBrands['primary-500'], dark: colorBrands['primary-400'] }, + 'brand-bold': { light: colorBrands['primary-800'], dark: colorBrands['primary-300'] }, + + // stroke states + + 'success-subtle': { light: colorBrands['success-300'], dark: colorBrands['success-500'] }, + 'success-bold': { light: colorBrands['success-700'], dark: colorBrands['success-300'] }, + + 'info-subtle': { light: colorBrands['info-300'], dark: colorBrands['info-500'] }, + 'info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-300'] }, + + 'warning-subtle': { light: colorBrands['warning-300'], dark: colorBrands['warning-500'] }, + 'warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-300'] }, + + 'danger-subtle': { light: colorBrands['danger-300'], dark: colorBrands['danger-500'] }, + 'danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-300'] }, + + hover: { light: colorBrands['success-300'], dark: colorBrands['success-800'] }, + focus: { light: colorBrands['success-300'], dark: colorBrands['success-300'] }, + + pressed: { light: colorBrands['info-800'], dark: colorBrands['info-300'] }, + disabled: { light: colorBrands['info-300'], dark: colorBrands['info-800'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.surface.ts b/src/blocks/theme/colors/semantics/semantics.surface.ts new file mode 100644 index 0000000000..0740532345 --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.surface.ts @@ -0,0 +1,33 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; + +export const surfaceSemantics = { + primary: { light: colorPrimitives['white-100'], dark: colorBrands['neutral-900'] }, + secondary: { light: colorBrands['neutral-100'], dark: colorBrands['neutral-1000'] }, + tertiary: { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] }, + + 'primary-inverse': { light: colorPrimitives['black-100'], dark: colorPrimitives['white-100'] }, + + 'brand-subtle': { light: colorBrands['primary-200'], dark: colorBrands['primary-300'] }, + 'brand-medium': { light: colorBrands['primary-600'], dark: colorBrands['primary-500'] }, + 'brand-bold': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, + + 'glass-subtle': { light: colorPrimitives['white-80'], dark: colorPrimitives['black-80'] }, + 'glass-bold': { light: colorPrimitives['white-50'], dark: colorPrimitives['black-50'] }, + + // surface states + + 'success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-500'] }, + 'success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-200'] }, + + 'info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-500'] }, + 'info-bold': { light: colorBrands['info-500'], dark: colorBrands['info-200'] }, + + 'warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-500'] }, + 'warning-bold': { light: colorBrands['warning-500'], dark: colorBrands['warning-200'] }, + + 'danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-800'] }, + 'danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-200'] }, + + disabled: { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.switch.ts b/src/blocks/theme/colors/semantics/semantics.switch.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.text.ts b/src/blocks/theme/colors/semantics/semantics.text.ts new file mode 100644 index 0000000000..417b296c45 --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.text.ts @@ -0,0 +1,35 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; + +export const textSemantics = { + primary: { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-100'] }, + secondary: { light: colorBrands['neutral-800'], dark: colorBrands['neutral-300'] }, + tertiary: { light: colorBrands['neutral-500'], dark: colorBrands['neutral-600'] }, + + 'primary-inverse': { light: colorPrimitives['white-100'], dark: colorPrimitives['black-100'] }, + 'secondary-inverse': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, + 'tertiary-inverse': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, + + 'brand-subtle': { light: colorBrands['primary-200'], dark: colorBrands['primary-200'] }, + 'brand-medium': { light: colorBrands['primary-600'], dark: colorBrands['primary-400'] }, + 'brand-bold': { light: colorBrands['primary-700'], dark: colorBrands['primary-800'] }, + + 'on-light-bg': { light: colorPrimitives['black-100'], dark: colorPrimitives['black-100'] }, + 'on-dark-bg': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + + // text states + + 'success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-700'] }, + 'success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-300'] }, + + 'info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-700'] }, + 'info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-100'] }, + + 'warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-700'] }, + 'warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-100'] }, + + 'danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, + 'danger-bold': { light: colorBrands['danger-700'], dark: colorBrands['danger-300'] }, + + disabled: { light: colorBrands['neutral-400'], dark: colorBrands['neutral-700'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.textarea.ts b/src/blocks/theme/colors/semantics/semantics.textarea.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/semantics/semantics.tooltip.ts b/src/blocks/theme/colors/semantics/semantics.tooltip.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/index.ts b/src/blocks/theme/index.ts index 221b53841f..ffbda1698c 100644 --- a/src/blocks/theme/index.ts +++ b/src/blocks/theme/index.ts @@ -1,4 +1,6 @@ +export * from './colors/colors.brands'; export * from './colors/colors.primitives'; +export * from './colors/colors.semantics'; export * from './device/theme.device'; From d092b2ad188ff2bf3c344d8f5b918c4ceff483db Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Thu, 4 Jul 2024 15:47:49 +0530 Subject: [PATCH 06/18] button semantics in progress --- .../colors/semantics/semantics.button.ts | 55 ++++++++++++++++++- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/src/blocks/theme/colors/semantics/semantics.button.ts b/src/blocks/theme/colors/semantics/semantics.button.ts index f65176ab3e..0f8c697e3a 100644 --- a/src/blocks/theme/colors/semantics/semantics.button.ts +++ b/src/blocks/theme/colors/semantics/semantics.button.ts @@ -1,8 +1,57 @@ -export const primaryButtonSemantics = {}; +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; -export const SecondaryButtonSemantics = {}; +export const primaryButtonSemantics = { + 'background-default': { light: colorBrands['primary-500'], dark: colorBrands['primary-500'] }, + 'background-hover': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, + 'background-pressed': { light: colorBrands['primary-800'], dark: colorBrands['primary-600'] }, + 'background-focus': { light: colorBrands['primary-500'], dark: colorBrands['primary-400'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, -export const tertiaryButtonSemantics = {}; + 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, +}; + +export const SecondaryButtonSemantics = { + 'background-default': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-700'] }, + 'background-pressed': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-1000'] }, + 'background-focus': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: colorBrands['neutral-1000'], dark: colorPrimitives['white-100'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorBrands['neutral-800'], dark: colorPrimitives['white-60'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, +}; + +export const tertiaryButtonSemantics = { + 'background-default': { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-700'] }, + 'background-inverse': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorBrands['neutral-900'], dark: colorBrands['neutral-300'] }, + 'background-pressed': { light: colorBrands['neutral-100'], dark: colorPrimitives['gray-1000'] }, + 'background-focus': { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-700'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['gray-200'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, +}; export const outlineButtonSemantics = {}; From 36e2b9c4d749ee28944058aadd2e8e8ed2857efe Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Thu, 4 Jul 2024 17:37:14 +0530 Subject: [PATCH 07/18] button and switch semantics added --- .../colors/semantics/semantics.button.ts | 56 +++++++++++++++++-- .../colors/semantics/semantics.switch.ts | 19 +++++++ 2 files changed, 70 insertions(+), 5 deletions(-) diff --git a/src/blocks/theme/colors/semantics/semantics.button.ts b/src/blocks/theme/colors/semantics/semantics.button.ts index 0f8c697e3a..833b1f77b6 100644 --- a/src/blocks/theme/colors/semantics/semantics.button.ts +++ b/src/blocks/theme/colors/semantics/semantics.button.ts @@ -1,6 +1,7 @@ import { colorBrands } from '../colors.brands'; import { colorPrimitives } from '../colors.primitives'; import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; import { textSemantics } from './semantics.text'; @@ -47,14 +48,59 @@ export const tertiaryButtonSemantics = { 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['gray-200'] }, 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, - 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'icon-default': { light: colorBrands['neutral-300'], dark: colorPrimitives['white-50'] }, 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, - 'stroke-focus': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, + 'stroke-focus': { light: colorBrands['primary-400'], dark: colorBrands['primary-400'] }, }; -export const outlineButtonSemantics = {}; +export const outlineButtonSemantics = { + 'background-default': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, + 'background-hover': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, + 'background-pressed': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, + 'background-focus': { light: colorPrimitives['transparent'], dark: colorPrimitives['transparent'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, -export const dangerButtonSemantics = {}; + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, -export const dangerSecondaryButtonSemantics = {}; + 'icon-default': { light: iconSemantics['primary'].light, dark: iconSemantics['secondary'].dark }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-default': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-400'] }, + 'stroke-hover': { light: strokeSemantics['brand-subtle'].light, dark: strokeSemantics['secondary'].dark }, + 'stroke-pressed': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-300'] }, +}; + +export const dangerButtonSemantics = { + 'background-default': { light: colorBrands['danger-600'], dark: colorBrands['danger-500'] }, + 'background-hover': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, + 'background-pressed': { light: colorBrands['danger-800'], dark: colorBrands['danger-700'] }, + 'background-focus': { light: colorBrands['danger-500'], dark: colorBrands['danger-400'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorPrimitives['white-70'], dark: colorPrimitives['white-70'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['danger-800'], dark: colorBrands['danger-600'] }, +}; + +export const dangerSecondaryButtonSemantics = { + 'background-default': { light: colorBrands['danger-200'], dark: colorBrands['danger-800'] }, + 'background-hover': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, + 'background-pressed': { light: colorBrands['danger-500'], dark: colorBrands['danger-1000'] }, + 'background-focus': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: colorBrands['danger-700'], dark: colorPrimitives['white-100'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorBrands['danger-400'], dark: colorPrimitives['white-70'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['danger-800'], dark: colorBrands['danger-400'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.switch.ts b/src/blocks/theme/colors/semantics/semantics.switch.ts index e69de29bb2..b6466230e4 100644 --- a/src/blocks/theme/colors/semantics/semantics.switch.ts +++ b/src/blocks/theme/colors/semantics/semantics.switch.ts @@ -0,0 +1,19 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; + +export const switchSemantics = { + 'background-selected': { light: colorBrands['primary-600'], dark: colorBrands['primary-600'] }, + 'background-unselected': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorBrands['primary-500'], dark: colorBrands['primary-500'] }, + 'background-focus': { light: colorBrands['primary-500'], dark: colorBrands['primary-600'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-500'] }, + 'stroke-default': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, +}; From ab924c1f1f2e19a5b0e668d49a76e63538ced733 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Thu, 4 Jul 2024 19:58:45 +0530 Subject: [PATCH 08/18] added more semantics --- src/blocks/theme/colors/colors.semantics.ts | 18 ++++++---- .../colors/semantics/semantics.dropdown.ts | 36 +++++++++++++++++++ .../theme/colors/semantics/semantics.input.ts | 36 +++++++++++++++++++ .../theme/colors/semantics/semantics.radio.ts | 16 +++++++++ .../colors/semantics/semantics.textarea.ts | 36 +++++++++++++++++++ .../colors/semantics/semantics.tooltip.ts | 8 +++++ 6 files changed, 144 insertions(+), 6 deletions(-) diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index e59317dd93..7539486481 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -6,10 +6,16 @@ import { primaryButtonSemantics, tertiaryButtonSemantics, } from './semantics/semantics.button'; +import { dropdownSemantics } from './semantics/semantics.dropdown'; import { iconSemantics } from './semantics/semantics.icon'; +import { inputSemantics } from './semantics/semantics.input'; +import { radioSemantics } from './semantics/semantics.radio'; import { strokeSemantics } from './semantics/semantics.stroke'; import { surfaceSemantics } from './semantics/semantics.surface'; +import { switchSemantics } from './semantics/semantics.switch'; import { textSemantics } from './semantics/semantics.text'; +import { textAreaSemantics } from './semantics/semantics.textarea'; +import { tooltipSemantics } from './semantics/semantics.tooltip'; export const colorSemantics = { 'button-primary': primaryButtonSemantics, @@ -18,15 +24,15 @@ export const colorSemantics = { 'button-outline': outlineButtonSemantics, 'button-danger': dangerButtonSemantics, 'button-danger-secondary': dangerSecondaryButtonSemantics, - dropdown: {}, + dropdown: dropdownSemantics, icon: iconSemantics, - 'input-field': {}, - 'radio-button': {}, + 'input-field': inputSemantics, + 'radio-button': radioSemantics, surface: surfaceSemantics, stroke: strokeSemantics, text: textSemantics, - textarea: {}, + textarea: textAreaSemantics, toast: {}, - 'toggle-switch': {}, - tooltip: {}, + 'toggle-switch': switchSemantics, + tooltip: tooltipSemantics, }; diff --git a/src/blocks/theme/colors/semantics/semantics.dropdown.ts b/src/blocks/theme/colors/semantics/semantics.dropdown.ts index e69de29bb2..200cf77179 100644 --- a/src/blocks/theme/colors/semantics/semantics.dropdown.ts +++ b/src/blocks/theme/colors/semantics/semantics.dropdown.ts @@ -0,0 +1,36 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const dropdownSemantics = { + 'background-default': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, + 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, + 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, + 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + + 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, + 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + + 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, + 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-300'] }, + 'stroke-pressed': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-disabled': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-900'] }, + 'stroke-success': { light: colorBrands['success-500'], dark: colorBrands['success-400'] }, + 'stroke-danger': { light: colorBrands['danger-400'], dark: colorBrands['danger-400'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.input.ts b/src/blocks/theme/colors/semantics/semantics.input.ts index e69de29bb2..1410f1201d 100644 --- a/src/blocks/theme/colors/semantics/semantics.input.ts +++ b/src/blocks/theme/colors/semantics/semantics.input.ts @@ -0,0 +1,36 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const inputSemantics = { + 'background-default': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, + 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, + 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, + 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + + 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, + 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + + 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, + 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-300'] }, + 'stroke-pressed': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-disabled': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-900'] }, + 'stroke-success': { light: colorBrands['success-500'], dark: colorBrands['success-400'] }, + 'stroke-danger': { light: colorBrands['danger-400'], dark: colorBrands['danger-400'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.radio.ts b/src/blocks/theme/colors/semantics/semantics.radio.ts index e69de29bb2..58285e9ca5 100644 --- a/src/blocks/theme/colors/semantics/semantics.radio.ts +++ b/src/blocks/theme/colors/semantics/semantics.radio.ts @@ -0,0 +1,16 @@ +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const radioSemantics = { + 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, + 'background-selected': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-secondary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'stroke-default': { light: strokeSemantics['brand-medium'].light, dark: strokeSemantics['brand-medium'].dark }, + 'stroke-disabled': { light: strokeSemantics['disabled'].light, dark: strokeSemantics['disabled'].dark }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.textarea.ts b/src/blocks/theme/colors/semantics/semantics.textarea.ts index e69de29bb2..de0dfd1531 100644 --- a/src/blocks/theme/colors/semantics/semantics.textarea.ts +++ b/src/blocks/theme/colors/semantics/semantics.textarea.ts @@ -0,0 +1,36 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const textAreaSemantics = { + 'background-default': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-hover': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-pressed': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-focus': { light: colorPrimitives['white-100'], dark: colorBrands['neutral-800'] }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + 'background-success': { light: colorBrands['success-100'], dark: colorBrands['success-200'] }, + 'background-danger': { light: colorBrands['danger-100'], dark: colorBrands['danger-200'] }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-placeholder': { light: colorBrands['neutral-400'], dark: colorBrands['neutral-600'] }, + 'text-secondary': { light: colorBrands['neutral-600'], dark: colorBrands['neutral-500'] }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + 'text-success': { light: textSemantics['success-bold'].light, dark: textSemantics['success-subtle'].dark }, + 'text-danger': { light: textSemantics['danger-bold'].light, dark: textSemantics['danger-subtle'].dark }, + + 'icon-default': { light: iconSemantics['tertiary'].light, dark: iconSemantics['secondary'].dark }, + 'icon-disabled': { light: iconSemantics['disabled'].light, dark: iconSemantics['disabled'].dark }, + 'icon-success': { light: iconSemantics['success-bold'].light, dark: iconSemantics['success-subtle'].dark }, + 'icon-danger': { light: iconSemantics['danger-bold'].light, dark: iconSemantics['danger-subtle'].dark }, + + 'stroke-default': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, + 'stroke-hover': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-focus': { light: colorBrands['primary-300'], dark: colorBrands['primary-300'] }, + 'stroke-pressed': { light: strokeSemantics['tertiary'].light, dark: strokeSemantics['tertiary'].dark }, + 'stroke-disabled': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-900'] }, + 'stroke-success': { light: colorBrands['success-500'], dark: colorBrands['success-400'] }, + 'stroke-danger': { light: colorBrands['danger-400'], dark: colorBrands['danger-400'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.tooltip.ts b/src/blocks/theme/colors/semantics/semantics.tooltip.ts index e69de29bb2..8cd53e7c21 100644 --- a/src/blocks/theme/colors/semantics/semantics.tooltip.ts +++ b/src/blocks/theme/colors/semantics/semantics.tooltip.ts @@ -0,0 +1,8 @@ +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const tooltipSemantics = { + 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-primary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, +}; From c76497b8a20b22adcfbbad35e7c3a126083daa88 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Fri, 5 Jul 2024 14:01:00 +0530 Subject: [PATCH 09/18] added all the semantics --- src/blocks/theme/Theme.ts | 0 src/blocks/theme/colors/colors.semantics.ts | 29 ++++++++++--------- .../colors/semantics/semantics.button.ts | 2 +- .../theme/colors/semantics/semantics.toast.ts | 26 +++++++++++++++++ 4 files changed, 42 insertions(+), 15 deletions(-) create mode 100644 src/blocks/theme/Theme.ts create mode 100644 src/blocks/theme/colors/semantics/semantics.toast.ts diff --git a/src/blocks/theme/Theme.ts b/src/blocks/theme/Theme.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 7539486481..095130719d 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -1,5 +1,5 @@ import { - SecondaryButtonSemantics, + secondaryButtonSemantics, dangerButtonSemantics, dangerSecondaryButtonSemantics, outlineButtonSemantics, @@ -15,24 +15,25 @@ import { surfaceSemantics } from './semantics/semantics.surface'; import { switchSemantics } from './semantics/semantics.switch'; import { textSemantics } from './semantics/semantics.text'; import { textAreaSemantics } from './semantics/semantics.textarea'; +import { toastSemantics } from './semantics/semantics.toast'; import { tooltipSemantics } from './semantics/semantics.tooltip'; export const colorSemantics = { - 'button-primary': primaryButtonSemantics, - 'button-secondary': SecondaryButtonSemantics, - 'button-tertiary': tertiaryButtonSemantics, - 'button-outline': outlineButtonSemantics, - 'button-danger': dangerButtonSemantics, - 'button-danger-secondary': dangerSecondaryButtonSemantics, - dropdown: dropdownSemantics, + 'components-button-primary': primaryButtonSemantics, + 'components-button-secondary': secondaryButtonSemantics, + 'components-button-tertiary': tertiaryButtonSemantics, + 'components-button-outline': outlineButtonSemantics, + 'components-button-danger': dangerButtonSemantics, + 'components-button-danger-secondary': dangerSecondaryButtonSemantics, + 'components-dropdown': dropdownSemantics, icon: iconSemantics, - 'input-field': inputSemantics, - 'radio-button': radioSemantics, + 'components-input-field': inputSemantics, + 'components-radio-button': radioSemantics, surface: surfaceSemantics, stroke: strokeSemantics, text: textSemantics, - textarea: textAreaSemantics, - toast: {}, - 'toggle-switch': switchSemantics, - tooltip: tooltipSemantics, + 'components-textarea': textAreaSemantics, + 'components-toast': toastSemantics, + 'components-toggle-switch': switchSemantics, + 'components-tooltip': tooltipSemantics, }; diff --git a/src/blocks/theme/colors/semantics/semantics.button.ts b/src/blocks/theme/colors/semantics/semantics.button.ts index 833b1f77b6..7be1972ed3 100644 --- a/src/blocks/theme/colors/semantics/semantics.button.ts +++ b/src/blocks/theme/colors/semantics/semantics.button.ts @@ -21,7 +21,7 @@ export const primaryButtonSemantics = { 'stroke-focus': { light: colorBrands['primary-700'], dark: colorBrands['primary-200'] }, }; -export const SecondaryButtonSemantics = { +export const secondaryButtonSemantics = { 'background-default': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] }, 'background-hover': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-700'] }, 'background-pressed': { light: colorBrands['neutral-300'], dark: colorBrands['neutral-1000'] }, diff --git a/src/blocks/theme/colors/semantics/semantics.toast.ts b/src/blocks/theme/colors/semantics/semantics.toast.ts new file mode 100644 index 0000000000..383ae270cf --- /dev/null +++ b/src/blocks/theme/colors/semantics/semantics.toast.ts @@ -0,0 +1,26 @@ +import { colorBrands } from '../colors.brands'; +import { colorPrimitives } from '../colors.primitives'; +import { iconSemantics } from './semantics.icon'; +import { strokeSemantics } from './semantics.stroke'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const toastSemantics = { + 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, + 'background-success': { light: colorPrimitives['white-100'], dark: surfaceSemantics['success-bold'].dark }, + 'background-warning': { light: surfaceSemantics['danger-bold'].light, dark: surfaceSemantics['danger-bold'].dark }, + 'background-error': { light: surfaceSemantics['warning-bold'].light, dark: surfaceSemantics['warning-bold'].dark }, + 'background-info': { light: surfaceSemantics['info-bold'].light, dark: surfaceSemantics['info-bold'].dark }, + + 'stroke-bg': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-secondary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, + 'text-link': { light: colorPrimitives['pink-700'], dark: colorPrimitives['pink-400'] }, + + 'icon-success': { light: colorPrimitives['green-400'], dark: colorBrands['success-300'] }, + 'icon-warning': { light: colorPrimitives['red-700'], dark: colorBrands['danger-600'] }, + 'icon-error': { light: colorPrimitives['yellow-400'], dark: colorBrands['warning-300'] }, + 'icon-info': { light: colorPrimitives['blue-600'], dark: colorBrands['info-500'] }, + 'icon-default': { light: iconSemantics['primary'].light, dark: iconSemantics['primary'].dark }, +}; From 7b7cde066c3448b8bb285cb57a191dcd2fa54027 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Sun, 7 Jul 2024 17:19:24 +0530 Subject: [PATCH 10/18] added new theme support --- src/App.tsx | 30 +++++++--------- src/blocks/index.ts | 3 +- src/blocks/theme/Theme.ts | 36 +++++++++++++++++++ src/blocks/theme/colors/colors.semantics.ts | 26 +++++++------- .../colors/semantics/semantics.checkbox.ts | 0 src/blocks/theme/index.ts | 2 ++ .../semantics/semantics.button.ts | 4 +-- .../theme/semantics/semantics.checkbox.ts | 18 ++++++++++ .../semantics/semantics.dropdown.ts | 4 +-- .../{colors => }/semantics/semantics.icon.ts | 2 +- .../{colors => }/semantics/semantics.input.ts | 4 +-- .../{colors => }/semantics/semantics.radio.ts | 0 .../semantics/semantics.stroke.ts | 2 +- .../semantics/semantics.surface.ts | 4 +-- .../semantics/semantics.switch.ts | 4 +-- .../{colors => }/semantics/semantics.text.ts | 4 +-- .../semantics/semantics.textarea.ts | 4 +-- .../{colors => }/semantics/semantics.toast.ts | 4 +-- .../semantics/semantics.tooltip.ts | 0 .../theme/variables/variables.borderSize.ts | 10 +++--- src/config/Themization.js | 8 +++++ 21 files changed, 115 insertions(+), 54 deletions(-) delete mode 100644 src/blocks/theme/colors/semantics/semantics.checkbox.ts rename src/blocks/theme/{colors => }/semantics/semantics.button.ts (98%) create mode 100644 src/blocks/theme/semantics/semantics.checkbox.ts rename src/blocks/theme/{colors => }/semantics/semantics.dropdown.ts (95%) rename src/blocks/theme/{colors => }/semantics/semantics.icon.ts (96%) rename src/blocks/theme/{colors => }/semantics/semantics.input.ts (95%) rename src/blocks/theme/{colors => }/semantics/semantics.radio.ts (100%) rename src/blocks/theme/{colors => }/semantics/semantics.stroke.ts (96%) rename src/blocks/theme/{colors => }/semantics/semantics.surface.ts (93%) rename src/blocks/theme/{colors => }/semantics/semantics.switch.ts (90%) rename src/blocks/theme/{colors => }/semantics/semantics.text.ts (94%) rename src/blocks/theme/{colors => }/semantics/semantics.textarea.ts (95%) rename src/blocks/theme/{colors => }/semantics/semantics.toast.ts (93%) rename src/blocks/theme/{colors => }/semantics/semantics.tooltip.ts (100%) diff --git a/src/App.tsx b/src/App.tsx index 1b41d66738..58397fc091 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -52,6 +52,7 @@ import SpaceContextProvider from 'contexts/SpaceContext'; import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection'; import { blocksColors } from 'blocks'; import { textVariants } from 'blocks/text/Text.constants'; +import { getBlocksGlobalStyles } from 'blocks'; dotenv.config(); @@ -77,6 +78,8 @@ const GlobalStyle = createGlobalStyle` padding-right: 0 !important; } :root{ + + /* deprecated */ /* Spaces */ --s0: 0px; --s1: 4px; @@ -96,6 +99,7 @@ const GlobalStyle = createGlobalStyle` --s15: 60px; // TODO: Add more as needed + /* deprecated */ /* Border Radius */ --r0: 0px; --r1: 4px; @@ -109,28 +113,18 @@ const GlobalStyle = createGlobalStyle` --r9: 36px; --r10: 40px; // TODO: Add more as needed - - /* Font Family */ - --font-family: 'Strawford', 'Source Sans Pro', Helvetica, sans-serif; - + + /* deprecated */ /* Colors */ ${Object.entries(blocksColors) .map(([colorName, code]) => `--${colorName}: ${code};`) .join('')} - - /* Typography Variants */ - ${Object.entries(textVariants) - .map( - ([fontVariant, value]) => ` - --${fontVariant}-font-size: ${value.fontSize}; - --${fontVariant}-line-height: ${value.lineHeight}; - --${fontVariant}-font-weight: ${value.fontWeight}; - ${value.fontStyle ? `--${fontVariant}-font-style: ${value.fontStyle};` : ''} - ${value.letterSpacing ? `--${fontVariant}-letter-spacing: ${value.letterSpacing};` : ''} - ${value.textTransform ? `--${fontVariant}-text-transform: ${value.textTransform};` : ''} - ` - ) - .join('')} + + /* Font Family */ + --font-family: 'Strawford', 'Source Sans Pro', Helvetica, sans-serif; + + /* New blocks theme css variables*/ + ${(props) => getBlocksGlobalStyles(props.theme.blocksTheme)} } `; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 0c4ffec8cc..fa75e4d458 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -11,9 +11,10 @@ export { Text, type TextProps } from './text'; export { Tooltip, type TooltipProps } from './tooltip'; export * from './Blocks.colors'; -export * from './Blocks.constants'; export * from './Blocks.types'; export * from './Blocks.utils'; export * from './icons'; export * from './illustrations'; + +export * from './theme'; diff --git a/src/blocks/theme/Theme.ts b/src/blocks/theme/Theme.ts index e69de29bb2..6390ad41b4 100644 --- a/src/blocks/theme/Theme.ts +++ b/src/blocks/theme/Theme.ts @@ -0,0 +1,36 @@ +import { colorSemantics } from './colors/colors.semantics'; +import { blurVariables } from './variables/variables.blur'; +import { borderRadiusVariables } from './variables/variables.borderRadius'; +import { borderSizeVariables } from './variables/variables.borderSize'; +import { opacityVariables } from './variables/variables.opacity'; +import { spacingVariables } from './variables/variables.spacing'; + +const createTheme = (mode: 'light' | 'dark') => ({ + colors: Object.entries(colorSemantics).reduce((acc, [semanticName, sematicsVariants]) => { + Object.entries(sematicsVariants).forEach(([variantKey, variantValue]) => { + acc[`${semanticName}-${variantKey}`] = variantValue[mode]; + }); + return acc; + }, {}), + blur: blurVariables, + borderRadius: borderRadiusVariables, + borderSize: borderSizeVariables, + opacity: opacityVariables, + spacing: spacingVariables, +}); + +const blocksTheme = { + light: createTheme('light'), + dark: createTheme('dark'), +}; + +const getBlocksGlobalStyles = (theme: any) => + Object.values(theme) + .map((value) => + Object.entries(value as any) + .map(([key, value]) => `--${key}: ${value};`) + .join('') + ) + .join(''); + +export { blocksTheme, getBlocksGlobalStyles }; diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 095130719d..4f1ab43a85 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -5,18 +5,19 @@ import { outlineButtonSemantics, primaryButtonSemantics, tertiaryButtonSemantics, -} from './semantics/semantics.button'; -import { dropdownSemantics } from './semantics/semantics.dropdown'; -import { iconSemantics } from './semantics/semantics.icon'; -import { inputSemantics } from './semantics/semantics.input'; -import { radioSemantics } from './semantics/semantics.radio'; -import { strokeSemantics } from './semantics/semantics.stroke'; -import { surfaceSemantics } from './semantics/semantics.surface'; -import { switchSemantics } from './semantics/semantics.switch'; -import { textSemantics } from './semantics/semantics.text'; -import { textAreaSemantics } from './semantics/semantics.textarea'; -import { toastSemantics } from './semantics/semantics.toast'; -import { tooltipSemantics } from './semantics/semantics.tooltip'; +} from '../semantics/semantics.button'; +import { checkboxSemantics } from '../semantics/semantics.checkbox'; +import { dropdownSemantics } from '../semantics/semantics.dropdown'; +import { iconSemantics } from '../semantics/semantics.icon'; +import { inputSemantics } from '../semantics/semantics.input'; +import { radioSemantics } from '../semantics/semantics.radio'; +import { strokeSemantics } from '../semantics/semantics.stroke'; +import { surfaceSemantics } from '../semantics/semantics.surface'; +import { switchSemantics } from '../semantics/semantics.switch'; +import { textSemantics } from '../semantics/semantics.text'; +import { textAreaSemantics } from '../semantics/semantics.textarea'; +import { toastSemantics } from '../semantics/semantics.toast'; +import { tooltipSemantics } from '../semantics/semantics.tooltip'; export const colorSemantics = { 'components-button-primary': primaryButtonSemantics, @@ -25,6 +26,7 @@ export const colorSemantics = { 'components-button-outline': outlineButtonSemantics, 'components-button-danger': dangerButtonSemantics, 'components-button-danger-secondary': dangerSecondaryButtonSemantics, + 'components-checkbox': checkboxSemantics, 'components-dropdown': dropdownSemantics, icon: iconSemantics, 'components-input-field': inputSemantics, diff --git a/src/blocks/theme/colors/semantics/semantics.checkbox.ts b/src/blocks/theme/colors/semantics/semantics.checkbox.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/blocks/theme/index.ts b/src/blocks/theme/index.ts index ffbda1698c..7c84b0b29f 100644 --- a/src/blocks/theme/index.ts +++ b/src/blocks/theme/index.ts @@ -4,6 +4,8 @@ export * from './colors/colors.semantics'; export * from './device/theme.device'; +export * from './Theme'; + export * from './variables/variables.blur'; export * from './variables/variables.borderRadius'; export * from './variables/variables.borderSize'; diff --git a/src/blocks/theme/colors/semantics/semantics.button.ts b/src/blocks/theme/semantics/semantics.button.ts similarity index 98% rename from src/blocks/theme/colors/semantics/semantics.button.ts rename to src/blocks/theme/semantics/semantics.button.ts index 7be1972ed3..7f66fa870b 100644 --- a/src/blocks/theme/colors/semantics/semantics.button.ts +++ b/src/blocks/theme/semantics/semantics.button.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/semantics/semantics.checkbox.ts b/src/blocks/theme/semantics/semantics.checkbox.ts new file mode 100644 index 0000000000..28206a3d70 --- /dev/null +++ b/src/blocks/theme/semantics/semantics.checkbox.ts @@ -0,0 +1,18 @@ +import { colorPrimitives } from '../colors/colors.primitives'; +import { surfaceSemantics } from './semantics.surface'; +import { textSemantics } from './semantics.text'; + +export const checkboxSemantics = { + 'background-default': { light: surfaceSemantics['primary'].light, dark: surfaceSemantics['primary'].dark }, + 'background-selected': { light: surfaceSemantics['brand-medium'].light, dark: surfaceSemantics['brand-medium'].dark }, + 'background-disabled': { light: surfaceSemantics['disabled'].light, dark: surfaceSemantics['disabled'].dark }, + + 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark }, + 'text-secondary': { light: textSemantics['secondary'].light, dark: textSemantics['secondary'].dark }, + 'text-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'stroke-default': { light: textSemantics['brand-medium'].light, dark: textSemantics['brand-medium'].dark }, + 'stroke-disabled': { light: textSemantics['disabled'].light, dark: textSemantics['disabled'].dark }, + + 'icon-default': { light: colorPrimitives['white-100'], dark: colorPrimitives['white-100'] }, +}; diff --git a/src/blocks/theme/colors/semantics/semantics.dropdown.ts b/src/blocks/theme/semantics/semantics.dropdown.ts similarity index 95% rename from src/blocks/theme/colors/semantics/semantics.dropdown.ts rename to src/blocks/theme/semantics/semantics.dropdown.ts index 200cf77179..dfc5a63318 100644 --- a/src/blocks/theme/colors/semantics/semantics.dropdown.ts +++ b/src/blocks/theme/semantics/semantics.dropdown.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/colors/semantics/semantics.icon.ts b/src/blocks/theme/semantics/semantics.icon.ts similarity index 96% rename from src/blocks/theme/colors/semantics/semantics.icon.ts rename to src/blocks/theme/semantics/semantics.icon.ts index 86f009e1cd..971ea38aff 100644 --- a/src/blocks/theme/colors/semantics/semantics.icon.ts +++ b/src/blocks/theme/semantics/semantics.icon.ts @@ -1,4 +1,4 @@ -import { colorBrands } from '../colors.brands'; +import { colorBrands } from '../colors/colors.brands'; export const iconSemantics = { primary: { light: colorBrands['neutral-900'], dark: colorBrands['neutral-400'] }, diff --git a/src/blocks/theme/colors/semantics/semantics.input.ts b/src/blocks/theme/semantics/semantics.input.ts similarity index 95% rename from src/blocks/theme/colors/semantics/semantics.input.ts rename to src/blocks/theme/semantics/semantics.input.ts index 1410f1201d..2c75b96dbf 100644 --- a/src/blocks/theme/colors/semantics/semantics.input.ts +++ b/src/blocks/theme/semantics/semantics.input.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/colors/semantics/semantics.radio.ts b/src/blocks/theme/semantics/semantics.radio.ts similarity index 100% rename from src/blocks/theme/colors/semantics/semantics.radio.ts rename to src/blocks/theme/semantics/semantics.radio.ts diff --git a/src/blocks/theme/colors/semantics/semantics.stroke.ts b/src/blocks/theme/semantics/semantics.stroke.ts similarity index 96% rename from src/blocks/theme/colors/semantics/semantics.stroke.ts rename to src/blocks/theme/semantics/semantics.stroke.ts index 6268ec7169..b5dc678948 100644 --- a/src/blocks/theme/colors/semantics/semantics.stroke.ts +++ b/src/blocks/theme/semantics/semantics.stroke.ts @@ -1,4 +1,4 @@ -import { colorBrands } from '../colors.brands'; +import { colorBrands } from '../colors/colors.brands'; export const strokeSemantics = { primary: { light: colorBrands['neutral-100'], dark: colorBrands['neutral-900'] }, diff --git a/src/blocks/theme/colors/semantics/semantics.surface.ts b/src/blocks/theme/semantics/semantics.surface.ts similarity index 93% rename from src/blocks/theme/colors/semantics/semantics.surface.ts rename to src/blocks/theme/semantics/semantics.surface.ts index 0740532345..da6792ffbc 100644 --- a/src/blocks/theme/colors/semantics/semantics.surface.ts +++ b/src/blocks/theme/semantics/semantics.surface.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; export const surfaceSemantics = { primary: { light: colorPrimitives['white-100'], dark: colorBrands['neutral-900'] }, diff --git a/src/blocks/theme/colors/semantics/semantics.switch.ts b/src/blocks/theme/semantics/semantics.switch.ts similarity index 90% rename from src/blocks/theme/colors/semantics/semantics.switch.ts rename to src/blocks/theme/semantics/semantics.switch.ts index b6466230e4..6bf08080c7 100644 --- a/src/blocks/theme/colors/semantics/semantics.switch.ts +++ b/src/blocks/theme/semantics/semantics.switch.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/colors/semantics/semantics.text.ts b/src/blocks/theme/semantics/semantics.text.ts similarity index 94% rename from src/blocks/theme/colors/semantics/semantics.text.ts rename to src/blocks/theme/semantics/semantics.text.ts index 417b296c45..192693fd37 100644 --- a/src/blocks/theme/colors/semantics/semantics.text.ts +++ b/src/blocks/theme/semantics/semantics.text.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; export const textSemantics = { primary: { light: colorBrands['neutral-1000'], dark: colorBrands['neutral-100'] }, diff --git a/src/blocks/theme/colors/semantics/semantics.textarea.ts b/src/blocks/theme/semantics/semantics.textarea.ts similarity index 95% rename from src/blocks/theme/colors/semantics/semantics.textarea.ts rename to src/blocks/theme/semantics/semantics.textarea.ts index de0dfd1531..9a64015844 100644 --- a/src/blocks/theme/colors/semantics/semantics.textarea.ts +++ b/src/blocks/theme/semantics/semantics.textarea.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/colors/semantics/semantics.toast.ts b/src/blocks/theme/semantics/semantics.toast.ts similarity index 93% rename from src/blocks/theme/colors/semantics/semantics.toast.ts rename to src/blocks/theme/semantics/semantics.toast.ts index 383ae270cf..2fe99313dc 100644 --- a/src/blocks/theme/colors/semantics/semantics.toast.ts +++ b/src/blocks/theme/semantics/semantics.toast.ts @@ -1,5 +1,5 @@ -import { colorBrands } from '../colors.brands'; -import { colorPrimitives } from '../colors.primitives'; +import { colorBrands } from '../colors/colors.brands'; +import { colorPrimitives } from '../colors/colors.primitives'; import { iconSemantics } from './semantics.icon'; import { strokeSemantics } from './semantics.stroke'; import { surfaceSemantics } from './semantics.surface'; diff --git a/src/blocks/theme/colors/semantics/semantics.tooltip.ts b/src/blocks/theme/semantics/semantics.tooltip.ts similarity index 100% rename from src/blocks/theme/colors/semantics/semantics.tooltip.ts rename to src/blocks/theme/semantics/semantics.tooltip.ts diff --git a/src/blocks/theme/variables/variables.borderSize.ts b/src/blocks/theme/variables/variables.borderSize.ts index 1e9e7ee81d..e2e5cd466b 100644 --- a/src/blocks/theme/variables/variables.borderSize.ts +++ b/src/blocks/theme/variables/variables.borderSize.ts @@ -1,7 +1,7 @@ export const borderSizeVariables = { - 'spacing-xs': '0.5px', - 'spacing-sm': '1px', - 'spacing-md': '2px', - 'spacing-lg': '3px', - 'spacing-xl': '4px', + 'border-xs': '0.5px', + 'border-sm': '1px', + 'border-md': '2px', + 'border-lg': '3px', + 'border-xl': '4px', }; diff --git a/src/config/Themization.js b/src/config/Themization.js index 8c24c203bc..8a1933a90e 100644 --- a/src/config/Themization.js +++ b/src/config/Themization.js @@ -1,7 +1,12 @@ +import { blocksTheme } from 'blocks/theme/Theme'; + // Define what props.theme will look like const themeLight = { scheme: 'light', + // theme for the new blocks design system + blocksTheme: blocksTheme.light, + // Default Theme default: { bg: '#FFF', @@ -311,6 +316,9 @@ const themeLight = { const themeDark = { scheme: 'dark', + // theme for the new blocks design system + blocksTheme: blocksTheme.dark, + // Default Theme default: { bg: '#202124', From 6d37d80b708906a0e43b1d9001c12bf2a75647cf Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Sun, 7 Jul 2024 17:31:05 +0530 Subject: [PATCH 11/18] added theme type --- src/App.tsx | 1 - src/blocks/theme/Theme.ts | 18 ++++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 58397fc091..bc3f4bec42 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,7 +51,6 @@ import SpaceComponentContextProvider from 'contexts/SpaceComponentsContext'; import SpaceContextProvider from 'contexts/SpaceContext'; import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection'; import { blocksColors } from 'blocks'; -import { textVariants } from 'blocks/text/Text.constants'; import { getBlocksGlobalStyles } from 'blocks'; dotenv.config(); diff --git a/src/blocks/theme/Theme.ts b/src/blocks/theme/Theme.ts index 6390ad41b4..441136acba 100644 --- a/src/blocks/theme/Theme.ts +++ b/src/blocks/theme/Theme.ts @@ -5,13 +5,23 @@ import { borderSizeVariables } from './variables/variables.borderSize'; import { opacityVariables } from './variables/variables.opacity'; import { spacingVariables } from './variables/variables.spacing'; -const createTheme = (mode: 'light' | 'dark') => ({ +//TODO: fix the colors type +export type Theme = { + colors: { [key: string]: string }; + blur: typeof blurVariables; + borderRadius: typeof borderRadiusVariables; + borderSize: typeof borderSizeVariables; + opacity: typeof opacityVariables; + spacing: typeof spacingVariables; +}; + +const createTheme = (mode: 'light' | 'dark'): Theme => ({ colors: Object.entries(colorSemantics).reduce((acc, [semanticName, sematicsVariants]) => { Object.entries(sematicsVariants).forEach(([variantKey, variantValue]) => { acc[`${semanticName}-${variantKey}`] = variantValue[mode]; }); return acc; - }, {}), + }, {} as { [key: string]: string }), blur: blurVariables, borderRadius: borderRadiusVariables, borderSize: borderSizeVariables, @@ -24,10 +34,10 @@ const blocksTheme = { dark: createTheme('dark'), }; -const getBlocksGlobalStyles = (theme: any) => +const getBlocksGlobalStyles = (theme: Theme) => Object.values(theme) .map((value) => - Object.entries(value as any) + Object.entries(value) .map(([key, value]) => `--${key}: ${value};`) .join('') ) From 3b5d6e74445d2f51f3e3710ce07cc5e5044af85f Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Sun, 7 Jul 2024 17:50:57 +0530 Subject: [PATCH 12/18] updated comment --- src/blocks/Blocks.hooks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/Blocks.hooks.ts b/src/blocks/Blocks.hooks.ts index 0a945de3e9..5dd5f70b88 100644 --- a/src/blocks/Blocks.hooks.ts +++ b/src/blocks/Blocks.hooks.ts @@ -2,7 +2,7 @@ import { themeDark, themeLight } from 'config/Themization'; import { useTheme } from 'styled-components'; import { ThemeMode } from './Blocks.types'; -// TODO: Improve this approach in future +// TODO: Remove this when we remove dependency from this hook type ThemeData = typeof themeLight | typeof themeDark; From d135ee1efbab94ab7d932f1e706daefa5515c4e7 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Mon, 8 Jul 2024 16:03:58 +0530 Subject: [PATCH 13/18] fixed types and file structure --- src/App.tsx | 4 ++-- src/blocks/theme/Theme.ts | 42 ++------------------------------- src/blocks/theme/Theme.types.ts | 25 ++++++++++++++++++++ src/blocks/theme/Theme.utils.ts | 33 ++++++++++++++++++++++++++ src/blocks/theme/index.ts | 11 +-------- 5 files changed, 63 insertions(+), 52 deletions(-) create mode 100644 src/blocks/theme/Theme.types.ts create mode 100644 src/blocks/theme/Theme.utils.ts diff --git a/src/App.tsx b/src/App.tsx index bc3f4bec42..525b47b80e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -51,7 +51,7 @@ import SpaceComponentContextProvider from 'contexts/SpaceComponentsContext'; import SpaceContextProvider from 'contexts/SpaceContext'; import { SpaceWidgetSection } from 'sections/space/SpaceWidgetSection'; import { blocksColors } from 'blocks'; -import { getBlocksGlobalStyles } from 'blocks'; +import { getBlocksCSSVariables } from 'blocks'; dotenv.config(); @@ -123,7 +123,7 @@ const GlobalStyle = createGlobalStyle` --font-family: 'Strawford', 'Source Sans Pro', Helvetica, sans-serif; /* New blocks theme css variables*/ - ${(props) => getBlocksGlobalStyles(props.theme.blocksTheme)} + ${(props) => getBlocksCSSVariables(props.theme.blocksTheme)} } `; diff --git a/src/blocks/theme/Theme.ts b/src/blocks/theme/Theme.ts index 441136acba..48cc30ea92 100644 --- a/src/blocks/theme/Theme.ts +++ b/src/blocks/theme/Theme.ts @@ -1,46 +1,8 @@ -import { colorSemantics } from './colors/colors.semantics'; -import { blurVariables } from './variables/variables.blur'; -import { borderRadiusVariables } from './variables/variables.borderRadius'; -import { borderSizeVariables } from './variables/variables.borderSize'; -import { opacityVariables } from './variables/variables.opacity'; -import { spacingVariables } from './variables/variables.spacing'; - -//TODO: fix the colors type -export type Theme = { - colors: { [key: string]: string }; - blur: typeof blurVariables; - borderRadius: typeof borderRadiusVariables; - borderSize: typeof borderSizeVariables; - opacity: typeof opacityVariables; - spacing: typeof spacingVariables; -}; - -const createTheme = (mode: 'light' | 'dark'): Theme => ({ - colors: Object.entries(colorSemantics).reduce((acc, [semanticName, sematicsVariants]) => { - Object.entries(sematicsVariants).forEach(([variantKey, variantValue]) => { - acc[`${semanticName}-${variantKey}`] = variantValue[mode]; - }); - return acc; - }, {} as { [key: string]: string }), - blur: blurVariables, - borderRadius: borderRadiusVariables, - borderSize: borderSizeVariables, - opacity: opacityVariables, - spacing: spacingVariables, -}); +import { createTheme } from './Theme.utils'; const blocksTheme = { light: createTheme('light'), dark: createTheme('dark'), }; -const getBlocksGlobalStyles = (theme: Theme) => - Object.values(theme) - .map((value) => - Object.entries(value) - .map(([key, value]) => `--${key}: ${value};`) - .join('') - ) - .join(''); - -export { blocksTheme, getBlocksGlobalStyles }; +export { blocksTheme }; diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts new file mode 100644 index 0000000000..1577d79807 --- /dev/null +++ b/src/blocks/theme/Theme.types.ts @@ -0,0 +1,25 @@ +import { colorSemantics } from './colors/colors.semantics'; +import { blurVariables } from './variables/variables.blur'; +import { borderRadiusVariables } from './variables/variables.borderRadius'; +import { borderSizeVariables } from './variables/variables.borderSize'; +import { opacityVariables } from './variables/variables.opacity'; +import { spacingVariables } from './variables/variables.spacing'; + +export type ThemeMode = 'light' | 'dark'; + +type ColorSemantics = typeof colorSemantics; + +type StringKeys = Extract; + +type ThemeColors = { + [K1 in StringKeys as `${K1}-${StringKeys}`]: string; +}; + +export type Theme = { + colors: ThemeColors; + blur: typeof blurVariables; + borderRadius: typeof borderRadiusVariables; + borderSize: typeof borderSizeVariables; + opacity: typeof opacityVariables; + spacing: typeof spacingVariables; +}; diff --git a/src/blocks/theme/Theme.utils.ts b/src/blocks/theme/Theme.utils.ts new file mode 100644 index 0000000000..128346be73 --- /dev/null +++ b/src/blocks/theme/Theme.utils.ts @@ -0,0 +1,33 @@ +import { Theme, ThemeMode } from './Theme.types'; +import { colorSemantics } from './colors/colors.semantics'; +import { blurVariables } from './variables/variables.blur'; +import { borderRadiusVariables } from './variables/variables.borderRadius'; +import { borderSizeVariables } from './variables/variables.borderSize'; +import { opacityVariables } from './variables/variables.opacity'; +import { spacingVariables } from './variables/variables.spacing'; + +const getThemeColors = (mode: ThemeMode) => + Object.entries(colorSemantics).reduce((acc, [semanticName, sematicsVariants]) => { + Object.entries(sematicsVariants).forEach(([variantKey, variantValue]) => { + acc[`${semanticName}-${variantKey}` as keyof Theme['colors']] = variantValue[mode]; + }); + return acc; + }, {} as Theme['colors']); + +export const createTheme = (mode: ThemeMode): Theme => ({ + colors: getThemeColors(mode), + blur: blurVariables, + borderRadius: borderRadiusVariables, + borderSize: borderSizeVariables, + opacity: opacityVariables, + spacing: spacingVariables, +}); + +export const getBlocksCSSVariables = (theme: Theme) => + Object.values(theme) + .map((value) => + Object.entries(value) + .map(([key, value]) => `--${key}: ${value};`) + .join('') + ) + .join(''); diff --git a/src/blocks/theme/index.ts b/src/blocks/theme/index.ts index 7c84b0b29f..30b7cc6bc0 100644 --- a/src/blocks/theme/index.ts +++ b/src/blocks/theme/index.ts @@ -1,13 +1,4 @@ -export * from './colors/colors.brands'; -export * from './colors/colors.primitives'; -export * from './colors/colors.semantics'; - export * from './device/theme.device'; export * from './Theme'; - -export * from './variables/variables.blur'; -export * from './variables/variables.borderRadius'; -export * from './variables/variables.borderSize'; -export * from './variables/variables.opacity'; -export * from './variables/variables.spacing'; +export * from './Theme.utils'; From 3a1d2e89269b85e9f70a219e225fe871f48cf9ca Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Tue, 9 Jul 2024 09:59:54 +0530 Subject: [PATCH 14/18] fixed input semantics name --- src/blocks/theme/colors/colors.semantics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 4f1ab43a85..37fbce3307 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/src/blocks/theme/colors/colors.semantics.ts @@ -29,7 +29,7 @@ export const colorSemantics = { 'components-checkbox': checkboxSemantics, 'components-dropdown': dropdownSemantics, icon: iconSemantics, - 'components-input-field': inputSemantics, + 'components-inputs': inputSemantics, 'components-radio-button': radioSemantics, surface: surfaceSemantics, stroke: strokeSemantics, From 3ba58955747a8cbf129bc494f7a6a727b990aa51 Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Tue, 9 Jul 2024 10:00:30 +0530 Subject: [PATCH 15/18] removed curropt dropdown utils file --- src/blocks/dropdown/Dropdown.utils.tsx | 35 -------------------------- 1 file changed, 35 deletions(-) delete mode 100644 src/blocks/dropdown/Dropdown.utils.tsx diff --git a/src/blocks/dropdown/Dropdown.utils.tsx b/src/blocks/dropdown/Dropdown.utils.tsx deleted file mode 100644 index e726e923f2..0000000000 --- a/src/blocks/dropdown/Dropdown.utils.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { DropdownPosition } from './Dropdown.types'; -import { DropdownMenuContentProps } from '@radix-ui/react-dropdown-menu'; - -export const getDropdownPositionalCSS = (dropdownPosition: DropdownPosition) => { - let style: { - align: DropdownMenuContentProps['align']; - side: DropdownMenuContentProps['side']; - } = { - align: 'center', - side: 'bottom', - }; - - switch (dropdownPosition) { - case 'top': - style = { - align: 'center', - side: 'top', - }; - break; - case 'left': - style = { - align: 'center', - side: 'left', - }; - break; - case 'right': - style = { - align: 'center', - side: 'right', - }; - break; - } - - return style; -}; From 3c6e2963aee90156986da0bfc632fec26888563b Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Tue, 9 Jul 2024 20:22:20 +0530 Subject: [PATCH 16/18] implemented textarea component --- src/blocks/Blocks.types.ts | 4 +- src/blocks/Blocks.utils.ts | 6 +- src/blocks/index.ts | 1 + src/blocks/text/Text.tsx | 4 +- src/blocks/textarea/TextArea.tsx | 179 +++++++++++++++++++++++++++++++ src/blocks/textarea/index.ts | 1 + src/blocks/theme/Theme.types.ts | 6 +- 7 files changed, 196 insertions(+), 5 deletions(-) create mode 100644 src/blocks/textarea/TextArea.tsx create mode 100644 src/blocks/textarea/index.ts diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts index 4c23696399..07145040d5 100644 --- a/src/blocks/Blocks.types.ts +++ b/src/blocks/Blocks.types.ts @@ -1,6 +1,7 @@ import { HTMLAttributes } from 'react'; import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box'; import { blocksColorsLegacy } from './Blocks.colors'; +import { ThemeColors } from './theme/Theme.types'; import { SkeletonResponsiveCSSProperties, SkeletonResponsiveCSSPropertiesData, @@ -57,7 +58,8 @@ export type BlocksColors = keyof BlocksColorData; export type ThemeMode = 'light' | 'dark'; -export type ThemeModeColors = Record; +// TODO: Remove BlocksColors +export type ThemeModeColors = Record; export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none'; diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts index e537e938e2..5797d0cfbe 100644 --- a/src/blocks/Blocks.utils.ts +++ b/src/blocks/Blocks.utils.ts @@ -14,6 +14,7 @@ import { BorderValue, RadiusType, } from './Blocks.types'; +import { ThemeColors } from './theme/Theme.types'; /** * @param propName @@ -135,10 +136,13 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => { }; /** + * @deprecated * @param color * @returns color as a css variable: var(--primary) + * + * // TODO: Remove this function. We don't need it. */ -export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors) => { +export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors | ThemeColors) => { // If color is not given return undefined, to avoid any breakages if (!color) return color; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 72754c803a..391c79191b 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -10,6 +10,7 @@ export { Skeleton, type SkeletonProps } from './skeleton'; export { Tabs, type TabsProps, type TabItem } from './tabs'; export { Text, type TextProps } from './text'; export { Tooltip, type TooltipProps } from './tooltip'; +export { TextArea, type TextAreaProps } from './textarea'; export { TextInput } from './textInput'; export * from './Blocks.colors'; diff --git a/src/blocks/text/Text.tsx b/src/blocks/text/Text.tsx index 4454255f63..7bdd591b82 100644 --- a/src/blocks/text/Text.tsx +++ b/src/blocks/text/Text.tsx @@ -4,6 +4,7 @@ import styled, { FlattenSimpleInterpolation } from 'styled-components'; import { useBlocksTheme } from '../Blocks.hooks'; import { TransformedHTMLAttributes, BlocksColors, ModeProp, ThemeModeColors } from '../Blocks.types'; import { getBlocksColor } from '../Blocks.utils'; +import { ThemeColors } from '../theme/Theme.types'; import { TextAlign, TextHTMLTags, TextResponsiveProps, TextTransform, TextVariants } from './Text.types'; import { getVariantStyles } from './Text.utils'; import { getTextResponsiveCSS } from './Text.utils'; @@ -14,7 +15,7 @@ export type TextProps = { /* Children pass to the Text component */ children?: ReactNode; /* Sets the css property for text color */ - color?: BlocksColors | ThemeModeColors; + color?: BlocksColors | ThemeModeColors | ThemeColors; /* Extra css prop from styled components to apply custom css not supported by Text component */ css?: FlattenSimpleInterpolation; /* For truncating the contents with ... when there's container overflow */ @@ -88,6 +89,7 @@ const StyledText = styled.p.withConfig({ const Text = forwardRef(({ as = 'p', ...props }, ref) => { const { mode } = useBlocksTheme(); return ( + // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error ) => void; + placeholder?: string; + required?: boolean; + resizable?: boolean; + success?: boolean; + totalCount?: number; + value: string; +}; + +const Container = styled.div<{ css?: FlattenSimpleInterpolation }>` + align-items: flex-start; + display: flex; + flex-direction: column; + flex: 1 0 0; + gap: var(--spacing-xxs, 8px); + + /* Custom CSS applied via styled component css prop */ + ${(props) => props.css || ''}; +`; + +const StyledTextArea = styled.textarea<{ + error?: boolean; + success?: boolean; + resizable?: boolean; +}>` + ${({ theme, resizable, success, error }) => { + const colors = theme?.blocksTheme?.colors; + const defaultState = error ? 'danger' : success ? 'success' : 'default'; + const focusState = error ? 'danger' : success ? 'success' : 'focus'; + return css` + align-self: stretch; + align-items: flex-start; + border-radius: var(--radius-xs, 12px); + border: 1.5px solid + var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]}); + background: var( + --components-inputs-background-${defaultState}, + ${colors[`components-inputs-background-${defaultState}`]} + ); + + color: var(--components-inputs-text-default, ${colors['components-inputs-text-default']}); + + display: flex; + + font-family: var(--font-family); + font-size: 14px; + font-style: normal; + font-weight: 400; + + gap: var(--spacing-none, 0px); + + line-height: 20px; + + padding: var(--spacing-xs, 12px); + ::placeholder { + color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']}); + } + + resize: ${resizable ? 'vertical' : 'none'}; + + &:hover { + outline: none; + } + + &:focus { + border: 1.5px solid + var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]}); + outline: none; + } + + &:disabled { + border: 1.5px solid var(--components-inputs-stroke-default, ${colors['components-inputs-stroke-default']}); + background: var(--components-inputs-background-disabled, ${colors['components-inputs-background-disabled']}); + cursor: not-allowed; + color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']}); + } + `; + }} +`; + +const LabelContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +`; + +const LabelTextContainer = styled.div` + display: flex; + align-items: flex-start; + gap: var(--spacing-xxxs, 4px); +`; + +export const TextArea = forwardRef( + ( + { + css, + description, + disabled, + error, + errorMessage, + label, + numberOfLines = 4, + onChange, + placeholder, + required, + resizable, + success, + totalCount, + value, + }, + ref + ) => { + return ( + + {label && ( + + + + {label} + {required && } + + + {totalCount && ( + {`${value?.length || 0} / ${totalCount}`} + )} + + )} + + {description && ( + + {description} + + )} + {errorMessage && ( + + {errorMessage} + + )} + + ); + } +); diff --git a/src/blocks/textarea/index.ts b/src/blocks/textarea/index.ts new file mode 100644 index 0000000000..4853311ce1 --- /dev/null +++ b/src/blocks/textarea/index.ts @@ -0,0 +1 @@ +export * from './TextArea'; diff --git a/src/blocks/theme/Theme.types.ts b/src/blocks/theme/Theme.types.ts index 1577d79807..561efd63cb 100644 --- a/src/blocks/theme/Theme.types.ts +++ b/src/blocks/theme/Theme.types.ts @@ -11,12 +11,14 @@ type ColorSemantics = typeof colorSemantics; type StringKeys = Extract; -type ThemeColors = { +type ThemeColorsConfig = { [K1 in StringKeys as `${K1}-${StringKeys}`]: string; }; +export type ThemeColors = keyof ThemeColorsConfig; + export type Theme = { - colors: ThemeColors; + colors: ThemeColorsConfig; blur: typeof blurVariables; borderRadius: typeof borderRadiusVariables; borderSize: typeof borderSizeVariables; From 985bd114494bd0c67d8678ddaa3789b5a2ca4dea Mon Sep 17 00:00:00 2001 From: rohitmalhotra1420 Date: Tue, 9 Jul 2024 20:47:30 +0530 Subject: [PATCH 17/18] added new color typesin Box --- src/blocks/box/Box.tsx | 1 + src/blocks/box/Box.types.ts | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/blocks/box/Box.tsx b/src/blocks/box/Box.tsx index 80d5ae4f7a..4a25537cc1 100644 --- a/src/blocks/box/Box.tsx +++ b/src/blocks/box/Box.tsx @@ -32,6 +32,7 @@ const StyledBox = styled.div.withConfig({ `; const Box = forwardRef(({ as = 'div', ...props }, ref) => { const { mode } = useBlocksTheme(); + // TODO: We need to remove color dependency from BlocksColors | ThemeModeColors to fix this error return ( Date: Wed, 10 Jul 2024 11:52:09 +0530 Subject: [PATCH 18/18] fixed texarea description color --- src/blocks/textarea/TextArea.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/blocks/textarea/TextArea.tsx b/src/blocks/textarea/TextArea.tsx index a9a269b377..501ef1079d 100644 --- a/src/blocks/textarea/TextArea.tsx +++ b/src/blocks/textarea/TextArea.tsx @@ -160,7 +160,13 @@ export const TextArea = forwardRef( {description && ( {description}