From 5d149272b93a3635d02ba51350109ed94effcb5e Mon Sep 17 00:00:00 2001
From: "Nichols, Kieran" <kieran.nichols@tylertech.com>
Date: Tue, 24 Oct 2023 09:45:30 -0400
Subject: [PATCH] chore(theme): refactor scrollbar styles to separate token
 module and update theme stylesheet to reference new token system only

---
 src/lib/core/styles/scrollbar/index.scss      | 40 ++++++++++++++++
 src/lib/core/styles/theme/index.scss          | 26 +++++-----
 .../core/styles/tokens/scrollbar/_tokens.scss | 21 ++++++++
 .../tokens/theme/_tokens.utilities.scss       |  7 +--
 src/lib/theme/_theme.scss                     | 48 ++-----------------
 src/lib/theme/forge-theme.scss                | 21 ++++++--
 6 files changed, 96 insertions(+), 67 deletions(-)
 create mode 100644 src/lib/core/styles/scrollbar/index.scss
 create mode 100644 src/lib/core/styles/tokens/scrollbar/_tokens.scss

diff --git a/src/lib/core/styles/scrollbar/index.scss b/src/lib/core/styles/scrollbar/index.scss
new file mode 100644
index 000000000..96432d008
--- /dev/null
+++ b/src/lib/core/styles/scrollbar/index.scss
@@ -0,0 +1,40 @@
+@use '../tokens/scrollbar/tokens';
+
+///
+/// Provides scrollbar styles.
+///
+@mixin base {
+  &::-webkit-scrollbar {
+    height: #{tokens.get(height)};
+    width: #{tokens.get(width)};
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #{tokens.get(track-container)};
+    
+    &:hover {
+      background-color: #{tokens.get(track-container-hover)};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: #{tokens.get(track-container)};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: #{tokens.get(thumb-min-height)};
+    width: #{tokens.get(thumb-min-width)};
+    
+    border-radius: #{tokens.get(border-radius)};
+    border-width: #{tokens.get(border-width)};
+    border-style: solid;
+    border-color: transparent;
+    
+    background-color: #{tokens.get(thumb-container)};
+    background-clip: content-box;
+
+    &:hover {
+      background-color: #{tokens.get(thumb-container-hover)};
+    }
+  }
+}
diff --git a/src/lib/core/styles/theme/index.scss b/src/lib/core/styles/theme/index.scss
index 76311d566..df73aa150 100644
--- a/src/lib/core/styles/theme/index.scss
+++ b/src/lib/core/styles/theme/index.scss
@@ -9,19 +9,8 @@
 /// Emits custom property declarations for all default theme tokens.
 /// 
 @mixin properties {
-  /// Temporary tokens to map the MDC theme to Forge theme
-  /// TODO: Remove this once MDC dependency is removed
-  :root {
-    @each $token-name, $token-value in tokens.$mdc-remap {
-      --mdc-theme-#{$token-name}: #{$token-value};
-    }
-  }
-
-  // Forge theme tokens
-  :root {
-    @each $token-name, $token-value in tokens.$tokens {
-      --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
-    }
+  @each $token-name, $token-value in tokens.$tokens {
+    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
@@ -34,6 +23,17 @@
   }
 }
 
+///
+/// Temporary tokens to map the MDC theme to Forge theme
+/// 
+/// TODO: Remove this once MDC dependency is removed
+/// 
+@mixin properties-compat {
+  @each $token-name, $token-value in tokens.$mdc-remap {
+    --mdc-theme-#{$token-name}: #{$token-value};
+  }
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific theme token, with its token value as the fallback value
 /// 
diff --git a/src/lib/core/styles/tokens/scrollbar/_tokens.scss b/src/lib/core/styles/tokens/scrollbar/_tokens.scss
new file mode 100644
index 000000000..76e1ca601
--- /dev/null
+++ b/src/lib/core/styles/tokens/scrollbar/_tokens.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+@use '../../shape';
+
+$tokens: (
+  height: utils.module-val(scrollbar, height, 16px),
+  width: utils.module-val(scrollbar, width, 16px),
+  thumb-min-height: utils.module-val(scrollbar, thumb-min-height, 32px),
+  thumb-min-width: utils.module-val(scrollbar, thumb-min-width, 32px),
+  border-radius: utils.module-val(scrollbar, border-radius, shape.variable(full)),
+  border-width: utils.module-val(scrollbar, border-width, 3px),
+  track-container: utils.module-val(scrollbar, track-container, theme.variable(surface-container-low)),
+  track-container-hover: utils.module-val(scrollbar, track-container-hover, theme.variable(surface-container-low)),
+  thumb-container: utils.module-val(scrollbar, thumb-container, theme.variable(surface-container-medium)),
+  thumb-container-hover: utils.module-val(scrollbar, thumb-container-hover, theme.variable(surface-container-high))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}
diff --git a/src/lib/core/styles/tokens/theme/_tokens.utilities.scss b/src/lib/core/styles/tokens/theme/_tokens.utilities.scss
index 7720a3671..d79ecc906 100644
--- a/src/lib/core/styles/tokens/theme/_tokens.utilities.scss
+++ b/src/lib/core/styles/tokens/theme/_tokens.utilities.scss
@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../../utils';
 @use '../../theme/utils' as theme-utils;
 @use './color-emphasis';
 @use './tokens.surface' as surface;
@@ -15,11 +14,7 @@
   $on-surface: map.get($surface-theme, on-surface);
 
   @return (
-    outline: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower)),
-    scrollbar-track: utils.variable-ref(theme, surface-container-low),
-    scrollbar-track-hover: utils.variable-ref(theme, surface-container-low),
-    scrollbar-thumb: utils.variable-ref(theme, surface-container-medium),
-    scrollbar-thumb-hover: utils.variable-ref(theme, surface-container-high)
+    outline: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower))
   );
 }
 
diff --git a/src/lib/theme/_theme.scss b/src/lib/theme/_theme.scss
index 12daa94b6..24a3a86c3 100644
--- a/src/lib/theme/_theme.scss
+++ b/src/lib/theme/_theme.scss
@@ -9,12 +9,7 @@
 @use './keys';
 @use './theme-values';
 @use './theme-utils';
-@use '../core/styles/theme';
-
-@mixin theme-styles($prefix: forge) {
-  @include theme.properties;
-  @include theme-utils.core-styles;
-}
+@use '../core/styles/scrollbar';
 
 @function text-emphasis($emphasis) {
   @return map.get(theme-values.$text-emphasis, $emphasis);
@@ -156,45 +151,8 @@
   ), $important: $important);
 }
 
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    @include css-custom-property(width, --forge-scrollbar-width, theme-values.$scrollbar-width);
-    @include css-custom-property(height, --forge-scrollbar-height, theme-values.$scrollbar-height);
-  }
-  
-  &::-webkit-scrollbar-track {
-    background-color: var(--forge-theme-scrollbar-track, var(--forge-theme-surface-container-low));
-    
-    &:hover {
-      background-color: var(--forge-theme-scrollbar-track-hover, var(--forge-theme-surface-container-low));
-    }
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: var(--forge-theme-scrollbar-track, var(--forge-theme-surface-container-low));
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include css-custom-property(height, --forge-scrollbar-min-height, theme-values.$scrollbar-thumb-min-height);
-    @include css-custom-property(width, --forge-scrollbar-min-width, theme-values.$scrollbar-thumb-min-width);
-    @include css-custom-property(border-radius, --forge-scrollbar-border-radius, 9999px);
-    @include css-custom-property(border-width, --forge-scrollbar-border-width, 3px);
-    
-    background-color: var(--forge-theme-scrollbar-thumb, var(--forge-theme-surface-container-medium));
-    border-style: solid;
-    border-color: transparent;
-    background-clip: content-box;
-
-    &:hover {
-      background-color: var(--forge-theme-scrollbar-thumb-hover, var(--forge-theme-surface-container-high));
-    }
-  }
-}
-
-@mixin scrollbar-theme-styles() {
-  * {
-    @include scrollbar;
-  }
+@mixin scrollbar {
+  @include scrollbar.base;
 }
 
 @function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {
diff --git a/src/lib/theme/forge-theme.scss b/src/lib/theme/forge-theme.scss
index f1c583395..b87531689 100644
--- a/src/lib/theme/forge-theme.scss
+++ b/src/lib/theme/forge-theme.scss
@@ -1,4 +1,19 @@
-@use './theme';
+@use '../core/styles/theme';
+@use '../core/styles/scrollbar';
 
-@include theme.theme-styles;
-@include theme.scrollbar-theme-styles;
+// Temporary theme properties for compatibility with MDC theme tokens
+//
+// TODO: remove this once MDC dependency is removed
+:root {
+  @include theme.properties-compat;
+}
+
+// Root theme properties
+:root {
+  @include theme.properties;
+}
+
+// Custom scrollbar styles
+* {
+  @include scrollbar.base;
+}