@eeacms/volto-eea-design-system 1.0.0-alpha.3 → 1.0.0-alpha.5

package/.github/workflows/node.js.yml

@@ -6,11 +6,6 @@ name: Storybook & Docusaurus CI deployment
 on:
   push:
     branches: [ develop ]
-    paths:
-      - src/**
-      - theme/**
-      - website/**
-      - templates/**
 
 jobs:
   build:
@@ -46,7 +41,7 @@ jobs:
           git commit -m "Autobuild of docusaurus docs"
           git push
 
-    - uses: convictional/trigger-workflow-and-wait@v1.3.0
+    - uses: convictional/trigger-workflow-and-wait@v1.6.5
       with:
         github_token: ${{ secrets.PAT_TOKEN }}
         owner: 'eea'

package/CHANGELOG.md

@@ -4,6 +4,82 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-alpha.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...1.0.0-alpha.5) - 29 November 2022
+
+#### :rocket: New Features
+
+- feat(Iconography): import and showcase remix icons [Antonis Tarantilis - [`777112f`](https://github.com/eea/volto-eea-design-system/commit/777112f7e77ce8c74c3fd4384bff6ec9694aba04)]
+
+#### :bug: Bug Fixes
+
+- fix(contentBox): avoid text decoration for header-link added on cards [David Ichim - [`3ccb592`](https://github.com/eea/volto-eea-design-system/commit/3ccb592db6f465cec59124b94fb6918b513bb761)]
+- fix(label): color for yellow variant as white isn't accessible on yellow color [David Ichim - [`91d8880`](https://github.com/eea/volto-eea-design-system/commit/91d8880a829d2728c49a1953f6d2d8c2c812990c)]
+- fix(label): margin value for ribbon image left and right margin [David Ichim - [`f8e1129`](https://github.com/eea/volto-eea-design-system/commit/f8e1129734709d6034539a6522105af9d43fef20)]
+- fix(lists): bullet position by using padding instead of margin [David Ichim - [`0ecae2e`](https://github.com/eea/volto-eea-design-system/commit/0ecae2e7fe61b98d8795f876a525fbbc873bf799)]
+- fix(docusaurus): right bar overflow fix [Manthos Matzios - [`197c763`](https://github.com/eea/volto-eea-design-system/commit/197c763624f70556c62379bc0751763725d0fed3)]
+
+#### :nail_care: Enhancements
+
+- change(tag): set gap on tags element for margin between tag elements [David Ichim - [`726bc6d`](https://github.com/eea/volto-eea-design-system/commit/726bc6da821a366a5afa03659e614cc73ed02c0b)]
+- refactor(docusaurus): move supplementary, state and link colors to partials [Giorgos Stamatis - [`2776be3`](https://github.com/eea/volto-eea-design-system/commit/2776be32615d7a6bdd8561a523fb9cfb1a85e38b)]
+- refactor(docusaurus): fix side menu / moved more content in palette partial [Giorgos Stamatis - [`f5b7077`](https://github.com/eea/volto-eea-design-system/commit/f5b70775471369ca8f3193784b9bc66caa8fb76f)]
+- refactor(docusaurus): eea color palette in separate file [Giorgos Stamatis - [`6c855df`](https://github.com/eea/volto-eea-design-system/commit/6c855df9c2238f8d21860ade4578aa969b68448e)]
+- refactor(docusaurus): classes for color boxes [Giorgos Stamatis - [`80219d5`](https://github.com/eea/volto-eea-design-system/commit/80219d52bc63842d8e6382dbbe7d43cdc8a29b9c)]
+- perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]
+
+#### :house: Internal changes
+
+- chore(colours): fix wrong class name [Giorgos Stamatis - [`51ad0a8`](https://github.com/eea/volto-eea-design-system/commit/51ad0a8232f7f35cae05f5861d7822db852b3f8d)]
+
+#### :house: Documentation changes
+
+- docs(colors): switch FISE logo to png [Giorgos Stamatis - [`335471f`](https://github.com/eea/volto-eea-design-system/commit/335471fd95bbd78cd7bd80b960272baa0a32e1c5)]
+- docs(colours): adjust logos heights [Antonis Tarantilis - [`854d4fb`](https://github.com/eea/volto-eea-design-system/commit/854d4fb761be7307e83e5dd2eb0fe5a0117727c5)]
+- docs(colors): thematic pages integration [Dora Anastasiou - [`ea7a422`](https://github.com/eea/volto-eea-design-system/commit/ea7a4220a93d3fd2f437b51462f7f19d99f52595)]
+- docs(colors): fix swatches accessibility [Dora Anastasiou - [`306cb74`](https://github.com/eea/volto-eea-design-system/commit/306cb74d3e06390a9c15da9b8b29c9d3c8f0f6c5)]
+- docs(typography): merge designer and dev units [Giorgos Stamatis - [`65c240e`](https://github.com/eea/volto-eea-design-system/commit/65c240eddbf20b3fc870d301b96837f49ad9caca)]
+- docs(colors): updated visited [Dora Anastasiou - [`0248fd1`](https://github.com/eea/volto-eea-design-system/commit/0248fd164cbf85168945797244977c305c67608d)]
+- docs(FISE): replaced logo [Giorgos Stamatis - [`f7d8331`](https://github.com/eea/volto-eea-design-system/commit/f7d833127f769d79f099618b98789c6929b4ba08)]
+- docs(colors): blue-grey-6 adjustment [Giorgos Stamatis - [`e7ab2d1`](https://github.com/eea/volto-eea-design-system/commit/e7ab2d15d3a617bc5b3713897f3e3521d9e2720a)]
+- docs(docusaurus): typography and colors fixes according to comments on PR [Manthos Matzios - [`ae20a72`](https://github.com/eea/volto-eea-design-system/commit/ae20a7258cc88465fa0937895c2999952736f456)]
+- docs(typography): readded extra font sizes, fixed fluid [Manthos Matzios - [`a4a5d89`](https://github.com/eea/volto-eea-design-system/commit/a4a5d892538a9713d14ac718b1bf2c771be09810)]
+- docs(colors): minors updates and instructions [Manthos Matzios - [`84ac882`](https://github.com/eea/volto-eea-design-system/commit/84ac8828e430b4af2b461534b4e2f81189080145)]
+- docs(docusaurus): Iconography updates, thematic platforms [Dora Anastasiou - [`2a0e596`](https://github.com/eea/volto-eea-design-system/commit/2a0e596bd002290e0759d8c5e568da4d318f7d59)]
+- docs(colours): added active colour [Manthos Matzios - [`574f7a9`](https://github.com/eea/volto-eea-design-system/commit/574f7a95ea8a9510d03a104ad72fafafcae5d738)]
+- docs(typography): changed em to percentages [Manthos Matzios - [`d417600`](https://github.com/eea/volto-eea-design-system/commit/d4176007ff4b421bc988b618488e0ba6b550f9fe)]
+- docs(docusaurus): color updates [Manthos Matzios - [`cc13b54`](https://github.com/eea/volto-eea-design-system/commit/cc13b5499a9ae13bb45925a057f8ff4d6a2e4643)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.5 [Alin Voinea - [`dcd60c9`](https://github.com/eea/volto-eea-design-system/commit/dcd60c9285caf60b23ed97a9ca5daed0a943bc24)]
+- feature(Docusaurus): Updates on color palette information including thematic websites #231 from eea/refactor-docusaurus [ichim-david - [`ec7843d`](https://github.com/eea/volto-eea-design-system/commit/ec7843dea07f626dc1c71ae1baa8bb5b0caa52f3)]
+- Back to dev [Alin Voinea - [`563fbc5`](https://github.com/eea/volto-eea-design-system/commit/563fbc5fac0d4b0295690d0a3a4e04271753f18a)]
+- perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]
+### [1.0.0-alpha.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 22 November 2022
+
+#### :bug: Bug Fixes
+
+- fix(cards-storybook): load slick carousel css for arrow and pagination styles [David Ichim - [`1159b1b`](https://github.com/eea/volto-eea-design-system/commit/1159b1beea0d7f7e026f1f1181fea91b7ac38ffa)]
+
+#### :nail_care: Enhancements
+
+- change(utilities): added has text classes to the text alignment utilities [David Ichim - [`e6974c6`](https://github.com/eea/volto-eea-design-system/commit/e6974c634551fe0d19a9c9da269f5c6fbaefab7a)]
+- change(build): upgrade action to trigger workflow and wait to latest version [David Ichim - [`c63ad3f`](https://github.com/eea/volto-eea-design-system/commit/c63ad3fdae7972bb2c722dea3d046861fa0ac086)]
+- refactor(card): theming implementation to allow has theming classes #265 from eea/card-refactoring [ichim-david - [`24edc99`](https://github.com/eea/volto-eea-design-system/commit/24edc99d85c0c619fc763a8774a96f7208f529a5)]
+- change(utilities): modified class name for text align using has naming [David Ichim - [`579a0cb`](https://github.com/eea/volto-eea-design-system/commit/579a0cbe0f704eb9305119fdd162f4f29c8086d5)]
+- change(theme): ensure that only direct children of container have a default top and bottom margin [David Ichim - [`7f8b8dc`](https://github.com/eea/volto-eea-design-system/commit/7f8b8dcc72827004d366e1c531311cf8734053fc)]
+- change(theme): add slick-carousel dependency [David Ichim - [`f2eec7d`](https://github.com/eea/volto-eea-design-system/commit/f2eec7d7233adf86b9c4f61670eb87d9754ff94c)]
+- change(card): expect has classes on the card directly [David Ichim - [`6a9e38b`](https://github.com/eea/volto-eea-design-system/commit/6a9e38bcae0656685a99b47800d556813663d2ee)]
+- change(cards): allow rounded, inverted and theme parameter to be set by has classes [David Ichim - [`4b4ad89`](https://github.com/eea/volto-eea-design-system/commit/4b4ad893fc5d39629b4e8d874327f31ea2e7d885)]
+- change(cards): refactor cards theming implementation [David Ichim - [`d4e4542`](https://github.com/eea/volto-eea-design-system/commit/d4e454238d540ef306f4c1a4f8e9a94c7aa10189)]
+
+#### :hammer_and_wrench: Others
+
+- Exclude mockups from npm package [Alin Voinea - [`634af8e`](https://github.com/eea/volto-eea-design-system/commit/634af8e3ddabec36a18597d8d7638888269875fc)]
+- Update eea.github.io on all commits in develop branch [Alin Voinea - [`3d0b8d7`](https://github.com/eea/volto-eea-design-system/commit/3d0b8d745138bd2e0219560c8c895ce2c56dbf04)]
+- Trigger re-build [Alin Voinea - [`3566dd2`](https://github.com/eea/volto-eea-design-system/commit/3566dd2b4d2cd12496e05b792c85a78de550dd50)]
+- fix rounded selector [David Ichim - [`1fa1544`](https://github.com/eea/volto-eea-design-system/commit/1fa15442f03d3f3d9ef59afa14075b061483cf3a)]
+- Back to dev. [Alin Voinea - [`ea47f6f`](https://github.com/eea/volto-eea-design-system/commit/ea47f6f10097f23f635d98f0c5483bebf8378fc4)]
 ### [1.0.0-alpha.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...1.0.0-alpha.3) - 16 November 2022
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,13 +21,14 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
-    "remixicon": "2.5.0",
+    "react-countup": "^6.3.0",
     "react-slick": "^0.28.1",
-    "react-countup": "^6.3.0"
+    "remixicon": "2.5.0",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

package/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;
 

package/theme/themes/eea/elements/label.variables

@@ -9,8 +9,8 @@
 @labelFontSize: @fontSize;
 
 @verticalAlign: baseline;
-@verticalMargin: 0em;
-@horizontalMargin: @relative2px;
+@verticalMargin: 0;
+@horizontalMargin: 0;
 @backgroundColor: @grey;
 @color: @white;
 @backgroundImage: none;
@@ -142,7 +142,7 @@
 @rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
 
 @ribbonImageTopDistance: 1rem;
-@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
+@ribbonImageMargin: 0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
 @rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
 
@@ -173,7 +173,7 @@
 
 @redTextColor: @white;
 @orangeTextColor: @white;
-@yellowTextColor: @white;
+@yellowTextColor: @textColor;
 @oliveTextColor: @white;
 @greenTextColor: @white;
 @tealTextColor: @white;
@@ -187,7 +187,7 @@
 
 @redHoverTextColor: @white;
 @orangeHoverTextColor: @white;
-@yellowHoverTextColor: @white;
+@yellowHoverTextColor: @textColor;
 @oliveHoverTextColor: @white;
 @greenHoverTextColor: @white;
 @tealHoverTextColor: @white;

package/theme/themes/eea/elements/list.overrides

@@ -19,6 +19,12 @@ dl dd {
 }
 
 /* Unordered list */
