- |
-
-
- size
-
- |
+ size |
{
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index e099a9117f..e43a0b92e4 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,7 +1,7 @@
-import { HalstackProvider } from "../src/HalstackContext";
-import styled from "styled-components";
import type { Preview } from "@storybook/react";
import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
+import "../src/styles/fonts.css";
+import "../src/styles/variables.css";
const preview: Preview = {
parameters: {
@@ -21,19 +21,7 @@ const preview: Preview = {
options: {},
},
},
- decorators: [
- (Story) => (
-
-
-
- ),
- ],
+ decorators: [(Story) => ],
};
-const Container = styled.div`
- @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1");
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
- "Droid Sans", "Helvetica Neue", sans-serif;
-`;
-
export default preview;
diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx
index 8e9a8dc92a..9a7f6791d4 100644
--- a/packages/lib/src/button/Button.stories.tsx
+++ b/packages/lib/src/button/Button.stories.tsx
@@ -2,7 +2,6 @@ import DxcButton from "./Button";
import DxcFlex from "../flex/Flex";
import Title from "../../.storybook/components/Title";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { HalstackProvider } from "../HalstackContext";
import DxcInset from "../inset/Inset";
import DxcTooltip from "../tooltip/Tooltip";
import { userEvent, within } from "@storybook/test";
@@ -36,14 +35,6 @@ const facebookIcon = (
);
-const opinionatedTheme = {
- button: {
- baseColor: "#5f249f",
- primaryFontColor: "#fff",
- secondaryHoverFontColor: "#fff",
- },
-};
-
const Button = () => (
<>
<>
@@ -4927,43 +4918,6 @@ const Button = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
);
diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
index c9a40f280f..2bff60c4f7 100644
--- a/packages/lib/src/button/Button.tsx
+++ b/packages/lib/src/button/Button.tsx
@@ -1,487 +1,49 @@
-import { useContext } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import { AdvancedTheme, spaces } from "../common/variables";
-import { getMargin } from "../common/utils";
-import type ButtonPropsType from "./types";
+import styled from "styled-components";
+import { spaces } from "../common/variables";
+import ButtonPropsType, { Mode, Semantic, Size } from "./types";
import DxcIcon from "../icon/Icon";
import { Tooltip } from "../tooltip/Tooltip";
-import HalstackContext from "../HalstackContext";
-
-const DxcButton = ({
- label = "",
- mode = "primary",
- semantic = "default",
- disabled = false,
- iconPosition = "before",
- title,
- type = "button",
- icon,
- onClick = () => {},
- margin,
- size = { height: "large", width: "fitContent" },
- tabIndex = 0,
-}: ButtonPropsType): JSX.Element => {
- const colorsTheme = useContext(HalstackContext);
-
- return (
-
-
-
-
-
- );
-};
-
-const widths = {
- small: "42px",
- medium: "120px",
- large: "240px",
- fillParent: "100%",
- fitContent: "fit-content",
-};
-
-const calculateWidth = (margin: ButtonPropsType["margin"], size: ButtonPropsType["size"]) =>
- size?.width === "fillParent"
- ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
- : size?.width && widths[size?.width];
-
-const getHeight = (height: Required["size"]["height"]) => {
- switch (height) {
- case "small":
- return 1.5;
- case "medium":
- return 2;
- case "large":
- return 2.5;
- default:
- return 2.5;
- }
-};
-
-const getButtonStyles = (
- $mode: ButtonPropsType["mode"],
- semantic: ButtonPropsType["semantic"],
- theme: AdvancedTheme["button"],
- size: ButtonPropsType["size"]
-) => {
- let enabled = "";
- let hover = "";
- let active = "";
- let focus = "";
- let disabled = "";
-
- const commonPrimaryStyles = `
- font-weight: ${theme.primaryFontWeight};
- font-size: ${size?.height === "small" ? theme.primarySmallFontSize : size?.height === "medium" ? theme.primaryMediumFontSize : theme.primaryLargeFontSize};
- font-family: ${theme.primaryFontFamily};
- border-radius: ${theme.primaryBorderRadius};
- border-width ${theme.primaryBorderThickness};
- border-style: ${theme.primaryBorderStyle};`;
-
- const commonSecondaryStyles = `
- font-weight: ${theme.secondaryFontWeight};
- font-size: ${size?.height === "small" ? theme.secondarySmallFontSize : size?.height === "medium" ? theme.secondaryMediumFontSize : theme.secondaryLargeFontSize};
- font-family: ${theme.secondaryFontFamily};
- border-radius: ${theme.secondaryBorderRadius};
- border-width ${theme.secondaryBorderThickness};
- border-style: ${theme.secondaryBorderStyle};`;
-
- const commonTertiaryStyles = `
- font-weight: ${theme.tertiaryFontWeight};
- font-size: ${size?.height === "small" ? theme.tertiarySmallFontSize : size?.height === "medium" ? theme.tertiaryMediumFontSize : theme.tertiaryLargeFontSize};
- font-family: ${theme.tertiaryFontFamily};
- border-radius: ${theme.tertiaryBorderRadius};
- border-width ${theme.tertiaryBorderThickness};
- border-style: ${theme.tertiaryBorderStyle};`;
-
- switch ($mode) {
- case "primary":
- switch (semantic) {
- case "default":
- enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
- color: ${theme.primaryDefaultFontColor};`;
- hover = `background-color: ${theme.primaryHoverDefaultBackgroundColor};`;
- active = `background-color: ${theme.primaryActiveDefaultBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.primaryDisabledDefaultBackgroundColor};
- color: ${theme.primaryDisabledDefaultFontColor};`;
- break;
- case "error":
- enabled = `background-color: ${theme.primaryErrorBackgroundColor};
- color: ${theme.primaryErrorFontColor};`;
- hover = `background-color: ${theme.primaryHoverErrorBackgroundColor};`;
- active = `background-color: ${theme.primaryActiveErrorBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.primaryDisabledErrorBackgroundColor};
- color: ${theme.primaryDisabledErrorFontColor};`;
- break;
- case "warning":
- enabled = `background-color: ${theme.primaryWarningBackgroundColor};
- color: ${theme.primaryWarningFontColor};`;
- hover = `background-color: ${theme.primaryHoverWarningBackgroundColor};`;
- active = `background-color: ${theme.primaryActiveWarningBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.primaryDisabledWarningBackgroundColor};
- color: ${theme.primaryDisabledWarningFontColor};`;
- break;
- case "success":
- enabled = `background-color: ${theme.primarySuccessBackgroundColor};
- color: ${theme.primarySuccessFontColor};`;
- hover = `background-color: ${theme.primaryHoverSuccessBackgroundColor};`;
- active = `background-color: ${theme.primaryActiveSuccessBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.primaryDisabledSuccessBackgroundColor};
- color: ${theme.primaryDisabledSuccessFontColor};`;
- break;
- case "info":
- enabled = `background-color: ${theme.primaryInfoBackgroundColor};
- color: ${theme.primaryInfoFontColor};`;
- hover = `background-color: ${theme.primaryHoverInfoBackgroundColor};`;
- active = `background-color: ${theme.primaryActiveInfoBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.primaryDisabledInfoBackgroundColor};
- color: ${theme.primaryDisabledInfoFontColor};`;
- break;
- default:
- enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
- color: ${theme.primaryDefaultFontColor};`;
- break;
- }
- return `${commonPrimaryStyles}
- ${enabled}
- &:hover {
- ${hover}
- }
- &:active {
- ${active}
- }
- &:focus {
- ${focus}
- }
- &:disabled {
- ${disabled}
- }`;
- case "secondary":
- switch (semantic) {
- case "default":
- enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
- color: ${theme.secondaryDefaultFontColor};
- border-color ${theme.secondaryDefaultBorderColor};`;
- hover = `background-color: ${theme.secondaryHoverDefaultBackgroundColor};
- color: ${theme.secondaryHoverDefaultFontColor};`;
- active = `background-color: ${theme.secondaryActiveDefaultBackgroundColor};
- color: ${theme.secondaryHoverDefaultFontColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- focus = `border-color: transparent;`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.secondaryDisabledDefaultBackgroundColor};
- color: ${theme.secondaryDisabledDefaultFontColor};
- border-color: ${theme.secondaryDisabledDefaultBorderColor};`;
- break;
- case "error":
- enabled = `background-color: ${theme.secondaryErrorBackgroundColor};
- color: ${theme.secondaryErrorFontColor};
- border-color ${theme.secondaryErrorBorderColor};`;
- hover = `background-color: ${theme.secondaryHoverErrorBackgroundColor};
- color: ${theme.secondaryHoverErrorFontColor};`;
- active = `background-color: ${theme.secondaryActiveErrorBackgroundColor};
- color: ${theme.secondaryHoverErrorFontColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- focus = `border-color: transparent;`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.secondaryDisabledErrorBackgroundColor};
- color: ${theme.secondaryDisabledErrorFontColor};
- border-color: ${theme.secondaryDisabledErrorBorderColor};`;
- break;
- case "warning":
- enabled = `background-color: ${theme.secondaryWarningBackgroundColor};
- color: ${theme.secondaryWarningFontColor};
- border-color ${theme.secondaryWarningBorderColor};`;
- hover = `background-color: ${theme.secondaryHoverWarningBackgroundColor};
- color: ${theme.secondaryHoverWarningFontColor};`;
- active = `background-color: ${theme.secondaryActiveWarningBackgroundColor};
- color: ${theme.secondaryHoverWarningFontColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- focus = `border-color: transparent;`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.secondaryDisabledWarningBackgroundColor};
- color: ${theme.secondaryDisabledWarningFontColor};
- border-color: ${theme.secondaryDisabledWarningBorderColor};`;
- break;
- case "success":
- enabled = `background-color: ${theme.secondarySuccessBackgroundColor};
- color: ${theme.secondarySuccessFontColor};
- border-color ${theme.secondarySuccessBorderColor};`;
- hover = `background-color: ${theme.secondaryHoverSuccessBackgroundColor};
- color: ${theme.secondaryHoverSuccessFontColor};`;
- active = `background-color: ${theme.secondaryActiveSuccessBackgroundColor};
- color: ${theme.secondaryHoverSuccessFontColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- focus = `border-color: transparent;`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.secondaryDisabledSuccessBackgroundColor};
- color: ${theme.secondaryDisabledSuccessFontColor};
- border-color: ${theme.secondaryDisabledSuccessBorderColor};`;
- break;
- case "info":
- enabled = `background-color: ${theme.secondaryInfoBackgroundColor};
- color: ${theme.secondaryInfoFontColor};
- border-color ${theme.secondaryInfoBorderColor};`;
- hover = `background-color: ${theme.secondaryHoverInfoBackgroundColor};
- color: ${theme.secondaryHoverInfoFontColor};`;
- active = `background-color: ${theme.secondaryActiveInfoBackgroundColor};
- color: ${theme.secondaryHoverInfoFontColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- focus = `border-color: transparent;`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.secondaryDisabledInfoBackgroundColor};
- color: ${theme.secondaryDisabledInfoFontColor};
- border-color: ${theme.secondaryDisabledInfoBorderColor};`;
- break;
- default:
- enabled = `background-color: ${theme.secondaryDefaultBackgroundColor};
- color: ${theme.secondaryDefaultFontColor};
- border-color ${theme.secondaryDefaultBorderColor};`;
- break;
- }
- return `${commonSecondaryStyles}
- ${enabled}
- &:hover {
- ${hover}
- }
- &:active {
- ${active}
- }
- &:focus {
- ${focus}
- }
- &:disabled {
- ${disabled}
- }`;
- case "tertiary":
- switch (semantic) {
- case "default":
- enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
- color: ${theme.tertiaryDefaultFontColor};`;
- hover = `background-color: ${theme.tertiaryHoverDefaultBackgroundColor};`;
- active = `background-color: ${theme.tertiaryActiveDefaultBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.tertiaryDisabledDefaultBackgroundColor};
- color: ${theme.tertiaryDisabledDefaultFontColor};`;
- break;
- case "error":
- enabled = `background-color: ${theme.tertiaryErrorBackgroundColor};
- color: ${theme.tertiaryErrorFontColor};`;
- hover = `background-color: ${theme.tertiaryHoverErrorBackgroundColor};`;
- active = `background-color: ${theme.tertiaryActiveErrorBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.tertiaryDisabledErrorBackgroundColor};
- color: ${theme.tertiaryDisabledErrorFontColor};`;
- break;
- case "warning":
- enabled = `background-color: ${theme.tertiaryWarningBackgroundColor};
- color: ${theme.tertiaryWarningFontColor};`;
- hover = `background-color: ${theme.tertiaryHoverWarningBackgroundColor};`;
- active = `background-color: ${theme.tertiaryActiveWarningBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.tertiaryDisabledWarningBackgroundColor};
- color: ${theme.tertiaryDisabledWarningFontColor};`;
- break;
- case "success":
- enabled = `background-color: ${theme.tertiarySuccessBackgroundColor};
- color: ${theme.tertiarySuccessFontColor};`;
- hover = `background-color: ${theme.tertiaryHoverSuccessBackgroundColor};`;
- active = `background-color: ${theme.tertiaryActiveSuccessBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.tertiaryDisabledSuccessBackgroundColor};
- color: ${theme.tertiaryDisabledSuccessFontColor};`;
- break;
- case "info":
- enabled = `background-color: ${theme.tertiaryInfoBackgroundColor};
- color: ${theme.tertiaryInfoFontColor};`;
- hover = `background-color: ${theme.tertiaryHoverInfoBackgroundColor};`;
- active = `background-color: ${theme.tertiaryActiveInfoBackgroundColor};
- border-color: transparent;
- outline: none;
- box-shadow: 0 0 0 2px ${theme.focusBorderColor};`;
- disabled = `cursor: not-allowed;
- background-color: ${theme.tertiaryDisabledInfoBackgroundColor};
- color: ${theme.tertiaryDisabledInfoFontColor};`;
- break;
- default:
- enabled = `background-color: ${theme.tertiaryDefaultBackgroundColor};
- color: ${theme.tertiaryDefaultFontColor};`;
- break;
- }
- return `${commonTertiaryStyles}
- ${enabled}
- &:hover {
- ${hover}
- }
- &:active {
- ${active}
- }
- &:focus {
- ${focus}
- }
- &:disabled {
- ${disabled}
- }`;
- default:
- return undefined;
- }
-};
+import { calculateWidth, getButtonStyles, getHeight } from "./utils";
const Button = styled.button<{
- hasIcon: boolean;
- hasLabel: boolean;
- semantic: ButtonPropsType["semantic"];
- disabled: ButtonPropsType["disabled"];
+ iconOnly: boolean;
iconPosition: ButtonPropsType["iconPosition"];
- $mode: ButtonPropsType["mode"];
margin: ButtonPropsType["margin"];
- size: ButtonPropsType["size"];
+ semantic: Semantic;
+ size: Size;
+ $mode: Mode;
}>`
display: inline-flex;
- flex-direction: ${(props) => (props.iconPosition === "after" ? "row" : "row-reverse")};
- gap: 0.5rem;
align-items: center;
justify-content: center;
- height: ${(props) => `${getHeight(props.size?.height && props.size?.height)}rem`};
+ flex-direction: ${({ iconPosition }) => (iconPosition === "after" ? "row" : "row-reverse")};
+ gap: ${({ size }) => (size.height === "large" ? "var(--spacing-gap-s)" : "var(--spacing-gap-xs)")};
+ height: ${({ size }) => getHeight(size.height)};
width: ${(props) => calculateWidth(props.margin, props.size)};
- margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
- margin-top: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
- margin-right: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
- margin-bottom: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
- margin-left: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
- padding-top: ${(props) =>
- props.hasIcon && !props.hasLabel
- ? props.size?.height === "small"
- ? props.theme.paddingSmallOnlyIconTop
- : props.size?.height === "medium"
- ? props.theme.paddingMediumOnlyIconTop
- : props.theme.paddingLargeOnlyIconTop
- : props.size?.height === "small"
- ? props.theme.paddingSmallTop
- : props.size?.height === "medium"
- ? props.theme.paddingMediumTop
- : props.theme.paddingLargeTop};
- padding-bottom: ${(props) =>
- props.hasIcon && !props.hasLabel
- ? props.size?.height === "small"
- ? props.theme.paddingSmallOnlyIconBottom
- : props.size?.height === "medium"
- ? props.theme.paddingMediumOnlyIconBottom
- : props.theme.paddingLargeOnlyIconBottom
- : props.size?.height === "small"
- ? props.theme.paddingSmallBottom
- : props.size?.height === "medium"
- ? props.theme.paddingMediumBottom
- : props.theme.paddingLargeBottom};
- padding-left: ${(props) =>
- props.hasIcon && !props.hasLabel
- ? props.size?.height === "small"
- ? props.theme.paddingSmallOnlyIconLeft
- : props.size?.height === "medium"
- ? props.theme.paddingMediumOnlyIconLeft
- : props.theme.paddingLargeOnlyIconLeft
- : props.size?.height === "small"
- ? props.theme.paddingSmallLeft
- : props.size?.height === "medium"
- ? props.theme.paddingMediumLeft
- : props.theme.paddingLargeLeft};
- padding-right: ${(props) =>
- props.hasIcon && !props.hasLabel
- ? props.size?.height === "small"
- ? props.theme.paddingSmallOnlyIconRight
- : props.size?.height === "medium"
- ? props.theme.paddingMediumOnlyIconRight
- : props.theme.paddingLargeOnlyIconRight
- : props.size?.height === "small"
- ? props.theme.paddingSmallRight
- : props.size?.height === "medium"
- ? props.theme.paddingMediumRight
- : props.theme.paddingLargeRight};
-
- box-shadow: 0 0 0 2px transparent;
- font-family: ${(props) => props.theme.fontFamily};
- font-size: ${(props) => props.theme.fontSize};
- font-weight: ${(props) => props.theme.fontWeight};
- letter-spacing: ${(props) => props.theme.labelLetterSpacing};
cursor: pointer;
- &:focus {
- outline: none;
- box-shadow: 0 0 0 2px ${(props) => props.theme.focusBorderColor};
- }
-
- ${(props) => getButtonStyles(props.$mode, props.semantic, props.theme, props.size)};
+ margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")};
+ margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")};
+ margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")};
+ margin-bottom: ${({ margin }) =>
+ margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""};
+ margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")};
+
+ ${({ size, iconOnly }) => {
+ switch (size.height) {
+ case "small":
+ return `padding: var(--spacing-padding-none) ${iconOnly ? "var(--spacing-padding-xxs)" : "var(--spacing-padding-xs)"};`;
+ case "medium":
+ return "padding: var(--spacing-padding-none) var(--spacing-padding-xs)";
+ case "large":
+ return `padding: var(--spacing-padding-none) ${iconOnly ? "var(--spacing-padding-xs)" : "var(--spacing-padding-m)"};`;
+ }
+ }};
+
+ ${(props) => getButtonStyles(props.$mode, props.semantic, props.size)};
`;
const LabelContainer = styled.span`
- line-height: ${(props) => props.theme.labelFontLineHeight};
- font-size: ${(props) => props.theme.fontSize};
text-overflow: ellipsis;
overflow: hidden;
text-transform: none;
@@ -489,14 +51,48 @@ const LabelContainer = styled.span`
`;
const IconContainer = styled.div<{
- size: ButtonPropsType["size"];
+ size: Size;
}>`
display: flex;
- font-size: ${(props) => (props.size?.height === "small" ? "16" : props.size?.height === "medium" ? "16" : "24")}px;
+ font-size: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
svg {
- height: ${(props) => (props.size?.height === "small" ? "16" : props.size?.height === "medium" ? "16" : "24")}px;
- width: ${(props) => (props.size?.height === "small" ? "16" : props.size?.height === "medium" ? "16" : "24")}px;
+ height: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
+ width: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
}
`;
+const DxcButton = ({
+ label,
+ mode = "primary",
+ semantic = "default",
+ disabled,
+ iconPosition = "before",
+ title,
+ type = "button",
+ icon,
+ onClick,
+ margin,
+ size = { height: "large", width: "fitContent" },
+ tabIndex = 0,
+}: ButtonPropsType): JSX.Element => (
+
+
+
+);
+
export default DxcButton;
diff --git a/packages/lib/src/button/types.ts b/packages/lib/src/button/types.ts
index e4b7f83e21..c656b4a3b6 100644
--- a/packages/lib/src/button/types.ts
+++ b/packages/lib/src/button/types.ts
@@ -1,12 +1,14 @@
import { Margin, SVG, Space } from "../common/utils";
-type Size = {
+export type Semantic = "default" | "error" | "warning" | "success" | "info";
+export type Mode = "primary" | "secondary" | "tertiary";
+export type Size = {
/**
- * Height of the component.
+ * Height of the button.
*/
height?: "small" | "medium" | "large";
/*
- * Width of the component.
+ * Width of the button.
*/
width?: "small" | "medium" | "large" | "fillParent" | "fitContent";
};
@@ -19,11 +21,11 @@ type Props = {
/**
* The available button modes.
*/
- mode?: "primary" | "secondary" | "tertiary";
+ mode?: Mode;
/**
* Specifies the semantic meaning of the buttons, which determines its color.
*/
- semantic?: "default" | "error" | "warning" | "success" | "info";
+ semantic?: Semantic;
/**
* If true, the component will be disabled.
*/
diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts
new file mode 100644
index 0000000000..c94cb65c8a
--- /dev/null
+++ b/packages/lib/src/button/utils.ts
@@ -0,0 +1,233 @@
+import { getMargin } from "../common/utils";
+import ButtonPropsType, { Mode, Semantic, Size } from "./types";
+
+export const getButtonStyles = (
+ mode: Mode,
+ semantic: Semantic,
+ size: Size,
+) => {
+ let enabled = "";
+ let hover = "";
+ let active = "";
+ let focus = "";
+ let disabled = "";
+
+ const commonStyles = `
+ font-family: var(--typography-font-family);
+ font-size: ${size?.height === "large" ? "var(--typography-label-l)" : "var(--typography-label-m)"};
+ font-style: normal;
+ font-weight: var(--typography-label-semibold);
+ line-height: normal;
+ border: 0px none transparent;
+ border-radius: var(--border-radius-s);`;
+
+ switch (mode) {
+ case "primary":
+ switch (semantic) {
+ case "default":
+ enabled = `background-color: var(--color-bg-primary-strong);`;
+ hover = `background-color: var(--color-bg-primary-stronger);`;
+ active = `background-color: var(--color-bg-primary-strongest);`;
+ disabled = `background-color: var(--color-bg-primary-lightest);
+ color: var(--color-fg-primary-light);`;
+ break;
+ case "error":
+ enabled = `background-color: var(--color-bg-error-strong);`;
+ hover = `background-color: var(--color-bg-error-stronger);`;
+ active = `background-color: var(--color-bg-error-strongest);`;
+ disabled = `background-color: var(--color-bg-error-lightest);
+ color: var(--color-fg-error-light);`;
+ break;
+ case "warning":
+ enabled = `background-color:var(--color-bg-warning-strong);`;
+ hover = `background-color: var(--color-bg-warning-stronger);`;
+ active = `background-color: var(--color-bg-warning-strongest);`;
+ disabled = `background-color: var(--color-bg-warning-lightest);
+ color: var(--color-fg-warning-light);`;
+ break;
+ case "success":
+ enabled = `background-color: var(--color-bg-success-strong);`;
+ hover = `background-color: var(--color-bg-success-stronger);`;
+ active = `background-color: var(--color-bg-success-strongest);`;
+ disabled = `background-color: var(--color-bg-success-lightest);
+ color: var(--color-fg-success-light);`;
+ break;
+ case "info":
+ enabled = `background-color: var(--color-bg-secondary-strong);`;
+ hover = `background-color: var(--color-bg-secondary-stronger);`;
+ active = `background-color: var(--color-bg-secondary-strongest);`;
+ disabled = `background-color: var(--color-bg-secondary-lightest);
+ color: var(--color-fg-secondary-lighter);`;
+ break;
+ }
+ return `${commonStyles}
+ color: var(--color-fg-neutral-bright);
+ ${enabled}
+ &:hover:enabled {
+ ${hover}
+ }
+ &:active:enabled {
+ ${active}
+ }
+ &:focus:enabled {
+ ${focus}
+ outline: none;
+ box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
+ }
+ &:disabled {
+ cursor: not-allowed;
+ ${disabled}
+ }`;
+ case "secondary":
+ switch (semantic) {
+ case "default":
+ enabled = `border: var(--border-width-s) solid var(--border-color-primary-stronger);
+ color: var(--color-fg-primary-strong);`;
+ hover = `background-color: var(--color-bg-primary-strong);
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-primary-stronger);
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `border-color: var(--border-color-primary-lighter);
+ color: var(--color-fg-primary-light);`;
+ break;
+ case "error":
+ enabled = `border: var(--border-width-s) solid var(--border-color-error-medium);
+ color: var(--color-fg-error-medium);`;
+ hover = `background-color: var(--color-bg-error-strong);
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-error-stronger);
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `border-color: var(--border-color-error-light);
+ color: var(--color-fg-error-light);`;
+ break;
+ case "warning":
+ enabled = `border: var(--border-width-s) solid var(--border-color-warning-medium);
+ color: var(--color-fg-warning-medium);`;
+ hover = `background-color: var(--color-bg-warning-stronger);
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-warning-strongest);
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `border-color: var(--border-color-warning-light);
+ color: var(--color-fg-warning-light);`;
+ break;
+ case "success":
+ enabled = `border: var(--border-width-s, 1px) solid var(--border-color-success-medium);
+ color: var(--color-fg-success-medium);`;
+ hover = `background-color: var(--color-bg-success-strong);
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-success-strongest);
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `border-color: var(--border-color-success-light);
+ color: var(--color-fg-success-light);`;
+ break;
+ case "info":
+ enabled = `border: var(--border-width-s, 1px) solid var(--border-color-secondary-strong);
+ color: var(--color-fg-secondary-medium);`;
+ hover = `background: var(--color-bg-secondary-strong);
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-secondary-stronger);
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `border-color: var(--border-color-secondary-light);
+ color: var(--color-fg-secondary-lighter);`;
+ break;
+ }
+ return `${commonStyles}
+ background-color: transparent;
+ ${enabled}
+ &:hover:enabled {
+ ${hover}
+ }
+ &:active:enabled {
+ border-color: transparent;
+ ${active}
+ }
+ &:focus:enabled {
+ border-color: transparent;
+ box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
+ outline: none;
+ }
+ &:disabled {
+ cursor: not-allowed;
+ ${disabled}
+ }`;
+ case "tertiary":
+ switch (semantic) {
+ case "default":
+ enabled = `color: var(--color-fg-primary-strong);`;
+ hover = `background-color: var(--color-bg-primary-lighter);`;
+ active = `background-color: var(--color-bg-primary-light);`;
+ disabled = `color: var(--color-fg-primary-light);`;
+ break;
+ case "error":
+ enabled = `color: var(--color-fg-error-medium);`;
+ hover = `var(--color-bg-error-lighter);`;
+ active = `background-color: background: var(--color-bg-error-light);`;
+ disabled = `color: var(--color-fg-error-light);`;
+ break;
+ case "warning":
+ enabled = `color: var(--color-fg-warning-medium);`;
+ hover = `background-color: var(--color-bg-warning-lighter);`;
+ active = `background-color: var(--color-bg-warning-light);`;
+ disabled = `color: var(--color-fg-warning-light);`;
+ break;
+ case "success":
+ enabled = `color: var(--color-fg-success-medium);`;
+ hover = `background-color: var(--color-bg-success-lighter);`;
+ active = `background-color: var(--color-bg-success-light);`;
+ disabled = `color: var(--color-fg-success-light);`;
+ break;
+ case "info":
+ enabled = `color: var(--color-fg-secondary-medium);`;
+ hover = `background-color: var(--color-bg-secondary-lighter);`;
+ active = `background-color: var(--color-bg-secondary-light);`;
+ disabled = `color: var(--color-fg-secondary-lighter);`;
+ break;
+ }
+ return `${commonStyles}
+ background-color: transparent;
+ color: var(--color-fg-primary-strong);
+ ${enabled}
+ &:hover:enabled {
+ ${hover}
+ }
+ &:active:enabled {
+ border-color: transparent;
+ ${active}
+ }
+ &:focus:enabled {
+ ${focus}
+ outline: none;
+ box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
+ }
+ &:disabled {
+ cursor: not-allowed;
+ ${disabled}
+ }`;
+ }
+};
+
+const widths = {
+ small: "42px",
+ medium: "120px",
+ large: "240px",
+ fillParent: "100%",
+ fitContent: "fit-content",
+};
+
+export const calculateWidth = (margin: ButtonPropsType["margin"], size: ButtonPropsType["size"]) =>
+ size?.width === "fillParent"
+ ? `calc(${widths[size?.width]} - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`
+ : size?.width && widths[size?.width];
+
+export const getHeight = (height: Size["height"]) => {
+ switch (height) {
+ case "small":
+ return "24px";
+ case "medium":
+ return "32px";
+ case "large":
+ return "40px";
+ default:
+ return "40px";
+ }
+};
\ No newline at end of file
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
index 1c020e787d..3ded437d20 100644
--- a/packages/lib/src/index.ts
+++ b/packages/lib/src/index.ts
@@ -1,4 +1,5 @@
-import "./fonts.css";
+import "./styles/fonts.css";
+import "./styles/variables.css";
export { default as DxcAccordion } from "./accordion/Accordion";
export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup";
diff --git a/packages/lib/src/fonts.css b/packages/lib/src/styles/fonts.css
similarity index 100%
rename from packages/lib/src/fonts.css
rename to packages/lib/src/styles/fonts.css
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
new file mode 100644
index 0000000000..f8a79302f9
--- /dev/null
+++ b/packages/lib/src/styles/variables.css
@@ -0,0 +1,381 @@
+:root {
+ /* _CORE */
+ --color-absolutes-black: #000000;
+ --color-absolutes-white: #ffffff;
+ --color-grey-50: #fbfbfb;
+ --color-grey-100: #ebebeb;
+ --color-grey-200: #dedede;
+ --color-grey-300: #d1d1d1;
+ --color-grey-400: #b5b5b5;
+ --color-grey-500: #9a9a9a;
+ --color-grey-600: #797979;
+ --color-grey-700: #5b5b5b;
+ --color-grey-800: #494949;
+ --color-grey-900: #333333;
+ --color-alpha-100-a: rgba(235 235 235 / 0.1);
+ --color-alpha-200-a: rgba(222 222 222 / 0.2);
+ --color-alpha-300-a: rgba(209 209 209 / 0.3);
+ --color-alpha-400-a: rgba(181 181 181 / 0.4);
+ --color-alpha-500-a: rgba(154 154 154 / 0.5);
+ --color-alpha-600-a: rgba(121 121 121 / 0.6);
+ --color-alpha-700-a: rgba(91 91 91 / 0.7);
+ --color-alpha-800-a: rgba(73 73 73 / 0.8);
+ --color-alpha-900-a: rgba(51 51 51 / 0.9);
+ --color-purple-50: #fcfbfe;
+ --color-purple-100: #f0e8fa;
+ --color-purple-200: #e7d9f6;
+ --color-purple-300: #ddc9f3;
+ --color-purple-400: #c8a7eb;
+ --color-purple-500: #b487e4;
+ --color-purple-600: #9363c8;
+ --color-purple-700: #6f4b97;
+ --color-purple-800: #5a3c7a;
+ --color-purple-900: #3e2a55;
+ --color-blue-50: #f8fcff;
+ --color-blue-100: #d9efff;
+ --color-blue-200: #bce3ff;
+ --color-blue-300: #a0d7ff;
+ --color-blue-400: #61bdff;
+ --color-blue-500: #30a1f1;
+ --color-blue-600: #267fbf;
+ --color-blue-700: #1d6091;
+ --color-blue-800: #174e74;
+ --color-blue-900: #103651;
+ --color-green-50: #f3fcf5;
+ --color-green-100: #d1f5db;
+ --color-green-200: #acecbe;
+ --color-green-300: #87e3a0;
+ --color-green-400: #53cb75;
+ --color-green-500: #47ae64;
+ --color-green-600: #39884f;
+ --color-green-700: #2a673b;
+ --color-green-800: #225230;
+ --color-green-900: #183921;
+ --color-red-50: #fff7f6;
+ --color-red-100: #ffe6e4;
+ --color-red-200: #ffd3d0;
+ --color-red-300: #ffc1bd;
+ --color-red-400: #ff9896;
+ --color-red-500: #ff696f;
+ --color-red-600: #e33248;
+ --color-red-700: #a92c37;
+ --color-red-800: #87262d;
+ --color-red-900: #5b1f21;
+ --color-yellow-50: #fefbef;
+ --color-yellow-100: #fcedae;
+ --color-yellow-200: #f9de6e;
+ --color-yellow-300: #f5cd2b;
+ --color-yellow-400: #d4b226;
+ --color-yellow-500: #b6981f;
+ --color-yellow-600: #8f7818;
+ --color-yellow-700: #6c5a12;
+ --color-yellow-800: #57490f;
+ --color-yellow-900: #3d3309;
+ --color-orange-50: #fffbf6;
+ --color-orange-100: #fde9d2;
+ --color-orange-200: #fbd9b3;
+ --color-orange-300: #f9c78f;
+ --color-orange-400: #f5a344;
+ --color-orange-500: #d58a35;
+ --color-orange-600: #a76d2b;
+ --color-orange-700: #7f5121;
+ --color-orange-800: #66421a;
+ --color-orange-900: #3d3309;
+ --dimensions-1: 1px;
+ --dimensions-1-rem: 0.0625rem;
+ --dimensions-2: 2px;
+ --dimensions-2-rem: 0.125rem;
+ --dimensions-4: 4px;
+ --dimensions-4-rem: 0.25rem;
+ --dimensions-28: 28px;
+ --dimensions-28-rem: 1.75rem;
+ --dimensions-24: 24px;
+ --dimensions-24-rem: 1.5rem;
+ --dimensions-20: 20px;
+ --dimensions-20-rem: 1.25rem;
+ --dimensions-16: 16px;
+ --dimensions-16-rem: 1rem;
+ --dimensions-12: 12px;
+ --dimensions-12-rem: 0.75rem;
+ --dimensions-8: 8px;
+ --dimensions-8-rem: 0.5rem;
+ --dimensions-32: 32px;
+ --dimensions-32-rem: 2rem;
+ --dimensions-36: 36px;
+ --dimensions-36-rem: 2.25rem;
+ --dimensions-40: 40px;
+ --dimensions-40-rem: 2.5rem;
+ --dimensions-44: 44px;
+ --dimensions-44-rem: 2.75rem;
+ --dimensions-48: 48px;
+ --dimensions-48-rem: 3rem;
+ --dimensions-64: 64px;
+ --dimensions-64-rem: 4rem;
+ --dimensions-72: 72px;
+ --dimensions-72-rem: 4.5rem;
+ --dimensions-80: 80px;
+ --dimensions-80-rem: 5rem;
+ --dimensions-96: 96px;
+ --dimensions-96-rem: 6rem;
+ --dimensions-56: 56px;
+ --dimensions-56-rem: 3.5rem;
+ --dimensions-0: 0px;
+ --dimensions-0-rem: 0rem;
+ --font-family-sans: "Open Sans";
+ --font-family-font-family-mono: "Source Code Pro";
+ --font-size-12: 12px;
+ --font-size-12-rem: 0.75rem;
+ --font-size-16: 16px;
+ --font-size-16-rem: 1rem;
+ --font-size-18: 18px;
+ --font-size-18-rem: 1.125rem;
+ --font-size-20: 20px;
+ --font-size-20-rem: 1.25rem;
+ --font-size-24: 24px;
+ --font-size-24-rem: 1.5rem;
+ --font-size-32: 32px;
+ --font-size-32-rem: 2rem;
+ --font-size-48: 48px;
+ --font-size-48-rem: 3rem;
+ --font-size-60: 60px;
+ --font-size-60-rem: 3.75rem;
+ --font-weight-light: 300;
+ --font-weight-regular: 400;
+ --font-weight-semibold: 600;
+ --font-weight-font-weight-bold: 700;
+ --font-style-lightitalic: "light italic";
+ --font-style-font-style-normal: "normal";
+ --font-size-14: 14px;
+ --font-size-14-rem: 0.875rem;
+
+ /* CORE TYPOGRAPHY */
+ --size-font-scale-18: 18px;
+ --size-font-scale-18-rem: 1.125rem;
+ --size-font-scale-14: 14px;
+ --size-font-scale-14-rem: 0.875rem;
+ --size-font-scale-16: 16px;
+ --size-font-scale-16-rem: 1rem;
+ --size-font-scale-20: 20px;
+ --size-font-scale-20-rem: 1.25rem;
+ --size-font-scale-24: 24px;
+ --size-font-scale-24-rem: 1.5rem;
+ --size-font-scale-32: 32px;
+ --size-font-scale-32-rem: 2rem;
+ --size-font-scale-48: 48px;
+ --size-font-scale-48-rem: 3rem;
+ --size-font-scale-60: 60px;
+ --size-font-scale-60-rem: 3.75rem;
+ --weight-font-weight-light: 300;
+ --weight-font-weight-regular: 400;
+ --weight-font-weight-semibold: 600;
+ --weight-font-weight-bold: 700;
+ --family-font-family-sans: "Open Sans";
+ --family-font-family-mono: "Source Code Pro";
+ --style-font-style-lightitalic: "light italic";
+ --style-font-style-normal: "normal";
+ --size-font-scale-12: 12px;
+ --size-font-scale-12-rem: 0.75rem;
+
+ /* ALIAS */
+ --color-bg-success-lightest: var(--color-green-50);
+ --color-bg-success-lighter: var(--color-green-100);
+ --color-fg-success-lighter: var(--color-green-200);
+ --color-fg-success-strong: var(--color-green-700);
+ --color-fg-primary-lighter: var(--color-purple-100);
+ --color-fg-secondary-lighter: var(--color-blue-300);
+ --color-fg-error-lighter: var(--color-red-200);
+ --color-fg-error-strong: var(--color-red-700);
+ --color-fg-warning-light: var(--color-orange-300);
+ --color-fg-warning-stronger: var(--color-orange-800);
+ --color-fg-success-stronger: var(--color-green-800);
+ --color-fg-primary-strongest: var(--color-purple-900);
+ --color-fg-primary-medium: var(--color-purple-400);
+ --color-fg-primary-stronger: var(--color-purple-800);
+ --color-fg-secondary-medium: var(--color-blue-600);
+ --color-fg-secondary-strongest: var(--color-blue-900);
+ --color-fg-secondary-stronger: var(--color-blue-800);
+ --color-fg-secondary-strong: var(--color-blue-700);
+ --color-fg-error-stronger: var(--color-red-800);
+ --color-bg-error-lightest: var(--color-red-50);
+ --color-bg-primary-lighter: var(--color-purple-100);
+ --color-bg-primary-lightest: var(--color-purple-50);
+ --color-bg-error-strong: var(--color-red-600);
+ --color-bg-error-light: var(--color-red-200);
+ --color-bg-error-lighter: var(--color-red-100);
+ --color-bg-primary-light: var(--color-purple-200);
+ --color-bg-primary-medium: var(--color-purple-300);
+ --color-bg-primary-strong: var(--color-purple-700);
+ --color-bg-primary-stronger: var(--color-purple-800);
+ --color-bg-primary-strongest: var(--color-purple-900);
+ --color-bg-secondary-medium: var(--color-blue-300);
+ --color-bg-secondary-light: var(--color-blue-200);
+ --color-bg-secondary-lighter: var(--color-blue-100);
+ --color-bg-secondary-lightest: var(--color-blue-50);
+ --color-bg-warning-lightest: var(--color-orange-50);
+ --color-bg-warning-lighter: var(--color-orange-100);
+ --border-color-primary-lighter: var(--color-purple-300);
+ --border-color-primary-strong: var(--color-purple-600);
+ --border-color-primary-stronger: var(--color-purple-700);
+ --border-color-secondary-light: var(--color-blue-300);
+ --border-color-success-light: var(--color-green-300);
+ --border-color-warning-light: var(--color-orange-300);
+ --border-color-error-light: var(--color-red-300);
+ --border-color-neutral-brighter: var(--color-absolutes-white);
+ --border-color-neutral-light: var(--color-grey-300);
+ --border-color-neutral-medium: var(--color-grey-400);
+ --border-color-neutral-strongest: var(--color-grey-700);
+ --border-color-neutral-lighter: var(--color-grey-200);
+ --border-color-neutral-dark: var(--color-grey-900);
+ --border-color-neutral-strong: var(--color-grey-500);
+ --border-color-neutral-stronger: var(--color-grey-600);
+ --border-radius-none: var(--dimensions-0);
+ --border-radius-xs: var(--dimensions-2);
+ --border-radius-s: var(--dimensions-4);
+ --border-radius-m: var(--dimensions-8);
+ --border-radius-l: var(--dimensions-16);
+ --border-radius-xl: var(--dimensions-24);
+ --border-width-none: 0px;
+ --border-width-none-rem: 0rem;
+ --border-width-s: var(--dimensions-1);
+ --border-width-l: var(--dimensions-4);
+ --border-width-m: var(--dimensions-2);
+ --height-xxs: var(--dimensions-16);
+ --height-s: var(--dimensions-24);
+ --height-m: var(--dimensions-32);
+ --height-xl: var(--dimensions-40);
+ --height-xxl: var(--dimensions-48);
+ --height-xxxl: var(--dimensions-56);
+ --shadow-low-x-position: var(--dimensions-0);
+ --shadow-low-y-position: var(--dimensions-2);
+ --shadow-low-blur: var(--dimensions-2);
+ --shadow-low-spread: var(--dimensions-0);
+ --shadow-mid-x-position: var(--dimensions-0);
+ --shadow-mid-y-position: var(--dimensions-12);
+ --shadow-mid-blur: var(--dimensions-12);
+ --shadow-mid-spread: var(--dimensions-0);
+ --shadow-high-x-position: var(--dimensions-0);
+ --shadow-high-y-position: var(--dimensions-24);
+ --shadow-high-blur: var(--dimensions-24);
+ --shadow-high-spread: var(--dimensions-0);
+ --shadow-higher-x-position: var(--dimensions-0);
+ --shadow-higher-y-position: var(--dimensions-48);
+ --shadow-higher-blur: var(--dimensions-48);
+ --shadow-higher-spread: var(--dimensions-0);
+ --typography-font-family: var(--font-family-sans);
+ --typography-heading-semibold: var(--font-weight-semibold);
+ --typography-heading-xl: var(--font-size-32);
+ --typography-heading-l: var(--font-size-24);
+ --typography-heading-m: var(--font-size-20);
+ --typography-heading-s: var(--font-size-16);
+ --typography-heading-xs: var(--font-size-12);
+ --typography-body-regular: var(--font-weight-regular);
+ --typography-body-xxl: var(--font-size-24);
+ --typography-body-xl: var(--font-size-20);
+ --typography-body-l: var(--font-size-18);
+ --typography-body-m: var(--font-size-16);
+ --typography-body-s: var(--font-size-14);
+ --typography-body-xs: var(--font-size-12);
+ --typography-helper-text-regular: var(--font-weight-regular);
+ --typography-helper-text-italic: var(--font-style-lightitalic);
+ --typography-helper-text-m: var(--font-size-14);
+ --typography-helper-text-s: var(--font-size-12);
+ --typography-helper-text-semibold: var(--font-weight-semibold);
+ --typography-helper-text-l: var(--font-size-16);
+ --typography-title-l: var(--font-size-20);
+ --typography-title-bold: var(--font-weight-font-weight-bold);
+ --typography-title-s: var(--font-size-14);
+ --typography-title-m: var(--font-size-16);
+ --typography-label-regular: var(--font-weight-regular);
+ --typography-label-s: var(--font-size-12);
+ --typography-label-l: var(--font-size-16);
+ --typography-label-semibold: var(--font-weight-semibold);
+ --typography-label-m: var(--font-size-14);
+ --typography-label-xl: var(--font-size-20);
+ --typography-helper-text-light: var(--font-weight-light);
+ --typography-title-xl: var(--font-size-24);
+ --shadow-light: var(--color-alpha-300-a);
+ --shadow-dark: var(--color-alpha-400-a);
+ --color-bg-neutral-lightest: var(--color-absolutes-white);
+ --color-bg-neutral-lighter: var(--color-grey-50);
+ --color-bg-neutral-light: var(--color-grey-100);
+ --color-bg-overlay-dark: var(--color-alpha-800-a);
+ --border-color-success-medium: var(--color-green-600);
+ --color-fg-success-medium: var(--color-green-600);
+ --color-fg-error-medium: var(--color-red-600);
+ --border-color-error-medium: var(--color-red-600);
+ --border-color-warning-medium: var(--color-orange-500);
+ --border-color-secondary-medium: var(--color-blue-500);
+ --color-fg-secondary-light: var(--color-blue-500);
+ --color-fg-warning-strong: var(--color-orange-600);
+ --color-bg-warning-light: var(--color-orange-200);
+ --color-bg-success-light: var(--color-green-200);
+ --color-bg-warning-strong: var(--color-orange-500);
+ --color-fg-warning-medium: var(--color-orange-500);
+ --color-bg-yellow-light: var(--color-yellow-100);
+ --color-fg-neutral-yellow-dark: var(--color-yellow-800);
+ --color-fg-neutral-bright: var(--color-absolutes-white);
+ --border-color-neutral-bright: var(--color-grey-50);
+ --border-color-neutral-lightest: var(--color-grey-100);
+ --border-color-primary-light: var(--color-purple-400);
+ --color-bg-secondary-strong: var(--color-blue-600);
+ --color-bg-secondary-stronger: var(--color-blue-700);
+ --color-bg-secondary-strongest: var(--color-blue-800);
+ --color-bg-neutral-medium: var(--color-grey-200);
+ --color-bg-neutral-strong: var(--color-grey-300);
+ --color-bg-neutral-stronger: var(--color-grey-800);
+ --color-bg-neutral-strongest: var(--color-grey-900);
+ --color-bg-success-medium: var(--color-green-300);
+ --color-bg-success-strong: var(--color-green-600);
+ --color-bg-success-stronger: var(--color-green-700);
+ --color-bg-success-strongest: var(--color-green-800);
+ --color-bg-warning-medium: var(--color-orange-300);
+ --color-bg-warning-stronger: var(--color-orange-600);
+ --color-bg-warning-strongest: var(--color-orange-700);
+ --color-bg-error-medium: var(--color-red-300);
+ --color-bg-error-stronger: var(--color-red-700);
+ --color-bg-error-strongest: var(--color-red-800);
+ --color-fg-primary-light: var(--color-purple-300);
+ --color-fg-primary-strong: var(--color-purple-700);
+ --color-fg-error-light: var(--color-red-300);
+ --color-fg-success-light: var(--color-green-300);
+ --color-fg-neutral-lightest: var(--color-grey-100);
+ --color-fg-neutral-lighter: var(--color-grey-200);
+ --color-fg-neutral-light: var(--color-grey-400);
+ --color-fg-neutral-medium: var(--color-grey-500);
+ --color-fg-neutral-strong: var(--color-grey-600);
+ --color-fg-neutral-stronger: var(--color-grey-700);
+ --color-fg-neutral-dark: var(--color-grey-900);
+ --border-color-primary-medium: var(--color-purple-500);
+ --border-color-secondary-strong: var(--color-blue-600);
+ --border-color-error-strong: var(--color-red-700);
+ --border-color-error-stronger: var(--color-red-800);
+ --spacing-gap-none: var(--dimensions-0);
+ --spacing-gap-xxs: var(--dimensions-2);
+ --spacing-gap-xs: var(--dimensions-4);
+ --spacing-gap-s: var(--dimensions-8);
+ --spacing-gap-m: var(--dimensions-12);
+ --spacing-gap-ml: var(--dimensions-16);
+ --spacing-gap-l: var(--dimensions-24);
+ --spacing-gap-xl: var(--dimensions-48);
+ --spacing-padding-none: var(--dimensions-0);
+ --spacing-padding-xxxs: var(--dimensions-2);
+ --spacing-padding-xs: var(--dimensions-8);
+ --spacing-padding-s: var(--dimensions-12);
+ --spacing-padding-m: var(--dimensions-16);
+ --spacing-padding-ml: var(--dimensions-20);
+ --spacing-padding-l: var(--dimensions-24);
+ --spacing-padding-xl: var(--dimensions-32);
+ --spacing-padding-xxl: var(--dimensions-40);
+ --border-style-solid: "solid";
+ --border-style-dashed: "dashed";
+ --spacing-padding-xxs: var(--dimensions-4);
+ --border-color-secondary-stronger: var(--color-blue-700);
+ --border-color-secondary-strongest: var(--color-blue-800);
+ --color-bg-alpha-light: var(--color-alpha-300-a);
+ --color-bg-alpha-medium: var(--color-alpha-800-a);
+ --color-bg-alpha-strong: var(--color-alpha-900-a);
+ --height-l: var(--dimensions-36);
+ --color-fg-neutral-strongest: var(--color-grey-800);
+ --height-xxxs: var(--dimensions-12);
+ --height-xs: var(--dimensions-20);
+}
\ No newline at end of file
From fed2e6925bbd2a79b749ce808e03652b2960afe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:52:04 +0100
Subject: [PATCH 02/16] Improved focus for Button
---
packages/lib/src/button/utils.ts | 23 ++++++-----------------
1 file changed, 6 insertions(+), 17 deletions(-)
diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts
index c94cb65c8a..0ebf959ca1 100644
--- a/packages/lib/src/button/utils.ts
+++ b/packages/lib/src/button/utils.ts
@@ -9,7 +9,6 @@ export const getButtonStyles = (
let enabled = "";
let hover = "";
let active = "";
- let focus = "";
let disabled = "";
const commonStyles = `
@@ -19,7 +18,12 @@ export const getButtonStyles = (
font-weight: var(--typography-label-semibold);
line-height: normal;
border: 0px none transparent;
- border-radius: var(--border-radius-s);`;
+ border-radius: var(--border-radius-s);
+
+ &:focus:enabled {
+ outline: 2px solid var(--border-color-secondary-medium);
+ outline-offset: -2px;
+ }`;
switch (mode) {
case "primary":
@@ -69,11 +73,6 @@ export const getButtonStyles = (
&:active:enabled {
${active}
}
- &:focus:enabled {
- ${focus}
- outline: none;
- box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
- }
&:disabled {
cursor: not-allowed;
${disabled}
@@ -141,11 +140,6 @@ export const getButtonStyles = (
border-color: transparent;
${active}
}
- &:focus:enabled {
- border-color: transparent;
- box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
- outline: none;
- }
&:disabled {
cursor: not-allowed;
${disabled}
@@ -194,11 +188,6 @@ export const getButtonStyles = (
border-color: transparent;
${active}
}
- &:focus:enabled {
- ${focus}
- outline: none;
- box-shadow: 0 0 0 2px var(--border-color-secondary-medium);
- }
&:disabled {
cursor: not-allowed;
${disabled}
From 0836769a25c655c7d2fd978c9c31af9c7e4651a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 27 Jan 2025 16:27:29 +0100
Subject: [PATCH 03/16] Button styles small update
---
packages/lib/src/button/utils.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts
index 0ebf959ca1..2528ace883 100644
--- a/packages/lib/src/button/utils.ts
+++ b/packages/lib/src/button/utils.ts
@@ -110,7 +110,7 @@ export const getButtonStyles = (
color: var(--color-fg-warning-light);`;
break;
case "success":
- enabled = `border: var(--border-width-s, 1px) solid var(--border-color-success-medium);
+ enabled = `border: var(--border-width-s) solid var(--border-color-success-medium);
color: var(--color-fg-success-medium);`;
hover = `background-color: var(--color-bg-success-strong);
color: var(--color-fg-neutral-bright);`;
@@ -120,7 +120,7 @@ export const getButtonStyles = (
color: var(--color-fg-success-light);`;
break;
case "info":
- enabled = `border: var(--border-width-s, 1px) solid var(--border-color-secondary-strong);
+ enabled = `border: var(--border-width-s) solid var(--border-color-secondary-strong);
color: var(--color-fg-secondary-medium);`;
hover = `background: var(--color-bg-secondary-strong);
color: var(--color-fg-neutral-bright);`;
From 6912d079fde8adaf4e0f3e5ea40f6f464dd66303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:31:49 +0100
Subject: [PATCH 04/16] Update preview.tsx
---
packages/lib/.storybook/preview.tsx | 2 --
1 file changed, 2 deletions(-)
diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx
index e43a0b92e4..50171526b6 100644
--- a/packages/lib/.storybook/preview.tsx
+++ b/packages/lib/.storybook/preview.tsx
@@ -1,7 +1,5 @@
import type { Preview } from "@storybook/react";
import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
-import "../src/styles/fonts.css";
-import "../src/styles/variables.css";
const preview: Preview = {
parameters: {
From 245c3d6738f57ab6ec4885d0274f7a93f66ac349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:26:32 +0100
Subject: [PATCH 05/16] Button styles update
---
packages/lib/src/button/Button.tsx | 25 ++++++++++++-------------
packages/lib/src/button/utils.ts | 22 +++++++++++-----------
2 files changed, 23 insertions(+), 24 deletions(-)
diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx
index 2bff60c4f7..8ee873cb51 100644
--- a/packages/lib/src/button/Button.tsx
+++ b/packages/lib/src/button/Button.tsx
@@ -17,7 +17,7 @@ const Button = styled.button<{
align-items: center;
justify-content: center;
flex-direction: ${({ iconPosition }) => (iconPosition === "after" ? "row" : "row-reverse")};
- gap: ${({ size }) => (size.height === "large" ? "var(--spacing-gap-s)" : "var(--spacing-gap-xs)")};
+ gap: var(${({ size }) => (size.height === "large" ? "--spacing-gap-s" : "--spacing-gap-xs")});
height: ${({ size }) => getHeight(size.height)};
width: ${(props) => calculateWidth(props.margin, props.size)};
cursor: pointer;
@@ -32,11 +32,11 @@ const Button = styled.button<{
${({ size, iconOnly }) => {
switch (size.height) {
case "small":
- return `padding: var(--spacing-padding-none) ${iconOnly ? "var(--spacing-padding-xxs)" : "var(--spacing-padding-xs)"};`;
+ return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xxs" : "--spacing-padding-xs"});`;
case "medium":
return "padding: var(--spacing-padding-none) var(--spacing-padding-xs)";
case "large":
- return `padding: var(--spacing-padding-none) ${iconOnly ? "var(--spacing-padding-xs)" : "var(--spacing-padding-m)"};`;
+ return `padding: var(--spacing-padding-none) var(${iconOnly ? "--spacing-padding-xs" : "--spacing-padding-m"});`;
}
}};
@@ -54,26 +54,25 @@ const IconContainer = styled.div<{
size: Size;
}>`
display: flex;
- font-size: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
+ font-size: var(${({ size }) => (size?.height === "large" ? "--height-s" : "--height-xxs")});
svg {
- height: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
- width: ${({ size }) => (size?.height === "large" ? "24" : "16")}px;
+ height: var(${({ size }) => (size?.height === "large" ? "--height-s" : "--height-xxs")});
}
`;
const DxcButton = ({
- label,
- mode = "primary",
- semantic = "default",
disabled,
- iconPosition = "before",
- title,
- type = "button",
icon,
- onClick,
+ iconPosition = "before",
+ label,
margin,
+ mode = "primary",
+ onClick,
+ semantic = "default",
size = { height: "large", width: "fitContent" },
tabIndex = 0,
+ title,
+ type = "button",
}: ButtonPropsType): JSX.Element => (
|