Theme: Divider, Fieldset, ScrollPanel, Splitter and TabView

components/lib/divider/style/DividerStyle.js

@@ -90,7 +90,7 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'divider',
-    css,
+    //css,
     classes,
     inlineStyles
 });

components/lib/fieldset/style/FieldsetStyle.js

@@ -39,6 +39,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'fieldset',
-    css,
+    //css,
     classes
 });

components/lib/scrollpanel/style/ScrollPanelStyle.js

@@ -70,6 +70,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'scrollpanel',
-    css,
+    //css,
     classes
 });

components/lib/splitter/style/SplitterStyle.js

@@ -62,7 +62,7 @@ const inlineStyles = {
 
 export default BaseStyle.extend({
     name: 'splitter',
-    css,
+    //css,
     classes,
     inlineStyles
 });

components/lib/tabview/style/TabViewStyle.js

@@ -105,6 +105,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'tabview',
-    css,
+    //css,
     classes
 });

components/lib/theme/lara/divider/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/divider/index.js

@@ -0,0 +1,71 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-divider-horizontal {
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    margin: var(--p-divider-horizontal-margin);
+    padding: var(--p-divider-horizontal-padding);
+}
+.p-divider-horizontal:before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: "";
+    border-top: var(--p-divider-size) var(--p-divider-color);
+}
+.p-divider-content {
+    z-index: 1;
+    background-color: var(--p-panel-content-bg);
+}
+.p-divider-vertical {
+    min-height: 100%;
+    margin: var(--p-divider-vertical-margin);
+    display: flex;
+    position: relative;
+    justify-content: center;
+    padding: var(--p-divider-vertical-padding);
+}
+.p-divider-vertical:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    content: "";
+    border-left: var(--p-divider-size) var(--p-divider-color);
+}
+.p-divider-solid.p-divider-horizontal:before {
+    border-top-style: solid;
+}
+.p-divider-solid.p-divider-vertical:before {
+    border-left-style: solid;
+}
+.p-divider-dashed.p-divider-horizontal:before {
+    border-top-style: dashed;
+}
+.p-divider-dashed.p-divider-vertical:before {
+    border-left-style: dashed;
+}
+.p-divider-dotted.p-divider-horizontal:before {
+    border-top-style: dotted;
+}
+.p-divider-dotted.p-divider-vertical:before {
+    border-left-style: dotted;
+}
+.p-divider-horizontal .p-divider-content {
+    padding: 0 var(--p-inline-spacing);
+}
+.p-divider-vertical .p-divider-content {
+    padding: var(--p-inline-spacing) 0;
+}
+    `
+};

components/lib/theme/lara/divider/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/fieldset/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/fieldset/index.js

@@ -0,0 +1,66 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-fieldset-legend > a,
+.p-fieldset-legend > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.p-fieldset-toggleable .p-fieldset-legend a {
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+    text-decoration: none;
+    padding: var(--p-panel-header-padding);
+    color: var(--p-panel-header-text-color);
+    border-radius: var(--p-border-radius);
+    transition: var(--p-list-item-transition);
+}
+.p-fieldset-legend-text {
+    line-height: 1;
+}
+.p-fieldset {
+    border: var(--p-panel-content-border);
+    background: var(--p-panel-content-bg);
+    color: var(--p-panel-content-text-color);
+    border-radius: var(--p-border-radius);
+}
+.p-fieldset-legend {
+    padding: var(--p-panel-header-padding);
+    border: var(--p-panel-header-border);
+    color: var(--p-panel-header-text-color);
+    background: var(--p-panel-header-bg);
+    font-weight: var(--p-panel-header-font-weight);
+    border-radius: var(--p-border-radius);
+}
+.p-fieldset-content {
+    padding: var(--p-panel-content-padding);
+}
+.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: var(--p-action-icon-transition);
+}
+.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
+    margin-right: var(--p-inline-spacing);
+}
+.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: var(--p-focus-shadow);
+}
+.p-fieldset-toggleable .p-fieldset-legend a:hover {
+    color: var(--p-panel-header-text-hover-color);
+}
+.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: var(--p-panel-header-hover-bg);
+    border-color: var(--p-panel-header-hover-border-color);
+    color: var(--p-panel-header-text-hover-color);
+}
+    `
+};

components/lib/theme/lara/fieldset/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/scrollpanel/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/scrollpanel/index.js