+
+// use padding instead
+ul.ui.list, .ui.bulleted.list {
+  padding-left: @bulletDistance;
+  margin-left: 0;
+}
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list .list > a.item:before,
 .ui.bulleted.list > .item:before,

package/theme/themes/eea/elements/list.variables

@@ -165,7 +165,7 @@
 /* Bulleted */
 
 @bulletSize: 1.1rem;
-@bulletDistance: 1.25rem;
+@bulletDistance: @rem-space-5;
 @bulletOffset: -@bulletDistance;
 
 @bulletOpacity: 1;

package/theme/themes/eea/extras/contentBox.less

@@ -55,7 +55,7 @@
   --text-color-hover: @backgroundColorSupplementary;
 }
 // inherit link
-.content-box[class*="ary"] a:not(.ui, .item) {
+.content-box[class*="ary"] a:not(.ui, .item, .header-link) {
   color: inherit;
   text-decoration: underline;
 }
@@ -64,4 +64,4 @@
 .content-box .slate-editor-link {
   color: inherit;
   text-decoration: underline;
-}
+}

package/theme/themes/eea/extras/tag.variables

@@ -5,7 +5,7 @@
 /* Tags */
 @tagPadding            : @mediumGap 0;
 @tagHeight             : 1.25rem;
-@tagMargin             : 0 @mediumGap 0 0;
+@tagMargin             : 0 0 0 0;
 
 /* Tag Icon */
 @tagHashtagFontSize    : 0.75rem;

