feat(@clayui/css): Decouple button variables from other components

liferay · Oct 7, 2022 · f0f357d · f0f357d
1 parent 33e7cef
commit f0f357d
Show file tree

Hide file tree

Showing 27 changed files with 388 additions and 107 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_application-bar.scss b/packages/clay-css/src/scss/atlas/variables/_application-bar.scss
@@ -15,7 +15,7 @@ $application-bar-base: map-deep-merge(
 				outline: 0,
 				transition: box-shadow 0.15s ease-in-out,
 				focus: (
-					box-shadow: $btn-focus-box-shadow,
+					box-shadow: $component-focus-box-shadow,
 				),
 				disabled: (
 					box-shadow: none,

diff --git a/packages/clay-css/src/scss/atlas/variables/_buttons.scss b/packages/clay-css/src/scss/atlas/variables/_buttons.scss
@@ -3,12 +3,11 @@ $btn-box-shadow: none !default;
 $btn-font-weight: $font-weight-semi-bold !default;
 $btn-padding-x: 0.9375rem !default; // 15px
 $btn-padding-y: 0.4375rem !default; // 7px
-$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$btn-transition: $component-transition !default;
 
 $btn-focus-box-shadow: $component-focus-box-shadow !default;
 
-$btn-disabled-opacity: 0.4 !default;
+$btn-disabled-opacity: $component-disabled-opacity !default;
 
 $btn-active-box-shadow: c-unset !default;
 

diff --git a/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss b/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss
@@ -247,9 +247,13 @@ $dropdown-action-toggle-font-size: 1rem !default; // 16px
 
 /// @deprecated as of v3.x use map $dropdown-action instead
 
-$dropdown-action-toggle-disabled-opacity: $btn-disabled-opacity !default;
+$dropdown-action-toggle-disabled-opacity: $component-disabled-opacity !default;
 
-$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+$dropdown-action-toggle-size: if(
+	variable-exists(btn-monospaced-size-sm),
+	$btn-monospaced-size-sm,
+	2rem
+) !default;
 
 $dropdown-action: () !default;
 $dropdown-action: map-deep-merge(

diff --git a/packages/clay-css/src/scss/atlas/variables/_labels.scss b/packages/clay-css/src/scss/atlas/variables/_labels.scss
@@ -40,7 +40,7 @@ $label: map-deep-merge(
 				text-decoration: $label-anchor-hover-text-decoration,
 			),
 			focus: (
-				box-shadow: $btn-focus-box-shadow,
+				box-shadow: $component-focus-box-shadow,
 				text-decoration: $label-anchor-hover-text-decoration,
 			),
 		),

diff --git a/packages/clay-css/src/scss/atlas/variables/_links.scss b/packages/clay-css/src/scss/atlas/variables/_links.scss
@@ -138,13 +138,17 @@ $link-outline-primary: map-deep-merge(
 		),
 		focus: (
 			background-color: $primary-l3,
+			box-shadow: $component-focus-box-shadow,
 			color: $primary,
 		),
 		active: (
 			background-color:
 				clay-lighten(clay-desaturate($primary, 42.05), 41.76),
 			color: $primary,
 		),
+		disabled: (
+			box-shadow: none,
+		),
 	),
 	$link-outline-primary
 );
@@ -159,6 +163,7 @@ $link-outline-secondary: map-deep-merge(
 		),
 		focus: (
 			background-color: rgba($gray-900, 0.03),
+			box-shadow: $component-focus-box-shadow,
 			color: $gray-900,
 		),
 		active: (

diff --git a/packages/clay-css/src/scss/atlas/variables/_management-bar.scss b/packages/clay-css/src/scss/atlas/variables/_management-bar.scss
@@ -7,7 +7,7 @@ $management-bar-base: map-deep-merge(
 				outline: 0,
 				transition: box-shadow 0.15s ease-in-out,
 				focus: (
-					box-shadow: $btn-focus-box-shadow,
+					box-shadow: $component-focus-box-shadow,
 				),
 				disabled: (
 					box-shadow: none,

diff --git a/packages/clay-css/src/scss/atlas/variables/_navigation-bar.scss b/packages/clay-css/src/scss/atlas/variables/_navigation-bar.scss
@@ -20,7 +20,7 @@ $navigation-bar-base: map-deep-merge(
 				border-radius: 0px,
 				outline: 0,
 				focus: (
-					box-shadow: $btn-focus-box-shadow,
+					box-shadow: $component-focus-box-shadow,
 				),
 				disabled: (
 					box-shadow: none,
@@ -49,7 +49,7 @@ $navigation-bar-light: map-deep-merge(
 				),
 				disabled: (
 					color: $gray-600,
-					opacity: $btn-disabled-opacity,
+					opacity: $component-disabled-opacity,
 				),
 			),
 		),
@@ -72,7 +72,7 @@ $navigation-bar-light: map-deep-merge(
 								),
 								disabled: (
 									color: $gray-600,
-									opacity: $btn-disabled-opacity,
+									opacity: $component-disabled-opacity,
 								),
 							),
 						),
@@ -103,7 +103,7 @@ $navigation-bar-secondary: map-deep-merge(
 				),
 				disabled: (
 					color: $gray-400,
-					opacity: $btn-disabled-opacity,
+					opacity: $component-disabled-opacity,
 				),
 			),
 		),
