diff --git a/packages/css/README.md b/packages/css/README.md index 1e1d741234..72db8a0eec 100644 --- a/packages/css/README.md +++ b/packages/css/README.md @@ -38,3 +38,14 @@ export default class ExamplePage extends React.Component { } } ``` + +## Compact mode + +For applications, the large text and ample white space of the theme can be counterproductive. +That’s why there is a compact mode. +To use the compact mode, import the compact css **after** theme css, like so: + +```javascript +import "@amsterdam/design-system-tokens/dist/index.css"; +import "@amsterdam/design-system-tokens/dist/compact.css"; +``` diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss index e16d2f0cc8..7523c78133 100644 --- a/packages/css/src/components/accordion/accordion.scss +++ b/packages/css/src/components/accordion/accordion.scss @@ -20,19 +20,14 @@ cursor: pointer; display: flex; font-family: var(--amsterdam-accordion-button-font-family); - font-size: var(--amsterdam-accordion-button-spacious-font-size); + font-size: var(--amsterdam-accordion-button-font-size); font-weight: var(--amsterdam-accordion-button-font-weight); justify-content: space-between; - line-height: var(--amsterdam-accordion-button-spacious-line-height); + line-height: var(--amsterdam-accordion-button-line-height); padding-block: 0.75rem; padding-inline: 1rem; width: 100%; - .amsterdam-theme--compact & { - font-size: var(--amsterdam-accordion-button-compact-font-size); - line-height: var(--amsterdam-accordion-button-compact-line-height); - } - &:focus { outline-offset: var(--amsterdam-accordion-button-focus-outline-offset); } diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss index 1c20a45492..77782d4240 100644 --- a/packages/css/src/components/badge/badge.scss +++ b/packages/css/src/components/badge/badge.scss @@ -6,15 +6,10 @@ .amsterdam-badge { display: inline-block; font-family: var(--amsterdam-badge-font-family); - font-size: var(--amsterdam-badge-spacious-font-size); + font-size: var(--amsterdam-badge-font-size); font-weight: var(--amsterdam-badge-font-weight); - line-height: var(--amsterdam-badge-spacious-line-height); + line-height: var(--amsterdam-badge-line-height); padding-inline: var(--amsterdam-badge-padding-inline); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-badge-compact-font-size); - line-height: var(--amsterdam-badge-compact-line-height); - } } .amsterdam-badge--blue { diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss index d2f4f27e7f..3599b4b8e1 100644 --- a/packages/css/src/components/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -16,9 +16,9 @@ break-inside: avoid; color: var(--amsterdam-blockquote-color); font-family: var(--amsterdam-blockquote-font-family); - font-size: var(--amsterdam-blockquote-spacious-font-size); + font-size: var(--amsterdam-blockquote-font-size); font-weight: var(--amsterdam-blockquote-font-weight); - line-height: var(--amsterdam-blockquote-spacious-line-height); + line-height: var(--amsterdam-blockquote-line-height); quotes: "“" "”"; &::before { @@ -29,11 +29,6 @@ content: close-quote; } - .amsterdam-theme--compact & { - font-size: var(--amsterdam-blockquote-spacious-font-size); - line-height: var(--amsterdam-blockquote-spacious-line-height); - } - @include hyphenation; @include reset; } diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index ca63dfa8bb..ab0d7bbe61 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -12,14 +12,9 @@ .amsterdam-breadcrumb { font-family: var(--amsterdam-breadcrumb-font-family, inherit); - font-size: var(--amsterdam-breadcrumb-spacious-font-size); + font-size: var(--amsterdam-breadcrumb-font-size); font-weight: var(--amsterdam-breadcrumb-font-weight); - line-height: var(--amsterdam-breadcrumb-spacious-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-breadcrumb-compact-font-size); - line-height: var(--amsterdam-breadcrumb-compact-line-height); - } + line-height: var(--amsterdam-breadcrumb-line-height); } .amsterdam-breadcrumb__list { diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index 205df7d0d0..da42a5a6c5 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -10,15 +10,10 @@ } .amsterdam-button { - font-size: var(--amsterdam-button-spacious-font-size); - line-height: var(--amsterdam-button-spacious-line-height); + font-size: var(--amsterdam-button-font-size); + line-height: var(--amsterdam-button-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/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index c74d8fc171..068bd52077 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -19,7 +19,7 @@ align-items: center; display: flex; flex-shrink: 0; - height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height)); + height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height)); width: 1.5rem; &::after { @@ -31,10 +31,6 @@ height: 1.5rem; width: 100%; } - - .amsterdam-theme--compact & { - height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height)); - } } @mixin reset { @@ -46,10 +42,10 @@ cursor: pointer; display: inline-flex; font-family: var(--amsterdam-checkbox-font-family); - font-size: var(--amsterdam-checkbox-spacious-font-size); + font-size: var(--amsterdam-checkbox-font-size); font-weight: 400; gap: 0.5rem; - line-height: var(--amsterdam-checkbox-spacious-line-height); + line-height: var(--amsterdam-checkbox-line-height); &:hover { color: var(--amsterdam-checkbox-hover-color); @@ -63,11 +59,6 @@ } } - .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/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index 7bc27b00b2..432c8c8d37 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -53,17 +53,12 @@ color: var(--amsterdam-dialog-title-color); flex: auto; font-family: var(--amsterdam-dialog-title-font-family); - font-size: var(--amsterdam-dialog-title-spacious-font-size); + font-size: var(--amsterdam-dialog-title-font-size); font-weight: var(--amsterdam-dialog-title-font-weight); - line-height: var(--amsterdam-dialog-title-spacious-line-height); + line-height: var(--amsterdam-dialog-title-line-height); @include hyphenation; @include reset; - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-dialog-title-compact-font-size); - line-height: var(--amsterdam-dialog-title-compact-line-height); - } } .amsterdam-dialog__footer { diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss index e133db8ab6..eb16881860 100644 --- a/packages/css/src/components/form-label/form-label.scss +++ b/packages/css/src/components/form-label/form-label.scss @@ -12,15 +12,10 @@ .amsterdam-form-label { color: var(--amsterdam-form-label-color); font-family: var(--amsterdam-form-label-font-family); - font-size: var(--amsterdam-form-label-spacious-font-size); + font-size: var(--amsterdam-form-label-font-size); font-weight: var(--amsterdam-form-label-font-weight); - line-height: var(--amsterdam-form-label-spacious-line-height); + line-height: var(--amsterdam-form-label-line-height); @include hyphenation; @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/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss index 3505afb737..64939ac993 100644 --- a/packages/css/src/components/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -6,9 +6,6 @@ @import "../../common/breakpoint"; .amsterdam-grid { - --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); grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr); @@ -23,11 +20,6 @@ } } -.amsterdam-grid--compact { - --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap); - --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline); -} - .amsterdam-grid--gap-vertical--none { row-gap: initial; } diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss index fd96a3d750..4c05b82eb7 100644 --- a/packages/css/src/components/header/header.scss +++ b/packages/css/src/components/header/header.scss @@ -75,9 +75,9 @@ border: 0; color: var(--amsterdam-page-menu-item-color); font-family: var(--amsterdam-page-menu-item-font-family); - font-size: var(--amsterdam-page-menu-item-spacious-font-size); + font-size: var(--amsterdam-page-menu-item-font-size); font-weight: var(--amsterdam-page-menu-item-font-weight); - line-height: var(--amsterdam-page-menu-item-spacious-line-height); + line-height: var(--amsterdam-page-menu-item-line-height); margin-block: 0; padding-inline: 0 30px; text-align: center; diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss index 0118f0ef8c..f5d6fdd4b1 100644 --- a/packages/css/src/components/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -23,63 +23,33 @@ } .amsterdam-heading--1 { - font-size: var(--amsterdam-heading-spacious-level-1-font-size); - line-height: var(--amsterdam-heading-spacious-level-1-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-1-font-size); - line-height: var(--amsterdam-heading-compact-level-1-line-height); - } + font-size: var(--amsterdam-heading-level-1-font-size); + line-height: var(--amsterdam-heading-level-1-line-height); } .amsterdam-heading--2 { - font-size: var(--amsterdam-heading-spacious-level-2-font-size); - line-height: var(--amsterdam-heading-spacious-level-2-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-2-font-size); - line-height: var(--amsterdam-heading-compact-level-2-line-height); - } + font-size: var(--amsterdam-heading-level-2-font-size); + line-height: var(--amsterdam-heading-level-2-line-height); } .amsterdam-heading--3 { - font-size: var(--amsterdam-heading-spacious-level-3-font-size); - line-height: var(--amsterdam-heading-spacious-level-3-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-3-font-size); - line-height: var(--amsterdam-heading-compact-level-3-line-height); - } + font-size: var(--amsterdam-heading-level-3-font-size); + line-height: var(--amsterdam-heading-level-3-line-height); } .amsterdam-heading--4 { - font-size: var(--amsterdam-heading-spacious-level-4-font-size); - line-height: var(--amsterdam-heading-spacious-level-4-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-4-font-size); - line-height: var(--amsterdam-heading-compact-level-4-line-height); - } + font-size: var(--amsterdam-heading-level-4-font-size); + line-height: var(--amsterdam-heading-level-4-line-height); } .amsterdam-heading--5 { - font-size: var(--amsterdam-heading-spacious-level-5-font-size); - line-height: var(--amsterdam-heading-spacious-level-5-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-5-font-size); - line-height: var(--amsterdam-heading-compact-level-5-line-height); - } + font-size: var(--amsterdam-heading-level-5-font-size); + line-height: var(--amsterdam-heading-level-5-line-height); } .amsterdam-heading--6 { - font-size: var(--amsterdam-heading-spacious-level-6-font-size); - line-height: var(--amsterdam-heading-spacious-level-6-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-heading-compact-level-6-font-size); - line-height: var(--amsterdam-heading-compact-level-6-line-height); - } + font-size: var(--amsterdam-heading-level-6-font-size); + line-height: var(--amsterdam-heading-level-6-line-height); } .amsterdam-heading--inverse-color { diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/src/components/icon/icon.scss index c4c36a255b..aa9edcdeeb 100644 --- a/packages/css/src/components/icon/icon.scss +++ b/packages/css/src/components/icon/icon.scss @@ -18,75 +18,37 @@ } .amsterdam-icon--size-3 { - height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height)); + height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height)); } .amsterdam-icon--size-3 svg { - height: var(--amsterdam-icon-spacious-size-3-font-size); - width: var(--amsterdam-icon-spacious-size-3-font-size); + height: var(--amsterdam-icon-size-3-font-size); + width: var(--amsterdam-icon-size-3-font-size); } .amsterdam-icon--size-4 { - height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height)); + height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height)); } .amsterdam-icon--size-4 svg { - height: var(--amsterdam-icon-spacious-size-4-font-size); - width: var(--amsterdam-icon-spacious-size-4-font-size); + height: var(--amsterdam-icon-size-4-font-size); + width: var(--amsterdam-icon-size-4-font-size); } .amsterdam-icon--size-5 { - height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height)); + height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height)); } .amsterdam-icon--size-5 svg { - height: var(--amsterdam-icon-spacious-size-5-font-size); - width: var(--amsterdam-icon-spacious-size-5-font-size); + height: var(--amsterdam-icon-size-5-font-size); + width: var(--amsterdam-icon-size-5-font-size); } .amsterdam-icon--size-6 { - height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height)); + height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height)); } .amsterdam-icon--size-6 svg { - height: var(--amsterdam-icon-spacious-size-6-font-size); - width: var(--amsterdam-icon-spacious-size-6-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); - } + height: var(--amsterdam-icon-size-6-font-size); + width: var(--amsterdam-icon-size-6-font-size); } diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss index 5b44f0072d..8f985cd384 100644 --- a/packages/css/src/components/link-list/link-list.scss +++ b/packages/css/src/components/link-list/link-list.scss @@ -25,20 +25,15 @@ color: var(--amsterdam-link-list-link-color); display: inline-flex; font-family: var(--amsterdam-link-list-link-font-family); - font-size: var(--amsterdam-link-list-link-spacious-medium-font-size); + font-size: var(--amsterdam-link-list-link-medium-font-size); font-weight: var(--amsterdam-link-list-link-font-weight); gap: var(--amsterdam-link-list-link-gap); - line-height: var(--amsterdam-link-list-link-spacious-medium-line-height); + line-height: var(--amsterdam-link-list-link-medium-line-height); outline-offset: var(--amsterdam-link-list-link-outline-offset); text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset); - .amsterdam-theme--compact & { - font-size: var(--amsterdam-link-list-link-compact-medium-font-size); - line-height: var(--amsterdam-link-list-link-compact-medium-line-height); - } - &:hover { color: var(--amsterdam-link-list-link-hover-color); text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line); @@ -46,25 +41,15 @@ } .amsterdam-link-list__link--small { - font-size: var(--amsterdam-link-list-link-spacious-small-font-size); - line-height: var(--amsterdam-link-list-link-spacious-small-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-link-list-link-compact-small-font-size); - line-height: var(--amsterdam-link-list-link-compact-small-line-height); - } + font-size: var(--amsterdam-link-list-link-small-font-size); + line-height: var(--amsterdam-link-list-link-small-line-height); } .amsterdam-link-list__link--large { - font-size: var(--amsterdam-link-list-link-spacious-large-font-size); - line-height: var(--amsterdam-link-list-link-spacious-large-line-height); + font-size: var(--amsterdam-link-list-link-large-font-size); + line-height: var(--amsterdam-link-list-link-large-line-height); @include hyphenation; - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-link-list-link-compact-large-font-size); - line-height: var(--amsterdam-link-list-link-compact-large-line-height); - } } .amsterdam-link-list__link--on-background-dark { diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index 835b00e4fa..db1b9d4d2b 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -22,8 +22,8 @@ .amsterdam-link--standalone { display: inline-block; - font-size: var(--amsterdam-link-standalone-spacious-font-size); - line-height: var(--amsterdam-link-standalone-spacious-line-height); + font-size: var(--amsterdam-link-standalone-font-size); + line-height: var(--amsterdam-link-standalone-line-height); text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset); @@ -32,11 +32,6 @@ text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset); } - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-link-standalone-compact-font-size); - line-height: var(--amsterdam-link-standalone-compact-line-height); - } } .amsterdam-link--inline { diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 71cecda27e..1c5d55eb64 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -24,9 +24,9 @@ .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-spacious-font-size); + font-size: var(--amsterdam-ordered-list-font-size); font-weight: var(--amsterdam-ordered-list-font-weight); - line-height: var(--amsterdam-ordered-list-spacious-line-height); + line-height: var(--amsterdam-ordered-list-line-height); list-style-type: var(--amsterdam-ordered-list-list-style-type); /** List items are responsible for indentation and marker positioning. */ @@ -45,8 +45,3 @@ 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/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss index 7297367571..ea18fbbfa3 100644 --- a/packages/css/src/components/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -16,17 +16,12 @@ break-inside: avoid; color: var(--amsterdam-page-heading-color); font-family: var(--amsterdam-page-heading-font-family); - font-size: var(--amsterdam-page-heading-spacious-font-size); + font-size: var(--amsterdam-page-heading-font-size); font-weight: var(--amsterdam-page-heading-font-weight); - line-height: var(--amsterdam-page-heading-spacious-line-height); + line-height: var(--amsterdam-page-heading-line-height); @include hyphenation; @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/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss index 9bcd29be35..377d80b463 100644 --- a/packages/css/src/components/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -34,10 +34,10 @@ display: inline-flex; flex-direction: row; font-family: var(--amsterdam-page-menu-item-font-family); - font-size: var(--amsterdam-page-menu-item-spacious-font-size); + font-size: var(--amsterdam-page-menu-item-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-spacious-line-height); + line-height: var(--amsterdam-page-menu-item-line-height); outline-offset: var(--amsterdam-page-menu-item-outline-offset); text-align: center; text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line); @@ -45,11 +45,6 @@ text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset); touch-action: manipulation; white-space: nowrap; - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-page-menu-item-compact-font-size); - line-height: var(--amsterdam-page-menu-item-compact-line-height); - } } .amsterdam-page-menu__link { diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index 7aa0329fb3..00b61047ad 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -14,17 +14,12 @@ display: flex; flex-wrap: wrap; font-family: var(--amsterdam-pagination-font-family); - font-size: var(--amsterdam-pagination-spacious-font-size); + font-size: var(--amsterdam-pagination-font-size); font-weight: var(--amsterdam-pagination-font-weight); justify-content: center; - line-height: var(--amsterdam-pagination-spacious-line-height); + line-height: var(--amsterdam-pagination-line-height); @include list-reset; - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-pagination-compact-font-size); - line-height: var(--amsterdam-pagination-compact-line-height); - } } @mixin button-reset { diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss index cafe752a58..7ea0587fc3 100644 --- a/packages/css/src/components/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -12,36 +12,21 @@ .amsterdam-paragraph { color: var(--amsterdam-paragraph-color); font-family: var(--amsterdam-paragraph-font-family); - font-size: var(--amsterdam-paragraph-spacious-medium-font-size); + font-size: var(--amsterdam-paragraph-medium-font-size); font-weight: var(--amsterdam-paragraph-font-weight); - line-height: var(--amsterdam-paragraph-spacious-medium-line-height); + line-height: var(--amsterdam-paragraph-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-spacious-small-font-size); - line-height: var(--amsterdam-paragraph-spacious-small-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-paragraph-compact-small-font-size); - line-height: var(--amsterdam-paragraph-compact-small-line-height); - } + font-size: var(--amsterdam-paragraph-small-font-size); + line-height: var(--amsterdam-paragraph-small-line-height); } .amsterdam-paragraph--large { - font-size: var(--amsterdam-paragraph-spacious-large-font-size); - line-height: var(--amsterdam-paragraph-spacious-large-line-height); - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-paragraph-compact-large-font-size); - line-height: var(--amsterdam-paragraph-compact-large-line-height); - } + font-size: var(--amsterdam-paragraph-large-font-size); + line-height: var(--amsterdam-paragraph-large-line-height); } .amsterdam-paragraph--inverse-color { diff --git a/packages/css/src/components/search-field/search-field.scss b/packages/css/src/components/search-field/search-field.scss index 0ba85f3541..3b82e97d78 100644 --- a/packages/css/src/components/search-field/search-field.scss +++ b/packages/css/src/components/search-field/search-field.scss @@ -19,9 +19,9 @@ box-shadow: var(--amsterdam-search-field-input-box-shadow); color: var(--amsterdam-search-field-input-color); font-family: var(--amsterdam-search-field-input-font-family); - font-size: var(--amsterdam-search-field-input-spacious-font-size); + font-size: var(--amsterdam-search-field-input-font-size); font-weight: var(--amsterdam-search-field-input-font-weight); - line-height: var(--amsterdam-search-field-input-spacious-line-height); + line-height: var(--amsterdam-search-field-input-line-height); outline-offset: var(--amsterdam-search-field-input-outline-offset); padding-block: 0.5rem; padding-inline: 1rem; @@ -30,11 +30,6 @@ @include reset; - .amsterdam-theme--compact & { - font-size: var(--amsterdam-search-field-input-compact-font-size); - line-height: var(--amsterdam-search-field-input-compact-line-height); - } - &:hover { box-shadow: var(--amsterdam-search-field-input-hover-box-shadow); } diff --git a/packages/css/src/components/skip-link/skip-link.scss b/packages/css/src/components/skip-link/skip-link.scss index 7ecdfd3b78..0fab6a9414 100644 --- a/packages/css/src/components/skip-link/skip-link.scss +++ b/packages/css/src/components/skip-link/skip-link.scss @@ -20,9 +20,4 @@ &:hover { background-color: var(--amsterdam-skip-link-hover-background-color); } - - .amsterdam-theme--compact & { - font-size: var(--amsterdam-skip-link-compact-font-size); - line-height: var(--amsterdam-skip-link-compact-line-height); - } } diff --git a/packages/css/src/components/text-input/text-input.scss b/packages/css/src/components/text-input/text-input.scss index ff022df752..c6e5a2704c 100644 --- a/packages/css/src/components/text-input/text-input.scss +++ b/packages/css/src/components/text-input/text-input.scss @@ -14,9 +14,9 @@ box-shadow: var(--amsterdam-text-input-box-shadow); color: var(--amsterdam-text-input-color); font-family: var(--amsterdam-text-input-font-family); - font-size: var(--amsterdam-text-input-spacious-font-size); + font-size: var(--amsterdam-text-input-font-size); font-weight: var(--amsterdam-text-input-font-weight); - line-height: var(--amsterdam-text-input-spacious-line-height); + line-height: var(--amsterdam-text-input-line-height); outline-offset: var(--amsterdam-text-input-outline-offset); padding-block: 0.5rem; padding-inline: 1rem; @@ -25,11 +25,6 @@ @include reset; - .amsterdam-theme--compact & { - font-size: var(--amsterdam-text-input-compact-font-size); - line-height: var(--amsterdam-text-input-compact-line-height); - } - &:hover { box-shadow: var(--amsterdam-text-input-hover-box-shadow); } diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 2394e04ce9..028d4d4b58 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -22,18 +22,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-spacious-font-size); + font-size: var(--amsterdam-top-task-link-label-font-size); font-weight: var(--amsterdam-top-task-link-label-font-weight); - line-height: var(--amsterdam-top-task-link-label-spacious-line-height); + line-height: var(--amsterdam-top-task-link-label-line-height); text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line); text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness); text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset); - .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 hyphenation; @include reset; } @@ -46,14 +41,9 @@ .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-spacious-font-size); + font-size: var(--amsterdam-top-task-link-description-font-size); font-weight: var(--amsterdam-top-task-link-description-font-weight); - line-height: var(--amsterdam-top-task-link-description-spacious-line-height); - - .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); - } + line-height: var(--amsterdam-top-task-link-description-line-height); @include reset; } diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index af73bd85f4..def450aabb 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -24,9 +24,9 @@ .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-spacious-font-size); + font-size: var(--amsterdam-unordered-list-font-size); font-weight: var(--amsterdam-unordered-list-font-weight); - line-height: var(--amsterdam-unordered-list-spacious-line-height); + line-height: var(--amsterdam-unordered-list-line-height); list-style-type: var(--amsterdam-unordered-list-list-style-type); /** List items are responsible for indentation and marker positioning. */ @@ -45,8 +45,3 @@ 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/react/README.md b/packages/react/README.md index f5464a057b..f2199a4085 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -28,7 +28,7 @@ Import the packages you need. ```javascript import { Paragraph } from "@amsterdam/design-system-react"; -import "@amsterdam/design-system-tokens/dist/root.css"; +import "@amsterdam/design-system-tokens/dist/index.css"; import "@amsterdam/design-system-assets/font/index.css"; import "@amsterdam/design-system-css/dist/index.css"; @@ -38,3 +38,14 @@ function App() { export default App; ``` + +## Compact mode + +For applications, the large text and ample white space of the theme can be counterproductive. +That’s why there is a compact mode. +To use the compact mode, import the compact css **after** theme css, like so: + +```javascript +import "@amsterdam/design-system-tokens/dist/index.css"; +import "@amsterdam/design-system-tokens/dist/compact.css"; +``` diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx index 01198dec8b..37e279419f 100644 --- a/packages/react/src/Grid/Grid.test.tsx +++ b/packages/react/src/Grid/Grid.test.tsx @@ -24,48 +24,24 @@ describe('Grid', () => { expect(component).toHaveClass('amsterdam-grid') }) - it('renders the compact class name', () => { - const { container } = render() - const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-grid--compact') - }) - - it('renders a medium vertical spacing class name for a spacious grid', () => { + it('renders a medium vertical spacing class name', () => { 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 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 spacious grid', () => { + it('renders a small top class name', () => { 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 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 spacious grid', () => { + it('renders a large bottom class name', () => { 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 compact grid', () => { - const { container } = render() - const component = container.querySelector(':only-child') - expect(component).toHaveClass('amsterdam-grid--padding-bottom--large') - }) - it('renders a class name for a vertical gap', () => { const { container } = render() const component = container.querySelector(':only-child') diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx index 7220bc11b5..bc27e2955b 100644 --- a/packages/react/src/Grid/Grid.tsx +++ b/packages/react/src/Grid/Grid.tsx @@ -34,13 +34,6 @@ type GridPaddingTopAndBottomProps = { } export type GridProps = { - /** - * 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. - */ - compact?: boolean /** The amount of vertical whitespace between rows of the grid. */ gapVertical?: 'none' | 'small' | 'large' } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & @@ -74,7 +67,7 @@ type GridComponent = { export const Grid = forwardRef( ( - { children, className, compact, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps, + { children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps, ref: ForwardedRef, ) => (
{ + console.log(`\n\nBuilding ${mode} mode...`) + StyleDictionary.extend({ + source: [`./src/**/*.${mode}.tokens.json`], + platforms: generateSharedConfig(mode), + }).buildAllPlatforms() +}) diff --git a/proprietary/tokens/package.json b/proprietary/tokens/package.json index 159447c652..fd63fd13b3 100644 --- a/proprietary/tokens/package.json +++ b/proprietary/tokens/package.json @@ -18,7 +18,7 @@ }, "scripts": { "clean": "rimraf dist/", - "build": "style-dictionary build --config ./style-dictionary.config.json", + "build": "node build.js", "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\"" }, "devDependencies": { diff --git a/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json new file mode 100644 index 0000000000..e722ff598f --- /dev/null +++ b/proprietary/tokens/src/brand/amsterdam/typography.compact.tokens.json @@ -0,0 +1,29 @@ +{ + "amsterdam": { + "typography": { + "text-level": { + "0": { + "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" } + }, + "1": { + "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" } + }, + "2": { + "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" } + }, + "3": { + "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" } + }, + "4": { + "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" } + }, + "5": { + "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" } + }, + "6": { + "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" } + } + } + } + } +} diff --git a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json index 59121f4704..3394e80de1 100644 --- a/proprietary/tokens/src/brand/amsterdam/typography.tokens.json +++ b/proprietary/tokens/src/brand/amsterdam/typography.tokens.json @@ -6,68 +6,34 @@ "normal": { "value": 400 }, "bold": { "value": 800 } }, - "spacious": { - "text-level": { - "0": { - "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" }, - "line-height": { "value": "1.15" } - }, - "1": { - "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" }, - "line-height": { "value": "1.2" } - }, - "2": { - "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" }, - "line-height": { "value": "1.25" } - }, - "3": { - "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" }, - "line-height": { "value": "1.3" } - }, - "4": { - "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" }, - "line-height": { "value": "1.5" } - }, - "5": { - "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" }, - "line-height": { "value": "1.6" } - }, - "6": { - "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" }, - "line-height": { "value": "1.6" } - } - } - }, - "compact": { - "text-level": { - "0": { - "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }, - "line-height": { "value": "1.15" } - }, - "1": { - "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }, - "line-height": { "value": "1.2" } - }, - "2": { - "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }, - "line-height": { "value": "1.25" } - }, - "3": { - "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }, - "line-height": { "value": "1.3" } - }, - "4": { - "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }, - "line-height": { "value": "1.5" } - }, - "5": { - "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }, - "line-height": { "value": "1.6" } - }, - "6": { - "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }, - "line-height": { "value": "1.6" } - } + "text-level": { + "0": { + "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" }, + "line-height": { "value": "1.15" } + }, + "1": { + "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" }, + "line-height": { "value": "1.2" } + }, + "2": { + "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" }, + "line-height": { "value": "1.25" } + }, + "3": { + "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" }, + "line-height": { "value": "1.3" } + }, + "4": { + "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" }, + "line-height": { "value": "1.5" } + }, + "5": { + "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" }, + "line-height": { "value": "1.6" } + }, + "6": { + "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" }, + "line-height": { "value": "1.6" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json index 628f1e4acc..16de651e15 100644 --- a/proprietary/tokens/src/components/amsterdam/accordion.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/accordion.tokens.json @@ -3,21 +3,15 @@ "accordion": { "button": { "color": { "value": "{amsterdam.color.primary-blue}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "focus": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } }, - "font-family": { "value": "{amsterdam.typography.font-family}" }, - "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "hover": { "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json index 0a722c1226..4b9492cc1f 100644 --- a/proprietary/tokens/src/components/amsterdam/badge.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json @@ -2,16 +2,10 @@ "amsterdam": { "badge": { "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "padding-inline": { "value": "0.5rem" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, "blue": { "background-color": { "value": "{amsterdam.color.blue}" }, "color": { "value": "{amsterdam.color.primary-black}" } diff --git a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json index 01b820ad4a..3061174dc7 100644 --- a/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/blockquote.tokens.json @@ -3,16 +3,10 @@ "blockquote": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, - "inverse-color": { "value": "{amsterdam.color.primary-white}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" } - } + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }, + "inverse-color": { "value": "{amsterdam.color.primary-white}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index d006844a5c..31cd659d70 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -2,7 +2,9 @@ "amsterdam": { "breadcrumb": { "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "separator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" @@ -18,14 +20,6 @@ "color": { "value": "{amsterdam.color.dark-blue}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/button.tokens.json b/proprietary/tokens/src/components/amsterdam/button.tokens.json index c07033be2a..0ebe731227 100644 --- a/proprietary/tokens/src/components/amsterdam/button.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/button.tokens.json @@ -1,14 +1,8 @@ { "amsterdam": { "button": { - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "secondary": { "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }, "hover": { diff --git a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json index b53da6b8ef..73b9d548aa 100644 --- a/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/checkbox.tokens.json @@ -2,6 +2,11 @@ "amsterdam": { "checkbox": { "color": { "value": "{amsterdam.color.primary-black}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "checkmark": { "border-color": { "value": "{amsterdam.color.primary-blue}" }, "checked": { @@ -56,19 +61,8 @@ "disabled": { "color": { "value": "{amsterdam.color.neutral-grey3}" } }, - "font-family": { "value": "{amsterdam.typography.font-family}" }, - "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" } - }, - "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json index 70d0940d8b..6e3bf4a413 100644 --- a/proprietary/tokens/src/components/amsterdam/dialog.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/dialog.tokens.json @@ -7,15 +7,9 @@ "title": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - } + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } }, "backdrop": { "background": { "value": "#0006" } diff --git a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json index 4a42884769..01d8f6377b 100644 --- a/proprietary/tokens/src/components/amsterdam/form-label.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/form-label.tokens.json @@ -3,15 +3,9 @@ "form-label": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } - } + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json new file mode 100644 index 0000000000..cc8e5b85e8 --- /dev/null +++ b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json @@ -0,0 +1,14 @@ +{ + "amsterdam": { + "grid": { + "gap": { + "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", + "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide." + }, + "padding-inline": { + "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", + "comment": "Equals the gap." + } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json index 209b4f6ed2..a6ec7c33ac 100644 --- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json @@ -2,25 +2,13 @@ "amsterdam": { "grid": { "column-count": { "value": "4" }, - "spacious": { - "gap": { - "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)", - "comment": "Grows from 16px at 320px wide to 56px at 1600px wide." - }, - "padding-inline": { - "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)", - "comment": "Equals 1.5 times the gap." - } + "gap": { + "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)", + "comment": "Grows from 16px at 320px wide to 56px at 1600px wide." }, - "compact": { - "gap": { - "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", - "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide." - }, - "padding-inline": { - "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", - "comment": "Equals the gap." - } + "padding-inline": { + "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)", + "comment": "Equals 1.5 times the gap." }, "medium": { "column-count": { "value": "8" } diff --git a/proprietary/tokens/src/components/amsterdam/header.tokens.json b/proprietary/tokens/src/components/amsterdam/header.tokens.json index 7dff95fbde..f45bb65980 100644 --- a/proprietary/tokens/src/components/amsterdam/header.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/header.tokens.json @@ -1,7 +1,7 @@ { "amsterdam": { "header": { - "column-gap": { "value": "{amsterdam.grid.spacious.gap}" } + "column-gap": { "value": "{amsterdam.grid.gap}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/heading.tokens.json b/proprietary/tokens/src/components/amsterdam/heading.tokens.json index e8fc70121e..a7a07a076a 100644 --- a/proprietary/tokens/src/components/amsterdam/heading.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/heading.tokens.json @@ -5,57 +5,29 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "inverse-color": { "value": "{amsterdam.color.primary-white}" }, - "spacious": { - "level-1": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.1.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.1.font-size}" } - }, - "level-2": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.2.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.2.font-size}" } - }, - "level-3": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" } - }, - "level-4": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" } - }, - "level-5": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" } - }, - "level-6": { - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" } - } + "level-1": { + "font-size": { "value": "{amsterdam.typography.text-level.1.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" } }, - "compact": { - "level-1": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.1.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.1.font-size}" } - }, - "level-2": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.2.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.2.font-size}" } - }, - "level-3": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" } - }, - "level-4": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" } - }, - "level-5": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" } - }, - "level-6": { - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }, - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" } - } + "level-2": { + "font-size": { "value": "{amsterdam.typography.text-level.2.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" } + }, + "level-3": { + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } + }, + "level-4": { + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } + }, + "level-5": { + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } + }, + "level-6": { + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/icon.tokens.json b/proprietary/tokens/src/components/amsterdam/icon.tokens.json index dbaac0ef7f..76f5e2648b 100644 --- a/proprietary/tokens/src/components/amsterdam/icon.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/icon.tokens.json @@ -1,41 +1,21 @@ { "amsterdam": { "icon": { - "spacious": { - "size-3": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" } - }, - "size-4": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } - }, - "size-5": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "size-6": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - } + "size-3": { + "font-size": { "value": "{amsterdam.typography.text-level.3.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" } }, - "compact": { - "size-3": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" } - }, - "size-4": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } - }, - "size-5": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, - "size-6": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - } + "size-4": { + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } + }, + "size-5": { + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } + }, + "size-6": { + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json index 8c41ccd8bd..17b5e15f99 100644 --- a/proprietary/tokens/src/components/amsterdam/link-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link-list.tokens.json @@ -11,33 +11,17 @@ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, - "spacious": { - "small": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - }, - "medium": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "large": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } - } + "small": { + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, - "compact": { - "small": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, - "medium": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, - "large": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } - } + "medium": { + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } + }, + "large": { + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 75b063f8f4..929a6afcb5 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -26,6 +26,8 @@ } }, "standalone": { + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, @@ -34,14 +36,6 @@ "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } } }, "on-background-dark": { diff --git a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json index 88c7e10b32..88486b3e30 100644 --- a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json @@ -2,10 +2,10 @@ "amsterdam": { "mega-menu": { "list-category": { - "column-gap": { "value": "{amsterdam.grid.spacious.gap}" }, + "column-gap": { "value": "{amsterdam.grid.gap}" }, "column-width": { "value": "20rem" }, "padding-block-start": { "value": "1rem" }, - "padding-block-end": { "value": "{amsterdam.grid.spacious.gap}" } + "padding-block-end": { "value": "{amsterdam.grid.gap}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json index d566961b0b..0032f02c09 100644 --- a/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/ordered-list.tokens.json @@ -3,17 +3,11 @@ "ordered-list": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.75rem" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "list-style-type": { "value": "decimal" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, "item": { "margin-inline-start": { "value": "2.25rem", diff --git a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json index cd8908e6c5..05f4198b37 100644 --- a/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-heading.tokens.json @@ -3,16 +3,10 @@ "page-heading": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.0.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "inverse-color": { "value": "{amsterdam.color.primary-white}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" } - } + "line-height": { "value": "{amsterdam.typography.text-level.0.font-size}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 6223d09a9a..534d7df1be 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -6,20 +6,14 @@ "item": { "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.5rem" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 6cca52f715..4360328976 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -3,15 +3,9 @@ "pagination": { "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "button": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, diff --git a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json index 3999df3bc5..0b78d70f46 100644 --- a/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/paragraph.tokens.json @@ -5,33 +5,17 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "inverse-color": { "value": "{amsterdam.color.primary-white}" }, - "spacious": { - "small": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - }, - "medium": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "large": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } - } + "small": { + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, - "compact": { - "small": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, - "medium": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, - "large": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } - } + "medium": { + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" } + }, + "large": { + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json index bb97585406..3e72d7401e 100644 --- a/proprietary/tokens/src/components/amsterdam/search-field.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/search-field.tokens.json @@ -15,15 +15,17 @@ }, "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "cancel-button": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" }, "color": { "value": "{amsterdam.color.primary-blue}" }, - "height": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "width": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" } + "height": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "width": { "value": "{amsterdam.typography.text-level.6.font-size}" } }, "hover": { "box-shadow": { @@ -32,14 +34,6 @@ }, "placeholder": { "color": { "value": "{amsterdam.color.neutral-grey3}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json index 8e9f937c47..f3f4586332 100644 --- a/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/skip-link.tokens.json @@ -5,13 +5,9 @@ "color": { "value": "{amsterdam.color.primary-white}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, "hover": { "background-color": { "value": "{amsterdam.color.dark-blue}" } } diff --git a/proprietary/tokens/src/components/amsterdam/table.tokens.json b/proprietary/tokens/src/components/amsterdam/table.tokens.json index d1d78cbd80..ad90451455 100644 --- a/proprietary/tokens/src/components/amsterdam/table.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/table.tokens.json @@ -4,8 +4,8 @@ "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "caption": { "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, diff --git a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json index 9e842c62c0..95c1e64dc3 100644 --- a/proprietary/tokens/src/components/amsterdam/text-input.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/text-input.tokens.json @@ -4,7 +4,9 @@ "box-shadow": { "value": "inset 0 0 0 1px {amsterdam.color.primary-black}" }, "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "disabled": { "background-color": { "value": "{amsterdam.color.primary-white}" }, @@ -22,14 +24,6 @@ }, "placeholder": { "color": { "value": "{amsterdam.color.neutral-grey3}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index f67a4e39e6..bee69ba5a1 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -4,34 +4,22 @@ "description": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.6.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } - } + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" } }, "label": { "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.4.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } - }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } diff --git a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json index aa33f763f0..e4ad15e7c1 100644 --- a/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/unordered-list.tokens.json @@ -3,17 +3,11 @@ "unordered-list": { "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-size": { "value": "{amsterdam.typography.text-level.5.font-size}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.75rem" }, + "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }, "list-style-type": { "value": "'\\2022'" }, - "spacious": { - "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" } - }, - "compact": { - "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }, - "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" } - }, "item": { "margin-inline-start": { "value": "1.625rem", diff --git a/proprietary/tokens/style-dictionary.config.json b/proprietary/tokens/style-dictionary.config.json deleted file mode 100644 index b0fca77487..0000000000 --- a/proprietary/tokens/style-dictionary.config.json +++ /dev/null @@ -1,101 +0,0 @@ -{ - "source": ["./src/**/tokens.json", "./src/**/*.tokens.json"], - "platforms": { - "js": { - "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "index.js", - "format": "javascript/es6" - }, - { - "format": "javascript/module", - "destination": "tokens.js" - } - ] - }, - "json": { - "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "index.tokens.json", - "format": "json/nested" - }, - { - "destination": "index.json", - "format": "json/flat" - } - ] - }, - "css": { - "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "root.css", - "format": "css/variables", - "options": { - "outputReferences": true - } - } - ] - }, - "css-theme": { - "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "index.css", - "format": "css/variables", - "options": { - "selector": ".amsterdam-theme", - "outputReferences": true - } - } - ] - }, - "scss": { - "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "_variables.scss", - "format": "scss/variables", - "options": { - "outputReferences": true - } - } - ] - }, - "typescript": { - "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"], - "transformGroup": "js", - "buildPath": "dist/", - "files": [ - { - "format": "typescript/es6-declarations", - "destination": "index.d.ts" - }, - { - "format": "typescript/module-declarations", - "destination": "tokens.d.ts" - } - ] - }, - "less": { - "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "variables.less", - "format": "less/variables", - "options": { - "outputReferences": true - } - } - ] - } - } -} diff --git a/storybook/storybook-docs/config/preview.tsx b/storybook/storybook-docs/config/preview.tsx index 44eb52f93e..d1eec48c6f 100644 --- a/storybook/storybook-docs/config/preview.tsx +++ b/storybook/storybook-docs/config/preview.tsx @@ -1,4 +1,4 @@ -import '@amsterdam/design-system-tokens/dist/root.css' +import '@amsterdam/design-system-tokens/dist/index.css' import '@amsterdam/design-system-assets/font/index.css' import '@amsterdam/design-system-css/dist/index.css' import '../../storybook-overrides.css' diff --git a/storybook/storybook-docs/src/color.stories.mdx b/storybook/storybook-docs/src/color.stories.mdx index a072ed1030..3e4aa07d20 100644 --- a/storybook/storybook-docs/src/color.stories.mdx +++ b/storybook/storybook-docs/src/color.stories.mdx @@ -1,4 +1,4 @@ -import tokens from "@amsterdam/design-system-tokens/dist/index.tokens.json"; +import tokens from "@amsterdam/design-system-tokens/dist/index.json"; import { Meta } from "@storybook/blocks"; import { ColorPalette } from "./components/ColorPalette"; diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx index b2a9360236..91ac8e204a 100644 --- a/storybook/storybook-react/config/preview.tsx +++ b/storybook/storybook-react/config/preview.tsx @@ -1,4 +1,4 @@ -import '@amsterdam/design-system-tokens/dist/root.css' +import '@amsterdam/design-system-tokens/dist/index.css' import '@amsterdam/design-system-assets/font/index.css' import '@amsterdam/design-system-css/dist/index.css' import '../../storybook-overrides.css' diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx index 968079d5f0..a6d0a561a1 100644 --- a/storybook/storybook-react/src/Grid/Grid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -11,23 +11,11 @@ import README from "../../../../packages/css/src/components/grid/README.md?raw"; The pink areas below represent the columns of the grid. The spaces in between are white. -### Spacious - -For websites, the grid is quite spacious. -This is one of the core tenets of our visual identity. - The grid has 12 columns on wide screens, so all 12 cells in this example are in a row. On narrow screens, you will see three rows of four columns; on medium-wide screens, one row of eight and one of four. -### Compact - -For applications, so much white space is not necessary, even counterproductive. -That’s why there is a compact version of the grid. - - - ### Vertical Margin Unlike the horizontal margins between columns, the vertical ones above and below are adjustable. diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx index 5662ff19b0..fa20e98ef6 100644 --- a/storybook/storybook-react/src/Grid/Grid.stories.tsx +++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx @@ -15,11 +15,6 @@ const meta = { children: { table: { disable: true }, }, - compact: { - control: { - type: 'boolean', - }, - }, gapVertical: { control: { type: 'radio', @@ -91,14 +86,6 @@ export const Default: Story = { }, } -export const Compact: Story = { - ...StoryTemplate, - args: { - children: TwelveGridCells, - compact: true, - }, -} - export const VerticalSpace: Story = { ...StoryTemplate, args: {