package/theme/themes/eea/extras/tagList.less

@@ -15,17 +15,21 @@
   flex-wrap: wrap;
   width: @tagsBodyWidth;
   line-height: @tagsLineHeight;
+  gap: @tagsGap;
 
   .tags-title {
     text-align: right;
     height: @tagsLineHeight;
     color: @tagsTitleFontColor;
-    margin-right: @tagsTitleMargin;
     font-weight: @tagsFontWeight;
     font-size: @tagsFontSize;
   }
 }
 
+.tags.labels {
+  gap: @tagsLabelsGap;
+}
+
 .tags.left {
   justify-content: left;
 }

package/theme/themes/eea/extras/tagList.variables

@@ -4,10 +4,11 @@
 
 /* Body */
 @tagsBodyWidth             : 100%;
+@tagsLabelsGap             : 0.5rem;
+@tagsGap                   : 1rem;
 
 /* Tags Title */
 @tagsTitleFontColor        : @textColorCSSVar;
-@tagsTitleMargin           : 1rem;
 @tagsFontWeight            : 400;
 @tagsFontSize              : 1.125rem;
 @tagsLineHeight            : 1.312rem;

package/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;
 }

package/theme/themes/eea/globals/utilities.less

@@ -34,16 +34,18 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .flex-items-center { align-items: center !important; }
 
 // Text
-.text-left { text-align: left !important; }
-.text-center { text-align: center !important;}
+.text-left,
+.has--text--left { text-align: left !important; }
+.text-center,
+.has--text--center { text-align: center !important;}
 .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;
 }

package/theme/themes/eea/tokens/colors.less

@@ -58,6 +58,6 @@
 @grey-1: #F9F9F9;
 @grey-2: #E6E7E8;
 @grey-3: #BCBEC0;
-@grey-4: #67696b; // 10% shade of #808285 which passed AA validation on white bg
+@grey-4: #67696b; /* 10% shade of #808285 which passed AA validation on white bg */
 @grey-5: #323232;
 @grey-6: #000000;

package/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,151 +83,46 @@
 /*******************************
             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;
 }
 
 /*******************************
@@ -239,11 +130,17 @@
 *******************************/
 
 .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;
+}

package/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