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

feat!: Update typography system and values, implement compact theme #803

Merged
merged 30 commits into from
Nov 28, 2023
Merged

feat!: Update typography system and values, implement compact theme #803

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
7b51788
Improve Storybook theme further
VincentSmedinga Nov 22, 2023
dce6aa1
Add new typography tokens for density themes
VincentSmedinga Nov 22, 2023
3121560
Implement new typography tokens to headings and paragraphs
VincentSmedinga Nov 22, 2023
9b82ada
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 22, 2023
4650517
Update storybook/storybook-docs/src/typography.stories.mdx
VincentSmedinga Nov 22, 2023
67f6fb7
Update storybook/storybook-docs/src/typography.stories.mdx
VincentSmedinga Nov 22, 2023
7722de9
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 23, 2023
06b744e
Improve base font size and typographic scales
VincentSmedinga Nov 23, 2023
b9c8b89
Replace font size and line height tokens in all components
VincentSmedinga Nov 23, 2023
192165f
Remove deprecated breakpoint variable
VincentSmedinga Nov 24, 2023
3c7db66
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 24, 2023
c2fba53
Remove obsolete typography tokens
VincentSmedinga Nov 24, 2023
c3c266e
Improve Storybook theme further
VincentSmedinga Nov 26, 2023
e4c5ff4
Clarify explanation of text growing
VincentSmedinga Nov 26, 2023
8e15545
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 27, 2023
e0464e2
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 27, 2023
3187452
Merge branch 'develop' into feature/DES-457-update-typography
VincentSmedinga Nov 27, 2023
531d904
Add missing styles for page heading in compact theme
VincentSmedinga Nov 27, 2023
d74f0d2
Restore table for text level components
VincentSmedinga Nov 27, 2023
fda4506
Remove unnecessary line from documentation
VincentSmedinga Nov 27, 2023
f86a6c5
Rename low and high density to ‘spacious’ and ‘compact’
VincentSmedinga Nov 27, 2023
e9cbd94
Update text sizes to latest font scales
VincentSmedinga Nov 27, 2023
70e09e6
Simplify documentation as per feedback in #771 (after merging)
VincentSmedinga Nov 27, 2023
527d4cb
Revert unintended change to pink text
VincentSmedinga Nov 27, 2023
de680f6
Improve appearance of inline code and apply text sizes more broadly
VincentSmedinga Nov 27, 2023
15c049e
Remove mention of removed typographic breakpoint and make grid docs a…
VincentSmedinga Nov 28, 2023
2e6e113
Increase horizontal whitespace on Storybook wrapper
VincentSmedinga Nov 28, 2023
6e0acfb
Remove unnecessary word
VincentSmedinga Nov 28, 2023
279e417
Use window instead of screen once more
VincentSmedinga Nov 28, 2023
5e4578e
Go easy on the line breaks
VincentSmedinga Nov 28, 2023
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
11 changes: 5 additions & 6 deletions packages/css/src/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

.amsterdam-accordion__header {
display: flex;
margin-block: 0;
Expand All @@ -22,16 +20,17 @@
cursor: pointer;
display: flex;
font-family: var(--amsterdam-accordion-button-font-family);
font-size: var(--amsterdam-accordion-button-narrow-font-size);
font-size: var(--amsterdam-accordion-button-density-low-font-size);
font-weight: var(--amsterdam-accordion-button-font-weight);
justify-content: space-between;
line-height: var(--amsterdam-accordion-button-line-height);
line-height: var(--amsterdam-accordion-button-density-low-line-height);
padding-block: 0.75rem;
padding-inline: 1rem;
width: 100%;

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-accordion-button-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-accordion-button-density-high-font-size);
line-height: var(--amsterdam-accordion-button-density-high-line-height);
}

