Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: WDS fluid tokens config fine-tuning (#26533)

Browse Source 
Closes #25686
This commit is contained in:
vadim 2023-08-23 11:35:11 +02:00 committed by GitHub
parent 081bf03a1c
commit 5b34de09e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/packages/design-system/theming/src/token/src/defaultTokens.json
View File

@ -5,7 +5,7 @@
"maxVw": 1920, "maxVw": 1920,
"rootUnit": { "rootUnit": {
"minV": 4, "minV": 4,
"maxV": 4.4, "maxV": 5,
"minR": 1, "minR": 1,
"maxR": 1, "maxR": 1,
"minN": 1, "minN": 1,
@ -14,13 +14,13 @@
"stepsDown": 0 "stepsDown": 0
}, },
"spacing": { "spacing": {
"minV": 8, "minV": 4,
"maxV": 8.8, "maxV": 6,
"minR": 2, "minR": 2,
"maxR": 3, "maxR": 3,
"minN": 3, "minN": 3,
"maxN": 3, "maxN": 3,
"stepsUp": 6, "stepsUp": 8,
"stepsDown": 0 "stepsDown": 0
}, },
"typography": { "typography": {

4
app/client/packages/design-system/widgets/src/components/Button/src/index.styled.tsx
View File

@ -75,7 +75,7 @@ export const StyledButton = styled(HeadlessButton)<StyledButtonProps>`
font-family: inherit; font-family: inherit;
border-style: solid; border-style: solid;
border-width: var(--border-width-1); border-width: var(--border-width-1);
padding-inline: var(--spacing-4); padding-inline: var(--spacing-5);
block-size: var(--sizing-8); block-size: var(--sizing-8);
min-inline-size: var(--sizing-8); min-inline-size: var(--sizing-8);
border-radius: var(--border-radius-1); border-radius: var(--border-radius-1);
@ -120,8 +120,6 @@ export const StyledButton = styled(HeadlessButton)<StyledButtonProps>`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: var(--sizing-4);
width: var(--sizing-4);
} }
/** /**

2
app/client/packages/design-system/widgets/src/components/Tooltip/src/index.styled.tsx
View File

@ -13,7 +13,7 @@ export const StyledTooltipContent = styled(
)<StyledTooltipContentProps>` )<StyledTooltipContentProps>`
background-color: var(--color-bg-assistive); background-color: var(--color-bg-assistive);
color: var(--color-fg-on-assistive); color: var(--color-fg-on-assistive);
padding: var(--spacing-2) var(--spacing-3); padding: var(--spacing-3) var(--spacing-4);
border-radius: var(--border-radius-1); border-radius: var(--border-radius-1);
z-index: var(--z-index-99); z-index: var(--z-index-99);

6
app/client/packages/design-system/widgets/src/components/testing/ComplexForm.tsx
View File

@ -17,12 +17,12 @@ import {
export const ComplexForm = () => { export const ComplexForm = () => {
return ( return (
<Flex direction="column" gap="spacing-6"> <Flex direction="column" gap="spacing-7">
<Text variant="heading">Your order</Text> <Text variant="heading">Your order</Text>
<Text>Choose your favorite dishes and place an order</Text> <Text>Choose your favorite dishes and place an order</Text>
<Flex direction="column" gap="spacing-4"> <Flex direction="column" gap="spacing-6">
<ButtonGroup> <ButtonGroup>
<Button>Fast food</Button> <Button>Fast food</Button>
<Button>Salads</Button> <Button>Salads</Button>
@ -51,7 +51,7 @@ export const ComplexForm = () => {
</RadioGroup> </RadioGroup>
</Flex> </Flex>
<Flex gap="spacing-2"> <Flex gap="spacing-3">
<TooltipRoot> <TooltipRoot>
<TooltipTrigger> <TooltipTrigger>
<Button variant="outlined">Cancel</Button> <Button variant="outlined">Cancel</Button>

2
app/client/packages/design-system/widgets/src/styles/src/fieldStyles.ts
View File

@ -24,7 +24,7 @@ export const fieldStyles = css<FieldStylesProps>`
& [data-field-label] { & [data-field-label] {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-1); gap: var(--spacing-2);
height: fit-content; height: fit-content;
color: var(--color-fg); color: var(--color-fg);
font-weight: ${({ isEmphasized }) => (isEmphasized ? "bold" : "normal")}; font-weight: ${({ isEmphasized }) => (isEmphasized ? "bold" : "normal")};