@usefui/components 1.6.0 → 1.7.0

package/src/badge/styles/index.ts

@@ -1,91 +1,98 @@
 import styled, { css } from "styled-components";
 
 const BadgeBaseStyles = css`
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--measurement-medium-10);
+
   min-width: var(--measurement-medium-60);
   min-height: var(--measurement-medium-60);
   width: fit-content;
 
   border: var(--measurement-small-10) solid transparent;
+  padding: 0 var(--measurement-medium-30);
 
   font-size: var(--fontsize-small-60);
-  padding: var(--measurement-medium-10) var(--measurement-medium-30);
   font-weight: 500;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+  line-height: 0;
+
   transition: all ease-in-out 0.2s;
 `;
-
 const BadgeVariantStyles = css`
   border: var(--measurement-small-10) solid transparent;
 
   &[data-variant="primary"] {
-    background-color: var(--font-color);
-    color: var(--body-color);
+    background-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      border-color: var(--font-color-alpha-10);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="secondary"] {
-    background-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    background-color: var(--contrast-color);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="border"] {
     background-color: transparent;
     border-color: var(--font-color-alpha-10);
-    color: var(--font-color-alpha-60);
+    color: var(--font-color-alpha-80);
 
-    &:hover,
-    &:focus {
-      color: var(--font-color);
+    * {
+      color: currentColor !important;
     }
   }
-  &[data-variant="error"] {
+  &[data-variant="danger"] {
     background-color: var(--alpha-red-10);
-    color: var(--alpha-red-80);
+    border-color: var(--alpha-red-10);
+    color: var(--shade-red-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-red-10);
-      color: var(--color-red);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="warning"] {
     background-color: var(--alpha-orange-10);
-    color: var(--alpha-orange-80);
+    border-color: var(--alpha-orange-10);
+    color: var(--shade-orange-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-orange-10);
-      color: var(--color-orange);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="success"] {
     background-color: var(--alpha-green-10);
-    color: var(--alpha-green-80);
+    border-color: var(--alpha-green-10);
+    color: var(--shade-lime-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-green-10);
-      color: var(--color-green);
+    * {
+      color: currentColor !important;
     }
   }
   &[data-variant="meta"] {
-    background-color: var(--alpha-blue-10);
-    color: var(--alpha-blue-80);
+    background-color: var(--alpha-indigo-10);
+    border-color: var(--alpha-indigo-10);
+    color: var(--shade-indigo-20);
+
+    * {
+      color: currentColor !important;
+    }
+  }
+  &[data-variant="hint"] {
+    background-color: var(--alpha-purple-10);
+    border-color: var(--alpha-purple-10);
+    color: var(--shade-purple-20);
 
-    &:hover,
-    &:focus {
-      background-color: var(--alpha-blue-10);
-      color: var(--color-blue);
+    * {
+      color: currentColor !important;
     }
   }
 `;
@@ -97,13 +104,35 @@ const BadgeShapeStyles = css`
     border-radius: var(--measurement-medium-20);
   }
   &[data-shape="round"] {
-    border-radius: var(--measurement-large-90);
+    border-radius: var(--measurement-medium-60);
   }
 `;
+const BadgeSizeStyles = css`
+  &[data-size="small"] {
+    padding: 0 var(--measurement-medium-30);
+
+    min-width: var(--measurement-medium-70);
+    min-height: var(--measurement-medium-70);
+  }
+  &[data-size="medium"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-60);
+    min-height: var(--fontsize-medium-60);
+  }
+  &[data-size="large"] {
+    padding: 0 var(--measurement-medium-40);
+
+    min-width: var(--fontsize-medium-70);
+    min-height: var(--fontsize-medium-70);
+  }
+`;
+
 export const BadgeWrapper = styled.div<any>`
   &[data-raw="false"] {
     ${BadgeBaseStyles}
     ${BadgeVariantStyles}
     ${BadgeShapeStyles}
+    ${BadgeSizeStyles}
   }
 `;

package/src/button/Button.stories.tsx

