Skip to content

Commit

Permalink
chore(react-components): update background colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarikTar
MarikTar committed Jan 3, 2025
1 parent bd783e2 commit 5447b9e
Show file tree
Hide file tree
Showing 10 changed files with 0 additions and 205 deletions.
20 changes: 0 additions & 20 deletions packages/react-components/src/Autocomplete/__snapshots__/autocomplete.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
}
.emotion-0:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
Expand All @@ -58,12 +57,10 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
}
.emotion-0[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-0:focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand All @@ -72,7 +69,6 @@ exports[`<Autocomplete /> should render with default styles 1`] = `
}
.emotion-0:focus-within {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -262,7 +258,6 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
}
.emotion-0:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
Expand All @@ -275,12 +270,10 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
}
.emotion-0[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-0:focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand All @@ -289,7 +282,6 @@ exports[`<Autocomplete /> should render with multiple selection enabled 1`] = `
}
.emotion-0:focus-within {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -479,7 +471,6 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
}
.emotion-0:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
Expand All @@ -492,12 +483,10 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
}
.emotion-0[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-0:focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand All @@ -506,7 +495,6 @@ exports[`<Autocomplete /> sizes renders with size "large" 1`] = `
}
.emotion-0:focus-within {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -696,7 +684,6 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
}
.emotion-0:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
Expand All @@ -709,12 +696,10 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
}
.emotion-0[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-0:focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand All @@ -723,7 +708,6 @@ exports[`<Autocomplete /> sizes renders with size "medium" 1`] = `
}
.emotion-0:focus-within {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -913,7 +897,6 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
}
.emotion-0:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
Expand All @@ -926,12 +909,10 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
}
.emotion-0[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-0:focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand All @@ -940,7 +921,6 @@ exports[`<Autocomplete /> sizes renders with size "small" 1`] = `
}
.emotion-0:focus-within {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down
9 changes: 0 additions & 9 deletions packages/react-components/src/Autocomplete/autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,33 +177,27 @@ TypographyOwnProps
const borderColorHover = 'var(--pv-color-gray-10)';
let borderColorDisabled = 'var(--pv-color-gray-5)';
let colorDisabled = 'var(--pv-color-gray-7)';
let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
const invalidBorderColor = 'var(--pv-color-wrong)';
let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
const borderColorFocus = 'var(--pv-color-secondary)';

if (isDark) {
borderColor = 'var(--pv-color-gray-5)';
colorPlaceholder = 'var(--pv-color-gray-6)';
borderColorDisabled = 'var(--pv-color-gray-4)';
colorDisabled = 'var(--pv-color-gray-4)';
invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
}

return ({
borderColor,
...(props.disabled && {
cursor: 'not-allowed',
backgroundColor: 'var(--pv-color-gray-1)',
borderColor: borderColorDisabled,
color: colorDisabled,
}),
...(!props.disabled && {
color,
cursor: 'text',
'&:hover': {
backgroundColor: 'var(--pv-color-gray-3)',
borderColor: borderColorHover,
'[aria-label="Clear"]': {
visibility: 'visible',
Expand All @@ -213,18 +207,15 @@ TypographyOwnProps
color: colorPlaceholder,
},
'&[aria-invalid]': {
backgroundColor: invalidBackgroundColor,
borderColor: invalidBorderColor,
},
'&:focus-visible': {
backgroundColor: backgroundColorFocus,
borderColor: borderColorFocus,
'[aria-label="Clear"]': {
visibility: 'visible',
},
},
'&:focus-within': {
backgroundColor: backgroundColorFocus,
borderColor: borderColorFocus,
'[aria-label="Clear"]': {
visibility: 'visible',
Expand Down
20 changes: 0 additions & 20 deletions packages/react-components/src/NativeSelect/__snapshots__/native_select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,20 @@ exports[`<NativeSelect /> should pass className 1`] = `
}
.emotion-1:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
.emotion-1:disabled {
cursor: not-allowed;
background-color: var(--pv-color-gray-1);
border-color: var(--pv-color-gray-5);
color: var(--pv-color-gray-7);
}
.emotion-1:not(:disabled)[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-1:not(:disabled):focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -137,24 +133,20 @@ exports[`<NativeSelect /> should render with default styles 1`] = `
}
.emotion-1:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
.emotion-1:disabled {
cursor: not-allowed;
background-color: var(--pv-color-gray-1);
border-color: var(--pv-color-gray-5);
color: var(--pv-color-gray-7);
}
.emotion-1:not(:disabled)[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-1:not(:disabled):focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -238,24 +230,20 @@ exports[`<NativeSelect /> sizes size "large" 1`] = `
}
.emotion-1:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
.emotion-1:disabled {
cursor: not-allowed;
background-color: var(--pv-color-gray-1);
border-color: var(--pv-color-gray-5);
color: var(--pv-color-gray-7);
}
.emotion-1:not(:disabled)[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-1:not(:disabled):focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -339,24 +327,20 @@ exports[`<NativeSelect /> sizes size "medium" 1`] = `
}
.emotion-1:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
.emotion-1:disabled {
cursor: not-allowed;
background-color: var(--pv-color-gray-1);
border-color: var(--pv-color-gray-5);
color: var(--pv-color-gray-7);
}
.emotion-1:not(:disabled)[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-1:not(:disabled):focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -440,24 +424,20 @@ exports[`<NativeSelect /> sizes size "small" 1`] = `
}
.emotion-1:hover {
background-color: var(--pv-color-gray-3);
border-color: var(--pv-color-gray-10);
}
.emotion-1:disabled {
cursor: not-allowed;
background-color: var(--pv-color-gray-1);
border-color: var(--pv-color-gray-5);
color: var(--pv-color-gray-7);
}
.emotion-1:not(:disabled)[aria-invalid] {
background-color: var(--pv-color-wrong-tint-5);
border-color: var(--pv-color-wrong);
}
.emotion-1:not(:disabled):focus-visible {
background-color: var(--pv-color-secondary-tint-5);
border-color: var(--pv-color-secondary);
}
Expand Down
8 changes: 0 additions & 8 deletions packages/react-components/src/NativeSelect/native_select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,39 +127,31 @@ const NativeSelectRoot = styled('select')<NativeSelectRootProps>(
const borderColorHover = 'var(--pv-color-gray-10)';
let borderColorDisabled = 'var(--pv-color-gray-5)';
let colorDisabled = 'var(--pv-color-gray-7)';
let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
const invalidBorderColor = 'var(--pv-color-wrong)';
let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
const borderColorFocus = 'var(--pv-color-secondary)';

if (isDark) {
borderColor = 'var(--pv-color-gray-5)';
borderColorDisabled = 'var(--pv-color-gray-4)';
colorDisabled = 'var(--pv-color-gray-4)';
invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
}

return ({
color,
borderColor,
'&:hover': {
backgroundColor: 'var(--pv-color-gray-3)',
borderColor: borderColorHover,
},
'&:disabled': {
cursor: 'not-allowed',
backgroundColor: 'var(--pv-color-gray-1)',
borderColor: borderColorDisabled,
color: colorDisabled,
},
'&:not(:disabled)': {
'&[aria-invalid]': {
backgroundColor: invalidBackgroundColor,
borderColor: invalidBorderColor,
},
'&:focus-visible': {
backgroundColor: backgroundColorFocus,
borderColor: borderColorFocus,
},
},
Expand Down
Loading

0 comments on commit 5447b9e

Please sign in to comment.