From 64c8375d021de266b3dea1b9af012256cd0d5673 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Mon, 20 Jan 2025 23:32:35 +0100 Subject: [PATCH] fix(components/atom/label): color contrast for labels in light mode --- .../atom/label/demo/articles/ArticleType.tsx | 11 ++++++++--- components/atom/label/demo/package.json | 3 ++- components/atom/label/src/styles/index.scss | 5 ++++- components/atom/label/src/styles/settings.scss | 11 ++++++++--- package-lock.json | 16 ++++++++-------- 5 files changed, 30 insertions(+), 16 deletions(-) diff --git a/components/atom/label/demo/articles/ArticleType.tsx b/components/atom/label/demo/articles/ArticleType.tsx index ac289603fe..2219ba8b65 100644 --- a/components/atom/label/demo/articles/ArticleType.tsx +++ b/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 (
@@ -15,8 +20,8 @@ const ArticleType = ({className}: {className?: string}) => { {labelTypes.map(([key, value]: [string, Type], index) => ( - - + + { optionalText="(Optional)" type={value} /> - + ))} diff --git a/components/atom/label/demo/package.json b/components/atom/label/demo/package.json index cde3ad84bf..466e44ca94 100644 --- a/components/atom/label/demo/package.json +++ b/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" } } \ No newline at end of file diff --git a/components/atom/label/src/styles/index.scss b/components/atom/label/src/styles/index.scss index 9e55e68aa3..e6a93f48f6 100644 --- a/components/atom/label/src/styles/index.scss +++ b/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; + } } } } diff --git a/components/atom/label/src/styles/settings.scss b/components/atom/label/src/styles/settings.scss index d3b70639d0..926e05024c 100644 --- a/components/atom/label/src/styles/settings.scss +++ b/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; diff --git a/package-lock.json b/package-lock.json index 231a09fc6a..4afb203a82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -278,7 +278,8 @@ "@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/panel": { @@ -5760,9 +5761,9 @@ } }, "node_modules/@s-ui/studio": { - "version": "11.52.0", - "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.52.0.tgz", - "integrity": "sha512-cfe3pxXreDO6TbxfXRaK0FjKTGJ8st9pGUdSeookeCkMQVi5c8dyZ/+5/1XGzuiHumSq4V7C0twKnVm2fFdPgA==", + "version": "11.53.0", + "resolved": "https://registry.npmjs.org/@s-ui/studio/-/studio-11.53.0.tgz", + "integrity": "sha512-/r3s/iZ8bu6GWitXMhkz6ApOi0nzWKvKpr133q5u1ddWRRYAiBS52uYi+8iPPUh3xIvTHSo08mPAkii13Rsb6A==", "dev": true, "dependencies": { "@babel/cli": "7", @@ -11585,9 +11586,9 @@ "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==" }, "node_modules/fast-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.5.tgz", - "integrity": "sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==", + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz", + "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==", "funding": [ { "type": "github", @@ -20973,7 +20974,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/use-prefers-color-scheme/-/use-prefers-color-scheme-1.1.3.tgz", "integrity": "sha512-ZRgDfb5BFLum/Sud4SpZ+d1YcV+lRbsupw0qQ/rGy5kGrpE3KMUQgEQOKiQQSa4Wslex46n5fKFO+9FGMTosUQ==", - "dev": true, "engines": { "node": ">=8", "npm": ">=5"