🎨(react) enhance button component styles

update button token and css files with new css variables introduce
with the new tokens architectures

packages/react/src/components/Button/_index.scss

@@ -1,3 +1,98 @@
+@mixin button-variant($context) {
+
+  &:hover,
+    &:focus-visible {  
+      border-radius: var(--c--components--button--border-radius--focus);
+    }
+
+  &--primary {
+    background-color: var(--c--contextuals--background--semantic--#{$context}--primary);
+    color: var(--c--contextuals--content--semantic--#{$context}--on-#{$context});
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 4px var(--c--contextuals--border--semantic--#{$context}--primary);
+    }
+    &:hover,
+    &:focus-visible {
+      background-color: var(
+        --c--contextuals--background--semantic--#{$context}--primary-hover
+      );
+      
+    }
+    
+    &:disabled {
+      background-color: var(--c--contextuals--background--semantic--disabled--primary);
+      color: var(--c--contextuals--content--semantic--disabled--primary);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--c--contextuals--background--semantic--#{$context}--secondary);
+    color: var(--c--contextuals--content--semantic--#{$context}--secondary);
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 4px var(--c--contextuals--border--semantic--#{$context}--primary);
+    }
+    &:hover,
+    &:focus-visible {
+      background-color: var(
+        --c--contextuals--background--semantic--#{$context}--secondary-hover
+      );
+    }
+    
+    &:disabled {
+      background-color: var(--c--contextuals--background--semantic--disabled--secondary);
+      color: var(--c--contextuals--content--semantic--disabled--primary);
+    }
+  }
+
+  &--tertiary {
+    background-color: transparent;
+    color: var(--c--contextuals--content--semantic--#{$context}--tertiary);
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 4px var(--c--contextuals--border--semantic--#{$context}--primary);
+    }
+    &:hover,
+    &:focus-visible {
+      background-color: var(--c--contextuals--background--semantic--contextual--primary);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      color: var(--c--contextuals--content--semantic--disabled--primary);
+    }
+  }
+
+  &--bordered {
+    border: 1px solid var(--c--contextuals--border--semantic--neutral--tertiary);
+    background-color: transparent;
+    color: var(--c--contextuals--content--semantic--#{$context}--tertiary);
+
+    &:focus-visible {
+      box-shadow:
+        0 0 0 1px #fff,
+        0 0 0 4px var(--c--contextuals--border--semantic--#{$context}--primary);
+    }
+    &:hover,
+    &:focus-visible {
+      background-color: var(--c--contextuals--background--semantic--contextual--primary);
+    }
+
+    &:disabled {
+      background-color: transparent;
+      color: var(--c--contextuals--content--semantic--disabled--primary);
+      border-color: var(--c--contextuals--border--semantic--disabled--primary);
+    }
+  }
+}
+
 .c__button {
   align-items: center;
   border-radius: var(--c--components--button--border-radius);
@@ -9,7 +104,8 @@
   text-decoration: none;
   font-weight: var(--c--components--button--font-weight);
   font-family: var(--c--components--button--font-family);
-  transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+  transition: all var(--c--globals--transitions--duration)
+    var(--c--globals--transitions--ease-out);
   user-select: none;
 
   &__icon {
@@ -17,28 +113,6 @@
     align-items: center;
   }
 
-  &:hover, &:focus-visible, &:active, &.c__button--active {
-    border-radius: var(--c--components--button--border-radius--active);
-  }
-
-  &:focus-visible {
-    border-color: #FFF;
-    border-radius: var(--c--components--button--border-radius--focus);
-    box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
-    outline: none;
-  }
-
-  &:active, &.c__button--active {
-    border-color: currentColor;
-  }
-
-  &:disabled, &.c__button--disabled {
-    background-color: var(--c--theme--colors--greyscale-200);
-    color: var(--c--theme--colors--greyscale-600);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
   &--text {
     font-weight: var(--c--components--button--text-font-weight);
   }
@@ -51,17 +125,15 @@
   &--medium {
     height: var(--c--components--button--medium-height);
     font-size: var(--c--components--button--medium-font-size);
-    padding: 0 var(--c--theme--spacings--s);
+    padding: 0 var(--c--globals--spacings--s);
 
-    &.c__button--text {
-      height: var(--c--components--button--medium-text-height);
-    }
 
     &.c__button--icon-only {
       width: var(--c--components--button--medium-height);
     }
 
-    .c__button__icon, .c__button__icon * {
+    .c__button__icon,
+    .c__button__icon * {
       font-size: var(--c--components--button--medium-icon-font-size);
     }
   }
@@ -75,12 +147,12 @@
       width: var(--c--components--button--small-height);
     }
 
-    .c__button__icon, .c__button__icon * {
+    .c__button__icon,
+    .c__button__icon * {
       font-size: var(--c--components--button--small-icon-font-size);
     }
   }
 
-
   &--nano {
     height: var(--c--components--button--nano-height);
     font-size: var(--c--components--button--nano-font-size);
@@ -90,7 +162,8 @@
       width: var(--c--components--button--nano-height);
     }
 
-    .c__button__icon, .c__button__icon * {
+    .c__button__icon,
+    .c__button__icon * {
       font-size: var(--c--components--button--nano-icon-font-size);
     }
   }
@@ -100,117 +173,35 @@
     justify-content: center;
   }
 
-  &--with-icon--left, &--with-icon--right {
+  &--with-icon--left,
-    gap: var(--c--theme--spacings--t);
+  &--with-icon--right {
+    gap: var(--c--globals--spacings--xxxs);
   }
 
   &--with-icon--left {
-    padding: 0 var(--c--theme--spacings--s) 0 var(--c--theme--spacings--t);
+    padding: 0 var(--c--globals--spacings--s) 0 var(--c--globals--spacings--t);
   }
 
   &--with-icon--right {
-    padding: 0 var(--c--theme--spacings--t) 0 var(--c--theme--spacings--s);
+    padding: 0 var(--c--globals--spacings--t) 0 var(--c--globals--spacings--s);
   }
 
-  &--primary {
+  &--brand {
-    background-color: var(--c--theme--colors--primary-400);
+    @include button-variant("brand");
-    color: var(--c--theme--colors--primary-text);
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--primary-800);
-      color: var(--c--theme--colors--primary-text);
-    }
-
-    &:active, &.c__button--active {
-      background-color: var(--c--theme--colors--greyscale-000);
-      color: var(--c--theme--colors--primary-800);
-    }
   }
-
+  &--neutral {
-  &--primary-text {
+    @include button-variant("neutral");
-    color: var(--c--theme--colors--primary-600);
-    background-color: transparent;
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--primary-100);
-      color: var(--c--theme--colors--primary-700);
-    }
-
-    &:active, &.c__button--active {
-      background-color: transparent;
-    }
-
-    &:disabled {
-      background-color: transparent;
-    }
   }
-
+  &--warning {
-  &--secondary {
+    @include button-variant("warning");
-    background-color: var(--c--theme--colors--primary-100);
-    color: var(--c--theme--colors--primary-700);
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--primary-500);
-      color: var(--c--theme--colors--primary-text);
-    }
-
-    &:active, &.c__button--active {
-      background-color: var(--c--theme--colors--primary-text);
-      color: var(--c--theme--colors--primary-600);
-    }
   }
-
+  &--error {
-  &--tertiary {
+    @include button-variant("error");
-    background-color: var(--c--theme--colors--greyscale-100);
-    color: var(--c--theme--colors--greyscale-700);
-    font-weight: var(--c--theme--font--weights--medium);
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--greyscale-700);
-      color: var(--c--theme--colors--greyscale-000);
-    }
-
-    &:active, &.c__button--active {
-      background-color: var(--c--theme--colors--greyscale-000);
-      color: var(--c--theme--colors--greyscale-800);
-    }
-
-    &:disabled {
-      background-color: transparent;
-    }
   }
-
+  &--success {
-  &--tertiary-text {
+    @include button-variant("success");
-    color: var(--c--theme--colors--greyscale-700);
-    background-color: transparent;
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--greyscale-100);
-      color: var(--c--theme--colors--greyscale-800);
-    }
-
-    &:active, &.c__button--active {
-      background-color: transparent;
-    }
-
-    &:disabled {
-      background-color: transparent;
-    }
   }
-
+  &--info {
-
+    @include button-variant("info");
-  &--danger {
-    background-color: var(--c--theme--colors--danger-500);
-    color: var(--c--theme--colors--danger-text);
-
-    &:hover, &:focus-visible {
-      background-color: var(--c--theme--colors--danger-800);
-      color: var(--c--theme--colors--primary-text);
-    }
-
-    &:active {
-      background-color: var(--c--theme--colors--greyscale-000);
-      color: var(--c--theme--colors--danger-800);
-    }
   }
 }

packages/react/src/components/Button/index.mdx

@@ -8,7 +8,7 @@ import * as Stories from './index.stories';
 
 The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
 
-<Canvas of={Stories.All}/>
+<Canvas of={Stories.AllBrands}/>
 
 <Source
   language='ts'
@@ -31,13 +31,7 @@ You can also use button with only an icon.
 
 <Canvas sourceState="shown" of={Stories.IconOnly}/>
 
-## Disabled
 
-The button can be disabled. The disabled button will render the same no matter what color is used.
-
-> Keep in the mind that a disabled button will never call `onClick` if it is provided.
-
-<Canvas sourceState="shown" of={Stories.Disabled}/>
 
 ## Full width
 
@@ -50,7 +44,7 @@ The button can be set to full width. You can use the `fullWidth` prop to do so.
 
 You can adjust the size of the button by using the `size` prop. Default value is `medium`.
 
-<Canvas sourceState="shown" of={Stories.Primary}/>
+<Canvas sourceState="shown" of={Stories.Medium}/>
 <Canvas sourceState="shown" of={Stories.Small}/>
 <Canvas sourceState="shown" of={Stories.Nano}/>
 

packages/react/src/components/Button/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Button } from "./index";
+import { Button, ButtonProps } from "./index";
 
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
@@ -10,80 +10,160 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const All: Story = {
+type AllButtonsProps = ButtonProps & {
-  render: () => {
+  variant: ButtonProps["variant"];
-    return (
+};
-      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+
-        <Button {...Primary.args} />
+const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
-        <Button {...PrimaryText.args} />
+  return (
-        <Button {...Secondary.args} />
+    <div
-        <Button {...Tertiary.args} />
+      style={{
-        <Button {...TertiaryText.args} />
+        display: "flex",
-        <Button {...Disabled.args} />
+
-        <Button {...LinkDisabled.args} />
+        alignItems: "center",
-        <Button {...Danger.args} />
+        gap: "1rem",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          alignItems: "start",
+          justifyContent: "start",
+        }}
+      >
+        <h4 className={`clr-content-semantic-${variant}-primary`}>Primary</h4>
+        <Button {...Primary.args} variant={variant} />
+        <Button {...PrimaryDisabled.args} variant={variant} />
       </div>
-    );
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <h4 className={`clr-content-semantic-${variant}-primary`}>Secondary</h4>
+        <Button {...Secondary.args} variant={variant} />
+        <Button {...SecondaryDisabled.args} variant={variant} />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <h4 className={`clr-content-semantic-${variant}-primary`}>Tertiary</h4>
+        <Button {...BrandTertiary.args} variant={variant} />
+        <Button {...TertiaryDisabled.args} variant={variant} />
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <h4 className={`clr-content-semantic-${variant}-primary`}>Bordered</h4>
+        <Button {...Bordered.args} variant={variant} />
+        <Button {...BrandBorderedDisabled.args} variant={variant} />
+      </div>
+    </div>
+  );
+};
+
+export const AllBrands: Story = {
+  render: () => {
+    return <AllButtons variant="brand" />;
   },
 };
 
-export const Primary: Story = {
+export const AllNeutrals: Story = {
+  render: () => {
+    return <AllButtons variant="neutral" />;
+  },
+};
+
+export const AllWarnings: Story = {
+  render: () => {
+    return <AllButtons variant="warning" />;
+  },
+};
+
+export const AllErrors: Story = {
+  render: () => {
+    return <AllButtons variant="error" />;
+  },
+};
+
+export const AllSuccesses: Story = {
+  render: () => {
+    return <AllButtons variant="success" />;
+  },
+};
+
+export const AllInfos: Story = {
+  render: () => {
+    return <AllButtons variant="info" />;
+  },
+};
+
+const Primary: Story = {
   args: {
     children: "Primary",
     color: "primary",
-  },
-};
-
-export const PrimaryText: Story = {
-  args: {
-    children: "Primary Text",
-    color: "primary-text",
     icon: <span className="material-icons">bolt</span>,
   },
 };
 
-export const Secondary: Story = {
+const PrimaryDisabled: Story = {
+  args: {
+    children: "Disabled",
+    color: "primary",
+    disabled: true,
+    icon: <span className="material-icons">bolt</span>,
+  },
+};
+
+const Secondary: Story = {
   args: {
     children: "Secondary",
     color: "secondary",
+    icon: <span className="material-icons">bolt</span>,
   },
 };
 
-export const Tertiary: Story = {
+const SecondaryDisabled: Story = {
+  args: {
+    children: "Disabled",
+    color: "secondary",
+    disabled: true,
+    icon: <span className="material-icons">bolt</span>,
+  },
+};
+
+const BrandTertiary: Story = {
   args: {
     children: "Tertiary",
     color: "tertiary",
+    icon: <span className="material-icons">bolt</span>,
   },
 };
 
-export const TertiaryText: Story = {
+const TertiaryDisabled: Story = {
-  args: {
-    children: "Tertiary Text",
-    color: "tertiary-text",
-  },
-};
-
-export const Disabled: Story = {
   args: {
     children: "Disabled",
-    color: "primary",
+    color: "tertiary",
     disabled: true,
+    icon: <span className="material-icons">bolt</span>,
   },
 };
 
-export const LinkDisabled: Story = {
+const Bordered: Story = {
   args: {
-    children: "Disabled",
+    children: "Bordered",
-    color: "primary",
+    color: "bordered",
-    disabled: true,
+    icon: <span className="material-icons">bolt</span>,
-    href: "https://perdu.com",
   },
 };
 
-export const Danger: Story = {
+const BrandBorderedDisabled: Story = {
   args: {
-    children: "Danger",
+    children: " Disabled",
-    color: "danger",
+    color: "bordered",
+    disabled: true,
+    icon: <span className="material-icons">bolt</span>,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    children: "Primary",
+    color: "primary",
   },
 };
 

packages/react/src/components/Button/index.tsx

@@ -13,13 +13,15 @@ export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
 export type ButtonProps = Omit<DomProps, "color"> &
   RefAttributes<ButtonElement> & {
     size?: "medium" | "small" | "nano";
-    color?:
+    variant?:
-      | "primary"
+      | "brand"
-      | "primary-text"
+      | "neutral"
-      | "secondary"
+      | "info"
-      | "tertiary"
+      | "success"
-      | "tertiary-text"
+      | "warning"
-      | "danger";
+      | "error"
+      | "success";
+    color?: "primary" | "secondary" | "tertiary" | "bordered";
     icon?: ReactNode;
     iconPosition?: "left" | "right";
     active?: boolean;
@@ -31,6 +33,7 @@ export const Button = ({
   color = "primary",
   size = "medium",
   iconPosition = "left",
+  variant = "brand",
   icon,
   active,
   className,
@@ -40,7 +43,8 @@ export const Button = ({
 }: ButtonProps) => {
   const classes = [
     "c__button",
-    "c__button--" + color,
+    "c__button--" + variant,
+    ["c__button--", variant, "--", color].join(""),
     "c__button--" + size,
     className,
   ];

packages/react/src/components/Button/tokens.ts

@@ -4,19 +4,19 @@ export const tokens = (defaults: DefaultTokens) => {
   return {
     "border-radius": "8px",
     "border-radius--active": "2px",
-    "border-radius--focus": "8px",
+    "border-radius--focus": "4px",
     "medium-text-height": "36px",
     "medium-height": "48px",
     "small-height": "32px",
     "nano-height": "24px",
-    "medium-font-size": defaults.theme.font.sizes.l,
+    "medium-font-size": defaults.globals.font.sizes.md,
     "medium-icon-font-size": "1.5rem",
-    "small-font-size": defaults.theme.font.sizes.m,
+    "small-font-size": defaults.globals.font.sizes.sm,
-    "small-icon-font-size": defaults.theme.font.sizes.l,
+    "small-icon-font-size": defaults.globals.font.sizes.md,
-    "nano-font-size": defaults.theme.font.sizes.m,
+    "nano-font-size": defaults.globals.font.sizes.xs,
-    "nano-icon-font-size": defaults.theme.font.sizes.l,
+    "nano-icon-font-size": defaults.globals.font.sizes.md,
-    "font-weight": defaults.theme.font.weights.regular,
+    "font-weight": defaults.globals.font.weights.regular,
-    "font-family": defaults.theme.font.families.base,
+    "font-family": defaults.globals.font.families.base,
-    "text-font-weight": defaults.theme.font.weights.medium,
+    "text-font-weight": defaults.globals.font.weights.medium,
   };
 };