@clayui/css 3.161.0 → 3.163.0

package/src/scss/atlas-custom-properties/variables/_links.scss

@@ -1,482 +1,466 @@
-@if ($enable-atlas-custom-properties) {
-	$c-link: ();
-	$c-link: map-deep-merge(
-		(
+$c-link: () !default;
+$c-link: map-deep-merge(
+	(
+		text-decoration: none,
+		transition: clay-enable-transitions(box-shadow 0.15s ease-in-out),
+		hover: (
 			text-decoration: none,
-			transition: clay-enable-transitions(box-shadow 0.15s ease-in-out),
-			hover: (
-				text-decoration: none,
-			),
-
-			focus: (
-				border-radius: 1px,
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+		),
 
-			c-link-variants: (
-				text-secondary: (
-					color: $gray-900 !important,
+		focus: (
+			border-radius: 1px,
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 
-					hover: (
-						color: $black !important,
-					),
+		c-link-variants: (
+			text-secondary: (
+				color: $gray-900 !important,
 
-					focus: (
-						color: $black !important,
-					),
+				hover: (
+					color: $black !important,
 				),
 
-				text-tertiary: (
-					color: $gray-900 !important,
-
-					hover: (
-						color: $black !important,
-					),
+				focus: (
+					color: $black !important,
 				),
 			),
-		),
-		$c-link
-	);
 
-	$component-link: ();
-	$component-link: map-deep-merge(
-		(
-			border-radius: 1px,
-			color: var(--component-link-color, $gray-600),
-			transition:
-				var(--component-link-transition, box-shadow 0.15s ease-in-out),
-			hover: (
-				color: var(--component-link-hover-color, $gray-900),
-			),
+			text-tertiary: (
+				color: $gray-900 !important,
 
-			focus: (
-				color: var(--component-link-focus-color, $gray-900),
-				box-shadow:
-					var(
-						--component-link-focus-box-shadow,
-						$component-focus-box-shadow
-					),
-				outline: 0,
+				hover: (
+					color: $black !important,
+				),
 			),
 		),
-		$component-link
-	);
-
-	$link-primary: ();
-	$link-primary: map-deep-merge(
-		(
-			border-radius: 1px,
-			color: var(--link-primary-color, $primary),
-			transition:
-				var(--link-primary-transition, box-shadow 0.15s ease-in-out),
-			hover: (
-				color: var(--link-primary-hover-color, $primary-d1),
-			),
-
-			focus: (
-				color: var(--link-primary-focus-color, $primary-d1),
-				box-shadow:
-					var(
-						--link-primary-focus-box-shadow,
-						$component-focus-box-shadow
-					),
-				outline: 0,
-			),
+	),
+	$c-link
+);
+
+$component-link: () !default;
+$component-link: map-deep-merge(
+	(
+		border-radius: 1px,
+		color: var(--component-link-color, $gray-600),
+		transition:
+			var(--component-link-transition, box-shadow 0.15s ease-in-out),
+		hover: (
+			color: var(--component-link-hover-color, $gray-900),
 		),
-		$link-primary
-	);
-
-	$link-secondary: ();
-	$link-secondary: map-deep-merge(
-		(
-			border-radius: 1px,
-			color: var(--link-secondary-color, $secondary),
-			transition: box-shadow 0.15s ease-in-out,
-
-			hover: (
-				color: var(--link-secondary-hover-color, $gray-900),
-			),
 
-			focus: (
-				color: var(--link-secondary-focus-color, $gray-900),
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+		focus: (
+			color: var(--component-link-focus-color, $gray-900),
+			box-shadow:
+				var(
+					--component-link-focus-box-shadow,
+					$component-focus-box-shadow
+				),
+			outline: 0,
+		),
+	),
+	$component-link
+);
+
+$link-primary: () !default;
+$link-primary: map-deep-merge(
+	(
+		border-radius: 1px,
+		color: var(--link-primary-color, $primary),
+		transition: var(--link-primary-transition, box-shadow 0.15s ease-in-out),
+		hover: (
+			color: var(--link-primary-hover-color, $primary-d1),
 		),
-		$link-secondary
-	);
-
-	$single-link-font-weight: $font-weight-semi-bold;
 
-	// Link Outline
+		focus: (
+			color: var(--link-primary-focus-color, $primary-d1),
+			box-shadow:
+				var(
+					--link-primary-focus-box-shadow,
+					$component-focus-box-shadow
+				),
+			outline: 0,
+		),
+	),
+	$link-primary
+);
+
+$link-secondary: () !default;
+$link-secondary: map-deep-merge(
+	(
+		border-radius: 1px,
+		color: var(--link-secondary-color, $secondary),
+		transition: box-shadow 0.15s ease-in-out,
+
+		hover: (
+			color: var(--link-secondary-hover-color, $gray-900),
+		),
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+		focus: (
+			color: var(--link-secondary-focus-color, $gray-900),
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+	),
+	$link-secondary
+);
 
-	$link-outline-border-radius: $btn-border-radius;
+$single-link-font-weight: $font-weight-semi-bold !default;
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+// Link Outline
 
-	$link-outline-border-width: $btn-border-width;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-border-radius: $btn-border-radius !default;
 
-	$link-outline-font-size: $btn-font-size-sm;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-border-width: $btn-border-width !default;
 
-	$link-outline-font-weight: $font-weight-semi-bold;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-font-size: $btn-font-size-sm !default;
 
-	$link-outline-line-height: $btn-line-height-sm;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-font-weight: $font-weight-semi-bold !default;
 
-	$link-outline-padding-x: $btn-padding-x-sm;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-line-height: $btn-line-height-sm !default;
 
-	$link-outline-padding-y: $btn-padding-y-sm;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
+$link-outline-padding-x: $btn-padding-x-sm !default;
 
-	$link-outline-transition: $component-transition;
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-	$link-outline: ();
-	$link-outline: map-deep-merge(
-		(
-			align-items: center,
-			background-color: transparent,
-			border-color: transparent,
-			border-radius: $link-outline-border-radius,
-			border-style: solid,
-			border-width: $link-outline-border-width,
-			display: inline-flex,
-			font-size: $link-outline-font-size,
-			font-weight: $link-outline-font-weight,
-			justify-content: center,
-			line-height: $link-outline-line-height,
-			padding-bottom: $link-outline-padding-y,
-			padding-left: $link-outline-padding-x,
-			padding-right: $link-outline-padding-x,
-			padding-top: $link-outline-padding-y,
-			transition: $link-outline-transition,
-			vertical-align: middle,
-
-			hover: (
-				text-decoration: none,
-			),
+$link-outline-padding-y: $btn-padding-y-sm !default;
 
-			focus: (
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead
 
-			disabled: (
-				box-shadow: none,
+$link-outline-transition: $component-transition !default;
 
-				active: (
-					pointer-events: none,
-				),
-			),
+$link-outline: () !default;
+$link-outline: map-deep-merge(
+	(
+		align-items: center,
+		background-color: transparent,
+		border-color: transparent,
+		border-radius: $link-outline-border-radius,
+		border-style: solid,
+		border-width: $link-outline-border-width,
+		display: inline-flex,
+		font-size: $link-outline-font-size,
+		font-weight: $link-outline-font-weight,
+		justify-content: center,
+		line-height: $link-outline-line-height,
+		padding-bottom: $link-outline-padding-y,
+		padding-left: $link-outline-padding-x,
+		padding-right: $link-outline-padding-x,
+		padding-top: $link-outline-padding-y,
+		transition: $link-outline-transition,
+		vertical-align: middle,
 
-			lexicon-icon: (
-				margin-top: 0,
-			),
+		hover: (
+			text-decoration: none,
 		),
-		$link-outline
-	);
-
-	$link-outline-primary: ();
-	$link-outline-primary: map-deep-merge(
-		(
-			border-color: $primary,
-			color: $primary,
 
-			hover: (
-				background-color: $primary-l3,
-				color: $primary,
-			),
-
-			focus: (
-				background-color: $primary-l3,
-				color: $primary,
-			),
-
-			active: (
-				background-color: unquote('hsl(from #{$primary} h s l / 0.12)'),
-				color: $primary,
-			),
-
-			disabled: (
-				background-color: transparent,
-				color: $primary,
-				cursor: $disabled-cursor,
-				opacity: $component-disabled-opacity,
-			),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
 		),
-		$link-outline-primary
-	);
-
-	$link-outline-secondary: ();
-	$link-outline-secondary: map-deep-merge(
-		(
-			border-color: $secondary-l2,
-			color: $secondary,
 
-			hover: (
-				background-color:
-					unquote('hsl(from #{$gray-900} h s l / 0.03)'),
-				color: $gray-900,
-			),
-
-			focus: (
-				background-color:
-					unquote('hsl(from #{$gray-900} h s l / 0.03)'),
-				color: $gray-900,
-			),
+		disabled: (
+			box-shadow: none,
 
 			active: (
-				background-color:
-					unquote('hsl(from #{$gray-900} h s l / 0.06)'),
-				color: $gray-900,
-			),
-
-			disabled: (
-				background-color: transparent,
-				color: $secondary,
-				cursor: $disabled-cursor,
-				opacity: $component-disabled-opacity,
+				pointer-events: none,
 			),
 		),
-		$link-outline-secondary
-	);
 
-	// Link Monospaced
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$link-outline
+);
+
+$link-outline-primary: () !default;
+$link-outline-primary: map-deep-merge(
+	(
+		border-color: $primary,
+		color: $primary,
+
+		hover: (
+			background-color: $primary-l3,
+			color: $primary,
+		),
 
-	// @deprecated as of v3.4.0 use the Sass map `$link-monospaced` instead
+		focus: (
+			background-color: $primary-l3,
+			color: $primary,
+		),
 
-	$link-monospaced-size: $btn-monospaced-size-sm;
+		active: (
+			background-color: unquote('hsl(from #{$primary} h s l / 0.12)'),
+			color: $primary,
+		),
 
-	$link-monospaced: ();
-	$link-monospaced: map-deep-merge(
-		(
-			align-items: center,
-			display: inline-flex,
-			height: $link-monospaced-size,
-			justify-content: center,
-			overflow: hidden,
-			padding-bottom: 0,
-			padding-left: 0,
-			padding-right: 0,
-			padding-top: 0,
-			vertical-align: middle,
-			width: $link-monospaced-size,
+		disabled: (
+			background-color: transparent,
+			color: $primary,
+			cursor: $disabled-cursor,
+			opacity: $component-disabled-opacity,
+		),
+	),
+	$link-outline-primary
+);
+
+$link-outline-secondary: () !default;
+$link-outline-secondary: map-deep-merge(
+	(
+		border-color: $secondary-l2,
+		color: $secondary,
+
+		hover: (
+			background-color: unquote('hsl(from #{$gray-900} h s l / 0.03)'),
+			color: $gray-900,
+		),
 
-			lexicon-icon: (
-				margin-top: 0,
-			),
+		focus: (
+			background-color: unquote('hsl(from #{$gray-900} h s l / 0.03)'),
+			color: $gray-900,
 		),
-		$link-monospaced
-	);
 
-	// Component Title
+		active: (
+			background-color: unquote('hsl(from #{$gray-900} h s l / 0.06)'),
+			color: $gray-900,
+		),
 
-	$component-title: ();
-	$component-title: map-deep-merge(
-		(
-			color: var(--component-title-color, $gray-900),
-			font-size: var(--component-title-font-size, 16px),
-			font-weight:
-				var(--component-title-font-weight, $headings-font-weight),
-			line-height: var(--component-title-line-height, 1.25),
-			margin-bottom:
+		disabled: (
+			background-color: transparent,
+			color: $secondary,
+			cursor: $disabled-cursor,
+			opacity: $component-disabled-opacity,
+		),
+	),
+	$link-outline-secondary
+);
+
+// Link Monospaced
+
+// @deprecated as of v3.4.0 use the Sass map `$link-monospaced` instead
+
+$link-monospaced-size: $btn-monospaced-size-sm !default;
+
+$link-monospaced: () !default;
+$link-monospaced: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: $link-monospaced-size,
+		justify-content: center,
+		overflow: hidden,
+		padding-bottom: 0,
+		padding-left: 0,
+		padding-right: 0,
+		padding-top: 0,
+		vertical-align: middle,
+		width: $link-monospaced-size,
+
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$link-monospaced
+);
+
+// Component Title
+
+$component-title: () !default;
+$component-title: map-deep-merge(
+	(
+		color: var(--component-title-color, $gray-900),
+		font-size: var(--component-title-font-size, 16px),
+		font-weight: var(--component-title-font-weight, $headings-font-weight),
+		line-height: var(--component-title-line-height, 1.25),
+		margin-bottom:
+			var(
+				--component-title-margin-bottom,
+				calc((#{$dropdown-action-toggle-size} - (1em * 1.25)) / 2)
+			),
+		margin-top:
+			var(
+				--component-title-margin-top,
+				calc((#{$dropdown-action-toggle-size} - (1em * 1.25)) / 2)
+			),
+	),
+	$component-title
+);
+
+$component-title-link: () !default;
+$component-title-link: map-deep-merge(
+	(
+		border-radius: 1px,
+		color: var(--component-title-link-color, $gray-900),
+		transition: box-shadow 0.15s ease-in-out,
+
+		hover: (
+			color:
 				var(
-					--component-title-margin-bottom,
-					calc((#{$dropdown-action-toggle-size} - (1em * 1.25)) / 2)
+					--component-title-link-hover-color,
+					unquote('hsl(from #{$gray-900} h s calc(l - 15))')
 				),
-			margin-top:
+		),
+
+		focus: (
+			color:
 				var(
-					--component-title-margin-top,
-					calc((#{$dropdown-action-toggle-size} - (1em * 1.25)) / 2)
+					--component-title-link-focus-color,
+					unquote('hsl(from #{$gray-900} h s calc(l - 15))')
 				),
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
 		),
-		$component-title
-	);
-
-	$component-title-link: ();
-	$component-title-link: map-deep-merge(
-		(
-			border-radius: 1px,
-			color: var(--component-title-link-color, $gray-900),
-			transition: box-shadow 0.15s ease-in-out,
-
-			hover: (
-				color:
-					var(
-						--component-title-link-hover-color,
-						unquote('hsl(from #{$gray-900} h s calc(l - 15))')
-					),
-			),
-
-			focus: (
-				color:
-					var(
-						--component-title-link-focus-color,
-						unquote('hsl(from #{$gray-900} h s calc(l - 15))')
-					),
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+	),
+	$component-title-link
+);
+
+$component-title: map-deep-merge(
+	$component-title,
+	(
+		href: $component-title-link,
+	)
+);
+
+// Component Subtitle
+
+$component-subtitle: () !default;
+$component-subtitle: map-deep-merge(
+	(
+		color: var(--component-subtitle-color, $gray-600),
+		font-weight:
+			var(--component-subtitle-font-weight, $font-weight-semi-bold),
+		line-height: var(--component-subtitle-line-height, 1.45),
+		margin-bottom: var(--component-subtitle-margin-bottom, 0),
+	),
+	$component-subtitle
+);
+
+$component-subtitle-link: () !default;
+$component-subtitle-link: map-deep-merge(
+	(
+		border-radius: 1px,
+		color: var(--component-subtitle-link-color, $gray-600),
+		transition: box-shadow 0.15s ease-in-out,
+
+		hover: (
+			color: var(--component-subtitle-link-hover-color, $gray-900),
 		),
-		$component-title-link
-	);
-
-	$component-title: map-deep-merge(
-		$component-title,
-		(
-			href: $component-title-link,
-		)
-	);
-
-	// Component Subtitle
-
-	$component-subtitle: ();
-	$component-subtitle: map-deep-merge(
-		(
-			color: var(--component-subtitle-color, $gray-600),
-			font-weight:
-				var(--component-subtitle-font-weight, $font-weight-semi-bold),
-			line-height: var(--component-subtitle-line-height, 1.45),
-			margin-bottom: var(--component-subtitle-margin-bottom, 0),
-		),
-		$component-subtitle
-	);
-
-	$component-subtitle-link: ();
-	$component-subtitle-link: map-deep-merge(
-		(
-			border-radius: 1px,
-			color: var(--component-subtitle-link-color, $gray-600),
-			transition: box-shadow 0.15s ease-in-out,
-
-			hover: (
-				color: var(--component-subtitle-link-hover-color, $gray-900),
-			),
 
-			focus: (
-				color: var(--component-subtitle-link-focus-color, $gray-900),
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+		focus: (
+			color: var(--component-subtitle-link-focus-color, $gray-900),
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
 		),
-		$component-subtitle-link
-	);
-
-	$component-subtitle: map-deep-merge(
-		$component-subtitle,
-		(
-			href: $component-subtitle-link,
-		)
-	);
-
-	// Component Action
-
-	$component-action: ();
-	$component-action: map-deep-merge(
-		(
-			align-items: center,
+	),
+	$component-subtitle-link
+);
+
+$component-subtitle: map-deep-merge(
+	$component-subtitle,
+	(
+		href: $component-subtitle-link,
+	)
+);
+
+// Component Action
+
+$component-action: () !default;
+$component-action: map-deep-merge(
+	(
+		align-items: center,
+		background-color: var(--component-action-background-color, transparent),
+		border-color: var(--component-action-border-color, transparent),
+		border-radius: var(--component-action-border-radius, $border-radius),
+		border-width: var(--component-action-border-width, 0),
+		color: var(--component-action-color, $secondary),
+		display: inline-flex,
+		font-size: var(--component-action-font-size, 16px),
+		height:
+			var(--component-action-height, map-get($link-monospaced, height)),
+		justify-content: center,
+		overflow: hidden,
+		padding: var(--component-action-padding, 0),
+		transition: $component-transition,
+		vertical-align: middle,
+		width: var(--component-action-width, map-get($link-monospaced, width)),
+		hover: (
 			background-color:
-				var(--component-action-background-color, transparent),
-			border-color: var(--component-action-border-color, transparent),
-			border-radius:
-				var(--component-action-border-radius, $border-radius),
-			border-width: var(--component-action-border-width, 0),
-			color: var(--component-action-color, $secondary),
-			display: inline-flex,
-			font-size: var(--component-action-font-size, 16px),
-			height:
 				var(
-					--component-action-height,
-					map-get($link-monospaced, height)
+					--component-action-hover-background-color,
+					unquote('hsl(from #{$gray-900} h s l / 0.03)')
 				),
-			justify-content: center,
-			overflow: hidden,
-			padding: var(--component-action-padding, 0),
-			transition: $component-transition,
-			vertical-align: middle,
-			width:
-				var(--component-action-width, map-get($link-monospaced, width)),
-			hover: (
-				background-color:
-					var(
-						--component-action-hover-background-color,
-						unquote('hsl(from #{$gray-900} h s l / 0.03)')
-					),
-				color: var(--component-action-hover-color, $gray-900),
-			),
+			color: var(--component-action-hover-color, $gray-900),
+		),
 
-			focus: (
-				background-color:
-					var(
-						--component-action-focus-background-color,
-						unquote('hsl(from #{$gray-900} h s l / 0.03)')
-					),
-				box-shadow: $component-focus-box-shadow,
-				color: var(--component-action-focus-color, $gray-900),
-				outline: 0,
-			),
+		focus: (
+			background-color:
+				var(
+					--component-action-focus-background-color,
+					unquote('hsl(from #{$gray-900} h s l / 0.03)')
+				),
+			box-shadow: $component-focus-box-shadow,
+			color: var(--component-action-focus-color, $gray-900),
+			outline: 0,
+		),
 
-			active: (
-				background-color:
-					var(
-						--component-action-active-background-color,
-						unquote('hsl(from #{$gray-900} h s l / 0.06)')
-					),
-				color: var(--component-action-active-color, $gray-900),
-			),
+		active: (
+			background-color:
+				var(
+					--component-action-active-background-color,
+					unquote('hsl(from #{$gray-900} h s l / 0.06)')
+				),
+			color: var(--component-action-active-color, $gray-900),
+		),
 
-			disabled: (
-				background-color:
-					var(
-						--component-action-disabled-background-color,
-						transparent
-					),
-				box-shadow: none,
-				color: var(--component-action-disabled-color, $secondary),
-				cursor: $disabled-cursor,
-				opacity:
-					var(
-						--component-action-disabled-opacity,
-						$component-disabled-opacity
-					),
-				active: (
-					pointer-events: none,
+		disabled: (
+			background-color:
+				var(--component-action-disabled-background-color, transparent),
+			box-shadow: none,
+			color: var(--component-action-disabled-color, $secondary),
+			cursor: $disabled-cursor,
+			opacity:
+				var(
+					--component-action-disabled-opacity,
+					$component-disabled-opacity
 				),
+			active: (
+				pointer-events: none,
 			),
+		),
 
-			lexicon-icon: (
-				margin-top: 0,
-			),
+		lexicon-icon: (
+			margin-top: 0,
 		),
-		$component-action
-	);
-
-	$component-text: ();
-
-	$component-icon: ();
-	$component-icon: map-deep-merge(
-		(
-			align-items: center,
-			display: inline-flex,
-			height: var(--component-icon-height, 32px),
-			justify-content: center,
-			width: var(--component-icon-width, 32px),
-			lexicon-icon: (
-				margin-top: 0,
-			),
+	),
+	$component-action
+);
+
+$component-text: () !default;
+
+$component-icon: () !default;
+$component-icon: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: var(--component-icon-height, 32px),
+		justify-content: center,
+		width: var(--component-icon-width, 32px),
+		lexicon-icon: (
+			margin-top: 0,
 		),
-		$component-icon
-	);
-}
+	),
+	$component-icon
+);