@daffodil/design 0.42.2 → 0.43.0

package/scss/theming/prebuilt/internal-theme.scss

@@ -0,0 +1,13 @@
+@import '../variables';
+@import '../color';
+@import '../configure-palette';
+@import '../configure-theme';
+@import '../theme';
+
+$primary: daff-configure-palette($daff-blue, 60);
+$secondary: daff-configure-palette($daff-purple, 60);
+$tertiary: daff-configure-palette($daff-turquoise, 60);
+
+$theme: daff-configure-theme($primary, $secondary, $tertiary);
+
+@include daff-theme($theme);

package/scss/typography/README.md

@@ -0,0 +1,88 @@
+# Typography
+Daffodil uses typography to establish hierarchy and create clear visual patterns to guide users through a product or experience.
+
+## Usage
+To include typography in your project, you can add the following in your Sass file:
+
+```scss
+@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.
+
+### 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.
+
+```scss
+font-family: -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.
+* `Segoe UI` is the system font for Windows.
+* `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.
+
+## 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.
+
+The headline mixins are responsive and will adjust at the `tablet` breakpoint.
+
+| Mixin       | Font size: mobile | Line height: mobile | Font size: desktop | Line height: desktop | Font weight | Letter spacing |
+| ----------- | ----------------- | ------------------- | ------------------ | -------------------- | ----------- | -------------- |
+| headline-xl | 40px              | 48px                | 56px               | 64px                 | 700         | 0px            |
+| headline-lg | 32px              | 36px                | 48px               | 56px                 | 700         | 0px            |
+| headline-md | 24px              | 28px                | 32px               | 40px                 | 700         | 0px            |
+| headline-sm | 20px              | 24px                | 24px               | 32px                 | 700         | 0px            |
+| body-lg     | 24px              | 32px                | 24px               | 32px                 | 400         | 0px            |
+| body-md     | 20px              | 28px                | 20px               | 28px                 | 400         | 0px            |
+| body-sm     | 16px              | 24px                | 16px               | 24px                 | 400         | 0px            |
+| body-xs     | 14px              | 20px                | 14px               | 20px                 | 400         | 0px            |
+| subheading  | 14px              | 16px                | 14px               | 16px                 | 700         | 0.5px          |
+| caption     | 12px              | 16px                | 12px               | 16px                 | 400         | 0px            |
+
+**Example:**
+```scss
+@use '@daffodil/design/scss/typography';
+
+.title {
+	@include typography.headline-xl;
+}
+```
+
+## Formatting Utilities and Mixins
+`@daffodil/design` also provides a few mixins to enforce consistency and ease-of-use. We recommend using the utility classes sparingly.
+
+| Class/Mixin   | Description                                                                  |
+| ------------- | ---------------------------------------------------------------------------- |
+| embolden      | Changes the weight of text to 700                                            |
+| uppercase     | Changes the casing of a piece of text to uppercase                           |
+| text-truncate | Forces a line of text to ellipsis once it reaches the width of its container |
+
+> `text-truncate` should only be used if the element is `display: block;` or `display: inline-block;`
+
+**Examples:**
+```html
+<div class="title"><span class="embolden">Daffodil</span> is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.</div>
+```
+
+```scss
+@use '@daffodil/design/scss/typography';
+
+.title {
+	span {
+		@include typography.embolden;
+	}
+}
+```
+
+## Typography Variables
+```scss
+$large-font-size: 1.5rem;
+$medium-font-size: 1.25rem;
+$normal-font-size: 1rem;
+$small-font-size: 0.875rem;
+```

package/scss/typography/_classes.scss

@@ -0,0 +1,20 @@
+@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();
+}

package/scss/typography/_index.scss

@@ -0,0 +1,5 @@
+@forward 'mixins/font-weight';
+@forward 'mixins/sizes';
+@forward 'mixins/text-transform';
+@forward 'mixins/text-truncate';
+@forward 'utilities';

package/scss/typography/mixins/_font-weight.scss

@@ -0,0 +1,18 @@
+@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;
+}

package/scss/typography/mixins/_sizes.scss

@@ -0,0 +1,84 @@
+@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;
+}

package/scss/typography/mixins/_text-transform.scss

@@ -0,0 +1,4 @@
+// @deprecated in v1.0.0
+@mixin uppercase() {
+	text-transform: uppercase;
+}

package/scss/typography/mixins/_text-truncate.scss

@@ -0,0 +1,23 @@
+// @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;
+}

package/scss/typography/utilities/_index.scss

@@ -0,0 +1 @@
+@forward 'variables';

package/scss/typography/utilities/_variables.scss

@@ -0,0 +1,12 @@
+$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;

package/src/atoms/button/README.md

@@ -1,15 +1,16 @@
 # Button
 The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
 
+## Overview
 Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
 - `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
 - `<button>` should be used when a clickable action is performed within the same page.
 
 ## Types
-- `daff-button` -- Rectangular contained button with background color
-- `daff-icon-button` -- Icon button used with icon fonts
+- `daff-button` - Rectangular contained button with background color
+- `daff-icon-button` - Icon button used with icon fonts
 - `daff-raised-button` - Rectangular contained button with background color and elevation
-- `daff-stroked-button` -- Rectangular outlined button with no background color
+- `daff-stroked-button` - Rectangular outlined button with no background color
 
 ### Basic Button
 <design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
@@ -17,21 +18,32 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
 ### Stroked Button
 <design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
 
+> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
+
 ### Raised Button
 <design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
 
 ### Icon Button
 <design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
 
+> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
+
 ### Underline Button
 <design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
 
+## Sizes
+The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
+
+Supported Sizes: `sm | md | lg`
+
+<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
+
 ## Theming
 The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
 
 Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
 
