Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(design-tokens): DSYS-819 | update typography tokens #2717

Merged
merged 6 commits into from
Oct 15, 2024
Merged

chore(design-tokens): DSYS-819 | update typography tokens #2717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c61d10c
chore: * remove 'typography' infix from typography tokens.
sirineJ Oct 13, 2024
2ae47c9
chore: changeset
sirineJ Oct 14, 2024
6af94b7
add new sizes for the list component
sirineJ Oct 14, 2024
fa070b4
use correct letter-spacing value
sirineJ Oct 14, 2024
06e5f52
add new semibold font-weight token
sirineJ Oct 15, 2024
5210a3f
missing classes
sirineJ Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dry-melons-bake.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@sumup-oss/design-tokens": minor
---

Updated several typography token values and replaced the component-specific letter spacing tokens with a unified one.
8 changes: 8 additions & 0 deletions .changeset/lazy-icons-beg.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@sumup-oss/stylelint-plugin-circuit-ui": minor
"@sumup-oss/eslint-plugin-circuit-ui": minor
"@sumup-oss/circuit-ui": minor
"@sumup-oss/design-tokens": minor
---

Updated new typography design tokens names by removing the `-typography` infix.
6 changes: 6 additions & 0 deletions .changeset/shiny-pumpkins-jog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@sumup-oss/eslint-plugin-circuit-ui": minor
"@sumup-oss/circuit-ui": minor
---

Introduced new sizes to the List component and deprecated old sizes. Updated `no-renamed-props` ESlint rule.
22 changes: 17 additions & 5 deletions .storybook/components/Theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,12 @@ type CustomProperties = CustomProperty[];
type PreviewProps = { name: CustomPropertyName };
type PreviewComponent = ComponentType<PreviewProps>;

