Finish section General colors

rodolv-commons · rodolv-commons · commit 935cc81436e1 · 2025-03-20T11:04:51.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -827,7 +827,7 @@ html, body {
 .main {
   flex: 1;
   position: relative;
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
 }
 .flexbox-row {
   display: flex;
@@ -903,7 +903,7 @@ html, body {
   width: 100%;
 }
 .configError {
-  background-color: @color-background;
+  background-color: var(--color-background);
   width: 100%;
   height: 100%;
 }
@@ -940,7 +940,7 @@ html, body {
 // Override border color for all cocoda-vue-tabs
 .cocoda-vue-tabs-header-item.cocoda-vue-tabs-header-item-active {
   border-bottom-color: var(--color-primary) !important;
-  background-color: @color-background-heading !important;
+  background-color: var(--color-background-heading) !important;
 }
 // Override font-size for all cocoda-vue-tabs
 .cocoda-vue-tabs-sm {
diff --git a/src/ConcordanceApp.vue b/src/ConcordanceApp.vue
@@ -346,7 +346,7 @@ html, body {
 .main {
   flex: 1;
   position: relative;
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
 }
 .flexbox-row {
   display: flex;
@@ -448,7 +448,7 @@ html, body {
 // Override border color for all cocoda-vue-tabs
 .cocoda-vue-tabs-header-item.cocoda-vue-tabs-header-item-active {
   border-bottom-color: var(--color-primary) !important;
-  background-color: @color-background-heading !important;
+  background-color: var(--color-background-heading) !important;
 }
 // Override font-size for all cocoda-vue-tabs
 .cocoda-vue-tabs-sm {
diff --git a/src/components/AnnotationList.vue b/src/components/AnnotationList.vue
@@ -207,7 +207,7 @@ export default {
   flex-direction: column;
 }
 .annotationList > div:nth-child(odd) {
-  background-color: @color-background;
+  background-color: var(--color-background);
 }
 .annotationList > div:nth-child(even) {
   background-color: var(--color-text-veryLightGrey-opacity);
diff --git a/src/components/ConceptDetail.vue b/src/components/ConceptDetail.vue
@@ -557,7 +557,7 @@ export default {
   position: absolute;
   right: 3px;
   top: -2px;
-  color: @color-background;
+  color: var(--color-background);
 }
 
 .conceptDetail-identifier {
diff --git a/src/components/ConceptListItem.vue b/src/components/ConceptListItem.vue
@@ -398,7 +398,7 @@ export default {
 .addToMapping {
   .fontSize-large;
   position: absolute;
-  color: @color-background;
+  color: var(--color-background);
   top: 50%;
   transform: translateY(-50%);
   right: 8px;
diff --git a/src/components/ConceptListWrapper.vue b/src/components/ConceptListWrapper.vue
@@ -353,7 +353,7 @@ export default {
   padding: 4px 5px;
 }
 .conceptListWrapper-listSelectionPopover-choice:hover {
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
   cursor: pointer;
 }
 
diff --git a/src/components/ConceptSearch.vue b/src/components/ConceptSearch.vue
@@ -530,8 +530,8 @@ export default {
   width: 100%;
   padding: 0;
   margin: 3px 0;
-  background-color: @color-background;
-  box-shadow: 0 2px 4px 0 @color-shadow;
+  background-color: var(--color-background);
+  box-shadow: 0 2px 4px 0 var(--color-shadow);
   z-index: @zIndex-10;
 }
 
@@ -558,7 +558,7 @@ export default {
   height: 50px;
   padding: 0px 0px 0px 12px;
   z-index: @zIndex-3;
-  background-color: @color-loading-overlay-background;
+  background-color: var(--color-loading-overlay-background);
   display: flex;
   justify-content: left;
   align-items: center;
diff --git a/src/components/ItemName.vue b/src/components/ItemName.vue
@@ -290,6 +290,6 @@ export default {
   width: 1em;
   height: 1em;
   margin-top: 0.2em;
-  background: @color-background;
+  background: var(--color-background);
 }
 </style>
diff --git a/src/components/ItemSuggest.vue b/src/components/ItemSuggest.vue
@@ -324,7 +324,7 @@ export default defineComponent({
   width: 100%;
   padding: 0;
   margin: 1px 0;
-  background-color: @color-background;
+  background-color: var(--color-background);
   box-shadow: 0 2px 4px 0 @color-shadow;
   z-index: @zIndex-10;
 }
diff --git a/src/components/LoadingIndicatorFull.vue b/src/components/LoadingIndicatorFull.vue
@@ -43,10 +43,11 @@ export default {
 <style lang="less">
 @import "@/style/z-index.less";
 @import "@/style/utilities.less";
+@import "../style/colors.css";
 
 .loadingIndicatorFull {
   z-index: @zIndex-8 !important;
-  background-color: @color-loading-overlay-background;
+  background-color: var(--color-loading-overlay-background);
   animation: fadein 0.5s;
 }
 @keyframes fadein {
diff --git a/src/components/MappingBrowserTable.vue b/src/components/MappingBrowserTable.vue
@@ -868,7 +868,7 @@ export default {
 .mappingBrowser-hoveredRegistry:before {
   position: absolute;
   content: "";
-  background: @color-loading-overlay-background;
+  background: var(--color-loading-overlay-background);
   top: 0; right: 0; left: 0; bottom: 0;
   z-index: @zIndex-10;
 }
@@ -984,7 +984,7 @@ export default {
 }
 
 .mappingBrowser-table .flexibleTable-section-before {
-  background-color: @color-background-heading;
+  background-color: var(--color-background-heading);
 }
 
 // Custom section class for current registry
diff --git a/src/components/MappingEditor.vue b/src/components/MappingEditor.vue
@@ -753,8 +753,8 @@ export default {
 #mappingEditor {
   position: relative;
   display: flex;
-  border: 1px solid @color-background;
-  background-color: @color-background
+  border: 1px solid var(--color-background);
+  background-color: var(--color-background);
 }
 .mappingTypeSelection {
   flex: none;
diff --git a/src/components/Minimizer.vue b/src/components/Minimizer.vue
@@ -213,7 +213,7 @@ export default {
   right: 0px;
   top: 0px;
   background: @color-button-faded;
-  color: @color-background;
+  color: var(--color-background);
   border-radius: 0 0 0 3px;
 }
 .minimizeButton {
@@ -233,7 +233,7 @@ export default {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: @color-loading-overlay-background;
+  background-color: var(--color-loading-overlay-background);
   z-index: @zIndex-3;
 }
 // Overlay when component is minimized
@@ -247,7 +247,7 @@ export default {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: @color-background;
+  background-color: var(--color-background);
   user-select: none;
 }
 .minimizedOverlay:hover {
diff --git a/src/components/RegistryNotation.vue b/src/components/RegistryNotation.vue
@@ -52,7 +52,7 @@ export default {
   display: inline-block;
   text-align: center;
   .m-borderRadius(5px);
-  color: @color-background;
+  color: var(--color-background);
   height: 18px;
   .fontSize-verySmall;
   background-color: var(--color-secondary-dark-faded-70); // note: only used when disabled
diff --git a/src/components/TheNavbar.vue b/src/components/TheNavbar.vue
@@ -429,7 +429,7 @@ export default {
 nav.navbar {
   padding: 2px 8px;
   height: 42px;
-  background-color: @color-background-primary;
+  background-color: var(--color-background-primary);
 }
 .navbar-brand {
   color: var(--color-text-dark) !important;
diff --git a/src/components/TheSettings.vue b/src/components/TheSettings.vue
@@ -852,6 +852,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 p {
   margin: 5px 0 20px 0 !important;
@@ -869,7 +870,7 @@ p {
   align-items: center;
 }
 .settingsModal-mapping-registry.selectable:hover {
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
   cursor: pointer;
 }
 // First Child: Checkbox
@@ -892,7 +893,7 @@ p {
 }
 .settingsModal-footer {
   padding: .75rem 1.25rem;
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
   border-top: 1px solid @color-shadow;
 }
 // Hide no data tag if it's not first child
diff --git a/src/style/colors.css b/src/style/colors.css
@@ -40,12 +40,28 @@
     --color-text-veryLightGrey-opacity: rgba(210, 210, 210, 0.3); /* Opacity at 70%*/
 
     /* General colors */
+    --color-background: rgb(255, 255, 255);
+    --color-background-primary: var(--color-secondary);
+    --color-background-secondary: hsl(0, 15.38%, 94.8%); /* Original hex is #e9e1e1 with lightness of 6% */ 
+    --color-background-heading: rgb(240, 240, 240);
+    --color-loading-overlay-background: rgba(255, 255, 255, 0.6);
+    --color-shadow: rgba(0, 0, 0, 0.2);
     --color-link: var(--color-primary);
     --color-link-hover: var(--color-primary-light);
 
     /* Button colors (monochrome) */
     --color-button-hover: var(--color-primary-light);
 
+    /*  
+        @color-button: #555555;
+    @color-button-slightlyFaded: fadeout(@color-button, 40%);
+    @color-button-faded: fadeout(@color-button, 80%);
+    @color-button-hover: @color-primary-light;
+    @color-button-disabled: @color-button-faded;
+    @color-button-delete: @color-danger;
+    @color-button-delete-hover: @color-danger-dark;
+    */
+
     /* Component specific colors */
     --color--conceptSearch-result-selected: var(--color-primary-dark);
 
diff --git a/src/style/main.less b/src/style/main.less
@@ -43,7 +43,7 @@
 }
 
 .visualComponent {
-  background-color: @color-background;
+  background-color: var(--color-background);
   margin: 4px;
   box-shadow: 0 1px 2px 0 @color-shadow;
   padding: 5px;
@@ -197,7 +197,7 @@ h6 {
   border-right: 5px solid var(--color-success);
 }
 .concept-mappingsDoNotExist {
-  border-right: 5px solid @color-background;
+  border-right: 5px solid var(--color-background);
 }
 
 // Favorite stars
@@ -254,7 +254,7 @@ h6 {
 
 // Override bootstrap styles
 .custom-control-label:before{
-  background-color: @color-background-secondary !important;
+  background-color: var(--color-background-secondary) !important;
 }
 .custom-checkbox .custom-control-input:checked~.custom-control-label::before{
   background-color: @color-button !important;

Original file line number	Diff line number	Diff line change
`@@ -207,7 +207,7 @@ export default {`
`207`	`207`	`flex-direction: column;`
`208`	`208`	`}`
`209`	`209`	`.annotationList > div:nth-child(odd) {`
`210`		`- background-color: @color-background;`
	`210`	`+ background-color: var(--color-background);`
`211`	`211`	`}`
`212`	`212`	`.annotationList > div:nth-child(even) {`
`213`	`213`	`background-color: var(--color-text-veryLightGrey-opacity);`
Original file line number	Diff line number	Diff line change
`@@ -557,7 +557,7 @@ export default {`
`557`	`557`	`position: absolute;`
`558`	`558`	`right: 3px;`
`559`	`559`	`top: -2px;`
`560`		`- color: @color-background;`
	`560`	`+ color: var(--color-background);`
`561`	`561`	`}`
`562`	`562`
`563`	`563`	`.conceptDetail-identifier {`
Original file line number	Diff line number	Diff line change
`@@ -353,7 +353,7 @@ export default {`
`353`	`353`	`padding: 4px 5px;`
`354`	`354`	`}`
`355`	`355`	`.conceptListWrapper-listSelectionPopover-choice:hover {`
`356`		`- background-color: @color-background-secondary;`
	`356`	`+ background-color: var(--color-background-secondary);`
`357`	`357`	`cursor: pointer;`
`358`	`358`	`}`
`359`	`359`
Original file line number	Diff line number	Diff line change
`@@ -290,6 +290,6 @@ export default {`
`290`	`290`	`width: 1em;`
`291`	`291`	`height: 1em;`
`292`	`292`	`margin-top: 0.2em;`
`293`		`- background: @color-background;`
	`293`	`+ background: var(--color-background);`
`294`	`294`	`}`
`295`	`295`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -324,7 +324,7 @@ export default defineComponent({`
`324`	`324`	`width: 100%;`
`325`	`325`	`padding: 0;`
`326`	`326`	`margin: 1px 0;`
`327`		`- background-color: @color-background;`
	`327`	`+ background-color: var(--color-background);`
`328`	`328`	`box-shadow: 0 2px 4px 0 @color-shadow;`
`329`	`329`	`z-index: @zIndex-10;`
`330`	`330`	`}`