@daffodil/design 0.60.0 → 0.62.0

package/sidebar/examples/fixed-and-over-sidebar/fixed-and-over-sidebar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./fixed-and-over-sidebar.component";
+import * as i2 from "@daffodil/design";
+export declare class FixedAndOverSidebarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FixedAndOverSidebarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FixedAndOverSidebarModule, [typeof i1.FixedAndOverSidebarComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule, typeof i2.DaffButtonModule], [typeof i1.FixedAndOverSidebarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FixedAndOverSidebarModule>;
+}

package/sidebar/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/sidebar/examples/package.json

@@ -0,0 +1 @@
+{"name":"@daffodil/design/sidebar/examples","module":"../../fesm2015/daffodil-design-sidebar-examples.mjs","es2020":"../../fesm2020/daffodil-design-sidebar-examples.mjs","esm2020":"../../esm2020/sidebar/examples/daffodil-design-sidebar-examples.mjs","fesm2020":"../../fesm2020/daffodil-design-sidebar-examples.mjs","fesm2015":"../../fesm2015/daffodil-design-sidebar-examples.mjs","typings":"daffodil-design-sidebar-examples.d.ts","sideEffects":false,"version":"0.62.0"}

package/sidebar/examples/public_api.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '@daffodil/design';
+export declare const SIDEBAR_EXAMPLES: ComponentExample[];

package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class SidebarWithStickyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarWithStickyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarWithStickyComponent, "sidebar-with-sticky", never, {}, {}, never, never>;
+}

package/sidebar/examples/sidebar-with-sticky/sidebar-with-sticky.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./sidebar-with-sticky.component";
+import * as i2 from "@daffodil/design";
+export declare class SidebarWithStickyModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarWithStickyModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SidebarWithStickyModule, [typeof i1.SidebarWithStickyComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule], [typeof i1.SidebarWithStickyComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SidebarWithStickyModule>;
+}

package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class TwoFixedSidebarsEitherSideComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TwoFixedSidebarsEitherSideComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TwoFixedSidebarsEitherSideComponent, "two-fixed-sidebars-either-side", never, {}, {}, never, never>;
+}

package/sidebar/examples/two-fixed-sidebars-either-side/two-fixed-sidebars-either-side.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./two-fixed-sidebars-either-side.component";
+import * as i2 from "@daffodil/design";
+export declare class TwoFixedSidebarsEitherSideModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TwoFixedSidebarsEitherSideModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TwoFixedSidebarsEitherSideModule, [typeof i1.TwoFixedSidebarsEitherSideComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule], [typeof i1.TwoFixedSidebarsEitherSideComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TwoFixedSidebarsEitherSideModule>;
+}

package/sidebar/examples/under-sidebar/under-sidebar.component.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class UnderSidebarComponent {
+    openLeft: boolean;
+    openRight: boolean;
+    openLeftSidebar(): void;
+    openRightSidebar(): void;
+    closeSidebar(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UnderSidebarComponent, "under-sidebar", never, {}, {}, never, never>;
+}

package/sidebar/examples/under-sidebar/under-sidebar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./under-sidebar.component";
+import * as i2 from "@daffodil/design";
+export declare class UnderSidebarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UnderSidebarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UnderSidebarModule, [typeof i1.UnderSidebarComponent], [typeof i2.DaffSidebarModule, typeof i2.DaffNavbarModule, typeof i2.DaffButtonModule], [typeof i1.UnderSidebarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UnderSidebarModule>;
+}

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

@@ -5,31 +5,22 @@
 	$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;
+	&:after {
+		background: $hover-color;
+	}
+
+	&:hover {
 		color: theming.daff-text-contrast($hover-color);
 	}
 
 	&:active {
-		background-color: $active-color;
-		border: 1px solid $active-color;
 		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background: $active-color;
+		}
 	}
 }

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

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../../../../scss/theming';
+
+@mixin daff-flat-button-theme-variant(
+	$base-color,
+	$active-color
+) {
+	color: $base-color;
+
+	&:after {
+		background-color: $base-color;
+	}
+
+	&:hover {
+		color: theming.daff-text-contrast($base-color);
+	}
+
+	&:active {
+		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background-color: $active-color;
+		}
+	}
+}

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

@@ -7,8 +7,6 @@ $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');
@@ -18,9 +16,6 @@ $black: theming.daff-color(theming.$daff-gray, 110);
 		@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:
@@ -28,29 +23,14 @@ $black: theming.daff-color(theming.$daff-gray, 110);
 		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 {
+	&:after {
 		box-shadow:
-			0 6px 12px rgba($black, 0.12),
-			0 4px 6px rgba($black, 0.1);
+			0 6px 12px rgba($black, 0.08),
+			0 4px 6px rgba($black, 0.04);
 	}
 
-	&: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);
+	&:hover {
+		background-color: $base-color;
+		border: 1px solid $base-color;
 	}
 }

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

@@ -3,34 +3,26 @@
 
 @mixin daff-stroked-button-theme-variant(
 	$base-color,
-	$font-color,
-	$focus-color
+	$active-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;
+	color: $base-color;
 	background-color: transparent;
 
-	&:hover,
-	&:focus {
+	&:after {
 		background-color: $base-color;
-		border: 1px solid $base-color;
+	}
+
+	&:hover {
 		color: theming.daff-text-contrast($base-color);
 	}
 
 	&:active {
-		background-color: $focus-color;
-		border: 1px solid $focus-color;
-		color: theming.daff-text-contrast($focus-color);
+		border: 1px solid $active-color;
+		color: theming.daff-text-contrast($active-color);
+
+		&:after {
+			background-color: $active-color;
+		}
 	}
 }