Breaking: (Fixes liferay#600) Removed colors from Dropdown Action and…

… Quick Action Item, they now require modifier classes to style them (e.g., `.component-action`)

Update: (liferay#600) `.btn-outline-primary`, `.btn-outline-secondary`, `.component-action` and `.link-outline-secondary` to closest match of Lexicon 2 Sites buttons

Update: Atlas `$btn-padding-x-sm` value to 0.5rem (8px)

Update: (liferay#600) `.btn-outline-borderless` shouldn't show borders when used with `.dropdown-toggle` and update `.link-outline-primary` colors to best match Lexicon 2 Colors

Update: (liferay#600) Management Bar, Pagination, Tables links shouldn't rely on `$dropdown-action-*` colors

Breaking: (liferay#600) Dropdown Action should be able to recieve colors, removed options to configure colors `$dropdown-action-toggle-bg`, `$dropdown-action-toggle-color`, `$dropdown-action-toggle-hover-bg`, `$dropdown-action-toggle-hover-color`, `$dropdown-action-toggle-disabled-bg`, `$dropdown-action-toggle-disabled-color`, `$dropdown-action-toggle-active-bg`, `$dropdown-action-toggle-active-color`

Breaking: (liferay#600) Quick Action should be able to recieve colors, removed options to configure colors `$quick-action-item-bg`, `$quick-action-item-color`, `$quick-action-item-hover-bg`, `$quick-action-item-hover-color`, `$quick-action-item-disabled-bg`, `$quick-action-item-disabled-color`, `$quick-action-item-active-bg`, `$quick-action-item-active-color`

Update: (liferay#600) `.link-outline-primary` remove focus colors

Update: (liferay#600) Mixin `clay-link` added options to configure `btn-focus-box-shadow`, `btn-focus-outline` for focus styles only for `button` if you like

Update: (liferay#600) `button.link-outline-primary` and `button.link-outline-secondary` focus states and `.link-outline-primary`, `.link-outline-secondary` disabled states

Update: (liferay#600) `button.link-outline` should use `$btn-cursor`

Update: (liferay#600) Mixin `clay-link` added option to configure `transition` and `.component-action` to use new properties added to `clay-link`

Breaking: (liferay#600) Quick Action Item removed padding, it now requires `.component-action`

packages/clay/src/scss/atlas/variables/_buttons.scss

@@ -22,7 +22,7 @@ $btn-inline-item-font-size-lg: 1.125rem !default; // 18px
 
 $btn-font-size-sm: $font-size-sm !default; // 13px
 $btn-line-height-sm: 1 !default;
-$btn-padding-x-sm: 0.6875rem !default; // 11px
+$btn-padding-x-sm: 0.5rem !default; // 8px
 $btn-padding-y-sm: 0.53125rem !default; // 8.5px
 $btn-inline-item-font-size-sm: 0.875rem !default; // 14px
 
@@ -127,21 +127,24 @@ $btn-dark: (
 // Button Outline Variant
 
 $btn-outline-primary: (
-	hover-bg: map-get($btn-primary, hover-bg),
-	focus-box-shadow: map-get($btn-primary, focus-box-shadow),
-	focus-color: #FFF,
+	hover-bg: lighten(saturate($primary, 3.40), 43.14),
+	hover-color: $primary,
+	focus-bg: lighten(saturate($primary, 3.40), 43.14),
+	focus-box-shadow: 0 0 0 2px rgba(darken(saturate($primary, 3.40), 6.86), 0.25),
+	focus-color: $primary,
 	disabled-bg: transparent,
 	disabled-border-color: map-get($btn-primary, bg),
 	disabled-color: map-get($btn-primary, bg),
-	active-bg: map-get($btn-primary, active-bg),
+	active-bg: lighten(desaturate($primary, 42.05), 41.76),
+	active-color: $primary,
 	active-box-shadow: map-get($btn-primary, active-box-shadow)
 ) !default;
 
 $btn-outline-secondary: (
 	bg: null,
-	border-color: null,
+	border-color: lighten(saturate(adjust-hue($secondary, -2), 5.48), 37.06),
 	color: null,
-	hover-bg: map-get($btn-secondary, hover-bg),
+	hover-bg: rgba(0, 0, 0, 0.02),
 	hover-border-color: transparent,
 	hover-color: map-get($btn-secondary, hover-color),
 	focus-bg: map-get($btn-secondary, focus-bg),
@@ -151,7 +154,7 @@ $btn-outline-secondary: (
 	disabled-bg: transparent,
 	disabled-border-color: $secondary,
 	disabled-color: $secondary,
-	active-bg: map-get($btn-secondary, active-bg),
+	active-bg: rgba(0, 0, 0, 0.04),
 	active-border-color: transparent,
 	active-box-shadow: map-get($btn-secondary, active-box-shadow),
 	active-color: map-get($btn-secondary, active-color)

packages/clay/src/scss/atlas/variables/_dropdowns.scss

@@ -26,15 +26,7 @@ $dropdown-divider-bg: $dropdown-border-color !default;
 
 // Dropdown Action
 
-$dropdown-action-toggle-color: $secondary !default;
 $dropdown-action-toggle-font-size: 1rem !default; // 16px
 $dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
 
-$dropdown-action-toggle-hover-bg: rgba(0, 0, 0, 0.02) !default;
-$dropdown-action-toggle-hover-color: $body-color !default;
-
-$dropdown-action-toggle-active-bg: rgba(0, 0, 0, 0.04) !default;
-$dropdown-action-toggle-active-color: $dropdown-action-toggle-hover-color !default;
-
-$dropdown-action-toggle-disabled-color: $dropdown-action-toggle-color !default;
 $dropdown-action-toggle-disabled-opacity: $btn-disabled-opacity !default;

packages/clay/src/scss/atlas/variables/_links.scss

@@ -31,18 +31,33 @@ $component-subtitle-link: map-merge((
 $component-action: () !default;
 $component-action: map-merge((
 	font-size: 1rem, // 16px
-	active-bg: lighten(saturate(adjust-hue($secondary, -12), 8.51), 49.61),
+	active-bg: rgba(0, 0, 0, 0.04),
 	active-color: $body-color,
-	hover-bg: lighten(saturate(adjust-hue($secondary, -27), 6.13), 51.57),
+	hover-bg: rgba(0, 0, 0, 0.02),
 	hover-color: $body-color,
+	btn-focus-box-shadow: map-get($btn-secondary, focus-box-shadow),
 	disabled-bg: transparent
 ), $component-action);
 
 // Link Outline
 
+$link-outline-primary: () !default;
+$link-outline-primary: map-merge((
+	hover-bg: lighten(saturate($primary, 3.40), 43.14),
+	hover-color: $primary,
+	btn-focus-box-shadow: map-get($btn-outline-primary, focus-box-shadow),
+	btn-focus-outline: 0,
+	active-bg: lighten(desaturate($primary, 42.05), 41.76),
+	active-color: $primary
+), $link-outline-primary);
+
 $link-outline-secondary: () !default;
 $link-outline-secondary: map-merge((
 	border-color: lighten(saturate(adjust-hue($secondary, -2), 5.48), 37.06),
-	hover-bg: lighten(saturate(adjust-hue($secondary, -27), 6.13), 51.57),
+	active-bg: rgba(0, 0, 0, 0.04),
+	active-color: $body-color,
+	btn-focus-box-shadow: map-get($btn-secondary, focus-box-shadow),
+	btn-focus-outline: 0,
+	hover-bg: rgba(0, 0, 0, 0.02),
 	hover-color: $body-color
 ), $link-outline-secondary);

packages/clay/src/scss/atlas/variables/_management-bar.scss

@@ -1,14 +1,14 @@
 $management-bar-light: (
 	bg: #FFF,
 	link-border-radius: $border-radius,
-	link-hover-color: $dropdown-action-toggle-hover-color,
-	link-hover-bg: $dropdown-action-toggle-hover-bg,
-	link-active-bg: $dropdown-action-toggle-active-bg
+	link-hover-color: $body-color,
+	link-hover-bg: rgba(0, 0, 0, 0.02),
+	link-active-bg: rgba(0, 0, 0, 0.04)
 ) !default;
 
 $management-bar-primary: (
 	link-border-radius: $border-radius,
-	link-hover-color: $dropdown-action-toggle-hover-color,
-	link-hover-bg: $dropdown-action-toggle-hover-bg,
-	link-active-bg: $dropdown-action-toggle-active-bg
+	link-hover-color: $body-color,
+	link-hover-bg: rgba(0, 0, 0, 0.02),
+	link-active-bg: rgba(0, 0, 0, 0.04)
 ) !default;

packages/clay/src/scss/atlas/variables/_pagination.scss

@@ -13,11 +13,11 @@ $pagination-padding-x: 10px !default;
 $pagination-padding-y: 0 !default;
 $pagination-line-height: $pagination-item-height - ($pagination-border-width * 2) !default;
 
-$pagination-hover-bg: $dropdown-action-toggle-hover-bg !default;
+$pagination-hover-bg: rgba(0, 0, 0, 0.02) !default;
 $pagination-hover-border-color: transparent !default;
-$pagination-hover-color: $dropdown-action-toggle-hover-color !default;
+$pagination-hover-color: $body-color !default;
 
-$pagination-active-bg: $dropdown-action-toggle-active-bg !default;
+$pagination-active-bg: rgba(0, 0, 0, 0.04) !default;
 $pagination-active-border-color: transparent !default;
 $pagination-active-color: $pagination-hover-color !default;
 

packages/clay/src/scss/atlas/variables/_quick-action.scss

@@ -1,10 +1,3 @@
 $quick-action-font-size: 1rem !default; // 16px
 
-$quick-action-item-hover-bg: $dropdown-action-toggle-hover-bg !default;
-$quick-action-item-hover-color: $dropdown-action-toggle-hover-color !default;
-
-$quick-action-item-disabled-color: $quick-action-item-hover-color !default;
-$quick-action-item-disabled-opacity: $btn-disabled-opacity !default;
-
-$quick-action-item-active-bg: $dropdown-action-toggle-active-bg !default;
-$quick-action-item-active-color: $quick-action-item-hover-color !default;
+$quick-action-item-disabled-opacity: $btn-disabled-opacity !default;

packages/clay/src/scss/atlas/variables/_tables.scss

@@ -38,11 +38,11 @@ $table-title: map-merge((
 
 $table-action-link: () !default;
 $table-action-link: map-merge((
-	color: $dropdown-action-toggle-color,
+	color: $secondary,
 	font-size: 1rem, // 16px
-	hover-bg: $dropdown-action-toggle-hover-bg,
-	hover-color: $dropdown-action-toggle-hover-color,
-	active-bg: $dropdown-action-toggle-active-bg
+	hover-bg: rgba(0, 0, 0, 0.02),
+	hover-color: $body-color,
+	active-bg: rgba(0, 0, 0, 0.04)
 ), $table-action-link);
 
 // Table Link
@@ -87,7 +87,7 @@ $table-list-link: map-merge((
 
 $table-list-action-link: () !default;
 $table-list-action-link: map-merge((
-	color: $dropdown-action-toggle-color,
-	hover-bg: $dropdown-action-toggle-hover-bg,
-	hover-color: $dropdown-action-toggle-hover-color
+	color: $secondary,
+	hover-bg: rgba(0, 0, 0, 0.02),
+	hover-color: $body-color
 ), $table-list-action-link);

packages/clay/src/scss/components/_buttons.scss

@@ -182,6 +182,14 @@
 	}
 }
 
+.btn-outline-borderless:not(:disabled):not(.disabled):active {
+	border-color: transparent;
+}
+
+.show > .btn-outline-borderless.dropdown-toggle {
+	border-color: transparent;
+}
+
 // Loading Icons with Buttons
 
 .btn .loading-animation {

packages/clay/src/scss/components/_dropdowns.scss

@@ -163,36 +163,33 @@
 	vertical-align: middle;
 
 	> .dropdown-toggle {
-		background-color: $dropdown-action-toggle-bg;
+		align-items: center;
 
 		@include border-radius($dropdown-action-toggle-border-radius);
 
-		color: $dropdown-action-toggle-color;
-		display: block;
+		cursor: $btn-cursor;
+		display: flex;
 
 		@include clay-monospace($dropdown-action-toggle-size);
 
-		text-align: center;
-
-		@include hover {
-			background-color: $dropdown-action-toggle-hover-bg;
-			color: $dropdown-action-toggle-hover-color;
-		}
+		font-size: inherit;
+		font-weight: inherit;
+		justify-content: center;
+		line-height: inherit;
+		padding: 0;
+		text-transform: inherit;
+		vertical-align: baseline;
 
 		&:disabled,
 		&.disabled {
-			background-color: $dropdown-action-toggle-disabled-bg;
-			color: $dropdown-action-toggle-disabled-color;
 			cursor: $dropdown-action-toggle-disabled-cursor;
 			opacity: $dropdown-action-toggle-disabled-opacity;
 		}
-	}
 
-	&.show > .dropdown-toggle,
-	> .dropdown-toggle:active,
-	> .dropdown-toggle.active {
-		background-color: $dropdown-action-toggle-active-bg;
-		color: $dropdown-action-toggle-active-color;
+		.inline-item .lexicon-icon,
+		.lexicon-icon {
+			margin-top: 0;
+		}
 	}
 }
 

packages/clay/src/scss/components/_links.scss

@@ -16,8 +16,13 @@
 
 // Link Outline
 
+button.link-outline {
+	cursor: $btn-cursor;
+}
+
 .link-outline {
 	align-items: center;
+	background-color: transparent;
 	border-color: transparent;
 
 	@include border-radius($link-outline-border-radius);
@@ -100,17 +105,4 @@
 	@include clay-link($component-action);
 
 	@extend %link-monospaced;
-}
-
-button.component-action {
-	@extend %btn-unstyled;
-
-	@include transition($btn-transition);
-
-	vertical-align: middle;
-
-	&:focus {
-		box-shadow: $btn-focus-box-shadow;
-		outline: 0;
-	}
 }

packages/clay/src/scss/components/_quick-action.scss

@@ -14,11 +14,8 @@
 }
 
 .quick-action-item {
-	background-color: $quick-action-item-bg;
-
 	@include border-radius($quick-action-item-border-radius);
 
-	color: $quick-action-item-color;
 	display: flex;
 	line-height: 1;
 	margin-bottom: $quick-action-item-margin-y;
@@ -32,25 +29,12 @@
 	padding-right: $quick-action-item-padding-x;
 	padding-top: $quick-action-item-padding-y;
 
-	@include hover {
-		background-color: $quick-action-item-hover-bg;
-		color: $quick-action-item-hover-color;
-	}
-
 	&:disabled,
 	&.disabled {
-		background-color: $quick-action-item-disabled-bg;
-		color: $quick-action-item-disabled-color;
 		cursor: $quick-action-item-disabled-cursor;
 		opacity: $quick-action-item-disabled-opacity;
 	}
 
-	&:active,
-	&.active {
-		background-color: $quick-action-item-active-bg;
-		color: $quick-action-item-active-color;
-	}
-
 	.lexicon-icon {
 		margin-top: 0;
 	}

packages/clay/src/scss/mixins/_links.scss

@@ -24,6 +24,7 @@
 	$text-align: map-get($map, text-align);
 	$text-decoration: map-get($map, text-decoration);
 	$text-transform: map-get($map, text-transform);
+	$transition: map-get($map, transition);
 	$vertical-align: map-get($map, vertical-align);
 	$width: map-get($map, width);
 
@@ -51,6 +52,9 @@
 	$disabled-opacity: map-get($map, disabled-opacity);
 	$disabled-pointer-events: map-get($map, disabled-pointer-events);
 
+	$btn-focus-box-shadow: map-get($map, btn-focus-box-shadow);
+	$btn-focus-outline: map-get($map, btn-focus-outline);
+
 	$lexicon-icon-margin-bottom: map-get($map, lexicon-icon-margin-bottom);
 	$lexicon-icon-margin-left: map-get($map, lexicon-icon-margin-left);
 	$lexicon-icon-margin-right: map-get($map, lexicon-icon-margin-right);
@@ -81,6 +85,7 @@
 	text-align: $text-align;
 	text-decoration: $text-decoration;
 	text-transform: $text-transform;
+	transition: $transition;
 	vertical-align: $vertical-align;
 	width: $width;
 
@@ -90,6 +95,15 @@
 		text-decoration: $hover-text-decoration;
 	}
 
+	@at-root {
+		button#{&} {
+			&:focus {
+				box-shadow: $btn-focus-box-shadow;
+				outline: $btn-focus-outline;
+			}
+		}
+	}
+
 	&:focus {
 		background-color: $focus-bg;
 		box-shadow: $focus-box-shadow;

packages/clay/src/scss/variables/_buttons.scss

@@ -1,4 +1,4 @@
-$btn-cursor: null !default;
+$btn-cursor: $link-cursor !default;
 $btn-font-size: $font-size-base !default;
 $btn-font-size-mobile: null !default;
 $btn-padding-x-mobile: null !default;

packages/clay/src/scss/variables/_dropdowns.scss

@@ -39,23 +39,13 @@ $dropdown-item-indicator-spacer-x: 1rem !default;
 
 // Dropdown Action
 
-$dropdown-action-toggle-bg: null !default;
 $dropdown-action-toggle-border-radius: $border-radius !default;
-$dropdown-action-toggle-color: $link-color !default;
 $dropdown-action-toggle-font-size: null !default;
 $dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
 
-$dropdown-action-toggle-hover-bg: null !default;
-$dropdown-action-toggle-hover-color: $link-hover-color !default;
-
-$dropdown-action-toggle-disabled-bg: null !default;
-$dropdown-action-toggle-disabled-color: $btn-link-disabled-color !default;
 $dropdown-action-toggle-disabled-cursor: $disabled-cursor !default;
 $dropdown-action-toggle-disabled-opacity: 0.65 !default;
 
-$dropdown-action-toggle-active-bg: null !default;
-$dropdown-action-toggle-active-color: null !default;
-
 // Alert inside Dropdowns
 
 $dropdown-alert-font-size: null !default;