feat(design): remove focus style and optimize background color animat…

…ions on buttons (#2448)
graycoreio · Jul 6, 2023 · 9163a24 · 9163a24
1 parent ed4a52d
commit 9163a24
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 184 deletions.
diff --git a/libs/design/src/atoms/button/button-theme-variants/button.scss b/libs/design/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;
+		}
 	}
 }
diff --git a/libs/design/src/atoms/button/button-theme-variants/flat.scss b/libs/design/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;
+		}
+	}
+}
diff --git a/libs/design/src/atoms/button/button-theme-variants/focus.scss b/libs/design/src/atoms/button/button-theme-variants/focus.scss
diff --git a/libs/design/src/atoms/button/button-theme-variants/raised.scss b/libs/design/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,39 +16,21 @@ $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:
 		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 {
+	&: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;
 	}
 }
diff --git a/libs/design/src/atoms/button/button-theme-variants/stroked.scss b/libs/design/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;
+		}
 	}
 }