refactor(card): theming implementation to allow has theming classes #265

 from eea/card-refactoring

- Added also dependency on slick-carousel for the theming of the slick pagination
- Simplified theming of cards for easier customization and less code to maintain

package.json

@@ -23,6 +23,7 @@
     "@eeacms/volto-corsproxy": "*",
     "remixicon": "2.5.0",
     "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "react-countup": "^6.3.0"
   },
   "devDependencies": {

src/ui/Card/Card.stories.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
 import Slider from 'react-slick';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 const tabletBreakpoint = 835;
 const mobileBreakpoint = 480;
 

theme/themes/eea/globals/site.overrides

@@ -63,8 +63,8 @@ h2, h3, h4, h5, h6 {
   --layout-max-width: @wideWidth;
 }
 
-// add a 1rem margin top and bottom on all styled classes
-[class*="styled-"] {
+// add a 1rem margin top and bottom on all direct styled classes from container
+[class~="container"] > [class*="styled-"] {
   margin-top: @rem-space-4;
   margin-bottom: @rem-space-4;
 }

theme/themes/eea/globals/utilities.less

@@ -39,11 +39,11 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-right { text-align: right !important; }
 .bold { font-weight: bold !important; }
 
-.align_left {
+.has--text--left {
   --text-align: left;
 }
 
-.align_center {
+.has--text--center {
   --text-align: center;
   --justify-content: space-evenly;
 }

theme/themes/eea/views/card.overrides

@@ -16,6 +16,8 @@
 .ui.card {
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
+  background-color: var(--card-background-color, @background);
+  color: var(--card-text-color, @cardColor);
 }
 
 .card .meta .date {
@@ -28,19 +30,13 @@
   height: @cardImageHeight;
 
   img {
-    width: @imageWidth;
-    height: @imageHeight;
+    width: var(--card-image-width, @imageWidth);
+    height: var(--card-image-width, @imageHeight);
     object-fit: @imageObjectFit;
     object-position: @imageObjectPosition;
   }
 }
 
-.ui.cards > .card > i.icon,
-.ui.cards > .card > a:not(.ui) > i.icon,
-.ui.card > i.icon,
-.ui.card > a:not(.ui) > i.icon {
-  color: @iconColor;
-}
 
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
@@ -87,163 +83,64 @@
 /*******************************
             Primary
 *******************************/
-
-.ui.card.primary:not(.inverted),
-.ui.card.primary:not(.inverted) .image {
-  background: @primaryBackground;
-}
-
-.ui.card.primary > .content > .header {
-  color: @primaryHeaderColor;
-}
-
-.ui.card.primary > i.icon,
-.ui.card.primary > a:not(.ui) > i.icon,
-.ui.card.primary > .content a:not(.ui),
-.ui.card.primary > .content a:not(.ui):hover,
-.ui.card.primary > .content > .description {
-  color: @primaryDescriptionColor;
-}
-
-.ui.card.primary > .extra.content a:not(.ui) {
-  color: @primaryExtraLinkColor;
-
-  &:hover {
-    color: @primaryExtraLinkHoverColor;
-  }
-}
-
-.ui.card.primary > .content > .meta,
-.ui.card.primary > .content > .meta a:not(.ui) {
-  color: @primaryMetaColor;
+.card.has--theme--primary,
+.card.primary {
+  --card-background-color: @primaryCardBackground;
+  --card-text-color: @primaryCardColor;
 }
-
 /* Inverted */
-.ui.card.primary.inverted > i.icon,
-.ui.card.primary.inverted > .content * {
-  color: @invertedPrimaryContentColor;
-}
-
-.ui.card.primary.inverted > a:not(.ui) > i.icon,
-.ui.card.primary.inverted > .content a:not(.ui),
-.ui.card.primary.inverted > .extra.content a:not(.ui) {
-  color: @invertedPrimaryContentColor;
-
-  &:hover {
-    color: @invertedPrimaryColorHover;
-  }
+.card.has--theme--primary.has--inverted--true,
+.card.primary.inverted {
+  --card-background-color: @invertedPrimaryCardBackgroundColor;
+  --card-text-color: @invertedPrimaryCardColor;
 }
 
 /*******************************
             Secondary
 *******************************/
-
-.ui.card.secondary:not(.inverted),
-.ui.card.secondary:not(.inverted) .image {
-  background: @secondaryBackground;
-}
-
-.ui.card.secondary > i.icon,
-.ui.card.secondary > a:not(.ui) > i.icon,
-.ui.card.secondary > .content a:not(.ui),
-.ui.card.secondary > .content a:not(.ui):hover,
-.ui.card.secondary > .content > .header {
-  color: @secondaryHeaderColor;
+.card.has--theme--secondary,
+.card.secondary {
+  --card-background-color:  @secondaryCardBackground;
+  --card-text-color: @secondaryCardColor;
 }
-
-.ui.card.secondary > .content > .description {
-  color: @secondaryDescriptionColor;
-}
-
-.ui.card.secondary > .extra.content a:not(.ui) {
-  color: @secondaryExtraLinkColor;
-
-  &:hover {
-    color: @secondaryExtraLinkHoverColor;
-  }
-}
-
-.ui.card.secondary > .content > .meta,
-.ui.card.secondary > .content > .meta a:not(.ui) {
-  color: @secondaryMetaColor;
-}
-
 /* Inverted */
-.ui.card.secondary.inverted > i.icon,
-.ui.card.secondary.inverted > .content * {
-  color: @invertedSecondaryContentColor;
-}
-
-.ui.card.secondary.inverted > a:not(.ui) > i.icon,
-.ui.card.secondary.inverted > .content a:not(.ui),
-.ui.card.secondary.inverted > .extra.content a:not(.ui) {
-  color: @invertedSecondaryContentColor;
-
-  &:hover {
-    color: @invertedSecondaryColorHover;
-  }
+.card.has--theme--secondary.has--inverted--true,
+.card.secondary.inverted {
+  background-color: @invertedSecondaryCardBackgroundColor;
+  color: @invertedSecondaryCardColor;
 }
 
 /*******************************
             Tertiary
 *******************************/
-
-.ui.card.tertiary:not(.inverted),
-.ui.card.tertiary:not(.inverted) .image {
-  background: @tertiaryBackground;
-}
-
-.ui.card.tertiary > i.icon,
-.ui.card.tertiary > a:not(.ui) > i.icon,
-.ui.card.tertiary > .content a:not(.ui),
-.ui.card.tertiary > .content a:not(.ui):hover,
-.ui.card.tertiary > .content > .header {
-  color: @tertiaryHeaderColor;
-}
-
-.ui.card.tertiary > .content > .description {
-  color: @tertiaryDescriptionColor;
-}
-
-.ui.card.tertiary > .extra.content a:not(.ui) {
-  color: @tertiaryExtraLinkColor;
-
-  &:hover {
-    color: @tertiaryExtraLinkHoverColor;
-  }
+.card.has--theme--tertiary,
+.card.tertiary {
+  --card-background-color:  @tertiaryCardBackground;
+  --card-text-color: @tertiaryCardColor;
 }
-
-.ui.card.tertiary > .content > .meta,
-.ui.card.tertiary > .content > .meta a:not(.ui) {
-  color: @tertiaryMetaColor;
-}
-
 /* Inverted */
-.ui.card.tertiary.inverted > i.icon,
-.ui.card.tertiary.inverted > .content * {
-  color: @invertedTertiaryContentColor;
-}
-
-.ui.card.tertiary.inverted > a:not(.ui) > i.icon,
-.ui.card.tertiary.inverted > .content a:not(.ui),
-.ui.card.tertiary.inverted > .extra.content a:not(.ui) {
-  color: @invertedTertiaryContentColor;
-
-  &:hover {
-    color: @invertedTertiaryColorHover;
-  }
+.card.has--theme--tertiary.has--inverted--true,
+.card.tertiary.inverted {
+  --card-background-color:  @invertedTertiaryCardBackgroundColor;
+  --card-text-color:  @invertedTertiaryCardColor;
 }
 
 /*******************************
           Rounded Card
 *******************************/
 
 .ui.cards > .ui.card.rounded > .image,
+.ui.card.has--rounded--true > .image,
 .ui.card.rounded > .image {
   height: auto;
 }
 
+.card.has--rounded--true {
+  --card-image-width: @roundedImageWidth;
+  --card-image-height: @roundedImageHeight;
+}
 .ui.cards .ui.card.rounded,
+.ui.card.has--rounded--true,
 .ui.card.rounded {
   padding-top: @iconCardPaddingTop;
   border: none;
@@ -479,4 +376,11 @@
   .icon {
     margin: auto;
   }
-}
+}
+
+.ui.cards > .card > i.icon,
+.ui.cards > .card > a:not(.ui) > i.icon,
+.ui.card > i.icon,
+.ui.card > a:not(.ui) > i.icon {
+  color: @iconColor;
+}

theme/themes/eea/views/card.variables

@@ -7,6 +7,7 @@
 --------------------*/
 
 @cardBorder: 1px solid @midGray;
+@cardColor: @tertiaryColor;
 @background: @white;
 
 /* Shadow */
@@ -84,13 +85,13 @@
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
-@headerColor: @tertiaryColor;
+@headerColor: inherit;
 
 /* Metadata */
 @metaJustifyContent: space-between;
 @metaFontSize: @absoluteMedium;
 @metaSpacing: 0.3em;
-@metaColor: @tertiaryColor;
+@metaColor: inherit;
 
 /* Icons */
 @iconCardPaddingTop: @rem-space-4;
@@ -105,8 +106,8 @@
 @likeActiveColor: #FF2733;
 
 /* Links */
-@contentLinkColor: @tertiaryColor;
-@contentLinkHoverColor: @tertiaryColor;
+@contentLinkColor: inherit;
+@contentLinkHoverColor: inherit;
 @contentLinkFontWeight: @bold;
 @contentLinkTransition: color @defaultDuration @defaultEasing;
 @contentLinkTextDecoration: underline;
@@ -240,38 +241,26 @@
 /*******************************
             Primary
 *******************************/
-@primaryBackground: @primaryColor;
-@primaryHeaderColor: @white;
-@primaryDescriptionColor: @white;
-@primaryExtraLinkColor: @white;
-@primaryExtraLinkHoverColor: @white;
-@primaryMetaColor: @white;
-@invertedPrimaryContentColor: @primaryColor;
-@invertedPrimaryColorHover: @primaryColorHover;
+@primaryCardBackground: @primaryColor;
+@primaryCardColor: @white;
+@invertedPrimaryCardColor: @primaryColor;
+@invertedPrimaryCardBackgroundColor: @white;
 
 /*******************************
             Secondary
 *******************************/
-@secondaryBackground: @secondaryColor;
-@secondaryHeaderColor: @white;
-@secondaryDescriptionColor: @white;
-@secondaryExtraLinkColor: @white;
-@secondaryExtraLinkHoverColor: @white;
-@secondaryMetaColor: @white;
-@invertedSecondaryContentColor: @secondaryColor;
-@invertedSecondaryColorHover: @secondaryColorHover;
+@secondaryCardBackground: @secondaryColor;
+@secondaryCardColor: @white;
+@invertedSecondaryCardColor: @secondaryColor;
+@invertedSecondaryCardBackgroundColor: @white;
 
 /*******************************
             Tertiary
 *******************************/
-@tertiaryBackground: @tertiaryColor;
-@tertiaryHeaderColor: @white;
-@tertiaryDescriptionColor: @white;
-@tertiaryExtraLinkColor: @white;
-@tertiaryExtraLinkHoverColor: @white;
-@tertiaryMetaColor: @white;
-@invertedTertiaryContentColor: @tertiaryColor;
-@invertedTertiaryColorHover: @tertiaryColorHover;
+@tertiaryCardBackground: @tertiaryColor;
+@tertiaryCardColor: @white;
+@invertedTertiaryCardColor: @tertiaryColor;
+@invertedTertiaryCardBackgroundColor: @white;
 
 /*******************************
           Rounded Card