@@ -8,9 +8,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Button>;
@@ -46,15 +48,28 @@ export const Variants: Story = {
   render: ({ ...args }) => {
     return (
       <Page>
-        <Page.Content className="flex align-center justify-center">
+        <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="accent">
+              <span className="color-mono-white">Accent</span>
+            </Button>
+          </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
             <Button variant="primary">Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <Button variant="tertiary">Tertiary</Button>
-            <Button variant="danger">Danger</Button>
-            <Button variant="warning">Warning</Button>
             <Button variant="mono">Mono</Button>
             <Button variant="border">Border</Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="hint">Hint</Button>
+            <Button variant="meta">Meta</Button>
+            <Button variant="success">Success</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="warning">Warning</Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="link">Link</Button>
             <Button variant="ghost">Ghost</Button>
           </div>
         </Page.Content>
@@ -67,6 +82,11 @@ export const Animations: Story = {
     return (
       <Page>
         <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button animation="reflective" variant="accent">
+              <span className="color-mono-white">Accent</span>
+            </Button>
+          </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
             <Button animation="reflective" variant="primary">
               Primary
@@ -77,12 +97,6 @@ export const Animations: Story = {
             <Button animation="reflective" variant="tertiary">
               Tertiary
             </Button>
-            <Button animation="reflective" variant="danger">
-              Danger
-            </Button>
-            <Button animation="reflective" variant="warning">
-              Warning
-            </Button>
             <Button animation="reflective" variant="mono">
               Mono
             </Button>
@@ -91,27 +105,26 @@ export const Animations: Story = {
             </Button>
           </div>
           <div className="flex align-center justify-center g-medium-30 flex-wrap">
-            <Button animation="reflective" variant="border" sizing="small">
-              Small
+            <Button animation="reflective" variant="hint">
+              Hint
             </Button>
-            <Button animation="reflective" variant="border" sizing="medium">
-              Medium
+            <Button animation="reflective" variant="meta">
+              Meta
             </Button>
-            <Button animation="reflective" variant="border" sizing="large">
-              Large
+            <Button animation="reflective" variant="success">
+              Success
             </Button>
-          </div>
-          <div className="flex align-center justify-center g-medium-30 flex-wrap">
-            <Button animation="reflective" variant="border" shape="square">
-              Square
-            </Button>
-            <Button animation="reflective" variant="border" shape="smooth">
-              Smooth
+            <Button animation="reflective" variant="danger">
+              Danger
             </Button>
-            <Button animation="reflective" variant="border" shape="round">
-              Round
+            <Button animation="reflective" variant="warning">
+              Warning
             </Button>
           </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="link">Link</Button>
+            <Button variant="ghost">Ghost</Button>
+          </div>
         </Page.Content>
       </Page>
     );

package/src/button/index.tsx

@@ -9,16 +9,20 @@ import {
   IComponentSize,
   ComponentVariantEnum,
   TComponentVariant,
-  TComponentShape,
+  ComponentShapeEnum,
+  IComponentShape,
+  TComponentVariantExtended,
 } from "../../../../types";
 
 export interface IButtonProperties
-  extends IComponentStyling,
+  extends
+    IComponentStyling,
+    IComponentShape,
     IComponentSize,
     React.ComponentPropsWithRef<"button"> {
   rawicon?: boolean;
-  variant?: TComponentVariant | "danger" | "warning";
-  shape?: TComponentShape;
+  variant?: TComponentVariant | TComponentVariantExtended | "link" | "accent";
+
   animation?: "reflective";
 }
 
@@ -46,7 +50,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
       name,
       variant = ComponentVariantEnum.Primary,
       sizing = ComponentSizeEnum.Medium,
-      shape = "smooth",
+      shape = ComponentShapeEnum.Smooth,
       animation,
       raw,
       rawicon,
@@ -82,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
           y: ((e.clientY - rect.top) / rect.height) * 100,
         });
       },
-      []
+      [],
     );
     const handleMouseEnter = React.useCallback(
       (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -91,7 +95,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
 
         setIsHovering(true);
       },
-      []
+      [],
     );
     const handleMouseLeave = React.useCallback(
       (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -100,7 +104,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
 
         setIsHovering(false);
       },
-      []
+      [],
     );
 
     return (
@@ -136,6 +140,6 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
         {children}
       </ButtonWrapper>
     );
-  }
+  },
 );
 Button.displayName = "Button";