diff --git a/src/primitives/checkbox/styles.ts b/src/primitives/checkbox/styles.ts index 03e5f2414..a3dcaac3d 100644 --- a/src/primitives/checkbox/styles.ts +++ b/src/primitives/checkbox/styles.ts @@ -50,24 +50,37 @@ export function inputElementStyles(props: ThemeProps): ReturnType { & > path { vector-effect: non-scaling-stroke; - stroke-width: 2 !important; + stroke-width: 1.2 !important; } } } - &:not(:disabled):focus + span { + &:not(:checked)&:not(:disabled):focus + span { box-shadow: ${focusRingStyle({ border: {width: input.border.width, color: color.default.enabled.border}, focusRing, })}; } - &:not(:disabled):focus:not(:focus-visible) + span { + &:not(:checked)&:not(:disabled):focus:not(:focus-visible) + span { box-shadow: ${focusRingBorderStyle({ color: color.default.enabled.border, width: input.border.width, })}; } + &:checked + span { + background: ${color.default.enabled.bg2}; + box-shadow: ${focusRingBorderStyle({ + color: color.default.enabled.bg2, + width: input.border.width, + })}; + color: ${color.default.enabled.bg}; + } + &:checked&:not(:disabled):focus + span { + box-shadow: ${focusRingStyle({ + focusRing: {width: 1, offset: 1}, + })}; + } &:checked + span > svg:first-child { opacity: 1; @@ -81,6 +94,9 @@ export function inputElementStyles(props: ThemeProps): ReturnType { })}; color: ${color.default.readOnly.fg}; } + &:checked&[data-read-only]:disabled + span { + background-color: ${color.default.readOnly.bg2}; + } &:not([data-read-only]):disabled + span { background-color: ${color.default.disabled.bg}; @@ -90,6 +106,9 @@ export function inputElementStyles(props: ThemeProps): ReturnType { })}; color: ${color.default.disabled.fg}; } + &:checked&:not([data-read-only]):disabled + span { + background-color: ${color.default.disabled.bg2}; + } &:indeterminate + span > svg:last-child { opacity: 1; diff --git a/src/theme/lib/theme/color/defaults.ts b/src/theme/lib/theme/color/defaults.ts index 1944f22b6..d914b3a08 100644 --- a/src/theme/lib/theme/color/defaults.ts +++ b/src/theme/lib/theme/color/defaults.ts @@ -327,6 +327,7 @@ export const defaultOpts: ThemeColorBuilderOpts = { input: () => { return { bg: black, + bg2: black, fg: black, border: black, placeholder: black, diff --git a/src/theme/lib/theme/color/input/types.ts b/src/theme/lib/theme/color/input/types.ts index 1b32a2ea3..33d8acb49 100644 --- a/src/theme/lib/theme/color/input/types.ts +++ b/src/theme/lib/theme/color/input/types.ts @@ -3,6 +3,7 @@ */ export interface ThemeColorInputState { bg: string + bg2: string fg: string border: string placeholder: string diff --git a/src/theme/studioTheme/color.ts b/src/theme/studioTheme/color.ts index be4ad25d1..749397da5 100644 --- a/src/theme/studioTheme/color.ts +++ b/src/theme/studioTheme/color.ts @@ -24,9 +24,9 @@ export const color = createColorTheme({ return { fg: dark ? white.hex : black.hex, - bg: dark ? black.hex : white.hex, - border: tints[dark ? 800 : 200].hex, - focusRing: hues.blue[dark ? 500 : 500].hex, + bg: getColor(tones['default'], dark, 'default', 'bg_base'), + border: getColor(tones['default'], dark, 'default', 'border_base'), + focusRing: getColor(tones['positive'], dark, 'positive', 'border_accent'), shadow: { outline: rgba(tints[500].hex, 0.4), umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2), @@ -69,7 +69,7 @@ export const color = createColorTheme({ fg: tints[dark ? 100 : 900].hex, bg: getColor(tints, dark, name, 'bg_base'), border: getColor(tints, dark, name, 'border_base'), - focusRing: tints[500].hex, + focusRing: getColor(tints, dark, name, 'border_accent'), shadow: { outline: rgba(tints[500].hex, 0.4), umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2), @@ -519,6 +519,7 @@ export const color = createColorTheme({ return { bg: mix(base.bg, tints[dark ? 950 : 50].hex), + bg2: getColor(tints, dark, 'critical', 'text_secondary'), fg: mix(base.bg, tints[dark ? 400 : 600].hex), border: mix(base.bg, tints[dark ? 800 : 200].hex), placeholder: mix(base.bg, tints[dark ? 600 : 400].hex), @@ -528,6 +529,7 @@ export const color = createColorTheme({ if (state === 'hovered') { return { bg: base.bg, + bg2: getColor(tones.default, dark, 'default', 'text_secondary'), fg: base.fg, border: mix(base.bg, hues.gray[dark ? 700 : 300].hex), placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex), @@ -536,24 +538,27 @@ export const color = createColorTheme({ if (state === 'disabled') { return { - bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex), - fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex), - border: mix(base.bg, hues.gray[dark ? 900 : 100].hex), + bg: getColor(tones.default, dark, 'default', 'bg_tint'), + bg2: getColor(tones.default, dark, 'default', 'border_base'), + fg: getColor(tones.default, dark, 'default', 'bg_base'), + border: getColor(tones.default, dark, 'default', 'border_base'), placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex), } } if (state === 'readOnly') { return { - bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex), - fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex), - border: mix(base.bg, hues.gray[dark ? 800 : 200].hex), + bg: getColor(tones.default, dark, 'default', 'bg_tint'), + bg2: getColor(tones.default, dark, 'default', 'border_base'), + fg: getColor(tones.default, dark, 'default', 'bg_base'), + border: getColor(tones.default, dark, 'default', 'border_base'), placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex), } } return { bg: base.bg, + bg2: getColor(tones.default, dark, 'default', 'text_secondary'), fg: base.fg, border: base.border, placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex), diff --git a/src/theme/studioTheme/theme.ts b/src/theme/studioTheme/theme.ts index 92669ccab..791125d6f 100644 --- a/src/theme/studioTheme/theme.ts +++ b/src/theme/studioTheme/theme.ts @@ -38,7 +38,7 @@ export const studioTheme: RootTheme = { input: { checkbox: { size: 17, - focusRing: {offset: 1, width: 1}, + focusRing: {offset: -1, width: 1}, }, radio: { size: 17, diff --git a/src/theme/studioTheme/tints.ts b/src/theme/studioTheme/tints.ts index d811fedd9..dba9cb9e7 100644 --- a/src/theme/studioTheme/tints.ts +++ b/src/theme/studioTheme/tints.ts @@ -58,7 +58,7 @@ const defaultTints: { }, } -export const colorTints: { +const colorTints: { light: { [key in validTones]: ColorTintsDictionary } diff --git a/stories/primitives/Checkbox.stories.tsx b/stories/primitives/Checkbox.stories.tsx index 0433b08ee..b8cae0bb7 100644 --- a/stories/primitives/Checkbox.stories.tsx +++ b/stories/primitives/Checkbox.stories.tsx @@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react' import {useCallback, useState} from 'react' import {Checkbox, Flex, Stack} from '../../src/primitives' +import {matrixBuilder} from '../helpers/matrixBuilder' const meta: Meta = { argTypes: { @@ -46,15 +47,27 @@ export const InputStates: Story = { render: (props) => { return ( - - - - - - - - - + + {matrixBuilder({ + scheme: 'light', + columns: ['default', 'indeterminate', 'checked'], + rows: ['enabled', 'disabled', 'readOnly'], + title: '', + renderItem({row, column}) { + return ( + + + + ) + }, + })} )