@@ -0,0 +1,64 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-scrollpanel-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    float: left;
+}
+.p-scrollpanel-content {
+    height: calc(100% + 18px);
+    width: calc(100% + 18px);
+    padding: 0 18px 18px 0;
+    position: relative;
+    overflow: auto;
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+.p-scrollpanel-content::-webkit-scrollbar {
+    display: none;
+}
+.p-scrollpanel-bar {
+    position: relative;
+    background: var(--p-scroll-panel-track-bg);
+    border-radius: 3px;
+    z-index: 2;
+    cursor: pointer;
+    opacity: 0;
+    transition: var(--p-form-element-transition);
+    border: var(--p-scroll-panel-track-border);
+}
+.p-scrollpanel-bar-y {
+    width: 9px;
+    top: 0;
+}
+.p-scrollpanel-bar-x {
+    height: 9px;
+    bottom: 0;
+}
+.p-scrollpanel-hidden {
+    visibility: hidden;
+}
+.p-scrollpanel:active .p-scrollpanel-bar,
+.p-scrollpanel:hover .p-scrollpanel-bar {
+    opacity: 1;
+}
+.p-scrollpanel-grabbed {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+.p-scrollpanel-bar:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: var(--p-focus-shadow);
+}
+    `
+};

components/lib/theme/lara/scrollpanel/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/splitter/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/splitter/index.js

@@ -0,0 +1,68 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-splitter {
+    display: flex;
+    flex-wrap: nowrap;
+    border: var(--p-panel-content-border);
+    background: var(--p-panel-content-bg);
+    border-radius: var(--p-border-radius);
+    color: var(--p-panel-content-text-color);
+}
+.p-splitter-vertical {
+    flex-direction: column;
+}
+.p-splitter-gutter {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: col-resize;
+    transition: var(--p-action-icon-transition);
+    background: var(--p-splitter-gutter-bg);
+}
+.p-splitter-horizontal.p-splitter-resizing {
+    cursor: col-resize;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    height: 24px;
+    width: 100%;
+}
+.p-splitter-horizontal > .p-splitter-gutter {
+    cursor: col-resize;
+}
+.p-splitter-vertical.p-splitter-resizing {
+    cursor: row-resize;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+.p-splitter-vertical > .p-splitter-gutter {
+    cursor: row-resize;
+}
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    width: 24px;
+    height: 100%;
+}
+.p-splitter-gutter-handle {
+    background: var(--p-splitter-gutter-handle-bg);
+    transition: var(--p-form-element-transition);
+}
+.p-splitter-gutter-handle:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: var(--p-focus-shadow);
+}
+.p-splitter-gutter-resizing {
+    background: var(--p-splitter-gutter-handle-bg);
+}
+    `
+};

components/lib/theme/lara/splitter/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/tabview/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/tabview/index.js

@@ -0,0 +1,127 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-tabview-nav-container {
+    position: relative;
+}
+.p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+}
+.p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+}
+.p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+    background: var(--p-tabview-nav-bg);
+    border: var(--p-tabview-nav-border);
+    border-width: var(--p-tabview-nav-border-width);
+}
+.p-tabview-header-action {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+}
+.p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+}
+.p-tabview-header-action:focus {
+    z-index: 1;
+}
+.p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+}
+.p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.p-tabview-nav-prev {
+    left: 0;
+}
+.p-tabview-nav-next {
+    right: 0;
+}
+.p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+}
+.p-tabview-nav li {
+    margin-right: var(--p-tabview-header-spacing);
+}
+.p-tabview-nav-link {
+    border: var(--p-tabview-header-border);
+    border-width: var(--p-tabview-header-border-width);
+    border-color: var(--p-tabview-header-border-color);
+    background: var(--p-tabview-header-bg);
+    color: var(--p-tabview-header-text-color);
+    padding: var(--p-tabview-header-padding);
+    font-weight: var(--p-tabview-header-font-weight);
+    border-top-right-radius: var(--p-border-radius);
+    border-top-left-radius: var(--p-border-radius);
+    transition:
+        background-color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s;
+    margin: var(--p-tabview-header-margin);
+}
+.p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: inset var(--p-focus-shadow);
+}
+.p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: var(--p-tabview-header-hover-bg);
+    border-color: var(--p-tabview-header-hover-border-color);
+    color: var(--p-tabview-header-text-hover-color);
+}
+.p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    border-color: var(--p-tabview-header-active-border-color);
+}
+.p-tabview-nav li.p-highlight .p-tabview-nav-link,
+.p-tabview-nav-btn.p-link {
+    background: var(--p-tabview-header-active-bg);
+    color: var(--p-tabview-header-text-active-color);
+}
+.p-tabview-nav-btn.p-link {
+    width: var(--p-button-icon-only-width);
+    box-shadow: var(--p-raised-button-shadow);
+    border-radius: 0;
+}
+.p-tabview-nav-btn.p-link:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: inset var(--p-focus-shadow);
+}
+.p-tabview-panels {
+    background: var(--p-tabview-content-bg);
+    padding: var(--p-tabview-content-padding);
+    border: var(--p-tabview-content-border);
+    color: var(--p-tabview-content-text-color);
+    border-bottom-right-radius: var(--p-border-radius);
+    border-bottom-left-radius: var(--p-border-radius);
+}
+    `
+};

components/lib/theme/lara/tabview/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/theme/lara/toolbar/index.d.ts

@@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}

components/lib/theme/lara/toolbar/index.js

@@ -0,0 +1,30 @@
+export default {
+    variables: {
+        common: {},
+        light: {},
+        dark: {}
+    },
+    css: `
+.p-toolbar {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    background: var(--p-panel-header-bg);
+    border: var(--p-panel-header-border);
+    padding: var(--p-panel-header-padding);
+    border-radius: var(--p-border-radius);
+    gap: var(--p-inline-spacing);
+}
+.p-toolbar,
+.p-toolbar-group-center,
+.p-toolbar-group-end,
+.p-toolbar-group-left,
+.p-toolbar-group-right,
+.p-toolbar-group-start {
+    display: flex;
+    align-items: center;
+}
+.p-toolbar-separator {
+    margin: 0 var(--p-inline-spacing);
+}
+    `
+};

components/lib/theme/lara/toolbar/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/toolbar/style/ToolbarStyle.js

@@ -33,6 +33,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'toolbar',
-    css,
+    //css,
     classes
 });