@daffodil/design 0.38.6 → 0.39.2

package/button/examples/package.json

@@ -8,4 +8,4 @@
   "typings": "daffodil-design-button-examples.d.ts",
   "metadata": "daffodil-design-button-examples.metadata.json",
   "sideEffects": false
-}
+}

package/callout/examples/daffodil-design-callout-examples.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"CalloutThemingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"callout-theming","template":"<daff-callout [color]=\"colorControl.value\">\n\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t<div daffCalloutSubtitle>\n\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t</div>\n</daff-callout>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>"}]}],"members":{}},"CalloutThemingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutThemingComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":15,"character":4}]}]}],"members":{}},"CalloutTextAlignmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"callout-text-alignment","template":"<daff-callout [textAlignment]=\"textAlignControl.value\">\n\t<daff-container size=\"md\">\n\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t<div daffCalloutSubtitle>\n\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t</div>\n\t</daff-container>\n</daff-callout>\n\n<select [formControl]=\"textAlignControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>"}]}],"members":{}},"CalloutTextAlignmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutTextAlignmentComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffContainerModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffAccordionModule","line":21,"character":4}]}]}],"members":{}},"CalloutWithGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"callout-with-grid","template":"<daff-callout color=\"theme\">\n\t<daff-container class=\"daff-callout-with-grid__grid\">\n\t\t<div class=\"daff-callout-with-grid__image\">\n\t\t\t<img src=\"/assets/design/callout/pwa-illustration.svg\" alt=\"PWA Illustration\">\n\t\t</div>\n\t\t<div class=\"daff-callout-with-grid__content-wrapper\">\n\t\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t\t<div daffCalloutSubtitle>\n\t\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t\t</div>\n\t\t\t<div class=\"daff-callout-with-grid__actions\">\n\t\t\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\" class=\"daff-callout-with-grid__daffodil-action\">What is Daffodil?</a>\n\t\t\t\t<a daff-underline-button color=\"theme-contrast\" routerLink=\"/contact\" class=\"daff-callout-with-grid__demo-action\">Sign up for a demo</a>\n\t\t\t</div>\n\t\t</div>\n\t</daff-container>\n</daff-callout>","styles":[".daff-callout-with-grid__grid{-ms-grid-columns:1fr;-ms-grid-rows:auto 24px auto;display:-ms-grid;display:grid;grid-gap:24px;grid-template:\"image\" \"content\"/1fr}@media (min-width:768px){.daff-callout-with-grid__grid{-ms-grid-columns:1fr 48px 1fr;-ms-grid-rows:auto;grid-gap:48px;grid-template:\"image content\"/1fr 1fr}}.daff-callout-with-grid__image{-ms-grid-column:1;-ms-grid-row:1;grid-area:image}.daff-callout-with-grid__content-wrapper{-ms-grid-column:1;-ms-grid-row:3;grid-area:content}@media (min-width:768px){.daff-callout-with-grid__image{-ms-grid-column:1;-ms-grid-row:1}.daff-callout-with-grid__content-wrapper{-ms-grid-column:3;-ms-grid-row:1}}.daff-callout-with-grid__actions{-ms-grid-columns:auto;-ms-grid-rows:auto 24px auto;display:-ms-grid;display:grid;grid-gap:24px;grid-template:\"daffodil-action\" \"demo-action\"/auto}@media (min-width:768px){.daff-callout-with-grid__actions{-ms-grid-columns:auto;-ms-grid-rows:auto;grid-template:\"daffodil-action demo-action\"/auto}}.daff-callout-with-grid__daffodil-action{-ms-grid-column:1;-ms-grid-row:1;grid-area:daffodil-action}.daff-callout-with-grid__demo-action{-ms-grid-column:1;-ms-grid-row:3;grid-area:demo-action}@media (min-width:768px){.daff-callout-with-grid__daffodil-action{-ms-grid-column:1;-ms-grid-row:1}.daff-callout-with-grid__demo-action{-ms-grid-column:3;-ms-grid-row:1}}"]}]}],"members":{}},"CalloutWithGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutWithGridComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffContainerModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":21,"character":4}]}]}],"members":{}},"CALLOUT_EXAMPLES":[{"__symbolic":"reference","name":"CalloutThemingComponent"},{"__symbolic":"reference","name":"CalloutTextAlignmentComponent"},{"__symbolic":"reference","name":"CalloutWithGridComponent"}]},"origins":{"CalloutThemingComponent":"./callout-theming/callout-theming.component","CalloutThemingModule":"./callout-theming/callout-theming.module","CalloutTextAlignmentComponent":"./callout-text-alignment/callout-text-alignment.component","CalloutTextAlignmentModule":"./callout-text-alignment/callout-text-alignment.module","CalloutWithGridComponent":"./callout-with-grid/callout-with-grid.component","CalloutWithGridModule":"./callout-with-grid/callout-with-grid.module","CALLOUT_EXAMPLES":"./examples"},"importAs":"@daffodil/design/callout/examples"}
+{"__symbolic":"module","version":4,"metadata":{"CalloutThemingComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"callout-theming","template":"<daff-callout [color]=\"colorControl.value\">\n\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t<div daffCalloutSubtitle>\n\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t</div>\n</daff-callout>\n\n<select [formControl]=\"colorControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>"}]}],"members":{}},"CalloutThemingModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutThemingComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":15,"character":4}]}]}],"members":{}},"CalloutTextAlignmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"callout-text-alignment","template":"<daff-callout [textAlignment]=\"textAlignControl.value\">\n\t<daff-container size=\"md\">\n\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t<div daffCalloutSubtitle>\n\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t</div>\n\t</daff-container>\n</daff-callout>\n\n<select [formControl]=\"textAlignControl\">\n\t<option *ngFor=\"let option of options\" [value]=\"option.value\">{{ option.label }}</option>\n</select>"}]}],"members":{}},"CalloutTextAlignmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutTextAlignmentComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffContainerModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffAccordionModule","line":21,"character":4}]}]}],"members":{}},"CalloutWithGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"callout-with-grid","template":"<daff-callout color=\"theme\">\n\t<daff-container class=\"daff-callout-with-grid__grid\">\n\t\t<div class=\"daff-callout-with-grid__image\">\n\t\t\t<img src=\"/assets/design/callout/pwa-illustration.svg\" alt=\"PWA Illustration\">\n\t\t</div>\n\t\t<div class=\"daff-callout-with-grid__content-wrapper\">\n\t\t\t<div daffCalloutTagline>Frontend framework for ecommerce PWAs</div>\n\t\t\t<h3 daffCalloutTitle>Daffodil: The next great leap in ecommerce.</h3>\n\t\t\t<div daffCalloutSubtitle>\n\t\t\t\t<p>Daffodil provides everything you need to create powerful and flexible ecommerce experiences.</p>\n\t\t\t\t<p>With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.</p>\n\t\t\t</div>\n\t\t\t<div class=\"daff-callout-with-grid__actions\">\n\t\t\t\t<a daff-button color=\"theme-contrast\" href=\"https://www.daff.io\" class=\"daff-callout-with-grid__daffodil-action\">What is Daffodil?</a>\n\t\t\t\t<a daff-underline-button color=\"theme-contrast\" routerLink=\"/contact\" class=\"daff-callout-with-grid__demo-action\">Sign up for a demo</a>\n\t\t\t</div>\n\t\t</div>\n\t</daff-container>\n</daff-callout>","styles":[".daff-callout-with-grid__grid{display:grid;grid-template:\"image\" \"content\"/1fr;grid-gap:24px}@media (min-width:768px){.daff-callout-with-grid__grid{grid-template:\"image content\"/1fr 1fr;grid-gap:48px}}.daff-callout-with-grid__image{grid-area:image}.daff-callout-with-grid__content-wrapper{grid-area:content}.daff-callout-with-grid__actions{display:grid;grid-template:\"daffodil-action\" \"demo-action\"/auto;grid-gap:24px}@media (min-width:768px){.daff-callout-with-grid__actions{grid-template:\"daffodil-action demo-action\"/auto}}.daff-callout-with-grid__daffodil-action{grid-area:daffodil-action}.daff-callout-with-grid__demo-action{grid-area:demo-action}"]}]}],"members":{}},"CalloutWithGridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CalloutWithGridComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffCalloutModule","line":19,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffContainerModule","line":20,"character":4},{"__symbolic":"reference","module":"@daffodil/design","name":"DaffButtonModule","line":21,"character":4}]}]}],"members":{}},"CALLOUT_EXAMPLES":[{"__symbolic":"reference","name":"CalloutThemingComponent"},{"__symbolic":"reference","name":"CalloutTextAlignmentComponent"},{"__symbolic":"reference","name":"CalloutWithGridComponent"}]},"origins":{"CalloutThemingComponent":"./callout-theming/callout-theming.component","CalloutThemingModule":"./callout-theming/callout-theming.module","CalloutTextAlignmentComponent":"./callout-text-alignment/callout-text-alignment.component","CalloutTextAlignmentModule":"./callout-text-alignment/callout-text-alignment.module","CalloutWithGridComponent":"./callout-with-grid/callout-with-grid.component","CalloutWithGridModule":"./callout-with-grid/callout-with-grid.module","CALLOUT_EXAMPLES":"./examples"},"importAs":"@daffodil/design/callout/examples"}

