Skip to content

Mage-OS admin rebrand #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Vinai merged 7 commits into from
Oct 7, 2023
Merged

Mage-OS admin rebrand #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a0c9693
Mage-OS admin rebrand
rhoerr Sep 12, 2023
2e73a13
Mage-OS admin rebrand refinements
rhoerr Sep 23, 2023
2905ce6
Adjust login wrapper
rhoerr Sep 23, 2023
61b7106
Adjust login wrapper
rhoerr Sep 23, 2023
b65b2bb
Codesniffer fixes, and adjustments
rhoerr Sep 24, 2023
a7cea6b
Fixed static content deploy error
rhoerr Sep 25, 2023
4b0425d
Changed admin menu section-group-title color
rhoerr Sep 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions app/design/adminhtml/Magento/backend/Magento_AdminNotification/web/css/source/_module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
@message-system__border-color: @color-gray82;
@message-system__border-width: .1rem;
@message-system__color: @color-gray20;
@message-system-short__padding-vertical: 1.5rem;
@message-system-short-wrapper__height: 5rem;
@message-system-short__padding-vertical: 1rem;
@message-system-short-wrapper__height: 4rem;

// Triangle marker
@message-system-triangle__height: .5rem;
Expand All @@ -26,8 +26,7 @@
.message-system-inner {
&:extend(.abs-clearfix all);
background: @message-system__background-color;
border: solid @message-system__border-color;
border-width: 0 @message-system__border-width @message-system__border-width;
box-shadow: 0 2px 10px @border__color;
position: relative;

.message-error {
Expand Down
6 changes: 3 additions & 3 deletions app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_footer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@
// _____________________________________________

@footer__background-color: @body__background-color;
@footer__border-color: @color-light-gray;
@footer__border-color: @color-mageos-stroke;
@footer__border-width: .1rem;
@footer__color: @color-very-dark-gray1;
@footer-version__color: @color-gray40;
@footer-copyright__color: @color-gray40;

@footer-link__color: @color-light-phoenix;
@footer-link__color: @color-phoenix;
@footer-link__text-decoration: underline;

@footer-link__hover__color: @color-light-phoenix;
@footer-link__hover__color: @color-phoenix-dark;
@footer-link__hover__text-decoration: underline;

.page-footer {
Expand Down
16 changes: 8 additions & 8 deletions app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

@menu-wrapper__z-index: @menu__z-index - 1;

@menu__background-color: @color-very-dark-grayish-orange;
@menu__background-color: @color-blue-dark;

@menu-logo__padding-bottom: 1.7rem;
@menu-logo__outer-size: @menu-logo__padding-top + @menu-logo-img__height + @menu-logo__padding-bottom;
Expand All @@ -23,17 +23,17 @@

@menu-item__color: @color-gray65-lighten;
@menu-item__font-size: 1rem;
@menu-item__hover__background-color: @color-brownie-almost;
@menu-item__active__background-color: darken(@menu-item__hover__background-color, 3%);
@menu-item__active__background-color: lighten(@menu__background-color, 7%);
@menu-item__active__color: @color-ivory;
@menu-item__hover__background-color: lighten(@menu__background-color, 12%);
@menu-item-icon__height: 2.2rem;

@menu-line-before__background-color: @color-brownie-vanilla;
@menu-line-before__height: 1px;

@menu-overlay__z-index: @menu__z-index - 3;

@submenu__background-color: @menu-item__active__background-color;
@submenu__background-color: @menu-item__hover__background-color;
@submenu__padding-horizontal: 1.5rem;
@submenu__padding-vertical: 2rem;
@submenu__z-index: @menu__z-index - 2;
Expand All @@ -44,8 +44,8 @@
@submenu-link__color: @color-very-light-gray;
@submenu-link__padding-vertical: 1.25rem;
@submenu-link__active__background-color: darken(@submenu-link__focus__background-color, 5%);
@submenu-link__focus__background-color: @color-black4-almost;
@submenu-section-label__color: @color-gray65-almost;
@submenu-link__focus__background-color: lighten(@menu__background-color, 17%);
@submenu-section-label__color: @color-blue-ice;
@submenu-heading-group__indent-bottom: 3.8rem;
@submenu-action-close__indent-right: 2.8rem;

Expand Down Expand Up @@ -233,13 +233,13 @@

&._active {
> a {
background-color: @menu-item__hover__background-color;
background-color: @menu-item__active__background-color;
}
}

&:hover {
> a {
background-color: @menu-item__active__background-color;
background-color: @menu-item__hover__background-color;
}
}

Expand Down
1 change: 0 additions & 1 deletion ...gn/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_actions-bar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
&:extend(.abs-clearfix all);
background: @page-main-actions__background-color;
border-bottom: 1px solid @page-main-actions__border-color;
border-top: 1px solid @page-main-actions__border-color;
padding: @page-main-actions__padding;
}

Expand Down
4 changes: 2 additions & 2 deletions ...esign/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/main/_page-nav.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@
// Variables
// _____________________________________________

@admin__page-nav__background-color: @color-white-fog2;
@admin__page-nav__background-color: @color-mageos-offwhite;
@admin__page-nav__border-color: @border__color;

@admin__page-nav-title__color: @color-very-dark-gray-black;
@admin__page-nav-title__border-color: @border__color;
@admin__page-nav-title__collapsible__background-color: @page-wrapper__background-color;
@admin__page-nav-title__collapsible__active__background-color: @color-white-fog2;
@admin__page-nav-title__collapsible__active__background-color: @color-mageos-offwhite;
@admin__page-nav-title__font-size: @font-size__base;

@admin__page-nav-item__border-color: @border__color;
Expand Down
5 changes: 5 additions & 0 deletions ...inhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_cache-management.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,8 @@
margin: 5px 0 6px;
}
}

