fix: Get rid of cssAction route and use CSS vars for node, tag, att…

…ribute, custom-form, folder accent colors
roadiz · Jul 11, 2024 · 06548e2 · 06548e2
1 parent 624f4ba
commit 06548e2
Show file tree

Hide file tree

Showing 52 changed files with 144 additions and 244 deletions.
diff --git a/lib/RoadizRozierBundle/config/routing.yaml b/lib/RoadizRozierBundle/config/routing.yaml
@@ -214,10 +214,6 @@ webhooksRoutes:
 # CSS to style with main color
 # NOT SECURED ROUTES
 #
-cssMainColor:
-    path : /css/main-color.css
-    controller: Themes\Rozier\RozierApp::cssAction
-
 loginImagePage:
     path: /css/login/image
     controller: Themes\Rozier\Controllers\LoginController::imageAction

diff --git a/lib/Rozier/src/Resources/app/less/actions_menu/actions_menu.less b/lib/Rozier/src/Resources/app/less/actions_menu/actions_menu.less
@@ -120,7 +120,7 @@
                 z-index: 99999;
             }
             &.uk-button-primary:before {
-                background-color: var(--accent-color-darker);
+                background-color: var(--rz-accent-color-darker);
             }
             &.uk-button-success:before {
                 background-color: @success-color;
@@ -168,7 +168,7 @@
 
             &.uk-button-primary {
                 .label-text {
-                    background-color: var(--accent-color-darker);
+                    background-color: var(--rz-accent-color-darker);
                 }
             }
             &.uk-button-success {

diff --git a/lib/Rozier/src/Resources/app/less/buttons/buttons.less b/lib/Rozier/src/Resources/app/less/buttons/buttons.less
@@ -124,18 +124,18 @@
 
         &.uk-button-primary {
             background: var(--main-contrast-color-30);
-            border-color: var(--accent-color-darker);
+            border-color: var(--rz-accent-color-darker);
 
             [class*=uk-icon-]{
-                color: var(--accent-color-darkest);
+                color: var(--rz-accent-color-darkest);
             }
 
             &:hover, &:focus{
                 background: var(--main-contrast-color-30);
-                border-color: var(--accent-color-darkest);
+                border-color: var(--rz-accent-color-darkest);
 
                 [class*=uk-icon-]{
-                    color: var(--accent-color-darkest);
+                    color: var(--rz-accent-color-darkest);
                 }
             }
         }
@@ -311,7 +311,7 @@
 
 .uk-button-primary {
     &:not(:disabled) {
-        background: var(--accent-color-darker);
+        background: var(--rz-accent-color-darker);
         border-color: transparent;
         color: white;
         text-shadow: none;
@@ -321,7 +321,7 @@
         }
 
         &:hover, &:active, &:focus {
-            background: var(--accent-color);
+            background: var(--rz-accent-color);
             border-color: transparent;
             color: white;
         }
@@ -351,9 +351,12 @@
 
     &:hover {
         opacity: 0.8;
-        border-color: var(--accent-color);
+        border-color: var(--rz-accent-color);
         background: #333333;
     }
+    &:focus {
+        border-color: var(--rz-accent-color);
+    }
 }
 
 .uk-button-dropdown{

diff --git a/lib/Rozier/src/Resources/app/less/common.less b/lib/Rozier/src/Resources/app/less/common.less
@@ -105,3 +105,7 @@ background: #CCC;
         display: none;
     }
 }
+
+.uk-datepicker-table a.uk-active {
+    background: var(--rz-accent-color);
+}
diff --git a/lib/Rozier/src/Resources/app/less/documents/documents.less b/lib/Rozier/src/Resources/app/less/documents/documents.less
@@ -95,9 +95,6 @@ table.documents {
         margin: 0 auto;
 
         &:hover {
-            .document-border{
-                background: #C8C8C8;
-            }
             .document-links{
                 bottom:0px;
             }
@@ -122,18 +119,18 @@ table.documents {
         overflow: hidden;
     }
 
-    .document-border{
+    .document-border {
         position: absolute;
         top:0;
         right:0;
         left:0;
         height:4px;
-        background-color:#eaeaea;
+        background: var(--rz-accent-color);
         transition: 0.5s background-color @easeOutExpo;
         z-index:3;
     }
 
-    .document-image{
+    .document-image {
         width:128px;
         height:128px;
         background: #E2E2E2; // not white to see white PNG logotypes

diff --git a/lib/Rozier/src/Resources/app/less/dropdown/dropdown.less b/lib/Rozier/src/Resources/app/less/dropdown/dropdown.less
@@ -161,7 +161,7 @@
     }
     .vertical-nodetype {
         position: absolute;
-        background-color: var(--accent-color);
+        background-color: var(--rz-accent-color);
         width: 26px;
         top: 0;
         bottom: 0;

diff --git a/lib/Rozier/src/Resources/app/less/dropzone/dropzone.less b/lib/Rozier/src/Resources/app/less/dropzone/dropzone.less
@@ -111,7 +111,7 @@
         left:0; right:0; height:4px;
 
         .dz-upload{
-            background-color: var(--accent-color);
+            background-color: var(--rz-accent-color);
         }
     }
     .dz-details{

diff --git a/lib/Rozier/src/Resources/app/less/forms/custom_switch.less b/lib/Rozier/src/Resources/app/less/forms/custom_switch.less
@@ -37,7 +37,7 @@
     }
 
     .bootstrap-switch-handle-on.bootstrap-switch-primary {
-        background-color: var(--accent-color-darker);
+        background-color: var(--rz-accent-color-lighter);
         .border-radius(0, 0, @switch-round, @switch-round);
         color: rgba(255, 255, 255, 0.9);
     }
@@ -51,6 +51,6 @@
     &:focus {
         outline: none;
         box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
-        border-color: var(--accent-color-darker);
+        border-color: var(--rz-accent-color-darker);
     }
 }
diff --git a/lib/Rozier/src/Resources/app/less/forms/forms.less b/lib/Rozier/src/Resources/app/less/forms/forms.less
@@ -94,7 +94,7 @@
         background-color: @grey-form-submit;
         margin:3px;
         &:checked:before {
-            background: var(--accent-color-darker);
+            background: var(--rz-accent-color-darker);
         }
     }
 
@@ -110,7 +110,7 @@
         }
 
         &:checked:before{
-            color: var(--accent-color-darker);
+            color: var(--rz-accent-color-darker);
         }
     }
 

diff --git a/lib/Rozier/src/Resources/app/less/login/login.less b/lib/Rozier/src/Resources/app/less/login/login.less
@@ -114,7 +114,7 @@
     #login-logo {
         width: @login-BarW;
         height: 70px;
-        background-color: var(--accent-color);
+        background-color: var(--rz-accent-color);
         top: 0; left: 0;
         text-align: center;
 

diff --git a/lib/Rozier/src/Resources/app/less/node-types/node-types.less b/lib/Rozier/src/Resources/app/less/node-types/node-types.less
@@ -11,13 +11,14 @@
 /* -------- STYLES -------- */
 
 .uk-table.attributes,
+.uk-table.custom-forms,
 .uk-table.node-types {
     .name {
         position: relative;
         padding-left: 15px;
 
         .color {
-            background-color: var(--data-color);
+            background-color: var(--rz-accent-color);
             display: block;
             position: absolute;
             top: 0;

diff --git a/lib/Rozier/src/Resources/app/less/nodes/edit.less b/lib/Rozier/src/Resources/app/less/nodes/edit.less
@@ -113,8 +113,8 @@
         }
         &.uk-active {
             & > a {
-                background-color: var(--accent-color-darker);
-                border-color: var(--accent-color-darker);
+                background-color: var(--rz-accent-color-darker);
+                border-color: var(--rz-accent-color-darker);
                 box-shadow: none;
             }
         }

diff --git a/lib/Rozier/src/Resources/app/less/nodes/global.less b/lib/Rozier/src/Resources/app/less/nodes/global.less
@@ -200,7 +200,7 @@
             -webkit-font-smoothing: antialiased;
             text-align: center;
             line-height: 12px;
-            color: var(--accent-color-darker);
+            color: var(--rz-accent-color-darker);
         }
     }
 }
