IBX-7494: [Focus mode] As a User, I want to see Content Tree in dark …

…theme (#1105) * IBX-7494: [Focus mode] As a User, I want to see Content Tree in dark theme * add variables to all inputs * added dropdown styles * fixed checkboxes colors * revert config changes for tests * change focus style * set dark theme for focus mode * fix focus shadow on light theme * after qa * changed search colors
ibexa · Jan 17, 2024 · 5425606 · 5425606
1 parent ee11772
commit 5425606
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 51 deletions.
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
@@ -21,7 +21,7 @@
         border-color: transparent;
 
         .ibexa-icon {
-            fill: $ibexa-color-primary;
+            fill: var(--ibexa-primary-color, #{$ibexa-color-primary});
         }
     }
 

diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -22,7 +22,7 @@
     }
 
     &__selection-info {
-        color: $ibexa-color-dark;
+        color: var(--ibexa-text-color, #{$ibexa-color-dark});
         line-height: calculateRem(21px);
         height: calculateRem(48px);
         padding: 0 calculateRem(36px) 0 calculateRem(16px);
@@ -44,7 +44,7 @@
             top: 50%;
             width: calculateRem(10px);
             height: calculateRem(1px);
-            background: $ibexa-color-dark;
+            background: var(--ibexa-text-color, #{$ibexa-color-dark});
             transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
         }
 
@@ -170,9 +170,9 @@
 
     &__items {
         width: 100%;
-        background: $ibexa-color-white;
-        border: calculateRem(1px) solid $ibexa-color-light;
-        color: $ibexa-color-dark;
+        background: var(--ibexa-dropdown-items-bg-color, #{$ibexa-color-white});
+        border: calculateRem(1px) solid var(--ibexa-dropdown-items-border-color, #{$ibexa-color-light});
+        color: var(--ibexa-text-color, #{$ibexa-color-dark});
         border-radius: $ibexa-border-radius;
         display: flex;
         flex-direction: column;
@@ -273,11 +273,12 @@
         }
 
         &:hover {
-            background-color: $ibexa-color-light-300;
+            color: var(--ibexa-dropdown-items-item-hover-text-color, #{$ibexa-color-dark});
+            background-color: var(--ibexa-dropdown-items-item-hover-bg-color, #{$ibexa-color-light-300});
         }
 
         &[disabled] {
-            color: $ibexa-color-dark-300;
+            color: var(--ibexa-dropdown-items-item-disabled-color, #{$ibexa-color-dark-300});
 
             &:hover {
                 cursor: not-allowed;
@@ -294,7 +295,7 @@
                 bottom: 0;
                 left: 0;
                 width: 100%;
-                border-bottom: calculateRem(1px) solid $ibexa-color-light;
+                border-bottom: calculateRem(1px) solid var(--ibexa-dropdown-items-separator-color, #{$ibexa-color-light});
             }
         }
     }
@@ -314,7 +315,7 @@
     }
 
     &__separator {
-        background-color: $ibexa-color-light-600;
+        background-color: var(--ibexa-dropdown-items-separator-color, #{$ibexa-color-light-600});
     }
 
     &__items-filter {

diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -19,46 +19,44 @@
 }
 
 .ibexa-input {
-    --ibexa-input-primary-color: var(--ibexa-primary-color, #{$ibexa-color-primary});
-
     outline: none;
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
-    border: calculateRem(1px) solid $ibexa-color-dark-300;
+    border: calculateRem(1px) solid var(--ibexa-input-border-color, #{$ibexa-color-dark-300});
 
     &:hover,
     &--hovered {
-        border-color: var(--ibexa-input-primary-color);
+        border-color: var(--ibexa-input-hover-border-color, #{$ibexa-color-primary});
     }
 
     &:focus,
     &.ibexa-input--text.form-control:focus,
     &.ibexa-input--date.form-control:focus {
-        border-color: var(--ibexa-input-primary-color);
-        box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color);
+        border-color: var(--ibexa-input-focus-border-color, #{$ibexa-color-primary});
+        box-shadow: 0 0 0 calculateRem(4px) var(--ibexa-input-focus-shadow-color, #{rgba($ibexa-color-primary, 0.25)});
     }
 
     &:disabled {
         cursor: not-allowed;
-        border-color: $ibexa-color-dark-200;
+        border-color: var(--ibexa-input-disabled-border-color, #{$ibexa-color-dark-200});
     }
 
     &--text,
     &--textarea,
     &--date {
         font-size: $ibexa-text-font-size-medium;
-        color: $ibexa-color-dark;
+        color: var(--ibexa-input-text-color, var(--ibexa-text-color, #{$ibexa-color-dark}));
         line-height: calculateRem(21px);
-        border: calculateRem(1px) solid $ibexa-color-dark-200;
+        border: calculateRem(1px) solid var(--ibexa-input-border-color, #{$ibexa-color-dark-200});
         border-radius: $ibexa-border-radius;
         position: relative;
 
         &:focus,
         &.form-control:focus {
-            color: $ibexa-color-dark;
+            color: var(--ibexa-input-text-color, var(--ibexa-text-color, #{$ibexa-color-dark}));
         }
 
         &:hover:not(:disabled) {
-            border-color: var(--ibexa-input-primary-color);
+            border-color: var(--ibexa-input-hover-border-color, #{$ibexa-color-primary});
         }
 
         &:active:not(:disabled) {
@@ -67,19 +65,19 @@
 
         &:disabled,
         &.form-control:disabled {
-            color: $ibexa-color-dark-300;
-            background-color: $ibexa-color-light-300;
+            color: var(--ibexa-input-disabled-text-color, #{$ibexa-color-dark-300});
+            background-color: var(--ibexa-input-disabled-bg-color, #{$ibexa-color-light-300});
         }
 
         &.form-control.is-invalid {
-            color: $ibexa-color-danger;
+            color: var(--ibexa-input-invalid-text-color, #{$ibexa-color-danger});
             background-image: none;
-            border-color: $ibexa-color-danger;
-            background-color: $ibexa-color-danger-100;
+            border-color: var(--ibexa-input-invalid-border-color, #{$ibexa-color-danger});
+            background-color: var(--ibexa-input-invalid-bg-color, #{$ibexa-color-danger-100});
         }
 
         &::placeholder {
-            color: $ibexa-color-dark-400;
+            color: var(--ibexa-input-placeholder-color, #{$ibexa-color-dark-400});
             font-size: $ibexa-text-font-size-medium;
             line-height: calculateRem(21px);
         }
@@ -118,7 +116,7 @@
         position: relative;
         display: inline-block;
         cursor: pointer;
-        background-color: $ibexa-color-white;
+        background-color: var(--ibexa-input-bg-color, #{$ibexa-color-white});
 
         &:disabled {
             &.form-check-input {
@@ -153,30 +151,35 @@
         }
 
         &:disabled {
-            background-color: $ibexa-color-light;
+            background-color: var(--ibexa-input-disabled-bg-color, #{$ibexa-color-light});
+            border-color: var(--ibexa-input-disabled-border-color, #{$ibexa-color-dark-200});
         }
 
         &:checked {
-            border-color: var(--ibexa-input-primary-color);
-            background-color: var(--ibexa-input-primary-color);
-
-            &:disabled {
-                border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
-                background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
-            }
+            border-color: var(--ibexa-input-checked-bg-color, #{$ibexa-color-primary});
+            background-color: var(--ibexa-input-checked-bg-color, #{$ibexa-color-primary});
 
             &::after {
                 border-color: $ibexa-color-white;
             }
+
+            &:disabled {
+                border-color: var(--ibexa-input-checked-disabled-bg-color, #{$ibexa-color-primary-300});
+                background-color: var(--ibexa-input-checked-disabled-bg-color, #{$ibexa-color-primary-300});
+
+                &::after {
+                    border-color: var(--ibexa-input-checked-disabled-text-color, #{$ibexa-color-white});
+                }
+            }
         }
 
         &:indeterminate {
-            border-color: var(--ibexa-input-primary-color);
-            background-color: var(--ibexa-input-primary-color);
+            border-color: var(--ibexa-input-checked-bg-color, #{$ibexa-color-primary});
+            background-color: var(--ibexa-input-checked-bg-color, #{$ibexa-color-primary});
 
             &:disabled {
-                border-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
-                background-color: var(--ibexa-input-checkbox-disabled-primary-color, #{$ibexa-color-primary-300});
+                border-color: var(--ibexa-input-checked-disabled-border-color, #{$ibexa-color-primary-300});
+                background-color: var(--ibexa-input-checked-disabled-bg-color, #{$ibexa-color-primary-300});
             }
 
             &::after {
@@ -196,12 +199,12 @@
         margin-bottom: calculateRem(2px);
 
         &:checked {
-            border-color: var(--ibexa-input-primary-color);
-            box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-input-primary-color);
+            border-color: var(--ibexa-input-checked-border-color, #{$ibexa-color-primary});
+            box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-input-checked-border-color, #{$ibexa-color-primary});
 
             &:disabled {
-                border-color: var(--ibexa-primary-disabled-color);
-                box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-primary-disabled-color);
+                border-color: var(--ibexa-input-checked-disabled-color, #{$ibexa-color-primary});
+                box-shadow: inset 0 0 0 calculateRem(4px) var(--ibexa-input-checked-disabled-color, #{$ibexa-color-primary});
             }
 
             &:focus {
@@ -215,7 +218,7 @@
                     height: calculateRem(16px);
                     border-radius: calculateRem(8px);
                     background: transparent;
-                    box-shadow: 0 0 calculateRem(3px) 0 var(--ibexa-input-shadow-box-primary-color);
+                    box-shadow: 0 0 0 calculateRem(4px) var(--ibexa-input-focus-shadow-color, #{rgba($ibexa-color-primary, 0.25)});
                 }
             }
         }
@@ -400,7 +403,7 @@
         transform: translate(0, -50%);
         height: calculateRem(24px);
         padding: 0;
-        fill: $ibexa-color-dark;
+        fill: var(--ibexa-btn-icon-fill-color, #{$ibexa-color-dark});
         z-index: 1;
     }
 
@@ -446,7 +449,7 @@
 
     &:hover {
         .ibexa-input {
-            border-color: var(--ibexa-input-primary-color);
+            border-color: var(--ibexa-input-hover-border-color, #{$ibexa-color-primary});
         }
     }
 }

diff --git a/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss b/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss
@@ -550,9 +550,9 @@
     font-weight: 600;
 }
 
-@mixin drag-item-placeholder {
+@mixin drag-item-placeholder($border-color: $ibexa-color-info) {
     display: flex;
-    border: calculateRem(2px) solid $ibexa-color-info;
+    border: calculateRem(2px) solid $border-color;
     border-radius: calculateRem(8px);
     margin-top: calculateRem(8px);
 

diff --git a/src/bundle/Resources/views/themes/admin/content/location_view.html.twig b/src/bundle/Resources/views/themes/admin/content/location_view.html.twig
@@ -19,7 +19,7 @@
     {% form_theme form_content_create '@ibexadesign/ui/form_fields.html.twig' %}
 {% endif %}
 
-{% block body_class %}ibexa-content-view{% endblock %}
+{% block body_class %}ibexa-content-view ibexa-theme {% if ibexa_is_focus_mode_on() %}ibexa-theme--dark{% endif %}{% endblock %}
 
 {% block content_tree %}
     {% set container_width_cookie = 'ibexa-tb_ibexa-content-tree_%d_container-width'|format(ibexa_admin_ui_config.user.user.id) %}

diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -116,7 +116,7 @@
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/chart-js/dist/chart.umd.js') }}"></script>
         <script src="{{ asset('bundles/ibexaadminuiassets/vendors/js-md5/build/md5.min.js') }}"></script>
     </head>
-    <body class="{% block body_class %}{% endblock %}">
+    <body class="{% block body_class %}ibexa-theme {% if ibexa_is_focus_mode_on() %}ibexa-theme--dark{% endif %}{% endblock %}">
         <div id="react-udw" data-filter-subtree-udw-config="{{ ibexa_udw_config('single_container', {}) }}"></div>
 
         {% block header_row %}