Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

REFACTOR: move shadow vars to css custom props (#22094)

This commit is contained in:
Kris 2023-06-13 16:38:31 -04:00 committed by GitHub
parent dae3970bad
commit e0f848c2ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 59 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/color_definitions.scss
View File

@ -135,4 +135,13 @@
--gold: #{$gold};
--silver: #{$silver};
--bronze: #{$bronze};
--shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
--shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
--shadow-menu-panel: 0 12px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
--shadow-card: 0 4px 14px rgba(0, 0, 0, #{$shadow-opacity-card});
--shadow-dropdown: 0 2px 3px 0 rgba(0, 0, 0, #{$shadow-opacity-dropdown});
--shadow-header: 0 2px 4px -1px rgba(0, 0, 0, #{$shadow-opacity-header});
--shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
--shadow-focus-danger: 0 0 6px 0 var(--danger);
}

2
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -380,7 +380,7 @@ $mobile-breakpoint: 700px;
width: 460px;
right: 0;
z-index: z("dropdown");
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
margin-top: -2px;
background-color: var(--secondary);
padding: 12px 12px 5px;

2
app/assets/stylesheets/common/admin/customize.scss
View File

@ -961,7 +961,7 @@ table.permalinks {
height: calc(100vh - 450px);
min-height: 200px;
width: 100%;
box-shadow: shadow("footer-nav");
box-shadow: var(--shadow-footer-nav);
border-radius: 4px;
}

2
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -521,7 +521,7 @@
}
}
&:hover {
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
}
}
}

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -36,7 +36,7 @@ html.composer-open {
transition: height 250ms ease, background 250ms ease, transform 250ms ease,
max-width 250ms ease, padding-bottom 250ms ease;
background-color: var(--secondary);
box-shadow: shadow("composer");
box-shadow: var(--shadow-composer);
.reply-area {
display: flex;
@ -426,7 +426,7 @@ html.composer-open {
width: 300px;
background-color: var(--secondary);
border: 1px solid var(--primary-low);
box-shadow: shadow("dropdown-lite");
box-shadow: var(--shadow-dropdown);
border-radius: 8px;
ul {

2
app/assets/stylesheets/common/base/d-popover.scss
View File

@ -5,7 +5,7 @@ $d-popover-border: var(--primary-low);
color: var(--primary);
background: $d-popover-background;
border: 1px solid var(--primary-low);
box-shadow: shadow("menu-panel");
box-shadow: var(--shadow-menu-panel);
}
.tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {

2
app/assets/stylesheets/common/base/dialog.scss
View File

@ -37,7 +37,7 @@
position: relative;
background-color: var(--secondary);
animation: fade-in 250ms both;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
min-width: 40vw;
}

2
app/assets/stylesheets/common/base/discourse.scss
View File

@ -198,7 +198,7 @@ textarea {
&:focus:required:invalid:focus {
border-color: var(--danger);
box-shadow: shadow("focus-danger");
box-shadow: var(--shadow-focus-danger);
}
}

2
app/assets/stylesheets/common/base/groups.scss
View File

@ -46,7 +46,7 @@
transition: all 0.25s;
&:hover {
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
border-color: var(--primary-low-mid-or-secondary-high);
}
}

2
app/assets/stylesheets/common/base/header.scss
View File

@ -10,7 +10,7 @@
width: 100%;
z-index: z("header");
background-color: var(--header_background);
box-shadow: shadow("header");
box-shadow: var(--shadow-header);
backface-visibility: hidden; /** do magic for scrolling performance **/
> .wrap {

4
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -1,7 +1,7 @@
.menu-panel.slide-in {
position: fixed;
right: 0;
box-shadow: shadow("header");
box-shadow: var(--shadow-header);
.panel-body {
width: 100%;
@ -21,7 +21,7 @@
.menu-panel {
border: 1px solid var(--primary-low);
box-shadow: shadow("menu-panel");
box-shadow: var(--shadow-menu-panel);
background-color: var(--secondary);
z-index: z("header");
padding: 0.5em;

6
app/assets/stylesheets/common/base/modal.scss
View File

@ -18,7 +18,7 @@
margin: 0 auto;
max-width: var(--modal-max-width);
background-color: var(--secondary);
box-shadow: shadow("modal");
box-shadow: var(--shadow-modal);
.select-kit {
width: 220px;
@ -44,7 +44,7 @@
overflow: auto;
height: auto;
background-color: var(--secondary);
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
background-clip: padding-box;
}
@ -208,7 +208,7 @@
position: absolute;
top: 70%;
padding: 5px 10px;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
z-index: 5;
background-color: var(--secondary);
max-height: 150px;

2
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -3,7 +3,7 @@
width: 14em;
border: 1px solid var(--primary-low);
z-index: z("dropdown");
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
ul {
margin: 0;

2
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -495,7 +495,7 @@
background: var(--primary-very-low);
color: var(--primary-high);
font-size: var(--font-down-2);
box-shadow: shadow("dropdown-lite");
box-shadow: var(--shadow-dropdown);
margin-left: 50%;
transform: translateX(-50%);
border-radius: 4px;

2
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -26,7 +26,7 @@
.sidebar-more-section-links-details-content {
background-color: var(--d-sidebar-background);
transition: background-color 0.25s;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
border: 1px solid var(--primary-low);
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);

2
app/assets/stylesheets/common/base/static-login.scss
View File

@ -34,7 +34,7 @@ body.static-login {
border: 1px solid var(--primary-low);
text-align: center;
padding: 2em;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
border-radius: 5px;
display: grid;
place-items: center;

2
app/assets/stylesheets/common/base/tooltip.scss
View File

@ -54,7 +54,7 @@ $discourse-tooltip-border: var(--primary-medium);
max-width: 250px;
font-size: var(--font-down-1);
color: var(--primary);
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
line-height: 1.4em;
}
}

4
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -556,7 +556,7 @@ aside.quote {
z-index: z("dropdown");
background-color: var(--secondary);
border: 1px solid var(--primary-low);
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
flex-direction: column;
&.animated {
@ -1394,7 +1394,7 @@ span.mention {
margin-left: 8px;
background-color: var(--primary-low);
color: var(--primary);
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
}
}
}

2
app/assets/stylesheets/common/base/topic.scss
View File

@ -69,7 +69,7 @@ $topic-progress-height: 42px;
overflow-y: auto;
z-index: z("timeline");
padding: 10px 10px 35px 10px;
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
background: var(--tertiary-low);
.close {

2
app/assets/stylesheets/common/components/buttons.scss
View File

@ -201,7 +201,7 @@
border-radius: var(--d-border-radius);
&:hover,
&:focus {
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
outline: 1px solid #000;
}
&[href] {

2
app/assets/stylesheets/common/components/d-tooltip.scss
View File

@ -7,6 +7,6 @@
color: var(--primary);
background: var(--secondary);
border: 1px solid var(--primary-low);
box-shadow: shadow("menu-panel");
box-shadow: var(--shadow-menu-panel);
overflow-wrap: break-word;
}

2
app/assets/stylesheets/common/components/footer-nav.scss
View File

@ -30,7 +30,7 @@ body.footer-nav-visible {
.footer-nav {
background-color: rgba(var(--header_background-rgb), 0.9);
box-shadow: shadow("footer-nav");
box-shadow: var(--shadow-footer-nav);
height: var(--footer-nav-height);
position: fixed;
bottom: calc(var(--footer-nav-height) * -1);

2
app/assets/stylesheets/common/components/hashtag.scss
View File

@ -58,7 +58,7 @@ a.hashtag {
.hashtag-autocomplete {
max-height: 13.5em;
overflow-y: auto;
box-shadow: shadow("dropdown-lite");
box-shadow: var(--shadow-dropdown);
border-radius: 8px;
&__fadeout {

2
app/assets/stylesheets/common/components/user-card.scss
View File

@ -37,7 +37,7 @@
.user-card,
.group-card {
width: var(--card-width);
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
color: var(--primary);
background: var(--secondary) center center;
background-size: cover;

9
app/assets/stylesheets/common/foundation/color_transformations.scss
View File

@ -171,3 +171,12 @@ $hljs-attribute: dark-light-choose(
$hljs-symbol: dark-light-choose(unquote("#990073"), unquote("#fbe")) !default;
$hljs-bg: dark-light-choose(unquote("#f8f8f8"), unquote("#333")) !default;
$hljs-builtin-name: dark-light-choose($tertiary-high, $tertiary-hover) !default;
// shadow opacity variables
$shadow-opacity-modal: dark-light-choose(0.6, 1) !default;
$shadow-opacity-composer: dark-light-choose(0.12, 0.35) !default;
$shadow-opacity-menu-panel: dark-light-choose(0.15, 0.35) !default;
$shadow-opacity-card: dark-light-choose(0.15, 0.5) !default;
$shadow-opacity-dropdown: dark-light-choose(0.2, 0.35) !default;
$shadow-opacity-header: dark-light-choose(0.25, 0.45) !default;
$shadow-opacity-footer-nav: dark-light-choose(0.2, 0.4) !default;

43
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -132,49 +132,6 @@ $z-layers: (
@return map-deep-get($z-layers, $layers...);
}
// Box-shadow
// --------------------------------------------------
$box-shadow-light: (
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
"menu-panel": 0 12px 12px rgba(0, 0, 0, 0.15),
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
"dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.1),
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
"footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
"kbd": (
0 2px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px dark-light-choose(#fff, #000) inset,
),
"focus": 0 0 3px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger,
);
// do not add a dark shadow without a light equivilant
$box-shadow-dark: (
"modal": 0 8px 60px rgba(0, 0, 0, 1),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.35),
"menu-panel": 0 8px 12px rgba(0, 0, 0, 0.35),
"card": 0 4px 14px rgba(0, 0, 0, 0.5),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.35),
"dropdown-lite": 0px 2px 12px 0px rgba(0, 0, 0, 0.25),
);
@function shadow($key) {
@if is-light-color-scheme() {
@return map-get($box-shadow-light, $key);
} @else {
$shadow-dark: map-get($box-shadow-dark, $key);
@if $shadow-dark != null {
@return $shadow-dark;
} @else {
@return map-get($box-shadow-light, $key);
}
}
}
// Color utilities
// --------------------------------------------------

2
app/assets/stylesheets/common/input_tip.scss
View File

@ -20,7 +20,7 @@
&.bad {
background: var(--danger-medium);
color: white;
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
}
&.hide,
&.good {

2
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -15,7 +15,7 @@
.select-kit-body {
border: 1px solid var(--primary-low);
background-clip: padding-box;
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
}
.select-kit-row {

2
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -40,7 +40,7 @@
border-radius: 0;
border: none;
border: 1px solid var(--primary-low);
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
background: var(--secondary);
max-width: 600px;
}

2
app/assets/stylesheets/common/software-update-prompt.scss
View File

@ -9,7 +9,7 @@
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
box-shadow: shadow("header");
box-shadow: var(--shadow-header);
z-index: z("header") - 10;
.update-prompt-main-content {

2
app/assets/stylesheets/common/topic-entrance.scss
View File

@ -2,7 +2,7 @@
border: 1px solid var(--primary-low);
padding: 5px;
background: var(--secondary);
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
z-index: z("dropdown");
position: absolute;

2
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -55,7 +55,7 @@
left: 0;
right: 0;
border-top: 1px solid var(--primary-low);
box-shadow: shadow("composer");
box-shadow: var(--shadow-composer);
padding: 20px 0px;
z-index: z("fullscreen");
@media screen and (max-height: 425px) {

2
app/assets/stylesheets/desktop/compose.scss
View File

@ -89,7 +89,7 @@
overflow-y: auto;
z-index: z("composer", "dropdown") + 1;
padding: 1.5em;
box-shadow: shadow("dropdown");
box-shadow: var(--shadow-dropdown);
background: var(--highlight-bg);
&.urgent {

2
app/assets/stylesheets/desktop/login.scss
View File

@ -417,7 +417,7 @@
}
.invite-form,
.invite-success {
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
}
}

2
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -547,7 +547,7 @@ blockquote {
width: 200px;
position: fixed;
z-index: z("dropdown") + 1; // 1 higher than .select-posts
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
padding: 0.714em;
margin-bottom: 5px;
right: 10px;

2
plugins/chat/assets/stylesheets/common/chat-message-actions.scss
View File

@ -127,7 +127,7 @@
.select-kit-body {
padding: 0.5rem;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
border: 1px solid var(--primary-300);
}

4
plugins/chat/assets/stylesheets/common/direct-message-creator.scss
View File

@ -114,7 +114,7 @@
margin: 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--primary-low);
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
position: absolute;
width: 100%;
z-index: z("dropdown");
@ -180,7 +180,7 @@
text-align: center;
padding: 1rem;
width: 100%;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
background: var(--secondary);
margin: 0;
box-sizing: border-box;

2
plugins/chat/assets/stylesheets/mobile/chat-emoji-picker.scss
View File

@ -8,7 +8,7 @@
right: 0;
height: 50vh;
width: 100%;
box-shadow: shadow("card");
box-shadow: var(--shadow-card);
z-index: z("header") + 2;
max-width: 100vw;
box-sizing: border-box;