scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/BOOK-562-update-disabled-color-fields (pull request #3150)

Browse Source 
fix(BOOK-562): update disable color

* fix(BOOK-562): update disable color


Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2025-11-13 13:02:51 +00:00
parent 0830338734
commit 66fd7696f7
4 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/design-system/lib/components/Form/Country/country.module.css
View File

@@ -36,10 +36,8 @@
&[data-disabled] {
border: transparent;
.inner {
background-color: var(--Surface-Primary-Disabled);
color: var(--Text-Interactive-Disabled);
}
background-color: var(--Surface-Primary-Disabled);
color: var(--Text-Interactive-Disabled);
.button,
.input,

20
packages/design-system/lib/components/Form/Phone/index.tsx
View File

@@ -14,7 +14,6 @@ import {
usePhoneInput,
} from 'react-international-phone'
import Body from '../../Body'
import { ErrorMessage } from '../ErrorMessage'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Input } from '../../Input'
@@ -23,6 +22,7 @@ import { Label } from '../../Label'
import styles from './phone.module.css'
import type { PhoneProps } from './phone'
import { Typography } from '../../Typography'
export default function Phone({
ariaLabel = 'Phone number input',
@@ -109,14 +109,16 @@ export default function Phone({
</Label>
<span className={styles.selectContainer}>
{props.children}
<Body asChild fontOnly>
<DialCodePreview
className={styles.dialCode}
dialCode={country.dialCode}
prefix="+"
disabled={disabled}
/>
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
<DialCodePreview
className={styles.dialCode}
dialCode={country.dialCode}
prefix="+"
disabled={disabled}
/>
</p>
</Typography>
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.chevron}

11
packages/design-system/lib/components/Form/Phone/phone.module.css
View File

@@ -60,7 +60,7 @@
.select {
align-content: center;
background-color: var(--Main-Grey-White);
background-color: var(--Surface-UI-Fill-Default);
border-color: var(--Border-Interactive-Default);
border-style: solid;
border-width: 1px;
@@ -83,10 +83,8 @@
color: var(--Text-Interactive-Disabled);
border: none;
.selectContainer,
.chevron,
.dialCode {
background-color: var(--Surface-Primary-Disabled);
.dialCode,
.chevron {
color: var(--Text-Interactive-Disabled);
}
}
@@ -97,7 +95,7 @@
}
.selectContainer {
background-color: var(--Main-Grey-White);
background-color: transparent;
border: none;
display: grid;
gap: var(--Space-x1);
@@ -119,6 +117,7 @@
.select .dialCode {
border: none;
background-color: transparent;
color: var(--UI-Text-High-contrast);
line-height: 1;
justify-self: flex-start;

6
packages/design-system/lib/components/Select/select.module.css
View File

@@ -35,10 +35,8 @@
}
&[data-disabled] {
border: none;
.inner {
background-color: var(--Surface-Primary-Disabled);
color: var(--Text-Interactive-Disabled);
}
background-color: var(--Surface-Primary-Disabled);
color: var(--Text-Interactive-Disabled);
.button,
.input,
.label,