Repository: marigold-ui/marigold
Pull request #2015 (2022-04-20 05:28:40)

docs: remove theme section

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: ba9a1fed9fdfbae665a5f7f0604df34f32c68a95

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/remove-themes-doc?filename=.changeset/gentle-cooks-fry.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20remove%20theme%20section%0A)



Patch:
diff --git a/.changeset/gentle-cooks-fry.md b/.changeset/gentle-cooks-fry.md
new file mode 100644
index 000000000..2a1110488
--- /dev/null
+++ b/.changeset/gentle-cooks-fry.md
@@ -0,0 +1,5 @@
+---
+"@marigold/docs": patch
+---
+
+docs: remove theme section
diff --git a/.changeset/shy-cats-retire.md b/.changeset/shy-cats-retire.md
new file mode 100644
index 000000000..f25f72b73
--- /dev/null
+++ b/.changeset/shy-cats-retire.md
@@ -0,0 +1,9 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/theme-b2b": patch
+"@marigold/theme-core": patch
+"@marigold/theme-unicorn": patch
+---
+
+Text component restructure
diff --git a/docs/content/components/text.mdx b/docs/content/components/text.mdx
index fefb5e5ea..c3e1a67a5 100644
--- a/docs/content/components/text.mdx
+++ b/docs/content/components/text.mdx
@@ -4,8 +4,7 @@ title: Text
 
 # Text
 
-With the Text component you can easily add different body text HTML elements. As a default, a `span` element is rendered.
-By adding the `as` prop you can alternatively render a `p` element.
+With the Text component you can easily add different body text HTML elements.
 
 ```tsx onlyCode
 import { Text } from '@marigold/components';
@@ -13,39 +12,25 @@ import { Text } from '@marigold/components';
 
 ## Props
 
-| Property                | Type                 | Default |
-| :---------------------- | :------------------- | :------ |
-| `as` (optional)         | `string ⎮ Component` | `span`  |
-| `variant` (optional)    | `string ⎮ string[]`  | `body`  |
-| `align` (optional)      | `string`             |         |
-| `color` (optional)      | `string`             |         |
-| `cursor` (optional)     | `string`             |         |
-| `outline` (optional)    | `string`             |         |
-| `size` (optional)       | `string`             |         |
-| `userSelect` (optional) | `string`             |         |
+| Property              | Type                | Default |
+| :-------------------- | :------------------ | :------ |
+| `variant` (optional)  | `string ⎮ string[]` |         |
+| `align` (optional)    | `string`            |         |
+| `color` (optional)    | `string`            |         |
+| `cursor` (optional)   | `string`            |         |
+| `outline` (optional)  | `string`            |         |
+| `size` (optional)     | `string`            |         |
+| `fontSize` (optional) | `string`            |         |
 
 ## Examples
 
 ### Text
 
-### Default span and paragraph Text
+### Default paragraph Text
 
 ```tsx
 <Text>
-  SPAN: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
-  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
-  ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-  tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-  vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-  gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</Text>
-```
-
-```tsx
-<Text as="p">
-  P: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
   kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
