Showcase variables refactored

2024-02-12 00:25:50 +03:00 · 2024-02-12 00:25:50 +03:00 · c61852d2c7
parent 31f465c702
commit c61852d2c7
49 changed files with 190 additions and 1480 deletions
--- a/components/lib/theme/lara/fonts/Inter-italic.var.woff2
+++ b/components/lib/theme/lara/fonts/Inter-italic.var.woff2
--- a/components/lib/theme/lara/fonts/Inter-roman.var.woff2
+++ b/components/lib/theme/lara/fonts/Inter-roman.var.woff2
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@ -128,6 +128,6 @@ pre[class*="language-"] {

 pre[class*="language-"] {    
    code {
-        background: var(--p-dark-surface-900, var(--p-surface-800));
+        background: var(--code-background);
    }
 }
--- a/assets/styles/layout/_content.scss
+++ b/assets/styles/layout/_content.scss
@ -10,7 +10,7 @@
 }

 .card {
-    background: var(--surface-card);
+    background: var(--card-background);
    border: var(--card-border);
    padding: 2rem;
    border-radius: 10px;
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@ -1,5 +1,7 @@
 html {
    font-size: 14px;
+    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-feature-settings: "cv02","cv03","cv04","cv11";
 }

 body {
@ -7,17 +9,15 @@ body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
-    background-color: var(--surface-ground);
+    background-color: var(--ground-background);
    font-weight: normal;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
-    font-family: var(--p-font-family);
-    font-feature-settings: var(--p-font-feature-settings);
 }

 .layout-wrapper {
-    background-color: var(--surface-ground);
+    background-color: var(--ground-background);
 }

 a {
@ -25,8 +25,8 @@ a {
 }

 ::selection {
-    background-color: var(--p-dark-highlight-bg, var(--p-highlight-bg));
-    color: var(--p-dark-highlight-text-color, var(--p-highlight-text-color));
+    background-color: var(--selection-background);
+    color: var(--selection-text-color);
 } 

 h1, h2, h3, h4, h5, h6 {
@ -34,7 +34,7 @@ h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
-    color: var(--p-dark-surface-0, var(--p-surface-900));
+    color: var(--high-contrast-text-color);

    &:first-child {
        margin-top: 0;
@ -77,7 +77,7 @@ p {

 .px-link {
    font-size: 1rem;
-    border-radius: var(--p-border-radius);
+    border-radius: 6px;
    text-align: left;
 	background-color: transparent;
 	margin: 0;
@ -85,7 +85,6 @@ p {
 	border: none;
    cursor: pointer;
    user-select: none;
-
    @include focus-visible();
 }

@ -94,6 +93,6 @@ p {
 }

 button {
-    font-family: var(--p-font-family);
-    font-feature-settings: var(--p-font-feature-settings);
+    font-family: inherit;
+    font-feature-settings: inherit;
 }
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@ -12,7 +12,7 @@
        position: absolute;
        bottom: 0;
        width: 100%;
-        border-bottom: 1px solid var(--surface-border);
+        border-bottom: 1px solid var(--border-color);
        content: '';
    }

@ -31,14 +31,16 @@
            letter-spacing: 1px;
            cursor: pointer;
            margin: 0;
-            transition: all 0.2s;
+            transition: outline-color 0.2s, border-color 0.2s;
+            outline-color: transparent;
            border-bottom: 1px solid transparent;
-            border-top-right-radius: var(--p-border-radius);
-            border-top-left-radius: var(--p-border-radius);
+            border-top-right-radius: 6px;
+            border-top-left-radius: 6px;
            white-space: nowrap;
+            --focus-ring-offset: -1px;

            &:hover {
-                border-bottom-color: var(--p-dark-surface-600, var(--p-surface-400));
+                border-bottom-color: var(--hover-border-color);
            }

            &:focus {
@ -50,8 +52,8 @@

        &.doc-tabmenu-active {
            button {
-                border-bottom-color: var(--primary-color-default);
-                color: var(--primary-color-default);
+                border-bottom-color: var(--primary-text-color);
+                color: var(--primary-text-color);
            }
        }
    }
@ -78,7 +80,6 @@

    p {
        font-size: 1.125rem;
-        color: var(--text-color);
        margin: 0;

        a {
@ -97,12 +98,13 @@
    scroll-margin-top: 6.5rem;

    > a {
-        color: var(--primary-color-default);
+        color: var(--primary-text-color);
        opacity: 0.7;
        margin-left: 1rem;
        display: none;
-        transition: all .2s;
-        border-radius: var(--p-border-radius);
+        transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
+        outline-color: transparent;
+        border-radius: 6px;
        @include focus-visible();
    }

@ -120,7 +122,6 @@
 .doc-section-description {
    > p {
        font-size: 1rem;
-        color: var(--text-color);

        i {
            border-radius: 6px;
@ -128,8 +129,8 @@
            font-size: .875rem;
            font-weight: 500;
            font-style: normal;
-            background-color: var(--p-dark-surface-800, var(--p-surface-200));
-            color: var(--p-dark-surface-300, var(--p-surface-700));
+            background: var(--mark-background);
+            color: var(--mark-text);
        }

        a {
@ -142,8 +143,8 @@
        padding: 1rem;
        font-weight: 500;
        border-radius: 10px;
-        background-color:  var(--p-dark-surface-800, var(--p-surface-200));
-        color: var(--p-dark-surface-300, var(--p-surface-700));
+        background: var(--mark-background);
+        color: var(--mark-text);
    }
 }

@ -163,12 +164,12 @@

    > .navbar-item {
        .navbar-item-content {
-            border-left: 1px solid var(--surface-border);
+            border-left: 1px solid var(--border-color);
            padding-left: .25rem;
            transition: all .2s;

            &:hover {
-                border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
+                border-left-color: var(--hover-border-color);
            }
        }
    }
@ -185,7 +186,8 @@
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
-                transition: all .2s;
+                transition: outline-color 0.2s, border-color .2s;
+                outline-color: transparent;
            }

            &:hover {
@ -197,10 +199,10 @@

        &.active-navbar-item {
            > .navbar-item-content {
-                border-color: var(--primary-color-default);
+                border-color: var(--primary-text-color);

                .px-link {
-                    color: var(--primary-color-default);
+                    color: var(--primary-text-color);
                }
            }
        }
@ -261,12 +263,12 @@
        background-color: transparent;
        transition: background-color .2s, box-shadow .2s;
        border: 0 none;
-        color: var(--p-dark-surface-300, var(--p-surface-300));
+        color: var(--code-button-text-color);
        cursor: pointer;

        &:hover {
            background-color: rgba(255,255,255,.1);
-            color: var(--p-dark-surface-100, var(--p-surface-100));
+            color: var(--code-button-text-color);
        }

        &.code-active {
@ -293,7 +295,7 @@
    margin-bottom: 1.5rem;

    th {
-        border-bottom: 1px solid var(--surface-border);
+        border-bottom: 1px solid var(--border-color);
        padding: .75rem 1rem;
        text-align: left;
        text-transform: capitalize;
@ -301,25 +303,25 @@

    tbody {
        tr:hover {
-            background: var(--surface-hover);
+            background: var(--hover-background);
        }

        td {
            padding: .75rem 1rem;
-            border-bottom: 1px solid var(--surface-border);
+            border-bottom: 1px solid var(--border-color);
            white-space: pre-line;
            line-height: 1.5;
            scroll-margin-top: 6.5rem;

            &:first-child {
-                color: var(--primary-color-default);
+                color: var(--primary-text-color);
                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                font-weight: 600;
            }

            .doc-option-type {
                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
-                color: var(--primary-color-default);
+                color: var(--primary-text-color);
                font-weight: 500;

                .doc-option-type-options-container {
@ -339,8 +341,8 @@
                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                position: relative;
                scroll-margin-top: 6.5rem;
-                background-color: var(--p-dark-surface-800, var(--p-surface-200));
-                color: var(--p-dark-surface-300, var(--p-surface-700));
+                background-color: var(--mark-background);
+                color: var(--mark-text);
                border-radius: 6px;
                padding: 2px 6px;
                font-weight: 600;
@ -351,7 +353,7 @@
                    position: absolute;
                    top: 0;
                    right: -1.5rem;
-                    color: var(--primary-color-default);
+                    color: var(--primary-text-color);
                    opacity: 0.7;
                    display: none;
                    transition: opacity 0.3s, colors 0.3s;
@ -381,8 +383,8 @@
                border-radius: 6px;
                padding: 2px 6px;
                max-width: min-content;
-                border-color: var(--surface-border);
-                background-color: var(--surface-card);
+                border-color: var(--border-color);
+                background-color: var(--card-background);
                color: var(--text-secondary-color);
            }

@ -392,7 +394,7 @@

            .doc-option-parameter-type {
                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
-                color: var(--primary-color-default);
+                color: var(--primary-text-color);
            }

            .doc-option-params {
--- a/assets/styles/layout/_docsearch.scss
+++ b/assets/styles/layout/_docsearch.scss
@ -1,19 +1,16 @@
 .DocSearch-Button {
-    border-radius: var(--p-border-radius);
-    border: 1px solid var(--surface-border);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
    height: 2rem;
-    background-color: var(--surface-card);
+    background-color: var(--card-background);
    margin: 0;
-    transition: all .3s;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
    padding: 0 .5rem;
    @include focus-visible();

    &:hover {
-        border-color: var(--p-primary-color);
-    }
-
-    &:hover {
-        border-color: var(--p-primary-color);
+        border-color: var(--primary-color);
        box-shadow: none;
    }

@ -43,7 +40,7 @@
            border-radius: 0;
            height: auto;
            width: auto;
-            font-family: var(--p-font-family);
+            font-family: inherit;

            &:first-child {
                font-size: 0.75rem;
@ -79,25 +76,25 @@
 }

 .DocSearch-Modal {
-    border: 1px solid var(--surface-border);
+    border: 1px solid var(--border-color);
    box-shadow: none;
 }

 .DocSearch-Footer {
    box-shadow: none;
-    border-top: 1px solid var(--surface-border);
-    background-color: var(--surface-overlay);
+    border-top: 1px solid var(--border-color);
+    background-color: var(--overlay-background);
 }

 .DocSearch-Form {
-    background: var(--surface-card);
+    background: var(--card-background);
    box-shadow: none;
-    border: 1px solid var(--surface-border);
-    border-radius: var(--p-border-radius);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
    transition: border-color .3s;

    &:hover {
-        border-color: var(--p-primary-color);
+        border-color: var(--primary-color);
    }

    .DocSearch-MagnifierLabel, .DocSearch-Reset {
@ -106,21 +103,21 @@
 }

 .DocSearch-Hit {
-    border-bottom: 1px solid var(--surface-border);
+    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
    margin-bottom: .25rem;
 }

 .DocSearch-Hit-source {
-    color: var(--p-primary-color);
+    color: var(--primary-text-color);
 }

 .DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
-    fill: var(--p-primary-color);
+    fill: var(--primary-text-color);
 }

 .DocSearch-Prefill {
-    color: var(--p-primary-color);
+    color: var(--primary-text-color);
 }

 .DocSearch-Button-Placeholder {
@ -130,20 +127,21 @@
 }

 :root {
-    --docsearch-searchbox-focus-background: var(--surface-card);
+    --docsearch-searchbox-focus-background: var(--card-background);
    --docsearch-text-color: var(--text-color);
    --docsearch-muted-color: var(--text-color);
-    --docsearch-searchbox-background: var(--surface-card);
+    --docsearch-searchbox-background: var(--card-background);
    --docsearch-text-color: var(--text-color);
-    --docsearch-modal-background: var(--surface-overlay);
-    --docsearch-key-gradient: var(--surface-ground);
+    --docsearch-modal-background: var(--overlay-background);
+    --docsearch-key-gradient: var(--ground-background);
    --docsearch-key-shadow: none;
-    --docsearch-container-background: var(--p-mask-bg);
-    --docsearch-hit-background: var(--surface-overlay);
+    --docsearch-container-background: var(--docsearch-mask-background);
+    --docsearch-hit-background: var(--overlay-background);
    --docsearch-hit-shadow: none;
    --docsearch-spacing: 1rem;
    --docsearch-hit-color: var(--text-color);
-    --docsearch-highlight-color: var(--p-primary-color);
-    --docsearch-hit-active-color: var(--p-primary-color-inverse);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-hit-active-color: var(--primary-inverse-color);
+    --docsearch-searchbox-shadow: none;
 }

--- a/assets/styles/layout/_footer.scss
+++ b/assets/styles/layout/_footer.scss
@ -6,14 +6,15 @@
    justify-content: space-between;
    flex-wrap: wrap;
    font-weight: 500;
-    color: var(--text-800);
-    border-top: 1px solid var(--surface-border);
+    color: var(--text-color);
+    border-top: 1px solid var(--border-color);

    a {
-        color: var(--primary-color-default);
+        color: var(--primary-text-color);
        font-weight: 700;
-        transition: all .3s;
-        border-radius: var(--p-border-radius);
+        transition: outline-color .2s, border-color .2s;
+        outline-color: transparent;
+        border-radius: 6px;

        @include focus-visible();

--- a/assets/styles/layout/_mixins.scss
+++ b/assets/styles/layout/_mixins.scss
@ -1,16 +1,16 @@
-@mixin focus-visible($type:null) {
+@mixin focus-visible() {
    &:focus-visible {
-        outline: 0 none;
-        outline-offset: 0;
-        box-shadow: $type var(--focus-ring);
+        outline: 1px solid var(--primary-color);
+        outline-offset: var(--focus-ring-offset, 2px);
    }
 }

@mixin doc-link() {
-    color: var(--primary-color-default);
+    color: var(--primary-text-color);
    font-weight: 500;
-    transition: all .2s;
-    border-radius: var(--p-border-radius);
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    border-radius: 6px;
    @include focus-visible();

    &:hover {
--- a/assets/styles/layout/_news.scss
+++ b/assets/styles/layout/_news.scss
@ -41,7 +41,7 @@
    .layout-news-link,
    .layout-news-link:visited,
    .layout-news-link:active {
-        color:var(--p-primary-color-inverse);
+        color:var(--primary-color-inverse);
        font-weight:700;
    }
    .layout-news-link:hover {
--- a/assets/styles/layout/_responsive.scss
+++ b/assets/styles/layout/_responsive.scss
@ -53,7 +53,7 @@
        z-index: 1102;
        height: 100%;
        transform: translateX(-100%);
-        background-color: var(--mobile-menu-bg);
+        background-color: var(--mobile-menu-background);
        backdrop-filter: blur(20px);
        width: 300px;
        opacity: 0;
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@ -36,19 +36,19 @@
                display: flex;
                width: 100%;
                align-items: center;
-                padding: .5rem 0;
+                padding: .5rem 1px;
                color: var(--text-color);
                font-weight: 600;
-                transition: all .2s;
+                transition: outline-color 0.2s;
+                outline-color: transparent;
                position: relative;
-                border-radius: var(--p-border-radius);

                .menu-icon {
                    width: 2rem;
                    height: 2rem;
-                    border-radius: var(--p-border-radius);
+                    border-radius: 6px;
                    margin-right: .5rem;
-                    border: 1px solid var(--surface-border);
+                    border: 1px solid var(--border-color);
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
@ -69,29 +69,30 @@

                &:hover {
                    .menu-icon {
-                        background-color: var(--surface-card);
+                        background-color: var(--card-background);

                        i {
-                            color: var(--primary-color-default);
+                            color: var(--primary-text-color);
                        }
                    }

                    .menu-toggle-icon {
-                        color: var(--surface-900);
+                        color: var(--text-color);
                    }
                }

                &.router-link-active {
-                    color: var(--primary-color-default);
+                    color: var(--primary-text-color);
        
                    > .menu-icon {
                        i {
-                            color: var(--primary-color-default);
+                            color: var(--primary-text-color);
                        }
                    }
                }

-                @include focus-visible(inset);
+                @include focus-visible();
+                --focus-ring-offset: -1px;
            }
            
            > div {
@ -102,28 +103,27 @@

                    li {
                        a {
-                            border-left: 1px solid var(--surface-border);
+                            border-left: 1px solid var(--border-color);
                            transition: all .2s;
                            font-weight: 450;
                            display: flex;
                            align-items: center;
                            padding: .5rem .5rem .5rem 1rem;
                            color: var(--text-color);
-                            transition: border-color .2s;
+                            transition: outline-color 0.2s, border-color .2s;
+                            outline-color: transparent;
                            position: relative;

-                            &:focus-visible {
-                                outline: 0 none;
-                                box-shadow: inset var(--focus-ring);
-                            }
+                            @include focus-visible();
+                            --focus-ring-offset: -1px;
            
                            &:hover {
-                                border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
+                                border-left-color: var(--hover-border-color);
                            }

                            &.router-link-active {
-                                color: var(--primary-color-default);
-                                border-left-color: var(--primary-color-default);
+                                color: var(--primary-text-color);
+                                border-left-color: var(--primary-text-color);
                            }
                        }

--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@ -8,8 +8,8 @@
    border-bottom: 1px solid transparent;

    &.layout-topbar-sticky {
-        border-bottom: 1px solid var(--surface-border);
-        background-color: var(--topbar-sticky-bg);
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--topbar-sticky-background);
        backdrop-filter: blur(8px);
    }
 }
@ -28,7 +28,8 @@

    .layout-topbar-logo,
    .layout-topbar-icon {
-        border-radius: 6px;
+        transition: outline-color .2s;
+        outline-color: transparent;
        @include focus-visible();

        svg {
@ -73,20 +74,21 @@
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
-            border: 1px solid var(--surface-border);
+            border: 1px solid var(--border-color);
            width: 2rem;
            height: 2rem;
-            transition: all .2s;
+            transition: outline-color .2s, border-color .2s;
            border-radius: 6px;
            margin: 0;
            padding: 0;
-            background-color: var(--surface-card);
+            outline-color: transparent;
+            background-color: var(--card-background);
            cursor: pointer;
    
            @include focus-visible();
    
            &:hover {
-                border-color: var(--primary-color-default);
+                border-color: var(--p-primary-color);
            }
    
            i, span {
@ -98,7 +100,7 @@
            background-color: var(--p-primary-color);
            
            i {
-                color: var(--p-primary-color-inverse);
+                color: var(--p-primary-inverse-color);
            }
        }

@ -108,9 +110,9 @@
            right: 0;
            width: 14rem;
            padding: .75rem;
-            background-color: var(--surface-overlay);
-            border-radius: var(--p-border-radius);
-            border: 1px solid var(--surface-border);
+            background-color: var(--overlay-background);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
            transform-origin: top;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            
@ -146,7 +148,7 @@
                        outline-offset: 1px;
    
                        &.active-color {
-                            outline-color: var(--primary-color-default);
+                            outline-color: var(--p-primary-color);
                        }
                    }
                }
@ -179,12 +181,12 @@

        .versions-panel {
            padding: .25rem;
-            background-color: var(--surface-overlay);
+            background-color: var(--overlay-background);
            position: absolute;
            right: 0;
            top: calc(100% + 2px);
-            border-radius: var(--p-border-radius);
-            border: 1px solid var(--surface-border);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transform-origin: top;
            width: 8rem;
@ -205,17 +207,17 @@
                a {
                    display: inline-flex;
                    padding: 0.5rem .75rem;
-                    border-radius: var(--p-border-radius);
+                    border-radius: 6px;
                    width: 100%;
                    overflow: hidden;

                    &:hover {
-                        background-color: var(--surface-hover);
+                        background-color: var(--hover-background);
                    }

                    span:first-child {
                        font-weight: bold;
-                        color: var(--p-dark-surface-0, var(--p-surface-900));
+                        color: var(--high-contrast-text-color);
                    }

                    span:last-child {
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@ -1,16 +1,26 @@
 :root[class="p-dark"] {
-    --primary-color-default:var(--p-dark-primary-400);
-    --primary-color-inverse-default:var(--p-dark-zinc-900);
-    --text-color: var(--p-dark-surface-0);
-    --text-secondary-color: var(--p-dark-surface-400);
-    --card-border: 1px solid transparent;
+    --primary-text-color:var(--p-primary-400);
+    --primary-color: var(--p-primary-color);
+    --primary-inverse-color:var(--p-primary-inverse-color);
+    --text-color: var(--p-text-color);
+    --text-secondary-color: var(--p-text-secondar-color);
    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
    --glow-blend: hard-light, color-dodge;
-    --topbar-sticky-bg:rgba(0,0,0,.3);
-    --mobile-menu-bg: rgba(0,0,0,.3);
-    --surface-card: var(--p-dark-surface-900);
-    --surface-border: var(--p-dark-surface-800);
-    --surface-ground: var(--p-dark-surface-950);
-    --surface-overlay: var(--p-dark-surface-900);
-    --surface-hover: var(--p-dark-surface-800);
+    --topbar-sticky-background:rgba(0,0,0,.3);
+    --mobile-menu-background: rgba(0,0,0,.3);
+    --card-border: 1px solid transparent;
+    --card-background: var(--p-surface-900);
+    --border-color: var(--p-surface-800);
+    --ground-background: var(--p-surface-950);
+    --overlay-background: var(--p-surface-900);
+    --hover-background: var(--p-surface-800);
+    --code-background: var(--p-surface-900);
+    --high-contrast-text-color: var(--p-surface-0);
+    --hover-border-color: var(--p-surface-600);
+    --mark-background: var(--p-surface-800);
+    --mark-text-color: var(--p-surface-300);
+    --selection-background: color-mix(in srgb, var(--primary-color-default), transparent 84%);
+    --selection-text-color: rgba(255,255,255,.87);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(-p-mask-bg);
 }
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@ -1,16 +1,26 @@
 :root {
-    --primary-color-default:var(--p-primary-600);
-    --primary-color-inverse-default:var(--p-surface-0);
-    --text-color: var(--p-surface-700);
-    --text-secondary-color: var(--p-surface-500);
-    --card-border: 1px solid var(--p-surface-200);
+    --primary-text-color:var(--p-primary-600);
+    --primary-color: var(--p-primary-color);
+    --primary-inverse-color:var(--p-primary-inverse-color);
+    --text-color: var(--p-text-color);
+    --text-secondary-color: var(--p-text-secondar-color);
    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
    --glow-blend: hard-light, multiply;
-    --topbar-sticky-bg:rgba(255,255,255,.7);
-    --mobile-menu-bg: var(--p-surface-0);
-    --surface-card: var(--p-surface-0);
-    --surface-border: var(--p-surface-200);
-    --surface-ground: var(--p-surface-50);
-    --surface-overlay: var(--p-surface-0);
-    --surface-hover: var(--p-surface-100);
+    --topbar-sticky-background:rgba(255,255,255,.7);
+    --mobile-menu-background: #ffffff;
+    --card-border: 1px solid var(--p-surface-200);
+    --card-background: #ffffff;
+    --border-color: var(--p-surface-200);
+    --ground-background: var(--p-surface-50);
+    --overlay-background: #ffffff;
+    --hover-background: var(--p-surface-100);
+    --code-background: var(--p-surface-800);
+    --high-contrast-text-color: var(--p-surface-900);
+    --hover-border-color: var(--p-surface-400);
+    --mark-background: var(--p-surface-200);
+    --mark-text-color: var(--p-surface-700);
+    --selection-background: var(--p-primary-50);
+    --selection-text-color: var(--p-primary-700);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(-p-mask-bg);
 }
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@ -85,10 +85,14 @@ export default {
                },
                primary: {
                    color: '{primary.500}',
-                    colorInverse: '{primary.0}'
+                    inverseColor: '#ffffff'
+                },
+                text: {
+                    color: '{surface.700}',
+                    secondaryColor: '{surface.500}'
                },
                highlight: {
-                    bg: '{primary.50}',
+                    background: '{primary.50}',
                    textColor: '{primary.700}'
                }
            },
@ -109,10 +113,14 @@ export default {
                },
                primary: {
                    color: '{primary.400}',
-                    colorInverse: '{surface.900}'
+                    inverseColor: '{surface.900}'
+                },
+                text: {
+                    color: '{surface.700}',
+                    secondaryColor: '{surface.500}'
                },
                highlight: {
-                    bg: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
                    textColor: 'rgba(255,255,255,.87)'
                }
            }
--- a/components/lib/theme/index.d.ts
+++ b/components/lib/theme/index.d.ts
@ -1,13 +0,0 @@
-export interface Surface {
-    surface0?: string | undefined;
-    surface50?: string | undefined;
-    surface100?: string | undefined;
-    surface200?: string | undefined;
-    surface300?: string | undefined;
-    surface400?: string | undefined;
-    surface500?: string | undefined;
-    surface600?: string | undefined;
-    surface700?: string | undefined;
-    surface800?: string | undefined;
-    surface900?: string | undefined;
-}
--- a/components/lib/theme/lara/accordion/index.d.ts
+++ b/components/lib/theme/lara/accordion/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/accordion/index.js
+++ b/components/lib/theme/lara/accordion/index.js
@ -1,142 +0,0 @@
-export default {
-    variables: {
-        common: {
-            header: {
-                paddingX: '{p.5}',
-                paddingY: '{p.5}',
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                fontWeight: 700
-            },
-            content: {
-                paddingX: '{p.5}',
-                paddingY: '{p.5}',
-                borderWidth: '1px',
-                borderStyle: 'solid'
-            },
-            tab: {
-                gap: '4px'
-            }
-        },
-        light: {
-            header: {
-                borderColor: '{shade.300}',
-                color: '{shade.600}',
-                background: '{shade.100}',
-                states: {
-                    hover: {
-                        background: '{shade.200}',
-                        borderColor: '{shade.300}',
-                        color: '{shade.800}'
-                    },
-                    active: {
-                        background: '{shade.100}',
-                        borderColor: '{shade.300}',
-                        color: '{shade.800}',
-                        states: {
-                            hover: {
-                                borderColor: '{shade.300}',
-                                background: '{shade.200}',
-                                color: '{shade.800}'
-                            }
-                        }
-                    }
-                }
-            },
-            content: {
-                borderColor: '{shade.300}',
-                background: '{shade.0}',
-                color: '{shade.700}'
-            }
-        },
-        dark: {
-            header: {
-                borderColor: '{shade.300}',
-                color: '{shade.600}',
-                background: '{shade.100}',
-                states: {
-                    hover: {
-                        background: '{shade.200}',
-                        borderColor: '{shade.300}',
-                        color: '{shade.800}'
-                    },
-                    active: {
-                        background: '{shade.100}',
-                        borderColor: '{shade.300}',
-                        color: '{shade.800}'
-                    },
-                    activeHover: {
-                        borderColor: '{shade.300}',
-                        background: '{shade.200}',
-                        color: '{shade.800}'
-                    }
-                }
-            },
-            content: {
-                borderColor: '{shade.300}',
-                background: '{shade.0}',
-                color: '{shade.700}'
-            }
-        }
-    },
-    css: `
-.p-accordion-header-action {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    position: relative;
-    text-decoration: none;
-    padding: var(--p-accordion-header-padding-y) var(--p-accordion-header-padding-x);
-    border: var(--p-accordion-header-border-width) var(--p-accordion-header-border-style) var(--p-accordion-header-border-color);
-    color: var(--p-accordion-header-color);
-    background: var(--p-accordion-header-background);
-    font-weight: var(--p-accordion-header-font-weight);
-    border-radius: var(--p-border-radius);
-    transition: var(--p-transition);
-    outline-color: transparent;
-}
-.p-accordion-header-text {
-    line-height: 1;
-}
-.p-accordion-toggle-icon {
-    margin-right: var(--p-inline-gap);
-}
-.p-accordion-header:not(.p-disabled) .p-accordion-header-action:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
-    z-index: 1;
-}
-.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-action {
-    background: var(--p-accordion-header-hover-background);
-    border-color: var(--p-accordion-header-hover-border-color);
-    color: var(--p-accordion-header-hover-color);
-}
-.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-action {
-    background: var(--p-accordion-header-active-background);
-    border-color: var(--p-accordion-header-active-border-color);
-    color: var(--p-accordion-header-active-color);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-.p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-action {
-    border-color: var(--p-accordion-header-active-hover-border-color);
-    background: var(--p-accordion-header-active-hover-background);
-    color: var(--p-accordion-header-active-hover-color);
-}
-.p-accordion-content {
-    padding: var(--p-accordion-content-padding-y) var(--p-accordion-content-padding-x);
-    border: var(--p-accordion-content-border-width) var(--p-accordion-content-border-style) var(--p-accordion-content-border-color);
-    background: var(--p-accordion-content-background);
-    color: var(--p-accordion-content-color);
-    border-top: 0;
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    border-bottom-right-radius: var(--p-border-radius);
-    border-bottom-left-radius: var(--p-border-radius);
-}
-.p-accordion-tab {
-    margin-bottom: var(--p-accordion-tab-gap);
-}
-    `
-};
--- a/components/lib/theme/lara/accordion/package.json
+++ b/components/lib/theme/lara/accordion/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/card/index.d.ts
+++ b/components/lib/theme/lara/card/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/card/index.js
+++ b/components/lib/theme/lara/card/index.js
@ -1,68 +0,0 @@
-export default {
-    variables: {
-        common: {
-            body: {
-                paddingX: '{p.5}',
-                paddingY: '{p.5}',
-                gap: '{gap.5}'
-            },
-            caption: {
-                gap: '{gap.2}'
-            },
-            title: {
-                fontSize: '{text.2xl}',
-                fontWeight: 700
-            },
-            subtitle: {
-                fontWeight: 400
-            }
-        },
-        light: {
-            root: {
-                background: '{shade.0}',
-                color: '{shade.700}',
-                boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
-            },
-            subtitle: {
-                color: '{shade.600}'
-            }
-        },
-        dark: {
-            root: {
-                background: '{shade.0}',
-                color: '{shade.700}',
-                boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
-            },
-            subtitle: {
-                color: '{shade.600}'
-            }
-        }
-    },
-    css: `
-.p-card {
-    background: var(--p-card-background);
-    color: var(--p-card-color);
-    box-shadow: var(--p-card-box-shadow);
-    border-radius: var(--p-border-radius);
-}
-.p-card-body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--p-card-body-gap);
-    padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x);
-}
-.p-card-caption {
-    display: flex;
-    flex-direction: column;
-    gap: var(--p-card-caption-gap);
-}
-.p-card-title {
-    font-size: var(--p-card-title-font-size);
-    font-weight: var(--p-card-title-font-weight);
-}
-.p-card-subtitle {
-    font-weight: var(--p-card-subtitle-font-weight);
-    color: var(--p-card-subtitle-color);
-}
-    `
-};
--- a/components/lib/theme/lara/card/package.json
+++ b/components/lib/theme/lara/card/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/divider/index.d.ts
+++ b/components/lib/theme/lara/divider/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/divider/index.js
+++ b/components/lib/theme/lara/divider/index.js
@ -1,71 +0,0 @@
-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;
-}
-    `
-};
--- a/components/lib/theme/lara/divider/package.json
+++ b/components/lib/theme/lara/divider/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/fieldset/index.d.ts
+++ b/components/lib/theme/lara/fieldset/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/fieldset/index.js
+++ b/components/lib/theme/lara/fieldset/index.js
@ -1,66 +0,0 @@
-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);
-}
-    `
-};
--- a/components/lib/theme/lara/fieldset/package.json
+++ b/components/lib/theme/lara/fieldset/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/global.js
+++ b/components/lib/theme/lara/global.js
@ -1,95 +0,0 @@
-export default {
-    css: `
-@font-face {
-    font-family: "Inter var";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: normal;
-    font-named-instance: "Regular";
-    src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
-}
-@font-face {
-    font-family: "Inter var";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: italic;
-    font-named-instance: "Italic";
-    src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
-}
-
-* {
-    box-sizing: border-box;
-}
-
-.p-component {
-    font-family: var(--p-font-family);
-    font-feature-settings: var(--p-font-feature-settings, normal);
-    font-size: var(--p-font-size);
-    font-weight: var(--p-font-weight);
-}
-
-.p-component-overlay {
-    background-color: var(--p-mask-bg);
-    transition-duration: var(--p-transition-duration);
-}
-
-.p-disabled,
-.p-component:disabled {
-    opacity: var(--p-disabled-opacity);
-}
-
-.p-error {
-    color: var(--p-error-color);
-}
-
-.p-text-secondary {
-    color: var(--p-text-secondary-color);
-}
-
-.pi {
-    font-size: var(--p-prime-icon-font-size);
-}
-
-.p-icon {
-    width: var(--p-prime-icon-font-size);
-    height: var(--p-prime-icon-font-size);
-}
-
-.p-link {
-    font-family: var(--p-font-family);
-    font-feature-settings: var(--p-font-feature-settings, normal);
-    font-size: var(--p-font-size);
-    border-radius: var(--p-border-radius);
-}
-.p-link:focus-visible {
-    outline: var(--p-focus-outline);
-    outline-offset: var(--p-focus-outline-offset);
-    box-shadow: var(--p-focus-shadow);
-}
-
-.p-component-overlay-enter {
-    animation: p-component-overlay-enter-animation 150ms forwards;
-}
-
-.p-component-overlay-leave {
-    animation: p-component-overlay-leave-animation 150ms forwards;
-}
-
-@keyframes p-component-overlay-enter-animation {
-    from {
-        background-color: transparent;
-    }
-    to {
-        background-color: var(--maskbg);
-    }
-}
-@keyframes p-component-overlay-leave-animation {
-    from {
-        background-color: var(--maskbg);
-    }
-    to {
-        background-color: transparent;
-    }
-}
-`
-};
--- a/components/lib/theme/lara/index.d.ts
+++ b/components/lib/theme/lara/index.d.ts
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@ -1,172 +0,0 @@
-import accordion from 'primevue/theme/lara/accordion';
-import card from 'primevue/theme/lara/card';
-import global from 'primevue/theme/lara/global';
-import panel from 'primevue/theme/lara/panel';
-
-export default {
-    primitive: {
-        /*** @todo Remove ***/
-        shade: {
-            0: '#ffffff',
-            100: '#f9fafb',
-            200: '#f3f4f6',
-            300: '#e5e7eb',
-            400: '#d1d5db',
-            500: '#9ca3af',
-            600: '#6b7280',
-            700: '#4b5563',
-            800: '#374151',
-            900: '#1f2937'
-        },
-        /********************/
-        emerald: {
-            50: '#ecfdf5',
-            100: '#d1fae5',
-            200: '#a7f3d0',
-            300: '#6ee7b7',
-            400: '#34d399',
-            500: '#10b981',
-            600: '#059669',
-            700: '#047857',
-            800: '#065f46',
-            900: '#064e3b',
-            950: '#022c22'
-        },
-        slate: {
-            50: '#f8fafc',
-            100: '#f1f5f9',
-            200: '#e2e8f0',
-            300: '#cbd5e1',
-            400: '#94a3b8',
-            500: '#64748b',
-            600: '#475569',
-            700: '#334155',
-            800: '#1e293b',
-            900: '#0f172a',
-            950: '#020617'
-        },
-        gap: {
-            1: '0.25rem',
-            2: '0.5rem',
-            3: '0.75rem',
-            4: '1rem',
-            5: '1.25rem',
-            6: '1.5rem'
-        },
-        p: {
-            1: '0.25rem',
-            2: '0.5rem',
-            3: '0.75rem',
-            4: '1rem',
-            5: '1.25rem',
-            6: '1.5rem',
-            7: '1.75rem',
-            8: '2rem'
-        },
-        m: {
-            1: '0.25rem',
-            2: '0.5rem',
-            3: '0.75rem',
-            4: '1rem',
-            5: '1.25rem',
-            6: '1.5rem',
-            7: '1.75rem',
-            8: '2rem'
-        },
-        text: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem'
-        }
-    },
-    semantic: {
-        colorScheme: {
-            light: {
-                primary: {
-                    50: '{emerald.50}',
-                    100: '{emerald.100}',
-                    200: '{emerald.200}',
-                    300: '{emerald.300}',
-                    400: '{emerald.400}',
-                    500: '{emerald.500}',
-                    600: '{emerald.600}',
-                    700: '{emerald.700}',
-                    800: '{emerald.800}',
-                    900: '{emerald.900}',
-                    950: '{emerald.950}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                textColor: '{surface.700}',
-                textSecondaryColor: '{surface.500}',
-                borderColor: '{surface.300}'
-            },
-            dark: {
-                primary: {
-                    50: '{emerald.50}',
-                    100: '{emerald.100}',
-                    200: '{emerald.200}',
-                    300: '{emerald.300}',
-                    400: '{emerald.400}',
-                    500: '{emerald.500}',
-                    600: '{emerald.600}',
-                    700: '{emerald.700}',
-                    800: '{emerald.800}',
-                    900: '{emerald.900}',
-                    950: '{emerald.950}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                textColor: '{dark.surface.0}',
-                textSecondaryColor: '{dark.surface.500}',
-                borderColor: '{dark.surface.700}'
-            }
-        },
-        common: {
-            fontFamily: '"Inter var", sans-serif',
-            borderRadius: '6px',
-            inlineGap: '{gap.2}', // inline-spacing
-            transitionDuration: '.2s',
-            transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
-            focusRing: {
-                width: '2px',
-                style: 'solid',
-                color: '{primary.500}',
-                offset: '2px'
-            }
-        }
-    },
-    components: {
-        global,
-        accordion,
-        card,
-        panel
-    }
-};
--- a/components/lib/theme/lara/package.json
+++ b/components/lib/theme/lara/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/panel/index.d.ts
+++ b/components/lib/theme/lara/panel/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@ -1,68 +0,0 @@
-export default {
-    css: `
-.p-panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
-    padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
-    background: var(--p-dark-surface-900, var(--p-surface-100));
-    color: var(--p-panel-header-color);
-    border-top-right-radius: var(--p-border-radius);
-    border-top-left-radius: var(--p-border-radius);
-}
-.p-panel-title {
-    line-height: 1;
-    font-weight: var(--p-panel-header-font-weight);
-}
-.p-panel-header-icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    text-decoration: none;
-    overflow: hidden;
-    position: relative;
-    width: var(--p-panel-header-icon-width);
-    height: var(--p-panel-header-icon-height);
-    color: var(--p-panel-header-icon-color);
-    border: var(--p-panel-header-icon-border-width) var(--p-panel-header-icon-border-style) var(--p-panel-header-icon-border-color);
-    background: var(--p-panel-header-icon-background);
-    border-radius: var(--p-panel-header-icon-border-radius);
-    transition: var(--p-transition);
-    outline-color: transparent;
-}
-.p-panel-header-icon:enabled:hover {
-    color: var(--p-panel-header-icon-hover-color);
-    border-color: var(--p-panel-header-icon-hover-border-color);
-    background: var(--p-panel-header-icon-hover-background);
-}
-.p-panel-header-icon:focus-visible {
-    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
-    outline-offset: var(--p-focus-ring-offset);
-}
-.p-panel-toggleable > .p-panel-header {
-    padding: var(--p-panel-toggleable-header-padding-y) var(--p-panel-toggleable-header-padding-x);
-}
-.p-panel-content {
-    padding: var(--p-panel-content-padding-y) var(--p-panel-content-padding-x);
-    border: var(--p-panel-content-border-width) var(--p-panel-content-border-style) var(--p-panel-content-border-color);
-    background: var(--p-panel-content-background);
-    color: var(--p-panel-content-color);
-    border-top: 0;
-}
-.p-panel-content:last-child {
-    border-bottom-right-radius: var(--p-border-radius);
-    border-bottom-left-radius: var(--p-border-radius);
-}
-.p-panel-footer {
-    padding: var(--p-panel-footer-padding-y) var(--p-panel-footer-padding-x);
-    border: var(--p-panel-footer-border-width) var(--p-panel-footer-border-style) var(--p-panel-footer-border-color);
-    background: var(--p-panel-footer-background);
-    color: var(--p-panel-footer-color);
-    border-bottom-right-radius: var(--p-border-radius);
-    border-bottom-left-radius: var(--p-border-radius);
-    border-top: 0;
-}
-    `
-};
--- a/components/lib/theme/lara/panel/package.json
+++ b/components/lib/theme/lara/panel/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/scrollpanel/index.d.ts
+++ b/components/lib/theme/lara/scrollpanel/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/scrollpanel/index.js
+++ b/components/lib/theme/lara/scrollpanel/index.js
@ -1,64 +0,0 @@
-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);
-}
-    `
-};
--- a/components/lib/theme/lara/scrollpanel/package.json
+++ b/components/lib/theme/lara/scrollpanel/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/splitter/index.d.ts
+++ b/components/lib/theme/lara/splitter/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/splitter/index.js
+++ b/components/lib/theme/lara/splitter/index.js
@ -1,68 +0,0 @@
-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);
-}
-    `
-};
--- a/components/lib/theme/lara/splitter/package.json
+++ b/components/lib/theme/lara/splitter/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/tabview/index.d.ts
+++ b/components/lib/theme/lara/tabview/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/tabview/index.js
+++ b/components/lib/theme/lara/tabview/index.js
@ -1,127 +0,0 @@
-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);
-}
-    `
-};
--- a/components/lib/theme/lara/tabview/package.json
+++ b/components/lib/theme/lara/tabview/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/components/lib/theme/lara/toolbar/index.d.ts
+++ b/components/lib/theme/lara/toolbar/index.d.ts
@ -1,31 +0,0 @@
-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;
-}
--- a/components/lib/theme/lara/toolbar/index.js
+++ b/components/lib/theme/lara/toolbar/index.js
@ -1,30 +0,0 @@
-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);
-}
-    `
-};
--- a/components/lib/theme/lara/toolbar/package.json
+++ b/components/lib/theme/lara/toolbar/package.json
@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
--- a/nuxt.config.js
+++ b/nuxt.config.js
@ -52,7 +52,10 @@ export default defineNuxtConfig({
                { property: 'og:image', content: 'https://www.primefaces.org/static/social/primevue-preview.jpg' },
                { property: 'og:ttl', content: '604800' }
            ],
-            link: [{ rel: 'icon', href: baseUrl + 'favicon.ico' }],
+            link: [
+                { rel: 'icon', href: baseUrl + 'favicon.ico' },
+                { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' }
+            ],
            script: [
                {
                    src: baseUrl + 'scripts/prism.js',