@@ -126,7 +126,7 @@ $navigation-bar-secondary: map-deep-merge(
 								),
 								disabled: (
 									color: $gray-400,
-									opacity: $btn-disabled-opacity,
+									opacity: $component-disabled-opacity,
 								),
 							),
 						),

diff --git a/packages/clay-css/src/scss/atlas/variables/_quick-action.scss b/packages/clay-css/src/scss/atlas/variables/_quick-action.scss
@@ -1,3 +1,3 @@
 $quick-action-font-size: 1rem !default; // 16px
 
-$quick-action-item-disabled-opacity: $btn-disabled-opacity !default;
+$quick-action-item-disabled-opacity: $component-disabled-opacity !default;
diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -95,7 +95,7 @@ $table-action-link: map-deep-merge(
 	(
 		color: $gray-600,
 		font-size: 1rem,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,
@@ -209,7 +209,7 @@ $table-list-action-link: map-deep-merge(
 	(
 		color: $gray-600,
 		font-size: 1rem,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover: (
 			background-color: rgba(0, 0, 0, 0.02),
 			color: $gray-900,

diff --git a/packages/clay-css/src/scss/components/_custom-forms.scss b/packages/clay-css/src/scss/components/_custom-forms.scss
@@ -47,7 +47,7 @@
 
 		+ .input-group {
 			border-radius: 1px;
-			box-shadow: 0 0 0 0.075rem #fff, $btn-focus-box-shadow;
+			box-shadow: $component-focus-box-shadow;
 		}
 	}
 

diff --git a/packages/clay-css/src/scss/components/_links.scss b/packages/clay-css/src/scss/components/_links.scss
@@ -17,7 +17,7 @@
 // Link Outline
 
 button.link-outline {
-	cursor: $btn-cursor;
+	cursor: $link-cursor;
 }
 
 .link-outline {

diff --git a/packages/clay-css/src/scss/variables/_alerts.scss b/packages/clay-css/src/scss/variables/_alerts.scss
@@ -14,13 +14,36 @@ $alert-padding-y: 0.75rem !default;
 $alert-btn: () !default;
 $alert-btn: map-deep-merge(
 	(
-		border-radius: $btn-border-radius-sm,
-		font-size: $btn-font-size-sm,
-		line-height: $btn-line-height-sm,
-		padding-bottom: $btn-padding-y-sm,
-		padding-left: $btn-padding-x-sm,
-		padding-right: $btn-padding-x-sm,
-		padding-top: $btn-padding-y-sm,
+		border-radius:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, border-radius),
+				$border-radius-sm
+			),
+		font-size:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, font-size),
+				$font-size-sm
+			),
+		line-height:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, line-height),
+				$line-height-sm
+			),
+		padding-bottom:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, padding-bottom),
+				0.25rem
+			),
+		padding-left:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-left), 0.5rem),
+		padding-right:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-right), 0.5rem),
+		padding-top:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-top), 0.25rem),
 	),
 	$alert-btn
 );

diff --git a/packages/clay-css/src/scss/variables/_badges.scss b/packages/clay-css/src/scss/variables/_badges.scss
@@ -11,7 +11,7 @@ $badge-font-size: 75% !default;
 $badge-font-weight: $font-weight-bold !default;
 $badge-padding-x: 0.4em !default;
 $badge-padding-y: 0.25em !default;