.adminhtml-cache-index .page-actions .page-actions-buttons button.primary {
background: @color-tomato-brick;
border-color: @color-tomato-brick;
}
7 changes: 4 additions & 3 deletions app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/pages/_login.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@login-box__max-width: 45rem;
@login-box__min-height: 30rem;
@login-box__shadow: 0 5px 30px 0 rgba(0, 0, 0, 1);
@login-page__background-color: @color-very-dark-grayish-orange;
@login-page__background-color: @color-blue-dark;

//
// Admin user auth pages layout
Expand All @@ -38,14 +38,15 @@
.lib-vendor-prefix-flex-shrink(0);
background-color: @login-box__background-color;
border: @login-box__border;
border-radius: 16px;
box-shadow: @login-box__shadow;
display: block;
float: none;
margin: auto;
max-width: @login-box__max-width;
min-height: @login-box__min-height;
min-width: 0;
padding: 40px 80px 50px;
padding: 40px 75px 50px;
position: relative;
width: 100%;
z-index: 1;
Expand All @@ -66,7 +67,7 @@
.admin__legend {
color: @color-phoenix;
font-size: 2.6rem;
font-weight: @font-weight__light;
font-weight: @font-weight__regular;
line-height: @line-height__s;
margin: -1rem 0 2.5rem;
}
Expand Down
6 changes: 3 additions & 3 deletions app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/_data-grid.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,15 +315,15 @@ body._in-resize {

th {
background-color: @data-grid-th__background-color;
border: @data-grid-cell__border-width @data-grid-th__border-style @data-grid-th__border-color;
border-left-color: transparent;
border-bottom: 2px @data-grid-th__border-style @data-grid-th__border-color;
border-right: 1px dashed @color-mageos-stroke;
color: @data-grid-th__color;
font-weight: @font-weight__semibold;
padding: 0;
text-align: left;

&:first-child {
border-left-color: @data-grid-th__border-color;
border-left: 1px dashed @color-mageos-stroke;
}

&._dragover-left {
Expand Down
2 changes: 1 addition & 1 deletion ...ckend/Magento_Ui/web/css/source/module/data-grid/data-grid-header/_data-grid-filters.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@
.admin__form-field {
display: block;
float: none;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
padding-left: 0;
padding-right: 0;
width: auto;
Expand Down
1 change: 0 additions & 1 deletion app/design/adminhtml/Magento/backend/web/css/source/_actions.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,6 @@ button {
background-color: @button-primary__background-color;
border-color: @button-primary__background-color;
color: @button-primary__color;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);

&:hover,
&:active,
Expand Down
1 change: 0 additions & 1 deletion app/design/adminhtml/Magento/backend/web/css/source/_structure.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ body {

// ToDo UI: should be moved to messages
.notices-wrapper {
margin: 0 3rem;
min-height: 5rem;
.messages {
margin-bottom: 0;
Expand Down
6 changes: 3 additions & 3 deletions app/design/adminhtml/Magento/backend/web/css/source/_tabs.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@

// Default tab
.ui-state-default {
background: @color-gray89;
border: .1rem solid @color-gray68;
background: @color-mageos-offwhite;
border: .1rem solid @color-mageos-stroke;
float: left;
letter-spacing: .0183em; // For tab width fixing depending on normal-semibold font-weight
list-style: none;
Expand All @@ -26,7 +26,7 @@

// Hovered tab
.ui-state-hover {
background: @color-gray84;
background: @color-blue-clear-sky;
}

// Active tab
Expand Down
2 changes: 1 addition & 1 deletion app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-dropdown.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@
}

&:before {
background: @color-gray89;
background: @color-mageos-offwhite;
border-left: 1px solid @action__border-color;
bottom: 0;
content: '';
Expand Down
3 changes: 2 additions & 1 deletion app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-multiselect.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@

.admin__action-multiselect {
border: 1px solid @action__border-color;
border-radius: @field-control__border-radius;
cursor: pointer;
display: block;
min-height: @action__height;
Expand Down Expand Up @@ -156,7 +157,7 @@
}

.admin__action-multiselect-text {
padding: .6rem 1rem;
padding: .65rem 1rem;
}

.action-menu {
Expand Down
2 changes: 2 additions & 0 deletions app/design/adminhtml/Magento/backend/web/css/source/actions/_actions-select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
.lib-text-overflow-ellipsis();

background-color: @color-white;
border-radius: @field-control__border-radius;
font-weight: @font-weight__regular;
text-align: left;

Expand All @@ -48,6 +49,7 @@
&:before {
background-color: @button__background-color;
border: @button__border-size @button__border-style @_action-select__border-color;
border-radius: 0 @field-control__border-radius @field-control__border-radius 0;
bottom: 0;
content: '';
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion app/design/adminhtml/Magento/backend/web/css/source/forms/_controls.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
background-position+: ~'calc(100% - 12px)' -34px;
background-size+: auto;

background-image+: linear-gradient(@color-gray89, @color-gray89);
background-image+: linear-gradient(@color-mageos-offwhite, @color-mageos-offwhite);
background-position+: 100%;
background-size+: @field-control__height 100%;

Expand Down
10 changes: 5 additions & 5 deletions app/design/adminhtml/Magento/backend/web/css/source/variables/_actions.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
// Variables -> Actions
// _____________________________________________

@action__border-color: @color-gray68;
@action__border-color: @color-mageos-stroke;
@action__font-size: @font-size__base;
@action__line-height: @line-height__base;

Expand All @@ -34,7 +34,7 @@
// ---------------------------------------------

// Base button
@button__background-color: @color-gray89;
@button__background-color: @color-mageos-offwhite;
@button__border-color: @action__border-color;
@button__border-size: 1px;
@button__border-style: solid;
Expand All @@ -57,10 +57,10 @@
@button__large__padding-vertical: .7em;

// Primary button
@button-primary__background-color: @primary__color;
@button-primary__background-color: lighten(@color-green-dark, 5%);
@button-primary__color: @color-white;
@button-primary__hover__background-color: @color-phoenix-brown-almost;
@button-primary__hover__border-color: @color-phoenix-brown;
@button-primary__hover__background-color: @color-green-dark;
@button-primary__hover__border-color: @color-green-dark;

// Secondary button
@button-secondary__background-color: @color-brownie;
Expand Down
31 changes: 24 additions & 7 deletions app/design/adminhtml/Magento/backend/web/css/source/variables/_colors.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,26 @@
// Variables -> Colors
// _____________________________________________

@color-mageos-orange: #f37121;
@color-mageos-orange-dark: #f56a14;
@color-mageos-orange-light: #ff9234;
@color-mageos-orange-bright: #ffe49d;
@color-mageos-purple: #8716e0;
@color-mageos-purple-light: #cb5bff;
@color-mageos-rose: #f9425a;
@color-mageos-dark: #1a202c;
@color-mageos-gray: #4a5568;
@color-mageos-gray-light: #7d8592;
@color-mageos-stroke: #dde0e5;
@color-mageos-offwhite: #f7fafc;

@color-brown-dark: #4a3f39;
@color-brown-darker: #41362f;
@color-very-dark-gray-black: #303030;
@color-very-dark-gray-black2: #35302c;
@color-very-dark-grayish-orange: #373330;
@color-black4-almost: #403934;
@color-very-dark-gray2: #555;
@color-very-dark-gray2: @color-mageos-gray;
@color-very-dark-brownie: #5b5652;
@color-brownie: #514943;
@color-brownie-almost: #524d49;
Expand All @@ -33,13 +46,14 @@
@color-gray75: #bfbfbf;
@color-lighter-grayish: #cacaca;
@color-lighter-grayish-almost: #c3bbb1;
@color-light-gray: #ddd;
@color-light-gray: @color-mageos-offwhite;
@color-light-gray0: #d0d0d0;
@color-gray83: #d4d4d4;
@color-gray84: #d6d6d6;
@color-gray85: #d9d9d9;
@color-gray89: darken(@color-mageos-offwhite, 5%);
@color-gray-brown: #dad1c8;
@color-lighter-gray: #e9e9e9;
@color-lighter-gray: darken(@color-mageos-offwhite, 5%);
@color-gray98: #fafafa;
@color-very-light-gray: #fcfcfc;
@color-ivory: #f7f3eb;
Expand All @@ -48,17 +62,20 @@
@color-lazy-sun: #fffbbb;
@color-lazy-sunny: #fff1ad;

@color-blue-dark: #123;
@color-blue-pure: #007bdb;
@color-blue-dodger: #008bdb;
@color-blue-clear-sky: #e0f6fe;
@color-blue-clear-sky: @color-lighter-gray;
@color-blue-ice: saturate(lighten(@color-blue-dark, 74%), 25%);

@color-green-dark: #264;
@color-green-apple: #79a22e;
@color-apricot: #ee7d7d;

@color-pink: #fcc;
@color-pink-light: #f5d6c7;
@color-phoenix: #eb5202;
@color-light-phoenix: #ef672f;
@color-phoenix: @color-mageos-orange;
@color-light-phoenix: @color-mageos-orange-bright;
@color-phoenix-brown: #b84002;
@color-phoenix-brown-almost: #ba4000;
@color-phoenix-brownie: #ae3d01;
Expand All @@ -74,4 +91,4 @@
@primary__color: @color-phoenix;
@success__color: @color-green-apple;
@text__color: @color-brown-darker;
@border__color: @color-gray89;
@border__color: @color-mageos-stroke;
4 changes: 2 additions & 2 deletions app/design/adminhtml/Magento/backend/web/css/source/variables/_components.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@
// Actions Bar
// ---------------------------------------------

@page-main-actions__background-color: @color-white-fog;
@page-main-actions__border-color: @color-gray89;
@page-main-actions__background-color: @color-mageos-offwhite;
@page-main-actions__border-color: @color-mageos-stroke;
@page-main-actions__padding: @content__indent / 2;
Loading