@eeacms/volto-eea-design-system 0.2.4 → 0.4.0

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

@@ -11,7 +11,7 @@
 @verticalAlign: baseline;
 @verticalMargin: 0em;
 @horizontalMargin: @relative2px;
-@backgroundColor: @lowImportanceBackground;
+@backgroundColor: @grey;
 @color: @white;
 @backgroundImage: none;
 @verticalPadding: 0.5833em; /* medium is not @emSize custom value required */
@@ -19,7 +19,7 @@
 @borderRadius: @defaultBorderRadius;
 @textTransform: none;
 @fontWeight: @normal;
-@borderWidth: 0;
+@borderWidth: 1px;
 @border: none;
 
 @labelLineHeight: inherit;
@@ -158,6 +158,19 @@
 @highImportanceBackground: #005293;
 @highlightImportanceBackground: @secondaryColor;
 
+/* Hover Colors */
+@lowImportanceHoverBackground: darken(@deepBlue,5);
+@mediumImportanceHoverBackground: darken(#346F83,5);
+@highImportanceHoverBackground: darken(#005293,5);
+@highlightImportanceHoverBackground: darken(@secondaryColor,5);
+
+@importanceHoverTextColor: @white;
+
+@lowImportanceBasicTextColor: @deepBlue;
+@mediumImportanceBasicTextColor: #346F83;
+@highImportanceBasicTextColor: #005293;
+@highlightImportanceBasicTextColor: @secondaryColor;
+
 @redTextColor: @white;
 @orangeTextColor: @white;
 @yellowTextColor: @white;
@@ -235,7 +248,7 @@
 @emptyCircleSize: 0.5em;
 
 /* Pointing */
-@pointingBorderColor: inherit;
+@pointingBorderColor: @grey;
 @pointingBorderWidth: 0;
 @pointingVerticalDistance: 1em;
 @pointingTriangleSize: 0.6666em;
@@ -246,6 +259,7 @@
 
 /* Basic Pointing */
 @basicPointingTriangleOffset: -@pointingBorderWidth;
+@basicImportanceBorderWidth: 0 0 1px 1px;
 
 /* Floating */
 @floatingTopOffset: -1em;

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

@@ -23,9 +23,12 @@
   font-size: @14px;
 }
 
+// eea add .form class for inline form with booleans, the segment doesn't have form class
+.form .segment,
 .ui.form.segment {
-  padding: 0;
-
+//  // commented to restore padding to a list of toggle inputs within field-wrapper-hideContentType
+//  padding: 0;
+//
   .ui.grid > .row {
     padding-top: 0;
     padding-bottom: 0;

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

@@ -0,0 +1,28 @@
+/*******************************
+            Avatar
+*******************************/
+
+/* Global */
+@avatarWidth                    : 100%;
+@avatarWrapperWidth             : 100%;
+@avatarWrapperGap               : @largeGap;
+@avatarContentWrapperWidth      : 100%;
+@avatarImageBorderRadius        : 50%;
+@avatarContentTitleMarginBottom : 0;
+@avatarImageWrapperWidth        : 100%;
+@avatarImageBackgroundSize      : cover;
+@avatarContentTitleFontWeight   : @bold;
+@avatarContentTitleFontSize     : 1.25rem;
+
+/* Big */
+@avatarBigImageHeight           : 173px;
+@avatarBigImageWidth            : 173px;
+@avatarBigMetadataFontSize      : 1.25rem;
+@avatarBigMetadataFontWeight    : @normal;
+
+/* Small */
+@avatarSmallImageHeight         : 135px;
+@avatarSmallImageWidth          : 135px;
+@avatarSmallTitleColor          : @secondaryColor;
+@avatarSmallMetadataFontSize    : 1rem;
+@avatarSmallMetadataFontWeight  : 300;

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

@@ -0,0 +1,43 @@
+@type: 'extra';
+@element: 'callout';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Callout
+*******************************/
+
+p.callout,
+blockquote.callout,
+.eea.callout {
+  border: @calloutBorder;
+  box-shadow: @calloutBoxShadow;
+  border-radius: @calloutBorderRadius;
+  padding-top: @calloutPadding;
+  padding-bottom: @calloutPadding;
+  border-left: @mobileCalloutBorderLeft;
+  border-right: @calloutBorder;
+  border-top: @calloutBorder;
+  border-bottom: @calloutBorder;
+  color: @quoteColor;
+  font-size: @mobileQuoteFontSize;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  p.callout,
+  blockquote.callout,
+  .eea.callout {
+    border-left: @tabletCalloutBorderLeft;
+    font-size: @tabletQuoteFontSize;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  p.callout,
+  blockquote.callout,
+  .eea.callout {
+    font-size: @computerQuoteFontSize;
+  }
+}
+
+.loadUIOverrides();

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

@@ -0,0 +1,19 @@
+/*******************************
+            Callout
+*******************************/
+/* Body */
+@mobileCalloutBorderLeft : @5px solid @secondaryColor;
+@tabletCalloutBorderLeft : @10px solid @secondaryColor;
+
+/* Text */
+@quoteColor            : @japaneseIndigo;
+@mobileQuoteFontSize   : 1rem;
+@tabletQuoteFontSize   : @h6;
+@computerQuoteFontSize : @h5;
+@quoteFontWeight       : 400;
+
+/* Layout */
+@calloutBorder        : none;
+@calloutBoxShadow     : none;
+@calloutBorderRadius  : 0;
+@calloutPadding       : 0;

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

@@ -33,4 +33,4 @@
 /*-------------------
       login.less
 --------------------*/
-@loginContainerMaxWidth: 680px !important;
+@loginContainerMaxWidth: 376px !important;

package/theme/themes/eea/extras/{pullquote.less → quote.less}

@@ -1,15 +1,15 @@
 @type: 'extra';
-@element: 'pullquote';
+@element: 'quote';
 
 @import (multiple) '../../theme.config';
 
 /*******************************
-            Pullquote
+            Quote
 *******************************/
 
-.eea.pullquote {
-  padding: @pullquotePadding;
-  margin: @pullquoteMargin;
+.eea.quote {
+  padding: @quotePadding;
+  margin: @quoteMargin;
   word-break: @contentWordBreak;
   hyphens: @contentWordBreakHyphens;
 
@@ -36,23 +36,23 @@
     }
   }
 
-  .author {
-    color: @authorTextColor;
-    text-align: @authorTextAlign;
-    font-weight: @authorFontWeight;
-    font-size: @authorFontSize;
-    margin: @authorMargin;
+  .source {
+    color: @sourceTextColor;
+    text-align: @sourceTextAlign;
+    font-weight: @sourceFontWeight;
+    font-size: @sourceFontSize;
+    margin: @sourceMargin;
   }
 
-  .meta {
-    text-align: @metaTextAlign;
-    font-weight: @metaFontWeight;
-    font-size: @metaFontSize;
+  .info {
+    text-align: @extraTextAlign;
+    font-weight: @extraFontWeight;
+    font-size: @extraFontSize;
   }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .eea.pullquote {
+  .eea.quote {
     .quotes.wrapper {
       .quote {
         padding: @tabletQuotePadding;
@@ -63,14 +63,14 @@
       }
     }
   }
-  .eea.pullquote.left {
+  .eea.quote.left {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatLeftPadding;
+    padding: @quoteFloatLeftPadding;
     float: left;
   }
-  .eea.pullquote.right {
+  .eea.quote.right {
     width: @maxWidthOnFloat;
-    padding: @pullquoteFloatRightPadding;
+    padding: @quoteFloatRightPadding;
     float: right;
   }
 }

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

@@ -0,0 +1,34 @@
+/*******************************
+            Quote
+*******************************/
+
+/* Body */
+@quotePadding           : @largeGap 0;
+@quoteFloatLeftPadding  : @largeGap @hugeGap @largeGap 0;
+@quoteFloatRightPadding : @largeGap 0 @largeGap @hugeGap;
+@quoteMargin            : 0;
+@maxWidthOnFloat            : 50%;
+@contentWordBreak           : break-word;
+@contentWordBreakHyphens    : manual;
+
+/* Quote paragraph */
+@mobileQuotePadding  : 0;
+@tabletQuotePadding  : 0.5rem 0 1rem;
+
+/* Source */
+@sourceTextColor     : @secondaryColor;
+@sourceTextAlign     : right;
+@sourceFontWeight    : @bold;
+@sourceFontSize      : 1.25rem;
+@sourceMargin        : 0;
+
+/* Extra info */
+@extraTextAlign      : right;
+@extraFontWeight     : @normal;
+@extraFontSize       : 1rem;
+
+/* Icon */
+@mobileQuoteIconSize : 2rem;
+@tabletQuoteIconSize : 3rem;
+@quoteIconColor      : @secondaryColor;
+@quoteDownIconFloat  : right;

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

@@ -8,8 +8,15 @@
 --------------------*/
 
 .eea.testimonial {
+  display: flex;
+  flex-direction: column;
+  gap: @testimonialGap;
   width: @testimonialWidth;
 
+  .eea.pullquote {
+    padding: 1.25rem 0 0;
+  }
+
   .avatar-wrapper {
     display: flex;
     justify-content: center;
@@ -17,12 +24,45 @@
     height: @testimonialAvatarWrapperHeight;
   }
 
-  .content .title {
+  .ui.card.rounded {
+    flex-direction: row-reverse;
+    align-items: center;
+  }
+}
+
+.eea.testimonial .content h3.title {
+  margin: @testimonialContentTitleMarginVertical
+    @mobileTestimonialContentTitleMarginHorizontal;
+  font-weight: @testimonialContentTitleFontWeight;
+  color: @testimonialContentTitleColor;
+}
+
+.eea.testimonial .ui.grid div:first-child {
+  order: 1;
+}
+
+
+@media only screen and (min-width: @tabletBreakpoint) {
+
+  .eea.testimonial .ui.card.rounded {
+    flex-direction: column;
+  }
+  
+  .eea.testimonial .content h3.title {
     margin: @testimonialContentTitleMarginVertical
-      @testimonialContentTitleMarginHorizontal;
-    font-weight: @testimonialContentTitleFontWeight;
-    font-size: @testimonialContentTitleFontSize;
-    letter-spacing: @testimonialContentTitleLetterSpacing;
-    color: @testimonialContentTitleColor;
+      @tabletTestimonialContentTitleMarginHorizontal;
+  }
+
+  .eea.testimonial .ui.grid div:first-child {
+    order: 0;
   }
 }
+
+// Override image default size for mobile
+@media only screen and (max-width: @largestMobileScreen) {
+  .eea.testimonial .ui.card.rounded img {
+    width: @mobileCardImageWidth;
+    height: @mobileCardImageHeight;
+  }
+}
+

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

@@ -4,10 +4,18 @@
 
 
 @testimonialWidth                           : 100%;
+@testimonialGap                             : @largeGap;
 @testimonialAvatarWrapperHeight             : 100%;
-@testimonialContentTitleMarginVertical      : 0;
-@testimonialContentTitleMarginHorizontal    : 2rem;
-@testimonialContentTitleFontWeight          : 500;
-@testimonialContentTitleFontSize            : 36px;
-@testimonialContentTitleLetterSpacing       : -0.015em;
-@testimonialContentTitleColor               : @deepBlue;
+
+/* Pullquote */
+
+/* Title */
+@testimonialContentTitleMarginVertical         : 0;
+@mobileTestimonialContentTitleMarginHorizontal : 0;
+@tabletTestimonialContentTitleMarginHorizontal : 3.125rem;
+@testimonialContentTitleFontWeight             : 500;
+@testimonialContentTitleColor                  : @deepBlue;
+
+/* Image */
+@mobileCardImageWidth  : 100px;
+@mobileCardImageHeight : 100px;

package/theme/themes/eea/globals/site.overrides

@@ -2,6 +2,8 @@
         Global Overrides
 *******************************/
 
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
+
 /* Heading size adjustment */
 @media only screen and (min-width: @tabletBreakpoint) {
   h1 {

package/theme/themes/eea/globals/site.variables

@@ -2,6 +2,8 @@
          Site Settings
 *******************************/
 
+@import '@eeacms/volto-eea-design-system/../theme/themes/eea/tokens/tokens';
+
 /*-------------------
        Fonts
 --------------------*/
@@ -55,6 +57,7 @@
 
 @primaryColor         : @darkCerulean;
 @secondaryColor       : @pineGreen;
+@tertiaryColor        : @deepBlue;
 
 @lightPrimaryColor    : @mediumPersianBlue;
 @lightSecondaryColor  : @darkCyan;
@@ -69,12 +72,12 @@
 @headerLineHeight : 1.25;
 @headerFontWeight : 700;
 
-@h1 : unit((48 / 16), rem);
-@h2 : unit((40 / 16), rem);
-@h3 : unit((36 / 16), rem);
-@h4 : unit((24 / 16), rem);
-@h5 : unit((20 / 16), rem);
-@h6 : unit((18 / 16), rem);
+@h1 : unit((48 / @fontSize), rem);
+@h2 : unit((40 / @fontSize), rem);
+@h3 : unit((36 / @fontSize), rem);
+@h4 : unit((24 / @fontSize), rem);
+@h5 : unit((20 / @fontSize), rem);
+@h6 : unit((18 / @fontSize), rem);
 
 /*--------------
    Form Input
@@ -748,6 +751,15 @@
 @62px : unit( (62 / @emSize), rem);
 @63px : unit( (63 / @emSize), rem);
 @64px : unit( (64 / @emSize), rem);
+// extra sizes
+@68px : unit( (68 / @emSize), em);
+@72px : unit( (72 / @emSize), em);
+@76px : unit( (76 / @emSize), em);
+@80px : unit( (80 / @emSize), rem);
+@96px : unit( (96 / @emSize), rem);
+@112px : unit( (112 / @emSize), rem);
+@128px : unit( (128 / @emSize), rem);
+@140px : unit( (140 / @emSize), rem);
 
 @relative1px  : unit( (1 / @emSize), em);
 @relative2px  : unit( (2 / @emSize), em);
@@ -813,6 +825,15 @@
 @relative62px : unit( (62 / @emSize), em);
 @relative63px : unit( (63 / @emSize), em);
 @relative64px : unit( (64 / @emSize), em);
+// extra sizes
+@relative68px : unit( (68 / @emSize), em);
+@relative72px : unit( (72 / @emSize), em);
+@relative76px : unit( (76 / @emSize), em);
+@relative80px : unit( (80 / @emSize), em);
+@relative96px : unit( (96 / @emSize), em);
+@relative112px : unit( (112 / @emSize), em);
+@relative128px : unit( (128 / @emSize), em);
+@relative140px : unit( (140 / @emSize), em);
 
 /* Columns */
 @oneMobile     : (1 / @mobileColumns * 100%);

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

@@ -0,0 +1,31 @@
+// Color utilities
+.color-fg-primary { color: @primaryColor !important; }
+.color-fg-secondary { color: @secondaryColor !important; }
+.color-fg-tertiary { color: @tertiaryColor !important; }
+.color-fg-white { color: @white !important; }
+
+.color-bg-primary { background-color: @primaryColor !important; }
+.color-bg-secondary { background-color: @secondaryColor !important; }
+.color-bg-tertiary { background-color: @tertiaryColor !important; }
+.color-bg-grey { background-color: #F9F9F9 !important; }
+
+// Display utilities
+.d-flex { display: flex !important; }
+.flex-items-start { align-items: flex-start !important; }
+.flex-items-end { align-items: flex-end !important; }
+.flex-items-center { align-items: center !important; }
+
+// Align text utilities
+.text-left { text-align: left !important; }
+.text-center { text-align: center !important;}
+.text-right { text-align: right !important; }
+
+//Quotes utilities
+.quoted::before {
+  content: "\ec51";
+  font-family: 'remixicon' !important;
+}
+.quoted::after {
+  content: "\ec52";
+  font-family: 'remixicon' !important;
+}

package/theme/themes/eea/modules/accordion.variables

@@ -99,8 +99,8 @@
 
 /* Styled Title States */
 @styledTitleHoverBackground: transparent;
-@styledTitleHoverColor: @teal;
-@styledActiveTitleBackground: @teal;
+@styledTitleHoverColor: @activeTitleBackground;
+@styledActiveTitleBackground: @activeTitleBackground;
 @styledActiveTitleColor: @white;
 
 /* Styled Child Title States */

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

@@ -0,0 +1,14 @@
+@border-size-0: 0px;
+@border-size-1: 1px;
+@border-size-2: 2px;
+@border-size-3: 3px;
+@border-size-4: 5px;
+@border-size-5: 10px;
+@radius-0: 0px;
+@radius-1: 2px;
+@radius-2: 5px;
+@radius-3: 1rem;
+@radius-4: 2rem;
+@radius-5: 4rem;
+@radius-6: 8rem;
+@radius-round: 1e5px;

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

@@ -0,0 +1,63 @@
+@brown-0: #FFF6EC;
+@brown-1: #FFEDD8;
+@brown-2: #E7BC91;
+@brown-3: #BC8A5F;
+@brown-4: #8B5E34;
+@brown-5: #603808;
+@brown-6: #3D2201;
+
+@purple-0: #EFEBF2;
+@purple-1: #DFD6E7;
+@purple-2: #BEADCE;
+@purple-3: #9E84B6;
+@purple-4: #7D5B9D;
+@purple-5: #5C3285;
+@purple-6: #3C096C;
+
+@red-0: #FBEEF8;
+@red-1: #F6DDF0;
+@red-2: #E7B2C0;
+@red-3: #D78890;
+@red-4: #C65B59;
+@red-5: #B83230;
+@red-6: #5C1918;
+
+@green-0: #C8FFF8;
+@green-1: #85FFF1;
+@green-2: #00F5D8;
+@green-3: #00CCB4;
+@green-4: #00A390;
+@green-5: #007B6C;
+@green-6: #005248;
+
+@yellow-0: #FEF6CD;
+@yellow-1: #FBEC9B;
+@yellow-2: #FAD936;
+@yellow-3: #FAC50D;
+@yellow-4: #FDAF20;
+@yellow-5: #FF9933;
+@yellow-6: #E56B38;
+
+@blue-0: #A0D7FF;
+@blue-1: #47B3FF;
+@blue-2: #0A99FF;
+@blue-3: #0083E0;
+@blue-4: #006BB8;
+@blue-5: #004B7F;
+@blue-6: #003052;
+
+@blue-grey-0: #DAE8F4;
+@blue-grey-1: #ACCAE5;
+@blue-grey-2: #8EA6C2;
+@blue-grey-3: #6989A5;
+@blue-grey-4: #4C677F;
+@blue-grey-5: #3D5265;
+@blue-grey-6: #2E3E4C;
+
+@grey-0: #FFFFFF;
+@grey-1: #F9F9F9;
+@grey-2: #E6E7E8;
+@grey-3: #BCBEC0;
+@grey-4: #808285;
+@grey-5: #323232;
+@grey-6: #000000;

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

@@ -0,0 +1,38 @@
+@font-weight-1: 100;
+@font-weight-2: 200;
+@font-weight-3: 300;
+@font-weight-4: 400;
+@font-weight-5: 500;
+@font-weight-6: 600;
+@font-weight-7: 700;
+@font-weight-8: 800;
+@font-weight-9: 900;
+@font-lineheight-00: .95;
+@font-lineheight-0: 1.1;
+@font-lineheight-1: 1.25;
+@font-lineheight-2: 1.375;
+@font-lineheight-3: 1.5;
+@font-lineheight-4: 1.75;
+@font-lineheight-5: 2;
+@font-letterspacing-0: -.05em;
+@font-letterspacing-1: .025em;
+@font-letterspacing-2: .050em;
+@font-letterspacing-3: .075em;
+@font-letterspacing-4: .150em;
+@font-letterspacing-5: .500em;
+@font-letterspacing-6: .750em;
+@font-letterspacing-7: 1em;
+@font-size-00: .75rem;
+@font-size-0: .875rem;
+@font-size-1: 1rem;
+@font-size-2: 1.1rem;
+@font-size-3: 1.25rem;
+@font-size-4: 1.5rem;
+@font-size-5: 2rem;
+@font-size-6: 2.5rem;
+@font-size-7: 3rem;
+@font-size-8: 3.5rem;
+@font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
+@font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
+@font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
+@font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);

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

@@ -0,0 +1,41 @@
+@shadow-color: 220, 3%, 15%;
+@shadow-strength: 1%;
+
+@shadow-0: none;
+@shadow-1: 0 1px 2px -1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@shadow-2: 
+  0 3px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 14px -5px hsla(@shadow-color, calc(@shadow-strength + 5%));
+@shadow-3: 
+  0 -1px 3px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 2px -5px hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 5px -5px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 4px 12px -5px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 12px 15px -5px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-4: 
+  0 -2px 5px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-5: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 2px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 10px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 20px 20px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 40px 40px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@shadow-6: 
+  0 -1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 3px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 7px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 12px 10px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 22px 18px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 41px 33px -2px hsla(@shadow-color, calc(@shadow-strength + 6%)),
+  0 100px 80px -2px hsla(@shadow-color, calc(@shadow-strength + 7%));
+@inner-shadow-0: inset 0 0 0 1px hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-1: inset 0 1px 2px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-2: inset 0 1px 4px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-3: inset 0 2px 8px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));
+@inner-shadow-4: inset 0 2px 14px 0 hsla(@shadow-color, calc(@shadow-strength + 9%));

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

@@ -0,0 +1,6 @@
+// Blob
+@radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
+@radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
+@radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
+@radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
+@radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;