package/callout/examples/package.json

@@ -8,4 +8,4 @@
   "typings": "daffodil-design-callout-examples.d.ts",
   "metadata": "daffodil-design-callout-examples.metadata.json",
   "sideEffects": false
-}
+}

package/card/examples/package.json

@@ -8,4 +8,4 @@
   "typings": "daffodil-design-card-examples.d.ts",
   "metadata": "daffodil-design-card-examples.metadata.json",
   "sideEffects": false
-}
+}

package/checkbox/examples/package.json

@@ -8,4 +8,4 @@
   "typings": "daffodil-design-checkbox-examples.d.ts",
   "metadata": "daffodil-design-checkbox-examples.metadata.json",
   "sideEffects": false
-}
+}

package/daff-global.scss

@@ -1,2 +1,2 @@
-.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast: active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
+.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
 

package/daff-theme.scss

@@ -2019,7 +2019,7 @@ $daff-light-theme: (
 	'base-contrast': daff-color($daff-gray, 110),
 	'white': daff-color($daff-gray, 0),
 	'black': daff-color($daff-gray, 110),
-	'gray': $daff-gray
+	'gray': daff-configure-palette($daff-gray, 60)
 );
 
 $daff-dark-theme: (
@@ -2028,7 +2028,7 @@ $daff-dark-theme: (
 	'base-contrast': daff-color($daff-gray, 0),
 	'white': daff-color($daff-gray, 0),
 	'black': daff-color($daff-gray, 110),
-	'gray': $daff-gray
+	'gray': daff-configure-palette($daff-gray, 60)
 );
 
 $supported-theme-types: (
@@ -2077,6 +2077,37 @@ $supported-theme-types: (
 	@return map-get($supported-theme-types, $type);
 }
 
+@mixin daff-theme-css-variables($theme) {
+	$base: daff-map-deep-get($theme, 'core.base');
+	$base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
+	$primary: map-get($theme, primary);
+	$secondary: map-get($theme, secondary);
+	$tertiary: map-get($theme, tertiary);
+	$white: daff-map-deep-get($theme, 'core.white');
+	$black: daff-map-deep-get($theme, 'core.black');
+	$gray: daff-map-deep-get($theme, 'core.gray');
+
+	// @docs
+	//
+	// Global theming css variables
+	:root {
+		--daff-theme-rgb: #{red($base), green($base), blue($base)};
+		--daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast), blue($base-contrast)};
+		--daff-theme: #{$base};
+		--daff-theme-contrast: #{$base-contrast};
+		--daff-theme-primary: #{daff-color($primary)};
+		--daff-theme-secondary: #{daff-color($secondary)};
+		--daff-theme-tertiary: #{daff-color($tertiary)};
+		--daff-theme-warn: #{daff-color($daff-bronze, 60)};
+		--daff-theme-success: #{daff-color($daff-green, 60)};
+		--daff-theme-danger: #{daff-color($daff-red, 60)};
+		--daff-theme-white: #{$white};
+		--daff-theme-black: #{$black};
+		--daff-theme-gray: #{daff-color($gray)};
+	}
+};
+
+
 @mixin daff-button-theme-variant(
 	$base-color,
 	$hover-color,
@@ -3402,7 +3433,10 @@ $supported-theme-types: (
 // @include daff-theme($theme);
 // ```
 @mixin daff-theme($theme) {
-	//Atoms
+	// CSS variables
+	@include daff-theme-css-variables($theme);
+
+	// Atoms
 	@include daff-button-theme($theme);
 	@include daff-error-message-theme($theme);
 	@include daff-form-field-theme($theme);
@@ -3411,7 +3445,7 @@ $supported-theme-types: (
 	@include daff-progress-indicator-theme($theme);
 	@include daff-loading-icon-theme($theme);
 
-	//Molecules
+	// Molecules
 	@include daff-accordion-item-theme($theme);
 	@include daff-article-theme($theme);
 	@include daff-callout-theme($theme);