@onemrvapublic/design-system-theme 20.2.1-develop.1 → 20.2.1-develop.3

package/index.scss

@@ -1,6 +1,6 @@
 @forward './overrides/button' as button-*;
 @forward './overrides/button-toggle' as button-toggle-*;
-@forward './overrides/cards' as cards-*;
+@forward 'overrides/card' as cards-*;
 @forward './overrides/checkbox' as checkbox-*;
 @forward './overrides/chips' as chips-*;
 @forward './overrides/datepicker' as datepicker-*;
@@ -50,7 +50,7 @@
 @use 'overrides/button-toggle';
 @use 'overrides/button';
 @use 'overrides/checkbox';
-@use 'overrides/cards';
+@use 'overrides/card';
 @use 'overrides/carousel';
 @use 'overrides/chips';
 @use 'overrides/datepicker';
@@ -185,7 +185,7 @@
   @include button.override();
   @include button-toggle.override();
   @include checkbox.override();
-  @include cards.override();
+  @include card.override();
   @include chips.override();
   @include carousel.override();
   @include datepicker.override();

package/overrides/_card.scss

@@ -0,0 +1,30 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.card-overrides(
+    (
+      title-text-font: var(--mat-sys-title-large-font),
+      title-text-line-height: var(--mat-sys-title-large-height),
+      title-text-size: var(--mat-sys-title-large-size),
+      title-text-weight: var(--mat-sys-title-large-weight),
+      elevated-container-shape: var(--border-radius),
+      elevated-container-elevation: none,
+      elevated-container-color: var(--mat-sys-surface),
+    )
+  );
+  mat-card {
+    img.mat-mdc-card-image {
+      border-radius: var(--border-radius);
+    }
+    mat-card-content {
+      p {
+        margin: var(--spacer) 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-theme",
-    "version": "v20.2.1-develop.1",
+    "version": "v20.2.1-develop.3",
     "publishConfig": {
         "access": "public"
     },

package/utilities/_fonts.scss

@@ -52,91 +52,91 @@
       body-large: 400 1.125rem/1.625rem Source Sans Pro,
       body-large-font: Source Sans Pro,
       body-large-size: 1.125rem,
-      body-large-height: 1.625rem,
+      body-large-line-height: 1.625rem,
       body-large-weight: 400,
 
       body-medium: 400 1rem/1.625rem Source Sans Pro,
       body-medium-font: Source Sans Pro,
       body-medium-size: 1rem,
-      body-medium-height: 1.625rem,
+      body-medium-line-height: 1.625rem,
       body-medium-weight: 400,
 
       body-small: 400 0.875rem/1.3125rem Source Sans Pro,
       body-small-font: Source Sans Pro,
       body-small-size: 0.875rem,
-      body-small-height: 1.3125rem,
+      body-small-line-height: 1.3125rem,
       body-small-weight: 400,
 
       display-small: 600 2rem/3.25rem Poppins,
       display-small-font: Poppins,
       display-small-size: 2rem,
-      display-small-height: 3.25rem,
+      display-small-line-height: 3.25rem,
       display-small-weight: 600,
 
       display-medium: 700 4.5rem/6.25rem Poppins,
       display-medium-font: Poppins,
       display-medium-size: 4.5rem,
-      display-medium-height: 6.25rem,
+      display-medium-line-height: 6.25rem,
       display-medium-weight: 700,
 
       display-large: 700 9.25rem/11.25rem Poppins,
       display-large-font: Poppins,
       display-large-size: 9.25rem,
-      display-large-height: 11.25rem,
+      display-large-line-height: 11.25rem,
       display-large-weight: 700,
 
       headline-small: 600 1.25rem/2.25rem Poppins,
       headline-small-font: Poppins,
       headline-small-size: 1.25rem,
-      headline-small-height: 2.25rem,
+      headline-small-line-height: 2.25rem,
       headline-small-weight: 600,
 
       headline-medium: 600 1.5rem/2.5rem Poppins,
       headline-medium-font: Poppins,
       headline-medium-size: 1.5rem,
-      headline-medium-height: 2.5rem,
+      headline-medium-line-height: 2.5rem,
       headline-medium-weight: 600,
 
       headline-large: 600 1.625rem/2.75rem Poppins,
       headline-large-font: Poppins,
       headline-large-size: 1.625rem,
-      headline-large-height: 2.75rem,
+      headline-large-line-height: 2.75rem,
       headline-large-weight: 600,
 
       label-large: 500 1rem/1.3125rem Poppins,
       label-large-font: Poppins,
       label-large-size: 1rem,
-      label-large-height: 1.3125rem,
+      label-large-line-height: 1.3125rem,
       label-large-weight: 500,
 
       label-medium: 400 0.875rem/1.3125rem Poppins,
       label-medium-font: Poppins,
       label-medium-size: 0.875rem,
-      label-medium-height: 1.3125rem,
+      label-medium-line-height: 1.3125rem,
       label-medium-weight: 400,
 
       label-small: 400 0.75rem/1.125rem Source Sans Pro,
       label-small-font: Source Sans Pro,
       label-small-size: 0.75rem,
-      label-small-height: 1.125rem,
+      label-small-line-height: 1.125rem,
       label-small-weight: 400,
 
       title-small: 600 0.75rem/1.3125rem Poppins,
       title-small-font: Poppins,
       title-small-size: 0.75rem,
-      title-small-height: 1.3125rem,
+      title-small-line-height: 1.3125rem,
       title-small-weight: 600,
 
       title-medium: 600 1rem/1.75rem Poppins,
       title-medium-font: Poppins,
       title-medium-size: 1rem,
-      title-medium-height: 1.75rem,
+      title-medium-line-height: 1.75rem,
       title-medium-weight: 600,
 
       title-large: 600 1.125rem/2rem Poppins,
       title-large-font: Poppins,
       title-large-size: 1.125rem,
-      title-large-height: 2rem,
+      title-large-line-height: 2rem,
       title-large-weight: 600,
 
       level1: 0px 3px 3px 0px rgba(49, 47, 59, 0.32),

package/overrides/_cards.scss

@@ -1,11 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-@mixin override() {
-  @include mat.card-overrides(
-    (
-      elevated-container-shape: 20px,
-      outlined-container-shape: 20px,
-    )
-  );
-}