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

View File

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

View File

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

View File

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

View File

@ -212,7 +212,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
:host([readonly][multiple][rows]) .hover__popup::part(popup) { :host([readonly][multiple][rows]) .hover__popup::part(popup) {
z-index: var(--sl-z-index-dropdown); 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 { :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; margin-left: 0px;
height: var(--sl-input-height-medium); height: var(--sl-input-height-medium);
width: 100%; width: 100%;
background-color: white; background-color: var(--sl-color-neutral-0);
z-index: var(--sl-z-index-dropdown); z-index: var(--sl-z-index-dropdown);
} }

View File

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

View File

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

View File

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