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, "maxV": 4,
"minR": 2, "minR": 2,
"maxR": 3, "maxR": 3,
"minN": 3, "minN": 2,
"maxN": 3, "maxN": 3,
"stepsUp": 8, "stepsUp": 8,
"stepsDown": 0, "stepsDown": 0,
"userSizingRatio": 0.2, "userSizingRatio": 0.8,
"userDensityRatio": 1.4 "userDensityRatio": 1.5
}, },
"innerSpacing": { "innerSpacing": {
"minV": 3, "minV": 2.25,
"maxV": 4, "maxV": 3,
"minR": 2, "minR": 2,
"maxR": 3, "maxR": 3,
"minN": 3, "minN": 2,
"maxN": 3, "maxN": 3,
"stepsUp": 8, "stepsUp": 8,
"stepsDown": 0, "stepsDown": 0,
"userSizingRatio": 0.2, "userSizingRatio": 0.25,
"userDensityRatio": 1.4 "userDensityRatio": 2.5
}, },
"typography": { "typography": {
"minV": 6, "minV": 6,
@ -48,8 +48,8 @@
"maxN": 5, "maxN": 5,
"stepsUp": 5, "stepsUp": 5,
"stepsDown": 1, "stepsDown": 1,
"userSizingRatio": 1.4, "userSizingRatio": 1.6,
"userDensityRatio": 0.2 "userDensityRatio": 0
} }
}, },
"colorMode": "light", "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; font-family: inherit;
border-style: solid; border-style: solid;
border-width: var(--border-width-1); border-width: var(--border-width-1);
padding-inline: var(--inner-spacing-4); padding-inline: var(--inner-spacing-3);
block-size: var(--sizing-8); padding-block: var(--inner-spacing-2);
min-inline-size: var(--sizing-8); min-inline-size: var(--sizing-8);
border-radius: var(--border-radius-1); 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 { .field {
display: flex; display: flex;
flex-direction: column; 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 { .inline-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--inner-spacing-2); gap: var(--inner-spacing-1);
min-height: var(--sizing-4); min-height: var(--sizing-4);
position: relative; position: relative;
cursor: pointer; 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); gap: var(--inner-spacing-1);
border-radius: var(--border-radius-1); border-radius: var(--border-radius-1);
box-shadow: 0 0 0 1px var(--color-bd-neutral); box-shadow: 0 0 0 1px var(--color-bd-neutral);
padding-inline: var(--inner-spacing-2); padding-inline: var(--inner-spacing-1);
block-size: var(--sizing-8); padding-block: var(--inner-spacing-1);
} }
& [data-field-input] :is(input, textarea) { & [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 = () => { export const ComplexForm = () => {
return ( return (
<Flex direction="column" gap="spacing-6"> <Flex direction="column" gap="spacing-6">
<Text variant="heading">Your order</Text> <Flex direction="column" gap="spacing-3">
<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>
<Flex direction="column" gap="spacing-5"> <Flex direction="column" gap="spacing-5">
<ButtonGroup> <ButtonGroup>
@ -57,11 +58,13 @@ export const ComplexForm = () => {
<Radio value="XL">XL</Radio> <Radio value="XL">XL</Radio>
</RadioGroup> </RadioGroup>
<Flex direction="column" gap="spacing-2"> <Flex direction="column" gap="spacing-3">
<Text isBold>Feedback is important to us</Text> <Flex direction="column" gap="spacing-2">
<Flex gap="spacing-1"> <Text isBold>Feedback is important to us</Text>
<IconButton icon={EmotionHappyLineIcon} variant="ghost" /> <Flex>
<IconButton icon={EmotionUnhappyLineIcon} variant="ghost" /> <IconButton icon={EmotionHappyLineIcon} variant="ghost" />
<IconButton icon={EmotionUnhappyLineIcon} variant="ghost" />
</Flex>
</Flex> </Flex>
<TextArea label="Your comment" /> <TextArea label="Your comment" />
</Flex> </Flex>