@daffodil/design 0.43.1 → 0.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daffodil/design",
-  "version": "0.43.1",
+  "version": "0.45.0",
   "author": "Graycore LLC",
   "license": "MIT",
   "bugs": {
@@ -18,21 +18,37 @@
     "@angular/core": "^13.0.0",
     "@angular/forms": "^13.0.0",
     "@angular/cdk": "^13.0.0",
+    "@daffodil/core": "0.45.0",
     "@fortawesome/angular-fontawesome": "^0.10.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.10.0",
+    "@fortawesome/free-brands-svg-icons": "^5.10.0",
+    "@fortawesome/free-regular-svg-icons": "^5.10.0",
+    "modern-normalize": "^0.5.0",
     "rxjs": "7.5.5"
   },
   "optionalDependencies": {
     "@faker-js/faker": "^5.5.3"
   },
-  "module": "fesm2015/daffodil-design.mjs",
-  "es2020": "fesm2020/daffodil-design.mjs",
-  "esm2020": "esm2020/daffodil-design.mjs",
-  "fesm2020": "fesm2020/daffodil-design.mjs",
-  "fesm2015": "fesm2015/daffodil-design.mjs",
-  "typings": "daffodil-design.d.ts",
   "exports": {
+    "./scss/daff-global": {
+      "sass": "./scss/daff-global.scss"
+    },
+    "./scss/global": {
+      "sass": "./scss/global.scss"
+    },
+    "./scss/theme": {
+      "sass": "./scss/theme.scss"
+    },
+    "./scss/daff-util": {
+      "sass": "./scss/daff-util.scss"
+    },
+    "./scss/utilities": {
+      "sass": "./scss/utilities.scss"
+    },
+    "./scss/daff-typography": {
+      "sass": "./scss/daff-typography.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -181,6 +197,12 @@
       "default": "./fesm2020/daffodil-design-radio-examples.mjs"
     }
   },
+  "module": "fesm2015/daffodil-design.mjs",
+  "es2020": "fesm2020/daffodil-design.mjs",
+  "esm2020": "esm2020/daffodil-design.mjs",
+  "fesm2020": "fesm2020/daffodil-design.mjs",
+  "fesm2015": "fesm2015/daffodil-design.mjs",
+  "typings": "daffodil-design.d.ts",
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"

package/scss/README.md

@@ -2,6 +2,6 @@
 
 `@daffodil/design` provides several utility files for rapid application development.
 
-- `daff-util.scss` - A utility library containing things like breakpoints and sass language additions
-- `daff-typography.scss` - A typographic library
-- `daff-theme.scss` - A utility library that allows you to theme `@daffodil/design` components
+- `utilities.scss` - A utility library containing things like breakpoints and sass language additions
+- `daff-typography.scss` - A typographic library (deprecated)
+- `theme.scss` - A utility library that allows you to theme `@daffodil/design` components

package/scss/daff-global.scss

@@ -1,49 +1,5 @@
-// @docs
-
-// `daff-global` holds boilerplate code for the project. It includes
-// standard styles such as resets and typographic rules, which are
-// commonly used throughout your project.
-//
-// @note This should only be imported once in your `styles.scss` file.
+// @deprecated
 //
-// @usage
-// ```scss
-// @use '@daffodil/design/scss/daff-global';
-// ```
-
-@use 'typography' as t;
-@use '~@angular/cdk/overlay-prebuilt';
-@use '~modern-normalize/modern-normalize';
-@forward './theming/theme-css-variables';
-
-body,
-html {
-	font-family: t.$body-font-family;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-html {
-	scroll-behavior: smooth;
-}
-
-a {
-	color: currentColor;
-
-	&:hover {
-		text-decoration: none;
-	}
-}
+// `daff-global` will be deprecated in v1.0.0
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	margin: 0;
-	padding: 0;
-}
+@forward 'global';

package/scss/daff-util.scss

@@ -1,21 +1,5 @@
-// @docs
+// @deprecated
 //
-// `daff-util` is a utility library that contains common functions,
-// mixins and variables that make writing SCSS stylesheets a bit
-// easier.
-//
-//
-// @note You can import this as often as you like, as it only contains SCSS
-// variables, mixins, and functions; thus it won't effect your final
-// compiled stylesheet size.
-//
-// @usage
-// ```scss
-// @use '@daffodil/design/scss/daff-util';
-// ```
+// `daff-util` will be deprecated in v1.0.0
 
-@forward 'core';
-@forward 'typography';
-@forward 'layout';
-@forward 'interactions';
-@forward 'accessibility';
+@forward 'utilities';

package/scss/global.scss

