change(colors): introduced css variables for primary colors #247

- Css variables for main colors such as themes, text, border and background colors. This way we can override them from a designated class such as content-box which colors the section given it's theme color
eea · Oct 5, 2022 · ac80825 · ac80825
2 parents 3d1b844 + 1f5262a
commit ac80825
Show file tree

Hide file tree

Showing 16 changed files with 85 additions and 45 deletions.
diff --git a/theme/themes/eea/collections/breadcrumb.variables b/theme/themes/eea/collections/breadcrumb.variables
@@ -46,5 +46,5 @@
 /*-------------------
        States
 --------------------*/
-@activeColor: @tertiaryColor;
+@activeColor: @textColor;
 @activeFontWeight: @normal;
diff --git a/theme/themes/eea/collections/table.variables b/theme/themes/eea/collections/table.variables
@@ -1,7 +1,7 @@
 /*******************************
              Table
 *******************************/
-@tableHoverBackgroundColor: #F9F9F9;
+@tableHoverBackgroundColor: @backgroundColorCSSVar;
 
 /*-------------------
        Element

diff --git a/theme/themes/eea/definitions/views/item.less b/theme/themes/eea/definitions/views/item.less
@@ -61,18 +61,6 @@
 /*--------------
       Item
 ---------------*/
-// color item images that are svg files
-.item.primary img {
-    filter: @itemPrimaryFilterColor;
-}
-
-.item.secondary img {
-    filter: @itemSecondaryFilterColor;
-}
-
-.item.tertiary img {
-    filter: @itemTertiaryFilterColor;
-}
 
 .ui.items > .item:after {
   display: block;

diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
@@ -78,6 +78,9 @@
   max-width: 100%;
 }
 
+.accordion-title:not(.active) .ui.input input {
+  color: @textColorCSSVar;
+}
 .ui.input input {
   border: @border;
 

diff --git a/theme/themes/eea/elements/list.variables b/theme/themes/eea/elements/list.variables
@@ -47,7 +47,7 @@
 @imageAlign: top;
 
 /* Item */
-@itemColor: @primaryColor;
+@itemColor: @textColorCSSVar;
 
 /* Content */
 @contentDistance: 0.5em;
@@ -58,7 +58,7 @@
 /* Header */
 @itemHeaderFontFamily: @headerFont;
 @itemHeaderFontWeight: @bold;
-@itemHeaderColor: @textColor;
+@itemHeaderColor: @textColorCSSVar;
 
 /* Description */
 @itemDescriptionColor: rgba(0, 0, 0, 0.7);
@@ -170,19 +170,19 @@
 
 @bulletOpacity: 1;
 @bulletCharacter: '•';
-@bulletColor: @primaryColor;
-@bulletLinkColor: @primaryColor;
+@bulletColor: @textColorCSSVar;
+@bulletLinkColor: @primaryColorCSSVar;
 @bulletVerticalAlign: top;
 @bulletChildDistance: @bulletDistance;
 
 /* Horizontal Bullets */
-@horizontalBulletColor: @primaryColor;
+@horizontalBulletColor: @textColorCSSVar;
 @horizontalBulletSpacing: @bulletDistance + 0.5em;
 
 /* Ordered List */
 @orderedCountName: ordered;
 @orderedCountContent: counters(ordered, ".") " ";
-@orderedCountColor: @primaryColor;
+@orderedCountColor: inherit;
 @orderedCountDistance: 1.25rem;
 @orderedCountOpacity: 1;
 @orderedCountTextAlign: right;

diff --git a/theme/themes/eea/extras/callout.variables b/theme/themes/eea/extras/callout.variables
@@ -2,11 +2,11 @@
             Callout
 *******************************/
 /* Body */
-@mobileCalloutBorderLeft : @5px solid @secondaryColor;
-@tabletCalloutBorderLeft : @10px solid @secondaryColor;
+@mobileCalloutBorderLeft : @5px solid @borderColorSecondaryCSSVar;
+@tabletCalloutBorderLeft : @10px solid @borderColorSecondaryCSSVar;
 
 /* Text */
-@quoteColor            : @japaneseIndigo;
+@quoteColor            : @textColorCSSVar;
 @mobileQuoteFontSize   : 1rem;
 @tabletQuoteFontSize   : @h6;
 @computerQuoteFontSize : @h5;

diff --git a/theme/themes/eea/extras/contentBox.less b/theme/themes/eea/extras/contentBox.less
@@ -28,7 +28,6 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
-    z-index: 1;
   }
 
   &.primary {
@@ -46,15 +45,23 @@
   }
 }
 
