@innovaccer/design-system 2.21.0 → 2.23.0

package/css/gulpfile.js

@@ -7,7 +7,7 @@ const postcssColorMod = require('postcss-color-mod-function');
 const cleaner = require('gulp-clean');
 
 const materialIcons = './material-design-icons/iconfont/material-icons.css';
-const materialFont = './material-design-icons/iconfont/*.{ttf,otf}';
+const materialFont = './material-design-icons/iconfont/*.{ttf,otf,woff2}';
 
 const sources = [
   './src/tokens/*.css',

package/css/material-design-icons/iconfont/material-icons.css

@@ -1,20 +1,16 @@
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  src: url(MaterialSymbolsOutlined.ttf);
-}
-
+/* fallback */
 @font-face {
   font-family: 'Material Symbols Rounded';
   font-style: normal;
-  src: url(MaterialSymbolsRounded.ttf);
+  font-weight: 300;
+  src: url(MaterialSymbolsRounded.woff2) format('woff2');
 }
 
 .material-icons {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
-  font-size: 16px;    /* preferred icon size */
+  font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
@@ -26,12 +22,10 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.material-icons-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-size: 24px; /* Preferred icon size */
+.material-icons-rounded {
+  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 24;
 }
 
-.material-icons-rounded {
-  font-family: 'Material Symbols Rounded';
-  font-size: 24px; /* Preferred icon size */
+.material-icons-outlined {
+  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
 }

package/css/src/components/pageHeader.css

@@ -1,9 +1,9 @@
-.PageHeader-wrapper {
-  padding: var(--spacing) var(--spacing-2);
+.PageHeader {
+  width: 100%;
 }
 
-.PageHeader-wrapper--separator {
-  border-bottom: var(--border);
+.PageHeader-wrapper {
+  padding: var(--spacing) var(--spacing-2) var(--spacing) 0;
 }
 
 .PageHeader-wrapper--withTabs {
@@ -36,12 +36,12 @@
   align-items: center;
 }
 
-.PageHeader-statusWrapper .StatusHints {
+.PageHeader-statusWrapper .StatusHint {
   margin-right: var(--spacing);
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
 }
 
 .PageHeader .PageHeader-navigationWrapper {
@@ -50,6 +50,7 @@
   margin-top: 0 !important;
   padding-right: var(--spacing);
   padding-left: var(--spacing);
+  display: flex;
 }
 
 .PageHeader-title {

package/css/src/components/selectionCard.css

@@ -0,0 +1,91 @@
+.Selection-card {
+  cursor: pointer;
+  border-radius: var(--spacing-m);
+  position: relative;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card:hover {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card:focus,
+.Selection-card:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-light);
+}
+
+.Selection-card:active {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Selection-card--disabled {
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
+}
+
+/* selected states */
+
+.Selection-card--selected {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+}
+
+.Selection-card--selected:hover {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-dark);
+}
+
+.Selection-card--selected:focus,
+.Selection-card--selected:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-spread) var(--primary-shadow), inset 0 0 0 var(--spacing-s) var(--primary);
+}
+
+.Selection-card--selected:active {
+  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-darker);
+}
+
+.Selection-card--selected-disabled {
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
+}
+
+/* overlay classes */
+
+.Selection-card-overlay {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  position: absolute;
+  pointer-events: none;
+  border-radius: var(--spacing-m);
+}
+
+.Selection-card:active .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 10%;
+}
+
+.Selection-card--disabled .Selection-card-overlay {
+  background-color: var(--secondary-lightest);
+  opacity: 50%;
+}
+
+.Selection-card--selected .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 4%;
+}
+
+.Selection-card--selected:active .Selection-card-overlay {
+  background-color: var(--primary);
+  opacity: 4%;
+}
+
+.Selection-card--selected-disabled .Selection-card-overlay {
+  background-color: var(--primary-lightest);
+  opacity: 50%;
+}