From 9c78db4b2fe51a29d1f4371fc1191f525b86a2cc Mon Sep 17 00:00:00 2001
From: Sandhya Raja Sabeson <sandhya.rajasabeson@blackbaud.com>
Date: Thu, 18 Jul 2024 12:14:22 -0400
Subject: [PATCH] chore(components/indicators): chevron split scss stylesheets
 (#2520)

---
 .../lib/modules/chevron/chevron.component.ts  |  7 ++++++-
 .../chevron/chevron.default.component.scss    | 20 +++++++++++++++++++
 ...ent.scss => chevron.modern.component.scss} |  7 ++-----
 3 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss
 rename libs/components/indicators/src/lib/modules/chevron/{chevron.component.scss => chevron.modern.component.scss} (77%)

diff --git a/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts b/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts
index 82b2508cee..7bfea8f47b 100644
--- a/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts
+++ b/libs/components/indicators/src/lib/modules/chevron/chevron.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Creates an accessible button that wraps the chevron icon.
@@ -6,8 +7,12 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
  */
 @Component({
   selector: 'sky-chevron',
-  styleUrls: ['./chevron.component.scss'],
+  styleUrls: [
+    './chevron.default.component.scss',
+    './chevron.modern.component.scss',
+  ],
   templateUrl: './chevron.component.html',
+  hostDirectives: [SkyThemeComponentClassDirective],
 })
 export class SkyChevronComponent {
   /**
diff --git a/libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss b/libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss
new file mode 100644
index 0000000000..c7f36365bb
--- /dev/null
+++ b/libs/components/indicators/src/lib/modules/chevron/chevron.default.component.scss
@@ -0,0 +1,20 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
+@use 'libs/components/theme/src/lib/styles/variables' as *;
+
+@include mixins.sky-component('default', '.sky-chevron') {
+  border: none;
+  background-color: transparent;
+  flex-shrink: 0;
+  height: $sky-context-menu-size;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: $sky-context-menu-size;
+  cursor: pointer;
+  position: relative;
+  vertical-align: top;
+
+  &:hover .sky-chevron-part {
+    border-color: darken($sky-text-color-icon-borderless, 20%);
+  }
+}
diff --git a/libs/components/indicators/src/lib/modules/chevron/chevron.component.scss b/libs/components/indicators/src/lib/modules/chevron/chevron.modern.component.scss
similarity index 77%
rename from libs/components/indicators/src/lib/modules/chevron/chevron.component.scss
rename to libs/components/indicators/src/lib/modules/chevron/chevron.modern.component.scss
index f3b9d576d9..4267ccd7e0 100644
--- a/libs/components/indicators/src/lib/modules/chevron/chevron.component.scss
+++ b/libs/components/indicators/src/lib/modules/chevron/chevron.modern.component.scss
@@ -1,10 +1,7 @@
+@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
-button {
-  background: lightblue;
-}
-
-.sky-chevron {
+@include mixins.sky-component('modern', '.sky-chevron') {
   border: none;
   background-color: transparent;
   flex-shrink: 0;