-$badge-transition: $btn-transition !default;
+$badge-transition: $component-transition !default;
 
 $badge-spacer-x: 0.25rem !default; // 4px
 $badge-spacer-y: 0.125rem !default; // 2px

diff --git a/packages/clay-css/src/scss/variables/_buttons.scss b/packages/clay-css/src/scss/variables/_buttons.scss
@@ -9,8 +9,7 @@ $btn-font-weight: $font-weight-normal !default;
 $btn-line-height: $input-btn-line-height !default;
 $btn-padding-x: $input-btn-padding-x !default;
 $btn-padding-y: $input-btn-padding-y !default;
-$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$btn-transition: $component-transition !default;
 $btn-white-space: null !default;
 
 $btn-font-size-mobile: null !default;
@@ -23,7 +22,7 @@ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
 
 $btn-disabled-cursor: $disabled-cursor !default;
-$btn-disabled-opacity: 0.65 !default;
+$btn-disabled-opacity: $component-disabled-opacity !default;
 
 $btn-inline-item-font-size: null !default;
 

diff --git a/packages/clay-css/src/scss/variables/_cards.scss b/packages/clay-css/src/scss/variables/_cards.scss
@@ -679,7 +679,7 @@ $card-interactive: map-deep-merge(
 	(
 		cursor: $link-cursor,
 		outline: 0,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover: (
 			background-color: $gray-100,
 			text-decoration: none,

diff --git a/packages/clay-css/src/scss/variables/_clay-color.scss b/packages/clay-css/src/scss/variables/_clay-color.scss
@@ -93,7 +93,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 	(
 		hover-bg: transparent,
 		hover-color: $black,
-		focus-box-shadow: $btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		focus-color: $black,
 	),
 	$clay-color-dropdown-menu-component-action
@@ -170,7 +170,7 @@ $clay-color-pointer: map-deep-merge(
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 0.875rem,
-		focus-box-shadow: $btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		focus-outline: 0,
 	),
 	$clay-color-pointer

diff --git a/packages/clay-css/src/scss/variables/_date-picker.scss b/packages/clay-css/src/scss/variables/_date-picker.scss
@@ -30,13 +30,13 @@ $date-picker-nav-btn: () !default;
 $date-picker-nav-btn: map-deep-merge(
 	(
 		color: $gray-600,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover-bg: $gray-200,
 		focus-box-shadow: $input-btn-focus-box-shadow,
 		disabled-bg: transparent,
 		disabled-box-shadow: none,
 		disabled-color: $gray-600,
-		disabled-opacity: $btn-disabled-opacity,
+		disabled-opacity: $component-disabled-opacity,
 	),
 	$date-picker-nav-btn
 );
@@ -184,7 +184,7 @@ $date-picker-calendar-item: map-deep-merge(
 		padding-left: 0,
 		padding-right: 0,
 		padding-top: 0,
-		transition: $btn-transition,
+		transition: $component-transition,
 		user-select: none,
 		vertical-align: middle,
 		white-space: nowrap,
@@ -207,7 +207,7 @@ $date-picker-date: map-deep-merge(
 		active-color: $component-active-color,
 		disabled-bg: transparent,
 		disabled-box-shadow: none,
-		disabled-opacity: $btn-disabled-opacity,
+		disabled-opacity: $component-disabled-opacity,
 	),
 	$date-picker-date
 );

diff --git a/packages/clay-css/src/scss/variables/_dropdowns.scss b/packages/clay-css/src/scss/variables/_dropdowns.scss
@@ -840,7 +840,11 @@ $dropdown-action-toggle-disabled-cursor: $disabled-cursor !default;
 
 $dropdown-action-toggle-disabled-opacity: 0.65 !default;
 
-$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+$dropdown-action-toggle-size: if(
+	variable-exists(btn-monospaced-size-sm),
+	$btn-monospaced-size-sm,
+	1.9375rem
+) !default;
 
 $dropdown-action: () !default;
 $dropdown-action: map-deep-merge(
@@ -852,7 +856,7 @@ $dropdown-action: map-deep-merge(
 			align-items: center,
 			border-radius:
 				clay-enable-rounded($dropdown-action-toggle-border-radius),
-			cursor: $btn-cursor,
+			cursor: $link-cursor,
 			display: flex,
 			font-size: inherit,
 			font-weight: inherit,