paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

Fix SearchField styles

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-03-02 17:31:53 +00:00
parent 5476d22724
commit eee3c14329
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/SearchField/SearchField.module.css
+17 -13
View File
@@ -39,6 +39,18 @@
}
}
&[data-on-bg='neutral-1'] .bui-SearchFieldInputWrapper {
background-color: var(--bui-bg-neutral-2);
}
&[data-on-bg='neutral-2'] .bui-SearchFieldInputWrapper {
background-color: var(--bui-bg-neutral-3);
}
&[data-on-bg='neutral-3'] .bui-SearchFieldInputWrapper {
background-color: var(--bui-bg-neutral-4);
}
&[data-startcollapsed='true'] {
transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,
max-width 0.3s ease-in-out;
@@ -94,18 +106,14 @@
align-items: center;
border-radius: var(--bui-radius-2);
background-color: var(--bui-bg-neutral-1);
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
.bui-SearchField[data-on-bg='neutral-1'] & {
background-color: var(--bui-bg-neutral-2);
&:has([data-focused]) {
box-shadow: inset 0 0 0 1px var(--bui-ring);
}
.bui-SearchField[data-on-bg='neutral-2'] & {
background-color: var(--bui-bg-neutral-3);
}
.bui-SearchField[data-on-bg='neutral-3'] & {
background-color: var(--bui-bg-neutral-4);
&:has([data-invalid]) {
box-shadow: inset 0 0 0 1px var(--bui-border-danger);
}
&[data-size='small'] {
@@ -116,10 +124,6 @@
height: 2.5rem;
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
}
&[data-disabled] {
opacity: 0.5;
cursor: not-allowed;
packages/ui/src/components/TextField/TextField.module.css
+13 -14
View File
@@ -23,6 +23,18 @@
font-family: var(--bui-font-regular);
width: 100%;
flex-shrink: 0;
&[data-on-bg='neutral-1'] .bui-Input {
background-color: var(--bui-bg-neutral-2);
}
&[data-on-bg='neutral-2'] .bui-Input {
background-color: var(--bui-bg-neutral-3);
}
&[data-on-bg='neutral-3'] .bui-Input {
background-color: var(--bui-bg-neutral-4);
}
}
.bui-InputWrapper {
@@ -77,19 +89,6 @@
border-radius: var(--bui-radius-2);
border: none;
background-color: var(--bui-bg-neutral-1);
.bui-TextField[data-on-bg='neutral-1'] & {
background-color: var(--bui-bg-neutral-2);
}
.bui-TextField[data-on-bg='neutral-2'] & {
background-color: var(--bui-bg-neutral-3);
}
.bui-TextField[data-on-bg='neutral-3'] & {
background-color: var(--bui-bg-neutral-4);
}
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
@@ -114,7 +113,7 @@
}
&[data-invalid] {
border-color: var(--bui-fg-danger);
box-shadow: inset 0 0 0 1px var(--bui-border-danger);
}
&[data-disabled] {