From a4b8bbe3674a653e2443071d93984596dacc48b5 Mon Sep 17 00:00:00 2001
From: "Andrew C. Dvorak" <acdvorak@gmail.com>
Date: Fri, 11 Aug 2017 12:45:52 -0700
Subject: [PATCH] chore(theme): Change Sass comments from `/**` to `//` for
 variables, functions, and mixins (#1112)

Sass emits `/**`-style comments in the CSS output, but `//`-style comments are removed.

Because Sass variables, functions, and mixins do not output any CSS directly, we end up with rogue `/**` comments in our CSS that aren't attached to anything, which looks weird and is confusing.
---
 packages/mdc-theme/_constants.scss | 22 ++++-----
 packages/mdc-theme/_functions.scss | 18 +++-----
 packages/mdc-theme/_mixins.scss    | 74 ++++++++++++++----------------
 packages/mdc-theme/_variables.scss | 18 ++++----
 4 files changed, 59 insertions(+), 73 deletions(-)

diff --git a/packages/mdc-theme/_constants.scss b/packages/mdc-theme/_constants.scss
index bd0525709b6..baa150d71b7 100644
--- a/packages/mdc-theme/_constants.scss
+++ b/packages/mdc-theme/_constants.scss
@@ -14,18 +14,16 @@
 // limitations under the License.
 //
 
-/*
-  Precomputed linear color channel values, for use in contrast calculations.
-  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-
-  Algorithm, for c in 0 to 255:
-  f(c) {
-    c = c / 255;
-    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  }
-
-  This lookup table is needed since there is no `pow` in SASS.
-*/
+// Precomputed linear color channel values, for use in contrast calculations.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+//
+// Algorithm, for c in 0 to 255:
+// f(c) {
+//   c = c / 255;
+//   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+// }
+//
+// This lookup table is needed since there is no `pow` in SASS.
 $mdc-theme-linear-channel-values:
   0
   .0003035269835488375
diff --git a/packages/mdc-theme/_functions.scss b/packages/mdc-theme/_functions.scss
index 5d92298a4be..afdf23c04a8 100644
--- a/packages/mdc-theme/_functions.scss
+++ b/packages/mdc-theme/_functions.scss
@@ -16,10 +16,8 @@
 
 @import "./constants";
 
-/**
- * Calculate the luminance for a color.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function mdc-theme-luminance($color) {
   $red: nth($mdc-theme-linear-channel-values, red($color) + 1);
   $green: nth($mdc-theme-linear-channel-values, green($color) + 1);
@@ -28,10 +26,8 @@
   @return .2126 * $red + .7152 * $green + .0722 * $blue;
 }
 
-/**
- * Calculate the contrast ratio between two colors.
- * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- */
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 @function mdc-theme-contrast($back, $front) {
   $backLum: mdc-theme-luminance($back) + .05;
   $foreLum: mdc-theme-luminance($front) + .05;
@@ -39,10 +35,8 @@
   @return max($backLum, $foreLum) / min($backLum, $foreLum);
 }
 
-/**
- * Determine whether to use dark or light text on top of given color.
- * Returns "dark" for dark text and "light" for light text.
- */
+// Determine whether to use dark or light text on top of given color.
+// Returns "dark" for dark text and "light" for light text.
 @function mdc-theme-light-or-dark($color) {
   $minimumContrast: 3.1;
 
diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss
index 583de9e8eab..d318ce7ea6a 100644
--- a/packages/mdc-theme/_mixins.scss
+++ b/packages/mdc-theme/_mixins.scss
@@ -16,11 +16,9 @@
 
 @import "./variables";
 
-/**
- * Applies the correct theme color style to the specified property.
- * $property is typically color or background-color, but can be any CSS property that accepts color values.
- * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
- */
+// Applies the correct theme color style to the specified property.
+// $property is typically color or background-color, but can be any CSS property that accepts color values.
+// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 @mixin mdc-theme-prop($property, $style, $important: false) {
   @if not map-has-key($mdc-theme-property-values, $style) {
     @error "Invalid style specified! Choose one of #{map-keys($mdc-theme-property-values)}";
@@ -39,40 +37,38 @@
   }
 }
 
-/**
- * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
- * Should provide the $root-selector option if applied to anything other than the root selector.
- * When used with a modifier class, provide a second argument of `true` for the $compound parameter
- * to specify that this should be attached as a compound class.
- *
- * Usage example:
- *
- * ```scss
- * .mdc-foo {
- *   color: black;
- *
- *   @include mdc-theme-dark {
- *     color: white;
- *   }
- *
- *   &__bar {
- *     background: black;
- *
- *     @include mdc-theme-dark(".mdc-foo") {
- *       background: white;
- *     }
- *   }
- * }
- *
- * .mdc-foo--disabled {
- *   opacity: .38;
- *
- *   @include mdc-theme-dark(".mdc-foo", true) {
- *     opacity: .5;
- *   }
- * }
- * ```
- */
+// Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
+// Should provide the $root-selector option if applied to anything other than the root selector.
+// When used with a modifier class, provide a second argument of `true` for the $compound parameter
+// to specify that this should be attached as a compound class.
+//
+// Usage example:
+//
+// ```scss
+// .mdc-foo {
+//   color: black;
+//
+//   @include mdc-theme-dark {
+//     color: white;
+//   }
+//
+//   &__bar {
+//     background: black;
+//
+//     @include mdc-theme-dark(".mdc-foo") {
+//       background: white;
+//     }
+//   }
+// }
+//
+// .mdc-foo--disabled {
+//   opacity: .38;
+//
+//   @include mdc-theme-dark(".mdc-foo", true) {
+//     opacity: .5;
+//   }
+// }
+// ```
 @mixin mdc-theme-dark($root-selector: null, $compound: false) {
   @if ($root-selector) {
     @at-root {
diff --git a/packages/mdc-theme/_variables.scss b/packages/mdc-theme/_variables.scss
index b42d7711d4a..3c4d25fede6 100644
--- a/packages/mdc-theme/_variables.scss
+++ b/packages/mdc-theme/_variables.scss
@@ -16,20 +16,18 @@
 
 @import "./functions";
 
-/*
-  Main theme colors.
-  If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
-*/
-$mdc-theme-primary: #3f51b5 !default; /* Indigo 500 */
-$mdc-theme-accent: #ff4081 !default; /* Pink A200 */
-$mdc-theme-background: #fff !default; /* White */
+// Main theme colors.
+// If you're a user customizing your color scheme in SASS, these are probably the only variables you need to change.
+$mdc-theme-primary: #3f51b5 !default; // Indigo 500
+$mdc-theme-accent: #ff4081 !default; // Pink A200
+$mdc-theme-background: #fff !default; // White
 
-/* Which set of text colors to use for each main theme color (light or dark) */
+// Which set of text colors to use for each main theme color (light or dark).
 $mdc-theme-primary-tone: mdc-theme-light-or-dark($mdc-theme-primary);
 $mdc-theme-accent-tone: mdc-theme-light-or-dark($mdc-theme-accent);
 $mdc-theme-background-tone: mdc-theme-light-or-dark($mdc-theme-background);
 
-/* Text colors according to light vs dark and text type */
+// Text colors according to light vs dark and text type.
 $mdc-theme-text-colors: (
   dark: (
     primary: rgba(black, .87),
@@ -47,7 +45,7 @@ $mdc-theme-text-colors: (
   )
 );
 
-/* Primary text colors for each of the theme colors */
+// Primary text colors for each of the theme colors.
 $mdc-theme-property-values: (
   primary: $mdc-theme-primary,
   accent: $mdc-theme-accent,