From 8ab2907c3f9da43a8d2708d38d1ff875dd2e7937 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 23 Sep 2021 08:53:05 -0400
Subject: [PATCH] update components to use surface tokens

---
 src/components/alert/alert.styles.ts             |  2 +-
 src/components/button/button.styles.ts           |  2 +-
 src/components/card/card.styles.ts               |  2 +-
 src/components/details/details.styles.ts         |  1 +
 src/components/radio-group/radio-group.styles.ts |  2 +-
 src/components/switch/switch.styles.ts           | 10 +++++-----
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 3d8c4d428..ef4096f41 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -15,7 +15,7 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-raised));
     border: solid 1px rgb(var(--sl-color-neutral-200));
     border-top-width: 3px;
     border-radius: var(--sl-border-radius-medium);
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 6071f31ea..133dec5ff 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -70,7 +70,7 @@ export default css`
 
   /* Default */
   .button.button--default {
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-color: rgb(var(--sl-color-neutral-300));
     color: rgb(var(--sl-color-neutral-700));
   }
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 528de26fd..42efcd0bf 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-raised));
     box-shadow: var(--sl-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index 30e3b7edf..01b58d4b1 100644
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -12,6 +12,7 @@ export default css`
   .details {
     border: solid 1px rgb(var(--sl-color-neutral-200));
     border-radius: var(--sl-border-radius-medium);
+    background-color: rgb(var(--sl-surface-raised));
     overflow-anchor: none;
   }
 
diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts
index 66de4865e..c61075dc0 100644
--- a/src/components/radio-group/radio-group.styles.ts
+++ b/src/components/radio-group/radio-group.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .radio-group {
-    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
+    border: solid 1px rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-large);
     padding-top: var(--sl-spacing-x-small);
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index cb02a00ad..b665caf2c 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -41,7 +41,7 @@ export default css`
   .switch__control .switch__thumb {
     width: var(--thumb-size);
     height: var(--thumb-size);
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-radius: 50%;
     border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-400));
     transform: translateX(calc((var(--width) - var(--height)) / -2));
@@ -64,7 +64,7 @@ export default css`
   }
 
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-color: rgb(var(--sl-color-neutral-400));
   }
 
@@ -90,7 +90,7 @@ export default css`
   }
 
   .switch--checked .switch__control .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-color: rgb(var(--sl-color-primary-600));
     transform: translateX(calc((var(--width) - var(--height)) / 2));
   }
@@ -102,7 +102,7 @@ export default css`
   }
 
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-color: rgb(var(--sl-color-primary-600));
   }
 
@@ -116,7 +116,7 @@ export default css`
     .switch__input${focusVisibleSelector}
     ~ .switch__control
     .switch__thumb {
-    background-color: rgb(var(--sl-color-neutral-0));
+    background-color: rgb(var(--sl-surface-base));
     border-color: rgb(var(--sl-color-primary-600));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }