adjust playground splitview handle styles to blend in better

sass · Oct 3, 2024 · a8372c6 · a8372c6
1 parent cddf61d
commit a8372c6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
@@ -117,16 +117,15 @@ $playground-base-colors: (
 
 // Playground Editor area
 .sl-c-playground {
-  --mod-splitview-gripper-width: var(--sl-gutter--quarter);
-  --mod-splitview-gripper-height: var(--sl-gutter);
-  --mod-splitview-gripper-border-width-horizontal: var(--sl-gutter--quarter);
-  --mod-splitview-gripper-border-width-vertical: var(--sl-gutter--quarter);
-  --mod-splitview-gripper-border-radius: var(--sl-border-radius--small);
-  --mod-splitview-handle-width: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-width: 100%;
+  --mod-splitview-gripper-height: 100%;
+  --mod-splitview-gripper-border-width-horizontal: 0;
+  --mod-splitview-gripper-border-width-vertical: 0;
+  --mod-splitview-handle-width: var(--sl-gutter);
   --mod-splitview-handle-background-color: var(--sl-color--code-divider);
-  --mod-splitview-handle-background-color-down: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-down: var(--sl-color--code-divider);
   --mod-splitview-handle-background-color-focus: var(--sl-color--code-divider-active);
-  --mod-splitview-handle-background-color-hover: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-hover: var(--sl-color--code-divider);
   --sl-block-margin--callout: 0;
   --sl-block-padding--callout: var(--sl-gutter--quarter);
   --sl-color--button--tab: var(--sl-color--action-dark);

diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
@@ -42,8 +42,8 @@ $sl-color--code-base: #066;
 $sl-color--code-cool: #458;
 $sl-color--code-dark: black;
 $sl-color--code-highlight-light: rgba($sl-color--warning-light, 0.2);
-$sl-color--code-divider: color.adjust($sl-color--code-background-darker, $lightness: -10%);
-$sl-color--code-divider-active: color.adjust($sl-color--code-background-darker, $lightness: -15%);
+$sl-color--code-divider: var(--sl-color--white);
+$sl-color--code-divider-active: var(--sl-color--link-action);
 
 // Playground Status
 $sl-color--code-error: #cf0254;