DApp-1708 added support for new css variables and semantics in blocks components

src/blocks/Blocks.constants.ts

@@ -0,0 +1,7 @@
+export const newRadiusRegex = /\bradius-[a-z]+\b/g;
+
+export const oldRadiusRegex = /\br[0-9]+\b/g;
+
+export const newSpacingRegex = /\bspacing-[a-z]+\b/g;
+
+export const oldSpacingRegex = /\bs[0-9]+\b/g;

src/blocks/Blocks.types.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
 import { blocksColorsLegacy } from './Blocks.colors';
-import { ThemeColors } from './theme/Theme.types';
+import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types';
 import {
  SkeletonResponsiveCSSProperties,
  SkeletonResponsiveCSSPropertiesData,
@@ -21,9 +21,23 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | '
 
 export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
 
-export type RadiusType = `r${number}` | `r${number} r${number}` | `r${number} r${number} r${number} r${number}`;
-
-export type SpaceType = `s${number}` | `s${number} s${number}` | `s${number} s${number} s${number} s${number}`;
+// Remove old RadiusType types
+export type BlocksRadiusType =
+ | `r${number}`
+ | `r${number} r${number}`
+ | `r${number} r${number} r${number} r${number}`
+ | ThemeBorderRadius
+ | `${ThemeBorderRadius} ${ThemeBorderRadius}`
+ | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`;
+
+// Remove old SpaceType types
+export type BlocksSpaceType =
+ | `s${number}`
+ | `s${number} s${number}`
+ | `s${number} s${number} s${number} s${number}`
+ | ThemeSpacing
+ | `${ThemeSpacing} ${ThemeSpacing}`
+ | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`;
 
 export type PixelValue = `${number}px`;
 
@@ -58,10 +72,11 @@ export type BlocksColors = keyof BlocksColorData;
 
 export type ThemeMode = 'light' | 'dark';
 
-// TODO: Remove BlocksColors
+// TODO: Remove ThemeModeColors
 export type ThemeModeColors = Record<ThemeMode, BlocksColors | ThemeColors>;
 
-export type BorderValue = `${number}px ${string} ${BlocksColors}` | 'none';
+// TODO: Remove the blocks colors border size
+export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none';
 
 export type ThemeModeBorder = Record<ThemeMode, BorderValue>;
 

src/blocks/Blocks.utils.ts

@@ -12,9 +12,10 @@ import {
  ThemeMode,
  ThemeModeBorder,
  BorderValue,
- RadiusType,
+ BlocksRadiusType,
 } from './Blocks.types';
 import { ThemeColors } from './theme/Theme.types';
+import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants';
 
 /**
  * @param propName
@@ -24,7 +25,10 @@ import { ThemeColors } from './theme/Theme.types';
 const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => {
  if (propName === 'padding' || propName === 'margin') {
  if (typeof value === 'string') {
- return value.replace(/\b(\w+)\b/g, 'var(--$1)');
+ return value.replace(
+ newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex,
+ (match) => `var(--${match})`
+ );
  }
  } else if (propName === 'gap' || propName === 'border-radius') {
  return `var(--${value})`;
@@ -176,12 +180,14 @@ export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeMod
  * @param radius
  * @returns
  */
-export const getBlocksBorderRadius = (radius?: RadiusType) => {
+export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => {
  // If border-radius is not given return undefined, to avoid any breakages
  if (!radius) return radius;
 
- return radius.replace(/\b(\w+)\b/g, 'var(--$1)');
+ const result = radius.replace(
+ newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex,
+ (match) => `var(--${match})`
+ );
 
- // If passed a design system border-radius then use radius as a variable
- return `var(--${radius})`;
+ return result;
 };

src/blocks/box/Box.types.ts

@@ -3,9 +3,9 @@ import { CSSProperties, ReactNode } from 'react';
 import {
  BlocksColors,
  BorderValue,
- RadiusType,
+ BlocksRadiusType,
  ResponsiveProp,
- SpaceType,
+ BlocksSpaceType,
  ThemeModeBorder,
  ThemeModeColors,
  ValueOf,
@@ -21,15 +21,15 @@ export type BoxResponsiveProps = {
  /* Sets flex-direction css property */
  flexDirection?: ResponsiveProp<CSSProperties['flexDirection']>;
  /* Sets gap between the elements */
- gap?: ResponsiveProp<SpaceType>;
+ gap?: ResponsiveProp<BlocksSpaceType>;
  /* Sets display css property */
  display?: ResponsiveProp<CSSProperties['display']>;
  /* Sets height css property */
  height?: ResponsiveProp<string>;
  /* Sets justify-content css property */
  justifyContent?: ResponsiveProp<CSSProperties['justifyContent']>;
  /* Sets margin css property */
- margin?: ResponsiveProp<SpaceType>;
+ margin?: ResponsiveProp<BlocksSpaceType>;
  /* Sets max-height css property */
  maxHeight?: ResponsiveProp<string>;
  /* Sets min-height css property */
@@ -39,7 +39,7 @@ export type BoxResponsiveProps = {
  /* Sets min-width css property */
  minWidth?: ResponsiveProp<string>;
  /* Sets padding css property */
- padding?: ResponsiveProp<SpaceType>;
+ padding?: ResponsiveProp<BlocksSpaceType>;
  /* Sets width css property */
  width?: ResponsiveProp<string>;
 };
@@ -48,7 +48,7 @@ export type BoxNonResponsiveProps = {
  /* Sets border css property */
  border?: BorderValue | ThemeModeBorder;
  /* Sets border-radius css property */
- borderRadius?: RadiusType;
+ borderRadius?: BlocksRadiusType;
  /* Sets background-color css property */
  backgroundColor?: BlocksColors | ThemeModeColors | ThemeColors;
  /* Sets color css property */

src/blocks/hoverableSVG/HoverableSVG.tsx

@@ -4,31 +4,33 @@ import { useBlocksTheme } from '../Blocks.hooks';
 import {
  BlocksColors,
  ThemeModeColors,
- SpaceType,
+ BlocksSpaceType,
  ModeProp,
  TransformedHTMLAttributes,
- RadiusType,
+ BlocksRadiusType,
 } from '../Blocks.types';
 import { getBlocksColor, getBlocksBorderRadius } from '../Blocks.utils';
+import { ThemeColors } from '../theme/Theme.types';
+
 export type HoverableSVGProps = {
  /* Icon component */
  icon: React.ReactNode;
  /* Sets the initial color for SVG */
- defaultColor?: BlocksColors | ThemeModeColors;
+ defaultColor?: BlocksColors | ThemeModeColors | ThemeColors;
  /* Sets button as disabled */
  disabled?: boolean;
  /* Sets the hover color for SVG */
- hoverColor?: BlocksColors | ThemeModeColors;
+ hoverColor?: BlocksColors | ThemeModeColors | ThemeColors;
  /* Sets the initial background color for SVG */
- defaultBackground?: BlocksColors | ThemeModeColors;
+ defaultBackground?: BlocksColors | ThemeModeColors | ThemeColors;
  /* Sets the initial background color for SVG */
- hoverBackground?: BlocksColors | ThemeModeColors;
+ hoverBackground?: BlocksColors | ThemeModeColors | ThemeColors;
  /* Sets the padding for SVG button container */
- padding?: SpaceType;
+ padding?: BlocksSpaceType;
  /* Sets the margin for SVG button container */
- margin?: SpaceType;
+ margin?: BlocksSpaceType;
  /* Sets the margin for SVG button container */
- borderRadius?: RadiusType;
+ borderRadius?: BlocksRadiusType;
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button.withConfig({

src/blocks/separator/Separator.types.ts

@@ -1,11 +1,11 @@
-import { TransformedHTMLAttributes, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types';
+import { TransformedHTMLAttributes, ResponsiveProp, BlocksSpaceType, ValueOf } from '../Blocks.types';
 import { FlattenSimpleInterpolation } from 'styled-components';
 
 export type SeparatorResponsiveProps = {
  /* Sets height css property */
  height?: ResponsiveProp<string>;
  /* Sets margin css property */
- margin?: ResponsiveProp<SpaceType>;
+ margin?: ResponsiveProp<BlocksSpaceType>;
  /* Sets width css property */
  width?: ResponsiveProp<string>;
 };

src/blocks/skeleton/Skeleton.types.ts

@@ -1,17 +1,23 @@
 import { ReactNode } from 'react';
 
-import type { TransformedHTMLAttributes, RadiusType, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types';
+import type {
+ TransformedHTMLAttributes,
+ BlocksRadiusType,
+ ResponsiveProp,
+ BlocksSpaceType,
+ ValueOf,
+} from '../Blocks.types';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 
 export type SkeletonResponsiveProps = {
  /* Sets height css property */
  height?: ResponsiveProp<string>;
  /* Sets margin css property */
- margin?: ResponsiveProp<SpaceType>;
+ margin?: ResponsiveProp<BlocksSpaceType>;
  /* Sets width css property */
  width?: ResponsiveProp<string>;
  /* Sets border radius css property */
- borderRadius?: ResponsiveProp<RadiusType>;
+ borderRadius?: ResponsiveProp<BlocksRadiusType>;
 };
 
 export type SkeletonProps = SkeletonResponsiveProps &

src/blocks/theme/Theme.types.ts

@@ -25,3 +25,9 @@ export type Theme = {
  opacity: typeof opacityVariables;
  spacing: typeof spacingVariables;
 };
+
+export type ThemeBorderRadius = keyof Theme['borderRadius'];
+
+export type ThemeBorderSize = keyof Theme['borderSize'];
+
+export type ThemeSpacing = keyof Theme['spacing'];