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] { &[data-disabled] {
border: transparent; border: transparent;
.inner { background-color: var(--Surface-Primary-Disabled);
background-color: var(--Surface-Primary-Disabled); color: var(--Text-Interactive-Disabled);
color: var(--Text-Interactive-Disabled);
}
.button, .button,
.input, .input,

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

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

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

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

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

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