diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss index ee17a369a0..e16d2f0cc8 100644 --- a/packages/css/src/accordion/accordion.scss +++ b/packages/css/src/accordion/accordion.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - .amsterdam-accordion__header { display: flex; margin-block: 0; @@ -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-spacious-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-spacious-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--compact & { + font-size: var(--amsterdam-accordion-button-compact-font-size); + line-height: var(--amsterdam-accordion-button-compact-line-height); } &:focus { diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss index 92a5ac54b9..06627ca2bb 100644 --- a/packages/css/src/alert/alert.scss +++ b/packages/css/src/alert/alert.scss @@ -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); @@ -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-spacious-font-size); font-weight: var(--amsterdam-alert-title-font-weight); - line-height: var(--amsterdam-alert-title-line-height); + line-height: var(--amsterdam-alert-title-spacious-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-alert-title-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-alert-title-compact-font-size); + line-height: var(--amsterdam-alert-title-compact-line-height); } @include reset; diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss index 5aa9d9c53b..66454349d4 100644 --- a/packages/css/src/blockquote/blockquote.scss +++ b/packages/css/src/blockquote/blockquote.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { box-sizing: border-box; margin-block: 0; @@ -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-spacious-font-size); font-weight: var(--amsterdam-blockquote-font-weight); - line-height: var(--amsterdam-blockquote-line-height); + line-height: var(--amsterdam-blockquote-spacious-line-height); quotes: "“" "”"; &::before { @@ -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--compact & { + font-size: var(--amsterdam-blockquote-spacious-font-size); + line-height: var(--amsterdam-blockquote-spacious-line-height); } @include reset; diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss index 13ad8a8555..980bf6e65c 100644 --- a/packages/css/src/breadcrumb/breadcrumb.scss +++ b/packages/css/src/breadcrumb/breadcrumb.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { box-sizing: border-box; margin-block: 0; @@ -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-spacious-font-size); font-weight: var(--amsterdam-breadcrumb-font-weight); - line-height: var(--amsterdam-breadcrumb-line-height); + line-height: var(--amsterdam-breadcrumb-spacious-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-breadcrumb-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-breadcrumb-compact-font-size); + line-height: var(--amsterdam-breadcrumb-compact-line-height); } } diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss index b026d87054..424f61a73f 100644 --- a/packages/css/src/button/button.scss +++ b/packages/css/src/button/button.scss @@ -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-spacious-font-size); + line-height: var(--amsterdam-button-spacious-line-height); @include reset; + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-breadcrumb-compact-font-size); + line-height: var(--amsterdam-breadcrumb-compact-line-height); + } } .amsterdam-button--secondary { diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss index fc9afd555e..974a0bbcf0 100644 --- a/packages/css/src/checkbox/checkbox.scss +++ b/packages/css/src/checkbox/checkbox.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - .amsterdam-checkbox__input { appearance: none; margin-block: 0; @@ -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-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height)); width: 1.5rem; &::after { @@ -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--compact & { + height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height)); } } @@ -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-spacious-font-size); font-weight: 400; gap: 0.5rem; - line-height: var(--amsterdam-checkbox-line-height); + line-height: var(--amsterdam-checkbox-spacious-line-height); &:hover { color: var(--amsterdam-checkbox-hover-color); @@ -65,8 +63,9 @@ } } - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-checkbox-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-checkbox-compact-font-size); + line-height: var(--amsterdam-checkbox-compact-line-height); } @include reset; diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss index 7259222b25..b23984acff 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/dialog/dialog.scss @@ -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-spacious-font-size); font-weight: var(--amsterdam-dialog-title-font-weight); - line-height: var(--amsterdam-dialog-title-line-height); + line-height: var(--amsterdam-dialog-title-spacious-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-dialog-title-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-dialog-title-compact-font-size); + line-height: var(--amsterdam-dialog-title-compact-line-height); } @include reset; diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss index c9a7682f16..42d25c826e 100644 --- a/packages/css/src/form-label/form-label.scss +++ b/packages/css/src/form-label/form-label.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { -webkit-text-size-adjust: 100%; } @@ -12,13 +10,14 @@ .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-spacious-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-spacious-line-height); @include reset; + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-form-label-compact-font-size); + line-height: var(--amsterdam-form-label-compact-line-height); + } } diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss index 86713c9c96..a739516ce9 100644 --- a/packages/css/src/grid/grid.scss +++ b/packages/css/src/grid/grid.scss @@ -6,8 +6,8 @@ @import "../../utils/breakpoint"; .amsterdam-grid { - --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap); - --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline); + --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap); + --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline); display: grid; gap: var(--amsterdam-grid-gap); @@ -23,9 +23,9 @@ } } -.amsterdam-grid--density-high { - --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap); - --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline); +.amsterdam-grid--compact { + --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap); + --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline); } .amsterdam-grid--padding-bottom--small { diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss index e147ae61ff..169f82640f 100644 --- a/packages/css/src/heading/heading.scss +++ b/packages/css/src/heading/heading.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { box-sizing: border-box; margin-block: 0; @@ -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-spacious-level-1-font-size); + line-height: var(--amsterdam-heading-spacious-level-1-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-heading-1-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-heading-compact-level-1-font-size); + line-height: var(--amsterdam-heading-compact-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-spacious-level-2-font-size); + line-height: var(--amsterdam-heading-spacious-level-2-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-heading-2-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-heading-compact-level-2-font-size); + line-height: var(--amsterdam-heading-compact-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-spacious-level-3-font-size); + line-height: var(--amsterdam-heading-spacious-level-3-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-heading-3-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-heading-compact-level-3-font-size); + line-height: var(--amsterdam-heading-compact-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-spacious-level-4-font-size); + line-height: var(--amsterdam-heading-spacious-level-4-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-heading-4-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-heading-compact-level-4-font-size); + line-height: var(--amsterdam-heading-compact-level-4-line-height); } } diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/icon/icon.scss index 3a7288b66c..3307ac7cbf 100644 --- a/packages/css/src/icon/icon.scss +++ b/packages/css/src/icon/icon.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - .amsterdam-icon { align-items: center; display: inline-flex; @@ -15,90 +13,93 @@ } .amsterdam-icon--size-3 { - height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier)); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier)); - } + height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height)); } .amsterdam-icon--size-3 svg { - height: var(--amsterdam-icon-size-3-icon-size-narrow); - width: var(--amsterdam-icon-size-3-icon-size-narrow); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: var(--amsterdam-icon-size-3-icon-size-wide); - width: var(--amsterdam-icon-size-3-icon-size-wide); - } + height: var(--amsterdam-icon-spacious-size-3-font-size); + width: var(--amsterdam-icon-spacious-size-3-font-size); } -.amsterdam-icon--size-4 { - height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier)); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier)); - } +.amsterdam-icon--size-4 { + height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height)); } .amsterdam-icon--size-4 svg { - height: var(--amsterdam-icon-size-4-icon-size-narrow); - width: var(--amsterdam-icon-size-4-icon-size-narrow); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: var(--amsterdam-icon-size-4-icon-size-wide); - width: var(--amsterdam-icon-size-4-icon-size-wide); - } + height: var(--amsterdam-icon-spacious-size-4-font-size); + width: var(--amsterdam-icon-spacious-size-4-font-size); } .amsterdam-icon--size-5 { - height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier)); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier)); - } + height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height)); } .amsterdam-icon--size-5 svg { - height: var(--amsterdam-icon-size-5-icon-size-narrow); - width: var(--amsterdam-icon-size-5-icon-size-narrow); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: var(--amsterdam-icon-size-5-icon-size-wide); - width: var(--amsterdam-icon-size-5-icon-size-wide); - } + height: var(--amsterdam-icon-spacious-size-5-font-size); + width: var(--amsterdam-icon-spacious-size-5-font-size); } .amsterdam-icon--size-6 { - height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier)); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier)); - } + height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height)); } .amsterdam-icon--size-6 svg { - height: var(--amsterdam-icon-size-6-icon-size-narrow); - width: var(--amsterdam-icon-size-6-icon-size-narrow); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: var(--amsterdam-icon-size-6-icon-size-wide); - width: var(--amsterdam-icon-size-6-icon-size-wide); - } + height: var(--amsterdam-icon-spacious-size-6-font-size); + width: var(--amsterdam-icon-spacious-size-6-font-size); } .amsterdam-icon--size-7 { - height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier)); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier)); - } + height: calc(var(--amsterdam-icon-spacious-size-7-font-size) * var(--amsterdam-icon-spacious-size-7-line-height)); } .amsterdam-icon--size-7 svg { - height: var(--amsterdam-icon-size-7-icon-size-narrow); - width: var(--amsterdam-icon-size-7-icon-size-narrow); + height: var(--amsterdam-icon-spacious-size-7-font-size); + width: var(--amsterdam-icon-spacious-size-7-font-size); +} + +.amsterdam-theme--compact { + .amsterdam-icon--size-3 { + height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height)); + } + + .amsterdam-icon--size-3 svg { + height: var(--amsterdam-icon-compact-size-3-font-size); + width: var(--amsterdam-icon-compact-size-3-font-size); + } + + .amsterdam-icon--size-4 { + height: calc(var(--amsterdam-icon-compact-size-4-font-size) * var(--amsterdam-icon-compact-size-4-line-height)); + } + + .amsterdam-icon--size-4 svg { + height: var(--amsterdam-icon-compact-size-4-font-size); + width: var(--amsterdam-icon-compact-size-4-font-size); + } + + .amsterdam-icon--size-5 { + height: calc(var(--amsterdam-icon-compact-size-5-font-size) * var(--amsterdam-icon-compact-size-5-line-height)); + } + + .amsterdam-icon--size-5 svg { + height: var(--amsterdam-icon-compact-size-5-font-size); + width: var(--amsterdam-icon-compact-size-5-font-size); + } + + .amsterdam-icon--size-6 { + height: calc(var(--amsterdam-icon-compact-size-6-font-size) * var(--amsterdam-icon-compact-size-6-line-height)); + } + + .amsterdam-icon--size-6 svg { + height: var(--amsterdam-icon-compact-size-6-font-size); + width: var(--amsterdam-icon-compact-size-6-font-size); + } + + .amsterdam-icon--size-7 { + height: calc(var(--amsterdam-icon-compact-size-7-font-size) * var(--amsterdam-icon-compact-size-7-line-height)); + } - @media screen and (min-width: $amsterdam-breakpoint-typography) { - height: var(--amsterdam-icon-size-7-icon-size-wide); - width: var(--amsterdam-icon-size-7-icon-size-wide); + .amsterdam-icon--size-7 svg { + height: var(--amsterdam-icon-compact-size-7-font-size); + width: var(--amsterdam-icon-compact-size-7-font-size); } } diff --git a/packages/css/src/link/link.scss b/packages/css/src/link/link.scss index 3634ceab37..4c67d77af0 100644 --- a/packages/css/src/link/link.scss +++ b/packages/css/src/link/link.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { -webkit-text-size-adjust: 100%; } @@ -24,8 +22,8 @@ .amsterdam-link--standalone { display: inline-block; - font-size: var(--amsterdam-link-standalone-narrow-font-size); - line-height: var(--amsterdam-link-standalone-line-height); + font-size: var(--amsterdam-link-standalone-spacious-font-size); + line-height: var(--amsterdam-link-standalone-spacious-line-height); text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset); @@ -34,8 +32,9 @@ text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset); } - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-link-standalone-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-link-standalone-compact-font-size); + line-height: var(--amsterdam-link-standalone-compact-line-height); } } @@ -59,9 +58,9 @@ .amsterdam-link--in-list { align-items: flex-start; display: inline-flex; - font-size: var(--amsterdam-link-in-list-narrow-font-size); + font-size: var(--amsterdam-link-in-list-spacious-font-size); gap: var(--amsterdam-link-in-list-gap); - line-height: var(--amsterdam-link-in-list-line-height); + line-height: var(--amsterdam-link-in-list-spacious-line-height); text-decoration: var(--amsterdam-link-in-list-text-decoration); &:hover { @@ -70,8 +69,9 @@ text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset); } - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-link-in-list-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-link-in-list-compact-font-size); + line-height: var(--amsterdam-link-in-list-compact-line-height); } } diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/ordered-list/ordered-list.scss index 4510415e4e..71cecda27e 100644 --- a/packages/css/src/ordered-list/ordered-list.scss +++ b/packages/css/src/ordered-list/ordered-list.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - /** Apply border box sizing, reset whitespace and list styles. */ @mixin reset { box-sizing: border-box; @@ -26,15 +24,11 @@ .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) { color: var(--amsterdam-ordered-list-color); font-family: var(--amsterdam-ordered-list-font-family); - font-size: var(--amsterdam-ordered-list-narrow-font-size); + font-size: var(--amsterdam-ordered-list-spacious-font-size); font-weight: var(--amsterdam-ordered-list-font-weight); - line-height: var(--amsterdam-ordered-list-line-height); + line-height: var(--amsterdam-ordered-list-spacious-line-height); list-style-type: var(--amsterdam-ordered-list-list-style-type); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-ordered-list-wide-font-size); - } - /** List items are responsible for indentation and marker positioning. */ .amsterdam-ordered-list__item { margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start); @@ -51,3 +45,8 @@ padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start); } } + +.amsterdam-theme--compact .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) { + font-size: var(--amsterdam-ordered-list-compact-font-size); + line-height: var(--amsterdam-ordered-list-compact-line-height); +} diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/page-heading/page-heading.scss index dac2c86b4d..cdd11e568b 100644 --- a/packages/css/src/page-heading/page-heading.scss +++ b/packages/css/src/page-heading/page-heading.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { box-sizing: border-box; margin-block: 0; @@ -16,15 +14,16 @@ break-inside: avoid; color: var(--amsterdam-page-heading-color); font-family: var(--amsterdam-page-heading-font-family); - font-size: var(--amsterdam-page-heading-narrow-font-size); + font-size: var(--amsterdam-page-heading-spacious-font-size); font-weight: var(--amsterdam-page-heading-font-weight); - line-height: var(--amsterdam-page-heading-line-height); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-page-heading-wide-font-size); - } + line-height: var(--amsterdam-page-heading-spacious-line-height); @include reset; + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-page-heading-compact-font-size); + line-height: var(--amsterdam-page-heading-compact-line-height); + } } .amsterdam-page-heading--inverse-color { diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss index 9781286a1a..3a4432cbfb 100644 --- a/packages/css/src/page-menu/page-menu.scss +++ b/packages/css/src/page-menu/page-menu.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset-list { box-sizing: border-box; margin-block: 0; @@ -40,17 +38,18 @@ display: inline-flex; flex-direction: row; font-family: var(--amsterdam-page-menu-item-font-family); - font-size: var(--amsterdam-page-menu-item-narrow-font-size); + font-size: var(--amsterdam-page-menu-item-spacious-font-size); font-weight: var(--amsterdam-page-menu-item-font-weight); gap: var(--amsterdam-page-menu-item-gap); - line-height: var(--amsterdam-page-menu-item-line-height); + line-height: var(--amsterdam-page-menu-item-spacious-line-height); outline-offset: var(--amsterdam-focus-outline-offset); text-align: center; text-decoration: var(--amsterdam-page-menu-item-text-decoration); touch-action: manipulation; - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-page-menu-item-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-page-menu-item-compact-font-size); + line-height: var(--amsterdam-page-menu-item-compact-line-height); } } diff --git a/packages/css/src/pagination/pagination.scss b/packages/css/src/pagination/pagination.scss index 0ee17e2c3e..b20b2019c8 100644 --- a/packages/css/src/pagination/pagination.scss +++ b/packages/css/src/pagination/pagination.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin list-reset { list-style-type: none; margin-block: 0; @@ -16,15 +14,16 @@ display: flex; flex-wrap: wrap; font-family: var(--amsterdam-pagination-font-family); - font-size: var(--amsterdam-pagination-narrow-font-size); + font-size: var(--amsterdam-pagination-spacious-font-size); font-weight: var(--amsterdam-pagination-font-weight); justify-content: center; - line-height: var(--amsterdam-pagination-line-height); + line-height: var(--amsterdam-pagination-spacious-line-height); @include list-reset; - @media screen and (width > $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-pagination-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-pagination-compact-font-size); + line-height: var(--amsterdam-pagination-compact-line-height); } } diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/paragraph/paragraph.scss index 1384d49cbe..cafe752a58 100644 --- a/packages/css/src/paragraph/paragraph.scss +++ b/packages/css/src/paragraph/paragraph.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - @mixin reset { box-sizing: border-box; margin-block: 0; @@ -14,32 +12,35 @@ .amsterdam-paragraph { color: var(--amsterdam-paragraph-color); font-family: var(--amsterdam-paragraph-font-family); - font-size: var(--amsterdam-paragraph-narrow-font-size); + font-size: var(--amsterdam-paragraph-spacious-medium-font-size); font-weight: var(--amsterdam-paragraph-font-weight); - line-height: var(--amsterdam-paragraph-line-height); - - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-paragraph-wide-font-size); - } + line-height: var(--amsterdam-paragraph-spacious-medium-line-height); @include reset; + + .amsterdam-theme--compact & { + font-size: var(--amsterdam-paragraph-compact-medium-font-size); + line-height: var(--amsterdam-paragraph-compact-medium-line-height); + } } .amsterdam-paragraph--small { - font-size: var(--amsterdam-paragraph-small-narrow-font-size); - line-height: var(--amsterdam-paragraph-small-line-height); + font-size: var(--amsterdam-paragraph-spacious-small-font-size); + line-height: var(--amsterdam-paragraph-spacious-small-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-paragraph-small-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-paragraph-compact-small-font-size); + line-height: var(--amsterdam-paragraph-compact-small-line-height); } } .amsterdam-paragraph--large { - font-size: var(--amsterdam-paragraph-large-narrow-font-size); - line-height: var(--amsterdam-paragraph-large-line-height); + font-size: var(--amsterdam-paragraph-spacious-large-font-size); + line-height: var(--amsterdam-paragraph-spacious-large-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-paragraph-large-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-paragraph-compact-large-font-size); + line-height: var(--amsterdam-paragraph-compact-large-line-height); } } diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/top-task-link/top-task-link.scss index 8efcc6461f..269e4a9a27 100644 --- a/packages/css/src/top-task-link/top-task-link.scss +++ b/packages/css/src/top-task-link/top-task-link.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - .amsterdam-top-task-link { break-inside: avoid; display: flex; @@ -22,12 +20,13 @@ .amsterdam-top-task-link__label { color: var(--amsterdam-top-task-link-label-color); font-family: var(--amsterdam-top-task-link-label-font-family); - font-size: var(--amsterdam-top-task-link-label-narrow-font-size); + font-size: var(--amsterdam-top-task-link-label-spacious-font-size); font-weight: var(--amsterdam-top-task-link-label-font-weight); - line-height: var(--amsterdam-top-task-link-label-line-height); + line-height: var(--amsterdam-top-task-link-label-spacious-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-top-task-link-label-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-top-task-link-label-compact-font-size); + line-height: var(--amsterdam-top-task-link-label-compact-line-height); } @include reset; @@ -43,12 +42,13 @@ .amsterdam-top-task-link__description { color: var(--amsterdam-top-task-link-description-color); font-family: var(--amsterdam-top-task-link-description-font-family); - font-size: var(--amsterdam-top-task-link-description-narrow-font-size); + font-size: var(--amsterdam-top-task-link-description-spacious-font-size); font-weight: var(--amsterdam-top-task-link-description-font-weight); - line-height: var(--amsterdam-top-task-link-description-line-height); + line-height: var(--amsterdam-top-task-link-description-spacious-line-height); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-top-task-link-description-wide-font-size); + .amsterdam-theme--compact & { + font-size: var(--amsterdam-top-task-link-description-compact-font-size); + line-height: var(--amsterdam-top-task-link-description-compact-line-height); } @include reset; diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/unordered-list/unordered-list.scss index 746eb70808..af73bd85f4 100644 --- a/packages/css/src/unordered-list/unordered-list.scss +++ b/packages/css/src/unordered-list/unordered-list.scss @@ -3,8 +3,6 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; - /** Apply border box sizing, reset whitespace and list styles. */ @mixin reset { box-sizing: border-box; @@ -26,15 +24,11 @@ .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) { color: var(--amsterdam-unordered-list-color); font-family: var(--amsterdam-unordered-list-font-family); - font-size: var(--amsterdam-unordered-list-narrow-font-size); + font-size: var(--amsterdam-unordered-list-spacious-font-size); font-weight: var(--amsterdam-unordered-list-font-weight); - line-height: var(--amsterdam-unordered-list-line-height); + line-height: var(--amsterdam-unordered-list-spacious-line-height); list-style-type: var(--amsterdam-unordered-list-list-style-type); - @media screen and (min-width: $amsterdam-breakpoint-typography) { - font-size: var(--amsterdam-unordered-list-wide-font-size); - } - /** List items are responsible for indentation and marker positioning. */ .amsterdam-unordered-list__item { margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start); @@ -51,3 +45,8 @@ padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start); } } + +.amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) { + font-size: var(--amsterdam-unordered-list-compact-font-size); + line-height: var(--amsterdam-unordered-list-compact-line-height); +} diff --git a/packages/css/utils/breakpoint.scss b/packages/css/utils/breakpoint.scss index 775b0204e4..6466064843 100644 --- a/packages/css/utils/breakpoint.scss +++ b/packages/css/utils/breakpoint.scss @@ -8,12 +8,6 @@ * We to resort to Sass variables for our breakpoint values. */ -/** - * The breakpoint for typography is 854px = 53.375rems. - * @deprecated To be replaced with the grid breakpoints. -*/ -$amsterdam-breakpoint-typography: 53.375rem; - /** The breakpoint at which medium screens start. */ $amsterdam-breakpoint-medium: 36rem; diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx index a3d39fddfd..4644bf73d2 100644 --- a/packages/react/src/Grid/Grid.test.tsx +++ b/packages/react/src/Grid/Grid.test.tsx @@ -24,44 +24,44 @@ describe('Grid', () => { expect(component).toHaveClass('amsterdam-grid') }) - it('renders the high-density class name', () => { - const { container } = render() + it('renders the compact class name', () => { + const { container } = render() const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-grid--density-high') + expect(component).toHaveClass('amsterdam-grid--compact') }) - it('renders a medium vertical spacing class name for a low-density grid', () => { + it('renders a medium vertical spacing class name for a spacious grid', () => { const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium') }) - it('renders a medium vertical spacing class name for a high-density grid', () => { - const { container } = render() + it('renders a medium vertical spacing class name for a compact grid', () => { + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium') }) - it('renders a small top class name for a low-density grid', () => { + it('renders a small top class name for a spacious grid', () => { const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-top--small') }) - it('renders a small top class name for a high-density grid', () => { - const { container } = render() + it('renders a small top class name for a compact grid', () => { + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-top--small') }) - it('renders a large bottom class name for a low-density grid', () => { + it('renders a large bottom class name for a spacious grid', () => { const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-bottom--large') }) - it('renders a large bottom class name for a high-density grid', () => { - const { container } = render() + it('renders a large bottom class name for a compact grid', () => { + const { container } = render() const component = container.querySelector(':only-child') expect(component).toHaveClass('amsterdam-grid--padding-bottom--large') }) diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 6799b253aa..78cc7eea44 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -22,8 +22,6 @@ export type GridColumnNumbers = { wide: GridColumnNumber } -type GridDensity = 'low' | 'high' - type GridPaddingSize = 'small' | 'medium' | 'large' type GridPaddingVerticalProp = { @@ -43,11 +41,12 @@ type GridPaddingTopAndBottomProps = { export type GridProps = { /** - * The density of the grid: low (for websites) or high (for applications). - * Adjusts the pace with which columns get wider, and the start width as well. - * This is to be implemented more generally – it will be moved into a theme soon. + * Opts in to a less spacious layout. + * Decreases whitespace between columns and to the sides of the grid. + * This usually works well for applications. + * @todo Implement more generally – it will be moved into a theme soon. */ - density?: GridDensity + compact?: boolean } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren> @@ -79,7 +78,7 @@ interface GridComponent extends ForwardRefExoticComponent, ) => (
-Elk tekstniveau heeft een minimale tekstgrootte (bij een vensterbreedte van 320 pixels) en een maximale (bij 1440 pixels). -Tussen beide stijgt de tekst linear, met een knik op een extra breakpoint van 854 pixels. -Eerst stijgt de grootte sneller, daarna langzamer. +En de minimale: -Op dit moment reageert de typografie nog op 1 breakpoint bij een vensterbreedte van 854 pixels. -Nu het grid doorontwikkeld is, stemmen we de typografie daar weer op af. -Dit aparte breakpoint komt dus snel te vervallen. + -In de tabel hieronder vind je deze waardes in pixels: +#### Compact -| Niveau | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | -| :------------------------- | --: | --: | --: | --: | --: | --: | --: | --: | -| minimale tekstgrootte | 32 | 32 | 28 | 24 | 20 | 22 | 18 | 16 | -| tekstgrootte op breakpoint | 64 | 48 | 36 | 29 | 23 | 26 | 21 | 17 | -| maximale tekstgrootte | 80 | 56 | 40 | 32 | 25 | 28 | 22 | 18 | -| relatieve regelhoogte | 1.1 | 1.2 | 1.3 | 1.4 | 1.4 | 1.5 | 1.6 | 1.6 | +Voor applicaties is zulke grote tekst niet nodig, zelfs contraproductief. +Daarom is er een compact thema voor de typografie. -Tekst op niveau 5 is groter dan op niveau 4. -Dat is omdat titel niveau 4 kleinere letters heeft dan paragrafen met grote letters. -Het alternatief om Heading 4 tekstniveau 5 te geven leek ons nog verwarrender. +Hier is een paragraaf 14 pixels groot bij de minimale vensterbreedte en 18 pixels bij de maximale. +Een paragraaf groeit hier dus niet met de helft, maar met iets meer dan een kwart. -Voorbeelden van componenten en hun tekstniveaus: +De maximale tekstgroottes voor alle niveau’s in het compacte thema: -| Componenten | Niveau | -| :--------------------------------------------------- | -----: | -| Page heading | 0 | -| Heading 1 | 1 | -| Heading 2 | 2 | -| Heading 3, Blockquote | 3 | -| Heading 4, Top Task Link | 4 | -| Large Paragraph, Alert Title | 5 | -| Paragraph, Button, Link behalve InList | 6 | -| Small Paragraph, InList Link, Form Label, Breadcrumb | 7 | + + +En de minimale: + + + +### Vensterbreedtes waarvoor we ontwerpen + +In de praktijk kan een venster elke willekeurige breedte hebben. +Voor al die breedtes ontwerpen is wat te gek. +Daarom werken we in Figma met drie referentie-breedtes. +Op die maten werken we een scherm uit voor die drie klassen van apparaten. +De tekstgroottes zijn op dat punt als volgt, afgerond op 1 cijfer achter de komma. + +#### Ruimtelijk + +| Klasse apparaat | Ontwerpbreedte | 0 | 1 | 2 | 3 | 4 | 5 | 6 | +| :-------------- | :------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | +| telefoon | 320 | 38,9 | 33,3 | 28,6 | 24,5 | 21 | 18 | 15,4 | +| tablet | 832 | 52,6 | 43,4 | 35,9 | 29,7 | 24,6 | 20,4 | 16,9 | +| desktop | 1600 | 73,2 | 58,6 | 46,9 | 37,5 | 30 | 24 | 19,2 | + +#### Compact + +| Klasse apparaat | Ontwerpbreedte | 0 | 1 | 2 | 3 | 4 | 5 | 6 | +| :-------------- | :------------- | ---: | ---: | ---: | ---: | ---: | ---: | ---: | +| telefoon | 320 | 30,3 | 25,9 | 22,2 | 19,1 | 16,3 | 14 | 12 | +| tablet | 832 | 40,1 | 33,1 | 27,4 | 22,7 | 18,8 | 15,6 | 13 | +| desktop | 1600 | 54,9 | 43,9 | 35,2 | 28,1 | 22,5 | 18 | 14,4 | ## Accentuering @@ -79,6 +146,7 @@ Hierin hebben we de volgende keuzes gemaakt. ### Gewicht Online gebruiken we 2 gewichten: ‘regular’ en ‘extra bold’. +In termen van CSS: 400 en 800. ### Overhang @@ -138,7 +204,7 @@ Het is niet toegestaan om de kerning aan te passen. Het contrast tussen tekst en achtergrondkleur moet voldoen aan de laatste wettelijke toegankelijkheidseisen van [de WCAG, niveau AA](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). -De meeste tekst in het design system is puur zwart op puur wit en dat voldoet daar ruim aan. +De meeste tekst in de huisstijl is puur zwart op puur wit en dat voldoet daar ruim aan. Op de meeste donkere achtergronden maken we tekst wit; ook dat biedt voldoende contrast. Voor sommige achtergrondkleuren is ook zwarte tekst goed leesbaar. Raadpleeg de betreffende componenten voor specifieke richtlijnen. @@ -172,14 +238,20 @@ Voor verdere informatie: [Wrapping and breaking text op MDN](https://developer.m ## Het lettertype installeren -Als je de React-componenten gebruikt hoef je niets te doen. -Deze gebruiken allemaal het juiste lettertype. +Werk je met npm, neem dan ons package `@amsterdam/design-system-assets` op in je dependencies. +Vervolgens importeer je `@amsterdam/design-system-assets/font/index.css` aan het begin van je stylesheet. -Werk je met andere technologie, maar wel met npm, dan installeer je `@amsterdam/design-system-assets` en importeer je `@amsterdam/design-system-assets/font/index.css`. +Je kunt het lettertype ook zelf hosten en opnemen in je applicatie. +Vraag het dan aan via het formulier hieronder. -Ook kun je het lettertype zelf hosten en opnemen in je applicatie, vraag het dan aan via het formulier hieronder. Als het helemaal niet mogelijk is Amsterdam Sans te gebruiken pas je het lettertype Arial toe, of het generieke sans-serif lettertype van het apparaat. -In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is: `font-family: "'Amsterdam Sans', Arial, sans-serif"`. +In alle gevallen voer je die alternatieven op voor als het downloaden van het font voor de gebruiker niet lukt, of terwijl dat bezig is: + +```css +.class { + font-family: "Amsterdam Sans", Arial, sans-serif; +} +``` ### Licentie en aanvraag diff --git a/storybook/storybook-overrides.css b/storybook/storybook-overrides.css index 9a758620db..94e83a1c2e 100644 --- a/storybook/storybook-overrides.css +++ b/storybook/storybook-overrides.css @@ -1,53 +1,96 @@ /* stylelint-disable */ -.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p, li) { - color: #000000; - font-family: "Amsterdam Sans", Arial, sans-serif; +.sbdocs-wrapper { + padding-inline: 8vw !important; } -.sbdocs-content > :is(p, li, a), -.sbdocs-content > :is(ol, ul) li { - font-size: 1rem; - line-height: 1.75; +.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p), +.sbdocs-content > div :is(h1, h2, h3, h4, h5, h6, p), +.sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) { + color: #000000 !important; + font-family: "Amsterdam Sans", Arial, sans-serif !important; } -.sbdocs-content > h1 + p { - font-size: 1.25rem; +.sbdocs-content > :is(p, a), +.sbdocs-content > div :is(p, a), +.sbdocs-content :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) { + font-size: 1.25rem !important; + line-height: 1.75 !important; } -.sbdocs-content > a { - color: #004699; - text-decoration: underline; +.sbdocs-content > :is(p, ol, ul), +.sbdocs-content > div :is(p, ol, ul) { + margin-block: 1.25rem !important; + padding-block: 0 !important; } -.sbdocs-content > a:hover { - color: #102e62; - text-decoration-thickness: 2px; +.sbdocs-content > h1 + p, +.sbdocs-content > div h1 + p { + font-size: 1.375rem !important; + margin-block-end: 2em !important; } -.sbdocs-content > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) { - margin-block: 1rem 0.25rem !important; - padding-block: 0; +.sbdocs-content > a, +.sbdocs-content > div a { + color: #004699 !important; + text-decoration: underline !important; } -.sbdocs-content > h1 { - margin-block: 2rem !important; +.sbdocs-content > a:hover, +.sbdocs-content > div a:hover { + color: #102e62 !important; + text-decoration-thickness: 2px !important; } -.sbdocs-content > h2 { - margin-block: 2rem 1rem !important; +.sbdocs-content > :is(h1, h2, h3, h4, h5, h6), +.sbdocs-content > div :is(h1, h2, h3, h4, h5, h6) { + margin-block: 2em 0.25em !important; + padding-block: 0 !important; } -.sbdocs-content > h3 { - margin-block-start: 1.5rem !important; +.sbdocs-content > h1, +.sbdocs-content > div h1 { + font-size: 3rem !important; } -.sbdocs-content > h4 { - margin-block-start: 1rem !important; +.sbdocs-content > h2, +.sbdocs-content > div h2 { + font-size: 2rem !important; + border-bottom: none; } -.sbdocs-content > :is(p, ul, ol) { +.sbdocs-content > h3, +.sbdocs-content > div h3 { + font-size: 1.5rem !important; +} + +.sbdocs-content > h4, +.sbdocs-content > div h4 { + font-size: 1.25rem !important; +} + +.sbdocs-content > h2 + h3, +.sbdocs-content > div h2 + h3, +.sbdocs-content > h3 + h4, +.sbdocs-content > div h3 + h4, +.sbdocs-content > h4 + h5, +.sbdocs-content > div h4 + h5 { + margin-block-start: 1em !important; +} + +.sbdocs-content > :is(p, ul, ol), +.sbdocs-content > div :is(p, ul, ol) { margin-block: 0 1rem !important; } +.sbdocs-content > :first-child, +.sbdocs-content > div :first-child { + margin-block-start: 0 !important; +} + +.sbdocs-content > p code { + color: currentColor !important; + font-size: 1rem !important; +} + /* stylelint-enable */ diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx index 72ce1a2e03..566409d41d 100644 --- a/storybook/storybook-react/src/Grid/Grid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -21,7 +21,6 @@ Zo is de huisstijl ontworpen. Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief. Daarom bestaat er een compacte variant van het grid. -Deze zet je aan via `density="high"`. diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx index 8f605e0e29..6d4e4763ba 100644 --- a/storybook/storybook-react/src/Grid/Grid.stories.tsx +++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx @@ -43,15 +43,7 @@ export const Compact: Story = { ...StoryTemplate, args: { children: Array.from(Array(12).keys()).map((i) => ), - density: 'high', - }, - argTypes: { - density: { - control: { - type: 'radio', - }, - options: ['low', 'high'], - }, + compact: true, }, name: 'Compact', parameters: { @@ -63,17 +55,9 @@ export const VerticalSpace: Story = { ...StoryTemplate, args: { children: Array.from(Array(12).keys()).map((i) => ), - density: 'low', + compact: false, paddingVertical: 'medium', }, - argTypes: { - density: { - control: { - type: 'radio', - }, - options: ['low', 'high'], - }, - }, name: 'Verticale witruimte', }