Switch some CSS colors from specific values to variables

This commit is contained in:
nathan 2024-07-11 16:46:22 -06:00
parent 833a9a1c4c
commit 7559ae4f21
9 changed files with 20 additions and 23 deletions

View File

@ -55,12 +55,12 @@ export const cropperStyles = css`
}
.cropper-drag-box {
background-color: #fff;
background-color: var(--sl-color-neutral-1000);
opacity: 0;
}
.cropper-modal {
background-color: #000;
background-color: var(--sl-color-neutral-0);
opacity: 0.5;
}
@ -68,7 +68,7 @@ export const cropperStyles = css`
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
outline-color: var(--sl-color-primary-600);
overflow: hidden;
width: 100%;
}
@ -110,7 +110,7 @@ export const cropperStyles = css`
.cropper-center::before,
.cropper-center::after {
background-color: #eee;
background-color: var(--sl-color-neutral-100);
content: ' ';
display: block;
position: absolute;
@ -141,13 +141,13 @@ export const cropperStyles = css`
}
.cropper-face {
background-color: #fff;
background-color: var(--sl-color-neutral-1000);
left: 0;
top: 0;
}
.cropper-line {
background-color: #39f;
background-color: var(--sl-color-primary-600);
}
.cropper-line.line-e {
@ -179,7 +179,7 @@ export const cropperStyles = css`
}
.cropper-point {
background-color: #39f;
background-color: var(--sl-color-primary-600);
height: 5px;
opacity: 0.75;
width: 5px;
@ -263,7 +263,7 @@ export const cropperStyles = css`
}
.cropper-point.point-se::before {
background-color: #39f;
background-color: var(--sl-color-primary-600);
bottom: -50%;
content: ' ';
display: block;

View File

@ -45,7 +45,7 @@ export class Et2Description extends Et2Widget(LitElement) implements et2_IDetach
}
::slotted(a) {
cursor: pointer;
color: #26537c;
color: var(--sl-color-primary-700);
text-decoration: none;
display: inherit;
}`

View File

@ -210,7 +210,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
}
.dialog__panel {
border: 1px solid silver;
box-shadow: -2px 1px 9px 3px #b4b4b4;
box-shadow: -2px 1px 9px 3px var(--sl-color-gray-400);
min-width: 250px;
touch-action: none;
}
@ -223,7 +223,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
user-select: none;
}
.dialog__close {
background-color: #f3f3f3;
background-color: var(--sl-color-gray-100);
padding: 0;
order: 99;
}
@ -234,7 +234,7 @@ export class Et2Dialog extends Et2Widget(SlDialog)
justify-content: flex-start;
align-items: stretch;
gap: 5px;
border-top: 1px solid silver;
border-top: 1px solid var(--sl-color-gray-400);
margin-top: 0.5em;
}

View File

@ -195,7 +195,7 @@ export default css`
:host([readonly][rows]) .hover__popup::part(popup) {
z-index: var(--sl-z-index-dropdown);
background-color: white;
background-color: var(--sl-color-neutral-0);
display: flex;
flex-wrap: wrap;

View File

@ -212,7 +212,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
:host([readonly][multiple][rows]) .hover__popup::part(popup) {
z-index: var(--sl-z-index-dropdown);
background-color: white;
background-color: var(--sl-color-neutral-0);
}
:host([ readonly ][ multiple ][ rows ]) .hover__popup .select__tags {

View File

@ -172,7 +172,7 @@ export const Et2WithSearchMixin = dedupeMixin(<T extends Constructor<LitElement>
margin-left: 0px;
height: var(--sl-input-height-medium);
width: 100%;
background-color: white;
background-color: var(--sl-color-neutral-0);
z-index: var(--sl-z-index-dropdown);
}

View File

@ -249,21 +249,17 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement)
text-overflow: ellipsis;
}
sl-tree-item {
background-color: white;
}
sl-tree-item.drop-hover {
background-color: #0a5ca5;
background-color: var(--primary-background-color);
}
sl-tree-item.drop-hover sl-tree-item {
background-color: white;
background-color: var(--sl-color-neutral-1000);
}
sl-badge::part(base) {
background-color: rgb(130, 130, 130);
background-color: var(--sl-color-neutral-500);
font-size: 0.75em;
font-weight: 700;
position: absolute;

View File

@ -25,7 +25,7 @@ export class Et2UrlReadonly extends Et2Description
a {
cursor: pointer;
color: #26537c !important;
color: var(--primary-background-color) !important;
text-decoration: none !important;
}`
];

View File

@ -33,6 +33,7 @@
* @see http://getbem.com/naming/ for what inspired naming convention
*/
:root {
--primary-color: #26537C;
--primary-background-color: #4177a2;
--highlight-background-color: rgba(153, 204, 255, .4);