&:focus {
Expand Down
11 changes: 5 additions & 6 deletions packages/css/src/alert/alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

.amsterdam-alert {
align-items: flex-start;
background-color: var(--amsterdam-alert-background-color);
Expand All @@ -30,12 +28,13 @@
.amsterdam-alert__title {
color: var(--amsterdam-alert-title-color);
font-family: var(--amsterdam-alert-title-font-family);
font-size: var(--amsterdam-alert-title-narrow-font-size);
font-size: var(--amsterdam-alert-title-density-low-font-size);
font-weight: var(--amsterdam-alert-title-font-weight);
line-height: var(--amsterdam-alert-title-line-height);
line-height: var(--amsterdam-alert-title-density-low-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-alert-title-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-alert-title-density-high-font-size);
line-height: var(--amsterdam-alert-title-density-high-line-height);
}

@include reset;
Expand Down
11 changes: 5 additions & 6 deletions packages/css/src/blockquote/blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand All @@ -16,9 +14,9 @@
break-inside: avoid;
color: var(--amsterdam-blockquote-color);
font-family: var(--amsterdam-blockquote-font-family);
font-size: var(--amsterdam-blockquote-narrow-font-size);
font-size: var(--amsterdam-blockquote-density-low-font-size);
font-weight: var(--amsterdam-blockquote-font-weight);
line-height: var(--amsterdam-blockquote-line-height);
line-height: var(--amsterdam-blockquote-density-low-line-height);
quotes: "“" "”";

&::before {
Expand All @@ -29,8 +27,9 @@
content: close-quote;
}

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-blockquote-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-blockquote-density-low-font-size);
line-height: var(--amsterdam-blockquote-density-low-line-height);
}

@include reset;
Expand Down
11 changes: 5 additions & 6 deletions packages/css/src/breadcrumb/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand All @@ -14,12 +12,13 @@

.amsterdam-breadcrumb {
font-family: var(--amsterdam-breadcrumb-font-family, inherit);
font-size: var(--amsterdam-breadcrumb-narrow-font-size);
font-size: var(--amsterdam-breadcrumb-density-low-font-size);
font-weight: var(--amsterdam-breadcrumb-font-weight);
line-height: var(--amsterdam-breadcrumb-line-height);
line-height: var(--amsterdam-breadcrumb-density-low-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-breadcrumb-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-breadcrumb-density-low-font-size);
line-height: var(--amsterdam-breadcrumb-density-low-line-height);
}
}

Expand Down
13 changes: 7 additions & 6 deletions packages/css/src/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@
*/

@import "../../node_modules/@utrecht/components/button/css";
@import "../../utils/breakpoint";

@mixin reset {
-webkit-text-size-adjust: 100%;
}

.amsterdam-button {
font-size: var(--amsterdam-button-narrow-font-size);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-button-wide-font-size);
}
font-size: var(--amsterdam-button-density-low-font-size);
line-height: var(--amsterdam-button-density-low-line-height);

@include reset;

.amsterdam-theme--density-high & {
font-size: var(--amsterdam-breadcrumb-density-high-font-size);
line-height: var(--amsterdam-breadcrumb-density-high-line-height);
}
}

.amsterdam-button--secondary {
Expand Down
17 changes: 8 additions & 9 deletions packages/css/src/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

.amsterdam-checkbox__input {
appearance: none;
margin-block: 0;
Expand All @@ -21,7 +19,7 @@
align-items: center;
display: flex;
flex-shrink: 0;
height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
height: calc(var(--amsterdam-checkbox-density-low-font-size) * var(--amsterdam-checkbox-density-low-line-height));
width: 1.5rem;

&::after {
Expand All @@ -34,8 +32,8 @@
width: 100%;
}

@media screen and (min-width: $amsterdam-breakpoint-typography) {
height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
.amsterdam-theme--density-high & {
height: calc(var(--amsterdam-checkbox-density-high-font-size) * var(--amsterdam-checkbox-density-high-line-height));
}
}

Expand All @@ -48,10 +46,10 @@
cursor: pointer;
display: inline-flex;
font-family: var(--amsterdam-checkbox-font-family);
font-size: var(--amsterdam-checkbox-narrow-font-size);
font-size: var(--amsterdam-checkbox-density-low-font-size);
font-weight: 400;
gap: 0.5rem;
line-height: var(--amsterdam-checkbox-line-height);
line-height: var(--amsterdam-checkbox-density-low-line-height);

&:hover {
color: var(--amsterdam-checkbox-hover-color);
Expand All @@ -65,8 +63,9 @@
}
}

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-checkbox-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-checkbox-density-high-font-size);
line-height: var(--amsterdam-checkbox-density-high-line-height);
}