@@ -67,7 +52,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="1">H1 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -80,7 +65,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="2">H2 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -93,7 +78,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="3">H3 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -106,7 +91,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="4">H4 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -119,7 +104,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="5">H5 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -132,7 +117,7 @@ import { Text } from '@marigold/components';
 ```tsx
 <>
   <Headline level="6">H6 amazing heading</Headline>
-  <Text as="p">
+  <Text>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
     eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
     voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
diff --git a/docs/content/themes/b2b.mdx b/docs/content/themes/b2b.mdx
deleted file mode 100644
index c21fc2fe3..000000000
--- a/docs/content/themes/b2b.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: B2B Theme
----
-
-# B2B Theme
-
-The B2B theme should be used in all Reservix applications that are provided for other business customers.
-
-## Breakpoints
-
-Standard breakpoints for shifting of menu and large-scale elements. We use two breakpoints at 768px and 1200px width:
-
-- small: <= 767px (mobile)
-- medium: between 768px and 1200px (tablet, laptop)
-- large: >= 1201px (desktop)
-
-## Space
-
-- none: 0
-- xxsmall: 4px
-- xsmall: 8px
-- small: 16px
-- medium: 24px
-- large: 32px
-- xlarge: 40px
-- xxlarge: 48px
-
-## Typography
-
-Inter Black for headings (font-weight: 900),
-Inter Regular for body text.
-
-<Stack space={24}>
-  <Text as="h1" variant="h1">
-    Heading H1
-  </Text>
-  <Text as="h2" variant="h2">
-    Heading H2
-  </Text>
-  <Text as="h3" variant="h3">
-    Heading H3
-  </Text>
-  <Text as="h4" variant="h4">
-    Heading H4
-  </Text>
-  <Text as="h5" variant="h5">
-    Heading H5
-  </Text>
-  <Text as="h6" variant="h6">
-    Heading H6
-  </Text>
-</Stack>
-
-## Colors
-
-As a rule of thumb, any text displayed over colours with a classname number of 50 or above should be white.
-Anything below 50 should have black text (gray-70 | #4b4b4b).
-
-<Tiles itemMinWidth="500px">
-  <Box bg="#fa8005" p="xsmall">
-    <Text color="white">Primary</Text>
-  </Box>
-  <Box bg="#4b4b4b" p="xsmall">
-    <Text color="white">Secondary</Text>
-  </Box>
-  <Box bg="#4b4b4b" p="xsmall">
-    <Text color="white">Text</Text>
-  </Box>
-  <Box bg="#fafafa" p="xsmall">
-    <Text color="text">Background</Text>
-  </Box>
-  <Box bg="#e3e3e3" p="xsmall">
-    <Text color="text">Disabled</Text>
-  </Box>
-  <Box bg="#dd4142" p="xsmall">
-    <Text color="white">Error</Text>
-  </Box>
-  <Box bg="#fa8005" p="xsmall">
-    <Text color="white">Warning</Text>
-  </Box>
-  <Box bg="#1d67b6" p="xsmall">
-    <Text color="white">Info</Text>
-  </Box>
-  <Box bg="#44a112" p="xsmall">
-    <Text color="text">Success</Text>
-  </Box>
-</Tiles>
diff --git a/docs/content/themes/core.mdx b/docs/content/themes/core.mdx
deleted file mode 100644
index 238c22074..000000000
--- a/docs/content/themes/core.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Core Theme
----
-
-# Core Theme
-
-The Core theme is also a b2b theme but should be used in all Reservix core applications that are not ready to use the new b2b-theme.
-
-## Breakpoints
-
-Standard breakpoints for shifting of menu and large-scale elements. We use two breakpoints at 768px and 1200px width:
-
-- small: <= 767px (mobile)
-- medium: between 768px and 1200px (tablet, laptop)
-- large: >= 1201px (desktop)
-
-## Space
-
-- none: 0
-- xxsmall: 4px
-- xsmall: 8px
-- small: 16px
-- medium: 24px
-- large: 32px
-- xlarge: 40px
-- xxlarge: 48px
-
-## Typography
-
-Arial, Helvetica, sans-serif for headings and for body text (font-weight: 900 & 400).
-
-<Stack space={24}>
-  <Text as="h1" variant="h1">
-    Heading H1
-  </Text>
-  <Text as="h2" variant="h2">
-    Heading H2
-  </Text>
-  <Text as="h3" variant="h3">
-    Heading H3
-  </Text>
-  <Text as="h4" variant="h4">
-    Heading H4
-  </Text>
-  <Text as="h5" variant="h5">
-    Heading H5
-  </Text>
-  <Text as="h6" variant="h6">
-    Heading H6
-  </Text>
-</Stack>
-
-## Colors
-
-As a rule of thumb, any text displayed over colours with a classname number of 50 or above should be white.
-Anything below 50 should have black text (gray-70 | #4b4b4b).
-
-<Tiles itemMinWidth="500px">
-  <Box bg="#fa8005" p="xsmall">
-    <Text color="white">Primary</Text>
-  </Box>
-  <Box bg="#4b4b4b" p="xsmall">
-    <Text color="white">Secondary</Text>
-  </Box>
-  <Box bg="#511e04" p="xsmall">
-    <Text color="white">Text</Text>
-  </Box>
-  <Box bg="#fafafa" p="xsmall">
-    <Text color="text">Background</Text>
-  </Box>
-  <Box bg="#e3e3e3" p="xsmall">
-    <Text color="text">Disabled</Text>
-  </Box>
-  <Box bg="#f33" p="xsmall">
-    <Text color="white">Error</Text>
-  </Box>
-  <Box bg="#d80" p="xsmall">
-    <Text color="white">Warning</Text>
-  </Box>
-  <Box bg="#008" p="xsmall">
-    <Text color="white">Info</Text>
-  </Box>
-  <Box bg="#080" p="xsmall">
-    <Text color="white">Success</Text>
-  </Box>
-</Tiles>
diff --git a/docs/content/themes/unicorn.mdx b/docs/content/themes/unicorn.mdx
deleted file mode 100644
index 7b9e88093..000000000
--- a/docs/content/themes/unicorn.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: Unicorn Theme
----
-
-# Unicorn Theme
-
-This theme is used for testing and as a playground.
-
-## Breakpoints
-
-Standard breakpoints for shifting of menu and large-scale elements. We use two breakpoints at 768px and 1200px width:
-
-- small: <= 767px (mobile)
-- medium: between 768px and 1200px (tablet, laptop)
-- large: >= 1201px (desktop)
-
-## Space
-
-- none: 0
-- xxsmall: 3px
-- xsmall: 12px
-- small: 18px
-- medium: 24px
-- large: 34px
-- xlarge: 42px
-- xxlarge: 64px
-
-## Typography
-
-Roboto for headings (font-weight: 800),
-Arial for body text.
-
-<Stack space={24}>
-  <Text as="h1" variant="h1">
-    Heading H1
-  </Text>
-  <Text as="h2" variant="h2">
-    Heading H2
-  </Text>
-  <Text as="h3" variant="h3">
-    Heading H3
-  </Text>
-  <Text as="h4" variant="h4">
-    Heading H4
-  </Text>
-  <Text as="h5" variant="h5">
-    Heading H5
-  </Text>
-  <Text as="h6" variant="h6">
-    Heading H6
-  </Text>
-</Stack>
-
-## Colors
-
-<Tiles itemMinWidth="500px">
-  <Box bg="#673ab7" p="xsmall">
-    <Text color="white">Primary</Text>
-  </Box>
-  <Box bg="#9575cd" p="xsmall">
-    <Text color="white">Secondary</Text>
-  </Box>
-  <Box bg="#0f0f0f" p="xsmall">
-    <Text color="white">Text</Text>
-  </Box>
-  <Box bg="#ffffff" p="xsmall">
-    <Text color="text">Background</Text>
-  </Box>
-  <Box bg="#e9e7eb" p="xsmall">
-    <Text color="text">Disabled</Text>
-  </Box>
-  <Box bg="#ffb2b1" p="xsmall">
-    <Text color="text">Error</Text>
-  </Box>
-  <Box bg="#fff3ad" p="xsmall">
-    <Text color="text">Warning</Text>
-  </Box>
-  <Box bg="#a2edff" p="xsmall">
-    <Text color="text">Info</Text>
-  </Box>
-  <Box bg="#bcffbc" p="xsmall">
-    <Text color="text">Success</Text>
-  </Box>
-</Tiles>
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
index b0667fb86..b9541fdc4 100644
--- a/docs/gatsby-config.js
+++ b/docs/gatsby-config.js
@@ -8,13 +8,7 @@ module.exports = {
     siteUrl: 'https://marigold-ui.io/',
     hash: git.long(),
     version: pkg.version,
-    navigation: [
-      'introduction',
-      'foundation',
-      'components',
-      'themes',
-      'develop',
-    ],
+    navigation: ['introduction', 'foundation', 'components', 'develop'],
   },
   plugins: [
     'gatsby-plugin-pnpm',
diff --git a/docs/src/mdx.tsx b/docs/src/mdx.tsx
index 0347636a7..9ebbe8bc6 100644
--- a/docs/src/mdx.tsx
+++ b/docs/src/mdx.tsx
@@ -47,9 +47,7 @@ export const h6: React.FC<ComponentProps<'h6'>> = ({ children, ...props }) => (
 );
 
 export const p: React.FC<ComponentProps<'p'>> = ({ children, ...props }) => (
-  <Text as="p" variant="body" {...props}>
-    {children}
-  </Text>
+  <Text {...props}>{children}</Text>
 );
 
 export const a: React.FC<ComponentProps<'a'>> = ({
@@ -100,17 +98,13 @@ export const pre: React.FC<ComponentProps<'pre'>> = preProps => {
 // ---------------
 export const ul: React.FC<ComponentProps<'ul'>> = ({ children, ...props }) => (
   <ul {...props}>
-    <Text as="p" variant="body">
-      {children}
-    </Text>
+    <Text>{children}</Text>
   </ul>
 );
 
 export const ol: React.FC<ComponentProps<'ol'>> = ({ children, ...props }) => (
   <ol {...props}>
-    <Text as="p" variant="body">
-      {children}
-    </Text>
+    <Text>{children}</Text>
   </ol>
 );
 
@@ -131,9 +125,7 @@ export const table: React.FC<ComponentProps<'table'>> = ({
 
 export const td: React.FC<ComponentProps<'td'>> = ({ children, ...props }) => (
   <Box as="td" p="xsmall" {...props}>
-    <Text as="p" variant="body">
-      {children}
-    </Text>
+    <Text>{children}</Text>
   </Box>
 );
 
diff --git a/docs/src/theme/components/Text.style.ts b/docs/src/theme/components/Text.style.ts
new file mode 100644
index 000000000..76967b5ae
--- /dev/null
+++ b/docs/src/theme/components/Text.style.ts
@@ -0,0 +1,15 @@
+import type { Theme } from '@marigold/components';
+
+export const Text: Theme['components']['Text'] = {
+  base: {
+    body: {
+      color: 'gray.40',
+      marginBottom: 'medium',
+    },
+  },
+  variant: {
+    muted: {
+      color: 'gray.60',
+    },
+  },
+};
diff --git a/docs/src/theme/components/index.ts b/docs/src/theme/components/index.ts
index a4c3967bc..22882562f 100644
--- a/docs/src/theme/components/index.ts
+++ b/docs/src/theme/components/index.ts
@@ -1,3 +1,4 @@
 export * from './Card.style';
 export * from './Headline.style';
 export * from './Link.style';
+export * from './Text.style';
diff --git a/docs/src/theme/index.ts b/docs/src/theme/index.ts
index b089bcd51..2954ebee2 100644
--- a/docs/src/theme/index.ts
+++ b/docs/src/theme/index.ts
@@ -5,7 +5,6 @@ import * as components from './components';
 
 import { colors } from './colors';
 import { component } from './component';
-import { typography } from './typography';
 
 export const theme: Theme = {
   space: {
@@ -47,7 +46,35 @@ export const theme: Theme = {
     solid: `1px solid`,
     grey: `1px solid ${colors.gray60}`,
   },
-  ...typography,
+  fonts: {
+    body: 'Inter',
+    heading: 'Inter Black',
+    code: 'monospace',
+  },
+  fontSizes: {
+    body: '1rem',
+    xxxsmall: '0.75rem',
+    xxsmall: '0.875rem',
+    xsmall: '1rem',
+    small: '1.125rem',
+    medium: '1.25rem',
+    large: '1.5rem',
+    xlarge: '2rem',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 900,
+    medium: 600,
+    bold: 700,
+  },
+  lineHeights: {
+    xsmall: 1,
+    small: 1.125,
+    medium: 1.5,
+    large: 2,
+    xlarge: 2.5,
+    xxlarge: 3,
+  },
   ...component,
 
   components,
diff --git a/docs/src/theme/typography.ts b/docs/src/theme/typography.ts
deleted file mode 100644
index bd82195e9..000000000
--- a/docs/src/theme/typography.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-const text = {
-  root: {
-    fontFamily: 'body',
-    fontSize: 'body',
-    lineHeight: 'medium',
-    fontWeight: 'body',
-  },
-  heading: {
-    fontWeight: 'heading',
-    color: 'gray.20',
-  },
-} as const;
-
-export const typography = {
-  fonts: {
-    body: 'Inter',
-    heading: 'Inter Black',
-    code: 'monospace',
-  },
-  fontSizes: {
-    body: '1rem',
-    xxxsmall: '0.75rem',
-    xxsmall: '0.875rem',
-    xsmall: '1rem',
-    small: '1.125rem',
-    medium: '1.25rem',
-    large: '1.5rem',
-    xlarge: '2rem',
-  },
-  fontWeights: {
-    body: 400,
-    heading: 900,
-    medium: 600,
-    bold: 700,
-  },
-  lineHeights: {
-    xsmall: 1,
-    small: 1.125,
-    medium: 1.5,
-    large: 2,
-    xlarge: 2.5,
-    xxlarge: 3,
-  },
-  text: {
-    body: {
-      ...text.root,
-      color: 'gray.40',
-      marginBottom: 'medium',
-    },
-    muted: {
-      ...text.root,
-      color: 'gray.60',
-    },
-  },
-} as const;
diff --git a/packages/components/src/Text/Text.stories.tsx b/packages/components/src/Text/Text.stories.tsx
index 1f059f095..3f4a533a7 100644
--- a/packages/components/src/Text/Text.stories.tsx
+++ b/packages/components/src/Text/Text.stories.tsx
@@ -5,37 +5,11 @@ import { Text } from './Text';
 export default {
   title: 'Components/Text',
   argTypes: {
-    as: {
-      control: {
-        type: 'select',
-      },
-      options: ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'Set HTML element',
-      table: {
-        defaultValue: {
-          summary: 'span',
-        },
-      },
-    },
     variant: {
       control: {
-        type: 'select',
-      },
-      options: [
-        'body',
-        'headline1',
-        'headline2',
-        'headline3',
-        'headline4',
-        'headline5',
-        'headline6',
-      ],
-      description: 'CHoose between body and different headlines',
-      table: {
-        defaultValue: {
-          summary: 'body',
-        },
+        type: 'text',
       },
+      description: 'The variant of the text',
     },
     color: {
       control: {
diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx
index af878b229..9ea57d318 100644
--- a/packages/components/src/Text/Text.tsx
+++ b/packages/components/src/Text/Text.tsx
@@ -1,68 +1,56 @@
-import React, { forwardRef } from 'react';
-import { ResponsiveStyleValue, Theme } from '@marigold/system';
+import React from 'react';
 import {
-  PolymorphicComponentWithRef,
-  PolymorphicPropsWithRef,
-} from '@marigold/types';
+  CSSObject,
+  ThemeComponentProps,
+  ThemeExtension,
+  useComponentStyles,
+} from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
 
-import { Box, BoxOwnProps } from '../Box';
+import { Box, BoxOwnProps } from '@marigold/system';
 
 // Theme Extension
 // ---------------
-export interface TextThemeExtension<Value> {
-  text?: {
-    [key: string]: Value;
-  };
-}
+export interface TextThemeExtension extends ThemeExtension<'Text'> {}
 
 // Props
 // ---------------
-export interface TextOwnProps extends BoxOwnProps {
-  align?: ResponsiveStyleValue<string>;
-  color?: ResponsiveStyleValue<string>;
-  cursor?: ResponsiveStyleValue<string>;
-  size?: ResponsiveStyleValue<keyof Theme['fontSizes'] | string>;
-  outline?: ResponsiveStyleValue<string>;
-  userSelect?: ResponsiveStyleValue<string>;
-}
-
 export interface TextProps
-  extends PolymorphicPropsWithRef<TextOwnProps, 'span'> {}
+  extends ThemeComponentProps,
+    ComponentProps<'p'>,
+    Omit<BoxOwnProps, 'variant'> {
+  align?: CSSObject['textAlign'];
+  color?: string;
+  cursor?: string;
+  fontSize?: string;
+  outline?: string;
+  children?: React.ReactNode;
+}
 
 // Component
 // ---------------
-export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
-  forwardRef(
-    (
-      {
-        as = 'span',
-        variant = 'body',
-        children,
-        align,
-        color,
-        cursor,
-        size,
-        outline,
-        userSelect,
-        ...props
-      },
-      ref
-    ) => (
-      <Box
-        {...props}
-        as={as}
-        variant={`text.${variant}`}
-        css={{
-          textAlign: align,
-          fontSize: size,
-          color,
-          cursor,
-          outline,
-          userSelect,
-        }}
-        ref={ref}
-      >
-        {children}
-      </Box>
-    )
+export const Text = ({
+  variant,
+  size,
+  align,
+  color,
+  fontSize,
+  cursor,
+  outline,
+  children,
+  ...props
+}: TextProps) => {
+  const styles = useComponentStyles('Text', {
+    variant,
+    size,
+  });
+  return (
+    <Box
+      as="p"
+      {...props}
+      css={{ color, cursor, outline, fontSize, textAlign: align, ...styles }}
+    >
+      {children}
+    </Box>
   );
+};
diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts
index 9c53ad21c..2411153a9 100644
--- a/packages/components/src/theme.ts
+++ b/packages/components/src/theme.ts
@@ -19,6 +19,7 @@ import type { ImageThemeExtension } from './Image';
 import type { InputThemeExtension } from './Input';
 import type { LabelThemeExtension } from './Field/Label';
 import type { LinkThemeExtension } from './Link';
+import type { TextThemeExtension } from './Text';
 import type { TextAreaThemeExtension } from './TextArea';
 
 // Old Styling Solution
@@ -31,7 +32,6 @@ import { type RadioThemeExtension } from './Radio';
 import { type SelectThemeExtension } from './Select';
 import { type SliderThemeExtension } from './Slider';
 import { type SwitchThemeExtension } from './Switch';
-import { type TextThemeExtension } from './Text';
 import { type TooltipThemeExtension } from './Tooltip';
 import { type ValidationMessageThemeExtension } from './ValidationMessage';
 
@@ -50,6 +50,7 @@ interface ComponentStyles
     InputThemeExtension,
     LabelThemeExtension,
     LinkThemeExtension,
+    TextThemeExtension,
     TextAreaThemeExtension {}
 
 export interface Theme
@@ -64,7 +65,6 @@ export interface Theme
     SelectThemeExtension<CSSObject>,
     SliderThemeExtension<CSSObject>,
     SwitchThemeExtension<CSSObject>,
-    TextThemeExtension<CSSObject>,
     TooltipThemeExtension<CSSObject>,
     ValidationMessageThemeExtension<CSSObject> {
   components: ComponentStyles;
diff --git a/themes/theme-b2b/src/component.ts b/themes/theme-b2b/src/component.ts
index 0df817eed..cd44ff0f5 100644
--- a/themes/theme-b2b/src/component.ts
+++ b/themes/theme-b2b/src/component.ts
@@ -1,5 +1,4 @@
 import { colors } from './colors';
-import { text } from './typography';
 
 /**
  * Select component
@@ -478,7 +477,6 @@ export const component = {
   },
   validation: {
     error: {
-      ...text.root,
       fontSize: 'xxsmall',
       color: 'error',
     },
diff --git a/themes/theme-b2b/src/components/Text.style.ts b/themes/theme-b2b/src/components/Text.style.ts
new file mode 100644
index 000000000..e3e7a1161
--- /dev/null
+++ b/themes/theme-b2b/src/components/Text.style.ts
@@ -0,0 +1,3 @@
+import type { Theme } from '@marigold/components';
+
+export const Text: Theme['components']['Text'] = {};
diff --git a/themes/theme-b2b/src/components/index.ts b/themes/theme-b2b/src/components/index.ts
index d738a986f..6810c4fab 100644
--- a/themes/theme-b2b/src/components/index.ts
+++ b/themes/theme-b2b/src/components/index.ts
@@ -8,4 +8,5 @@ export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
 export * from './Link.style';
+export * from './Text.style';
 export * from './TextArea.style';
diff --git a/themes/theme-b2b/src/index.ts b/themes/theme-b2b/src/index.ts
index 4717da9da..a477aae09 100644
--- a/themes/theme-b2b/src/index.ts
+++ b/themes/theme-b2b/src/index.ts
@@ -1,6 +1,5 @@
 import { colors } from './colors';
 import { component } from './component';
-import { typography } from './typography';
 
 // NEW STYLES!
 import * as components from './components';
@@ -57,7 +56,31 @@ const theme: any = {
     medium: 4,
     large: 8,
   },
-  ...typography,
+  fonts: {
+    body: 'Inter',
+    heading: 'Inter Black',
+  },
+  fontSizes: {
+    xxsmall: '0.875rem',
+    xsmall: '1rem',
+    small: '1.125rem',
+    medium: '1.25rem',
+    large: '1.5rem',
+    xlarge: '2rem',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 900,
+    bold: 700,
+  },
+  lineHeights: {
+    xsmall: 1,
+    small: 1.125,
+    medium: 1.5,
+    large: 2,
+    xlarge: 2.5,
+    xxlarge: 3,
+  },
   ...component,
 
   // NEW STYLES!!!
diff --git a/themes/theme-b2b/src/typography.ts b/themes/theme-b2b/src/typography.ts
deleted file mode 100644
index 8162af31a..000000000
--- a/themes/theme-b2b/src/typography.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-export const text = {
-  root: {
-    fontFamily: 'body',
-    fontSize: 'xsmall',
-    lineHeight: 'medium',
-    fontWeight: 'body',
-  },
-  span: {
-    display: 'inline-block',
-  },
-  p: {
-    display: 'inline-block',
-    mt: 'none',
-    mr: 'none',
-    mb: 'xsmall',
-    ':last-child': {
-      marginBottom: 'small',
-    },
-  },
-} as const;
-
-export const typography = {
-  fonts: {
-    body: 'Inter',
-    heading: 'Inter Black',
-  },
-  fontSizes: {
-    xxsmall: '0.875rem',
-    xsmall: '1rem',
-    small: '1.125rem',
-    medium: '1.25rem',
-    large: '1.5rem',
-    xlarge: '2rem',
-  },
-  fontWeights: {
-    body: 400,
-    heading: 900,
-    bold: 700,
-  },
-  lineHeights: {
-    xsmall: 1,
-    small: 1.125,
-    medium: 1.5,
-    large: 2,
-    xlarge: 2.5,
-    xxlarge: 3,
-  },
-  text: {
-    body: {
-      ...text.root,
-      ...text.span,
-    },
-  },
-} as const;
diff --git a/themes/theme-core/src/component.ts b/themes/theme-core/src/component.ts
index 5390e46dc..ad6d5f0e4 100644
--- a/themes/theme-core/src/component.ts
+++ b/themes/theme-core/src/component.ts
@@ -1,5 +1,4 @@
 import { colors } from './colors';
-import { text } from './typography';
 
 /**
  * Select component
@@ -491,7 +490,6 @@ export const component = {
   },
   validation: {
     error: {
-      ...text.root,
       fontSize: '0.813rem',
       color: 'error',
     },
diff --git a/themes/theme-core/src/components/Text.style.ts b/themes/theme-core/src/components/Text.style.ts
new file mode 100644
index 000000000..e3e7a1161
--- /dev/null
+++ b/themes/theme-core/src/components/Text.style.ts
@@ -0,0 +1,3 @@
+import type { Theme } from '@marigold/components';
+
+export const Text: Theme['components']['Text'] = {};
diff --git a/themes/theme-core/src/components/index.ts b/themes/theme-core/src/components/index.ts
index d4c15dbfa..d5147188e 100644
--- a/themes/theme-core/src/components/index.ts
+++ b/themes/theme-core/src/components/index.ts
@@ -7,4 +7,5 @@ export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
 export * from './Link.style';
+export * from './Text.style';
 export * from './TextArea.style';
diff --git a/themes/theme-core/src/index.ts b/themes/theme-core/src/index.ts
index 72859bfbd..81157d63b 100644
--- a/themes/theme-core/src/index.ts
+++ b/themes/theme-core/src/index.ts
@@ -1,7 +1,6 @@
 import { type Theme } from '@marigold/components';
 import { colors } from './colors';
 import { component } from './component';
-import { typography } from './typography';
 
 // NEW STYLES!
 import * as components from './components';
@@ -55,7 +54,32 @@ const theme: Theme = {
     large: 8,
     xlarge: 10,
   },
-  ...typography,
+  fonts: {
+    body: 'Inter',
+    heading: 'Inter Black',
+  },
+  fontSizes: {
+    xxsmall: '0.875rem',
+    xsmall: '1rem',
+    small: '1.125rem',
+    medium: '1.25rem',
+    large: '1.5rem',
+    xlarge: '2rem',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 900,
+    bold: 700,
+  },
+  lineHeights: {
+    xsmall: 1,
+    small: 1.125,
+    medium: 1.5,
+    large: 2,
+    xlarge: 2.5,
+    xxlarge: 3,
+  },
+
   ...component,
   // NEW STYLES!!!
   components,
diff --git a/themes/theme-core/src/typography.ts b/themes/theme-core/src/typography.ts
deleted file mode 100644
index 2959e4247..000000000
--- a/themes/theme-core/src/typography.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-export const text = {
-  root: {
-    fontFamily: 'body',
-    fontSize: '0.813rem',
-    lineHeight: 'medium',
-    fontWeight: 'body',
-  },
-  span: {
-    display: 'inline-block',
-  },
-  p: {
-    display: 'inline-block',
-    mt: 'none',
-    mr: 'none',
-    mb: 'xsmall',
-    ':last-child': {
-      marginBottom: 'small',
-    },
-  },
-} as const;
-
-export const typography = {
-  fonts: {
-    body: 'Inter',
-    heading: 'Inter Black',
-  },
-  fontSizes: {
-    xxsmall: '0.875rem',
-    xsmall: '1rem',
-    small: '1.125rem',
-    medium: '1.25rem',
-    large: '1.5rem',
-    xlarge: '2rem',
-  },
-  fontWeights: {
-    body: 400,
-    heading: 900,
-    bold: 700,
-  },
-  lineHeights: {
-    xsmall: 1,
-    small: 1.125,
-    medium: 1.5,
-    large: 2,
-    xlarge: 2.5,
-    xxlarge: 3,
-  },
-  text: {
-    body: {
-      ...text.root,
-      ...text.span,
-    },
-  },
-} as const;
diff --git a/themes/theme-unicorn/src/component.ts b/themes/theme-unicorn/src/component.ts
index 2c0623b0c..30588fc52 100644
--- a/themes/theme-unicorn/src/component.ts
+++ b/themes/theme-unicorn/src/component.ts
@@ -1,5 +1,4 @@
 import { colors } from './colors';
-import { text } from './typography';
 
 /**
  * Select component
@@ -465,7 +464,6 @@ export const component = {
   },
   validation: {
     error: {
-      ...text.root,
       fontSize: 'xsmall',
       textTransform: 'uppercase',
       color: 'error',
diff --git a/themes/theme-unicorn/src/components/Text.style.ts b/themes/theme-unicorn/src/components/Text.style.ts
new file mode 100644
index 000000000..e3e7a1161
--- /dev/null
+++ b/themes/theme-unicorn/src/components/Text.style.ts
@@ -0,0 +1,3 @@
+import type { Theme } from '@marigold/components';
+
+export const Text: Theme['components']['Text'] = {};
diff --git a/themes/theme-unicorn/src/components/index.ts b/themes/theme-unicorn/src/components/index.ts
index d738a986f..6810c4fab 100644
--- a/themes/theme-unicorn/src/components/index.ts
+++ b/themes/theme-unicorn/src/components/index.ts
@@ -8,4 +8,5 @@ export * from './Image.style';
 export * from './Input.style';
 export * from './Label.style';
 export * from './Link.style';
+export * from './Text.style';
 export * from './TextArea.style';
diff --git a/themes/theme-unicorn/src/index.ts b/themes/theme-unicorn/src/index.ts
index ab79482ea..7476f506d 100644
--- a/themes/theme-unicorn/src/index.ts
+++ b/themes/theme-unicorn/src/index.ts
@@ -1,7 +1,6 @@
 import { type Theme } from '@marigold/components';
 import { colors } from './colors';
 import { component } from './component';
-import { typography } from './typography';
 
 // NEW STYLES!
 import * as components from './components';
@@ -58,7 +57,31 @@ const theme: Theme = {
     medium: 4,
     large: 8,
   },
-  ...typography,
+  fonts: {
+    body: 'Arial',
+    heading: 'Roboto',
+  },
+  fontSizes: {
+    xxsmall: '0.66rem',
+    xsmall: '1rem',
+    small: '1.33rem',
+    medium: '1.66rem',
+    large: '2rem',
+    xlarge: '2.33rem',
+  },
+  fontWeights: {
+    body: 300,
+    heading: 800,
+    bold: 600,
+  },
+  lineHeights: {
+    xsmall: 1,
+    small: 1.125,
+    medium: 1.5,
+    large: 2,
+    xlarge: 2.5,
+    xxlarge: 3,
+  },
   ...component,
 
   // NEW STYLES!!!
diff --git a/themes/theme-unicorn/src/typography.ts b/themes/theme-unicorn/src/typography.ts
deleted file mode 100644
index 4e48fb0e2..000000000
--- a/themes/theme-unicorn/src/typography.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-export const text = {
-  root: {
-    fontFamily: 'body',
-    fontSize: 'xsmall',
-    lineHeight: 'medium',
-    fontWeight: 'body',
-  },
-  span: {
-    display: 'inline-block',
-  },
-  p: {
-    display: 'inline-block',
-    mt: 'none',
-    mr: 'none',
-    mb: 'xsmall',
-    ':last-child': {
-      marginBottom: 'small',
-    },
-  },
-} as const;
-
-export const typography = {
-  fonts: {
-    body: 'Arial',
-    heading: 'Roboto',
-  },
-  fontSizes: {
-    xxsmall: '0.66rem',
-    xsmall: '1rem',
-    small: '1.33rem',
-    medium: '1.66rem',
-    large: '2rem',
-    xlarge: '2.33rem',
-  },
-  fontWeights: {
-    body: 300,
-    heading: 800,
-    bold: 600,
-  },
-  lineHeights: {
-    xsmall: 1,
-    small: 1.125,
-    medium: 1.5,
-    large: 2,
-    xlarge: 2.5,
-    xxlarge: 3,
-  },
-  text: {
-    body: {
-      ...text.root,
-      ...text.span,
-    },
-  },
-} as const;


Test patch:
diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx
index 5257d7ca8..d515626ee 100644
--- a/packages/components/src/Text/Text.test.tsx
+++ b/packages/components/src/Text/Text.test.tsx
@@ -15,17 +15,23 @@ const theme = {
     body: '1rem',
     medium: '1.25rem',
   },
-  text: {
-    body: {
-      fontFamily: 'Oswald Regular',
-    },
-    headline1: {
-      fontFamily: 'Inter',
+
+  components: {
+    Text: {
+      base: {
+        fontFamily: 'Oswald Regular',
+      },
+      variant: {
+        one: {
+          fontFamily: 'Arial',
+          color: 'green',
+        },
+      },
     },
   },
 };
 
-test('uses `text.body` as default variant', () => {
+test('uses base as default variant', () => {
   render(
     <ThemeProvider theme={theme}>
       <Text>text</Text>
@@ -36,18 +42,7 @@ test('uses `text.body` as default variant', () => {
   expect(text).toHaveStyle(`font-family: Oswald Regular`);
 });
 
-test('allows to change variants via `variant` prop (with "text" prefix)', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text variant="headline1">text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
-  expect(text).toHaveStyle(`font-family: Inter`);
-});
-
-test('renders a <span> element by default', () => {
+test('renders a <p> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
       <Text>text</Text>
@@ -55,17 +50,6 @@ test('renders a <span> element by default', () => {
   );
   const text = screen.getByText(/text/);
 
-  expect(text instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('allows to control the rendered element via the `as` prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text as="p">text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
   expect(text instanceof HTMLParagraphElement).toBeTruthy();
 });
 
@@ -75,15 +59,14 @@ test.each([
   [{ align: 'center' }, 'text-align: center'],
   [{ cursor: 'pointer' }, 'cursor: pointer'],
   [{ outline: 'dashed red' }, 'outline: dashed red'],
-  [{ size: 'body' }, `font-size: ${theme.fontSizes.body}`],
-  [{ size: 'medium' }, `font-size: ${theme.fontSizes.medium}`],
-  [{ userSelect: 'none' }, 'user-select: none'],
+  [{ fontSize: 'body' }, `font-size: ${theme.fontSizes.body}`],
+  [{ fontSize: 'medium' }, `font-size: ${theme.fontSizes.medium}`],
 ])('test style prop %o', (...args) => {
   const props = args.shift();
 
   render(
     <ThemeProvider theme={theme}>
-      <Text {...props}>This is the Text!</Text>
+      <Text {...(props as any)}>This is the Text!</Text>
     </ThemeProvider>
   );
 
@@ -92,14 +75,3 @@ test.each([
     expect(box).toHaveStyle(style);
   });
 });
-
-test('forwards ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Text as="button" ref={ref}>
-      button
-    </Text>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});