From 57867cf640337c948da6c665c8e12334bf455dae Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Thu, 8 Feb 2024 01:44:27 +0300 Subject: [PATCH] Refactored named surfaces --- assets/styles/layout/_content.scss | 2 +- assets/styles/layout/_core.scss | 4 +-- assets/styles/layout/_doc.scss | 14 +++++----- assets/styles/layout/_docsearch.scss | 26 +++++++++---------- assets/styles/layout/_footer.scss | 2 +- assets/styles/layout/_sidebar.scss | 6 ++--- assets/styles/layout/_topbar.scss | 16 ++++++------ .../styles/layout/variables/main/_dark.scss | 5 ++++ .../styles/layout/variables/main/_light.scss | 5 ++++ components/lib/theme/aura/index.js | 7 ----- 10 files changed, 45 insertions(+), 42 deletions(-) diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss index ebdf759c9..d60687945 100644 --- a/assets/styles/layout/_content.scss +++ b/assets/styles/layout/_content.scss @@ -10,7 +10,7 @@ } .card { - background: var(--p-surface-card); + background: var(--surface-card); border: var(--card-border); padding: 2rem; border-radius: 10px; diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index f8f904ad2..e0ac78fc6 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -7,7 +7,7 @@ body { min-height: 100%; overflow-x: hidden; overflow-y: auto; - background-color: var(--p-surface-ground); + background-color: var(--surface-ground); font-weight: normal; color: var(--p-text-color); -webkit-font-smoothing: antialiased; @@ -17,7 +17,7 @@ body { } .layout-wrapper { - background-color: var(--p-surface-ground); + background-color: var(--surface-ground); } a { diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index ec04680aa..74d4fb6a6 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(--p-surface-border); + border-bottom: 1px solid var(--surface-border); content: ''; } @@ -163,7 +163,7 @@ > .navbar-item { .navbar-item-content { - border-left: 1px solid var(--p-surface-border); + border-left: 1px solid var(--surface-border); padding-left: .25rem; transition: all .2s; @@ -293,7 +293,7 @@ margin-bottom: 1.5rem; th { - border-bottom: 1px solid var(--p-surface-border); + border-bottom: 1px solid var(--surface-border); padding: .75rem 1rem; text-align: left; text-transform: capitalize; @@ -301,12 +301,12 @@ tbody { tr:hover { - background: var(--p-surface-hover); + background: var(--surface-hover); } td { padding: .75rem 1rem; - border-bottom: 1px solid var(--p-surface-border); + border-bottom: 1px solid var(--surface-border); white-space: pre-line; line-height: 1.5; scroll-margin-top: 6.5rem; @@ -381,8 +381,8 @@ border-radius: 6px; padding: 2px 6px; max-width: min-content; - border-color: var(--p-surface-border); - background-color: var(--p-surface-card); + border-color: var(--surface-border); + background-color: var(--surface-card); color: var(--p-text-secondary-color); } diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss index 489b414ef..491011ab8 100644 --- a/assets/styles/layout/_docsearch.scss +++ b/assets/styles/layout/_docsearch.scss @@ -1,8 +1,8 @@ .DocSearch-Button { border-radius: var(--p-border-radius); - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); height: 2rem; - background-color: var(--p-surface-card); + background-color: var(--surface-card); margin: 0; transition: all .3s; padding: 0 .5rem; @@ -79,20 +79,20 @@ } .DocSearch-Modal { - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); box-shadow: none; } .DocSearch-Footer { box-shadow: none; - border-top: 1px solid var(--p-surface-border); - background-color: var(--p-surface-overlay); + border-top: 1px solid var(--surface-border); + background-color: var(--surface-overlay); } .DocSearch-Form { - background: var(--p-surface-card); + background: var(--surface-card); box-shadow: none; - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); border-radius: var(--p-border-radius); transition: border-color .3s; @@ -106,7 +106,7 @@ } .DocSearch-Hit { - border-bottom: 1px solid var(--p-surface-border); + border-bottom: 1px solid var(--surface-border); padding-bottom: 0; margin-bottom: .25rem; } @@ -130,16 +130,16 @@ } :root { - --docsearch-searchbox-focus-background: var(--p-surface-card); + --docsearch-searchbox-focus-background: var(--surface-card); --docsearch-text-color: var(--p-text-color); --docsearch-muted-color: var(--p-text-color); - --docsearch-searchbox-background: var(--p-surface-card); + --docsearch-searchbox-background: var(--surface-card); --docsearch-text-color: var(--p-text-color); - --docsearch-modal-background: var(--p-surface-overlay); - --docsearch-key-gradient: var(--p-surface-ground); + --docsearch-modal-background: var(--surface-overlay); + --docsearch-key-gradient: var(--surface-ground); --docsearch-key-shadow: none; --docsearch-container-background: var(--p-mask-bg); - --docsearch-hit-background: var(--p-surface-overlay); + --docsearch-hit-background: var(--surface-overlay); --docsearch-hit-shadow: none; --docsearch-spacing: 1rem; --docsearch-hit-color: var(--p-text-color); diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss index 901ca3376..dffbdec01 100644 --- a/assets/styles/layout/_footer.scss +++ b/assets/styles/layout/_footer.scss @@ -7,7 +7,7 @@ flex-wrap: wrap; font-weight: 500; color: var(--text-800); - border-top: 1px solid var(--p-surface-border); + border-top: 1px solid var(--surface-border); a { color: var(--primary-color-default); diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index df85da0e0..d0ac24f96 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -48,7 +48,7 @@ height: 2rem; border-radius: var(--p-border-radius); margin-right: .5rem; - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); display: inline-flex; align-items: center; justify-content: center; @@ -69,7 +69,7 @@ &:hover { .menu-icon { - background-color: var(--p-surface-card); + background-color: var(--surface-card); i { color: var(--primary-color-default); @@ -102,7 +102,7 @@ li { a { - border-left: 1px solid var(--p-surface-border); + border-left: 1px solid var(--surface-border); transition: all .2s; font-weight: 450; display: flex; diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss index 3800e03e8..d0cde0fc3 100644 --- a/assets/styles/layout/_topbar.scss +++ b/assets/styles/layout/_topbar.scss @@ -8,7 +8,7 @@ border-bottom: 1px solid transparent; &.layout-topbar-sticky { - border-bottom: 1px solid var(--p-surface-border); + border-bottom: 1px solid var(--surface-border); background-color: var(--topbar-sticky-bg); backdrop-filter: blur(8px); } @@ -73,14 +73,14 @@ align-items: center; justify-content: center; flex-shrink: 0; - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); width: 2rem; height: 2rem; transition: all .2s; border-radius: 6px; margin: 0; padding: 0; - background-color: var(--p-surface-card); + background-color: var(--surface-card); cursor: pointer; @include focus-visible(); @@ -108,9 +108,9 @@ right: 0; width: 14rem; padding: .75rem; - background-color: var(--p-surface-overlay); + background-color: var(--surface-overlay); border-radius: var(--p-border-radius); - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); 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); @@ -179,12 +179,12 @@ .versions-panel { padding: .25rem; - background-color: var(--p-surface-overlay); + background-color: var(--surface-overlay); position: absolute; right: 0; top: calc(100% + 2px); border-radius: var(--p-border-radius); - border: 1px solid var(--p-surface-border); + border: 1px solid var(--surface-border); 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; @@ -210,7 +210,7 @@ overflow: hidden; &:hover { - background-color: var(--p-surface-hover); + background-color: var(--surface-hover); } span:first-child { diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index 74c4fc1ab..14f5d9815 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/assets/styles/layout/variables/main/_dark.scss @@ -6,4 +6,9 @@ --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-hover-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 e97f40f27..73e6a3f74 100644 --- a/assets/styles/layout/variables/main/_light.scss +++ b/assets/styles/layout/variables/main/_light.scss @@ -6,4 +6,9 @@ --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-hover-bg); } \ No newline at end of file diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 6a6c97802..97a5c0eaf 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -133,13 +133,6 @@ export default { color: '{primary.500}', offset: '2px' }, - surface: { - card: 'var(--p-dark-surface-900, var(--p-surface-0))', - border: 'var(--p-dark-surface-800, var(--p-surface-200))', - ground: 'var(--p-dark-surface-950, var(--p-surface-50))', - overlay: 'var(--p-dark-surface-900, var(--p-surface-0))', - hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))' - }, text: { color: 'var(--p-dark-surface-0, var(--p-surface-700))', secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))'