@include reset;
Expand Down
9 changes: 5 additions & 4 deletions packages/css/src/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,13 @@
color: var(--amsterdam-dialog-title-color);
flex: auto;
font-family: var(--amsterdam-dialog-title-font-family);
font-size: var(--amsterdam-dialog-title-narrow-font-size);
font-size: var(--amsterdam-dialog-title-density-low-font-size);
font-weight: var(--amsterdam-dialog-title-font-weight);
line-height: var(--amsterdam-dialog-title-line-height);
line-height: var(--amsterdam-dialog-title-density-low-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-dialog-title-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-dialog-title-density-high-font-size);
line-height: var(--amsterdam-dialog-title-density-high-line-height);
}

@include reset;
Expand Down
15 changes: 7 additions & 8 deletions packages/css/src/form-label/form-label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,21 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

@mixin reset {
-webkit-text-size-adjust: 100%;
}

.amsterdam-form-label {
color: var(--amsterdam-form-label-color);
font-family: var(--amsterdam-form-label-font-family);
font-size: var(--amsterdam-form-label-narrow-font-size);
font-size: var(--amsterdam-form-label-density-low-font-size);
font-weight: var(--amsterdam-form-label-font-weight);
line-height: var(--amsterdam-form-label-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-form-label-wide-font-size);
}
line-height: var(--amsterdam-form-label-density-low-line-height);

@include reset;

.amsterdam-theme--density-high & {
font-size: var(--amsterdam-form-label-density-high-font-size);
line-height: var(--amsterdam-form-label-density-high-line-height);
}
}
38 changes: 20 additions & 18 deletions packages/css/src/heading/heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../utils/breakpoint";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand All @@ -22,38 +20,42 @@
}

.amsterdam-heading--1 {
font-size: var(--amsterdam-heading-1-narrow-font-size);
line-height: var(--amsterdam-heading-1-line-height);
font-size: var(--amsterdam-heading-density-low-level-1-font-size);
line-height: var(--amsterdam-heading-density-low-level-1-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-heading-1-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-heading-density-high-level-1-font-size);
line-height: var(--amsterdam-heading-density-high-level-1-line-height);
}
}

.amsterdam-heading--2 {
font-size: var(--amsterdam-heading-2-narrow-font-size);
line-height: var(--amsterdam-heading-2-line-height);
font-size: var(--amsterdam-heading-density-low-level-2-font-size);
line-height: var(--amsterdam-heading-density-low-level-2-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-heading-2-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-heading-density-high-level-2-font-size);
line-height: var(--amsterdam-heading-density-high-level-2-line-height);
}
}

.amsterdam-heading--3 {
font-size: var(--amsterdam-heading-3-narrow-font-size);
line-height: var(--amsterdam-heading-3-line-height);
font-size: var(--amsterdam-heading-density-low-level-3-font-size);
line-height: var(--amsterdam-heading-density-low-level-3-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-heading-3-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-heading-density-high-level-3-font-size);
line-height: var(--amsterdam-heading-density-high-level-3-line-height);
}
}

.amsterdam-heading--4 {
font-size: var(--amsterdam-heading-4-narrow-font-size);
line-height: var(--amsterdam-heading-4-line-height);
font-size: var(--amsterdam-heading-density-low-level-4-font-size);
line-height: var(--amsterdam-heading-density-low-level-4-line-height);

@media screen and (min-width: $amsterdam-breakpoint-typography) {
font-size: var(--amsterdam-heading-4-wide-font-size);
.amsterdam-theme--density-high & {
font-size: var(--amsterdam-heading-density-high-level-4-font-size);
line-height: var(--amsterdam-heading-density-high-level-4-line-height);
}
}

Expand Down
Loading