We use typography to establish hierarchy, organize information, and guide our users through a product or experience.
+Daffodil uses typography to establish hierarchy, organize information, and guide our users through a product or experience.
The Design Land typopgrahic scale is designed with visual distinctions to help our users better understand content and UI. Text sizes, styles, and layouts were selected to maintain logical hierarchies and drive consistency throughout an application.
+The typopgrahic scale is designed with visual distinctions to help our users better understand content and UI. Text sizes, styles, and layouts were selected to maintain logical hierarchies and drive consistency throughout an application.
Our type scale is based on an 8px system, where the type is largely divisible by 8. For smaller sizes, the system allows for the scale to be divisble by 4.
diff --git a/libs/design/package.json b/libs/design/package.json index d0571c0d54..3655ab5981 100644 --- a/libs/design/package.json +++ b/libs/design/package.json @@ -69,8 +69,8 @@ "./scss/daff-typography": { "sass": "./scss/daff-typography.scss" }, - "./scss/typography/classes": { - "sass": "./scss/typography/_classes.scss" + "./scss/typography": { + "sass": "./scss/typography/_index.scss" } } } diff --git a/libs/design/scss/typography/README.md b/libs/design/scss/typography/README.md index 9e636144cf..3db5a0ea84 100644 --- a/libs/design/scss/typography/README.md +++ b/libs/design/scss/typography/README.md @@ -1,24 +1,24 @@ # Typography -Daffodil uses typography to establish hierarchy and create clear visual patterns to guide users through a product or experience. +Daffodil uses typography to establish hierarchy, organize information, and guide our users through a product or experience. ## Usage -To include typography in your project, you can add the following in your Sass file: +To include typography in your project, you can include the following in your Sass file: ```scss -@use '@daffodil/design/scss/utilities'; +@use '@daffodil/design/scss/typography'; ``` ## Type Scale -`@daffodil/design`'s typographic scale is designed with visual distinctions to help users better understand content and UI. Text sizes, styles, and layouts have been chosen to maintain logical hierarchies and drive consistency throughout an application. +The typographic scale is designed with visual distinctions to help users better understand content and UI. Text sizes, styles, and layouts have been chosen to maintain logical hierarchies and drive consistency throughout an application. ### 8px System Our type scale is based on an 8px system, where the type is largely divisible by 8. For smaller sizes, the system allows for the scale to be divisible by 4. Font sizes are typically smaller on mobile and scaled up at the `tablet` breakpoint to be larger on desktop. -## Font Stack -Daffodil uses a system font stack to maximize on performance, legibility, and accessibility. System fonts play into the improvement of today's rich displays Additionally, system fonts provides a seamless experience for users because the application feel more like it blends in with their device's OS. +## Default Font Stack +By default, Daffodil uses a system font stack to maximize on performance, legibility, and accessibility. System fonts play into the improvement of today's rich displays Additionally, system fonts provides a seamless experience for users because the application feel more like it blends in with their device's OS. ```scss -font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; ``` * `-apple-system` and `BlinkMacSystemFont` targets default fonts in Safari, Firefox, and Chrome on macOS and iOS. @@ -26,6 +26,14 @@ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sa * `Helvetica` and `Arial` are added as fallbacks. * `Apple Color Emoji`, `Segoe UI Emoji`, and `Segoe UI Symbol` are included so that emojis are rendered correctly in macOS and Windows. +To customize your project's font stack, you can pass the `$font-family-base` variable to the typography module in your `style.scss` file: + +```scss +@use '@daffodil/design/scss/typography' with ( + $font-family-base: 'Arial', +); +``` + ## Typography Mixins Typography mixins are used to keep typography consistent with logical hierarchies. Utilizing the mixin ensures that content within the UI are clear and easily recognizable. Mixins are available for headlines, body, subheading, and caption. They are used within the `@daffodil/design` components and can also be used within custom CSS. @@ -46,10 +54,10 @@ The headline mixins are responsive and will adjust at the `tablet` breakpoint. **Example:** ```scss -@use '@daffodil/design/scss/utilities'; +@use '@daffodil/design/scss/typography'; .title { - @include utilities.headline-xl; + @include typography.headline-xl(); } ``` @@ -67,13 +75,13 @@ The headline mixins are responsive and will adjust at the `tablet` breakpoint. You can include the typography utility classes in your project by writing the following in your Sass file: ```scss -@use '@daffodil/design/scss/typography/classes'; +@use '@daffodil/design/scss/typography'; ``` Otherwise, you can use the mixins in your project by using the following module in your Sass file: ```scss -@use '@daffodil/design/scss/utilities'; +@use '@daffodil/design/scss/typography'; ``` ## Typography Variables diff --git a/libs/design/scss/typography/_all-typography.scss b/libs/design/scss/typography/_all-typography.scss new file mode 100644 index 0000000000..0a0c08b4df --- /dev/null +++ b/libs/design/scss/typography/_all-typography.scss @@ -0,0 +1,149 @@ +@use '../layout'; + +$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default; +$font-family-mono: ui-monospace, 'SFMono-Regular', SF Mono, Menlo, Consolas, + 'Liberation Mono', monospace; + +// these three variables will be deprecated in v1.0.0 in favor of more consistent naming +$body-font-family: $font-family-base; +$base-font-family: $body-font-family; +$monospace-font-family: $font-family-mono; + +$font-size-sm: 0.875rem; +$font-size-base: 1rem; +$font-size-md: 1.25rem; +$font-size-lg: 1.5rem; + +// these variables will be deprecated in v1.0.0 in favor of more consistent naming +$large-font-size: 1.5rem; +$medium-font-size: 1.25rem; +$normal-font-size: 1rem; +$small-font-size: 0.875rem; + +$bold-font-weight: bold; + +// Changes the weight of text to bold +@mixin embolden() { + font-weight: $bold-font-weight; +} + +@mixin headline-xl() { + @include embolden(); + font-size: 2.5rem; + line-height: 2.75rem; + + @include layout.breakpoint(tablet) { + font-size: 3.5rem; + line-height: 4rem; + } +} + +@mixin headline-lg() { + @include embolden(); + font-size: 2rem; + line-height: 2.25rem; + + @include layout.breakpoint(tablet) { + font-size: 3rem; + line-height: 3.5rem; + } +} + +@mixin headline-md() { + @include embolden(); + font-size: 1.5rem; + line-height: 1.75rem; + + @include layout.breakpoint(tablet) { + font-size: 2rem; + line-height: 2.5rem; + } +} + +@mixin headline-sm() { + @include embolden(); + font-size: 1.25rem; + line-height: 1.5rem; + + @include layout.breakpoint(tablet) { + font-size: 1.5rem; + line-height: 2rem; + } +} + +@mixin body-lg() { + font-size: 1.5rem; + font-weight: 400; + line-height: 2rem; +} + +@mixin body-md() { + font-size: 1.25rem; + font-weight: 400; + line-height: 1.75rem; +} + +@mixin body-sm() { + font-size: 1rem; + font-weight: 400; + line-height: 1.5rem; +} + +@mixin body-xs() { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.25rem; +} + +@mixin subheading() { + font-size: 0.875rem; + font-weight: 600; + letter-spacing: 0.03125rem; + line-height: 1rem; + text-transform: uppercase; +} + +@mixin caption() { + font-size: 0.75rem; + line-height: 1rem; + font-weight: 400; +} + +// Forces a line of text to ellipsis once it reaches the +// width of its container. It should only be used if the element +// is `display: block` or `display: inline-block`. + +@mixin text-truncate() { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// @deprecated in v1.0 in favor of text-truncate +@mixin single-line-ellipsis() { + @include text-truncate(); +} + +// @deprecated in v1.0.0 +@mixin uppercase() { + text-transform: uppercase; +} + +.embolden { /* stylelint-disable-line selector-class-pattern */ + @include embolden(); +} + +.uppercase { /* stylelint-disable-line selector-class-pattern */ + text-transform: uppercase; +} + +// deprecate in v1.0 +.single-line-ellipsis { /* stylelint-disable-line selector-class-pattern */ + @include single-line-ellipsis(); +} + +.text-truncate { /* stylelint-disable-line selector-class-pattern */ + @include text-truncate(); +} diff --git a/libs/design/scss/typography/_classes.scss b/libs/design/scss/typography/_classes.scss deleted file mode 100644 index 571d184fde..0000000000 --- a/libs/design/scss/typography/_classes.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use './mixins/text-transform' as *; -@use './mixins/font-weight' as *; -@use './mixins/text-truncate' as *; - -.embolden { /* stylelint-disable-line selector-class-pattern */ - @include embolden(); -} - -.uppercase { /* stylelint-disable-line selector-class-pattern */ - text-transform: uppercase; -} - -// deprecate in v1.0 -.single-line-ellipsis { /* stylelint-disable-line selector-class-pattern */ - @include single-line-ellipsis(); -} - -.text-truncate { /* stylelint-disable-line selector-class-pattern */ - @include text-truncate(); -} diff --git a/libs/design/scss/typography/_index.scss b/libs/design/scss/typography/_index.scss index cf9aeac87a..accd8fee03 100644 --- a/libs/design/scss/typography/_index.scss +++ b/libs/design/scss/typography/_index.scss @@ -1,5 +1 @@ -@forward 'mixins/font-weight'; -@forward 'mixins/sizes'; -@forward 'mixins/text-transform'; -@forward 'mixins/text-truncate'; -@forward 'utilities'; +@forward 'all-typography' \ No newline at end of file diff --git a/libs/design/scss/typography/mixins/_font-weight.scss b/libs/design/scss/typography/mixins/_font-weight.scss deleted file mode 100644 index 42c66689a8..0000000000 --- a/libs/design/scss/typography/mixins/_font-weight.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use '../utilities/variables'; - -// -// @docs -// -// Changes the weight of text to bold -// -// @usage -// ```scss -// @use '@daffodil/design/scss/typography; -// -// @include typography.embolden; -// ``` -// - -@mixin embolden() { - font-weight: variables.$bold-font-weight; -} diff --git a/libs/design/scss/typography/mixins/_sizes.scss b/libs/design/scss/typography/mixins/_sizes.scss deleted file mode 100644 index c37c4dd5d0..0000000000 --- a/libs/design/scss/typography/mixins/_sizes.scss +++ /dev/null @@ -1,84 +0,0 @@ -@use '../../layout' as layout; -@use 'font-weight'; - -@mixin headline-xl() { - @include font-weight.embolden; - font-size: 2.5rem; - line-height: 2.75rem; - - @include layout.breakpoint(tablet) { - font-size: 3.5rem; - line-height: 4rem; - } -} - -@mixin headline-lg() { - @include font-weight.embolden; - font-size: 2rem; - line-height: 2.25rem; - - @include layout.breakpoint(tablet) { - font-size: 3rem; - line-height: 3.5rem; - } -} - -@mixin headline-md() { - @include font-weight.embolden; - font-size: 1.5rem; - line-height: 1.75rem; - - @include layout.breakpoint(tablet) { - font-size: 2rem; - line-height: 2.5rem; - } -} - -@mixin headline-sm() { - @include font-weight.embolden; - font-size: 1.25rem; - line-height: 1.5rem; - - @include layout.breakpoint(tablet) { - font-size: 1.5rem; - line-height: 2rem; - } -} - -@mixin body-lg() { - font-size: 1.5rem; - font-weight: 400; - line-height: 2rem; -} - -@mixin body-md() { - font-size: 1.25rem; - font-weight: 400; - line-height: 1.75rem; -} - -@mixin body-sm() { - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; -} - -@mixin body-xs() { - font-size: 0.875rem; - font-weight: 400; - line-height: 1.25rem; -} - -@mixin subheading() { - font-size: 0.875rem; - font-weight: 600; - letter-spacing: 0.03125rem; - line-height: 1rem; - text-transform: uppercase; -} - -@mixin caption() { - font-size: 0.75rem; - line-height: 1rem; - font-weight: 400; -} diff --git a/libs/design/scss/typography/mixins/_text-transform.scss b/libs/design/scss/typography/mixins/_text-transform.scss deleted file mode 100644 index 0cd86063ac..0000000000 --- a/libs/design/scss/typography/mixins/_text-transform.scss +++ /dev/null @@ -1,4 +0,0 @@ -// @deprecated in v1.0.0 -@mixin uppercase() { - text-transform: uppercase; -} \ No newline at end of file diff --git a/libs/design/scss/typography/mixins/_text-truncate.scss b/libs/design/scss/typography/mixins/_text-truncate.scss deleted file mode 100644 index a26f42e7db..0000000000 --- a/libs/design/scss/typography/mixins/_text-truncate.scss +++ /dev/null @@ -1,23 +0,0 @@ -// @docs -// -// Forces a line of text to ellipsis once it reaches the -// width of its container. It should only be used if the element -// is `display: block` or `display: inline-block`. -// @usage -// ```scss -// @use '@daffodil/design/scss/typography;' -// -// @include typography.text-truncate; -// ``` - -// @deprecated in v1.0 in favor of text-truncate -@mixin single-line-ellipsis() { - @include text-truncate(); -} - -@mixin text-truncate() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} diff --git a/libs/design/scss/typography/utilities/_index.scss b/libs/design/scss/typography/utilities/_index.scss deleted file mode 100644 index aa4ff9a055..0000000000 --- a/libs/design/scss/typography/utilities/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@forward 'variables'; \ No newline at end of file diff --git a/libs/design/scss/typography/utilities/_variables.scss b/libs/design/scss/typography/utilities/_variables.scss deleted file mode 100644 index b398f3db7b..0000000000 --- a/libs/design/scss/typography/utilities/_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -$body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; -$base-font-family: $body-font-family; -$monospace-font-family: ui-monospace, 'SFMono-Regular', SF Mono, Menlo, Consolas, - 'Liberation Mono', monospace; - -$large-font-size: 1.5rem; -$medium-font-size: 1.25rem; -$normal-font-size: 1rem; -$small-font-size: 0.875rem; - -$bold-font-weight: bold; \ No newline at end of file