-> For select button types, `white` and `theme` should be used on a darker background in order to have sufficient contrast.
+> For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
 
 ## Status Indicators
 Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
@@ -40,13 +52,6 @@ Supported statuses: `warn | danger | success`
 
 <design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
 
-## Sizes
-The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
-
-Supported Sizes: `sm | md | lg`
-
-<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
-
 ## Accessbility
 Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default. The `<button>` element should be used when a clickable action is performed within the same page. The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
 

package/src/atoms/button/button-theme-variants/button.scss

@@ -0,0 +1,35 @@
+@use '../../../../scss/theming';
+
+@mixin daff-button-theme-variant(
+	$base-color,
+	$hover-color,
+	$active-color: $hover-color
+) {
+	// @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
+	// 	@error 'Button Initial State: ' + map-get($wcag-aa-errors, 'text-contrast');
+	// }
+
+	// @if daff-contrast-ratio($hover-color, daff-text-contrast($base-color)) < 4.5 {
+	// 	@error 'Button Hover State: ' + map-get($wcag-aa-errors, 'text-contrast');
+	// }
+
+	// @if daff-contrast-ratio($active-color, daff-text-contrast($base-color)) < 4.5 {
+	// 	@error 'Button Active State: ' + map-get($wcag-aa-errors, 'text-contrast');
+	// }
+	background-color: $base-color;
+	border: 1px solid $base-color;
+	color: theming.daff-text-contrast($base-color);
+
+	&:hover,
+	&:focus {
+		background-color: $hover-color;
+		border: 1px solid $hover-color;
+		color: theming.daff-text-contrast($hover-color);
+	}
+
+	&:active {
+		background-color: $active-color;
+		border: 1px solid $active-color;
+		color: theming.daff-text-contrast($active-color);
+	}
+}

package/src/atoms/button/button-theme-variants/focus.scss

@@ -0,0 +1,6 @@
+@mixin daff-button-focus-theme-variant($shadow-color) {
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
+	}
+}

package/src/atoms/button/button-theme-variants/icon.scss

@@ -0,0 +1,21 @@
+@mixin daff-icon-button-theme-variant(
+	$base-color: currentColor,
+	$hover-color: currentColor,
+	$active-color: $hover-color
+) {
+	color: $base-color;
+
+	&:hover {
+		color: $hover-color;
+		@if $base-color == currentColor {
+			opacity: 0.8;
+		}
+		@else {
+			opacity: 1;
+		}
+	}
+
+	&:active {
+		color: $active-color;
+	}
+}

package/src/atoms/button/button-theme-variants/raised.scss

@@ -0,0 +1,56 @@
+@use 'sass:map';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
+@use '../../../../scss/accessibility' as a11y;
+
+$black: theming.daff-color(theming.$daff-gray, 110);
+
+@mixin daff-raised-button-theme-variant(
+	$base-color,
+	$active-color,
+	$focus-shadow
+) {
+	@if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
+		@error 'Button Initial State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
+	}
+
+	@if theming.daff-contrast-ratio($base-color, theming.daff-text-contrast($base-color)) < 4.5 {
+		@error 'Button Hover State: '+ map.get(a11y.$wcag-aa-errors, 'text-contrast');
+	}
+
+	@if theming.daff-contrast-ratio($active-color, theming.daff-text-contrast($active-color)) < 4.5 {
+		@error 'Button Active State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
+	}
+	background-color: $base-color;
+	border: 1px solid $base-color;
+	box-shadow:
+		0 3px 5px rgba($black, 0.12),
+		0 1px 3px rgba($black, 0.08);
+	color: theming.daff-text-contrast($base-color);
+
+	&:hover {
+		background-color: $base-color;
+		border: 1px solid $base-color;
+	}
+
+	&:hover,
+	&:active {
+		box-shadow:
+			0 6px 12px rgba($black, 0.12),
+			0 4px 6px rgba($black, 0.1);
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow:
+			0 0 0 4px rgba($focus-shadow, 0.3),
+			0 6px 12px rgba($black, 0.12),
+			0 4px 6px rgba($black, 0.1);
+	}
+
+	&:active {
+		background-color: $active-color;
+		border: 1px solid $active-color;
+		color: theming.daff-text-contrast($active-color);
+	}
+}

package/src/atoms/button/button-theme-variants/stroked.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+
+@mixin daff-stroked-button-theme-variant(
+	$base-color,
+	$font-color,
+	$focus-color
+) {
+	// @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
+	// 	@error 'Stroked Button Hover State: ' + map.get($wcag-aa-errors, 'text-contrast');
+	// }
+
+	// @if daff-contrast-ratio($focus-color, daff-text-contrast($focus-color)) < 4.5 {
+	// 	@error 'Stroked Button Focus State: ' + map.get($wcag-aa-errors, 'text-contrast');
+	// }
+
+	// @if daff-contrast-ratio($focus-color, daff-text-contrast($focus-color)) < 4.5 {
+	// 	@error 'Stroked Button Active State: ' + map.get($wcag-aa-errors, 'text-contrast');
+	// }
+	border: 1px solid $base-color;
+	color: $font-color;
+	background-color: transparent;
+
+	&:hover,
+	&:focus {
+		background-color: $base-color;
+		border: 1px solid $base-color;
+		color: theming.daff-text-contrast($base-color);
+	}
+
+	&:active {
+		background-color: $focus-color;
+		border: 1px solid $focus-color;
+		color: theming.daff-text-contrast($focus-color);
+	}
+}

package/src/atoms/button/button-theme-variants/underline.scss

@@ -0,0 +1,9 @@
+@mixin daff-underline-button-theme-variant(
+	$base-color: currentColor,
+) {
+	color: $base-color;
+
+	&::after {
+		background-color: $base-color;
+	}
+}