fix(split-view,styles): use latest CSS

Author: castastrophe

.changeset/brave-crews-win.md

@@ -20,6 +20,7 @@
 '@spectrum-web-components/link': patch
 '@spectrum-web-components/modal': patch
 '@spectrum-web-components/sidenav': patch
+'@spectrum-web-components/split-view': patch
 '@spectrum-web-components/styles': patch
 '@spectrum-web-components/tags': patch
 '@spectrum-web-components/tray': patch

packages/split-view/src/spectrum-split-view.css

@@ -12,6 +12,19 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-splitview-vertical-width: 100%;
+    --spectrum-splitview-vertical-gripper-width: 50%;
+    --spectrum-splitview-vertical-gripper-outer-width: 100%;
+    --spectrum-splitview-vertical-gripper-reset: 0;
+    --spectrum-splitview-content-color: var(--spectrum-body-color);
+    --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
+    --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
+    --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
+    --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
+    --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
+    --spectrum-splitview-gripper-height: 16px;
+    --spectrum-splitview-gripper-border-width-horizontal: 3px;
+    --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
     display: flex;
     overflow: hidden;
 }

packages/split-view/src/split-view-overrides.css

@@ -12,46 +12,13 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-splitview-vertical-width: var(
-        --system-split-view-vertical-width
-    );
-    --spectrum-splitview-vertical-gripper-width: var(
-        --system-split-view-vertical-gripper-width
-    );
-    --spectrum-splitview-vertical-gripper-outer-width: var(
-        --system-split-view-vertical-gripper-outer-width
-    );
-    --spectrum-splitview-vertical-gripper-reset: var(
-        --system-split-view-vertical-gripper-reset
-    );
     --spectrum-splitview-background-color: var(
         --system-split-view-background-color
     );
-    --spectrum-splitview-content-color: var(--system-split-view-content-color);
     --spectrum-splitview-handle-background-color: var(
         --system-split-view-handle-background-color
     );
-    --spectrum-splitview-handle-background-color-hover: var(
-        --system-split-view-handle-background-color-hover
-    );
-    --spectrum-splitview-handle-background-color-down: var(
-        --system-split-view-handle-background-color-down
-    );
-    --spectrum-splitview-handle-background-color-focus: var(
-        --system-split-view-handle-background-color-focus
-    );
-    --spectrum-splitview-handle-width: var(--system-split-view-handle-width);
     --spectrum-splitview-gripper-border-radius: var(
         --system-split-view-gripper-border-radius
     );
-    --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width);
-    --spectrum-splitview-gripper-height: var(
-        --system-split-view-gripper-height
-    );
-    --spectrum-splitview-gripper-border-width-horizontal: var(
-        --system-split-view-gripper-border-width-horizontal
-    );
-    --spectrum-splitview-gripper-border-width-vertical: var(
-        --system-split-view-gripper-border-width-vertical
-    );
 }

tools/styles/tokens-v2/system-theme-bridge.css

@@ -1289,26 +1289,9 @@
     --system-slider-size-xl-handle-border-radius: calc(
         var(--spectrum-corner-radius-500) * 4
     );
-    --system-split-view-vertical-width: 100%;
-    --system-split-view-vertical-gripper-width: 50%;
-    --system-split-view-vertical-gripper-outer-width: 100%;
-    --system-split-view-vertical-gripper-reset: 0;
     --system-split-view-background-color: var(--spectrum-gray-75);
-    --system-split-view-content-color: var(--spectrum-body-color);
     --system-split-view-handle-background-color: var(--spectrum-gray-200);
-    --system-split-view-handle-background-color-hover: var(--spectrum-gray-400);
-    --system-split-view-handle-background-color-down: var(--spectrum-gray-800);
-    --system-split-view-handle-background-color-focus: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-split-view-handle-width: var(--spectrum-border-width-200);
     --system-split-view-gripper-border-radius: 2px;
-    --system-split-view-gripper-width: var(--spectrum-border-width-400);
-    --system-split-view-gripper-height: 16px;
-    --system-split-view-gripper-border-width-horizontal: 3px;
-    --system-split-view-gripper-border-width-vertical: var(
-        --spectrum-border-width-400
-    );
     --system-status-light-corner-radius: 50%;
     --system-status-light-font-weight: 400;
     --system-status-light-border-width: var(--spectrum-border-width-100);

tools/styles/tokens/express/system-theme-bridge.css

@@ -1317,26 +1317,9 @@
     --system-slider-size-xl-handle-border-radius: calc(
         var(--spectrum-corner-radius-200) * 4
     );
-    --system-split-view-vertical-width: 100%;
-    --system-split-view-vertical-gripper-width: 50%;
-    --system-split-view-vertical-gripper-outer-width: 100%;
-    --system-split-view-vertical-gripper-reset: 0;
     --system-split-view-background-color: var(--spectrum-gray-100);
-    --system-split-view-content-color: var(--spectrum-body-color);
     --system-split-view-handle-background-color: var(--spectrum-gray-300);
-    --system-split-view-handle-background-color-hover: var(--spectrum-gray-400);
-    --system-split-view-handle-background-color-down: var(--spectrum-gray-800);
-    --system-split-view-handle-background-color-focus: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-split-view-handle-width: var(--spectrum-border-width-200);
     --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75);
-    --system-split-view-gripper-width: var(--spectrum-border-width-400);
-    --system-split-view-gripper-height: 16px;
-    --system-split-view-gripper-border-width-horizontal: 3px;
-    --system-split-view-gripper-border-width-vertical: var(
-        --spectrum-border-width-400
-    );
     --system-status-light-corner-radius: 50%;
     --system-status-light-font-weight: 400;
     --system-status-light-border-width: var(--spectrum-border-width-100);

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -1307,26 +1307,9 @@
     --system-slider-size-xl-handle-border-radius: calc(
         var(--spectrum-corner-radius-200) * 4
     );
-    --system-split-view-vertical-width: 100%;
-    --system-split-view-vertical-gripper-width: 50%;
-    --system-split-view-vertical-gripper-outer-width: 100%;
-    --system-split-view-vertical-gripper-reset: 0;
     --system-split-view-background-color: var(--spectrum-gray-100);
-    --system-split-view-content-color: var(--spectrum-body-color);
     --system-split-view-handle-background-color: var(--spectrum-gray-300);
-    --system-split-view-handle-background-color-hover: var(--spectrum-gray-400);
-    --system-split-view-handle-background-color-down: var(--spectrum-gray-800);
-    --system-split-view-handle-background-color-focus: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-split-view-handle-width: var(--spectrum-border-width-200);
     --system-split-view-gripper-border-radius: var(--spectrum-corner-radius-75);
-    --system-split-view-gripper-width: var(--spectrum-border-width-400);
-    --system-split-view-gripper-height: 16px;
-    --system-split-view-gripper-border-width-horizontal: 3px;
-    --system-split-view-gripper-border-width-vertical: var(
-        --spectrum-border-width-400
-    );
     --system-status-light-corner-radius: 50%;
     --system-status-light-font-weight: 400;
     --system-status-light-border-width: var(--spectrum-border-width-100);