style(core): update @include order

wwnorton · Sep 25, 2020 · c5d3568 · c5d3568
1 parent eea1aa2
commit c5d3568
Show file tree

Hide file tree

Showing 12 changed files with 41 additions and 42 deletions.
diff --git a/packages/core/src/a11y/index.scss b/packages/core/src/a11y/index.scss
@@ -1,7 +1,6 @@
 ////
 /// @group Accessibility
 ////
-
 @use 'sass:list';
 @use '../config';
 @use '../motion';
@@ -12,10 +11,10 @@
 /// Disable animations and transitions when either children of `.reduced-motion`
 /// or the user has specified that they prefer reduced motion on their OS.
 @mixin reduce-motion {
-	@include util.set($nds-duration-scalar: 0);
-
 	transition: none !important;
 	animation: none !important;
+
+	@include util.set($nds-duration-scalar: 0);
 }
 
 /// Screen reader only - ensure that the element is only visible to screen readers.
@@ -51,9 +50,9 @@
 /// additional mechanism, such as the `<input>`'s caret.
 /// @param {box-shadow[]} $current-shadows... - Zero or more additional shadows to be applied in addition to the focus indicator.
 @mixin focus-ring($current-shadows...) {
-	@include -focus(var(--nds-focus-ring), $current-shadows...);
-
 	border-color: var(--nds-focus-color);
+
+	@include -focus(var(--nds-focus-ring), $current-shadows...);
 }
 
 @mixin not-focus-visible {

diff --git a/packages/core/src/components/button/index.scss b/packages/core/src/components/button/index.scss
@@ -17,11 +17,6 @@
 	--nds-button-border-radius: #{tokens.$border-radius};
 	--nds-button-font-weight: #{tokens.$font-weight};
 
-	@include util.set(
-		$nds-button-color: color.family('button-color', tokens.$color, color.$primary-grade),
-	);
-	@include type.ui-base;
-
 	position: relative;
 	display: inline-flex;
 	box-sizing: border-box;
@@ -31,6 +26,11 @@
 	justify-content: center;
 	align-items: center;
 
+	@include util.set(
+		$nds-button-color: color.family('button-color', tokens.$color, color.$primary-grade),
+	);
+	@include type.ui-base;
+
 	&:disabled,
 	&.disabled {
 		color: var(--nds-disabled-color);

diff --git a/packages/core/src/components/disclosure/index.scss b/packages/core/src/components/disclosure/index.scss
@@ -21,15 +21,15 @@
 @mixin summary {
 	--nds-disclosure-padding-x: 0;
 
-	@include type.ui-base;
-
 	position: relative;
 	display: flex;
 	padding: var(--nds-disclosure-padding-y) var(--nds-disclosure-padding-x);
 	cursor: pointer;
 	background-color: var(--nds-disclosure-summary-background-color);
 	align-items: center;
 
+	@include type.ui-base;
+
 	.nds-disclosure__marker:last-child {
 		margin-left: auto;
 	}

diff --git a/packages/core/src/components/dropdown/index.scss b/packages/core/src/components/dropdown/index.scss
@@ -24,14 +24,14 @@
 }
 
 @mixin button {
-	@include util.set((
-		--nds-button-color: color.family('button-color', 'base-color'),
-	));
-
 	font-weight: var(--nds-font-weight-base);
 	color: var(--nds-text-color);
 	justify-content: space-between;
 
+	@include util.set((
+		--nds-button-color: color.family('button-color', 'base-color'),
+	));
+
 	.nds-icon > path {
 		transition: transform var(--nds-duration-expand) var(--nds-easing-standard);
 		transform: rotate3d(1, 0, 0, 0);
@@ -74,8 +74,8 @@
 	font-size: var(--nds-dropdown-option-font-size);
 	line-height: var(--nds-dropdown-option-line-height);
 	cursor: default;
-	user-select: none;
 	outline: none;
+	user-select: none;
 	align-items: center;
 
 	&:hover {

diff --git a/packages/core/src/components/field/index.scss b/packages/core/src/components/field/index.scss
@@ -12,9 +12,9 @@
 // The base styling for all fields.
 // Default: `.field`
 @mixin base {
-	@include type.ui-base;
-
 	margin-bottom: spacing.spacer('block-base');
+
+	@include type.ui-base;
 }
 
 
@@ -33,11 +33,11 @@
 // The field info's label, first child of the field info container.
 // Default: `.field__label`
 @mixin label {
-	@include type.ui-base;
-
 	margin-bottom: 0;
 	font-weight: var(--nds-font-weight-bold);
 
+	@include type.ui-base;
+
 	.nds-field__group--choice & {
 		font-weight: var(--nds-font-weight-regular);
 	}
@@ -66,10 +66,10 @@
 	--nds-field-padding-y: #{tokens.$padding-y};
 	--nds-field-offset-x: #{tokens.$offset-x};
 
-	@include type.ui-base;
-
 	position: relative;
 	display: flex;
+
+	@include type.ui-base;
 }
 
 // A "choice" modifier for the field group container.
@@ -92,14 +92,14 @@
 	}
 
 	> .nds-field__input {
-		// make it invisible
-		@include a11y.sr-only;
 
 		// still position it in the center of the visual control so that form
 		// validator tooltips will point at the right thing
 		top: calc(var(--nds-font-size-base) * #{type.lh('ui')} / 2);
 		left: calc(0.5em + 1px);
 		transform: translateX(-50%);
+		// make it invisible
+		@include a11y.sr-only;
 	}
 
 	.nds-field__label {

diff --git a/packages/core/src/components/modal/index.scss b/packages/core/src/components/modal/index.scss
@@ -89,20 +89,16 @@
 }
 
 @mixin title {
-	@include type.heading-4;
-
 	margin: 0;
 
+	@include type.heading-4;
+
 	&:not(:last-child) {
 		padding-right: calc(var(--nds-modal-padding-x) / 2);
 	}
 }
 
 @mixin close-btn {
-	@include util.set(
-		$nds-button-color: color.family('button-color', 'base-color'),
-	);
-
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -112,6 +108,10 @@
 			calc(-50% + 0.125rem + var(--nds-modal-border-width)),
 			calc(50% - 0.5rem - var(--nds-modal-border-width))
 		);
+
+	@include util.set(
+		$nds-button-color: color.family('button-color', 'base-color'),
+	);
 }
 
 @mixin content {

diff --git a/packages/core/src/components/switch/index.scss b/packages/core/src/components/switch/index.scss
@@ -26,8 +26,6 @@
 	$-padding-y: calc((var(--nds-switch-height) - var(--nds-switch-font-size)) / 2);
 	$-thumb-size: calc(var(--nds-switch-height) - var(--nds-switch-thumb-margin) * 2);
 
-	@include type.ui-xs;
-
 	position: relative;
 	display: inline-flex;
 	min-width: calc(var(--nds-switch-height) * 2 + var(--nds-switch-thumb-offset));
@@ -42,6 +40,8 @@
 	justify-content: flex-end;
 	align-items: center;
 
+	@include type.ui-xs;
+
 	&::before {
 		position: absolute;
 		top: 0;

diff --git a/packages/core/src/components/tooltip/index.scss b/packages/core/src/components/tooltip/index.scss
@@ -19,15 +19,15 @@
 }
 
 @mixin content {
-	@include type.ui-sm;
-
 	position: relative;
 	z-index: 1;
 	max-width: var(--nds-tooltip-max-width);
 	padding: var(--nds-tooltip-padding-y) var(--nds-tooltip-padding-x);
 	color: var(--nds-text-color-inverse);
 	background-color: var(--nds-text-color);
 	border-radius: var(--nds-tooltip-border-radius);
+
+	@include type.ui-sm;
 }
 
 @mixin arrow {

diff --git a/packages/core/src/motion/tokens.scss b/packages/core/src/motion/tokens.scss
@@ -5,7 +5,6 @@
 /// @source https://material.io/design/motion/understanding-html Material Design: Understanding Motion
 ////
 
-
 /// A multiplier used for increasing/decreasing all motion speed.
 $duration-scalar: 1 !default;
 

diff --git a/packages/core/src/reset/index.scss b/packages/core/src/reset/index.scss
@@ -44,8 +44,6 @@
 		// 5. Change the default tap highlight to be completely transparent in iOS.
 
 		body {
-			@include type.font-smoothing; // 1
-
 			margin: 0; // 2
 			font-family: var(--nds-font-family-base);
 			font-weight: var(--nds-font-weight-base);
@@ -54,6 +52,8 @@
 			background-color: var(--nds-background-color); // 3
 			-webkit-text-size-adjust: 100%; // 4
 			-webkit-tap-highlight-color: rgba(var(--nds-black), 0); // 5
+
+			@include type.font-smoothing; // 1
 		}
 
 		// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline

diff --git a/packages/core/src/tokens.scss b/packages/core/src/tokens.scss
@@ -31,6 +31,7 @@ $radius-md: 0.25rem;
 $radius-lg: 0.5rem;
 $radius-xl: 1rem;
 $radius-pill: 99rem;
+/// The base border radius.
 $radius-base: var(--nds-radius-sm) !default;
 
 :root {

diff --git a/packages/core/src/type/index.scss b/packages/core/src/type/index.scss
@@ -304,16 +304,16 @@ $-lh-roles: (
 ///   }
 ///
 @mixin typeset-heading($size, $height) {
+	margin-top: 0;
+	margin-bottom: spacing.spacer('block-base');
+	font-style: var(--nds-font-style-headings);
+
 	@include typeset(
 		$size: $size,
 		$height: $height,
 		$family: var(--nds-font-family-headings),
 		$weight: var(--nds-font-weight-headings),
 	);
-
-	margin-top: 0;
-	margin-bottom: spacing.spacer('block-base');
-	font-style: var(--nds-font-style-headings);
 }
 
 /// A `typeset` suitable for text that is meant to convey the top level of