feat: rename css theme properties

README.md

@@ -33,19 +33,8 @@ dockable and tabular views
 - Tabular views with Drag and Drop support
 - Documentation and examples
 
-I
+Largly inspired by code IDE editors such as VSCode. Parts of the core resizable panelling is based upon an implementation found in the VSCode sources of a [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
 
-Largly inspired by code IDE editors such as VSCode. Parts of the core resizable panelling is based upon the following VSCode sources:
-
-
-The below files controlling some of the core panel sizing and layouting are largly inspired by code found in the VSCode source
-- https://github.com/mathuo/dockview/blob/master/packages/dockview/src/splitview/core/splitview.ts
-- https://github.com/mathuo/dockview/blob/master/packages/dockview/src/gridview/gridview.ts
-- https://github.com/mathuo/dockview/blob/master/packages/dockview/src/gridview/branchNode.ts
-- https://github.com/mathuo/dockview/blob/master/packages/dockview/src/gridview/leafNode.ts
-The repsective VSCode sources can be found at:
-- https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview
-- https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
 ## Installation
 You can install the project from [npm](https://www.npmjs.com/package/dockview). The project comes with TypeScript typings.
 
@@ -82,19 +71,51 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
 - [Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
 - [Paneview](https://codesandbox.io/s/simple-paneview-v8qvb)
 
-
+# API Documentation
-
+### Splitview
-
-## Splitview
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/splitviewapi.html)
 [Panel Api]()
 
-## Gridview
+### Gridview
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/gridviewapi.html)
 [Panel Api]()
-## Dockview
+### Dockview
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/dockviewapi.html)
 [Panel Api]()
-## Paneview
+### Paneview
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
 [Panel Api]()
+
+## Theming
+
+The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. 
+
+
+| CSS Property | Description |
+| ------------ | ----------- |
+| **General** |
+| --dv-active-sash-color | The background color a dividing sash during an interaction |
+| --dv-separator-border | The color of the seperator between panels |
+| **Paneview** |
+| --dv-paneview-header-border-color | - |
+| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
+| **Dockview -> Dragging** |
+| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
+| **Dockview -> Tabs container** |
+| --dv-tabs-and-actions-container-font-size | - |
+| --dv-tabs-and-actions-container-height | Default tab height |
+| --dv-tabs-and-actions-container-background-color | - |
+| --dv-tabs-container-scrollbar-color | - |
+| --dv-group-view-background-color | - |
+| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) 
+| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
+| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
+| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
+| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
+| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
+| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
+| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
+| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
+| --dv-tab-divider-color | - |
+| --dv-tab-close-icon | Default tab close icon |
+| --dv-tab-dirty-icon | Default tab dirty icon |

packages/dockview-demo/src/index.scss

@@ -20,7 +20,7 @@ body {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-    background: var(--dv-title-bar-scroll-bar-color);
+    background: var(--dv-tabs-container-scrollbar-color);
 }
 
 // *,

packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx

@@ -0,0 +1,157 @@
+import {
+    CompositeDisposable,
+    DockviewApi,
+    DockviewComponents,
+    DockviewReact,
+    DockviewReadyEvent,
+    GroupChangeKind,
+    IDockviewPanelProps,
+    IWatermarkPanelProps,
+    PanelCollection,
+} from 'dockview';
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+
+const components: PanelCollection<IDockviewPanelProps<any>> = {
+    default: (props) => {
+        return (
+            <div style={{ padding: '10px', height: '100%' }}>hello world</div>
+        );
+    },
+    ticker: (props: IDockviewPanelProps<{ ticker: number }>) => {
+        const close = () => props.api.close();
+        return (
+            <DockviewComponents.Panel>
+                <DockviewComponents.Tab>
+                    <div
+                        style={{
+                            border: '1px solid pink',
+                            height: '100%',
+                            boxSizing: 'border-box',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            padding: '0px 8px',
+                            width: '200px',
+                        }}
+                    >
+                        <span>{props.api.title}</span>
+                        <span
+                            style={{ fontSize: '9px' }}
+                        >{`(${props.params.ticker})`}</span>
+                        {!props.api.suppressClosable && (
+                            <span onClick={close}>X</span>
+                        )}
+                    </div>
+                </DockviewComponents.Tab>
+                <DockviewComponents.Body>
+                    <div style={{ padding: '10px', height: '100%' }}>
+                        {`The current ticker value is ${props.params.ticker}`}
+                    </div>
+                </DockviewComponents.Body>
+            </DockviewComponents.Panel>
+        );
+    },
+    iframe: (props) => {
+        return (
+            <div style={{ height: '100%', width: '100%' }}>
+                <iframe src="./" style={{ height: '100%', width: '100%' }}>
+                    Hello world
+                </iframe>
+            </div>
+        );
+    },
+};
+
+export const Params = (props: {
+    onEvent: (name: string) => void;
+    theme: string;
+    hideBorders: boolean;
+    disableAutoResizing: boolean;
+}) => {
+    const api = React.useRef<DockviewApi>();
+
+    React.useEffect(() => {
+        if (!api.current) {
+            return () => {
+                // noop
+            };
+        }
+
+        const gridApi = api.current;
+
+        const interval = setInterval(() => {
+            const panel1 = gridApi.getPanel('panel1');
+
+            panel1.update({ params: { ticker: Date.now() } });
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [api]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        api.current = event.api;
+
+        event.api.onGridEvent((e) => props.onEvent(e.kind));
+
+        event.api.addPanel({
+            id: 'panel1',
+            component: 'ticker',
+            params: {
+                ticker: 0,
+            },
+        });
+        event.api.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+        event.api.addPanel({
+            id: 'panel3',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'right' },
+        });
+        event.api.addPanel({
+            id: 'panel4',
+            component: 'default',
+            position: { referencePanel: 'panel3', direction: 'below' },
+        });
+
+        // event.api.getPanel('panel1').api;
+    };
+
+    return (
+        <DockviewReact
+            className={props.theme}
+            onReady={onReady}
+            components={components}
+            hideBorders={props.hideBorders}
+            disableAutoResizing={props.disableAutoResizing}
+        />
+    );
+};
+
+export default {
+    title: 'Library/Dockview/Params',
+    component: Params,
+    decorators: [
+        (Component) => {
+            document.body.style.padding = '0px';
+            return (
+                <div style={{ height: '100vh', fontFamily: 'Arial' }}>
+                    <Component />
+                </div>
+            );
+        },
+    ],
+    args: { theme: 'dockview-theme-light' },
+    argTypes: {
+        theme: {
+            control: {
+                type: 'select',
+                options: ['dockview-theme-dark', 'dockview-theme-light'],
+            },
+        },
+        onEvent: { action: 'onEvent' },
+    },
+} as Meta;

packages/dockview/README.md

@@ -23,6 +23,7 @@ A zero dependency layout manager based on the layering of split-view components
 - Generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
 
 Want to inspect the deployed package? Go to https://unpkg.com/browse/dockview@latest/
+
 ### Features
 - Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
 dockable and tabular views
@@ -32,6 +33,7 @@ dockable and tabular views
 - Tabular views with Drag and Drop support
 - Documentation and examples
 
+Largly inspired by code IDE editors such as VSCode. Parts of the core resizable panelling is based upon an implementation found in the VSCode sources of a [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
 
 ## Installation
 You can install the project from [npm](https://www.npmjs.com/package/dockview). The project comes with TypeScript typings.
@@ -69,3 +71,51 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
 - [Splitview](https://codesandbox.io/s/simple-splitview-l53nn)
 - [Paneview](https://codesandbox.io/s/simple-paneview-v8qvb)
 
+# API Documentation
+### Splitview
+[Component Api](https://mathuo.github.io/dockview/output/docs/classes/splitviewapi.html)
+[Panel Api]()
+
+### Gridview
+[Component Api](https://mathuo.github.io/dockview/output/docs/classes/gridviewapi.html)
+[Panel Api]()
+### Dockview
+[Component Api](https://mathuo.github.io/dockview/output/docs/classes/dockviewapi.html)
+[Panel Api]()
+### Paneview
+[Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
+[Panel Api]()
+
+## Theming
+
+The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. 
+
+
+| CSS Property | Description |
+| ------------ | ----------- |
+| **General** |
+| --dv-active-sash-color | The background color a dividing sash during an interaction |
+| --dv-separator-border | The color of the seperator between panels |
+| **Paneview** |
+| --dv-paneview-header-border-color | - |
+| --dv-paneview-active-outline-color | The primary accent color, used for example to highlight the active panel in Paneviews |
+| **Dockview -> Dragging** |
+| --dv-drag-over-background-color | The overlay color applied to a group when a moving tab is dragged over |
+| **Dockview -> Tabs container** |
+| --dv-tabs-and-actions-container-font-size | - |
+| --dv-tabs-and-actions-container-height | Default tab height |
+| --dv-tabs-and-actions-container-background-color | - |
+| --dv-tabs-container-scrollbar-color | - |
+| --dv-group-view-background-color | - |
+| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) 
+| --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
+| --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
+| --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |
+| --dv-inactivegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in groups other than the active group |
+| --dv-activegroup-visiblepanel-tab-color | The color of the tab for the visible panel in the active group |
+| --dv-activegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in the active group |
+| --dv-inactivegroup-visiblepanel-tab-color | The color of the tab for the visible panel in groups other than the active group |
+| --dv-inactivegroup-hiddenpanel-tab-color | The color of the tab for the hidden panel/s in groups other than the active group |
+| --dv-tab-divider-color | - |
+| --dv-tab-close-icon | Default tab close icon |
+| --dv-tab-dirty-icon | Default tab dirty icon |

packages/dockview/src/__tests__/groupview/groupview.spec.ts

@@ -276,7 +276,7 @@ describe('groupview', () => {
 
     test('default', () => {
         let viewQuery = groupview.element.querySelectorAll(
-            '.groupview > .title-container'
+            '.groupview > .tabs-and-actions-container'
         );
         expect(viewQuery).toBeTruthy();
 
@@ -300,7 +300,7 @@ describe('groupview', () => {
         });
 
         const viewQuery = groupview.element.querySelectorAll(
-            '.groupview > .title-container > .tab-container > .tab'
+            '.groupview > .tabs-and-actions-container > .tabs-container > .tab'
         );
         expect(viewQuery.length).toBe(2);
 

packages/dockview/src/dockview/components/tab/defaultTab.scss

@@ -1,5 +1,4 @@
 .tab {
-    // padding-left: 10px;
     flex-shrink: 0;
 
     &.dragged {
@@ -12,7 +11,7 @@
 
     &.dragging {
         .tab-action {
-            background-color: var(--dv-active-group-visible-panel-color);
+            background-color: var(--dv-activegroup-visiblepanel-tab-color);
         }
     }
 

packages/dockview/src/dockview/dockviewComponent.scss

@@ -12,46 +12,56 @@
 
 .groupview {
     &.active-group {
-        > .title-container > .tab-container > .tab {
+        > .tabs-and-actions-container > .tabs-container > .tab {
             &.active-tab {
-                background-color: var(--dv-active-tab-background-visible);
+                background-color: var(
-                color: var(--dv-active-group-visible-panel-color);
+                    --dv-activegroup-visiblepanel-tab-background-color
+                );
+                color: var(--dv-activegroup-visiblepanel-tab-color);
 
                 .tab-action {
                     background-color: var(
-                        --dv-active-group-visible-panel-color
+                        --dv-activegroup-visiblepanel-tab-color
                     );
                 }
             }
             &.inactive-tab {
-                background-color: var(--dv-active-tab-background-hidden);
+                background-color: var(
-                color: var(--dv-active-group-hidden-panel-color);
+                    --dv-activegroup-hiddenpanel-tab-background-color
+                );
+                color: var(--dv-activegroup-hiddenpanel-tab-color);
 
                 .tab-action {
-                    background-color: var(--dv-active-group-hidden-panel-color);
+                    background-color: var(
+                        --dv-activegroup-hiddenpanel-tab-color
+                    );
                 }
             }
         }
     }
     &.inactive-group {
-        > .title-container > .tab-container > .tab {
+        > .tabs-and-actions-container > .tabs-container > .tab {
             &.active-tab {
-                background-color: var(--dv-inactive-tab-background-visible);
+                background-color: var(
-                color: var(--dv-inactive-group-visible-panel-color);
+                    --dv-inactivegroup-visiblepanel-tab-background-color
+                );
+                color: var(--dv-inactivegroup-visiblepanel-tab-color);
 
                 .tab-action {
                     background-color: var(
-                        --dv-inactive-group-visible-panel-color
+                        --dv-inactivegroup-visiblepanel-tab-color
                     );
                 }
             }
             &.inactive-tab {
-                background-color: var(--dv-inactive-tab-background-hidden);
+                background-color: var(
-                color: var(--dv-inactive-group-hidden-panel-color);
+                    --dv-inactivegroup-hiddenpanel-tab-background-color
+                );
+                color: var(--dv-inactivegroup-hiddenpanel-tab-color);
 
                 .tab-action {
                     background-color: var(
-                        --dv-inactive-group-hidden-panel-color
+                        --dv-inactivegroup-hiddenpanel-tab-color
                     );
                 }
             }
@@ -65,7 +75,9 @@
  **/
 .tab {
     &.dragging {
-        background-color: var(--dv-active-tab-background-visible);
+        background-color: var(
-        color: var(--dv-active-group-visible-panel-color);
+            --dv-activegroup-visiblepanel-tab-background-color
+        );
+        color: var(--dv-activegroup-visiblepanel-tab-color);
     }
 }

packages/dockview/src/groupview/groupview.scss

@@ -10,7 +10,7 @@
     }
 
     &.empty {
-        > .title-container {
+        > .tabs-and-actions-container {
             display: none;
         }
     }

packages/dockview/src/groupview/tab.ts

@@ -140,7 +140,7 @@ export class Tab extends CompositeDisposable implements ITab {
                  * TODO: alternative to stopPropagation
                  *
                  * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-                 * on the tab-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
+                 * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
                  */
                 event.stopPropagation();
 

packages/dockview/src/groupview/titlebar/tabsContainer.scss

@@ -1,16 +1,16 @@
-.title-container {
+.tabs-and-actions-container {
     display: flex;
-    background-color: var(--dv-title-bar-background-color);
+    background-color: var(--dv-tabs-and-actions-container-background-color);
     flex-shrink: 0;
     box-sizing: border-box;
-    height: var(--dv-title-height);
+    height: var(--dv-tabs-and-actions-container-height);
-    font-size: var(--dv-title-font-size);
+    font-size: var(--dv-tabs-and-actions-container-font-size);
 
     &.hidden {
         display: none;
     }
 
-    .tab-container {
+    .tabs-container {
         flex-grow: 1;
         display: flex;
         overflow-x: overlay;
@@ -29,7 +29,7 @@
 
         /* Handle */
         &::-webkit-scrollbar-thumb {
-            background: var(--dv-title-bar-scroll-bar-color);
+            background: var(--dv-tabs-container-scrollbar-color);
         }
 
         &.drag-over-target {

packages/dockview/src/groupview/titlebar/tabsContainer.ts

@@ -68,11 +68,16 @@ export class TabsContainer
         this._height = value;
         if (typeof value !== 'number') {
             // removeClasses(this.element, 'separator-border');
-            this.element.style.removeProperty('--dv-title-height');
+            this.element.style.removeProperty(
+                '--dv-tabs-and-actions-container-height'
+            );
         } else {
             // addClasses(this.element, 'separator-border');
             // if (styles?.separatorBorder) {
-            this.element.style.setProperty('--dv-title-height', `${value}px`);
+            this.element.style.setProperty(
+                '--dv-tabs-and-actions-container-height',
+                `${value}px`
+            );
             // }
         }
         // this._element.style.height = `${this.height}px`;
@@ -133,7 +138,7 @@ export class TabsContainer
         this.addDisposables(this._onDropped);
 
         this._element = document.createElement('div');
-        this._element.className = 'title-container';
+        this._element.className = 'tabs-and-actions-container';
 
         this.height = options.tabHeight;
 
@@ -141,7 +146,7 @@ export class TabsContainer
         this.actionContainer.className = 'action-container';
 
         this.tabContainer = document.createElement('div');
-        this.tabContainer.className = 'tab-container';
+        this.tabContainer.className = 'tabs-container';
 
         this._element.appendChild(this.tabContainer);
         this._element.appendChild(this.actionContainer);

packages/dockview/src/paneview/paneview.scss

@@ -20,7 +20,7 @@
 
         &:not(:first-child) {
             .pane > .pane-header {
-                border-top: 1px solid var(--dv-paneview-border-color);
+                border-top: 1px solid var(--dv-paneview-header-border-color);
             }
         }
     }
@@ -56,7 +56,7 @@
                     outline-width: -1px;
                     outline-style: solid;
                     outline-offset: -1px;
-                    outline-color: var(--dv-accent-color);
+                    outline-color: var(--dv-paneview-active-outline-color);
                 }
                 // outline-width: 1px;
                 // outline-style: solid;
@@ -87,7 +87,7 @@
                     outline-width: -1px;
                     outline-style: solid;
                     outline-offset: -1px;
-                    outline-color: var(--dv-accent-color);
+                    outline-color: var(--dv-paneview-active-outline-color);
                 }
                 // outline-width: 1px;
                 // outline-style: solid;

packages/dockview/src/theme.scss

@@ -1,13 +1,13 @@
 @mixin dockview-theme-core-mixin {
-    --dv-accent-color: dodgerblue;
+    --dv-paneview-active-outline-color: dodgerblue;
-    --dv-title-font-size: 13px;
+    --dv-tabs-and-actions-container-font-size: 13px;
-    --dv-title-height: 35px;
+    --dv-tabs-and-actions-container-height: 35px;
     // --dv-tab-close-icon: url('https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg');
     // --dv-tab-dirty-icon: url('https://fonts.gstatic.com/s/i/materialicons/lens/v6/24px.svg');
     --dv-tab-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
     --dv-tab-dirty-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>');
     --dv-drag-over-background-color: rgba(83, 89, 93, 0.5);
-    --dv-title-bar-scroll-bar-color: #888;
+    --dv-tabs-container-scrollbar-color: #888;
 }
 
 @mixin dockview-theme-dark-mixin {
@@ -15,21 +15,21 @@
     //
     --dv-group-view-background-color: #1e1e1e;
     //
-    --dv-title-bar-background-color: #252526;
+    --dv-tabs-and-actions-container-background-color: #252526;
     //
-    --dv-active-tab-background-visible: #1e1e1e;
+    --dv-activegroup-visiblepanel-tab-background-color: #1e1e1e;
-    --dv-active-tab-background-hidden: #2d2d2d;
+    --dv-activegroup-hiddenpanel-tab-background-color: #2d2d2d;
-    --dv-inactive-tab-background-visible: #1e1e1e;
+    --dv-inactivegroup-visiblepanel-tab-background-color: #1e1e1e;
-    --dv-inactive-tab-background-hidden: #2d2d2d;
+    --dv-inactivegroup-hiddenpanel-tab-background-color: #2d2d2d;
     --dv-tab-divider-color: #1e1e1e;
     //
-    --dv-active-group-visible-panel-color: white;
+    --dv-activegroup-visiblepanel-tab-color: white;
-    --dv-active-group-hidden-panel-color: #969696;
+    --dv-activegroup-hiddenpanel-tab-color: #969696;
-    --dv-inactive-group-visible-panel-color: #8f8f8f;
+    --dv-inactivegroup-visiblepanel-tab-color: #8f8f8f;
-    --dv-inactive-group-hidden-panel-color: #626262;
+    --dv-inactivegroup-hiddenpanel-tab-color: #626262;
     //
     --dv-separator-border: rgb(68, 68, 68);
-    --dv-paneview-border-color: rgba(204, 204, 204, 0.2);
+    --dv-paneview-header-border-color: rgba(204, 204, 204, 0.2);
 }
 
 @mixin dockview-theme-light-mixin {
@@ -37,21 +37,21 @@
     //
     --dv-group-view-background-color: white;
     //
-    --dv-title-bar-background-color: #f3f3f3;
+    --dv-tabs-and-actions-container-background-color: #f3f3f3;
     //
-    --dv-active-tab-background-visible: white;
+    --dv-activegroup-visiblepanel-tab-background-color: white;
-    --dv-active-tab-background-hidden: #ececec;
+    --dv-activegroup-hiddenpanel-tab-background-color: #ececec;
-    --dv-inactive-tab-background-visible: white;
+    --dv-inactivegroup-visiblepanel-tab-background-color: white;
-    --dv-inactive-tab-background-hidden: #ececec;
+    --dv-inactivegroup-hiddenpanel-tab-background-color: #ececec;
     --dv-tab-divider-color: white;
     //
-    --dv-active-group-visible-panel-color: rgb(51, 51, 51);
+    --dv-activegroup-visiblepanel-tab-color: rgb(51, 51, 51);
-    --dv-active-group-hidden-panel-color: rgba(51, 51, 51, 0.7);
+    --dv-activegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.7);
-    --dv-inactive-group-visible-panel-color: rgba(51, 51, 51, 0.7);
+    --dv-inactivegroup-visiblepanel-tab-color: rgba(51, 51, 51, 0.7);
-    --dv-inactive-group-hidden-panel-color: rgba(51, 51, 51, 0.35);
+    --dv-inactivegroup-hiddenpanel-tab-color: rgba(51, 51, 51, 0.35);
     //
     --dv-separator-border: rgba(128, 128, 128, 0.35);
-    --dv-paneview-border-color: rgb(51, 51, 51);
+    --dv-paneview-header-border-color: rgb(51, 51, 51);
 }
 
 .dockview-theme-dark {
@@ -65,20 +65,21 @@
 .dockview-theme-vs {
     @include dockview-theme-dark-mixin();
 
-    --dv-active-tab-background-visible: dodgerblue;
+    --dv-activegroup-visiblepanel-tab-background-color: dodgerblue;
-    --dv-title-height: 18px;
+    --dv-tabs-and-actions-container-height: 18px;
-    --dv-title-font-size: 11px;
+    --dv-tabs-and-actions-container-font-size: 11px;
 
     .groupview {
         &.active-group {
-            > .title-container {
+            > .tabs-and-actions-container {
-                border-bottom: 2px solid var(--dv-active-tab-background-visible);
+                border-bottom: 2px solid
+                    var(--dv-activegroup-visiblepanel-tab-background-color);
             }
         }
         &.inactive-group {
-            > .title-container {
+            > .tabs-and-actions-container {
                 border-bottom: 2px solid
-                    var(--dv-inactive-tab-background-visible);
+                    var(--dv-inactivegroup-visiblepanel-tab-background-color);
             }
         }
     }