-[class*="content-box"] a {
-  text-decoration: underline;
-}
 .content-box[class*="ary"] {
   --bg-color: transparent;
+  --border-color-secondary: #FFF;
   --text-color: #FFF;
-  --text-color-hover: @grey-1;
+  --text-color-primary: #FFF;
+  --text-color-secondary: #FFF;
+  --text-color-tertiary: #FFF;
+  --text-color-hover: @backgroundColorSupplementary;
 }
 // inherit link
-.content-box[class*="ary"] a {
+.content-box[class*="ary"] a:not(.ui, .item) {
   color: inherit;
+  text-decoration: underline;
+}
+
+// inherit color for slate links within context boxes
+.content-box .slate-editor-link {
+  color: inherit;
+  text-decoration: underline;
 }
diff --git a/theme/themes/eea/extras/custom.overrides b/theme/themes/eea/extras/custom.overrides
@@ -74,16 +74,32 @@
   font-weight: inherit;
 }
 
-// inherit color for slate links within context boxes
-.content-box .slate-editor-link {
-  color: inherit;
-}
 
 // customize error class from volto-slate to our color of red
 .error {
     color: @red-5;
 }
 
+.power-user-menu,
+.blocks-chooser {
+  --text-color: @textColor;
+}
+.blocks-chooser {
+  .searchbox {
+    height: auto !important;
+  }
+  .input {
+    width: auto !important;
+  }
+  .clear-search-button {
+    padding: 0.5rem;
+  }
+  .icon {
+    margin-right: 0 !important;
+  }
+}
+
+
 // ensure background of content-box goes above the content area
 // draft image for non published pages
 .view-viewview:not(.wf-state-published) .content-area {

diff --git a/theme/themes/eea/extras/quote.variables b/theme/themes/eea/extras/quote.variables
@@ -16,7 +16,7 @@
 @tabletQuotePadding  : 0.5rem 0 1rem;
 
 /* Source */
-@sourceTextColor     : @secondaryColor;
+@sourceTextColor     : @secondaryColorCSSVar;
 @sourceTextAlign     : right;
 @sourceFontWeight    : @bold;
 @sourceFontSize      : 1.25rem;
@@ -30,5 +30,5 @@
 /* Icon */
 @mobileQuoteIconSize : 2rem;
 @tabletQuoteIconSize : 3rem;
-@quoteIconColor      : @secondaryColor;
+@quoteIconColor      : @secondaryColorCSSVar;
 @quoteDownIconFloat  : right;
diff --git a/theme/themes/eea/extras/tag.variables b/theme/themes/eea/extras/tag.variables
@@ -13,7 +13,7 @@
 
 /* Tag text */
 @tagNameFontSize       : 1rem;
-@tagNameFontColor      : @japaneseIndigo;
+@tagNameFontColor      : @textColorCSSVar;
 @tagNameFontColorWithBackground : @white;
 @tagNameFontWeight     : 500;
 @tagNameLineHeight     : 1.25rem;

diff --git a/theme/themes/eea/extras/tagList.variables b/theme/themes/eea/extras/tagList.variables
@@ -6,7 +6,7 @@
 @tagsBodyWidth             : 100%;
 
 /* Tags Title */
-@tagsTitleFontColor        : @japaneseIndigo;
+@tagsTitleFontColor        : @textColorCSSVar;
 @tagsTitleMargin           : 1rem;
 @tagsFontWeight            : 400;
 @tagsFontSize              : 1.125rem;

diff --git a/theme/themes/eea/globals/site.variables b/theme/themes/eea/globals/site.variables
@@ -55,8 +55,11 @@
 --------------------*/
 
 @primaryColor         : @darkCerulean;
+@primaryColorCSSVar   : var(--text-color-primary, @primaryColor);
 @secondaryColor       : @pineGreen;
+@secondaryColorCSSVar : var(--text-color-secondary, @secondaryColor);
 @tertiaryColor        : @deepBlue;
+@tertiaryColorCSSVar  : var(--text-color-tertiary, @tertiaryColor);
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
@@ -181,7 +184,17 @@
 @lineHeight          : @font-lineheight-3;
 @mobileLineHeight    : @font-lineheight-3;
 @textColor           : @tertiaryColor;
+// use this variable when you want it to be replaced by css variables
+@textColorCSSVar     : var(--text-color, @textColor);
+@borderColorCSSVar   : var(--border-color, @grey-3);
+@borderColorPrimaryCSSVar: var(--border-color-primary, @primaryColor);
+@borderColorSecondaryCSSVar: var(--border-color-secondary, @secondaryColor);
+@borderColorTertiaryCSSVar: var(--border-color-tertiary, @tertiaryColor);
 @contentAreaColor    : @tertiaryColor;
+@backgroundColor: @grey-0;
+@backgroundColorCSSVar: var(--bg-color, @backgroundColor);
+@backgroundColorSupplementary: @grey-1;
+@backgroundColorSupplementaryCSSVar: var(--bg-color-supplementary, @backgroundColorSupplementary);
 
 /*-------------------
       Paragraph

diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -122,7 +122,7 @@
 }
 .ui.accordion.primary .title:not(.active):hover,
 .ui.accordion.primary .title:not(.active):hover i {
-  color: @primaryColor;
+  color: @primaryColorCSSVar;
 }
 
 /* Secondary */
@@ -131,7 +131,7 @@
 }
 .ui.accordion.secondary .title:not(.active):hover,
 .ui.accordion.secondary .title:not(.active):hover i {
-  color: @secondaryColor;
+  color: @secondaryColorCSSVar;
 }
 
 /* Tertiary */
