From 978dee5c2b358cdf773f74c189a51306803dd3ae Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 10 Feb 2024 11:57:04 +0300 Subject: [PATCH] Refactored variables in layout --- assets/styles/layout/_core.scss | 2 +- assets/styles/layout/_doc.scss | 12 ++++++------ assets/styles/layout/_docsearch.scss | 10 +++++----- assets/styles/layout/_sidebar.scss | 10 +++++----- assets/styles/layout/_topbar.scss | 8 ++++---- assets/styles/layout/variables/main/_dark.scss | 4 +++- assets/styles/layout/variables/main/_light.scss | 4 +++- components/lib/theme/aura/avatar/index.js | 2 +- components/lib/theme/aura/fieldset/index.js | 10 ++++------ components/lib/theme/aura/index.js | 10 ---------- components/lib/theme/aura/panel/index.js | 12 ++++++------ components/lib/theme/aura/splitter/index.js | 3 ++- layouts/AppTopBar.vue | 16 ++++++++-------- 13 files changed, 48 insertions(+), 55 deletions(-) diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index 8318c9335..0ae30f61a 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -9,7 +9,7 @@ body { overflow-y: auto; background-color: var(--surface-ground); font-weight: normal; - color: var(--p-text-color); + color: var(--text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--p-font-family); diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 74d4fb6a6..dab61d62c 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -26,7 +26,7 @@ display: block; padding: 0 2rem 1rem 2rem; text-align: center; - color: var(--p-text-color); + color: var(--text-color); font-size: 1rem; letter-spacing: 1px; cursor: pointer; @@ -78,7 +78,7 @@ p { font-size: 1.125rem; - color: var(--p-text-color); + color: var(--text-color); margin: 0; a { @@ -120,7 +120,7 @@ .doc-section-description { > p { font-size: 1rem; - color: var(--p-text-color); + color: var(--text-color); i { border-radius: 6px; @@ -179,7 +179,7 @@ .px-link { padding: 0.25rem 1rem 0.25rem 1rem; - color: var(--p-text-color); + color: var(--text-color); font-weight: 400; white-space: nowrap; min-width: 0; @@ -190,7 +190,7 @@ &:hover { .px-link { - color: var(--p-text-color); + color: var(--text-color); } } } @@ -383,7 +383,7 @@ max-width: min-content; border-color: var(--surface-border); background-color: var(--surface-card); - color: var(--p-text-secondary-color); + color: var(--text-secondary-color); } .doc-option-parameter-name { diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss index 491011ab8..5c54c3034 100644 --- a/assets/styles/layout/_docsearch.scss +++ b/assets/styles/layout/_docsearch.scss @@ -59,7 +59,7 @@ &::before { content: "\e90d"; display: flex; - color: var(--p-text-color); + color: var(--text-color); font-family: "primeicons"; font-size: .4rem; opacity: .7; @@ -131,10 +131,10 @@ :root { --docsearch-searchbox-focus-background: var(--surface-card); - --docsearch-text-color: var(--p-text-color); - --docsearch-muted-color: var(--p-text-color); + --docsearch-text-color: var(--text-color); + --docsearch-muted-color: var(--text-color); --docsearch-searchbox-background: var(--surface-card); - --docsearch-text-color: var(--p-text-color); + --docsearch-text-color: var(--text-color); --docsearch-modal-background: var(--surface-overlay); --docsearch-key-gradient: var(--surface-ground); --docsearch-key-shadow: none; @@ -142,7 +142,7 @@ --docsearch-hit-background: var(--surface-overlay); --docsearch-hit-shadow: none; --docsearch-spacing: 1rem; - --docsearch-hit-color: var(--p-text-color); + --docsearch-hit-color: var(--text-color); --docsearch-highlight-color: var(--p-primary-color); --docsearch-hit-active-color: var(--p-primary-color-inverse); } diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index d0ac24f96..2f1941d7d 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -37,7 +37,7 @@ width: 100%; align-items: center; padding: .5rem 0; - color: var(--p-text-color); + color: var(--text-color); font-weight: 600; transition: all .2s; position: relative; @@ -57,13 +57,13 @@ background-color: transparent; i { - color: var(--p-text-color); + color: var(--text-color); transition: all .2s; } } .menu-toggle-icon { - color: var(--p-text-secondary-color); + color: var(--text-secondary-color); margin-left: auto; } @@ -108,7 +108,7 @@ display: flex; align-items: center; padding: .5rem .5rem .5rem 1rem; - color: var(--p-text-color); + color: var(--text-color); transition: border-color .2s; position: relative; @@ -161,7 +161,7 @@ font-size: .875rem; font-weight: 600; letter-spacing: 1px; - color: var(--p-text-secondary-color); + color: var(--text-secondary-color); margin-bottom: .25rem; } } diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index d0cde0fc3..c99f27b3f 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -90,7 +90,7 @@ } i, span { - color: var(--p-text-color); + color: var(--text-color); } } @@ -122,7 +122,7 @@ .config-panel-label { font-size: .875rem; - color: var(--p-text-secondary-color); + color: var(--text-secondary-color); font-weight: 600; line-height: 1; } @@ -173,7 +173,7 @@ .version-icon { margin-left: .25rem; - color: var(--p-text-secondary-color); + color: var(--text-secondary-color); } } @@ -220,7 +220,7 @@ span:last-child { margin-left: 0.5rem; - color: var(--p-text-color); + color: var(--text-color); white-space: nowrap; display: block; overflow: hidden; diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index 14f5d9815..de88d06ce 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/assets/styles/layout/variables/main/_dark.scss @@ -1,6 +1,8 @@ :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-surface-0); + --text-secondary-color: var(--p-surface-400); --card-border: 1px solid transparent; --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; @@ -10,5 +12,5 @@ --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-hover-bg); + --surface-hover: var(--p-dark-surface-800); } \ 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 73e6a3f74..0001336f2 100644 --- a/assets/styles/layout/variables/main/_light.scss +++ b/assets/styles/layout/variables/main/_light.scss @@ -1,6 +1,8 @@ :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); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png); --glow-blend: hard-light, multiply; @@ -10,5 +12,5 @@ --surface-border: var(--p-surface-200); --surface-ground: var(--p-surface-50); --surface-overlay: var(--p-surface-0); - --surface-hover: var(--p-hover-bg); + --surface-hover: var(--p-surface-100); } \ No newline at end of file diff --git a/components/lib/theme/aura/avatar/index.js b/components/lib/theme/aura/avatar/index.js index b1df838dd..1385c0663 100644 --- a/components/lib/theme/aura/avatar/index.js +++ b/components/lib/theme/aura/avatar/index.js @@ -63,6 +63,6 @@ export default { .p-avatar-group .p-avatar { border: 2px solid var(--p-dark-surface-900, var(--p-surface-0)); -} +} ` }; diff --git a/components/lib/theme/aura/fieldset/index.js b/components/lib/theme/aura/fieldset/index.js index 2bdc38653..8cf008f0e 100644 --- a/components/lib/theme/aura/fieldset/index.js +++ b/components/lib/theme/aura/fieldset/index.js @@ -10,8 +10,6 @@ export default { } .p-fieldset-legend { - color: var(--p-dark-surface-0, var(--p-surface-700)); - background: var(--p-dark-surface-900, var(--p-surface-0)); font-weight: 600; border-radius: 6px; border: 0 none; @@ -36,7 +34,7 @@ export default { padding: 0.5rem 0.75rem; color: var(--p-dark-surface-0, var(--p-surface-700)); border-radius: 6px; - transition: background-color 0.2s, color 0.2s, outline-color 0.2s; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); outline-color: transparent; } @@ -47,16 +45,16 @@ export default { .p-fieldset-toggleable > .p-fieldset-legend > a:hover { color: var(--p-dark-surface-0, var(--p-surface-800)); - background-color: var(--p-dark-hover-bg, var(--p-hover-bg)); + background: var(--p-dark-surface-800, var(--p-surface-100)); } .p-fieldset-toggler { color: var(--p-dark-surface-400, var(--p-surface-500)); - transition: color 0.2s; + transition: color var(--p-transition-duration); } .p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler { - color: var(--p-dark-surface-400, var(--p-surface-600)); + color: var(--p-dark-surface-300, var(--p-surface-600)); } .p-fieldset .p-fieldset-content { diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 5be6ce2ed..0b216b8fd 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -80,9 +80,6 @@ export default { highlight: { bg: '{primary.50}', textColor: '{primary.700}' - }, - hover: { - bg: '{surface.100}' } }, dark: { @@ -116,9 +113,6 @@ export default { highlight: { bg: 'color-mix(in srgb, {primary.400}, transparent 84%)', textColor: 'rgba(255,255,255,.87)' - }, - hover: { - bg: 'rgba(255, 255, 255, 0.03)' } } }, @@ -133,10 +127,6 @@ export default { color: '{primary.500}', offset: '2px' }, - text: { - color: 'var(--p-dark-surface-0, var(--p-surface-700))', - secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))' - }, primary: { color: 'var(--p-dark-primary-400, var(--p-primary-500))', colorInverse: 'var(--p-dark-surface-900, var(--p-surface-0))', diff --git a/components/lib/theme/aura/panel/index.js b/components/lib/theme/aura/panel/index.js index f2acd752f..2310b424f 100644 --- a/components/lib/theme/aura/panel/index.js +++ b/components/lib/theme/aura/panel/index.js @@ -2,9 +2,9 @@ export default { css: ` .p-panel { border: 1px solid var(--p-dark-surface-700, var(--p-surface-200)); - border-radius: 6px; + border-radius: var(--p-border-radius); background: var(--p-dark-surface-900, var(--p-surface-0)); - color: var(--p-text-color); + color: var(--p-dark-surface-0, var(--p-surface-700)); } .p-panel-header { @@ -31,17 +31,17 @@ export default { width: 1.75rem; height: 1.75rem; position: relative; - color: var(--p-text-secondary-color); + color: var(--p-dark-surface-400, var(--p-surface-500)); border: 0 none; background: transparent; border-radius: 50%; - transition: background-color 0.2s, color 0.2s, outline-color 0.2s; + transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); outline-color: transparent; } .p-panel-header-icon:enabled:hover { - color: var(--p-text-color); - background: var(--p-dark-hover-bg, var(--p-hover-bg)); + color: var(--p-dark-surface-300, var(--p-surface-600)); + background: var(--p-dark-surface-800, var(--p-surface-100)); } .p-panel-header-icon:focus-visible { diff --git a/components/lib/theme/aura/splitter/index.js b/components/lib/theme/aura/splitter/index.js index 2ac1f8494..b0f22f048 100644 --- a/components/lib/theme/aura/splitter/index.js +++ b/components/lib/theme/aura/splitter/index.js @@ -6,7 +6,7 @@ export default { border: 1px solid var(--p-dark-surface-700, var(--p-surface-200)); background: var(--p-dark-surface-900, var(--p-surface-0)); border-radius: var(--p-border-radius); - color: var(--p-text-color); + color: var(--p-dark-surface-0, var(--p-surface-700)); } .p-splitter-vertical { @@ -26,6 +26,7 @@ export default { .p-splitter-gutter-handle { border-radius: var(--p-border-radius); background: transparent; + transition: outline-color var(--p-transition-duration); outline-color: transparent; } diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue index 4850586e4..749296b99 100755 --- a/layouts/AppTopBar.vue +++ b/layouts/AppTopBar.vue @@ -14,7 +14,7 @@ fill-rule="evenodd" clip-rule="evenodd" d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z" - fill="var(--p-text-color)" + fill="var(--text-color)" /> @@ -30,7 +30,7 @@ fill-rule="evenodd" clip-rule="evenodd" d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z" - fill="var(--p-text-color)" + fill="var(--text-color)" /> - - - - - + + + + + @@ -54,7 +54,7 @@ />