Skip to content

Commit 00e131b

Browse files
committed
chore(design-system)!: set base font-size to 62.5% to be 10px (#1486)
* chore(design-system)!: set base font-size to 62.5% to be 10px * chore: add breaking changes doc * chore: fix snapshots
1 parent 9e68153 commit 00e131b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+493
-486
lines changed

.changeset/soft-nails-matter.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@strapi/design-system': major
3+
---
4+
5+
refactor!(design-system): set base font-size to 62.5% to be 10px, users should stop dividing their px values by 16 and instead divide by 10. This will make it easier to convert px to rem.

BREAKING_CHANGES.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,7 @@ Users can no longer `import { Combobox } from '@strapi/design-system/Combobox'`,
1313
### Published types
1414

1515
`@strapi/design-system` now comes with typescript definitions. This means you can remove any overrides you may have. They've been tested against the CMS, if you feel there are mistakes, please open a PR to fix them.
16+
17+
### Change font-size on html,body to 62.5%
18+
19+
The base font-size for the app is now 10px, so 1rem = 10px. This means that users should stop dividing their px values by 16 and instead divide by 10. This will make it easier to convert px to rem.

docs/stories/Icon.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ type Story = StoryObj<typeof Icon>;
1414
export const Base = {
1515
render: () => (
1616
<Flex gap={3}>
17-
<Icon width={`${25 / 16}rem`} height={`${25 / 16}rem`} color="secondary500" as={Pencil} />
18-
<Icon width={`${15 / 16}rem`} height={`${15 / 16}rem`} color="alternative500" as={Play} />
19-
<Icon width={`${30 / 16}rem`} height={`${30 / 16}rem`} color="danger500" as={Trash} />
17+
<Icon width={`2.5rem`} height={`2.5rem`} color="secondary500" as={Pencil} />
18+
<Icon width={`1.5rem`} height={`1.5rem`} color="alternative500" as={Play} />
19+
<Icon width={`3rem`} height={`3rem`} color="danger500" as={Trash} />
2020
<Icon as={Plus} />
2121
</Flex>
2222
),

packages/strapi-design-system/src/Accordion/AccordionToggle.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const ToggleButton = styled(TextButton)<{ expanded: boolean }>`
2020
}
2121
2222
svg {
23-
width: ${14 / 16}rem;
24-
height: ${14 / 16}rem;
23+
width: 1.4rem;
24+
height: 1.4rem;
2525
2626
path {
2727
fill: ${({ theme, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
@@ -93,7 +93,7 @@ export const AccordionToggle = ({
9393
};
9494
const descriptionColor = expanded ? 'primary600' : 'neutral600';
9595
const iconColor = expanded ? 'primary200' : 'neutral200';
96-
const iconSize = size === 'M' ? `${32 / 16}rem` : `${24 / 16}rem`;
96+
const iconSize = size === 'M' ? `3.2rem` : `2.4rem`;
9797

9898
const handleToggle = () => {
9999
if (!disabled) {
@@ -123,11 +123,7 @@ export const AccordionToggle = ({
123123
onClick={handleToggle}
124124
shrink={0}
125125
>
126-
<Icon
127-
as={CarretDown}
128-
width={size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`}
129-
color={expanded ? 'primary600' : 'neutral600'}
130-
/>
126+
<Icon as={CarretDown} width={size === 'M' ? `1.1rem` : `0.8rem`} color={expanded ? 'primary600' : 'neutral600'} />
131127
</Flex>
132128
);
133129