@@ -140,5 +140,5 @@
 }
 .ui.accordion.tertiary .title:not(.active):hover,
 .ui.accordion.tertiary .title:not(.active):hover i {
-  color: @tertiaryColor;
+  color: @tertiaryColorCSSVar;
 }
diff --git a/theme/themes/eea/modules/accordion.variables b/theme/themes/eea/modules/accordion.variables
@@ -10,7 +10,7 @@
 @titlePadding: 1rem 1.563rem;
 @titlePadding: @rectangleMedium;
 @titleFontSize: 1.125rem;
-@titleColor: var(--text-color, @textColor);
+@titleColor: @textColorCSSVar;
 @titleBorderBottom: @1px solid @silverGray;
 @titleColorHover:var(--text-color-hover, @grey-5);
 @titleJustifyContent: space-between;
@@ -32,7 +32,7 @@
 ;
 @iconVerticalAlign: baseline;
 @iconTransform: none;
-@iconColorHover: @grey-5;
+@iconColorHover: @titleColorHover;
 @iconInactive: "\ea4e"; // Icon of closed accordion
 @iconActive: "\EA78"; // Icon of open accordion
 @iconOrder: 1; // Icon after text of the title
@@ -63,7 +63,7 @@
 --------------------*/
 
 @activeIconTransform: none;
-@activeTitleBackground: @white;
+@activeTitleBackground: var(--bg-color, @white);
 @activeTitleColor: @grey-5;
 @activeTitleBorderBottom: 0;
 
@@ -73,7 +73,7 @@
 
 /* Styled */
 @styledWidth: 600px;
-@styledBackground: @white;
+@styledBackground: @activeTitleBackground;
 @styledBorderRadius: 0;
 @styledBoxShadow: none;
 

diff --git a/theme/themes/eea/views/item.overrides b/theme/themes/eea/views/item.overrides
@@ -70,6 +70,19 @@
   }
 }
 
+// color item images that are svg files
+.item.primary img {
+  filter: @itemPrimaryFilterColor;
+}
+
+.item.secondary img {
+  filter: @itemSecondaryFilterColor;
+}
+
+.item.tertiary img {
+  filter: @itemTertiaryFilterColor;
+}
+
 // decrease margin when using icons instead of images
 // since the icons have themselves extra whitespace
 // and we should aim to get about 32px as seen in the figma design

diff --git a/theme/themes/eea/views/item.variables b/theme/themes/eea/views/item.variables
@@ -113,7 +113,7 @@
 @descriptionMaxWidth: auto;
 @descriptionFontSize: 1em;
 @descriptionLineHeight: @lineHeight;
-@descriptionColor: @textColor;
+@descriptionColor: @textColorCSSVar;
 
 /* Content Image */
 @contentImageWidth: '';