@@ -216,8 +216,11 @@
 
     .node-item-color{
         position: absolute;
-        top:0; bottom:0; left:0;
+        top:0;
+        bottom:0;
+        left:0;
         width:4px;
+        background-color: var(--rz-accent-color);
     }
 
     .uk-form .form-col-choice {

diff --git a/lib/Rozier/src/Resources/app/less/panels/user_panel/user_panel.less b/lib/Rozier/src/Resources/app/less/panels/user_panel/user_panel.less
@@ -56,7 +56,7 @@
 
         &.uk-icon-rz-turn-off,
         &.uk-icon-rz-user {
-            border-color: var(--accent-color);
+            border-color: var(--rz-accent-color-lighter);
             opacity: 0.5;
 
             &:hover {
@@ -145,7 +145,7 @@
 }
 
 #company {
-    background-color: var(--accent-color);
+    background-color: var(--rz-accent-color);
     height: @global-header-height;
     text-align: center;
     .box-sizing();

diff --git a/lib/Rozier/src/Resources/app/less/tables/tables.less b/lib/Rozier/src/Resources/app/less/tables/tables.less
@@ -50,7 +50,7 @@
             margin-left:5px;
 
             &.active {
-                color: var(--accent-color-darker);
+                color: var(--rz-accent-color-darker);
             }
         }
     }

