fix: a11y contrast issues

Author: mxschll

pages/tabs/style-permutations.page.tsx

@@ -73,8 +73,8 @@ const permutations = createPermutations<TabsProps>([
         tabs: {
           backgroundColor: {
             default: 'light-dark(#f1f5f9, #1e293b)',
-            hover: 'light-dark(#e0e7ff, #312e81)',
-            active: 'light-dark(#6366f1, #4f46e5)',
+            hover: 'light-dark(#dbeafe, #1e3a8a)',
+            active: 'light-dark(#2563eb, #1d4ed8)',
             disabled: 'light-dark(#f8fafc, #1e293b)',
           },
           borderColor: {
@@ -87,7 +87,7 @@ const permutations = createPermutations<TabsProps>([
           borderRadius: '20px',
           color: {
             default: 'light-dark(#475569, #94a3b8)',
-            hover: 'light-dark(#4338ca, #c7d2fe)',
+            hover: 'light-dark(#1e3a8a, #dbeafe)',
             active: 'light-dark(#ffffff, #ffffff)',
             disabled: 'light-dark(#cbd5e1, #64748b)',
           },
@@ -96,7 +96,7 @@ const permutations = createPermutations<TabsProps>([
           paddingBlock: '10px',
           paddingInline: '24px',
           focusRing: {
-            borderColor: 'light-dark(#6366f1, #818cf8)',
+            borderColor: 'light-dark(#2563eb, #60a5fa)',
             borderRadius: '22px',
             borderWidth: '2px',
           },

src/tabs/styles.tsx

@@ -5,68 +5,56 @@ import customCssProps from '../internal/generated/custom-css-properties';
 import { TabsProps } from './interfaces';
 
 export function getTabStyles(style: TabsProps['style']) {
-  if (SYSTEM !== 'core' || !style?.tabs) {
+  if (SYSTEM !== 'core') {
     return undefined;
   }
 
   return {
-    borderRadius: style.tabs.borderRadius,
-    borderWidth: style.tabs.borderWidth,
-    fontSize: style.tabs.fontSize,
-    fontWeight: style.tabs.fontWeight,
-    paddingBlock: style.tabs.paddingBlock,
-    paddingInline: style.tabs.paddingInline,
-    ...(style.tabs.backgroundColor && {
-      [customCssProps.styleBackgroundActive]: style.tabs.backgroundColor.active,
-      [customCssProps.styleBackgroundDefault]: style.tabs.backgroundColor.default,
-      [customCssProps.styleBackgroundDisabled]: style.tabs.backgroundColor.disabled,
-      [customCssProps.styleBackgroundHover]: style.tabs.backgroundColor.hover,
-    }),
-    ...(style.tabs.borderColor && {
-      [customCssProps.styleBorderColorActive]: style.tabs.borderColor.active,
-      [customCssProps.styleBorderColorDefault]: style.tabs.borderColor.default,
-      [customCssProps.styleBorderColorDisabled]: style.tabs.borderColor.disabled,
-      [customCssProps.styleBorderColorHover]: style.tabs.borderColor.hover,
-    }),
-    ...(style.tabs.color && {
-      [customCssProps.styleColorActive]: style.tabs.color.active,
-      [customCssProps.styleColorDefault]: style.tabs.color.default,
-      [customCssProps.styleColorDisabled]: style.tabs.color.disabled,
-      [customCssProps.styleColorHover]: style.tabs.color.hover,
-    }),
-    ...(style.tabs.focusRing && {
-      [customCssProps.styleFocusRingBorderColor]: style.tabs.focusRing.borderColor,
-      [customCssProps.styleFocusRingBorderRadius]: style.tabs.focusRing.borderRadius,
-      [customCssProps.styleFocusRingBorderWidth]: style.tabs.focusRing.borderWidth,
-    }),
+    borderRadius: style?.tabs?.borderRadius,
+    borderWidth: style?.tabs?.borderWidth,
+    fontSize: style?.tabs?.fontSize,
+    fontWeight: style?.tabs?.fontWeight,
+    paddingBlock: style?.tabs?.paddingBlock,
+    paddingInline: style?.tabs?.paddingInline,
+    [customCssProps.styleBackgroundActive]: style?.tabs?.backgroundColor?.active,
+    [customCssProps.styleBackgroundDefault]: style?.tabs?.backgroundColor?.default,
+    [customCssProps.styleBackgroundDisabled]: style?.tabs?.backgroundColor?.disabled,
+    [customCssProps.styleBackgroundHover]: style?.tabs?.backgroundColor?.hover,
+    [customCssProps.styleBorderColorActive]: style?.tabs?.borderColor?.active,
+    [customCssProps.styleBorderColorDefault]: style?.tabs?.borderColor?.default,
+    [customCssProps.styleBorderColorDisabled]: style?.tabs?.borderColor?.disabled,
+    [customCssProps.styleBorderColorHover]: style?.tabs?.borderColor?.hover,
+    [customCssProps.styleColorActive]: style?.tabs?.color?.active,
+    [customCssProps.styleColorDefault]: style?.tabs?.color?.default,
+    [customCssProps.styleColorDisabled]: style?.tabs?.color?.disabled,
+    [customCssProps.styleColorHover]: style?.tabs?.color?.hover,
+    [customCssProps.styleFocusRingBorderColor]: style?.tabs?.focusRing?.borderColor,
+    [customCssProps.styleFocusRingBorderRadius]: style?.tabs?.focusRing?.borderRadius,
+    [customCssProps.styleFocusRingBorderWidth]: style?.tabs?.focusRing?.borderWidth,
   };
 }
 
 export function getTabContainerStyles(style: TabsProps['style']) {
-  if (SYSTEM !== 'core' || (!style?.underline && !style?.divider)) {
+  if (SYSTEM !== 'core') {
     return undefined;
   }
 
   return {
-    ...(style.underline && {
-      [customCssProps.styleTabsUnderlineColor]: style.underline.color,
-      [customCssProps.styleTabsUnderlineWidth]: style.underline.width,
-      [customCssProps.styleTabsUnderlineBorderRadius]: style.underline.borderRadius,
-    }),
-    ...(style.divider && {
-      [customCssProps.styleTabsDividerColor]: style.divider.color,
-      [customCssProps.styleTabsDividerWidth]: style.divider.width,
-    }),
+    [customCssProps.styleTabsUnderlineColor]: style?.underline?.color,
+    [customCssProps.styleTabsUnderlineWidth]: style?.underline?.width,
+    [customCssProps.styleTabsUnderlineBorderRadius]: style?.underline?.borderRadius,
+    [customCssProps.styleTabsDividerColor]: style?.divider?.color,
+    [customCssProps.styleTabsDividerWidth]: style?.divider?.width,
   };
 }
 
 export function getTabHeaderStyles(style: TabsProps['style']) {
-  if (SYSTEM !== 'core' || !style?.headerDivider) {
+  if (SYSTEM !== 'core') {
     return undefined;
   }
 
   return {
-    [customCssProps.styleTabsHeaderDividerColor]: style.headerDivider.color,
-    [customCssProps.styleTabsHeaderDividerWidth]: style.headerDivider.width,
+    [customCssProps.styleTabsHeaderDividerColor]: style?.headerDivider?.color,
+    [customCssProps.styleTabsHeaderDividerWidth]: style?.headerDivider?.width,
   };
 }