From 481a5ba5b3bc81d6e6b8f34f5c07244f3a577bfc Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sat, 17 Feb 2024 22:38:25 +0100
Subject: [PATCH 01/18] implement new type (Variant) and variant array

---
 src/utils/utils.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 961b1d02..fc46f76e 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,5 +1,9 @@
 import React, {ReactNode, useEffect, useMemo, useState} from "react";
 
+export type Variant = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+
+export const Variants: Variant[] = ["primary", "secondary", "info", "success", "warning", "error"]
+
 export const getChild = (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean): React.ReactElement | undefined => {
 
     const [childComponent, setChildComponent] = useState<React.ReactElement | undefined>()

From 21c39af9cbd7c65d0c604431b6c877201cd02170 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sat, 17 Feb 2024 22:38:35 +0100
Subject: [PATCH 02/18] fix all hardcoded variants

---
 src/components/alert/Alert.stories.tsx   |  7 +++----
 src/components/alert/Alert.tsx           |  5 +++--
 src/components/badge/Badge.stories.tsx   |  4 ++--
 src/components/badge/Badge.tsx           |  3 ++-
 src/components/button/Button.stories.tsx | 13 +++++--------
 src/components/button/Button.tsx         |  4 ++--
 src/components/card/Card.tsx             |  3 ++-
 src/components/menu/Menu.tsx             |  4 ++--
 8 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index d1001323..1df9b068 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Alert from "./Alert";
 import {Meta, StoryObj} from "@storybook/react";
+import {Variants} from "../../utils/utils";
 
 const meta: Meta<typeof Alert> = {
     title: "Alert",
@@ -28,8 +29,7 @@ export const WithBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
+                Variants.map(value => {
                     return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                     </Alert>
@@ -51,8 +51,7 @@ export const WithoutBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
+                Variants.map(value => {
                     return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
                 })
             }
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index ae25adce..5b4b0b2f 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,13 +1,14 @@
 import React, {ReactElement, ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
+import {Variant} from "../../utils/utils";
 
 export interface AlertType {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    variant?: Variant
     //defaults to true
     icon?: boolean
     //defaults to false
@@ -50,7 +51,7 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    variant: Variant
 }
 
 const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
index 60889e9d..1a7e2059 100644
--- a/src/components/badge/Badge.stories.tsx
+++ b/src/components/badge/Badge.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Badge from "./Badge";
 import Button from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
+import {Variants as BadgeVariants}  from "../../utils/utils";
 
 const meta: Meta = {
     title: "Badge",
@@ -13,8 +14,7 @@ export const Variants = () => {
     return <>
 
         {
-            ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
-                // @ts-ignore
+            BadgeVariants.map(value => {
                 return <Badge style={{marginRight: ".5rem"}} variant={value}>
                     {value}
                 </Badge>
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index bb2d04c2..5d63613a 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,10 +1,11 @@
 import React, {HTMLProps} from "react";
 import "./Badge.style.scss"
+import {Variant} from "../../utils/utils";
 
 export interface BadgeType extends HTMLProps<HTMLSpanElement>{
     children: string
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    variant?: Variant
 }
 
 const Badge: React.FC<BadgeType> = (props) => {
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 47a5ec6e..4b4bbd17 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -3,6 +3,7 @@ import {StoryObj} from "@storybook/react";
 import React from "react";
 import ButtonGroup from "../button-group/ButtonGroup";
 import {IconAbc} from "@tabler/icons-react";
+import {Variants} from "../../utils/utils";
 
 const meta = {
     title: "Button",
@@ -32,8 +33,7 @@ export const Buttons: ButtonStory = {
 
         return <>
             {
-                ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
-                    // @ts-ignore
+                Variants.map(value => {
                     return <Button disabled={disabled} variant={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
@@ -53,8 +53,7 @@ export const ButtonGroups: ButtonGroupStory = {
         return <>
             <ButtonGroup>
                 {
-                    ["primary", "secondary", "info", "success", "warning", "error"].map((value, index) => {
-                        // @ts-ignore
+                    Variants.map((value, index) => {
                         return <Button variant={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
@@ -64,8 +63,7 @@ export const ButtonGroups: ButtonGroupStory = {
             </ButtonGroup>
             <ButtonGroup>
                 {
-                    ["primary", "primary", "primary", "primary"].map((value, index) => {
-                        // @ts-ignore
+                    Variants.map((value, index) => {
                         return <Button variant={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
@@ -76,8 +74,7 @@ export const ButtonGroups: ButtonGroupStory = {
 
             <ButtonGroup>
                 {
-                    ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
-                        // @ts-ignore
+                    Variants.map((value, index) => {
                         return <Button disabled={(index % 2) == 0} variant={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index aba2b690..a2b85582 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -4,12 +4,12 @@ import React, {
     DetailedHTMLProps,
     ReactNode
 } from "react";
-import {getChild, getContent} from "../../utils/utils";
+import {getChild, getContent, Variant} from "../../utils/utils";
 
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    variant?: Variant,
     //defaults to false
     active?: boolean
     //defaults to false
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index f1927041..1f31da1d 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -5,13 +5,14 @@ import {CardHeader, CardHeaderType} from "./CardHeader";
 import {CardTitle, CardTitleType} from "./CardTitle";
 import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
 import {CardFooter, CardFooterType} from "./CardFooter";
+import {Variant} from "../../utils/utils";
 
 export type CardChildType = CardHeaderType | CardImgStyle | CardTitleType | CardSubTitleType | CardFooterType | any
 
 export interface CardType {
     children: ReactElement<CardChildType> | ReactElement<CardChildType>[]
     //defaults to secondary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    variant?: Variant
 }
 
 const Card: React.FC<CardType> = (props) => {
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 8c38dcc0..a7db0568 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {getChild} from "../../utils/utils";
+import {getChild, Variant} from "../../utils/utils";
 import {PopoverProps} from "../popover/Popover";
 import {AriaMenuProps, Key, useButton, useMenuTrigger} from "react-aria";
 import {Item, Section, useMenuTriggerState} from "react-stately";
@@ -24,7 +24,7 @@ export interface MenuContentType {
 export interface MenuItemType {
     children: React.ReactNode
     key: Key
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    variant?: Variant
     disabled?: boolean
     unselectable?: boolean
     textValue?: string

From 533bd682d6ddbeb6aed74753e67862c44a01cd56 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sat, 17 Feb 2024 22:52:01 +0100
Subject: [PATCH 03/18] revert Variant Array

---
 src/components/button/Button.stories.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 4b4bbd17..60b98385 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -63,7 +63,8 @@ export const ButtonGroups: ButtonGroupStory = {
             </ButtonGroup>
             <ButtonGroup>
                 {
-                    Variants.map((value, index) => {
+                    ["primary", "primary", "primary", "primary"].map((value, index) => {
+                        // @ts-ignore
                         return <Button variant={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
@@ -74,7 +75,8 @@ export const ButtonGroups: ButtonGroupStory = {
 
             <ButtonGroup>
                 {
-                    Variants.map((value, index) => {
+                    ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
+                        // @ts-ignore
                         return <Button disabled={(index % 2) == 0} variant={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}

From d61bda0deddb1d0997a6b4992778f984562f08a6 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 00:16:43 +0100
Subject: [PATCH 04/18] add sizes type

---
 src/utils/utils.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index fc46f76e..901dc56b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -4,6 +4,11 @@ export type Variant = "primary" | "secondary" | "info" | "success" | "warning" |
 
 export const Variants: Variant[] = ["primary", "secondary", "info", "success", "warning", "error"]
 
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+export const Sizes: Size[] = ["xs", "sm", "md", "lg", "xl"]
+
+
 export const getChild = (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean): React.ReactElement | undefined => {
 
     const [childComponent, setChildComponent] = useState<React.ReactElement | undefined>()

From 801869aa75a6a2a9acdcf20633010cdef836d833 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 15:43:55 +0100
Subject: [PATCH 05/18] rename variant(s) to color(s)

---
 src/components/alert/Alert.stories.tsx       | 12 ++++++------
 src/components/alert/Alert.tsx               | 16 ++++++++--------
 src/components/badge/Badge.stories.tsx       |  8 ++++----
 src/components/badge/Badge.tsx               |  8 ++++----
 src/components/button/Button.stories.tsx     | 14 +++++++-------
 src/components/button/Button.tsx             |  8 ++++----
 src/components/card/Card.stories.tsx         |  6 +++---
 src/components/card/Card.tsx                 |  8 ++++----
 src/components/dropdown/Dropdown.stories.tsx |  4 ++--
 src/components/menu/InternalMenu.tsx         |  4 ++--
 src/components/menu/Menu.tsx                 |  4 ++--
 src/utils/utils.ts                           |  4 ++--
 12 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index 1df9b068..42040a3d 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Alert from "./Alert";
 import {Meta, StoryObj} from "@storybook/react";
-import {Variants} from "../../utils/utils";
+import {Colors} from "../../utils/utils";
 
 const meta: Meta<typeof Alert> = {
     title: "Alert",
@@ -15,7 +15,7 @@ const meta: Meta<typeof Alert> = {
         },
         onClose: {table:{disable: true}},
         title: {table:{disable: true}},
-        variant: {table:{disable: true}}
+        color: {table:{disable: true}}
     },
 }
 
@@ -29,8 +29,8 @@ export const WithBody: Story = {
 
         return <>
             {
-                Variants.map(value => {
-                    return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
+                Colors.map(value => {
+                    return <Alert color={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                     </Alert>
                 })
@@ -51,8 +51,8 @@ export const WithoutBody: Story = {
 
         return <>
             {
-                Variants.map(value => {
-                    return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
+                Colors.map(value => {
+                    return <Alert color={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
                 })
             }
         </>
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 5b4b0b2f..1aac3003 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,14 +1,14 @@
 import React, {ReactElement, ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
-import {Variant} from "../../utils/utils";
+import {Color} from "../../utils/utils";
 
 export interface AlertType {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
     //defaults to primary
-    variant?: Variant
+    color?: Color
     //defaults to true
     icon?: boolean
     //defaults to false
@@ -16,7 +16,7 @@ export interface AlertType {
     onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
 }
 
-const IconVariants = {
+const IconColors = {
     "info": <IconInfoCircle/>,
     "primary": <IconInfoCircle/>,
     "secondary": <IconInfoCircle/>,
@@ -28,12 +28,12 @@ const IconVariants = {
 
 const Alert: React.FC<AlertType> = (props) => {
 
-    const {variant = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
+    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
 
-    return <div className={`alert alert--${variant}`}>
+    return <div className={`alert alert--${color}`}>
         <div className={"alert__header"}>
             <div className={"alert__header-wrapper"}>
-                {icon ? <AlertIcon variant={variant}/> : null}
+                {icon ? <AlertIcon variant={color}/> : null}
                 <span className={"alert__heading"}>{title}</span>
             </div>
             {dismissible ? <span className={"alert__dismissible"} onClick={onClose}><IconX/></span> : null}
@@ -51,12 +51,12 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: Variant
+    variant: Color
 }
 
 const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
     return <span className={"alert__icon"}>
-        {IconVariants[variant]}
+        {IconColors[variant]}
     </span>
 }
 
diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
index 1a7e2059..4a437dca 100644
--- a/src/components/badge/Badge.stories.tsx
+++ b/src/components/badge/Badge.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Badge from "./Badge";
 import Button from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
-import {Variants as BadgeVariants}  from "../../utils/utils";
+import {Colors as BadgeVariants}  from "../../utils/utils";
 
 const meta: Meta = {
     title: "Badge",
@@ -15,7 +15,7 @@ export const Variants = () => {
 
         {
             BadgeVariants.map(value => {
-                return <Badge style={{marginRight: ".5rem"}} variant={value}>
+                return <Badge style={{marginRight: ".5rem"}} color={value}>
                     {value}
                 </Badge>
             })
@@ -25,12 +25,12 @@ export const Variants = () => {
 }
 
 export const ButtonExample = () => {
-    return <Button variant={"primary"}>
+    return <Button color={"primary"}>
         <Button.Icon>
             <IconGitBranch/>
         </Button.Icon>
         Merge Branch
-        <Badge style={{marginLeft: ".5rem"}} variant={"secondary"}>
+        <Badge style={{marginLeft: ".5rem"}} color={"secondary"}>
             Badge
         </Badge>
     </Button>
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index 5d63613a..725369cd 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,18 +1,18 @@
 import React, {HTMLProps} from "react";
 import "./Badge.style.scss"
-import {Variant} from "../../utils/utils";
+import {Color} from "../../utils/utils";
 
 export interface BadgeType extends HTMLProps<HTMLSpanElement>{
     children: string
     //defaults to primary
-    variant?: Variant
+    color?: Color
 }
 
 const Badge: React.FC<BadgeType> = (props) => {
     
-    const {variant = "primary", children, ...args} = props
+    const {color = "primary", children, ...args} = props
     
-    return <span {...args} className={`badge badge--${variant}`}>
+    return <span {...args} className={`badge badge--${color}`}>
         {children}
     </span>
 }
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 60b98385..a8b7a60e 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -3,7 +3,7 @@ import {StoryObj} from "@storybook/react";
 import React from "react";
 import ButtonGroup from "../button-group/ButtonGroup";
 import {IconAbc} from "@tabler/icons-react";
-import {Variants} from "../../utils/utils";
+import {Colors} from "../../utils/utils";
 
 const meta = {
     title: "Button",
@@ -33,8 +33,8 @@ export const Buttons: ButtonStory = {
 
         return <>
             {
-                Variants.map(value => {
-                    return <Button disabled={disabled} variant={value}>
+                Colors.map(value => {
+                    return <Button disabled={disabled} color={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button>
@@ -53,8 +53,8 @@ export const ButtonGroups: ButtonGroupStory = {
         return <>
             <ButtonGroup>
                 {
-                    Variants.map((value, index) => {
-                        return <Button variant={value}>
+                    Colors.map((value, index) => {
+                        return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
@@ -65,7 +65,7 @@ export const ButtonGroups: ButtonGroupStory = {
                 {
                     ["primary", "primary", "primary", "primary"].map((value, index) => {
                         // @ts-ignore
-                        return <Button variant={value}>
+                        return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
@@ -77,7 +77,7 @@ export const ButtonGroups: ButtonGroupStory = {
                 {
                     ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
                         // @ts-ignore
-                        return <Button disabled={(index % 2) == 0} variant={value}>
+                        return <Button disabled={(index % 2) == 0} color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
                         </Button>
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index a2b85582..6717b10c 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -4,12 +4,12 @@ import React, {
     DetailedHTMLProps,
     ReactNode
 } from "react";
-import {getChild, getContent, Variant} from "../../utils/utils";
+import {getChild, getContent, Color} from "../../utils/utils";
 
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
-    variant?: Variant,
+    color?: Color,
     //defaults to false
     active?: boolean
     //defaults to false
@@ -22,12 +22,12 @@ export interface ButtonIconType {
 
 const Button: React.FC<ButtonType> = (props) => {
 
-    const {children, variant = "primary", active = false, disabled = false, ...args} = props
+    const {children, color = "primary", active = false, disabled = false, ...args} = props
     const icon = getChild(children, ButtonIcon)
     const content = getContent(children, ButtonIcon)
 
 
-    return <a {...args} className={`button button--${variant} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""}`}
+    return <a {...args} className={`button button--${color} ${active ? "button--active" : ""} ${disabled ? "button--disabled" : ""}`}
         aria-disabled={disabled ? "true" : "false"}>
         {icon}
         {content ? <span className={"button__content"}>{content}</span> : null}
diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx
index d016053a..a7256db2 100644
--- a/src/components/card/Card.stories.tsx
+++ b/src/components/card/Card.stories.tsx
@@ -15,7 +15,7 @@ const meta: Meta = {
 export default meta
 
 export const Test = () => {
-    return <Card variant={"secondary"}>
+    return <Card color={"secondary"}>
         <Card.Image alt={"Nico Sammito"} src={"https://event.gls-west.de/Nico_Sammito.jpg"}/>
         <Card.Header>
             <Card.Title>Nico Sammito</Card.Title>
@@ -39,10 +39,10 @@ export const Test = () => {
         </ListGroup>
         <CardFooter>
             <ButtonGroup>
-                <Button variant={"secondary"}>
+                <Button color={"secondary"}>
                     Button
                 </Button>
-                <Button variant={"secondary"}>
+                <Button color={"secondary"}>
                     Button
                 </Button>
             </ButtonGroup>
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 1f31da1d..246f0c18 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -5,21 +5,21 @@ import {CardHeader, CardHeaderType} from "./CardHeader";
 import {CardTitle, CardTitleType} from "./CardTitle";
 import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
 import {CardFooter, CardFooterType} from "./CardFooter";
-import {Variant} from "../../utils/utils";
+import {Color} from "../../utils/utils";
 
 export type CardChildType = CardHeaderType | CardImgStyle | CardTitleType | CardSubTitleType | CardFooterType | any
 
 export interface CardType {
     children: ReactElement<CardChildType> | ReactElement<CardChildType>[]
     //defaults to secondary
-    variant?: Variant
+    color?: Color
 }
 
 const Card: React.FC<CardType> = (props) => {
 
-    const {children, variant = "secondary", ...args} = props
+    const {children, color = "secondary", ...args} = props
 
-    return <div {...args} className={`card card--${variant}`}>
+    return <div {...args} className={`card card--${color}`}>
         {children}
     </div>
 }
diff --git a/src/components/dropdown/Dropdown.stories.tsx b/src/components/dropdown/Dropdown.stories.tsx
index f5e01d0e..974d8b87 100644
--- a/src/components/dropdown/Dropdown.stories.tsx
+++ b/src/components/dropdown/Dropdown.stories.tsx
@@ -53,12 +53,12 @@ export const Dropdowns = () => {
             {
                 ["secondary", "secondary", "secondary", "secondary"].map((value, index) => {
                     // @ts-ignore
-                    return (index % 2 == 0) ? <Button disabled={(index % 2) == 0} variant={value}>
+                    return (index % 2 == 0) ? <Button disabled={(index % 2) == 0} color={value}>
                         {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button> : <Dropdown position={"bottom"} align={"start"}>
                         <Dropdown.Trigger>
-                            <Button disabled={(index % 2) == 0} variant={"secondary"}>
+                            <Button disabled={(index % 2) == 0} color={"secondary"}>
                                 {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                                 {value}
                             </Button>
diff --git a/src/components/menu/InternalMenu.tsx b/src/components/menu/InternalMenu.tsx
index da9138ae..3ac128fa 100644
--- a/src/components/menu/InternalMenu.tsx
+++ b/src/components/menu/InternalMenu.tsx
@@ -37,7 +37,7 @@ export function InternalMenu<T extends object>(props: AriaMenuProps<T>) {
 
 function InternalMenuItem<T>({item, state}: {item: Node<T>, state: TreeState<T>}) {
 
-    const {variant = "secondary", disabled = false, unselectable = false} = item.props as MenuItemType
+    const {color = "secondary", disabled = false, unselectable = false} = item.props as MenuItemType
 
     // Get props for the menu item element
     const ref = React.useRef(null);
@@ -48,7 +48,7 @@ function InternalMenuItem<T>({item, state}: {item: Node<T>, state: TreeState<T>}
     )
 
     return (
-        <li {...(!disabled ? {...menuItemProps} : {})} ref={ref} className={`menu__item menu__item--${variant} ${disabled && "menu__item--disabled"} ${unselectable && "menu__item--unselectable"}`}>
+        <li {...(!disabled ? {...menuItemProps} : {})} ref={ref} className={`menu__item menu__item--${color} ${disabled && "menu__item--disabled"} ${unselectable && "menu__item--unselectable"}`}>
 
             <div>{item.rendered}</div>
             {isSelected && !unselectable ? <IconCheck size={16} style={{marginLeft: ".5rem"}}/> : menuItemProps.role != "menuitem" ? <IconCheck size={16} style={{marginLeft: ".5rem", opacity: 0}}/> : null}
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index a7db0568..98124c02 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {getChild, Variant} from "../../utils/utils";
+import {getChild, Color} from "../../utils/utils";
 import {PopoverProps} from "../popover/Popover";
 import {AriaMenuProps, Key, useButton, useMenuTrigger} from "react-aria";
 import {Item, Section, useMenuTriggerState} from "react-stately";
@@ -24,7 +24,7 @@ export interface MenuContentType {
 export interface MenuItemType {
     children: React.ReactNode
     key: Key
-    variant?: Variant
+    color?: Color
     disabled?: boolean
     unselectable?: boolean
     textValue?: string
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 901dc56b..e86c824d 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,8 +1,8 @@
 import React, {ReactNode, useEffect, useMemo, useState} from "react";
 
-export type Variant = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
 
-export const Variants: Variant[] = ["primary", "secondary", "info", "success", "warning", "error"]
+export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
 
 export type Size = "xs" | "sm" | "md" | "lg" | "xl";
 

From 42fcd6bf6f7c4a199637baca83c58a19ae30b7d6 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 16:17:20 +0100
Subject: [PATCH 06/18] add new variables

---
 src/styles/_helpers.scss   |  4 ++--
 src/styles/_variables.scss | 21 ++++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index c0c5d6a0..c5326d15 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -8,7 +8,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: $secondaryFontSize;
+  font-size: map-get($md, "font");
   position: relative;
 
   @if ($active == true) {
@@ -24,7 +24,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: $secondaryFontSize;
+  font-size: map-get($md, "font");
   position: relative;
 
   @if ($active == true) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 123c9d6e..4ae5ca81 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,5 @@
 $bodyBg: #030014;
+//colors
 $primary: #030014;
 $secondary: #ffffff;
 $info: #70ffb2;
@@ -8,11 +9,25 @@ $error: #D90429;
 $black: #000000;
 $white: #ffffff;
 
+//(font-)sizes
+
+$xs: ("font": .75rem);
+$sm: ("font": .8rem);
+$md: ("font": 1rem);
+$lg: ("font": 1.3rem);
+$xl: ("font": 2rem);
+
+$sizes: (
+        "xs": $xs,
+        "sm": $sm,
+        "md": $md,
+        "lg": $lg,
+        "xl": $xl,
+);
+
+
 //component styling
 $borderRadius: .5rem;
-$primaryFontSize: 1.25rem;
-$secondaryFontSize: 1rem;
-$tertiaryFontSize: .75rem;
 
 $variants: (
         "primary": $primary,

From 89b7c9422b4d1e70513df8b1fb5e10e37a42cd99 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 16:17:28 +0100
Subject: [PATCH 07/18] Implement variables

---
 src/components/badge/Badge.style.scss | 5 +++--
 src/components/card/Card.style.scss   | 4 ++--
 src/components/menu/Menu.style.scss   | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/badge/Badge.style.scss b/src/components/badge/Badge.style.scss
index e875bf5c..43c1a713 100644
--- a/src/components/badge/Badge.style.scss
+++ b/src/components/badge/Badge.style.scss
@@ -1,17 +1,18 @@
 @import "../../styles/helpers";
+@import "../../styles/variables";
 
 .badge {
   @include opacityBox(false);
 
   padding: .25rem;
   display: inline-flex;
-  font-size: $tertiaryFontSize;
+  font-size: map-get($xs, "font");
   width: fit-content;
 }
 
 @each $name, $color in $variants {
   .badge--#{$name} {
     @include opacityBox(false, $color);
-    font-size: $tertiaryFontSize;
+    font-size: map-get($xs, "font");
   }
 }
\ No newline at end of file
diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
index 77ee320b..094ba742 100644
--- a/src/components/card/Card.style.scss
+++ b/src/components/card/Card.style.scss
@@ -49,7 +49,7 @@
 
   &__title {
     padding: 0;
-    font-size: $primaryFontSize;
+    font-size: map-get($lg, "font");
     color: rgba($white, 1);
     font-weight: 500;
     margin: 0 0 .5rem;
@@ -57,7 +57,7 @@
 
   &__sub-title {
     padding: 0;
-    font-size: $secondaryFontSize;
+    font-size: map-get($md, "font");
     color: rgba($white, .75);
     font-weight: 500;
     margin: 0 0 .5rem;
diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss
index 4a55ad59..46ac548d 100644
--- a/src/components/menu/Menu.style.scss
+++ b/src/components/menu/Menu.style.scss
@@ -55,7 +55,7 @@
   }
 
   &__section-title {
-    font-size: $tertiaryFontSize;
+    font-size: map-get($xs, "font");
     color: rgba($white, .25);
     display: block;
     margin: .25rem 0 .25rem .25rem;

From eacc30d6f7c1f55e2b6edcaed5e51030ab31f70b Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 16:17:35 +0100
Subject: [PATCH 08/18] Display variables

---
 src/components/FontSizes/Font.stories.tsx | 24 +++++++++++++++++++++++
 src/components/FontSizes/Font.style.scss  |  8 ++++++++
 src/components/FontSizes/Font.tsx         | 18 +++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 src/components/FontSizes/Font.stories.tsx
 create mode 100644 src/components/FontSizes/Font.style.scss
 create mode 100644 src/components/FontSizes/Font.tsx

diff --git a/src/components/FontSizes/Font.stories.tsx b/src/components/FontSizes/Font.stories.tsx
new file mode 100644
index 00000000..d5429520
--- /dev/null
+++ b/src/components/FontSizes/Font.stories.tsx
@@ -0,0 +1,24 @@
+import Font from "./Font";
+import React from "react";
+import {Sizes} from "../../utils/utils";
+import {Button, ButtonGroup} from "../../index";
+
+
+export default {
+    title: "Font",
+    component: Font
+};
+
+export const Fonts = () => <>
+    {
+        <ButtonGroup>
+            {
+                Sizes.map(value =>
+                    <Button>
+                        <Font size={value}>{value}</Font>
+                    </Button>
+                )
+            }
+        </ButtonGroup>
+    }
+</>
\ No newline at end of file
diff --git a/src/components/FontSizes/Font.style.scss b/src/components/FontSizes/Font.style.scss
new file mode 100644
index 00000000..de54cfb8
--- /dev/null
+++ b/src/components/FontSizes/Font.style.scss
@@ -0,0 +1,8 @@
+@import "../../styles/variables";
+
+
+@each $name, $entry in $sizes {
+  .size__#{$name} {
+    font-size: map-get($entry, "font");
+  }
+}
\ No newline at end of file
diff --git a/src/components/FontSizes/Font.tsx b/src/components/FontSizes/Font.tsx
new file mode 100644
index 00000000..f1f9b9bc
--- /dev/null
+++ b/src/components/FontSizes/Font.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import {Size} from "../../utils/utils";
+import "./Font.style.scss"
+
+export interface FontType {
+    children: string,
+    size: Size,
+}
+
+const Font: React.FC<FontType> = (props) => {
+    const {size, children} = props;
+
+    return <text className={`size__${size}`}>
+        {children}
+    </text>
+}
+
+export default Font
\ No newline at end of file

From c8ddbc7d067b72afb0f1f8fca338ca9cdc616016 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Sun, 18 Feb 2024 16:24:34 +0100
Subject: [PATCH 09/18] change large font

---
 src/styles/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 4ae5ca81..dd69684c 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -14,7 +14,7 @@ $white: #ffffff;
 $xs: ("font": .75rem);
 $sm: ("font": .8rem);
 $md: ("font": 1rem);
-$lg: ("font": 1.3rem);
+$lg: ("font": 1.25rem);
 $xl: ("font": 2rem);
 
 $sizes: (

From 9c4fa87ac93b065a7ea7088b9a4008589659d0a1 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Mon, 19 Feb 2024 17:09:48 +0100
Subject: [PATCH 10/18] fix recommended changes

---
 src/components/FontSizes/Font.style.scss       |  8 --------
 src/components/FontSizes/Font.tsx              | 18 ------------------
 .../{Font.stories.tsx => Text.stories.tsx}     |  8 ++++----
 src/components/FontSizes/Text.style.scss       |  8 ++++++++
 src/components/FontSizes/Text.tsx              | 17 +++++++++++++++++
 src/components/alert/Alert.stories.tsx         |  2 +-
 src/components/alert/Alert.tsx                 |  8 ++++----
 src/components/badge/Badge.stories.tsx         |  2 +-
 src/components/badge/Badge.style.scss          |  4 ++--
 src/components/button/Button.stories.tsx       |  5 +++--
 src/components/button/Button.tsx               |  3 ++-
 src/components/card/Card.style.scss            |  4 ++--
 src/components/card/Card.tsx                   |  2 +-
 src/components/menu/Menu.stories.tsx           |  6 +++---
 src/components/menu/Menu.style.scss            |  2 +-
 src/components/menu/Menu.tsx                   |  3 ++-
 src/styles/_helpers.scss                       |  4 ++--
 src/styles/_variables.scss                     | 10 +++++-----
 src/utils/types.ts                             |  7 +++++++
 src/utils/utils.ts                             |  8 --------
 20 files changed, 65 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/FontSizes/Font.style.scss
 delete mode 100644 src/components/FontSizes/Font.tsx
 rename src/components/FontSizes/{Font.stories.tsx => Text.stories.tsx} (70%)
 create mode 100644 src/components/FontSizes/Text.style.scss
 create mode 100644 src/components/FontSizes/Text.tsx
 create mode 100644 src/utils/types.ts

diff --git a/src/components/FontSizes/Font.style.scss b/src/components/FontSizes/Font.style.scss
deleted file mode 100644
index de54cfb8..00000000
--- a/src/components/FontSizes/Font.style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../../styles/variables";
-
-
-@each $name, $entry in $sizes {
-  .size__#{$name} {
-    font-size: map-get($entry, "font");
-  }
-}
\ No newline at end of file
diff --git a/src/components/FontSizes/Font.tsx b/src/components/FontSizes/Font.tsx
deleted file mode 100644
index f1f9b9bc..00000000
--- a/src/components/FontSizes/Font.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import {Size} from "../../utils/utils";
-import "./Font.style.scss"
-
-export interface FontType {
-    children: string,
-    size: Size,
-}
-
-const Font: React.FC<FontType> = (props) => {
-    const {size, children} = props;
-
-    return <text className={`size__${size}`}>
-        {children}
-    </text>
-}
-
-export default Font
\ No newline at end of file
diff --git a/src/components/FontSizes/Font.stories.tsx b/src/components/FontSizes/Text.stories.tsx
similarity index 70%
rename from src/components/FontSizes/Font.stories.tsx
rename to src/components/FontSizes/Text.stories.tsx
index d5429520..a996cbcd 100644
--- a/src/components/FontSizes/Font.stories.tsx
+++ b/src/components/FontSizes/Text.stories.tsx
@@ -1,12 +1,12 @@
-import Font from "./Font";
+import Text from "./Text";
 import React from "react";
-import {Sizes} from "../../utils/utils";
+import {Sizes} from "../../utils/types";
 import {Button, ButtonGroup} from "../../index";
 
 
 export default {
     title: "Font",
-    component: Font
+    component: Text
 };
 
 export const Fonts = () => <>
@@ -15,7 +15,7 @@ export const Fonts = () => <>
             {
                 Sizes.map(value =>
                     <Button>
-                        <Font size={value}>{value}</Font>
+                        <Text size={value}>{value}</Text>
                     </Button>
                 )
             }
diff --git a/src/components/FontSizes/Text.style.scss b/src/components/FontSizes/Text.style.scss
new file mode 100644
index 00000000..c6cb1f64
--- /dev/null
+++ b/src/components/FontSizes/Text.style.scss
@@ -0,0 +1,8 @@
+@import "../../styles/variables";
+
+
+@each $name, $font in $sizes {
+  .size--#{$name} {
+    font-size: $font;
+  }
+}
\ No newline at end of file
diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
new file mode 100644
index 00000000..d938ab56
--- /dev/null
+++ b/src/components/FontSizes/Text.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import {Size} from "../../utils/types";
+import "./Font.style.scss"
+
+export interface FontType extends Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children">, "className"> {
+    children: string,
+    size: Size,
+}
+
+const Text: React.FC<FontType> = ({ size, children, ...rest }) => {
+
+    return <span className={`size--${size}`} {...rest}>
+        {children}
+    </span>
+}
+
+export default Text
\ No newline at end of file
diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index 42040a3d..5862ee62 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Alert from "./Alert";
 import {Meta, StoryObj} from "@storybook/react";
-import {Colors} from "../../utils/utils";
+import {Colors} from "../../utils/types";
 
 const meta: Meta<typeof Alert> = {
     title: "Alert",
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 1aac3003..0d6e14c6 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -33,7 +33,7 @@ const Alert: React.FC<AlertType> = (props) => {
     return <div className={`alert alert--${color}`}>
         <div className={"alert__header"}>
             <div className={"alert__header-wrapper"}>
-                {icon ? <AlertIcon variant={color}/> : null}
+                {icon ? <AlertIcon color={color}/> : null}
                 <span className={"alert__heading"}>{title}</span>
             </div>
             {dismissible ? <span className={"alert__dismissible"} onClick={onClose}><IconX/></span> : null}
@@ -51,12 +51,12 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: Color
+    color: Color
 }
 
-const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
+const AlertIcon: React.FC<AlertIconType> = ({color}) => {
     return <span className={"alert__icon"}>
-        {IconColors[variant]}
+        {IconColors[color]}
     </span>
 }
 
diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
index 4a437dca..adfcebc3 100644
--- a/src/components/badge/Badge.stories.tsx
+++ b/src/components/badge/Badge.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import Badge from "./Badge";
 import Button from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
-import {Colors as BadgeVariants}  from "../../utils/utils";
+import {Colors as BadgeVariants}  from "../../utils/types";
 
 const meta: Meta = {
     title: "Badge",
diff --git a/src/components/badge/Badge.style.scss b/src/components/badge/Badge.style.scss
index 43c1a713..b9ea7eb5 100644
--- a/src/components/badge/Badge.style.scss
+++ b/src/components/badge/Badge.style.scss
@@ -6,13 +6,13 @@
 
   padding: .25rem;
   display: inline-flex;
-  font-size: map-get($xs, "font");
+  font-size: $xs;
   width: fit-content;
 }
 
 @each $name, $color in $variants {
   .badge--#{$name} {
     @include opacityBox(false, $color);
-    font-size: map-get($xs, "font");
+    font-size: $xs;
   }
 }
\ No newline at end of file
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 5873c447..ce62ccb0 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -3,7 +3,7 @@ import {StoryObj} from "@storybook/react";
 import React from "react";
 import ButtonGroup from "../button-group/ButtonGroup";
 import {IconAbc} from "@tabler/icons-react";
-import {Colors} from "../../utils/utils";
+import {Colors} from "../../utils/types";
 
 const meta = {
     title: "Button",
@@ -38,7 +38,8 @@ export const Buttons: ButtonStory = {
         return <>
             {
                 Colors.map(value => {
-                    return <Button disabled={disabled} color={value}>
+                    // @ts-ignore
+                    return <Button variant={variant} disabled={disabled} color={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button>
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 6b8e14b8..fc3309a3 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -4,7 +4,8 @@ import React, {
     DetailedHTMLProps,
     ReactNode
 } from "react";
-import {getChild, getContent, Color} from "../../utils/utils";
+import {getChild, getContent} from "../../utils/utils";
+import {Color} from "../../utils/types"
 
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
index 094ba742..f106379f 100644
--- a/src/components/card/Card.style.scss
+++ b/src/components/card/Card.style.scss
@@ -49,7 +49,7 @@
 
   &__title {
     padding: 0;
-    font-size: map-get($lg, "font");
+    font-size: $lg;
     color: rgba($white, 1);
     font-weight: 500;
     margin: 0 0 .5rem;
@@ -57,7 +57,7 @@
 
   &__sub-title {
     padding: 0;
-    font-size: map-get($md, "font");
+    font-size: $md;
     color: rgba($white, .75);
     font-weight: 500;
     margin: 0 0 .5rem;
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 246f0c18..2615b0a4 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -5,7 +5,7 @@ import {CardHeader, CardHeaderType} from "./CardHeader";
 import {CardTitle, CardTitleType} from "./CardTitle";
 import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
 import {CardFooter, CardFooterType} from "./CardFooter";
-import {Color} from "../../utils/utils";
+import {Color} from "../../utils/types";
 
 export type CardChildType = CardHeaderType | CardImgStyle | CardTitleType | CardSubTitleType | CardFooterType | any
 
diff --git a/src/components/menu/Menu.stories.tsx b/src/components/menu/Menu.stories.tsx
index 389ebb14..51f6bc6b 100644
--- a/src/components/menu/Menu.stories.tsx
+++ b/src/components/menu/Menu.stories.tsx
@@ -38,7 +38,7 @@ export const MenuAccount: MenuStory = {
                 </Menu.Trigger>
                 <Menu.Content>
                     <Menu.Section>
-                        <Menu.Item variant={"info"} unselectable key={"ssd"}>
+                        <Menu.Item color={"info"} unselectable key={"ssd"}>
                             Storage almost full. You can <br/>
                             manage your storage in Settings →
                         </Menu.Item>
@@ -46,11 +46,11 @@ export const MenuAccount: MenuStory = {
                     <Menu.Section title={"Account Settings"}>
                         <Menu.Item key={"update-account"}><Menu.Icon><IconUserEdit/></Menu.Icon> Update
                             Account</Menu.Item>
-                        <Menu.Item variant={"error"}
+                        <Menu.Item color={"error"}
                                    key={"delete-account"}><Menu.Icon><IconUserCancel/></Menu.Icon> Delete
                             Account</Menu.Item>
                     </Menu.Section>
-                    <Menu.Item variant={"warning"}
+                    <Menu.Item color={"warning"}
                                key="logout"><Menu.Icon><IconLogout/></Menu.Icon> Logout <Menu.Shortcut>⌘Q</Menu.Shortcut></Menu.Item>
                 </Menu.Content>
             </Menu>
diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss
index 46ac548d..041d1a51 100644
--- a/src/components/menu/Menu.style.scss
+++ b/src/components/menu/Menu.style.scss
@@ -55,7 +55,7 @@
   }
 
   &__section-title {
-    font-size: map-get($xs, "font");
+    font-size: $xs;
     color: rgba($white, .25);
     display: block;
     margin: .25rem 0 .25rem .25rem;
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 98124c02..4d15c6d3 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {getChild, Color} from "../../utils/utils";
+import {getChild} from "../../utils/utils";
 import {PopoverProps} from "../popover/Popover";
 import {AriaMenuProps, Key, useButton, useMenuTrigger} from "react-aria";
 import {Item, Section, useMenuTriggerState} from "react-stately";
@@ -8,6 +8,7 @@ import {InternalPopover} from "../popover/InternalPopover";
 import {InternalMenu} from "./InternalMenu";
 import Badge from "../badge/Badge";
 import "./Menu.style.scss"
+import {Color} from "../../utils/types";
 
 export interface MenuType<T> extends AriaMenuProps<T>, PopoverProps {
     children: React.ReactElement<MenuTriggerType & MenuContentType>[]
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index c5326d15..a1faa94e 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -8,7 +8,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: map-get($md, "font");
+  font-size: $md;
   position: relative;
 
   @if ($active == true) {
@@ -24,7 +24,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: map-get($md, "font");
+  font-size: $md;
   position: relative;
 
   @if ($active == true) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index dd69684c..09b35827 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -11,11 +11,11 @@ $white: #ffffff;
 
 //(font-)sizes
 
-$xs: ("font": .75rem);
-$sm: ("font": .8rem);
-$md: ("font": 1rem);
-$lg: ("font": 1.25rem);
-$xl: ("font": 2rem);
+$xs: .75rem;
+$sm: .8rem;
+$md: 1rem;
+$lg: 1.25rem;
+$xl: 2rem;
 
 $sizes: (
         "xs": $xs,
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 00000000..f28ff856
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,7 @@
+export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+
+export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+export const Sizes: Size[] = ["xs", "sm", "md", "lg", "xl"]
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e86c824d..ffbb7f92 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,13 +1,5 @@
 import React, {ReactNode, useEffect, useMemo, useState} from "react";
 
-export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
-
-export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
-
-export type Size = "xs" | "sm" | "md" | "lg" | "xl";
-
-export const Sizes: Size[] = ["xs", "sm", "md", "lg", "xl"]
-
 
 export const getChild = (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean): React.ReactElement | undefined => {
 

From 9437dca6281321c2ed1c0bbe37c9b907b9cfcea9 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Mon, 19 Feb 2024 17:12:51 +0100
Subject: [PATCH 11/18] fix wrong import

---
 src/components/FontSizes/Text.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
index d938ab56..d59a351b 100644
--- a/src/components/FontSizes/Text.tsx
+++ b/src/components/FontSizes/Text.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {Size} from "../../utils/types";
-import "./Font.style.scss"
+import "./Text.style.scss"
 
 export interface FontType extends Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children">, "className"> {
     children: string,

From 615e033d50930eea5bb669096c0b72ceb21f8977 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 19 Feb 2024 16:49:58 +0000
Subject: [PATCH 12/18] Update image snapshots

---
 __snapshots__/font--fonts-chromium.png | Bin 0 -> 3027 bytes
 __snapshots__/font--fonts-firefox.png  | Bin 0 -> 3873 bytes
 __snapshots__/font--fonts-webkit.png   | Bin 0 -> 2842 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 __snapshots__/font--fonts-chromium.png
 create mode 100644 __snapshots__/font--fonts-firefox.png
 create mode 100644 __snapshots__/font--fonts-webkit.png

diff --git a/__snapshots__/font--fonts-chromium.png b/__snapshots__/font--fonts-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..3346e939931817bf84b05daf41a83f5404302858
GIT binary patch
literal 3027
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
B%6|X=

literal 0
HcmV?d00001

diff --git a/__snapshots__/font--fonts-firefox.png b/__snapshots__/font--fonts-firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..2483b264a8629a8e98514cfbc47c0bd1e94b761c
GIT binary patch
literal 3873
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
NuBM?zl^Q(ae*hW&NFx9M

literal 0
HcmV?d00001

diff --git a/__snapshots__/font--fonts-webkit.png b/__snapshots__/font--fonts-webkit.png
new file mode 100644
index 0000000000000000000000000000000000000000..39da7f750050ae81e2fd0de7ebd8d6b44c9a8954
GIT binary patch
literal 2842
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
QXTvUV&B)xa!T=rlZy|YFm;e9(

literal 0
HcmV?d00001


From d15ec8807de565504ef37da97044a462c45ed8cb Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Tue, 20 Feb 2024 16:11:07 +0100
Subject: [PATCH 13/18] change extension of FontType

---
 src/components/FontSizes/Text.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
index d59a351b..13c4fe52 100644
--- a/src/components/FontSizes/Text.tsx
+++ b/src/components/FontSizes/Text.tsx
@@ -1,8 +1,8 @@
-import React from "react";
+import React, {HTMLProps} from "react";
 import {Size} from "../../utils/types";
 import "./Text.style.scss"
 
-export interface FontType extends Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children">, "className"> {
+export interface FontType extends Omit<Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "className">, "size"> {
     children: string,
     size: Size,
 }

From 6df5fcd48ef9ec521fd0e49b9c0433aea9e56463 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Tue, 20 Feb 2024 16:16:01 +0100
Subject: [PATCH 14/18] fix Text stories

---
 src/components/FontSizes/Text.stories.tsx | 38 ++++++++++++++---------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/FontSizes/Text.stories.tsx b/src/components/FontSizes/Text.stories.tsx
index a996cbcd..3d166fe0 100644
--- a/src/components/FontSizes/Text.stories.tsx
+++ b/src/components/FontSizes/Text.stories.tsx
@@ -1,24 +1,34 @@
 import Text from "./Text";
 import React from "react";
-import {Sizes} from "../../utils/types";
+import {Colors, Size, Sizes} from "../../utils/types";
 import {Button, ButtonGroup} from "../../index";
+import Alert from "../alert/Alert";
+import {StoryObj} from "@storybook/react";
 
 
 export default {
     title: "Font",
-    component: Text
+    component: Text,
+    argTypes: {
+        size: {
+            options: ["xs", "sm", "md", "lg", "xl"],
+            control: {type: 'radio'}
+        }
+    }
 };
 
-export const Fonts = () => <>
-    {
-        <ButtonGroup>
-            {
-                Sizes.map(value =>
-                    <Button>
-                        <Text size={value}>{value}</Text>
-                    </Button>
-                )
-            }
-        </ButtonGroup>
+
+export const TextSizes: StoryObj<typeof Text> = {
+    render: (args) => {
+        const {size} = args
+
+        return <>
+            <Button>
+                <Text size={size}>{size}</Text>
+            </Button>
+        </>
+    },
+    args: {
+        size: "sm"
     }
-</>
\ No newline at end of file
+}
\ No newline at end of file

From 65e7129408c22c5d3580c440ef2e00b7df5101dc Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Tue, 20 Feb 2024 21:40:25 +0100
Subject: [PATCH 15/18] remove button to show just the Text Component

---
 src/components/FontSizes/Text.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/FontSizes/Text.stories.tsx b/src/components/FontSizes/Text.stories.tsx
index 3d166fe0..35d9d441 100644
--- a/src/components/FontSizes/Text.stories.tsx
+++ b/src/components/FontSizes/Text.stories.tsx
@@ -23,9 +23,7 @@ export const TextSizes: StoryObj<typeof Text> = {
         const {size} = args
 
         return <>
-            <Button>
                 <Text size={size}>{size}</Text>
-            </Button>
         </>
     },
     args: {

From 2c063cdac914350be58057316b5a2e55208569ec Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Tue, 20 Feb 2024 21:40:37 +0100
Subject: [PATCH 16/18] remove the Omit for the classname

---
 src/components/FontSizes/Text.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
index 13c4fe52..50316ce2 100644
--- a/src/components/FontSizes/Text.tsx
+++ b/src/components/FontSizes/Text.tsx
@@ -2,14 +2,14 @@ import React, {HTMLProps} from "react";
 import {Size} from "../../utils/types";
 import "./Text.style.scss"
 
-export interface FontType extends Omit<Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "className">, "size"> {
+export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
     children: string,
     size: Size,
 }
 
 const Text: React.FC<FontType> = ({ size, children, ...rest }) => {
 
-    return <span className={`size--${size}`} {...rest}>
+    return <span {...rest} className={`size--${size}`}>
         {children}
     </span>
 }

From 93e62a18c33e467a49272fe4c95ccecf6f1dd427 Mon Sep 17 00:00:00 2001
From: Dario <derioreal63@gmail.com>
Date: Tue, 20 Feb 2024 21:41:00 +0100
Subject: [PATCH 17/18] set the style to the right font and color

---
 src/components/FontSizes/Text.style.scss | 4 ++++
 src/components/FontSizes/Text.tsx        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/FontSizes/Text.style.scss b/src/components/FontSizes/Text.style.scss
index c6cb1f64..8ed32977 100644
--- a/src/components/FontSizes/Text.style.scss
+++ b/src/components/FontSizes/Text.style.scss
@@ -1,5 +1,9 @@
 @import "../../styles/variables";
 
+.text {
+  color: rgba($white, .5);
+  font-family: Ubuntu, sans-serif;
+}
 
 @each $name, $font in $sizes {
   .size--#{$name} {
diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
index 50316ce2..e67c99cf 100644
--- a/src/components/FontSizes/Text.tsx
+++ b/src/components/FontSizes/Text.tsx
@@ -9,7 +9,7 @@ export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "childre
 
 const Text: React.FC<FontType> = ({ size, children, ...rest }) => {
 
-    return <span {...rest} className={`size--${size}`}>
+    return <span {...rest} className={`text size--${size}`}>
         {children}
     </span>
 }

From 99bf86cc2ced20158b948779a6ad4859ec05bf64 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 24 Feb 2024 13:49:11 +0000
Subject: [PATCH 18/18] Update image snapshots

---
 __snapshots__/font--text-sizes-chromium.png | Bin 0 -> 503 bytes
 __snapshots__/font--text-sizes-firefox.png  | Bin 0 -> 563 bytes
 __snapshots__/font--text-sizes-webkit.png   | Bin 0 -> 474 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 __snapshots__/font--text-sizes-chromium.png
 create mode 100644 __snapshots__/font--text-sizes-firefox.png
 create mode 100644 __snapshots__/font--text-sizes-webkit.png

diff --git a/__snapshots__/font--text-sizes-chromium.png b/__snapshots__/font--text-sizes-chromium.png
new file mode 100644
index 0000000000000000000000000000000000000000..2108cbada17fe59be9bf78bfd579f2783e3976d5
GIT binary patch
literal 503
zcmeAS@N?(olHy`uVBq!ia0vp^Mj*_=1|;R|J2nC-#^NA%Cx&(BWL^T<8$DedLoyoQ
z-q`CM9VpT8@%grAQpvp^n_IY5n|ozjIvB&-y9BsH1z5aa-dOw3_HD>^5BARPg!aC=
z1qsfgB1&yuy;e8$JoOFDzaMiH;No-gd+A+K|JqXK9{ah-zOOS5s^vbo_+RdT2=7EU
z=Oq^fGEH2h(3zRDC-5mRkC<@QZ<3ts!EL!-OXX|g&M|*@_SUA;WzM>F22;JJ9@<_T
zblBO#uPN&7EdAH<mR363Y?>xc2+8XB@`A&Aeo=^4=%S1Bc5hAjq`CU1X<xs0Pk+DR
z-=eOkces`>w?CP3>C73wV4Zmn%>PVFGbq{`bN%SH+(#cBZO%Wwe)awSYuQ_~nd}qt
z-&-?WeI>tVm;1s32Md|Bga!MbO7^tOnXVsscKyesqNeZN?<MN~y}4Igclh}CTBn7#
zyB}P&ZBkgU`Ep(*TXO&37aL9-=l9OZd$Zv~RbNE>`@O$sovr`uoUO7%{a4Gre-hJD
z3(Ly*9Lmd&9J$D!_GF{AUsJeoq|!u=b+0$=-RixwCh^e=_RU|+<0R0-2o`eB*o1A0
V8#)sA>H}kv!PC{xWt~$(699m`<4OPk

literal 0
HcmV?d00001

diff --git a/__snapshots__/font--text-sizes-firefox.png b/__snapshots__/font--text-sizes-firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..41194fb3128ad627249bd7ab2e148a225e8807c0
GIT binary patch
literal 563
zcmV-30?hr1P)<h;3K|Lk000e1NJLTq001%o001@!1^@s6g|5n{0005{Nkl<ZXhZFk
z$t#3$7{|YFGf`Zbp)@!tTec`!$8s1Fagv;DC(B9x2ue!f=E#K$*~wC}?~*ko+bG1K
znRxxm61U${FFjN5;hlM(Z_oGh`Msl=;P;Au@X@G<!7P#yg9!l{AtQ<i(9u!^mOGY=
zaHCT+NJbQa<&GsI+~^byk`YB<xns!)H#$XwWJD2I?pQLyjZV=Z8Bqk5J64JjA7397
z7CB(E1;OL-U}Ah4iwmpB%1%RMR5*O~-(9XJtSqk~Akd1C5F6ZXH+ybragBTV?}Ji`
z<m6_+8el<x-vBgCWBGTt_b4qZ!R5sj=H?a<8frsvNda4aV`E#t4@O>oE?Sz~@%Zp4
zTt-TfwDe?zM}(obrytJio6n`*i<}&vVs>VpeOFswjj_=wY;Eqc`^Kg^HgkAzY>Xl%
zvk7*4Dq`cJadvi&!GTd$=x342>T-7ER+iV<;&lx*7#<qO&i0-$ihOM0<?RKBBOCq}
zKXi3;|0+^ZRj$7iUq#*xjSNp1r-;SsufNPLJU_o6At46w`qkFj`S*%s+Eb926c4l6
z45#x(r#y*+{iDBEMEHP92$1rxC1DTY2r43sP;vknkqlHgj*JK+lpH`tBm)(WBO}5H
zB?piZ$v}nU$cQjP$pK_UGEm_-G9rvna=^ba@&;Qz=-W!r>ni{N002ovPDHLkV1kc#
B`LzH5

literal 0
HcmV?d00001

diff --git a/__snapshots__/font--text-sizes-webkit.png b/__snapshots__/font--text-sizes-webkit.png
new file mode 100644
index 0000000000000000000000000000000000000000..751225c1e9b4ae8f48a99a4e9b1994db00061928
GIT binary patch
literal 474
zcmeAS@N?(olHy`uVBq!ia0vp^MnG)F!2~3^&cuEIQfx`y?k)`fL2$v|<&zm082de4
z977^n-`?2k&6Fr};Nx?f+AG5On}j)Km^4LXl&hqLj64=<F8{SSOCw{$$!TX4WX>Eo
zc4$qDgMpOF**5}vKgXFcOE*o(cv0?Q`e)zek2W^nYbxf=?n~_K{<Ghwp7)1cildX5
z3U=bxa-GeMraXsR!lyMIWH>#`Yw7RDA+rQFZIl#dnSM4cck7a*kLTXc7h##MQy%30
zGVAM0^9Z~9E(!))<^5NzI#&3t-*J7pO=U&U>Z|F`mpLyy+Uyb}GW#>P@x+XZa&^AD
zhfb(|t6D!Ls^Z?tRkJkA?2n7OzAc$@x|=C+M%CVndETw7qYv61+oV&%t-L&RrA?aA
z&Z{Si_Wv)NW~)D4zAe2pR=p*_i!*TdT{*=gSxaXvYu;w?<7B*e*X`))pMTC)<(z%^
zplvx@^TX!{uTQl<eIoPYp2<PoI@-O@#f4ALI_nl^R5k7R<35+eGU?$Wrq#11t5iPG
hVf&xYh%-Q{*zdZRNt|M_{RE6G22WQ%mvv4FO#s78$!Y)q

literal 0
HcmV?d00001