feat: created main components to configureation v2

packages/block/block.module.css

@@ -0,0 +1,38 @@
+.foreground {
+  background: var(--lido-color-foreground);
+  color: var(--lido-color-text-secondary);
+}
+
+.background {
+  background: var(--lido-color-background);
+  color: var(--lido-color-text-secondary);
+}
+
+.accent {
+  background: var(--lido-color-accent);
+  color: var(--lido-color-accent-contrast);
+}
+
+.flat {
+  box-shadow: none;
+}
+
+.shadow {
+  box-shadow: var(--lido-shadows-lg) var(--lido-color-shadow-light);
+}
+
+.padding {
+  padding: var(--lido-space-lg);
+
+  @media (--lido-media-breakpoint-up-md) {
+    padding: var(--lido-space-xxl);
+  }
+}
+
+.block {
+  font-weight: 400;
+  font-size: var(--lido-font-size-xxs);
+  line-height: 1.6em;
+  border-radius: var(--lido-border-radius-xl);
+  margin: 0;
+}

packages/block/block.stories.tsx

@@ -0,0 +1,28 @@
+import { StoryFn, Meta } from '@storybook/react'
+import { Block, BlockProps, BlockColor, BlockVariant } from '.'
+
+const getOptions = (enumObject: Record<string, string | number>) =>
+  Object.values(enumObject).filter((value) => typeof value === 'string')
+
+export default {
+  component: Block,
+  title: 'Layout/Block',
+  args: {
+    children: 'Example content',
+    variant: 'flat',
+    color: 'foreground',
+    paddingLess: false,
+  },
+  argTypes: {
+    variant: {
+      options: getOptions(BlockVariant),
+      control: 'inline-radio',
+    },
+    color: {
+      options: getOptions(BlockColor),
+      control: 'inline-radio',
+    },
+  },
+} satisfies Meta
+
+export const Basic: StoryFn<BlockProps> = (props) => <Block {...props} />

packages/block/block.tsx

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'
+import cn from 'classnames'
+import styles from './block.module.css'
+
+export enum BlockVariant {
+  flat,
+  shadow,
+}
+export type BlockVariants = keyof typeof BlockVariant
+
+export enum BlockColor {
+  foreground,
+  background,
+  accent,
+}
+export type BlockColors = keyof typeof BlockColor
+
+export type BlockProps = ComponentPropsWithoutRef<'div'> & {
+  color?: BlockColors
+  variant?: BlockVariants
+  paddingLess?: boolean
+}
+
+export const Block = forwardRef(
+  (
+    {
+      color = 'foreground',
+      variant = 'flat',
+      paddingLess = false,
+      className,
+      ...rest
+    }: BlockProps,
+    ref?: ForwardedRef<HTMLDivElement>,
+  ) => {
+    return (
+      <div
+        className={cn(styles.block, className, {
+          [styles.foreground]: color === 'foreground',
+          [styles.background]: color === 'background',
+          [styles.accent]: color === 'accent',
+          [styles.flat]: variant === 'flat',
+          [styles.shadow]: variant === 'shadow',
+          [styles.padding]: !paddingLess,
+        })}
+        {...rest}
+        ref={ref}
+      />
+    )
+  },
+)
+Block.displayName = 'Block'

packages/block/index.ts

@@ -0,0 +1 @@
+export * from './block'