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

chore: WDS fluid tokens refinement (#28580)

Browse Source 
Closes #28104

Before

https://github.com/appsmithorg/appsmith/assets/80973/1bcbcf1a-f7ba-43ac-8b74-818e883c968b

After

https://github.com/appsmithorg/appsmith/assets/80973/3e02591a-c463-425a-9ebb-d681b7dcea56
This commit is contained in:
vadim 2023-11-06 16:33:59 +01:00 committed by GitHub
parent a40a88d65a
commit 59d2bc3b96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,24 +20,24 @@
"maxV": 4,
"minR": 2,
"maxR": 3,
"minN": 3,
"minN": 2,
"maxN": 3,
"stepsUp": 8,
"stepsDown": 0,
"userSizingRatio": 0.2,
"userDensityRatio": 1.4
"userSizingRatio": 0.8,
"userDensityRatio": 1.5
},
"innerSpacing": {
"minV": 3,
"maxV": 4,
"minV": 2.25,
"maxV": 3,
"minR": 2,
"maxR": 3,
"minN": 3,
"minN": 2,
"maxN": 3,
"stepsUp": 8,
"stepsDown": 0,
"userSizingRatio": 0.2,
"userDensityRatio": 1.4
"userSizingRatio": 0.25,
"userDensityRatio": 2.5
},
"typography": {
"minV": 6,
@ -48,8 +48,8 @@
"maxN": 5,
"stepsUp": 5,
"stepsDown": 1,
"userSizingRatio": 1.4,
"userDensityRatio": 0.2
"userSizingRatio": 1.6,
"userDensityRatio": 0
}
},
"colorMode": "light",

4
app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css
View File

@ -11,8 +11,8 @@
font-family: inherit;
border-style: solid;
border-width: var(--border-width-1);
padding-inline: var(--inner-spacing-4);
block-size: var(--sizing-8);
padding-inline: var(--inner-spacing-3);
padding-block: var(--inner-spacing-2);
min-inline-size: var(--sizing-8);
border-radius: var(--border-radius-1);

2
app/client/packages/design-system/widgets/src/styles/src/field.module.css
View File

@ -3,7 +3,7 @@
.field {
display: flex;
flex-direction: column;
gap: var(--inner-spacing-3);
gap: var(--inner-spacing-2);
/**
* ----------------------------------------------------------------------------

2
app/client/packages/design-system/widgets/src/styles/src/inline-label.module.css
View File

@ -2,7 +2,7 @@
.inline-label {
display: flex;
align-items: center;
gap: var(--inner-spacing-2);
gap: var(--inner-spacing-1);
min-height: var(--sizing-4);
position: relative;
cursor: pointer;

4
app/client/packages/design-system/widgets/src/styles/src/text-input.module.css
View File

@ -6,8 +6,8 @@
gap: var(--inner-spacing-1);
border-radius: var(--border-radius-1);
box-shadow: 0 0 0 1px var(--color-bd-neutral);
padding-inline: var(--inner-spacing-2);
block-size: var(--sizing-8);
padding-inline: var(--inner-spacing-1);
padding-block: var(--inner-spacing-1);
}
& [data-field-input] :is(input, textarea) {

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

@ -25,9 +25,10 @@ import EmotionUnhappyLineIcon from "remixicon-react/EmotionUnhappyLineIcon";
export const ComplexForm = () => {
return (
<Flex direction="column" gap="spacing-6">
<Text variant="heading">Your order</Text>
<Text>Choose your favorite dishes and place an order.</Text>
<Flex direction="column" gap="spacing-3">
<Text variant="heading">Your order</Text>
<Text>Choose your favorite dishes and place an order.</Text>
</Flex>
<Flex direction="column" gap="spacing-5">
<ButtonGroup>
@ -57,11 +58,13 @@ export const ComplexForm = () => {
<Radio value="XL">XL</Radio>
</RadioGroup>
<Flex direction="column" gap="spacing-2">
<Text isBold>Feedback is important to us</Text>
<Flex gap="spacing-1">
<IconButton icon={EmotionHappyLineIcon} variant="ghost" />
<IconButton icon={EmotionUnhappyLineIcon} variant="ghost" />
<Flex direction="column" gap="spacing-3">
<Flex direction="column" gap="spacing-2">
<Text isBold>Feedback is important to us</Text>
<Flex>
<IconButton icon={EmotionHappyLineIcon} variant="ghost" />
<IconButton icon={EmotionUnhappyLineIcon} variant="ghost" />
</Flex>
</Flex>
<TextArea label="Your comment" />
</Flex>