diff --git a/lib/Rozier/src/Resources/app/less/vars.less b/lib/Rozier/src/Resources/app/less/vars.less
@@ -157,9 +157,14 @@
     --maincontent-bar-bg: #efefef;
     --maincontent-header-bg: @maincontent-header-bg;
 
-    --accent-color: #00deab;
-    --accent-color-darker: #00c497;
-    --accent-color-darkest: #00ab83;
+    --color-light-mix: 70%;
+    --color-darker-mix: 95%;
+    --color-darkest-mix: 85%;
+
+    --rz-accent-color: #00deab;
+    --rz-accent-color-lighter: color-mix(in srgb, var(--rz-accent-color) var(--color-light-mix), white);
+    --rz-accent-color-darker: color-mix(in srgb, var(--rz-accent-color) var(--color-darker-mix), black);
+    --rz-accent-color-darkest: color-mix(in srgb, var(--rz-accent-color) var(--color-darkest-mix), black);
 }
 
 /**

diff --git a/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less b/lib/Rozier/src/Resources/app/less/widgets/children_nodes_widget.less
@@ -248,6 +248,7 @@
             bottom: 0;
             left: 0;
             width: 4px;
+            background-color: var(--rz-accent-color);
         }
 
         .uk-nestable-panel {
@@ -296,7 +297,7 @@
                 height: @children-node-height - 15px;
                 top: 6px;
                 background-color: #CCCCCC;
-                border: 1px solid #C2C2C2;
+                border: 1px solid var(--rz-accent-color);
                 z-index: 1;
             }
 
@@ -337,7 +338,7 @@
                     font-size: @default-font-size;
                     border-radius: 100%;
                     background-color: var(--contrasted-bg);
-                    border: 1px solid #a0a0a0;
+                    border: 1px solid var(--rz-accent-color);
                     width: @children-node-height / 2;
                     height: @children-node-height / 2;
                     display: inline-block;
@@ -370,7 +371,7 @@
                             color: @item-color;
                             font-size: @default-font-size;
                             border-radius: 100%;
-                            background-color: #a0a0a0;
+                            background-color: var(--rz-accent-color);
                             width: 8px;
                             height: 8px;
                             top: 50%;

diff --git a/lib/Rozier/src/Resources/app/less/widgets/customform_widget.less b/lib/Rozier/src/Resources/app/less/widgets/customform_widget.less
@@ -117,7 +117,7 @@
         position: absolute;
         top:0; bottom:0; left:0;
         width:4px;
-        background: var(--accent-color);
+        background: var(--rz-accent-color);
     }
 
     .custom-form-links{

diff --git a/lib/Rozier/src/Resources/app/less/widgets/documents_widget.less b/lib/Rozier/src/Resources/app/less/widgets/documents_widget.less
@@ -140,12 +140,12 @@
         }
     }
 
-    .document-border{
+    .document-border {
         position: absolute;
         top:0; right:0; left:0;
         z-index: 15;
         height:4px;
-        background: var(--accent-color);
+        background: var(--rz-accent-color);
     }
 
     .document-image{

diff --git a/lib/Rozier/src/Resources/app/less/widgets/drawer_document_item.less b/lib/Rozier/src/Resources/app/less/widgets/drawer_document_item.less
@@ -37,7 +37,7 @@
         right: 0;
         width: 20px;
         text-align: center;
-        background: var(--accent-color);
+        background: var(--rz-accent-color);
         font-size: 11px;
         padding: 2px 0;
         height: 15px;
@@ -53,12 +53,12 @@
         }
     }
 
-    .document-border{
+    .document-border {
         position: absolute;
         top:0; right:0; left:0;
         z-index: 15;
         height:4px;
-        background: var(--accent-color);
+        background: var(--rz-accent-color);
     }
 
     .document-image{

diff --git a/lib/Rozier/src/Resources/app/less/widgets/drawer_item.less b/lib/Rozier/src/Resources/app/less/widgets/drawer_item.less
@@ -77,7 +77,7 @@
         bottom: 0;
         left: 0;
         width: 4px;
-        background: var(--accent-color);
+        background: var(--rz-accent-color);
         z-index: 2;
     }