From 70e6b9ea687f68fad5f1fa6da42e1f917133d584 Mon Sep 17 00:00:00 2001 From: Fynn Feldpausch Date: Fri, 20 Oct 2023 12:48:04 +0200 Subject: [PATCH] feat(core)!: full rework of editorial typo styles incl. removal of default margins (#405) --- .github/workflows/angular.yml | 5 +- .github/workflows/core.yml | 5 +- .github/workflows/react.yml | 5 +- .github/workflows/tokens.yml | 5 +- core/src/components/cat-alert/cat-alert.scss | 1 - core/src/components/cat-card/cat-card.scss | 1 - .../components/cat-checkbox/cat-checkbox.scss | 2 - .../cat-datepicker-inline.scss | 1 - .../cat-datepicker/cat-datepicker.scss | 1 - .../cat-form-hint/cat-form-hint.scss | 13 ++- core/src/components/cat-input/cat-input.scss | 3 +- core/src/components/cat-radio/cat-radio.scss | 2 - .../cat-select-demo/cat-select-demo.tsx | 3 +- .../src/components/cat-select/cat-select.scss | 11 +- .../components/cat-skeleton/cat-skeleton.scss | 4 +- .../components/cat-textarea/cat-textarea.scss | 1 - .../src/components/cat-toggle/cat-toggle.scss | 2 - core/src/index.html | 24 ++-- core/src/styles/_snippets/_checkbox-hint.scss | 20 ---- core/src/styles/_snippets/_form-label.scss | 14 +-- core/src/styles/_variables.scss | 31 +++++- core/src/styles/core/_base.scss | 6 +- core/src/styles/core/_form.scss | 14 +++ core/src/styles/core/_notification.scss | 5 +- core/src/styles/core/_typography.scss | 105 +++--------------- core/src/styles/index.scss | 1 + core/src/styles/index.shadow.scss | 1 + core/src/styles/utils/_typography.mixins.scss | 29 +---- core/src/styles/vendor/_flatpickr.scss | 16 +-- release-please-config.json | 15 +-- tokens/dist/export/figma.json | 20 +--- tokens/dist/export/theme.json | 10 +- tokens/dist/export/zeroheight.json | 20 +--- tokens/src/color/ui.json | 24 +--- 34 files changed, 141 insertions(+), 279 deletions(-) delete mode 100644 core/src/styles/_snippets/_checkbox-hint.scss create mode 100644 core/src/styles/core/_form.scss diff --git a/.github/workflows/angular.yml b/.github/workflows/angular.yml index 3d32322b..ce6f875d 100644 --- a/.github/workflows/angular.yml +++ b/.github/workflows/angular.yml @@ -3,7 +3,10 @@ name: Angular on: push: branches: - - "*" + - main + paths: + - "angular/**" + pull_request: paths: - "angular/**" diff --git a/.github/workflows/core.yml b/.github/workflows/core.yml index 6650fc62..05dbcecf 100644 --- a/.github/workflows/core.yml +++ b/.github/workflows/core.yml @@ -3,7 +3,10 @@ name: Core on: push: branches: - - "*" + - main + paths: + - "core/**" + pull_request: paths: - "core/**" diff --git a/.github/workflows/react.yml b/.github/workflows/react.yml index 5713f781..c12acbfd 100644 --- a/.github/workflows/react.yml +++ b/.github/workflows/react.yml @@ -3,7 +3,10 @@ name: React on: push: branches: - - "*" + - main + paths: + - "react/**" + pull_request: paths: - "react/**" diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml index 96199a08..da05f53f 100644 --- a/.github/workflows/tokens.yml +++ b/.github/workflows/tokens.yml @@ -3,7 +3,10 @@ name: Tokens on: push: branches: - - "*" + - main + paths: + - "tokens/**" + pull_request: paths: - "tokens/**" diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss index 00f265e2..590b30f5 100644 --- a/core/src/components/cat-alert/cat-alert.scss +++ b/core/src/components/cat-alert/cat-alert.scss @@ -7,7 +7,6 @@ gap: 0.5rem; padding: 1.25rem; border-radius: cat-border-radius('l'); - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/components/cat-card/cat-card.scss b/core/src/components/cat-card/cat-card.scss index 721ac57a..4876253b 100644 --- a/core/src/components/cat-card/cat-card.scss +++ b/core/src/components/cat-card/cat-card.scss @@ -5,7 +5,6 @@ $-padding: 1.25rem; :host { display: block; - margin-bottom: $cat-body-margin-bottom; border-radius: cat-border-radius('l'); background-color: cat-token('color.ui.background.surface'); padding: $-padding; diff --git a/core/src/components/cat-checkbox/cat-checkbox.scss b/core/src/components/cat-checkbox/cat-checkbox.scss index e9bbbf65..681b1d0f 100644 --- a/core/src/components/cat-checkbox/cat-checkbox.scss +++ b/core/src/components/cat-checkbox/cat-checkbox.scss @@ -1,7 +1,6 @@ @use 'variables' as *; @use 'mixins' as *; @use 'src/components/cat-form-hint/cat-form-hint'; -@use '_snippets/checkbox-hint'; $checkbox-width: 1.25rem; $checkbox-height: 1.25rem; @@ -10,7 +9,6 @@ $checkbox-height: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss index 03e03900..af6d08fb 100644 --- a/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss +++ b/core/src/components/cat-datepicker-inline/cat-datepicker-inline.scss @@ -6,7 +6,6 @@ :host { display: inline-flex; - margin-bottom: $cat-body-margin-bottom; > div { display: flex; diff --git a/core/src/components/cat-datepicker/cat-datepicker.scss b/core/src/components/cat-datepicker/cat-datepicker.scss index 722609ee..8eb5dfce 100644 --- a/core/src/components/cat-datepicker/cat-datepicker.scss +++ b/core/src/components/cat-datepicker/cat-datepicker.scss @@ -3,7 +3,6 @@ :host { display: flex; - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/components/cat-form-hint/cat-form-hint.scss b/core/src/components/cat-form-hint/cat-form-hint.scss index b209652d..020e9b03 100644 --- a/core/src/components/cat-form-hint/cat-form-hint.scss +++ b/core/src/components/cat-form-hint/cat-form-hint.scss @@ -1,15 +1,22 @@ @use 'variables' as *; @use 'mixins' as *; -.hint-section { +.hint-wrapper { + flex: 0 1 auto; display: flex; gap: 0.5rem; +} + +.hint-section { + flex: 1 1 auto; + display: flex; flex-direction: column; - color: rgb(var(--cat-hint-color, inherit)); + gap: 0.25rem; + color: cat-token('color.ui.font.muted'); + @include cat-body('s', null); .input-hint, ::slotted([slot='hint']) { - @include cat-body('s'); margin: 0 !important; } } diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss index 90e918fb..3f5f44d4 100644 --- a/core/src/components/cat-input/cat-input.scss +++ b/core/src/components/cat-input/cat-input.scss @@ -6,8 +6,7 @@ :host { display: flex; - @include cat-body('m'); - margin-bottom: $cat-body-margin-bottom; + @include cat-body('m', null); } :host([hidden]) { diff --git a/core/src/components/cat-radio/cat-radio.scss b/core/src/components/cat-radio/cat-radio.scss index fc9145b6..c543f199 100644 --- a/core/src/components/cat-radio/cat-radio.scss +++ b/core/src/components/cat-radio/cat-radio.scss @@ -1,7 +1,6 @@ @use 'variables' as *; @use 'mixins' as *; @use 'src/components/cat-form-hint/cat-form-hint'; -@use '_snippets/checkbox-hint'; $radio-width: 1.25rem; $radio-height: 1.25rem; @@ -10,7 +9,6 @@ $radio-height: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/components/cat-select-demo/cat-select-demo.tsx b/core/src/components/cat-select-demo/cat-select-demo.tsx index ff615f29..34a87e11 100644 --- a/core/src/components/cat-select-demo/cat-select-demo.tsx +++ b/core/src/components/cat-select-demo/cat-select-demo.tsx @@ -15,8 +15,7 @@ interface Country { } @Component({ - tag: 'cat-select-demo', - shadow: true + tag: 'cat-select-demo' }) export class CatSelectTest { private multipleSelect?: HTMLCatSelectElement; diff --git a/core/src/components/cat-select/cat-select.scss b/core/src/components/cat-select/cat-select.scss index c21770bd..0ac6f92c 100644 --- a/core/src/components/cat-select/cat-select.scss +++ b/core/src/components/cat-select/cat-select.scss @@ -10,7 +10,6 @@ gap: 0.5rem; line-height: 1.25rem; position: relative; - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { @@ -38,12 +37,6 @@ label { gap: 1rem; } -.input-optional { - margin-left: 0.25rem; - @include cat-body('xs'); - color: cat-token('color.ui.font.muted'); -} - .select-wrapper { display: flex; align-items: flex-start; @@ -208,14 +201,14 @@ cat-spinner { } .select-empty { - margin: $cat-body-margin-bottom 0; + margin: 1rem 0; padding: 0 1.25rem; } .select-options { list-style-type: none; margin: 0; - padding: $cat-body-margin-bottom * 0.5 0; + padding: 0.5rem 0; cat-checkbox, .select-option-single { diff --git a/core/src/components/cat-skeleton/cat-skeleton.scss b/core/src/components/cat-skeleton/cat-skeleton.scss index cc42eb08..4144506d 100644 --- a/core/src/components/cat-skeleton/cat-skeleton.scss +++ b/core/src/components/cat-skeleton/cat-skeleton.scss @@ -34,11 +34,11 @@ $skeleton-sizes: ( display: none; } -:host([variant='head']) { +:host([variant='head']:not(:last-child)) { margin-bottom: $cat-head-margin-bottom; } -:host([variant='body']) { +:host([variant='body']:not(:last-child)) { margin-bottom: $cat-body-margin-bottom; } diff --git a/core/src/components/cat-textarea/cat-textarea.scss b/core/src/components/cat-textarea/cat-textarea.scss index 02a38818..2d6a3f70 100644 --- a/core/src/components/cat-textarea/cat-textarea.scss +++ b/core/src/components/cat-textarea/cat-textarea.scss @@ -9,7 +9,6 @@ flex-direction: column; gap: 0.5rem; @include cat-body('m'); - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss index 71ce2a90..7f318171 100644 --- a/core/src/components/cat-toggle/cat-toggle.scss +++ b/core/src/components/cat-toggle/cat-toggle.scss @@ -1,7 +1,6 @@ @use 'variables' as *; @use 'mixins' as *; @use 'src/components/cat-form-hint/cat-form-hint'; -@use '_snippets/checkbox-hint'; $toggle-width: 2rem; $toggle-height: 1.25rem; @@ -10,7 +9,6 @@ $toggle-height: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; - margin-bottom: $cat-body-margin-bottom; } :host([hidden]) { diff --git a/core/src/index.html b/core/src/index.html index d3a95e05..40b88aa0 100644 --- a/core/src/index.html +++ b/core/src/index.html @@ -337,32 +337,31 @@

Layout

Button

Button -

Variant

- Filled - Outlined - Text - Link - -

Color

+

Color & Variant

Primary Primary Primary + Primary

Secondary Secondary Secondary + Secondary

Danger Danger Danger + Danger

Success Success Success + Success

Warning Warning Warning + Warning

Size

Size XS @@ -973,6 +972,11 @@

Scrollable

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

@@ -1145,7 +1149,7 @@

Whereas recognition of the inherent dignity

h1, .cat-h1

Whereas recognition of the inherent dignity

- h2, .cat-h3 + h2, .cat-h2

Whereas recognition of the inherent dignity

h3, .cat-h3 @@ -1219,7 +1223,7 @@
Body styles
- +
Example article

Typesetting test

@@ -1340,7 +1344,7 @@

Measuring Employee Engagement

Understanding the level of engagement in an organization is essential for its continual improvement. Surveys, feedback sessions, and monitoring key performance indicators can provide valuable insights.

- +
diff --git a/core/src/styles/_snippets/_checkbox-hint.scss b/core/src/styles/_snippets/_checkbox-hint.scss deleted file mode 100644 index bedaf836..00000000 --- a/core/src/styles/_snippets/_checkbox-hint.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use 'variables' as *; - -.hint-wrapper { - flex: 0 1 auto; - display: flex; - gap: 0.5rem; -} - -.hint-section { - flex: 1 1 auto; - min-width: 0; -} - -.input-hint, -::slotted([slot='hint']) { - color: cat-token('color.ui.font.muted'); - line-height: 1.5; - flex: 1 1 auto; - min-width: 0; -} diff --git a/core/src/styles/_snippets/_form-label.scss b/core/src/styles/_snippets/_form-label.scss index e93911db..aa29299a 100644 --- a/core/src/styles/_snippets/_form-label.scss +++ b/core/src/styles/_snippets/_form-label.scss @@ -31,23 +31,19 @@ $cat-input-height: 2.5rem; flex-grow: 1; justify-content: space-between; gap: 0.25rem; + color: cat-token('color.ui.font.muted'); } -.label-optional { - display: flex; +.label-optional, +.label-character-count { + display: inline-flex; align-items: center; max-height: 1.25rem; - @include cat-body('xs'); - color: cat-token('color.ui.font.muted'); + @include cat-body('xs', null); } .label-character-count { - display: flex; - align-items: center; margin-left: auto; - max-height: 1.25rem; - @include cat-body('xs'); - color: cat-token('color.ui.font.muted'); } .input-horizontal, diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss index c58a81f1..1f2bded5 100644 --- a/core/src/styles/_variables.scss +++ b/core/src/styles/_variables.scss @@ -1,12 +1,25 @@ @use 'variables.tokens' as *; @forward 'variables.tokens'; +// -------- +// -- Variables +// These variables are not part of the design tokens, as they do not have a +// corresponding value assigned to them. They are still used throughout the +// design system to allow for easy customization while maintaining correct +// style inheritance. +// -------- + +$cat-font-family-head: var(--cat-font-family-head); +$cat-font-color-head: rgb(var(--cat-font-color-head)); +$cat-font-color-mono: rgb(var(--cat-font-color-mono)); + // -------- // -- Spacings // -------- -$cat-head-margin-bottom: 0.5rem; -$cat-body-margin-bottom: 1rem; +$cat-head-margin-bottom: 1rem; +$cat-body-margin-bottom: 2rem; +$cat-form-margin-bottom: 1.5rem; $cat-nav-padding-horizontal: 0.75rem; // -------- @@ -14,6 +27,20 @@ $cat-nav-padding-horizontal: 0.75rem; // -------- $cat-mark-color: cat-token('color.theme.primary.bg', 0.2); +/* stylelint-disable value-keyword-case */ +$font-fallback-base: + system-ui, + -apple-system, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + 'Liberation Sans', + Arial, + sans-serif !default; +$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default; +$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default; +/* stylelint-enable value-keyword-case */ // -------- // -- Elevations diff --git a/core/src/styles/core/_base.scss b/core/src/styles/core/_base.scss index e383a590..7c3cc35c 100644 --- a/core/src/styles/core/_base.scss +++ b/core/src/styles/core/_base.scss @@ -1,8 +1,6 @@ @use '../variables' as *; @use '../mixins' as *; -// ---- Typography - html, body { background-color: cat-token('color.ui.background.canvas'); @@ -10,6 +8,6 @@ body { body { @include cat-body('m'); - font-family: cat-body-font-family(); - color: cat-token('color.ui.font.body'); + font-family: cat-token('font.family.body'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; + color: cat-token('color.ui.font.base'); } diff --git a/core/src/styles/core/_form.scss b/core/src/styles/core/_form.scss new file mode 100644 index 00000000..35247e82 --- /dev/null +++ b/core/src/styles/core/_form.scss @@ -0,0 +1,14 @@ +@use '../variables' as *; +@use '../mixins' as *; + +.cat-form { + :is(cat-checkbox, cat-datepicker, cat-inline, cat-input, cat-radio-group, cat-select, cat-textarea, cat-toggle):not( + :last-child + ) { + margin-bottom: $cat-form-margin-bottom; + } + + cat-radio:not(:last-child) { + margin-bottom: 0.5rem; + } +} diff --git a/core/src/styles/core/_notification.scss b/core/src/styles/core/_notification.scss index b6a75ca2..7e709e41 100644 --- a/core/src/styles/core/_notification.scss +++ b/core/src/styles/core/_notification.scss @@ -7,14 +7,13 @@ background: cat-token('color.ui.background.surface'); padding: 1.25rem; box-shadow: none; - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); width: 400px; max-width: 400px; cursor: unset; &.cat-toastify-dark { - --cat-font-color-head: #{cat-token('color.ui.font.headInverted', $wrap: false)}; - --cat-font-color-body: #{cat-token('color.ui.font.bodyInverted', $wrap: false)}; + --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)}; --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)}; --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover', $wrap: false)}; --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive', $wrap: false)}; diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss index 4ae9e93c..1dfd67df 100644 --- a/core/src/styles/core/_typography.scss +++ b/core/src/styles/core/_typography.scss @@ -1,15 +1,16 @@ @use '../variables' as *; @use '../mixins' as *; -:where(h1, h2, h3, h4, h5, h6), +// -- reset margins + +:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, blockquote, figure, pre, hr), .cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6 { - margin-top: 0; - margin-bottom: $cat-head-margin-bottom; + margin: 0; } // -- head styles @@ -34,15 +35,9 @@ } } -:where(p) { - margin-top: 0; - margin-bottom: $cat-body-margin-bottom; -} - hr, .cat-hr { display: block; - margin: $cat-body-margin-bottom 0; border: 0; height: 1px; background-color: cat-token('color.ui.border.default'); @@ -120,11 +115,6 @@ dl { } } -:where(ol, ul, dl) { - margin-top: 0; - margin-bottom: $cat-body-margin-bottom; -} - nav ol, nav ul, ol.cat-plain, @@ -151,10 +141,6 @@ dd { // ----- blockquotes & figures -:where(blockquote, figure) { - margin: 0 0 $cat-body-margin-bottom; -} - blockquote { padding: 0.75rem 0 0.75rem calc(1.5rem - 2px); border-left: 2px solid cat-token('color.ui.border.quote'); @@ -181,7 +167,7 @@ blockquote { } figcaption { - @include cat-body('s'); + @include cat-body('s', null); } // ----- code @@ -209,11 +195,6 @@ pre { } } -:where(pre) { - margin-top: 0; - margin-bottom: $cat-body-margin-bottom; -} - kbd, code { margin: 0 0.125rem; @@ -241,81 +222,29 @@ code { // ----- editorial typography -cat-article, .cat-article { - font-size: 1rem; - - $cat-head-margin-bottom: 1.5rem; - $cat-body-margin-bottom: 2.5rem; - - :where(h1, h2, h3, h4, h5, h6), - .cat-h1, - .cat-h2, - .cat-h3, - .cat-h4, - .cat-h5, - .cat-h6 { - margin-top: 0; + :where(h1, h2, h3), + :is(.cat-h1, .cat-h2, .cat-h3) { + color: $cat-font-color-head; margin-bottom: $cat-head-margin-bottom; - } - - .type-space-small { - margin-top: 0; - margin-bottom: calc($cat-body-margin-bottom * 0.2); - } - .type-space-medium { - margin-top: 0; - margin-bottom: calc($cat-body-margin-bottom * 0.4); + &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) { + margin-bottom: $cat-head-margin-bottom * 0.5; + } } - // :where(h1, h2, h3, h4, h5, h6, .cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has( - // + h1, - // + h2, - // + h3, - // + h4, - // + h5, - // + h6, - // + .cat-h1, - // + .cat-h2, - // + .cat-h3, - // + .cat-h4, - // + .cat-h5, - // + .cat-h6 - // ) { - // margin-top: 0; - // margin-bottom:calc($cat-body-margin-bottom * 0.2); - // } - - // :where(h3, h4, h5, h6, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(+ ul, + ol, + p) { - // margin-bottom:calc($cat-body-margin-bottom * 0.4); - // } - - h5, - .cat-h5 { - font-size: 1rem; + :where(h4, h5, h6), + :is(.cat-h4, .cat-h5, .cat-h6) { + color: $cat-font-color-head; + margin-bottom: $cat-head-margin-bottom * 0.5; } - :where(p), - ol, - ul, - blockquote, - figure { - margin-top: 0; + :where(p, ol, ul, dl, blockquote, figure, pre, cat-alert, cat-card) { margin-bottom: $cat-body-margin-bottom; } - :where(p):has(+ p) { - margin-bottom: calc($cat-body-margin-bottom * 0.4); - } - hr, .cat-hr { - margin: $cat-body-margin-bottom 0; - } - - ol li, - ul li { - margin-bottom: calc($cat-body-margin-bottom * 0.2); + margin: $cat-body-margin-bottom; } } diff --git a/core/src/styles/index.scss b/core/src/styles/index.scss index 70d04392..fe5103db 100644 --- a/core/src/styles/index.scss +++ b/core/src/styles/index.scss @@ -13,6 +13,7 @@ // -- Core @import 'core/base'; @import 'core/dialog'; +@import 'core/form'; @import 'core/nav'; @import 'core/notification'; @import 'core/typography'; diff --git a/core/src/styles/index.shadow.scss b/core/src/styles/index.shadow.scss index 28a0edc6..395f9a1a 100644 --- a/core/src/styles/index.shadow.scss +++ b/core/src/styles/index.shadow.scss @@ -3,6 +3,7 @@ @import '~sanitize.css/reduce-motion.css'; // -- Core +@import 'core/form'; @import 'core/nav'; @import 'core/typography'; diff --git a/core/src/styles/utils/_typography.mixins.scss b/core/src/styles/utils/_typography.mixins.scss index b46e1759..5888e3de 100644 --- a/core/src/styles/utils/_typography.mixins.scss +++ b/core/src/styles/utils/_typography.mixins.scss @@ -1,26 +1,7 @@ @use '../variables' as *; -/* stylelint-disable value-keyword-case */ -$font-fallback-sans-serif: - system-ui, - -apple-system, - 'Segoe UI', - Roboto, - 'Helvetica Neue', - 'Noto Sans', - 'Liberation Sans', - Arial, - sans-serif !default; -$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default; -$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default; -/* stylelint-enable value-keyword-case */ - // ---- Head -@function cat-head-font-family() { - @return cat-token('font.family.head'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji; -} - @function cat-head-font-size($size) { @return cat-token('size.font.head.#{$size}'); } @@ -30,20 +11,16 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M } @mixin cat-head($size, $weight: cat-token('font.weight.head')) { - font-family: cat-head-font-family(); + // skip color, as it is only set for editorial styles + font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji; font-size: cat-head-font-size($size); line-height: cat-head-line-height($size); - color: cat-token('color.ui.font.head'); font-weight: $weight; font-feature-settings: 'pnum'; } // ---- Body -@function cat-body-font-family() { - @return cat-token('font.family.body'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji; -} - @function cat-body-font-size($size) { @return cat-token('size.font.body.#{$size}'); } @@ -78,7 +55,7 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M font-family: cat-mono-font-family(); font-size: cat-mono-font-size($size); line-height: cat-mono-line-height($size); - color: cat-token('color.ui.font.mono'); + color: $cat-font-color-mono; font-weight: $weight; } diff --git a/core/src/styles/vendor/_flatpickr.scss b/core/src/styles/vendor/_flatpickr.scss index 3d19946b..ddae9f30 100644 --- a/core/src/styles/vendor/_flatpickr.scss +++ b/core/src/styles/vendor/_flatpickr.scss @@ -105,7 +105,7 @@ color: cat-token('color.ui.font.muted'); &:hover { - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); } } @@ -114,7 +114,7 @@ .flatpickr-weekday { color: cat-token('color.ui.font.muted'); - @include cat-body(xs, $weight: 700); + @include cat-body(xs, 700); } } @@ -134,7 +134,7 @@ span.flatpickr-day, span.flatpickr-day:hover { - @include cat-body(xs, $weight: 700); + @include cat-body(xs, 700); color: cat-token('color.ui.font.muted'); text-align: center; line-height: 2.25rem; @@ -152,7 +152,7 @@ } .flatpickr-day { - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); height: 2.25rem; line-height: 2.25rem; border: 0; @@ -263,7 +263,7 @@ } &::after { - @include cat-body(xs, $weight: 700); + @include cat-body(xs, 700); position: static; border: 0 !important; font-size: 10px; @@ -273,7 +273,7 @@ } &:hover { - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); background: transparent; } } @@ -305,7 +305,7 @@ .flatpickr-time .flatpickr-am-pm { margin: 0 0.25rem; @include cat-head(4, 400); - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); line-height: 2.25rem; } @@ -325,7 +325,7 @@ input { background: transparent !important; - color: cat-token('color.ui.font.body'); + color: cat-token('color.ui.font.base'); font-size: cat-token('size.font.body.m'); line-height: 2.25rem; font-family: inherit; diff --git a/release-please-config.json b/release-please-config.json index 164ae90c..26da6280 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -5,24 +5,19 @@ "commit-search-depth": 250, "packages": { "tokens": { - "component": "catalyst-tokens", - "changelog-path": "../CHANGELOG.md" + "component": "catalyst-tokens" }, "core": { - "component": "catalyst-core", - "changelog-path": "../CHANGELOG.md" + "component": "catalyst-core" }, "angular/projects/catalyst": { - "component": "catalyst-angular", - "changelog-path": "../../../CHANGELOG.md" + "component": "catalyst-angular" }, "angular/projects/catalyst-formly": { - "component": "catalyst-angular-formly", - "changelog-path": "../../../CHANGELOG.md" + "component": "catalyst-angular-formly" }, "react": { - "component": "catalyst-react", - "changelog-path": "../CHANGELOG.md" + "component": "catalyst-react" } }, "plugins": [ diff --git a/tokens/dist/export/figma.json b/tokens/dist/export/figma.json index 3fe90bf7..105f3198 100644 --- a/tokens/dist/export/figma.json +++ b/tokens/dist/export/figma.json @@ -514,27 +514,11 @@ } }, "font": { - "head": { + "base": { "$type": "color", "$value": "#000000" }, - "headInverted": { - "$type": "color", - "$value": "#ffffff" - }, - "body": { - "$type": "color", - "$value": "#000000" - }, - "bodyInverted": { - "$type": "color", - "$value": "#ffffff" - }, - "mono": { - "$type": "color", - "$value": "#000000" - }, - "monoInverted": { + "baseInverted": { "$type": "color", "$value": "#ffffff" }, diff --git a/tokens/dist/export/theme.json b/tokens/dist/export/theme.json index f7e5e300..e0955b01 100644 --- a/tokens/dist/export/theme.json +++ b/tokens/dist/export/theme.json @@ -207,15 +207,7 @@ "$type": "color", "$value": "#0071ff" }, - "font-color-head": { - "$type": "color", - "$value": "#000000" - }, - "font-color-body": { - "$type": "color", - "$value": "#000000" - }, - "font-color-mono": { + "font-color-base": { "$type": "color", "$value": "#000000" }, diff --git a/tokens/dist/export/zeroheight.json b/tokens/dist/export/zeroheight.json index 31ba2f90..cfc4b50c 100644 --- a/tokens/dist/export/zeroheight.json +++ b/tokens/dist/export/zeroheight.json @@ -692,27 +692,11 @@ } }, "font": { - "head": { + "base": { "$type": "color", "$value": "#000000" }, - "headInverted": { - "$type": "color", - "$value": "#ffffff" - }, - "body": { - "$type": "color", - "$value": "#000000" - }, - "bodyInverted": { - "$type": "color", - "$value": "#ffffff" - }, - "mono": { - "$type": "color", - "$value": "#000000" - }, - "monoInverted": { + "baseInverted": { "$type": "color", "$value": "#ffffff" }, diff --git a/tokens/src/color/ui.json b/tokens/src/color/ui.json index 03bc09fc..6d38b88b 100644 --- a/tokens/src/color/ui.json +++ b/tokens/src/color/ui.json @@ -64,30 +64,12 @@ } }, "font": { - "head": { + "base": { "$type": "color", "$value": "{color.base.black.value}", - "cssProp": "font-color-head" + "cssProp": "font-color-base" }, - "headInverted": { - "$type": "color", - "$value": "{color.base.white.value}" - }, - "body": { - "$type": "color", - "$value": "{color.base.black.value}", - "cssProp": "font-color-body" - }, - "bodyInverted": { - "$type": "color", - "$value": "{color.base.white.value}" - }, - "mono": { - "$type": "color", - "$value": "{color.base.black.value}", - "cssProp": "font-color-mono" - }, - "monoInverted": { + "baseInverted": { "$type": "color", "$value": "{color.base.white.value}" },