studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance button component styles

Browse Source 
update button token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:12:06 +02:00
committed by NathanVss
parent 3e62cdb929
commit 59b362407d
5 changed files with 265 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
packages/react/src/components/Button/_index.scss
View File

@@ -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 {
gap: var(--c--theme--spacings--t);
&--with-icon--left,
&--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 {
background-color: var(--c--theme--colors--primary-400);
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);
}
&--brand {
@include button-variant("brand");
}
&--primary-text {
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;
}
&--neutral {
@include button-variant("neutral");
}
&--secondary {
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);
}
&--warning {
@include button-variant("warning");
}
&--tertiary {
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;
}
&--error {
@include button-variant("error");
}
&--tertiary-text {
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;
}
&--success {
@include button-variant("success");
}
&--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);
}
&--info {
@include button-variant("info");
}
}

10
packages/react/src/components/Button/index.mdx
View File

@@ -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}/>

162
packages/react/src/components/Button/index.stories.tsx
View File

@@ -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 = {
render: () => {
return (
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<Button {...Primary.args} />
<Button {...PrimaryText.args} />
<Button {...Secondary.args} />
<Button {...Tertiary.args} />
<Button {...TertiaryText.args} />
<Button {...Disabled.args} />
<Button {...LinkDisabled.args} />
<Button {...Danger.args} />
type AllButtonsProps = ButtonProps & {
variant: ButtonProps["variant"];
};
const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
return (
<div
style={{
display: "flex",
alignItems: "center",
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 = {
args: {
children: "Tertiary Text",
color: "tertiary-text",
},
};
export const Disabled: Story = {
const TertiaryDisabled: 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",
color: "primary",
disabled: true,
href: "https://perdu.com",
children: "Bordered",
color: "bordered",
icon: <span className="material-icons">bolt</span>,
},
};
export const Danger: Story = {
const BrandBorderedDisabled: Story = {
args: {
children: "Danger",
color: "danger",
children: " Disabled",
color: "bordered",
disabled: true,
icon: <span className="material-icons">bolt</span>,
},
};
export const Medium: Story = {
args: {
children: "Primary",
color: "primary",
},
};

20
packages/react/src/components/Button/index.tsx
View File

@@ -13,13 +13,15 @@ export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
export type ButtonProps = Omit<DomProps, "color"> &
RefAttributes<ButtonElement> & {
size?: "medium" | "small" | "nano";
color?:
| "primary"
| "primary-text"
| "secondary"
| "tertiary"
| "tertiary-text"
| "danger";
variant?:
| "brand"
| "neutral"
| "info"
| "success"
| "warning"
| "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,
];

18
packages/react/src/components/Button/tokens.ts
View File

@@ -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-icon-font-size": defaults.theme.font.sizes.l,
"nano-font-size": defaults.theme.font.sizes.m,
"nano-icon-font-size": defaults.theme.font.sizes.l,
"font-weight": defaults.theme.font.weights.regular,
"font-family": defaults.theme.font.families.base,
"text-font-weight": defaults.theme.font.weights.medium,
"small-font-size": defaults.globals.font.sizes.sm,
"small-icon-font-size": defaults.globals.font.sizes.md,
"nano-font-size": defaults.globals.font.sizes.xs,
"nano-icon-font-size": defaults.globals.font.sizes.md,
"font-weight": defaults.globals.font.weights.regular,
"font-family": defaults.globals.font.families.base,
"text-font-weight": defaults.globals.font.weights.medium,
};
};