@@ -0,0 +1,49 @@
+// @docs
+
+// `global` holds boilerplate code for the project. It includes
+// standard styles such as resets and typographic rules, which are
+// commonly used throughout your project.
+//
+// @note This should only be imported once in your `styles.scss` file.
+//
+// @usage
+// ```scss
+// @use '@daffodil/design/scss/global';
+// ```
+
+@use 'typography' as t;
+@use '@angular/cdk/overlay-prebuilt';
+@use 'modern-normalize/modern-normalize';
+@forward './theming/theme-css-variables';
+
+body,
+html {
+	font-family: t.$body-font-family;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+a {
+	color: currentColor;
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}

package/scss/theme.scss

@@ -9,12 +9,11 @@
 // compiled stylesheet size.
 
 // @usage
-// ```
+// ```scss
 // @use '@daffodil/design/scss/theme';
 // ```
 
 @forward 'core';
-@forward 'accessibility';
 @forward 'theming';
 
 // @daffodil/design components

package/scss/theming/README.md

@@ -1,31 +1,54 @@
-# Theming
+# Daffodil Theming
 Daffodil's theming capabilities enables you to customize `@daffodil/design` components to reflect your brand. A theme consists of custom color configurations that will work in dark and light themes.
 
 ## Custom Colors
-:stop: Before you begin, read the [accessibility guide on color in `@daffodil/design`](../../guides/color#accessibility.md).
-
-[validate palette function]
+:stop: Before you begin, read the [accessibility guide on color in `@daffodil/design`](../../guides/color.md#accessibility).
 
 ## Themes
 Dark and light modes are supported in all `@daffodil/design` components. When a theme is not specified, Daffodil defaults to the `light` mode.
 
-### Setting up the theme file
-Configure your application to support light and dark modes by adding the following to the `theme.scss` file:
+## Palettes
+A palette is a collection of [perceptually uniform colors](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/) with consistent contrast ratios. `@daffodil/design`'s color palettes are represented by a Sass map, with each value in a palette called a **hue**.
+
+## Predefined palettes
+`@daffodil/design` offers predefined palettes based on our brand guidelines. You can choose to use our palettes or define your own. No further configuration is needed in your `app-theme.scss` file if you choose to use `@daffodil/design`'s palettes. Below is an example of the structure of a predefined `@daffodil/design` palette.
+
+```scss
+$daff-blue: (
+  10: #ebf1ff,
+  20: #c4d8ff,
+  30: #9dbeff,
+  40: #79a7ff,
+  50: #548fff,
+  60: #1f66ff,
+  70: #093cf3,
+  80: #001bcb,
+  90: #00098a,
+  100: #000033
+);
+```
+
+### Define your own palettes
+You can define your own palettes by creating a Sass map that matches the example from above. Your Sass maps must have hues from 10 to 100, with a step increment of 10.
+
+### Setting up your custom theme file
+Configure your application to support the custom palettes you created by adding the following to your `app-theme.scss` file:
 
 ```scss
 @use '@daffodil/design/scss/theme' as daff-theme;
+@use 'app-color-palettes' as palette;
 
 // These palettes describe the colors that make up the "theme" of the components.
 
-$primary: daff-theme.daff-configure-palette(daff-theme.$daff-blue, 60);
-$secondary: daff-theme.daff-configure-palette(daff-theme.$daff-purple, 60);
-$tertiary: daff-theme.daff-configure-palette(daff-theme.$daff-turquoise, 60);
+$primary: daff-theme.daff-configure-palette(palette.$app-green, 60);
+$secondary: daff-theme.daff-configure-palette(palette.$app-blue, 60);
+$tertiary: daff-theme.daff-configure-palette(palette.$app-purple, 60);
 
 $theme: daff-theme.daff-configure-theme($primary, $secondary, $tertiary, 'light');
 
-$primary-dark: daff-theme.daff-configure-palette(daff-theme.$daff-blue, 50);
-$secondary-dark: daff-theme.daff-configure-palette(daff-theme.$daff-purple, 50);
-$tertiary-dark: daff-theme.daff-configure-palette(daff-theme.$daff-green, 50);
+$primary-dark: daff-theme.daff-configure-palette(palette.$app-green, 50);
+$secondary-dark: daff-theme.daff-configure-palette(palette.$app-blue, 50);
+$tertiary-dark: daff-theme.daff-configure-palette(palette.$app-purple, 50);
 
 $theme-dark: daff-theme.daff-configure-theme($primary-dark, $secondary-dark, $tertiary-dark, 'dark');
 
@@ -34,26 +57,48 @@ $white: daff-theme.daff-map-deep-get($theme, 'core.white');
 $gray: daff-theme.daff-map-deep-get($theme, 'core.gray');
 ```
 
-### Setting up the styles file
-Add `theme.scss` to the `styles.scss` file.
+### Setting up the styles file with `@daffodil/design`'s theme
+Use `@daffodil/design`'s theme module to the `styles.scss` file:
 
 ```scss
-@use 'theme' as app-theme;
+@use '@daffodil/design/scss/theme' as daff-theme;
+```
+
+Create classes in the `styles.scss` file to include the `theme` module for `$theme` and `$theme-dark` variables. This will allow you to set a click event on a button to switch between modes. [View this setup in Stackblitz](https://stackblitz.com/edit/daffodil-design-theming-angular-10)
+
+```scss
+@use '@daffodil/design/scss/theme' as daff-theme;
+
+.daff-theme-light {
+	@include daff-theme.daff-theme(daff-theme.$theme);
+}
+
+.daff-theme-dark {
+	@include daff-theme.daff-theme(daff-theme.$theme-dark);
+}
+```
+
+### Setting up the styles file with your custom theme
+Add `app-theme.scss` to the `styles.scss` file:
+
+```scss
+@use '@daffodil/design/scss/theme' as daff-theme;
+@use 'app-theme';
 ```
 
 > These lines include theme variables and functions that will generate the theme CSS and style the components.
 
-Create classes in the `styles.scss` file to include the `daff-theme` mixin for `$theme` and `$theme-dark` variables. This will allow you to set a click event on a button to switch between modes. [View this setup in Stackblitz](https://stackblitz.com/edit/daffodil-design-theming-angular-10)
+Create classes in the `styles.scss` file to include the `theme` module for `$theme` and `$theme-dark` variables. This will allow you to set a click event on a button to switch between modes. [View this setup in Stackblitz](https://stackblitz.com/edit/daffodil-design-theming-angular-10)
 
 ```scss
 @use '@daffodil/design/scss/theme' as daff-theme;
-@use 'theme' as app-theme;
+@use 'app-theme';
 
 .daff-theme-light {
-	@include daff-theme.daff-theme(app-theme.$theme);
+  @include daff-theme.daff-theme(app-theme.$theme);
 }
 
 .daff-theme-dark {
-	@include daff-theme.daff-theme(app-theme.$theme-dark);
+  @include daff-theme.daff-theme(app-theme.$theme-dark);
 }
-```
+```

package/scss/theming/_daff-theme.scss

@@ -0,0 +1,19 @@
+@use 'configure-palette';
+@use 'configure-theme';
+@use 'color-palettes' as palette;
+@use '../core';
+
+$primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
+$secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
+$tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
+
+$theme: configure-theme.daff-configure-theme($primary, $secondary, $tertiary, 'light');
+
+$primary-dark: configure-palette.daff-configure-palette(palette.$daff-blue, 50);
+$secondary-dark: configure-palette.daff-configure-palette(palette.$daff-purple, 50);
+$tertiary-dark: configure-palette.daff-configure-palette(palette.$daff-turquoise, 50);
+
+$theme-dark: configure-theme.daff-configure-theme($primary-dark, $secondary-dark, $tertiary-dark, 'dark');
+
+$black: core.daff-map-deep-get($theme, 'core.black');
+$white: core.daff-map-deep-get($theme, 'core.white');

package/scss/theming/_index.scss

@@ -4,3 +4,4 @@
 @forward 'illuminate/illuminate';
 @forward 'configure-palette';
 @forward 'configure-theme';
+@forward 'daff-theme';

package/scss/theming/_theme-css-variables.scss

@@ -1,8 +1,11 @@
 @use 'sass:map';
 @use '../core';
-@use 'theming';
+@use '../theming';
 
-@mixin daff-root($theme) {
+// @docs
+//
+// Global theme tokens
+@mixin daff-root-theme-tokens($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');
 	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$primary: map.get($theme, primary);
@@ -26,18 +29,18 @@
 	--daff-theme-white: #{$white};
 	--daff-theme-black: #{$black};
 	--daff-theme-gray: #{theming.daff-color($gray)};
+	--daff-base-background: #{$base};
+	--daff-base-text: #{theming.daff-text-contrast($base)};
 }
 
-@mixin daff-theme-css-variables($theme, $asRoot: true) {
-	// @docs
-	//
-	// Global theming css variables
-	@if ($asRoot) {
-		:root {
-			@include daff-root($theme);
-		}
-		else {
-			@include daff-root($theme);
+@mixin daff-theme-css-variables($theme) {
+	@each $selector in & {
+		@if ($selector == null) {
+			:root {
+				@include daff-root-theme-tokens($theme);
+			}
+		} @else {
+			@include daff-root-theme-tokens($theme);
 		}
 	}
 }

package/scss/utilities.scss

@@ -0,0 +1,21 @@
+// @docs
+//
+// `utilities` is a utility library that contains common functions,
+// mixins and variables that make writing SCSS stylesheets a bit
+// easier.
+//
+//
+// @note You can import this as often as you like, as it only contains SCSS
+// variables, mixins, and functions; thus it won't effect your final
+// compiled stylesheet size.
+//
+// @usage
+// ```scss
+// @use '@daffodil/design/scss/utilities';
+// ```
+
+@forward 'core';
+@forward 'typography';
+@forward 'layout';
+@forward 'interactions';
+@forward 'accessibility';