diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index f2c58689fb..eb456be40a 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -37,36 +37,36 @@ export const getButtonStyles = ( break; case "selected": case "default": - enabled = `background-color: var(--color-bg-primary-strong);`; - hover = `background-color: var(--color-bg-primary-stronger);`; + enabled = `background-color: var(--color-bg-primary-stronger);`; + hover = `background-color: var(--color-bg-primary-strongest);`; 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);`; + enabled = `background-color: var(--color-bg-error-stronger);`; + hover = `background-color: var(--color-bg-error-strongest);`; 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);`; + enabled = `background-color: var(--color-bg-warning-stronger);`; + hover = `background-color: var(--color-bg-warning-strongest);`; 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);`; + enabled = `background-color: var(--color-bg-success-stronger);`; + hover = `background-color: var(--color-bg-success-strongest);`; 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-info-strong);`; - hover = `background-color: var(--color-bg-info-stronger);`; + enabled = `background-color: var(--color-bg-info-stronger);`; + hover = `background-color: var(--color-bg-info-strongest);`; active = `background-color: var(--color-bg-info-strongest);`; disabled = `background-color: var(--color-bg-info-lightest); color: var(--color-fg-info-medium);`; @@ -89,8 +89,8 @@ export const getButtonStyles = ( switch (semantic) { case "default": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger); - color: var(--color-fg-primary-strong);`; - hover = `background-color: var(--color-bg-primary-strong); + color: var(--color-fg-primary-stronger);`; + hover = `background-color: var(--color-bg-primary-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-primary-stronger); color: var(--color-fg-neutral-bright);`; @@ -98,9 +98,9 @@ export const getButtonStyles = ( color: var(--color-fg-primary-light);`; break; case "error": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-error-medium); - color: var(--color-fg-error-medium);`; - hover = `background-color: var(--color-bg-error-strong); + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-error-strong); + color: var(--color-fg-error-strong);`; + hover = `background-color: var(--color-bg-error-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-error-stronger); color: var(--color-fg-neutral-bright);`; @@ -108,29 +108,29 @@ export const getButtonStyles = ( color: var(--color-fg-error-light);`; break; case "warning": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-warning-medium); - color: var(--color-fg-warning-medium);`; + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-warning-strong); + color: var(--color-fg-warning-stronger);`; hover = `background-color: var(--color-bg-warning-stronger); color: var(--color-fg-neutral-bright);`; - active = `background-color: var(--color-bg-warning-strongest); + active = `background-color: var(--color-bg-warning-stronger); 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) var(--border-style-default) var(--border-color-success-medium); - color: var(--color-fg-success-medium);`; - hover = `background-color: var(--color-bg-success-strong); + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-success-strong); + color: var(--color-fg-success-strong);`; + hover = `background-color: var(--color-bg-success-stronger); color: var(--color-fg-neutral-bright);`; - active = `background-color: var(--color-bg-success-strongest); + active = `background-color: var(--color-bg-success-stronger); 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) var(--border-style-default) var(--border-color-info-strong); - color: var(--color-fg-info-strong);`; - hover = `background: var(--color-bg-info-strong); + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-stronger); + color: var(--color-fg-info-stronger);`; + hover = `background: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; @@ -155,31 +155,31 @@ export const getButtonStyles = ( case "tertiary": switch (semantic) { case "default": - enabled = `color: var(--color-fg-primary-strong);`; + enabled = `color: var(--color-fg-primary-stronger);`; 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);`; + enabled = `color: var(--color-fg-error-strong);`; + hover = `background-color: 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);`; + enabled = `color: var(--color-fg-warning-stronger);`; 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);`; + enabled = `color: var(--color-fg-success-strong);`; 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-info-strong);`; + enabled = `color: var(--color-fg-info-stronger);`; hover = `background-color: var(--color-bg-info-lighter);`; active = `background-color: var(--color-bg-info-light);`; disabled = `color: var(--color-fg-info-medium);`; @@ -187,7 +187,7 @@ export const getButtonStyles = ( } return `${commonStyles} background-color: transparent; - color: var(--color-fg-primary-strong); + color: var(--color-fg-primary-stronger); ${enabled} &:hover:enabled { ${hover} diff --git a/packages/lib/src/card/Card.tsx b/packages/lib/src/card/Card.tsx index eec25a033b..e9b14e6a44 100644 --- a/packages/lib/src/card/Card.tsx +++ b/packages/lib/src/card/Card.tsx @@ -132,12 +132,16 @@ const DxcCard = ({ - + {translatedLabels?.card?.noContent || "No content"} diff --git a/packages/lib/src/date-input/Calendar.tsx b/packages/lib/src/date-input/Calendar.tsx index 554e027182..cb764c053a 100644 --- a/packages/lib/src/date-input/Calendar.tsx +++ b/packages/lib/src/date-input/Calendar.tsx @@ -70,7 +70,7 @@ const DayCellButton = styled.button<{ props.selected ? "var(--color-fg-neutral-bright);" : !props.actualMonth - ? "var(--color-fg-neutral-medium);" + ? "var(--color-fg-neutral-strong);" : "var(--color-fg-neutral-dark);"}; ${(props) => diff --git a/packages/lib/src/link/Link.stories.tsx b/packages/lib/src/link/Link.stories.tsx index 5b60a15aa1..cd252c1e7f 100644 --- a/packages/lib/src/link/Link.stories.tsx +++ b/packages/lib/src/link/Link.stories.tsx @@ -56,7 +56,7 @@ const Link = () => ( - <span style={{ color: "#fabada" }}> + <span style={{ color: "#333333" }}> This is a <DxcLink inheritColor>Test</DxcLink>. </span> </ExampleContainer> diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 3b84bb5e56..30020db622 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -177,7 +177,7 @@ --border-color-info-strongest: var(--color-semantic01-800); --border-color-success-light: var(--color-semantic02-300); --border-color-success-medium: var(--color-semantic02-600); - --border-color-succes-strong: var(--color-semantic02-700) ; + --border-color-success-strong: var(--color-semantic02-700) ; --border-color-warning-light: var(--color-semantic03-300); --border-color-warning-medium: var(--color-semantic03-500); --border-color-warning-strong: var(--color-semantic03-600); diff --git a/packages/lib/test/accessibility/rules/common/disabledRules.ts b/packages/lib/test/accessibility/rules/common/disabledRules.ts index ff2741a990..c0cd89888f 100644 --- a/packages/lib/test/accessibility/rules/common/disabledRules.ts +++ b/packages/lib/test/accessibility/rules/common/disabledRules.ts @@ -10,8 +10,6 @@ const disabledRules = [ "region", // Disable label rule to prevent error from inputs that have no label on purpose (even though it is not really recommended for accessibility) "label", - // TODO: REMOVE - "color-contrast", ]; export default disabledRules;