Merge pull request #2811 from SUI-Components/atom-label-color-contrasts

fix(components/atom/label): color contrast for labels in light mode

components/atom/label/demo/articles/ArticleType.tsx

@@ -1,11 +1,16 @@
 import {Article, Box, Cell, Code, Grid, H2, Paragraph} from '@s-ui/documentation-library'
 import AtomInput from '@s-ui/react-atom-input'
+import usePrefersColorScheme from 'use-prefers-color-scheme'
 
 import AtomLabel, {type Type, AtomLabelTypes} from '../../src/index'
 import {flexCenteredStyle} from '../settings.js'
 
 const ArticleType = ({className}: {className?: string}) => {
   const labelTypes = [['default', undefined], ...Object.entries(AtomLabelTypes)] as Array<[string, Type]>
+  const prefersColorScheme = usePrefersColorScheme()
+  const mode: 'dark' | 'light' = prefersColorScheme === 'dark' ? 'dark' : 'light'
+  const inverseMode: 'dark' | 'light' = mode === 'dark' ? 'light' : 'dark'
+  const getMode = (type: Type) => (type !== AtomLabelTypes.CONTRAST ? mode : inverseMode)
 
   return (
     <Article className={className}>
@@ -15,16 +20,16 @@ const ArticleType = ({className}: {className?: string}) => {
       </Paragraph>
       <Grid cols={labelTypes.length} gutter={[8, 8]}>
         {labelTypes.map(([key, value]: [string, Type], index) => (
-          <Cell key={index} style={flexCenteredStyle}>
-            <Box mode={value === AtomLabelTypes.CONTRAST ? 'dark' : 'light'}>
+          <Cell data-theme-mode={getMode(value)} key={index} style={flexCenteredStyle}>
+            <Box data-theme-mode={getMode(value)}>
               <AtomLabel
                 name={`atomLabelName-${key}`}
                 htmlFor={`labelType-${key}`}
                 text={`Label ${value as string}`}
                 optionalText="(Optional)"
                 type={value}
               />
-              <AtomInput id={`labelType-${key}`} />
+              <AtomInput id={`labelType-${key}`} disabled={value === AtomLabelTypes.DISABLED} />
             </Box>
           </Cell>
         ))}

components/atom/label/demo/package.json

@@ -14,6 +14,7 @@
     "@s-ui/react-atom-button": "1",
     "@s-ui/react-atom-checkbox": "3",
     "@s-ui/react-atom-icon": "1",
-    "@s-ui/react-atom-input": "5"
+    "@s-ui/react-atom-input": "5",
+    "use-prefers-color-scheme": "1.1.3"
   }
 }

components/atom/label/src/styles/index.scss

@@ -44,9 +44,12 @@ $base-class: '.sui-AtomLabel';
     pointer-events: none;
   }
 
-  @each $type, $color in $c-atom-label-type {
+  @each $type, $color, $optionalColor in $c-atom-label-type {
     &--#{$type} {
       color: $color;
+      #{$base-class}-optionalText {
+        color: $optionalColor;
+      }
     }
   }
 }

components/atom/label/src/styles/settings.scss

@@ -1,10 +1,15 @@
 $c-atom-label: inherit !default;
-$c-atom-label-optional: $c-gray-light !default;
+$c-atom-label-optional: $c-gray-dark-1 !default;
 $c-atom-label-contrast: $c-white !default;
 $c-atom-label-disabled: inherit !default;
 $o-atom-label-disabled: 0.3 !default;
 $fw-atom-label: inherit !default;
-$c-atom-label-type: success $c-success, error $c-error, alert $c-alert, contrast $c-atom-label-contrast,
-  disabled $c-atom-label-disabled !default;
+$c-atom-label-type: (
+  success $c-success-dark-1 $c-gray-dark-1,
+  error $c-error-dark-1 $c-gray-dark-1,
+  alert $c-alert-dark-2 $c-gray-dark-1,
+  contrast $c-atom-label-contrast $c-gray-light-2,
+  disabled $c-atom-label-disabled $c-gray-dark-1
+) !default;
 $fz-atom-label: $fz-base !default;
 $lh-atom-label: inherit !default;