update components to use surface tokens

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);

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));
   }

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);

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;
   }
 

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);

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));
   }