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,25 @@ 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 BlocksGapType = ThemeSpacing | `${ThemeSpacing} ${ThemeSpacing}`;
 
 export type PixelValue = `${number}px`;
 
@@ -58,10 +74,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,12 +3,13 @@ import { CSSProperties, ReactNode } from 'react';
 import {
   BlocksColors,
   BorderValue,
-  RadiusType,
+  BlocksRadiusType,
   ResponsiveProp,
-  SpaceType,
+  BlocksSpaceType,
   ThemeModeBorder,
   ThemeModeColors,
   ValueOf,
+  BlocksGapType,
 } from '../Blocks.types';
 import { FlattenSimpleInterpolation } from 'styled-components';
 import { ThemeColors } from 'blocks/theme/Theme.types';
@@ -21,15 +22,15 @@ export type BoxResponsiveProps = {
   /* Sets flex-direction css property */
   flexDirection?: ResponsiveProp<CSSProperties['flexDirection']>;
   /* Sets gap between the elements */
-  gap?: ResponsiveProp<SpaceType>;
+  gap?: ResponsiveProp<BlocksGapType | 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 +40,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 +49,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'];