From c61852d2c7036f9a065af7f1a9bdc4b79e19cd34 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 12 Feb 2024 00:25:50 +0300 Subject: [PATCH] Showcase variables refactored --- .../styles}/fonts/Inter-italic.var.woff2 | Bin .../styles}/fonts/Inter-roman.var.woff2 | Bin assets/styles/layout/_code.scss | 2 +- assets/styles/layout/_content.scss | 2 +- assets/styles/layout/_core.scss | 21 +-- assets/styles/layout/_doc.scss | 70 +++---- assets/styles/layout/_docsearch.scss | 56 +++--- assets/styles/layout/_footer.scss | 11 +- assets/styles/layout/_mixins.scss | 14 +- assets/styles/layout/_news.scss | 2 +- assets/styles/layout/_responsive.scss | 2 +- assets/styles/layout/_sidebar.scss | 40 ++-- assets/styles/layout/_topbar.scss | 38 ++-- .../styles/layout/variables/main/_dark.scss | 34 ++-- .../styles/layout/variables/main/_light.scss | 34 ++-- components/lib/theme/aura/index.js | 16 +- components/lib/theme/index.d.ts | 13 -- .../lib/theme/lara/accordion/index.d.ts | 31 ---- components/lib/theme/lara/accordion/index.js | 142 --------------- .../lib/theme/lara/accordion/package.json | 6 - components/lib/theme/lara/card/index.d.ts | 31 ---- components/lib/theme/lara/card/index.js | 68 ------- components/lib/theme/lara/card/package.json | 6 - components/lib/theme/lara/divider/index.d.ts | 31 ---- components/lib/theme/lara/divider/index.js | 71 -------- .../lib/theme/lara/divider/package.json | 6 - components/lib/theme/lara/fieldset/index.d.ts | 31 ---- components/lib/theme/lara/fieldset/index.js | 66 ------- .../lib/theme/lara/fieldset/package.json | 6 - components/lib/theme/lara/global.js | 95 ---------- components/lib/theme/lara/index.d.ts | 0 components/lib/theme/lara/index.js | 172 ------------------ components/lib/theme/lara/package.json | 6 - components/lib/theme/lara/panel/index.d.ts | 31 ---- components/lib/theme/lara/panel/index.js | 68 ------- components/lib/theme/lara/panel/package.json | 6 - .../lib/theme/lara/scrollpanel/index.d.ts | 31 ---- .../lib/theme/lara/scrollpanel/index.js | 64 ------- .../lib/theme/lara/scrollpanel/package.json | 6 - components/lib/theme/lara/splitter/index.d.ts | 31 ---- components/lib/theme/lara/splitter/index.js | 68 ------- .../lib/theme/lara/splitter/package.json | 6 - components/lib/theme/lara/tabview/index.d.ts | 31 ---- components/lib/theme/lara/tabview/index.js | 127 ------------- .../lib/theme/lara/tabview/package.json | 6 - components/lib/theme/lara/toolbar/index.d.ts | 31 ---- components/lib/theme/lara/toolbar/index.js | 30 --- .../lib/theme/lara/toolbar/package.json | 6 - nuxt.config.js | 5 +- 49 files changed, 190 insertions(+), 1480 deletions(-) rename {components/lib/theme/lara => assets/styles}/fonts/Inter-italic.var.woff2 (100%) rename {components/lib/theme/lara => assets/styles}/fonts/Inter-roman.var.woff2 (100%) delete mode 100644 components/lib/theme/lara/accordion/index.d.ts delete mode 100644 components/lib/theme/lara/accordion/index.js delete mode 100644 components/lib/theme/lara/accordion/package.json delete mode 100644 components/lib/theme/lara/card/index.d.ts delete mode 100644 components/lib/theme/lara/card/index.js delete mode 100644 components/lib/theme/lara/card/package.json delete mode 100644 components/lib/theme/lara/divider/index.d.ts delete mode 100644 components/lib/theme/lara/divider/index.js delete mode 100644 components/lib/theme/lara/divider/package.json delete mode 100644 components/lib/theme/lara/fieldset/index.d.ts delete mode 100644 components/lib/theme/lara/fieldset/index.js delete mode 100644 components/lib/theme/lara/fieldset/package.json delete mode 100644 components/lib/theme/lara/global.js delete mode 100644 components/lib/theme/lara/index.d.ts delete mode 100644 components/lib/theme/lara/index.js delete mode 100644 components/lib/theme/lara/package.json delete mode 100644 components/lib/theme/lara/panel/index.d.ts delete mode 100644 components/lib/theme/lara/panel/index.js delete mode 100644 components/lib/theme/lara/panel/package.json delete mode 100644 components/lib/theme/lara/scrollpanel/index.d.ts delete mode 100644 components/lib/theme/lara/scrollpanel/index.js delete mode 100644 components/lib/theme/lara/scrollpanel/package.json delete mode 100644 components/lib/theme/lara/splitter/index.d.ts delete mode 100644 components/lib/theme/lara/splitter/index.js delete mode 100644 components/lib/theme/lara/splitter/package.json delete mode 100644 components/lib/theme/lara/tabview/index.d.ts delete mode 100644 components/lib/theme/lara/tabview/index.js delete mode 100644 components/lib/theme/lara/tabview/package.json delete mode 100644 components/lib/theme/lara/toolbar/index.d.ts delete mode 100644 components/lib/theme/lara/toolbar/index.js delete mode 100644 components/lib/theme/lara/toolbar/package.json diff --git a/components/lib/theme/lara/fonts/Inter-italic.var.woff2 b/assets/styles/fonts/Inter-italic.var.woff2 similarity index 100% rename from components/lib/theme/lara/fonts/Inter-italic.var.woff2 rename to assets/styles/fonts/Inter-italic.var.woff2 diff --git a/components/lib/theme/lara/fonts/Inter-roman.var.woff2 b/assets/styles/fonts/Inter-roman.var.woff2 similarity index 100% rename from components/lib/theme/lara/fonts/Inter-roman.var.woff2 rename to assets/styles/fonts/Inter-roman.var.woff2 diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss index e66e3ed0c..c7d84a425 100644 --- 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); } } \ No newline at end of file diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss index d60687945..e82a1385f 100644 --- 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; diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index 0ae30f61a..8c7772169 100644 --- 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; } \ No newline at end of file diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index dab61d62c..e46edfeac 100644 --- 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 { diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss index 5c54c3034..e21319543 100644 --- 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; } diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss index dffbdec01..9c824ac40 100644 --- 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(); diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss index f0859ec92..ed8c79678 100644 --- 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 { diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss index d447f5e87..d4507bffd 100644 --- 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 { diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss index 27719501d..6bcc2ac2a 100644 --- 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; diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index 2f1941d7d..7077ea7a9 100644 --- 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); } } diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index c99f27b3f..720e18c62 100644 --- 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 { diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index f9a290696..cdd2fc13e 100644 --- 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); } \ No newline at end of file diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss index 0001336f2..47644726c 100644 --- 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); } \ No newline at end of file diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 7cd1d8c16..51631db2f 100644 --- 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)' } } diff --git a/components/lib/theme/index.d.ts b/components/lib/theme/index.d.ts index 09f168549..e69de29bb 100644 --- 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; -} diff --git a/components/lib/theme/lara/accordion/index.d.ts b/components/lib/theme/lara/accordion/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/accordion/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/accordion/index.js b/components/lib/theme/lara/accordion/index.js deleted file mode 100644 index afd1ece8c..000000000 --- a/components/lib/theme/lara/accordion/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/accordion/package.json b/components/lib/theme/lara/accordion/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/accordion/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/card/index.d.ts b/components/lib/theme/lara/card/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/card/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/card/index.js b/components/lib/theme/lara/card/index.js deleted file mode 100644 index d5e6d9731..000000000 --- a/components/lib/theme/lara/card/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/card/package.json b/components/lib/theme/lara/card/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/card/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/divider/index.d.ts b/components/lib/theme/lara/divider/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/divider/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/divider/index.js b/components/lib/theme/lara/divider/index.js deleted file mode 100644 index b3b555843..000000000 --- a/components/lib/theme/lara/divider/index.js +++ /dev/null @@ -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; -} - ` -}; diff --git a/components/lib/theme/lara/divider/package.json b/components/lib/theme/lara/divider/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/divider/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/fieldset/index.d.ts b/components/lib/theme/lara/fieldset/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/fieldset/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/fieldset/index.js b/components/lib/theme/lara/fieldset/index.js deleted file mode 100644 index 78f48e133..000000000 --- a/components/lib/theme/lara/fieldset/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/fieldset/package.json b/components/lib/theme/lara/fieldset/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/fieldset/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/global.js b/components/lib/theme/lara/global.js deleted file mode 100644 index 267c539cc..000000000 --- a/components/lib/theme/lara/global.js +++ /dev/null @@ -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; - } -} -` -}; diff --git a/components/lib/theme/lara/index.d.ts b/components/lib/theme/lara/index.d.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js deleted file mode 100644 index 71ecf38a5..000000000 --- a/components/lib/theme/lara/index.js +++ /dev/null @@ -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 - } -}; diff --git a/components/lib/theme/lara/package.json b/components/lib/theme/lara/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/panel/index.d.ts b/components/lib/theme/lara/panel/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/panel/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js deleted file mode 100644 index d72f50dc2..000000000 --- a/components/lib/theme/lara/panel/index.js +++ /dev/null @@ -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; -} - ` -}; diff --git a/components/lib/theme/lara/panel/package.json b/components/lib/theme/lara/panel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/panel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/scrollpanel/index.d.ts b/components/lib/theme/lara/scrollpanel/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/scrollpanel/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/scrollpanel/index.js b/components/lib/theme/lara/scrollpanel/index.js deleted file mode 100644 index 70912c392..000000000 --- a/components/lib/theme/lara/scrollpanel/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/scrollpanel/package.json b/components/lib/theme/lara/scrollpanel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/scrollpanel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/splitter/index.d.ts b/components/lib/theme/lara/splitter/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/splitter/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/splitter/index.js b/components/lib/theme/lara/splitter/index.js deleted file mode 100644 index aa3446f8a..000000000 --- a/components/lib/theme/lara/splitter/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/splitter/package.json b/components/lib/theme/lara/splitter/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/splitter/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/tabview/index.d.ts b/components/lib/theme/lara/tabview/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/tabview/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/tabview/index.js b/components/lib/theme/lara/tabview/index.js deleted file mode 100644 index 2cdec0309..000000000 --- a/components/lib/theme/lara/tabview/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/tabview/package.json b/components/lib/theme/lara/tabview/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/tabview/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/theme/lara/toolbar/index.d.ts b/components/lib/theme/lara/toolbar/index.d.ts deleted file mode 100644 index b3dfdca71..000000000 --- a/components/lib/theme/lara/toolbar/index.d.ts +++ /dev/null @@ -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; -} diff --git a/components/lib/theme/lara/toolbar/index.js b/components/lib/theme/lara/toolbar/index.js deleted file mode 100644 index 4c2b13693..000000000 --- a/components/lib/theme/lara/toolbar/index.js +++ /dev/null @@ -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); -} - ` -}; diff --git a/components/lib/theme/lara/toolbar/package.json b/components/lib/theme/lara/toolbar/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/theme/lara/toolbar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/nuxt.config.js b/nuxt.config.js index b30c190fa..db80ac1ea 100644 --- 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',