packages/strapi-design-system/src/Alert/Alert.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const Alert = ({
115115
variant={variant}
116116
{...props}
117117
>
118-
<AlertIconWrapper height={`${20 / 16}rem`} shrink={0} variant={variant} width={`${20 / 16}rem`}>
118+
<AlertIconWrapper height="2rem" shrink={0} variant={variant} width="2rem">
119119
<AlertIcon aria-hidden variant={variant} />
120120
</AlertIconWrapper>
121121

@@ -143,10 +143,10 @@ export const Alert = ({
143143
as="button"
144144
background="transparent"
145145
borderColor={undefined}
146-
height={`${12 / 16}rem`}
146+
height="1.2rem"
147+
width="1.2rem"
147148
marginTop={1}
148149
onClick={onClose}
149-
width={`${12 / 16}rem`}
150150
aria-label={closeLabel}
151151
>
152152
<Cross aria-hidden />

packages/strapi-design-system/src/Breadcrumbs/Breadcrumbs.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import { VisuallyHidden } from '../VisuallyHidden';
1010

1111
const CrumbWrapper = styled(Flex)`
1212
svg {
13-
height: ${10 / 16}rem;
14-
width: ${10 / 16}rem;
13+
height: 1rem;
14+
width: 1rem;
15+
1516
path {
1617
fill: ${({ theme }) => theme.colors.neutral500};
1718
}

packages/strapi-design-system/src/Button/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const ButtonWrapper = styled(BaseButton)<Required<Pick<ButtonProps, 'size
2828
height: ${({ theme, size }) => theme.sizes.button[size]};
2929
3030
svg {
31-
height: ${12 / 16}rem;
31+
height: 1.2rem;
3232
width: auto;
3333
}
3434

packages/strapi-design-system/src/Card/CardAsset.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ const CardAssetImg = styled.img`
1616
`;
1717

1818
const sizes = {
19-
S: 88,
20-
M: 164,
19+
S: 8.8,
20+
M: 16.4,
2121
};
2222

2323
const CardAssetWrapper = styled.div<{ size: CardAssetSizes }>`
2424
display: flex;
2525
justify-content: center;
26-
height: ${({ size }) => sizes[size] / 16}rem;
26+
height: ${({ size }) => `${sizes[size]}rem`};
2727
width: 100%;
2828
background: repeating-conic-gradient(${({ theme }) => theme.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
2929
20px;

packages/strapi-design-system/src/Combobox/Combobox.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -330,8 +330,8 @@ const IconBox = styled(Box)`
330330
border: none;
331331
332332
svg {
333-
height: ${11 / 16}rem;
334-
width: ${11 / 16}rem;
333+
height: 1.1rem;
334+
width: 1.1rem;
335335
}
336336
337337
svg path {
@@ -374,7 +374,7 @@ const Trigger = styled(ComboboxPrimitive.Trigger)<TriggerProps>`
374374

375375
const TextInput = styled(ComboboxPrimitive.TextInput)`
376376
width: 100%;
377-
font-size: ${14 / 16}rem;
377+
font-size: 1.4rem;
378378
color: ${({ theme }) => theme.colors.neutral800};
379379
padding: 0;
380380
border: none;
@@ -391,7 +391,7 @@ const TextInput = styled(ComboboxPrimitive.TextInput)`
391391

392392
const DownIcon = styled(ComboboxPrimitive.Icon)`
393393
& > svg {
394-
width: ${6 / 16}rem;
394+
width: 0.6rem;
395395
396396
& > path {
397397
fill: ${({ theme }) => theme.colors.neutral600};

packages/strapi-design-system/src/DatePicker/DatePicker.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -476,8 +476,8 @@ const IconBox = styled(Box)`
476476
border: none;
477477
478478
svg {
479-
height: ${11 / 16}rem;
480-
width: ${11 / 16}rem;
479+
height: 1.1rem;
480+
width: 1.1rem;
481481
}
482482
483483
svg path {
@@ -766,7 +766,7 @@ function constrainValue(date: CalendarDate, minValue: CalendarDate, maxValue: Ca
766766

767767
const Input = styled.input`
768768
width: 100%;
769-
font-size: ${14 / 16}rem;
769+
font-size: 1.4rem;
770770
color: ${({ theme }) => theme.colors.neutral800};
771771
height: 100%;
772772
border: none;
@@ -1125,7 +1125,7 @@ interface HeaderCellProps extends Omit<BoxProps<'td'>, 'children'> {
11251125
const DatePickerHeaderCell = React.forwardRef<HTMLTableCellElement, HeaderCellProps>(
11261126
({ children, ...props }, forwardedRef) => {
11271127
return (
1128-
<Th as="th" role="gridcell" ref={forwardedRef} {...props} height={`${24 / 16}rem`} width={`${32 / 16}rem`}>
1128+
<Th as="th" role="gridcell" ref={forwardedRef} {...props} height="2.4rem" width="3.2rem">
11291129
<Typography variant="pi" fontWeight="bold" color="neutral800">
11301130
{children.slice(0, 2)}
11311131
</Typography>
@@ -1225,7 +1225,7 @@ const DatePickerCalendarCell = React.forwardRef<DatePickerCalendarCellElement, C
12251225

12261226
const Cell = styled(Box)`
12271227
text-align: center;
1228-
padding: ${7 / 16}rem;
1228+
padding: 0.7rem;
12291229
// Trick to prevent the outline from overflowing because of the general outline-offset
12301230
outline-offset: -2px !important;
12311231

packages/strapi-design-system/src/Dialog/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const DialogWrapper = styled(Box)`
1818
`;
1919

2020
const DialogContainer = styled(Box)`
21-
max-width: ${412 / 16}rem;
21+
max-width: 41.2rem;
2222
margin: 0 auto;
2323
overflow: hidden;
2424
margin-top: 10%;

packages/strapi-design-system/src/EmptyStateLayout/EmptyStateLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface EmptyStateLayoutProps extends Pick<FlexProps, 'hasRadius' | 'sh
1212

1313
const EmptyStateIconWrapper = styled(Box)`
1414
svg {
15-
height: ${88 / 16}rem;
15+
height: 8.8rem;
1616
}
1717
`;
1818

packages/strapi-design-system/src/Field/FieldInput.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { inputFocusStyle } from '../themes/utils';
99

1010
// padding-[top|bottom] must ensure, the input matches the height of getThemeSize('input')
1111
const PADDING_Y = {
12-
S: 6.5,
13-
M: 10.5,
12+
S: 0.6,
13+
M: 1,
1414
} as const;
1515

1616
export interface FieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -83,10 +83,10 @@ interface InputProps {
8383
const Input = styled.input<InputProps>`
8484
border: none;
8585
border-radius: ${({ theme }) => theme.borderRadius};
86-
padding-bottom: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
86+
padding-bottom: ${({ $size }) => `${PADDING_Y[$size]}rem`};
8787
padding-left: ${({ theme, hasLeftAction }) => (hasLeftAction ? 0 : theme.spaces[4])};
8888
padding-right: ${({ theme, hasRightAction }) => (hasRightAction ? 0 : theme.spaces[4])};
89-
padding-top: ${({ $size }) => `${PADDING_Y[$size] / 16}rem`};
89+
padding-top: ${({ $size }) => `${PADDING_Y[$size]}rem`};
9090
cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : undefined)};
9191
9292
color: ${({ theme }) => theme.colors.neutral800};

packages/strapi-design-system/src/Layout/HeaderLayout.tsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { useState, useRef, useEffect } from 'react';
22

3-
import styled from 'styled-components';
4-
53
import { Box } from '../Box';
64
import { Flex } from '../Flex';
75
import { useElementOnScreen } from '../hooks/useElementOnScreen';
@@ -54,18 +52,13 @@ export const HeaderLayout = (props: HeaderLayoutProps) => {
5452

5553
HeaderLayout.displayName = 'HeaderLayout';
5654

57-
const StickyBox = styled(Box)<{ width?: number }>`
58-
width: ${({ width }) => (width ? `${width / 16}rem` : undefined)};
59-
z-index: ${({ theme }) => theme.zIndices[1]};
60-
`;
61-
6255
export const BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayoutProps>(
6356
({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
6457
const isSubtitleString = typeof subtitle === 'string';
6558

6659
if (sticky) {
6760
return (
68-
<StickyBox
61+
<Box
6962
paddingLeft={6}
7063
paddingRight={6}
7164
paddingTop={3}
@@ -75,7 +68,8 @@ export const BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayou
7568
right={0}
7669
background="neutral0"
7770
shadow="tableShadow"
78-
width={width}
71+
width={`${width}rem`}
72+
zIndex={1}
7973
data-strapi-header-sticky
8074
>
8175
<Flex justifyContent="space-between">
@@ -97,7 +91,7 @@ export const BaseHeaderLayout = React.forwardRef<HTMLDivElement, BaseHeaderLayou
9791
</Flex>
9892
<Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>
9993
</Flex>
100-
</StickyBox>
94+
</Box>
10195
);
10296
}
10397

packages/strapi-design-system/src/Link/Link.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const LinkWrapper = styled.a<{ disabled: boolean }>`
2121
}
2222
2323
svg {
24-
font-size: ${10 / 16}rem;
24+
font-size: 1rem;
2525
}
2626
2727
${Typography} {

packages/strapi-design-system/src/MainNav/MainNav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface MainNavProps extends FlexProps {
1010
}
1111

1212
const MainNavWrapper = styled(Flex)<MainNavProps>`
13-
width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
13+
width: ${({ condensed }) => (condensed ? 'max-content' : `22.4rem`)};
1414
border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
1515
`;
1616

packages/strapi-design-system/src/MainNav/NavBrand.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ const BrandIconWrapper = styled.div<{ condensed?: boolean }>`
2121
img {
2222
border-radius: ${({ theme }) => theme.borderRadius};
2323
object-fit: contain;
24-
height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
25-
width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
24+
height: ${({ condensed }) => (condensed ? `4rem` : `3.2rem`)};
25+
width: ${({ condensed }) => (condensed ? `4rem` : `3.2rem`)};
2626
}
2727
`;
2828

packages/strapi-design-system/src/MainNav/NavCondense.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@ const NavCondenseWrapper = styled.button<NavCondenseWrapperButtonProps>`
2323
align-items: center;
2424
justify-content: center;
2525
position: absolute;
26-
bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
26+
bottom: 1.3rem;
2727
right: ${({ theme, condensed }) => (condensed ? 0 : theme.spaces[5])};
2828
transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
2929
z-index: 2;
30-
width: ${18 / 16}rem;
31-
height: ${25 / 16}rem;
30+
width: 1.8rem;
31+
height: 2.5rem;
3232
3333
svg {
34-
width: ${6 / 16}rem;
35-
height: ${9 / 16}rem;
34+
width: 0.6rem;
35+
height: 0.9rem;
3636
}
3737
`;
3838

packages/strapi-design-system/src/MainNav/NavUser.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const NavUser = React.forwardRef<HTMLButtonElement, NavUserProps>(
3131
<span>{children}</span>
3232
</VisuallyHidden>
3333
) : (
34-
<Box width={`${130 / 16}rem`} paddingLeft={2} as="span">
34+
<Box width="13rem" paddingLeft={2} as="span">
3535
<Typography ellipsis textColor="neutral600">
3636
{children}
3737
</Typography>

packages/strapi-design-system/src/ModalLayout/ModalLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const ModalLayout = ({ onClose, labelledBy, ...props }: ModalLayoutProps)
3535
hasRadius
3636
role="dialog"
3737
shadow="popupShadow"
38-
width={`${830 / 16}rem`}
38+
width="83rem"
3939
{...props}
4040
/>
4141
</DismissibleLayer>

0 commit comments

Comments
 (0)