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

fix: checkbox and button border radius (#29476)

Browse Source 
## Description
Fix checkbox and button border radius


https://github.com/appsmithorg/appsmith/assets/11555074/8b7cc892-eaa2-4b06-9745-40410cd1d92b



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Updated the default font stack to include 'sans-serif' for better
cross-platform consistency.

- **Style**
  - Adjusted button padding for improved visual alignment and spacing.
- Enhanced checkbox design with responsive border-radius for a more
modern look.

- **Documentation**
- Updated theme settings to reflect the new "Pill" option value for
border-radius, ensuring design consistency across components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Valera Melnikov 2023-12-13 19:49:03 +03:00 committed by GitHub
parent bf07dc591d
commit 41445c7592
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx
View File

@ -9,7 +9,7 @@ const fontFamilyCss = (fontFamily?: FontFamily) => {
const fontFamilyCss = const fontFamilyCss =
fontFamily && fontFamily !== "System Default" fontFamily && fontFamily !== "System Default"
? `${fontFamily}, sans-serif` ? `${fontFamily}, sans-serif`
: "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu'"; : "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif";
return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`; return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`;
}; };

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

@ -11,7 +11,7 @@
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-2); padding-inline: var(--inner-spacing-3);
padding-block: var(--inner-spacing-2); 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/components/Checkbox/src/styles.module.css
View File

@ -10,7 +10,7 @@
width: var(--sizing-4); width: var(--sizing-4);
height: var(--sizing-4); height: var(--sizing-4);
box-shadow: var(--checkbox-box-shadow); box-shadow: var(--checkbox-box-shadow);
border-radius: clamp(0px, var(--border-radius-1), 6px); border-radius: clamp(0px, var(--border-radius-1), 25%);
color: transparent; color: transparent;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

2
app/client/packages/storybook/src/components/ThemeSettings.tsx
View File

@ -101,7 +101,7 @@ export const ThemeSettings = ({
> >
<option value="0px">Sharp</option> <option value="0px">Sharp</option>
<option value="6px">Rounded</option> <option value="6px">Rounded</option>
<option value="14px">Pill</option> <option value="20px">Pill</option>
</StyledSelect> </StyledSelect>
</Flex> </Flex>
)} )}

2
app/client/src/pages/Editor/WDSThemePropertyPane/constants.ts
View File

@ -31,5 +31,5 @@ export const THEME_SETTINGS_SIZING_OPTIONS = [
export const THEME_SETTINGS_BORDER_RADIUS_OPTIONS = [ export const THEME_SETTINGS_BORDER_RADIUS_OPTIONS = [
{ label: "Sharp", value: "0px" }, { label: "Sharp", value: "0px" },
{ label: "Rounded", value: "6px" }, { label: "Rounded", value: "6px" },
{ label: "Pill", value: "14px" }, { label: "Pill", value: "20px" },
]; ];