New Type for Variants (Also for sizes now)

src/components/FontSizes/Text.stories.tsx

@@ -0,0 +1,32 @@
+import Text from "./Text";
+import React from "react";
+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,
+    argTypes: {
+        size: {
+            options: ["xs", "sm", "md", "lg", "xl"],
+            control: {type: 'radio'}
+        }
+    }
+};
+
+
+export const TextSizes: StoryObj<typeof Text> = {
+    render: (args) => {
+        const {size} = args
+
+        return <>
+                <Text size={size}>{size}</Text>
+        </>
+    },
+    args: {
+        size: "sm"
+    }
+}

src/components/FontSizes/Text.style.scss

@@ -0,0 +1,12 @@
+@import "../../styles/variables";
+
+.text {
+  color: rgba($white, .5);
+  font-family: Ubuntu, sans-serif;
+}
+
+@each $name, $font in $sizes {
+  .size--#{$name} {
+    font-size: $font;
+  }
+}

src/components/FontSizes/Text.tsx

@@ -0,0 +1,17 @@
+import React, {HTMLProps} from "react";
+import {Size} from "../../utils/types";
+import "./Text.style.scss"
+
+export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+    children: string,
+    size: Size,
+}
+
+const Text: React.FC<FontType> = ({ size, children, ...rest }) => {
+
+    return <span {...rest} className={`text size--${size}`}>
+        {children}
+    </span>
+}
+
+export default Text

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 {Colors} from "../../utils/types";
 
 const meta: Meta<typeof Alert> = {
     title: "Alert",
@@ -14,7 +15,7 @@ const meta: Meta<typeof Alert> = {
         },
         onClose: {table:{disable: true}},
         title: {table:{disable: true}},
-        variant: {table:{disable: true}}
+        color: {table:{disable: true}}
     },
 }
 
@@ -28,9 +29,8 @@ export const WithBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
-                    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,9 +51,8 @@ export const WithoutBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
-                    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}/>
                 })
             }
         </>

src/components/alert/Alert.tsx

@@ -1,21 +1,22 @@
 import React, {ReactElement, ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
+import {Color} from "../../utils/utils";
 
 export interface AlertType {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color?: Color
     //defaults to true
     icon?: boolean
     //defaults to false
     dismissible?: boolean
     onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
 }
 
-const IconVariants = {
+const IconColors = {
     "info": <IconInfoCircle/>,
     "primary": <IconInfoCircle/>,
     "secondary": <IconInfoCircle/>,
@@ -27,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 color={color}/> : null}
                 <span className={"alert__heading"}>{title}</span>
             </div>
             {dismissible ? <span className={"alert__dismissible"} onClick={onClose}><IconX/></span> : null}
@@ -50,12 +51,12 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color: Color
 }
 
-const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
+const AlertIcon: React.FC<AlertIconType> = ({color}) => {
     return <span className={"alert__icon"}>
-        {IconVariants[variant]}
+        {IconColors[color]}
     </span>
 }
 

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 {Colors as BadgeVariants}  from "../../utils/types";
 
 const meta: Meta = {
     title: "Badge",
@@ -13,9 +14,8 @@ export const Variants = () => {
     return <>
 
         {
-            ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
-                // @ts-ignore
-                return <Badge style={{marginRight: ".5rem"}} variant={value}>
+            BadgeVariants.map(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>

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: $xs;
   width: fit-content;
 }
 
 @each $name, $color in $variants {
   .badge--#{$name} {
     @include opacityBox(false, $color);
-    font-size: $tertiaryFontSize;
+    font-size: $xs;
   }
 }

src/components/badge/Badge.tsx

@@ -1,17 +1,18 @@
 import React, {HTMLProps} from "react";
 import "./Badge.style.scss"
+import {Color} from "../../utils/utils";
 
 export interface BadgeType extends HTMLProps<HTMLSpanElement>{
     children: string
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    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>
 }

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 {Colors} from "../../utils/types";
 
 const meta = {
     title: "Button",
@@ -36,9 +37,9 @@ export const Buttons: ButtonStory = {
 
         return <>
             {
-                ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
+                Colors.map(value => {
                     // @ts-ignore
-                    return <Button disabled={disabled} variant={variant} color={value}>
+                    return <Button variant={variant} disabled={disabled} color={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button>
@@ -58,8 +59,7 @@ export const ButtonGroups: ButtonGroupStory = {
         return <>
             <ButtonGroup>
                 {
-                    ["primary", "secondary", "info", "success", "warning", "error"].map((value, index) => {
-                        // @ts-ignore
+                    Colors.map((value, index) => {
                         return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}

src/components/button/Button.tsx

@@ -5,11 +5,12 @@ import React, {
     ReactNode
 } from "react";
 import {getChild, getContent} from "../../utils/utils";
+import {Color} from "../../utils/types"
 
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
-    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    color?: Color,
     //default to normal
     variant?: "none" | "normal" | "outlined" | "filled",
     //defaults to false

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>

src/components/card/Card.style.scss

@@ -49,15 +49,15 @@
 
   &__title {
     padding: 0;
-    font-size: $primaryFontSize;
+    font-size: $lg;
     color: rgba($white, 1);
     font-weight: 500;
     margin: 0 0 .5rem;
   }
 
   &__sub-title {
     padding: 0;
-    font-size: $secondaryFontSize;
+    font-size: $md;
     color: rgba($white, .75);
     font-weight: 500;
     margin: 0 0 .5rem;

src/components/card/Card.tsx

@@ -5,20 +5,21 @@ import {CardHeader, CardHeaderType} from "./CardHeader";
 import {CardTitle, CardTitleType} from "./CardTitle";
 import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
 import {CardFooter, CardFooterType} from "./CardFooter";
+import {Color} from "../../utils/types";
 
 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",
+    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>
 }

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}

src/components/menu/Menu.stories.tsx

@@ -38,19 +38,19 @@ 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>
                     </Menu.Section>
                     <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>

src/components/menu/Menu.style.scss

@@ -55,7 +55,7 @@
   }
 
   &__section-title {
-    font-size: $tertiaryFontSize;
+    font-size: $xs;
     color: rgba($white, .25);
     display: block;
     margin: .25rem 0 .25rem .25rem;