@syscore/ui-library 1.5.0 → 1.5.2

package/client/components/ui/button.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
-import { motion } from "motion/react";
 
 const buttonVariants = cva(
   "button",
@@ -21,8 +20,10 @@ const buttonVariants = cva(
         "general-primary": "button--general-primary",
         "general-secondary": "button--general-secondary",
         "general-tertiary": "button--general-tertiary",
+        "transparent-tertiary": "button--transparent-tertiary",
         "tooltip-primary": "button--tooltip-primary",
         "tooltip-secondary": "button--tooltip-secondary",
+        
       },
       size: {
         xlarge: "button--xlarge",
@@ -45,6 +46,8 @@ export interface ButtonProps
   >,
   VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  ftMadeFont?: boolean;
+  mazzardSoftFont?: boolean;
 }
 
 const sizeTextClasses: Record<string, string> = {
@@ -55,14 +58,16 @@ const sizeTextClasses: Record<string, string> = {
 };
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, children, style, ...props }, ref) => {
+  ({ className, variant, size, ftMadeFont, mazzardSoftFont, children, style, ...props }, ref) => {
     const textClass = sizeTextClasses[size || "large"];
 
     return (
       <button
         className={cn(
           buttonVariants({ variant, size }),
-          className
+          ftMadeFont && "font-ftMade",
+          mazzardSoftFont && "font-mazzardSoft",
+          className,
         )}
         style={style}
         ref={ref}

package/client/components/ui/standard-navigation.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@/lib/utils";
-import { UtilityClose } from "../icons/UtilityClose";
+import { UtilityClearRegular } from "../icons/UtilityClearRegular";
 import { NavBullet } from "../icons/NavBullet";
 import { Button } from "@/components/ui/button";
 import { StandardLogo } from "../icons/StandardLogo";
@@ -406,7 +406,8 @@ export const StandardNavigation: React.FC<NavigationProps> = ({
                 }
               }}
             >
-              <UtilityClose className="navigation-close-icon" />
+            <UtilityClearRegular className="navigation-close-icon" />
+      
             </Button>
           ) : null}
 

package/client/global.css

@@ -141,6 +141,14 @@ layer(base);
   font-display: swap;
 }
 
+.font-ftMade {
+  font-family: var(--font-ftmade);
+}
+
+.font-mazzardSoft {
+  font-family: var(--font-mazzard);
+}
+
 /* Container Utility Class */
 .container {
   margin-inline: auto;
@@ -949,10 +957,16 @@ body {
   background-color: var(--color-white, #fff);
   border: 1px solid var(--color-gray-200, #dedfe3);
   color: var(--color-cyan-800, #0f748a);
+  
 }
 
 .button--secondary-light:hover {
   background-color: var(--color-gray-50, #f9f9fa);
+  transform: scale(1.02);
+  transition-timing-function: ease-in-out;
+  transition-duration: 200ms;
+  will-change: transform;
+  border: none;
 }
 
 .button--secondary-light:focus-visible {
@@ -1007,6 +1021,44 @@ body {
     0 0 0 2px var(--color-blue-200, #cbe0f1),
     0 0 0 4px var(--color-white, #fff);
 }
+.button--transparent-tertiary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  font-weight: 600;
+  will-change: transform;
+  border: none;
+  height: 4rem;
+  cursor: pointer;
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  background: none;
+  background-color: #282A3133;
+  padding-left: 3.75rem;
+  padding-right: 3.75rem;
+  color: white;
+}
+
+.button--transparent-tertiary:hover {
+  transform: scale(1.02);
+  background-color: #282a3166;
+}
+
+.button--transparent-tertiary:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--tw-ring-color, rgb(59 130 246)),
+    0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-ring-offset-width: 2px;
+}
+
+.button--transparent-tertiary:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
 
 .button--general-tertiary {
   background-color: var(--color-white, #fff);
@@ -6092,7 +6144,7 @@ body {
 
 .navigation-logo-link {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   transition: transform 300ms ease-in-out;
   will-change: transform;
   gap: 6px;

package/client/ui/Button.stories.tsx

@@ -20,6 +20,14 @@ const meta = {
       control: { type: "select" },
       options: ["xlarge", "large", "utility", "icon"],
     },
+    ftMadeFont: {
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
+    mazzardSoftFont: {
+      control: { type: "boolean" },
+      defaultValue: false,
+    },
   },
 } satisfies Meta<typeof Button>;
 
@@ -29,17 +37,17 @@ type Story = StoryObj<typeof meta>;
 
 // CTA Buttons Stories
 export const CTAPrimaryGradient: Story = {
-  render: () => (
+  render: (args) => (
     <div className="space-y-6">
       <div>
         <p className="text-sm text-gray-600 mb-2">Xlarge, primary, gradient</p>
-        <Button variant="primary-gradient" size="xlarge">
+        <Button variant="primary-gradient" size="xlarge" ftMadeFont={args.ftMadeFont}>
           Call to action
         </Button>
       </div>
       <div>
         <p className="text-sm text-gray-600 mb-2">Large, primary, gradient</p>
-        <Button variant="primary-gradient" size="large">
+        <Button variant="primary-gradient" size="large" ftMadeFont={args.ftMadeFont}>
           Call to action
         </Button>
       </div>
@@ -138,6 +146,19 @@ export const UtilityGeneralTertiary: Story = {
   ),
 };
 
+export const UtilityTransparentTertiary: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Transparent, tertiary</p>
+        <Button variant="transparent-tertiary" size="utility">
+        Transparent tertiary
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
 export const UtilityTooltipPrimary: Story = {
   render: () => (
     <div className="space-y-6">