@kdcloudjs/shoelace 1.0.29 → 1.0.31

package/cdn/themes/dark.css

@@ -528,21 +528,20 @@
   --sl-tooltip-padding: var(--sl-spacing-small);
   --sl-tooltip-arrow-size: 6px;
 
-  --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
-  --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-  --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
+  --sl-table-background: var(--sl-color-neutral-0, hsl(240, 5.9%, 11%));
+  --sl-table-header-background: var(--sl-color-neutral-gray-100, #646a78);
+  --sl-table-cell-background: var(--sl-color-neutral-0, hsl(240, 5.9%, 11%));
+  --sl-table-row-background-hover: var(--sl-color-neutral-100, #1d2947);
+  --sl-table-row-background-active: var(--sl-color-primary-100, #0d097a);
   --sl-table-cell-edit-background-hover: var(
     --sl-color-neutral-0,
-    hsl(0, 0%, 100%)
+    hsl(240, 5.9%, 11%)
   );
-  --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-  --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-  --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-  --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
+  --sl-table-expand-row-background: var(--sl-color-neutral-200, #1d2947);
+  --sl-table-icon-color-default: var(--sl-color-neutral-600, #bcc7e0);
+  --sl-table-icon-color-hover: var(--sl-color-primary-600, #7d85fc);
+  --sl-table-icon-color-active: var(--sl-color-primary-600, #7d85fc);
   --sl-table-mask: rgba(255, 255, 255, 0.65);
-  --sl-table-range-selection-background: #f2f9ff;
 
   --sl-table-column-header-padding: var(--sl-spacing-x-small);
   --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -551,18 +550,17 @@
   );
 
   --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
-  --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
-  --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-  --sl-table-range-selection-border: #276ff5;
+  --sl-table-cell-border: var(--sl-color-neutral-gray-300, #989eac);
+  --sl-table-cell-border-focus: var(--sl-color-primary-600, #7d85fc);
 
   --sl-table-header-line-height: calc(
     16 * 2 / var(--kdds-base-font-size, 16) * 1rem
   );
-  --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
+  --sl-table-cell-color: var(--sl-color-neutral-900, #f5f8ff);
   --sl-table-cell-line-height: calc(
     16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
   );
-  --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+  --sl-table-default-text-color: var(--sl-color-neutral-600, #bcc7e0);
   --sl-table-font-size: var(--sl-font-size-small);
 
   --sl-table-drag-handle-width: calc(

package/cdn/themes/dark.styles.js

@@ -538,21 +538,20 @@ export default css`
     --sl-tooltip-padding: var(--sl-spacing-small);
     --sl-tooltip-arrow-size: 6px;
 
-    --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
-    --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-    --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
+    --sl-table-background: var(--sl-color-neutral-0, hsl(240, 5.9%, 11%));
+    --sl-table-header-background: var(--sl-color-neutral-gray-100, #646a78);
+    --sl-table-cell-background: var(--sl-color-neutral-0, hsl(240, 5.9%, 11%));
+    --sl-table-row-background-hover: var(--sl-color-neutral-100, #1d2947);
+    --sl-table-row-background-active: var(--sl-color-primary-100, #0d097a);
     --sl-table-cell-edit-background-hover: var(
       --sl-color-neutral-0,
-      hsl(0, 0%, 100%)
+      hsl(240, 5.9%, 11%)
     );
-    --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-    --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-    --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-    --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
+    --sl-table-expand-row-background: var(--sl-color-neutral-200, #1d2947);
+    --sl-table-icon-color-default: var(--sl-color-neutral-600, #bcc7e0);
+    --sl-table-icon-color-hover: var(--sl-color-primary-600, #7d85fc);
+    --sl-table-icon-color-active: var(--sl-color-primary-600, #7d85fc);
     --sl-table-mask: rgba(255, 255, 255, 0.65);
-    --sl-table-range-selection-background: #f2f9ff;
 
     --sl-table-column-header-padding: var(--sl-spacing-x-small);
     --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -561,18 +560,17 @@ export default css`
     );
 
     --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
-    --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
-    --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-    --sl-table-range-selection-border: #276ff5;
+    --sl-table-cell-border: var(--sl-color-neutral-gray-300, #989eac);
+    --sl-table-cell-border-focus: var(--sl-color-primary-600, #7d85fc);
 
     --sl-table-header-line-height: calc(
       16 * 2 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
+    --sl-table-cell-color: var(--sl-color-neutral-900, #f5f8ff);
     --sl-table-cell-line-height: calc(
       16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+    --sl-table-default-text-color: var(--sl-color-neutral-600, #bcc7e0);
     --sl-table-font-size: var(--sl-font-size-small);
 
     --sl-table-drag-handle-width: calc(

package/cdn/themes/light.css

@@ -559,7 +559,7 @@
   --sl-dialog-header-height: 50px;
 
   --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
+  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f7f8fa);
   --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
   --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
   --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
@@ -572,7 +572,6 @@
   --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
   --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
   --sl-table-mask: rgba(255, 255, 255, 0.65);
-  --sl-table-range-selection-background: #f2f9ff;
 
   --sl-table-column-header-padding: var(--sl-spacing-x-small);
   --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -583,7 +582,6 @@
   --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
   --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
   --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-  --sl-table-range-selection-border: #276ff5;
 
   --sl-table-header-line-height: calc(
     16 * 2 / var(--kdds-base-font-size, 16) * 1rem
@@ -592,7 +590,7 @@
   --sl-table-cell-line-height: calc(
     16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
   );
-  --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+  --sl-table-default-text-color: var(--sl-color-neutral-600, #555555);
   --sl-table-font-size: var(--sl-font-size-small);
 
   --sl-table-drag-handle-width: calc(
@@ -649,6 +647,51 @@
   --sl-pagination-icon-font-disabled: var(--sl-color-neutral-400);
   --sl-pagination-page-size-color: var(--sl-color-neutral-900);
   --sl-pagination-font-size: var(--sl-font-size-small);
+
+  --sl-sender-background-color: var(--sl-color-neutral-0);
+  --sl-sender-background-color-disabled: var(--sl-color-neutral-100);
+  --sl-sender-border-width: 1px;
+  --sl-sender-border-color: var(--sl-color-neutral-300);
+  --sl-sender-border-color-hover: var(--sl-color-neutral-300);
+  --sl-sender-border-color-focus: var(--sl-color-neutral-300);
+  --sl-sender-border-color-disabled: var(--sl-color-neutral-300);
+  --sl-sender-border-radius: var(--sl-border-radius-large);
+  --sl-sender-shadow: none;
+  --sl-sender-shadow-focus: none;
+  --sl-single-line-sender-height: 3.5rem;
+  --sl-multi-line-sender-min-height: 8rem;
+  --sl-multi-line-sender-max-height: 10.875rem;
+  --sl-sender-input-color: var(--sl-color-neutral-900);
+  --sl-sender-input-color-disabled: var(--sl-color-neutral-400);
+  --sl-sender-input-placeholder-color: var(--sl-color-neutral-400);
+  --sl-sender-input-placeholder-color-disabled: var(--sl-color-neutral-400);
+  --sl-sender-action-border-radius: var(--sl-border-radius-circle);
+  --sl-sender-action-color: var(--sl-color-neutral-900);
+  --sl-sender-action-color-hover: var(--sl-color-primary-900);
+  --sl-sender-action-color-active: var(--sl-color-primary-900);
+  --sl-sender-action-color-disable: var(--sl-color-neutral-400);
+  --sl-sender-action-background-hover: var(--sl-color-neutral-100);
+  --sl-sender-action-background-active: var(--sl-color-neutral-300);
+  --sl-sender-submit-border-radius: var(--sl-border-radius-circle);
+  --sl-sender-submit-background: var(--sl-color-primary-600);
+  --sl-sender-submit-color: var(--sl-color-neutral-0);
+  --sl-sender-submit-background-hover: var(--sl-color-primary-500);
+  --sl-sender-submit-color-hover: var(--sl-color-neutral-0);
+  --sl-sender-submit-background-active: var(--sl-color-primary-700);
+  --sl-sender-submit-color-active: var(--sl-color-neutral-0);
+  --sl-sender-submit-background-disabled: var(--sl-color-neutral-600);
+  --sl-sender-voice-waveform-color: var(--sl-color-primary-600);
+  --sl-sender-voice-recording-background: var(--sl-color-primary-50);
+  --sl-sender-quote-background: var(--sl-color-neutral-100);
+  --sl-sender-quote-border-radius: var(--sl-border-radius-pill);
+  --sl-sender-quote-accent-color: var(--sl-color-neutral-300);
+  --sl-sender-quote-text-color: var(--sl-color-neutral-500);
+  --sl-sender-quote-close-color: var(--sl-color-neutral-900);
+  --sl-sender-quote-close-background-hover-color: var(--sl-color-neutral-300);
+  --sl-sender-attachment-background: var(--sl-color-neutral-100);
+  --sl-sender-attachment-name-color: var(--sl-color-neutral-900);
+  --sl-sender-attachment-icon-color: var(--sl-color-neutral-900);
+  --sl-sender-attachment-remove-color: var(--sl-color-neutral-900);
 }
 
 @supports (scrollbar-gutter: stable) {

package/cdn/themes/light.styles.js

@@ -575,7 +575,7 @@ export default css`
     --sl-dialog-header-height: 50px;
 
     --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
+    --sl-table-header-background: var(--sl-color-neutral-gray-100, #f7f8fa);
     --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
     --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
     --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
@@ -588,7 +588,6 @@ export default css`
     --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
     --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
     --sl-table-mask: rgba(255, 255, 255, 0.65);
-    --sl-table-range-selection-background: #f2f9ff;
 
     --sl-table-column-header-padding: var(--sl-spacing-x-small);
     --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -599,7 +598,6 @@ export default css`
     --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
     --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
     --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-    --sl-table-range-selection-border: #276ff5;
 
     --sl-table-header-line-height: calc(
       16 * 2 / var(--kdds-base-font-size, 16) * 1rem
@@ -608,7 +606,7 @@ export default css`
     --sl-table-cell-line-height: calc(
       16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+    --sl-table-default-text-color: var(--sl-color-neutral-600, #555555);
     --sl-table-font-size: var(--sl-font-size-small);
 
     --sl-table-drag-handle-width: calc(
@@ -667,6 +665,51 @@ export default css`
     --sl-pagination-icon-font-disabled: var(--sl-color-neutral-400);
     --sl-pagination-page-size-color: var(--sl-color-neutral-900);
     --sl-pagination-font-size: var(--sl-font-size-small);
+
+    --sl-sender-background-color: var(--sl-color-neutral-0);
+    --sl-sender-background-color-disabled: var(--sl-color-neutral-100);
+    --sl-sender-border-width: 1px;
+    --sl-sender-border-color: var(--sl-color-neutral-300);
+    --sl-sender-border-color-hover: var(--sl-color-neutral-300);
+    --sl-sender-border-color-focus: var(--sl-color-neutral-300);
+    --sl-sender-border-color-disabled: var(--sl-color-neutral-300);
+    --sl-sender-border-radius: var(--sl-border-radius-large);
+    --sl-sender-shadow: none;
+    --sl-sender-shadow-focus: none;
+    --sl-single-line-sender-height: 3.5rem;
+    --sl-multi-line-sender-min-height: 8rem;
+    --sl-multi-line-sender-max-height: 10.875rem;
+    --sl-sender-input-color: var(--sl-color-neutral-900);
+    --sl-sender-input-color-disabled: var(--sl-color-neutral-400);
+    --sl-sender-input-placeholder-color: var(--sl-color-neutral-400);
+    --sl-sender-input-placeholder-color-disabled: var(--sl-color-neutral-400);
+    --sl-sender-action-border-radius: var(--sl-border-radius-circle);
+    --sl-sender-action-color: var(--sl-color-neutral-900);
+    --sl-sender-action-color-hover: var(--sl-color-primary-900);
+    --sl-sender-action-color-active: var(--sl-color-primary-900);
+    --sl-sender-action-color-disable: var(--sl-color-neutral-400);
+    --sl-sender-action-background-hover: var(--sl-color-neutral-100);
+    --sl-sender-action-background-active: var(--sl-color-neutral-300);
+    --sl-sender-submit-border-radius: var(--sl-border-radius-circle);
+    --sl-sender-submit-background: var(--sl-color-primary-600);
+    --sl-sender-submit-color: var(--sl-color-neutral-0);
+    --sl-sender-submit-background-hover: var(--sl-color-primary-500);
+    --sl-sender-submit-color-hover: var(--sl-color-neutral-0);
+    --sl-sender-submit-background-active: var(--sl-color-primary-700);
+    --sl-sender-submit-color-active: var(--sl-color-neutral-0);
+    --sl-sender-submit-background-disabled: var(--sl-color-neutral-600);
+    --sl-sender-voice-waveform-color: var(--sl-color-primary-600);
+    --sl-sender-voice-recording-background: var(--sl-color-primary-50);
+    --sl-sender-quote-background: var(--sl-color-neutral-100);
+    --sl-sender-quote-border-radius: var(--sl-border-radius-pill);
+    --sl-sender-quote-accent-color: var(--sl-color-neutral-300);
+    --sl-sender-quote-text-color: var(--sl-color-neutral-500);
+    --sl-sender-quote-close-color: var(--sl-color-neutral-900);
+    --sl-sender-quote-close-background-hover-color: var(--sl-color-neutral-300);
+    --sl-sender-attachment-background: var(--sl-color-neutral-100);
+    --sl-sender-attachment-name-color: var(--sl-color-neutral-900);
+    --sl-sender-attachment-icon-color: var(--sl-color-neutral-900);
+    --sl-sender-attachment-remove-color: var(--sl-color-neutral-900);
   }
 
   @supports (scrollbar-gutter: stable) {

package/cdn/themes/nova.css

@@ -558,62 +558,28 @@
   --sl-dialog-header-height: 50px;
 
   --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-header-background: var(--sl-color-neutral-100, #f5f5f5);
+  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f7f8fa);
   --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-  --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
+  --sl-table-row-background-hover: var(
+    --sl-color-neutral-100,
+    rgba(0, 0, 0, 0.06)
+  );
+  --sl-table-row-background-active: var(--sl-color-primary-100, #e0ecff);
   --sl-table-cell-edit-background-hover: var(
     --sl-color-neutral-0,
     hsl(0, 0%, 100%)
   );
-  --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-  --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-  --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-  --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
-  --sl-table-mask: rgba(255, 255, 255, 0.65);
-  --sl-table-range-selection-background: #f2f9ff;
-
-  --sl-table-column-header-padding: var(--sl-spacing-x-small);
-  --sl-table-cell-padding: var(--sl-spacing-x-small);
-  --sl-table-default-text-margin-vertical: calc(
-    16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
-  );
-
-  --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
-  --sl-table-cell-border: var(--sl-color-neutral-300, #d9d9d9);
-  --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-
-  --sl-table-range-selection-border: #276ff5;
-
-  --sl-table-header-line-height: calc(
-    16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem
-  );
-  --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
-  --sl-table-cell-line-height: calc(
-    16 * 2 / var(--kdds-base-font-size, 16) * 1rem
-  );
-  --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
-  --sl-table-font-size: var(--sl-font-size-small);
-
-  --sl-table-drag-handle-width: calc(
-    16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
+  --sl-table-expand-row-background: var(
+    --sl-color-neutral-200,
+    rgba(0, 0, 0, 0.12)
   );
-
-  --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
-  --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-  --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-  --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
-  --sl-table-cell-edit-background-hover: var(
-    --sl-color-neutral-0,
-    hsl(0, 0%, 100%)
+  --sl-table-icon-color-default: var(
+    --sl-color-neutral-600,
+    rgba(0, 0, 0, 0.64)
   );
-  --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-  --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-  --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-  --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
+  --sl-table-icon-color-hover: var(--sl-color-primary-600, #2970ff);
+  --sl-table-icon-color-active: var(--sl-color-primary-600, #2970ff);
   --sl-table-mask: rgba(255, 255, 255, 0.65);
-  --sl-table-range-selection-background: #f2f9ff;
 
   --sl-table-column-header-padding: var(--sl-spacing-x-small);
   --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -623,17 +589,19 @@
 
   --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
   --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
-  --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-  --sl-table-range-selection-border: #276ff5;
+  --sl-table-cell-border-focus: var(--sl-color-primary-600, #2970ff);
 
   --sl-table-header-line-height: calc(
     16 * 2 / var(--kdds-base-font-size, 16) * 1rem
   );
-  --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
+  --sl-table-cell-color: var(--sl-color-neutral-900, rgba(0, 0, 0, 0.94));
   --sl-table-cell-line-height: calc(
     16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
   );
-  --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+  --sl-table-default-text-color: var(
+    --sl-color-neutral-600,
+    rgba(0, 0, 0, 0.64)
+  );
   --sl-table-font-size: var(--sl-font-size-small);
 
   --sl-table-drag-handle-width: calc(

package/cdn/themes/nova.styles.js

@@ -574,62 +574,28 @@ export default css`
     --sl-dialog-header-height: 50px;
 
     --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-header-background: var(--sl-color-neutral-100, #f5f5f5);
+    --sl-table-header-background: var(--sl-color-neutral-gray-100, #f7f8fa);
     --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-    --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
+    --sl-table-row-background-hover: var(
+      --sl-color-neutral-100,
+      rgba(0, 0, 0, 0.06)
+    );
+    --sl-table-row-background-active: var(--sl-color-primary-100, #e0ecff);
     --sl-table-cell-edit-background-hover: var(
       --sl-color-neutral-0,
       hsl(0, 0%, 100%)
     );
-    --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-    --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-    --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-    --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
-    --sl-table-mask: rgba(255, 255, 255, 0.65);
-    --sl-table-range-selection-background: #f2f9ff;
-
-    --sl-table-column-header-padding: var(--sl-spacing-x-small);
-    --sl-table-cell-padding: var(--sl-spacing-x-small);
-    --sl-table-default-text-margin-vertical: calc(
-      16 * 0.875 / var(--kdds-base-font-size, 16) * 1rem
+    --sl-table-expand-row-background: var(
+      --sl-color-neutral-200,
+      rgba(0, 0, 0, 0.12)
     );
-
-    --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
-    --sl-table-cell-border: var(--sl-color-neutral-300, #d9d9d9);
-    --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-
-    --sl-table-range-selection-border: #276ff5;
-
-    --sl-table-header-line-height: calc(
-      16 * 1.75 / var(--kdds-base-font-size, 16) * 1rem
+    --sl-table-icon-color-default: var(
+      --sl-color-neutral-600,
+      rgba(0, 0, 0, 0.64)
     );
-    --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
-    --sl-table-cell-line-height: calc(
-      16 * 2 / var(--kdds-base-font-size, 16) * 1rem
-    );
-    --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
-    --sl-table-font-size: var(--sl-font-size-small);
-
-    --sl-table-drag-handle-width: calc(
-      16 * 0.5 / var(--kdds-base-font-size, 16) * 1rem
-    );
-
-    --sl-table-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-header-background: var(--sl-color-neutral-gray-100, #f5f5f5);
-    --sl-table-cell-background: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
-    --sl-table-row-background-hover: var(--sl-color-neutral-100, #f5f5f5);
-    --sl-table-row-background-active: var(--sl-color-primary-100, #f2f6ff);
-    --sl-table-cell-edit-background-hover: var(
-      --sl-color-neutral-0,
-      hsl(0, 0%, 100%)
-    );
-    --sl-table-expand-row-background: var(--sl-color-neutral-200, #e5e5e5);
-    --sl-table-icon-color-default: var(--sl-color-neutral-600, #555555);
-    --sl-table-icon-color-hover: var(--sl-color-primary-600, #5582f3);
-    --sl-table-icon-color-active: var(--sl-color-primary-600, #5582f3);
+    --sl-table-icon-color-hover: var(--sl-color-primary-600, #2970ff);
+    --sl-table-icon-color-active: var(--sl-color-primary-600, #2970ff);
     --sl-table-mask: rgba(255, 255, 255, 0.65);
-    --sl-table-range-selection-background: #f2f9ff;
 
     --sl-table-column-header-padding: var(--sl-spacing-x-small);
     --sl-table-cell-padding: var(--sl-spacing-x-small);
@@ -639,17 +605,19 @@ export default css`
 
     --sl-table-cell-border-width: var(--sl-input-border-width, 1px);
     --sl-table-cell-border: var(--sl-color-neutral-gray-300, #ebeef2);
-    --sl-table-cell-border-focus: var(--sl-color-primary-600, #5582f3);
-    --sl-table-range-selection-border: #276ff5;
+    --sl-table-cell-border-focus: var(--sl-color-primary-600, #2970ff);
 
     --sl-table-header-line-height: calc(
       16 * 2 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-table-cell-color: var(--sl-color-neutral-900, #212121);
+    --sl-table-cell-color: var(--sl-color-neutral-900, rgba(0, 0, 0, 0.94));
     --sl-table-cell-line-height: calc(
       16 * 2.5 / var(--kdds-base-font-size, 16) * 1rem
     );
-    --sl-table-default-text-color: var(--sl-color-neutral-600, #666666);
+    --sl-table-default-text-color: var(
+      --sl-color-neutral-600,
+      rgba(0, 0, 0, 0.64)
+    );
     --sl-table-font-size: var(--sl-font-size-small);
 
     --sl-table-drag-handle-width: calc(