function filterCustomProperties(namespace: string, type?: string) {
function filterCustomProperties(namespace: string | string[], type?: string) {
return schema.filter((token) => {
const isNamespace = token.name.startsWith(`--cui-${namespace}`);
const isNamespace =
typeof namespace === 'string'
? token.name.startsWith(`--cui-${namespace}`)
: namespace.some((ns) => token.name.startsWith(`--cui-${ns}`));
const isType = type ? token.type === type : true;
return isNamespace && isType;
});
Expand Down Expand Up @@ -79,8 +82,17 @@ function getRows(
{
children: (
<div style={{ display: 'flex' }}>
<code style={{ whiteSpace: 'nowrap' }}>{name}</code>
<CopyButton name={name} />
<code
style={{
whiteSpace: 'nowrap',
maxWidth: '320px',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
{name}
</code>
{!deprecation && <CopyButton name={name} />}
sirineJ marked this conversation as resolved.
Show resolved Hide resolved
{deprecation && (
<Tooltip
type="description"
Expand Down Expand Up @@ -115,7 +127,7 @@ function getRows(
}

interface CustomPropertiesTableProps {
namespace: string;
namespace: string | string[];
preview?: PreviewComponent;
type?: string;
}
Expand Down
17 changes: 13 additions & 4 deletions docs/features/1-theme.mdx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this file was formatted with different settings from Biome's formatting defaults 🤔

Tab-width should be 2 spaces and there should be a space between the props and JSX closing tag.

Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {
Intro,
Meta,
Preview,
MediaQueriesTable,
CustomPropertiesTable,
Color,
Expand Down Expand Up @@ -61,9 +60,19 @@ Use spacings for gutters, margins, and paddings. Don't use it for border width,

## Typography

Avoid using the `var(--cui-typography-*)` CSS custom properties directly in your styles. Instead, use the typography components [`Display`](Typography/Display/Docs), [`Headline`](Typography/Headline/Docs), and [`Body`](Typography/Body/Docs).
Avoid using the typography CSS custom properties directly in your styles. Instead, use the typography components [`Display`](Typography/Display/Docs), [`Headline`](Typography/Headline/Docs), [`Body`](Typography/Body/Docs) and [`Numeral`](Typography/Numeral/Docs).

<CustomPropertiesTable namespace="typography" preview={Typography} />
<CustomPropertiesTable
namespace={[
'body',
'display',
'headline',
'compact',
'numeral',
'typography',
]}
preview={Typography}
/>

## Font stack

Expand All @@ -73,7 +82,7 @@ Avoid using the `var(--cui-typography-*)` CSS custom properties directly in your

<CustomPropertiesTable namespace="font-weight" preview={FontWeight} />

Pass `variant="highlight"` to the `Body` component to make it bold. The font weight of the `Title`, `Headline` and `SubHeadline` components is bold by default and should not be overwritten.
Pass the `weight` prop to the `Body` component to adjust its font-weight styling. The font weight of the `Display`, `Headline` and the `Numeral` components is bold by default and should not be overwritten.
sirineJ marked this conversation as resolved.
Show resolved Hide resolved

## Transitions

Expand Down
4 changes: 2 additions & 2 deletions packages/circuit-ui/components/Badge/Badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.base {
display: inline-block;
padding: 2px var(--cui-spacings-byte);
font-size: var(--cui-typography-body-s-font-size);
font-size: var(--cui-body-s-font-size);
font-weight: var(--cui-font-weight-bold);
line-height: var(--cui-typography-body-s-line-height);
line-height: var(--cui-body-s-line-height);
text-align: center;
letter-spacing: 0.25px;
border-radius: var(--cui-border-radius-pill);
Expand Down
19 changes: 10 additions & 9 deletions packages/circuit-ui/components/Body/Body.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
.base {
sirineJ marked this conversation as resolved.
Show resolved Hide resolved
letter-spacing: var(--cui-letter-spacing);
}

/* Sizes */

.l {
font-size: var(--cui-typography-body-l-font-size);
line-height: var(--cui-typography-body-l-line-height);
letter-spacing: var(--cui-typography-body-l-letter-spacing);
font-size: var(--cui-body-l-font-size);
line-height: var(--cui-body-l-line-height);
}

.m {
font-size: var(--cui-typography-body-m-font-size);
line-height: var(--cui-typography-body-m-line-height);
letter-spacing: var(--cui-typography-body-m-letter-spacing);
font-size: var(--cui-body-m-font-size);
line-height: var(--cui-body-m-line-height);
}

.s {
font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
letter-spacing: var(--cui-typography-body-s-letter-spacing);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
}

/* Weights */
Expand Down
3 changes: 2 additions & 1 deletion packages/circuit-ui/components/Body/Body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function getHTMLElement(variant?: Variant): AsPropType {
return 'p';
}

const deprecatedSizeMap: Record<string, string> = {
export const deprecatedSizeMap: Record<string, string> = {
'one': 'm',
'two': 's',
};
Expand Down Expand Up @@ -152,6 +152,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
{...props}
ref={ref}
className={clsx(
classes.base,
classes[size],
classes[weight],
classes[color],
Expand Down
10 changes: 5 additions & 5 deletions packages/circuit-ui/components/Button/base.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
width: auto;
height: auto;
margin: 0;
font-size: var(--cui-typography-body-m-font-size);
font-size: var(--cui-body-m-font-size);
font-weight: var(--cui-font-weight-bold);
text-align: center;
text-decoration: none;
Expand Down Expand Up @@ -165,8 +165,8 @@
--loader-gap: 3px;
--loader-transform: scale(150%);

font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
border-radius: var(--cui-border-radius-byte);
}

Expand All @@ -177,8 +177,8 @@
--loader-gap: 5px;
--loader-transform: scale(133%);

font-size: var(--cui-typography-body-m-font-size);
line-height: var(--cui-typography-body-m-line-height);
font-size: var(--cui-body-m-font-size);
line-height: var(--cui-body-m-line-height);
border-radius: var(--cui-border-radius-byte);
}

Expand Down
8 changes: 4 additions & 4 deletions packages/circuit-ui/components/Calendar/Calendar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,19 +80,19 @@
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
font-size: var(--cui-typography-body-m-font-size);
font-size: var(--cui-body-m-font-size);
font-weight: var(--cui-font-weight-bold);
line-height: var(--cui-typography-body-m-line-height);
line-height: var(--cui-body-m-line-height);
}

.day {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
padding: 0;
font-size: var(--cui-typography-body-m-font-size);
font-size: var(--cui-body-m-font-size);
font-variant-numeric: tabular-nums;
line-height: var(--cui-typography-body-m-line-height);
line-height: var(--cui-body-m-line-height);
color: var(--cui-fg-normal);
touch-action: manipulation;
cursor: pointer;
Expand Down
4 changes: 2 additions & 2 deletions packages/circuit-ui/components/Carousel/components/Status/Status.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@media (max-width: 479px) {
.base {
font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
}
}
2 changes: 1 addition & 1 deletion packages/circuit-ui/components/Checkbox/Checkbox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

.base + .label::before {
position: absolute;
top: calc(var(--cui-typography-body-m-line-height) / 2);
top: calc(var(--cui-body-m-line-height) / 2);
left: 0;
box-sizing: border-box;
display: block;
Expand Down
4 changes: 2 additions & 2 deletions packages/circuit-ui/components/Checkbox/Checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ export const Indeterminate = (args: {
style={{
display: 'block',
marginBottom: 'var(--cui-spacings-bit)',
fontSize: 'var(--cui-typography-body-s-font-size)',
lineHeight: 'var(--cui-typography-body-s-line-height)',
fontSize: 'var(--cui-body-s-font-size)',
lineHeight: 'var(--cui-body-s-line-height)',
}}
>
{label}
Expand Down
19 changes: 10 additions & 9 deletions packages/circuit-ui/components/Compact/Compact.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
.base {
sirineJ marked this conversation as resolved.
Show resolved Hide resolved
letter-spacing: var(--cui-letter-spacing);
}

/* Sizes */

.l {
font-size: var(--cui-typography-compact-l-font-size);
line-height: var(--cui-typography-compact-l-line-height);
letter-spacing: var(--cui-typography-compact-l-letter-spacing);
font-size: var(--cui-compact-l-font-size);
line-height: var(--cui-compact-l-line-height);
}

.m {
font-size: var(--cui-typography-compact-m-font-size);
line-height: var(--cui-typography-compact-m-line-height);
letter-spacing: var(--cui-typography-compact-m-letter-spacing);
font-size: var(--cui-compact-m-font-size);
line-height: var(--cui-compact-m-line-height);
}

.s {
font-size: var(--cui-typography-compact-s-font-size);
line-height: var(--cui-typography-compact-s-line-height);
letter-spacing: var(--cui-typography-compact-s-letter-spacing);
font-size: var(--cui-compact-s-font-size);
line-height: var(--cui-compact-s-line-height);
}

/* Weights */
Expand Down
1 change: 1 addition & 0 deletions packages/circuit-ui/components/Compact/Compact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export const Compact = forwardRef<HTMLParagraphElement, CompactProps>(
{...props}
ref={ref}
className={clsx(
classes.base,
classes[size],
classes[weight],
classes[color],
Expand Down
17 changes: 7 additions & 10 deletions packages/circuit-ui/components/Display/Display.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
.base {
font-weight: var(--cui-font-weight-bold);
color: var(--cui-fg-normal);
letter-spacing: -0.03em;
letter-spacing: var(--cui-letter-spacing);
}

/* Sizes */

.l {
font-size: var(--cui-typography-display-l-font-size);
line-height: var(--cui-typography-display-l-line-height);
letter-spacing: var(--cui-typography-display-l-letter-spacing);
font-size: var(--cui-display-l-font-size);
line-height: var(--cui-display-l-line-height);
}

.m {
font-size: var(--cui-typography-display-m-font-size);
line-height: var(--cui-typography-display-m-line-height);
letter-spacing: var(--cui-typography-display-m-letter-spacing);
font-size: var(--cui-display-m-font-size);
line-height: var(--cui-display-m-line-height);
}

.s {
font-size: var(--cui-typography-display-s-font-size);
line-height: var(--cui-typography-display-s-line-height);
letter-spacing: var(--cui-typography-display-s-letter-spacing);
font-size: var(--cui-display-s-font-size);
line-height: var(--cui-display-s-line-height);
}
14 changes: 7 additions & 7 deletions packages/circuit-ui/components/Field/Field.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
.label,
.legend {
display: block;
font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
}

.label-text {
Expand All @@ -33,8 +33,8 @@

.description {
display: block;
font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
color: var(--cui-fg-subtle);
}

Expand All @@ -46,8 +46,8 @@
.validation-hint {
display: flex;
margin-top: var(--cui-spacings-bit);
font-size: var(--cui-typography-body-s-font-size);
line-height: var(--cui-typography-body-s-line-height);
font-size: var(--cui-body-s-font-size);
line-height: var(--cui-body-s-line-height);
color: var(--cui-fg-subtle);
transition: color var(--cui-transitions-default);
}
Expand Down Expand Up @@ -91,7 +91,7 @@
width: var(--cui-icon-sizes-kilo);
height: var(--cui-icon-sizes-kilo);
margin-top: calc(
(var(--cui-typography-body-s-line-height) - var(--cui-icon-sizes-kilo)) / 2
(var(--cui-body-s-line-height) - var(--cui-icon-sizes-kilo)) / 2
);
margin-right: var(--cui-spacings-bit);
}
17 changes: 7 additions & 10 deletions packages/circuit-ui/components/Headline/Headline.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
.base {
font-weight: var(--cui-font-weight-bold);
color: var(--cui-fg-normal);
letter-spacing: -0.03em;
letter-spacing: var(--cui-letter-spacing);
}

/* Sizes */

.l {
font-size: var(--cui-typography-headline-l-font-size);
line-height: var(--cui-typography-headline-l-line-height);
letter-spacing: var(--cui-typography-headline-l-letter-spacing);
font-size: var(--cui-headline-l-font-size);
line-height: var(--cui-headline-l-line-height);
}

.m {
font-size: var(--cui-typography-headline-m-font-size);
line-height: var(--cui-typography-headline-m-line-height);
letter-spacing: var(--cui-typography-headline-m-letter-spacing);
font-size: var(--cui-headline-m-font-size);
line-height: var(--cui-headline-m-line-height);
}

.s {
font-size: var(--cui-typography-headline-s-font-size);
line-height: var(--cui-typography-headline-s-line-height);
letter-spacing: var(--cui-typography-headline-s-letter-spacing);
font-size: var(--cui-headline-s-font-size);
line-height: var(--cui-headline-s-line-height);
}
Loading
Loading