@innovaccer/design-system 2.19.0 → 2.21.0

package/css/gulpfile.js

@@ -1,7 +1,7 @@
 const postcss = require('gulp-postcss');
 const gulp = require('gulp');
-const autoprefixer = require('autoprefixer')
-const sourcemaps = require('gulp-sourcemaps')
+const autoprefixer = require('autoprefixer');
+const sourcemaps = require('gulp-sourcemaps');
 const concat = require('gulp-concat');
 const postcssColorMod = require('postcss-color-mod-function');
 const cleaner = require('gulp-clean');
@@ -18,10 +18,8 @@ const sources = [
   './src/utils/*.css',
 ];
 
-function clean () {
-  return gulp
-    .src('./dist/*', { allowEmpty: true })
-    .pipe(cleaner());
+function clean() {
+  return gulp.src('./dist/*', { allowEmpty: true }).pipe(cleaner());
 }
 
 function css() {
@@ -36,9 +34,7 @@ function css() {
 }
 
 function font() {
-  return gulp
-    .src(materialFont)
-    .pipe(gulp.dest('./dist'));
+  return gulp.src([materialFont]).pipe(gulp.dest('./dist'));
 }
 
 exports.build = gulp.series(clean, gulp.parallel(css, font));
@@ -46,5 +42,5 @@ exports.build = gulp.series(clean, gulp.parallel(css, font));
 exports.clean = clean;
 
 gulp.task('watch', () => {
-  gulp.watch(sources, gulp.series(css))
-});
+  gulp.watch(sources, gulp.series(css));
+});

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

@@ -1,37 +1,13 @@
-/* fallback */
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIcons-Regular.ttf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsOutlined-Regular.otf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Round';
-  font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsRound-Regular.otf);
-}
-/* fallback */
-@font-face {
-  font-family: 'Material Icons Sharp';
+  font-family: 'Material Symbols Outlined';
   font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsSharp-Regular.otf);
+  src: url(MaterialSymbolsOutlined.ttf);
 }
-/* fallback */
+
 @font-face {
-  font-family: 'Material Icons Two Tone';
+  font-family: 'Material Symbols Rounded';
   font-style: normal;
-  font-weight: 400;
-  src: url(MaterialIconsTwoTone-Regular.otf);
+  src: url(MaterialSymbolsRounded.ttf);
 }
 
 .material-icons {
@@ -51,65 +27,11 @@
 }
 
 .material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-round {
-  font-family: 'Material Icons Round';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+  font-family: 'Material Symbols Outlined';
+  font-size: 24px; /* Preferred icon size */
 }
 
-.material-icons-sharp {
-  font-family: 'Material Icons Sharp';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+.material-icons-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-size: 24px; /* Preferred icon size */
 }
-
-.material-icons-two-tone {
-  font-family: 'Material Icons Two Tone';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px;    /* preferred icon size */
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}

package/css/src/components/actionCard.css

@@ -0,0 +1,40 @@
+.ActionCard {
+  cursor: pointer;
+  border-radius: var(--spacing-m);
+  width: 100%;
+  border: var(--spacing-xs) solid var(--secondary-dark);
+}
+
+.ActionCard:hover {
+  box-shadow: var(--shadow-m);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.ActionCard:focus,
+.ActionCard:focus-visible {
+  outline: none;
+  border: var(--spacing-xs) solid var(--secondary-light);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.ActionCard:active {
+  box-shadow: var(--shadow-l);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.ActionCard--disabled {
+  pointer-events: none;
+  position: relative;
+  border: var(--spacing-xs) solid var(--secondary-lighter);
+}
+
+.ActionCard-overlay--disabled {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  opacity: 50%;
+  background: var(--secondary-light);
+}

package/css/src/components/calendar.css

@@ -142,6 +142,11 @@
   border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
 }
 
+.Calendar-valueWrapper--hoverDate {
+  background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);
+  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+}
+
 .Calendar-valueWrapper--endError {
   background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
 }
@@ -169,6 +174,10 @@
   background: var(--secondary);
 }
 
+.Calendar-value:active .Calendar-value--currDate {
+  color: var(--primary-dark);
+}
+
 .Calendar-value--start:hover,
 .Calendar-value--end:hover {
   background: var(--primary-lightest);
@@ -201,6 +210,10 @@
   background: var(--primary-lighter);
 }
 
+.Calendar-value--currDate:active {
+  color: var(--primary-dark);
+}
+
 .Calendar-value--active {
   background: var(--primary);
   font-weight: var(--font-weight-bold);
@@ -277,3 +290,23 @@
 .Calendar-eventsIndicator--active {
   background-color: var(--white);
 }
+
+.Calendar-valueWrapper--inStartRange {
+  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+}
+
+.Calendar-valueWrapper--inEndRange {
+  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
+  background: var(--primary-lightest);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
+  background: var(--primary-lighter);
+}
+
+.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:active {
+  background: var(--primary-light);
+}

package/css/src/components/chipInput.css

@@ -34,6 +34,11 @@
   padding-right: var(--spacing);
 }
 
+.ChipInput--error,
+.ChipInput--error:focus-within {
+  box-shadow: inset 0 0 0 var(--spacing-xs) var(--alert);
+}
+
 .ChipInput-wrapper {
   display: flex;
   flex: 100%;
@@ -46,6 +51,10 @@
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
+.ChipInput-border--error:focus-within {
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
+}
+
 .ChipInput-input {
   border: none;
   outline: none;