Skip to content
Snippets Groups Projects
Verified Commit e3fb2b6c authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Initial changes to colors

parent df0667fa
No related branches found
Tags 8.x-1.0-alpha3 8.x-1.x-alpha3
No related merge requests found
......@@ -8,22 +8,21 @@
/*
* Color Palette.
*/
--color-focus: #26a769;
--drupal--brand-blue: #009cde;
--toolbar-color-focus: var(--color-focus, #26a769);
/* Blue variations. */
--color-blue-100: #ccdbff;
--color-blue-600: #003ecc;
--color-blue-700: #002e9a;
--toolbar-color-blue-100: var(--color-blue-100, #ccdbff);
--toolbar-color-blue-600: var(--color-blue-600, #003ecc);
--toolbar-color-blue-700: var(--color-blue-700, #002e9a);
/* Gray variations. */
--color-gray-050: #f3f4f9;
--color-gray-100: #dedfe4;
--color-gray-300: #c1c2c7;
--color-gray-500: #919297;
--color-gray-600: #828388;
--color-gray-700: #75767b;
--color-gray-800: #55565b;
--color-gray-900: #393a3f;
--color-gray-950: #232429;
--toolbar-color-gray-050: var(--color-gray-050, #f3f4f9);
--toolbar-color-gray-100: var(--color-gray-100, #dedfe4);
--toolbar-color-gray-300: var(--color-gray-300, #c1c2c7);
--toolbar-color-gray-500: var(--color-gray-500, #919297);
--toolbar-color-gray-600: var(--color-gray-600, #828388);
--toolbar-color-gray-700: var(--color-gray-700, #75767b);
--toolbar-color-gray-800: var(--color-gray-800, #55565b);
--toolbar-color-gray-900: var(--color-gray-900, #393a3f);
--toolbar-color-gray-950: var(--color-gray-950, #232429);
/**
* Spaces.
*/
......
......@@ -2,22 +2,21 @@
/*
* Color Palette.
*/
--color-focus: #26A769;
--drupal--brand-blue: #009CDE;
--toolbar-color-focus: var(--color-focus, #26A769);
/* Blue variations. */
--color-blue-100: #CCDBFF;
--color-blue-600: #003ECC;
--color-blue-700: #002E9A;
--toolbar-color-blue-100: var(--color-blue-100, #CCDBFF);
--toolbar-color-blue-600: var(--color-blue-600, #003ECC);
--toolbar-color-blue-700: var(--color-blue-700, #002E9A);
/* Gray variations. */
--color-gray-050: #F3F4F9;
--color-gray-100: #DEDFE4;
--color-gray-300: #C1C2C7;
--color-gray-500: #919297;
--color-gray-600: #828388;
--color-gray-700: #75767B;
--color-gray-800: #55565B;
--color-gray-900: #393A3F;
--color-gray-950: #232429;
--toolbar-color-gray-050: var(--color-gray-050, #F3F4F9);
--toolbar-color-gray-100: var(--color-gray-100, #DEDFE4);
--toolbar-color-gray-300: var(--color-gray-300, #C1C2C7);
--toolbar-color-gray-500: var(--color-gray-500, #919297);
--toolbar-color-gray-600: var(--color-gray-600, #828388);
--toolbar-color-gray-700: var(--color-gray-700, #75767B);
--toolbar-color-gray-800: var(--color-gray-800, #55565B);
--toolbar-color-gray-900: var(--color-gray-900, #393A3F);
--toolbar-color-gray-950: var(--color-gray-950, #232429);
/**
* Spaces.
*/
......
......@@ -14,7 +14,7 @@
position: relative;
padding-block: 0.625rem;
padding-inline: 0;
color: var(--color-gray-800);
color: var(--toolbar-color-gray-800);
-webkit-text-decoration: none;
text-decoration: none;
flex-grow: 1;
......@@ -30,7 +30,7 @@
}
.toolbar-link:focus {
outline: 4px solid var(--color-focus);
outline: 4px solid var(--toolbar-color-focus);
outline-offset: -4px;
z-index: 10;
}
......@@ -66,7 +66,7 @@ button.toolbar-link::after {
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--color-gray-500);
background-color: var(--toolbar-color-gray-500);
-webkit-mask-image: url("data:image/svg+xml,%3csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 0.999999L7 7L13 1' stroke='%2375767B' stroke-width='2'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 0.999999L7 7L13 1' stroke='%2375767B' stroke-width='2'/%3e%3c/svg%3e");
content: "";
......@@ -75,7 +75,7 @@ button.toolbar-link::after {
button.toolbar-link:hover::after,
button.toolbar-link:focus::after {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
}
button.toolbar-link + a {
......@@ -124,7 +124,7 @@ html:not(.admin-toolbar-expanded) button.toolbar-link::after {
.toolbar-link--sidebar-toogle:hover,
.toolbar-link--sidebar-toogle:focus {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
.toolbar-link--has-icon {
......@@ -143,7 +143,7 @@ html:not(.admin-toolbar-expanded) button.toolbar-link::after {
width: 1.25rem;
height: 1.25rem;
display: block;
background-color: var(--color-gray-800);
background-color: var(--toolbar-color-gray-800);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
......@@ -159,7 +159,7 @@ html:not(.admin-toolbar-expanded) button.toolbar-link::after {
}
.current > .toolbar-link--has-icon::before {
background-color: var(--color-blue-600);
background-color: var(--toolbar-color-blue-600);
}
.toolbar-link--appearance::before {
......
......@@ -7,7 +7,7 @@
position: relative;
padding-block: 10px;
padding-inline: 0;
color: var(--color-gray-800);
color: var(--toolbar-color-gray-800);
text-decoration: none;
flex-grow: 1;
font-weight: 700;
......@@ -21,7 +21,7 @@
}
&:focus {
outline: 4px solid var(--color-focus);
outline: 4px solid var(--toolbar-color-focus);
outline-offset: -4px;
z-index: 10;
}
......@@ -52,7 +52,7 @@ button.toolbar-link {
mask-size: var(--space-s);
mask-repeat: no-repeat;
mask-position: center center;
background-color: var(--color-gray-500);
background-color: var(--toolbar-color-gray-500);
mask-image: url(../../assets/icons/chevron-down.svg);
content: "";
margin-inline-start: auto;
......@@ -60,7 +60,7 @@ button.toolbar-link {
&:hover::after,
&:focus::after {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
}
& + a {
......@@ -107,7 +107,7 @@ html:not(.admin-toolbar-expanded) {
&:hover,
&:focus {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
}
......@@ -126,7 +126,7 @@ html:not(.admin-toolbar-expanded) {
width: 20px;
height: 20px;
display: block;
background-color: var(--color-gray-800);
background-color: var(--toolbar-color-gray-800);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
......@@ -139,7 +139,7 @@ html:not(.admin-toolbar-expanded) {
}
.current > .toolbar-link--has-icon::before {
background-color: var(--color-blue-600);
background-color: var(--toolbar-color-blue-600);
}
.toolbar-link--appearance::before {
......
......@@ -63,11 +63,11 @@
}
.toolbar-menu__item.toolbar-menu__item--expanded > .toolbar-link {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
.toolbar-menu__item.current > .toolbar-link {
color: var(--color-blue-600);
color: var(--toolbar-color-blue-600);
}
.toolbar-menu__item:not(.toolbar-menu__item--expanded) > .toolbar-menu__submenu,
......@@ -84,25 +84,25 @@
}
.toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link {
color: var(--color-gray-950);
color: var(--toolbar-color-gray-950);
}
.toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link::before {
background-color: var(--color-gray-950);
background-color: var(--toolbar-color-gray-950);
}
.toolbar-menu__item.toolbar-menu__item--expanded:not(.current) > .toolbar-link:hover {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
.toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link:hover,
.toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link:focus {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
.toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon:hover::before,
.toolbar-menu__item:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon:focus::before {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
}
.toolbar-menu__item.toolbar-menu__item--has-dropdown.toolbar-menu__item--expanded {
......@@ -117,7 +117,7 @@
/* Duplicated level-1 toolbar-link to use as title in the flyout. */
.toolbar-menu__item--to-title {
color: var(--color-gray-800);
color: var(--toolbar-color-gray-800);
justify-content: flex-start;
align-items: center;
}
......@@ -146,7 +146,7 @@
}
.toolbar-menu__item--level-1.toolbar-menu__item--expanded {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
.toolbar-menu__item--level-1 > .toolbar-link {
......@@ -156,11 +156,11 @@
.toolbar-menu__item--level-1 > .toolbar-link:hover,
.toolbar-menu__item--level-1 > .toolbar-link:focus {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
.toolbar-menu__item--level-1 > .toolbar-link:hover {
outline: 4px solid var(--color-blue-100);
outline: 4px solid var(--toolbar-color-blue-100);
}
.toolbar-menu__item--level-1 > .toolbar-link:focus {
......@@ -174,7 +174,7 @@
.toolbar-menu__item--level-1.toolbar-menu__item--expanded,
.toolbar-menu__item--level-1.current {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
.toolbar-menu__item--level-1.toolbar-menu__item--expanded {
......@@ -202,13 +202,13 @@
left: -0.6875rem;
top: 0.625rem;
border-radius: 50%;
background-color: var(--color-blue-600);
background-color: var(--toolbar-color-blue-600);
z-index: 1;
}
.toolbar-menu__item--level-2:not(.current) > .toolbar-link:hover::before,
.toolbar-menu__item--level-3:not(.current) > .toolbar-link:hover::before {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
inline-size: 2px;
}
......@@ -221,7 +221,7 @@
position: absolute;
left: -0.5rem;
top: 0;
background-color: var(--color-gray-300);
background-color: var(--toolbar-color-gray-300);
}
.toolbar-menu__item--level-2.toolbar-menu__item--expanded > .toolbar-menu::before {
......@@ -234,7 +234,7 @@
.toolbar-menu__item--level-2 .toolbar-link:hover {
/* umami override */
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
z-index: 9;
}
......@@ -294,7 +294,7 @@ html:not(.admin-toolbar-expanded) .cloned-flyout {
top: 0;
left: calc(100% + 0.5rem);
width: 15.5rem;
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
border-radius: var(--space-xs);
padding-inline-end: var(--space-xs);
box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 0.14);
......@@ -317,7 +317,7 @@ html:not(.admin-toolbar-expanded) .cloned-flyout .toolbar-menu__arrow-ref::befor
content: "";
width: 0.875rem;
height: 0.875rem;
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
transform: rotate(45deg);
z-index: 20;
}
......
......@@ -53,11 +53,11 @@
flex-wrap: nowrap;
&.toolbar-menu__item--expanded > .toolbar-link {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
&.current > .toolbar-link {
color: var(--color-blue-600);
color: var(--toolbar-color-blue-600);
}
&:not(.toolbar-menu__item--expanded) > .toolbar-menu__submenu,
......@@ -74,28 +74,28 @@
}
&.toolbar-menu__item--expanded:not(.current) > .toolbar-link {
color: var(--color-gray-950);
color: var(--toolbar-color-gray-950);
&::before {
background-color: var(--color-gray-950);
background-color: var(--toolbar-color-gray-950);
}
}
&.toolbar-menu__item--expanded:not(.current) > .toolbar-link:hover {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
&:not(.toolbar-menu__item--to-title) .toolbar-link {
&:hover,
&:focus {
color: var(--color-blue-700);
color: var(--toolbar-color-blue-700);
}
}
&:not(.toolbar-menu__item--to-title) .toolbar-link--has-icon {
&:hover::before,
&:focus::before {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
}
}
......@@ -110,7 +110,7 @@
/* Duplicated level-1 toolbar-link to use as title in the flyout. */
.toolbar-menu__item--to-title {
color: var(--color-gray-800);
color: var(--toolbar-color-gray-800);
justify-content: flex-start;
align-items: center;
......@@ -138,7 +138,7 @@
white-space: nowrap;
&.toolbar-menu__item--expanded {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
& > .toolbar-link {
......@@ -147,11 +147,11 @@
&:hover,
&:focus {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
&:hover {
outline: 4px solid var(--color-blue-100);
outline: 4px solid var(--toolbar-color-blue-100);
}
&:focus {
......@@ -166,7 +166,7 @@
&.toolbar-menu__item--expanded,
&.current {
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
}
&.toolbar-menu__item--expanded {
......@@ -192,12 +192,12 @@
left: -11px;
top: 10px;
border-radius: 50%;
background-color: var(--color-blue-600);
background-color: var(--toolbar-color-blue-600);
z-index: 1;
}
&:not(.current) > .toolbar-link:hover::before {
background-color: var(--color-blue-700);
background-color: var(--toolbar-color-blue-700);
inline-size: 2px;
}
}
......@@ -213,7 +213,7 @@
position: absolute;
left: -8px;
top: 0;
background-color: var(--color-gray-300);
background-color: var(--toolbar-color-gray-300);
}
}
......@@ -227,7 +227,7 @@
&:hover {
/* umami override */
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
z-index: 9;
}
}
......@@ -287,7 +287,7 @@ html:not(.admin-toolbar-expanded) {
top: 0;
left: calc(100% + 8px);
width: 248px;
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
border-radius: var(--space-xs);
padding-inline-end: var(--space-xs);
box-shadow: 0px 0px 56px 0px rgba(0,0,0,0.14);
......@@ -307,7 +307,7 @@ html:not(.admin-toolbar-expanded) {
content: '';
width: 14px;
height: 14px;
background-color: var(--color-gray-050);
background-color: var(--toolbar-color-gray-050);
transform: rotate(45deg);
z-index: 20;
}
......
......@@ -15,7 +15,7 @@
position: absolute;
top: var(--space-xs);
left: 100%;
background-color: var(--color-gray-950);
background-color: var(--toolbar-color-gray-950);
color: white;
padding: 0.25rem var(--space-xs);
border-radius: var(--space-xs);
......
......@@ -8,7 +8,7 @@
position: absolute;
top: var(--space-xs);
left: 100%;
background-color: var(--color-gray-950);
background-color: var(--toolbar-color-gray-950);
color: white;
padding: 0.25rem var(--space-xs);
border-radius: var(--space-xs);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment