@drivy/cobalt 0.36.1 → 0.37.1

package/components/Calendar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/Calendar/utils.ts"],"sourcesContent":["import setISODay from \"date-fns/setISODay\"\nimport startOfMonth from \"date-fns/startOfMonth\"\nimport getDay from \"date-fns/getDay\"\nimport endOfMonth from \"date-fns/endOfMonth\"\nimport eachDayOfInterval from \"date-fns/eachDayOfInterval\"\n\nexport const getWeekDays = () => {\n  const now = new Date().setHours(0, 0, 0, 0)\n  return [...Array(7).keys()].map((index) => setISODay(now, index + 1))\n}\n\nexport const getMonthDaysByWeeks = (monthDate: Date): Date[][] => {\n  const firstDayOfMonth = startOfMonth(monthDate)\n  const firstDayOfMonthOffset = getDay(firstDayOfMonth) - 1\n  const lastDayOfMonth = endOfMonth(monthDate)\n  const days = eachDayOfInterval({\n    start: firstDayOfMonth,\n    end: lastDayOfMonth,\n  })\n\n  return days.reduce((acc: Date[][], day, index) => {\n    if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {\n      acc.push([])\n    }\n    acc[acc.length - 1].push(day)\n    return acc\n  }, [])\n}\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAA;AACvE,EAAC;AAEY,MAAA,mBAAmB,GAAG,CAAC,SAAe,KAAc;AAC/D,IAAA,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,CAAC,CAAA;IAC/C,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;AACzD,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAC5C,MAAM,IAAI,GAAG,iBAAiB,CAAC;AAC7B,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,GAAG,EAAE,cAAc;AACpB,KAAA,CAAC,CAAA;IAEF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAa,EAAE,GAAG,EAAE,KAAK,KAAI;AAC/C,QAAA,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,qBAAqB,IAAI,CAAC,KAAK,CAAC,EAAE;AAC5D,YAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACb,SAAA;AACD,QAAA,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC7B,QAAA,OAAO,GAAG,CAAA;KACX,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/Calendar/utils.ts"],"sourcesContent":["import setISODay from \"date-fns/setISODay\"\nimport startOfMonth from \"date-fns/startOfMonth\"\nimport getDay from \"date-fns/getDay\"\nimport endOfMonth from \"date-fns/endOfMonth\"\nimport eachDayOfInterval from \"date-fns/eachDayOfInterval\"\n\nexport const getWeekDays = (isSundayFirstDayOfWeek = false) => {\n  const extraIndex = isSundayFirstDayOfWeek ? 0 : 1\n  const now = new Date().setHours(0, 0, 0, 0)\n  return [...Array(7).keys()].map((index) => setISODay(now, index + extraIndex))\n}\n\nexport const getMonthDaysByWeeks = (\n  monthDate: Date,\n  isSundayFirstDayOfWeek = false\n): Date[][] => {\n  const extraOffset = isSundayFirstDayOfWeek ? 0 : 1\n  const firstDayOfMonth = startOfMonth(monthDate)\n  const firstDayOfMonthOffset = getDay(firstDayOfMonth) - extraOffset\n  const lastDayOfMonth = endOfMonth(monthDate)\n  const days = eachDayOfInterval({\n    start: firstDayOfMonth,\n    end: lastDayOfMonth,\n  })\n\n  return days.reduce((acc: Date[][], day, index) => {\n    if (index === 0 || (index + firstDayOfMonthOffset) % 7 === 0) {\n      acc.push([])\n    }\n    acc[acc.length - 1].push(day)\n    return acc\n  }, [])\n}\n"],"names":[],"mappings":";;;;;;MAMa,WAAW,GAAG,CAAC,sBAAsB,GAAG,KAAK,KAAI;IAC5D,MAAM,UAAU,GAAG,sBAAsB,GAAG,CAAC,GAAG,CAAC,CAAA;AACjD,IAAA,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC,CAAA;AAChF,EAAC;AAEY,MAAA,mBAAmB,GAAG,CACjC,SAAe,EACf,sBAAsB,GAAG,KAAK,KAClB;IACZ,MAAM,WAAW,GAAG,sBAAsB,GAAG,CAAC,GAAG,CAAC,CAAA;AAClD,IAAA,MAAM,eAAe,GAAG,YAAY,CAAC,SAAS,CAAC,CAAA;IAC/C,MAAM,qBAAqB,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,WAAW,CAAA;AACnE,IAAA,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAC5C,MAAM,IAAI,GAAG,iBAAiB,CAAC;AAC7B,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,GAAG,EAAE,cAAc;AACpB,KAAA,CAAC,CAAA;IAEF,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAa,EAAE,GAAG,EAAE,KAAK,KAAI;AAC/C,QAAA,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,GAAG,qBAAqB,IAAI,CAAC,KAAK,CAAC,EAAE;AAC5D,YAAA,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACb,SAAA;AACD,QAAA,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC7B,QAAA,OAAO,GAAG,CAAA;KACX,EAAE,EAAE,CAAC,CAAA;AACR;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.36.1",
+  "version": "0.37.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -121,7 +121,7 @@
     "storybook:build": "storybook build",
     "build:icons": "./scripts/buildIcons.sh",
     "build:illustrations": "./scripts/buildIllustrations.sh",
-    "build:theme": "ts-node-esm ./scripts/buildThemeCSSVariables.ts",
+    "build:theme": "ts-node-esm ./scripts/buildThemeCSSVariables.mts",
     "test": "jest",
     "percy": "storybook build && percy-storybook --widths=320,1280",
     "typecheck": "tsc",

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -3,16 +3,8 @@
 .cobalt-CalendarRangePicker {
   $calendar-range-day-color: var(--c-background-accentAlt);
   $calendar-range-day-invalid-color: var(--c-background-errorAlt);
-  $calendar-out-of-range-color: var(--c-background-error);
 
-  $calendar-day-inner-height: 24px;
-  $calendar-day-padding: 6px;
-  $calendar-day-size: $calendar-day-inner-height + ($calendar-day-padding * 2);
-  $calendar-start-end-size: $calendar-day-inner-height + 8px;
-
-  @function crossMonthBorder($color) {
-    @return 10px solid $color;
-  }
+  --calendar-day-size: 48px;
 
   @mixin start-range($color) {
     background-image: linear-gradient(to right, transparent 50%, $color 50%);
@@ -23,40 +15,48 @@
   }
 
   @mixin start-end-day {
-    @include bg-color(accent);
-    @include text-color(inversed);
-
     position: absolute;
     z-index: -1;
-    top: math.div($calendar-day-inner-height - $calendar-start-end-size, 2);
+    top: 0;
     left: 0;
     right: 0;
 
     margin: auto;
 
-    height: $calendar-start-end-size;
-    width: $calendar-start-end-size;
+    height: var(--calendar-day-size);
+    width: var(--calendar-day-size);
 
-    content: "";
+    box-sizing: border-box;
 
-    border-radius: 50%;
+    content: "";
 
-    box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
+    border-radius: 8px;
   }
 
   position: relative;
 
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @include breakpoint($from: sm) {
+    --calendar-day-size: 42px;
+  }
+
   &__months-container {
     display: flex;
-  }
+    flex-direction: column;
+    justify-content: center;
+    gap: spacing(md);
 
-  &__months-container > &__month {
-    margin: 0 8px;
+    @include breakpoint($from: sm) {
+      flex-direction: row;
+      gap: spacing(sm);
+    }
   }
 
   &__month {
     @include bg-color(secondary);
-    flex: 1;
   }
 
   &__month-header {
@@ -97,30 +97,53 @@
   }
 
   &__day {
+    @include text-color(base);
+
     position: relative;
 
     z-index: 1;
 
-    padding: $calendar-day-padding 0;
+    height: var(--calendar-day-size);
+    width: var(--calendar-day-size);
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
 
     box-sizing: border-box;
 
     flex-basis: calc(100% / 7);
 
-    min-width: $calendar-start-end-size;
-
     text-align: center;
 
     font-size: 13px;
 
-    line-height: $calendar-day-inner-height;
+    line-height: var(--calendar-day-size);
 
-    cursor: pointer;
+    font-weight: 600;
+
+    .cobalt-CalendarRangePicker__day-notification-container {
+      position: absolute;
 
-    .cobalt-CalendarRangePicker__day-inner {
-      position: relative;
+      bottom: 0;
 
-      z-index: 1;
+      width: 100%;
+      height: 18px;
+
+      display: flex;
+
+      justify-content: center;
+      align-items: center;
+    }
+
+    .cobalt-CalendarRangePicker__day-notification {
+      width: 4px;
+      height: 4px;
+
+      border-radius: 50%;
+
+      background-color: var(--c-navy-300);
     }
 
     &--today {
@@ -129,216 +152,130 @@
     }
 
     &--selected {
-      .cobalt-CalendarRangePicker__day-inner {
-        background-color: $calendar-range-day-color;
+      @include text-color(accent);
+
+      background-color: $calendar-range-day-color;
+
+      .cobalt-CalendarRangePicker__day-notification {
+        @include bg-color(accent);
       }
     }
 
     &--disabled {
-      color: var(--c-navy-200);
+      @include text-color(disabled);
 
-      cursor: auto;
+      text-decoration: line-through;
     }
 
-    &--startDay,
-    &--endDay {
-      @include text-color(inversed);
-
-      font-weight: 600;
-
-      .cobalt-CalendarRangePicker__day-inner {
-        background-color: transparent;
-      }
+    &--startDay.cobalt-CalendarRangePicker__day--selected,
+    &--endDay.cobalt-CalendarRangePicker__day--selected {
+      background-color: transparent;
     }
 
     &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include start-range($calendar-range-day-color);
-      }
+      @include start-range($calendar-range-day-color);
     }
 
     &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include end-range($calendar-range-day-color);
-      }
+      @include end-range($calendar-range-day-color);
     }
 
-    &--startDay .cobalt-CalendarRangePicker__day-inner:after,
-    &--endDay .cobalt-CalendarRangePicker__day-inner:after {
-      @include start-end-day;
-    }
-
-    //Start day = end day
-    &--startDay.cobalt-CalendarRangePicker__day--endDay
-      .cobalt-CalendarRangePicker__day-inner:before {
-      @include start-end-day;
-
-      box-shadow:
-        var(--c-background-secondary) 0 0 0 2px,
-        var(--c-background-accent) 0 0 0 4px;
+    &--startDay:not(
+        &--endDay
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+      @include start-range($calendar-range-day-invalid-color);
     }
 
-    // start/end day content when the other one is currently edited + today
-    &--startDay.cobalt-CalendarRangePicker__day--today:not(
-        &--endDay
-      ).cobalt-CalendarRangePicker__day--subdued,
-    &--endDay.cobalt-CalendarRangePicker__day--today:not(
+    &--endDay:not(
         &--startDay
-      ).cobalt-CalendarRangePicker__day--subdued {
-      @include text-color(accent);
-      font-weight: 600;
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+      @include end-range($calendar-range-day-invalid-color);
     }
 
-    // not today
-    &--startDay:not(&--endDay):not(
-        &--today
-      ).cobalt-CalendarRangePicker__day--subdued,
-    &--endDay:not(&--startDay):not(
-        &--today
-      ).cobalt-CalendarRangePicker__day--subdued {
-      @include text-color(base);
-      font-weight: inherit;
+    &--startDay:after,
+    &--endDay:after {
+      @include start-end-day;
+      background-color: $calendar-range-day-color;
     }
 
-    // start/end day background (circle) when the other one is currently edited
-    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--subdued
-      .cobalt-CalendarRangePicker__day-inner:after,
-    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--subdued
-      .cobalt-CalendarRangePicker__day-inner:after {
-      background: $calendar-range-day-color;
-      box-shadow: none;
+    &--active:not(&--invalid) {
+      @include text-color(onAccent);
     }
 
-    &--selected:not(
-        &--startDay
-      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--firstOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before,
-    &--selected:not(
-        &--endDay
-      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--lastOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      position: absolute;
-
-      height: 0;
-      width: 0;
-
-      border-top: 12px solid transparent;
-      border-bottom: 12px solid transparent;
-
-      content: "";
+    &--active .cobalt-CalendarRangePicker__day-notification {
+      @include bg-color(primary);
     }
 
-    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--firstOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      left: -10px;
-
-      border-right: crossMonthBorder($calendar-range-day-color);
+    &--active:not(&--invalid):after {
+      @include bg-color(accent);
     }
 
-    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--lastOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      right: -10px;
+    &--invalid {
+      @include text-color(error);
 
-      border-left: crossMonthBorder($calendar-range-day-color);
-    }
-  }
+      background-color: $calendar-range-day-invalid-color;
 
-  &__month--invalid &__day {
-    &--selected {
-      .cobalt-CalendarRangePicker__day-inner {
+      &:after {
         background-color: $calendar-range-day-invalid-color;
       }
-    }
 
-    &--selected.cobalt-CalendarRangePicker__day--invalid {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include text-color(inversed);
-        background-color: $calendar-out-of-range-color;
+      .cobalt-CalendarRangePicker__day-notification {
+        @include bg-color(error);
       }
     }
 
-    &--startDay,
-    &--startDay.cobalt-CalendarRangePicker__day--invalid,
-    &--endDay,
-    &--endDay.cobalt-CalendarRangePicker__day--invalid {
-      .cobalt-CalendarRangePicker__day-inner {
-        background-color: transparent;
+    &--endDay.cobalt-CalendarRangePicker__day--active.cobalt-CalendarRangePicker__day--invalid:not(
+        &--range
+      ):not(&--startDay) {
+      &:after {
+        @include bg-color(primary);
       }
     }
 
-    // invalid start day range
-    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include start-range($calendar-range-day-invalid-color);
+    &--endDay.cobalt-CalendarRangePicker__day--active.cobalt-CalendarRangePicker__day--invalid {
+      &:after {
+        @include border(error);
+        border-width: 2px;
       }
     }
 
-    // out of range start day range
-    &--startDay:not(
-        &--endDay
-      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include start-range($calendar-out-of-range-color);
-      }
-    }
+    //Start day = end day
+    &--startDay.cobalt-CalendarRangePicker__day--endDay {
+      &:before {
+        @include border(onAccent);
 
-    // end day range
-    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include end-range($calendar-range-day-invalid-color);
-      }
-    }
+        position: absolute;
 
-    // invalid end day range
-    &--endDay:not(
-        &--startDay
-      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
-      .cobalt-CalendarRangePicker__day-inner {
-        @include end-range($calendar-out-of-range-color);
-      }
-    }
+        z-index: 0;
 
-    // invalid start/end day background (circle)
-    &--startDay .cobalt-CalendarRangePicker__day-inner:after,
-    &--endDay .cobalt-CalendarRangePicker__day-inner:after {
-      @include bg-color(error);
+        top: 2px;
+        left: 2px;
 
-      box-shadow: var(--c-background-errorAlt) 0 2px 6px 0;
-    }
+        height: calc(100% - 4px);
+        width: calc(100% - 4px);
 
-    // invalid start/end day background (circle) when the other one is currently edited
-    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--subdued
-      .cobalt-CalendarRangePicker__day-inner:after,
-    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--subdued
-      .cobalt-CalendarRangePicker__day-inner:after {
-      background: $calendar-range-day-invalid-color;
-    }
+        border-width: 2px;
 
-    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--firstOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      border-right: crossMonthBorder($calendar-range-day-invalid-color);
-    }
+        box-sizing: border-box;
 
-    &--selected:not(
-        &--startDay
-      ).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--firstOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      border-right: crossMonthBorder($calendar-out-of-range-color);
-    }
+        border-radius: 7px;
 
-    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--lastOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      border-left: crossMonthBorder($calendar-range-day-invalid-color);
-    }
+        content: "";
+      }
 
-    &--selected:not(
-        &--endDay
-      ).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--lastOfMonth
-      .cobalt-CalendarRangePicker__day-inner:before {
-      border-left: crossMonthBorder($calendar-out-of-range-color);
+      &.cobalt-CalendarRangePicker__day--invalid:after {
+        background-color: $calendar-range-day-invalid-color;
+      }
     }
   }
 
+  &--isEditing
+    .cobalt-CalendarRangePicker__day:not(
+      .cobalt-CalendarRangePicker__day--disabled
+    ) {
+    cursor: pointer;
+  }
+
   &__message {
     display: flex;
     justify-content: center;
@@ -367,3 +304,40 @@
     }
   }
 }
+
+.tippy-box[data-theme~="range-picker"] {
+  @include border(base);
+}
+
+.tippy-box[data-theme~="range-picker"] .tippy-arrow:after {
+  position: absolute;
+
+  left: 0;
+
+  z-index: -1;
+
+  border-color: transparent;
+  border-style: solid;
+
+  color: color-var(stroke, base);
+
+  content: "";
+}
+
+.tippy-box[data-theme~="range-picker"][data-placement^="top"]
+  > .tippy-arrow:after {
+  bottom: -9px;
+
+  border-width: 8px 8px 0;
+  border-top-color: initial;
+  transform-origin: center top;
+}
+
+.tippy-box[data-theme~="range-picker"][data-placement^="bottom"]
+  > .tippy-arrow:after {
+  top: -9px;
+
+  border-width: 0 8px 8px;
+  border-bottom-color: initial;
+  transform-origin: center bottom;
+}

package/styles/core/_colors-map.scss

@@ -77,7 +77,11 @@ $theme-colors-map: (
     connectAlt: var(--c-text-connectAlt),
     driver: var(--c-text-driver),
     owner: var(--c-text-owner),
-    inversed: var(--c-text-inversed)
+    inversed: var(--c-text-inversed),
+    disabled: var(--c-text-disabled),
+    onAccent: var(--c-text-onAccent),
+    onError: var(--c-text-onError),
+    onSuccess: var(--c-text-onSuccess)
   ),
   buttonBackground: (
     selected: var(--c-buttonBackground-selected),
@@ -228,7 +232,9 @@ $theme-colors-map: (
     error: var(--c-stroke-error),
     errorAlt: var(--c-stroke-errorAlt),
     success: var(--c-stroke-success),
-    successAlt: var(--c-stroke-successAlt)
+    successAlt: var(--c-stroke-successAlt),
+    onAccent: var(--c-stroke-onAccent),
+    onError: var(--c-stroke-onError)
   ),
   fill: (
     base: var(--c-fill-base),

package/styles/core/default-theme.scss

@@ -57,6 +57,10 @@
   --c-text-driver: var(--c-navy-700);
   --c-text-owner: var(--c-white);
   --c-text-inversed: var(--c-white);
+  --c-text-disabled: var(--c-navy-200);
+  --c-text-onAccent: var(--c-white);
+  --c-text-onError: var(--c-white);
+  --c-text-onSuccess: var(--c-white);
   --c-buttonBackground-selected: var(--c-purple-100);
   --c-buttonBackground-destructiveInteractive: var(--c-red-100);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
@@ -154,6 +158,8 @@
   --c-stroke-errorAlt: var(--c-red-500);
   --c-stroke-success: var(--c-green-500);
   --c-stroke-successAlt: var(--c-green-500);
+  --c-stroke-onAccent: var(--c-white);
+  --c-stroke-onError: var(--c-white);
   --c-fill-base: var(--c-navy-500);
   --c-fill-secondary: var(--c-yellow-500);
   --c-fill-subdued: var(--c-navy-100);

package/styles/core/theme.scss

@@ -57,6 +57,10 @@
   --c-text-driver: var(--c-navy-700);
   --c-text-owner: var(--c-white);
   --c-text-inversed: var(--c-white);
+  --c-text-disabled: var(--c-navy-200);
+  --c-text-onAccent: var(--c-white);
+  --c-text-onError: var(--c-white);
+  --c-text-onSuccess: var(--c-white);
   --c-buttonBackground-selected: var(--c-purple-100);
   --c-buttonBackground-destructiveInteractive: var(--c-red-100);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
@@ -154,6 +158,8 @@
   --c-stroke-errorAlt: var(--c-red-500);
   --c-stroke-success: var(--c-green-500);
   --c-stroke-successAlt: var(--c-green-500);
+  --c-stroke-onAccent: var(--c-white);
+  --c-stroke-onError: var(--c-white);
   --c-fill-base: var(--c-navy-500);
   --c-fill-secondary: var(--c-yellow-500);
   --c-fill-subdued: var(--c-navy-100);
@@ -221,6 +227,10 @@
   --c-text-driver: var(--c-navy-700);
   --c-text-owner: var(--c-grey-100);
   --c-text-inversed: var(--c-white);
+  --c-text-disabled: var(--c-navy-200);
+  --c-text-onAccent: var(--c-white);
+  --c-text-onError: var(--c-white);
+  --c-text-onSuccess: var(--c-white);
   --c-buttonBackground-selected: var(--c-purpleDeep-900);
   --c-buttonBackground-destructiveInteractive: var(--c-red-900);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-red-900);
@@ -318,6 +328,8 @@
   --c-stroke-errorAlt: var(--c-red-200);
   --c-stroke-success: var(--c-green-700);
   --c-stroke-successAlt: var(--c-green-700);
+  --c-stroke-onAccent: var(--c-white);
+  --c-stroke-onError: var(--c-white);
   --c-fill-base: var(--c-grey-100);
   --c-fill-secondary: var(--c-yellow-500);
   --c-fill-subdued: var(--c-black-50);

package/tokens/theme.js

@@ -72,7 +72,11 @@ const text = {
 	connectAlt: "turquoise/turquoise.900/turquoise.50",
 	driver: "graphite/navy.700/navy.700",
 	owner: "white/white/grey.100",
-	inversed: "white/white/white"
+	inversed: "white/white/white",
+	disabled: "navy.200/navy.200/navy.200",
+	onAccent: "white/white/white",
+	onError: "white/white/white",
+	onSuccess: "white/white/white"
 };
 const buttonBackground = {
 	selected: "indigo/purple.100/purpleDeep.900",
@@ -223,7 +227,9 @@ const stroke = {
 	error: "red/red.500/red.200",
 	errorAlt: "red/red.500/red.200",
 	success: "green/green.500/green.700",
-	successAlt: "green/green.500/green.700"
+	successAlt: "green/green.500/green.700",
+	onAccent: "white/white/white",
+	onError: "white/white/white"
 };
 const fill = {
 	base: "graphite/navy.500/grey.100",

package/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/types/components/Calendar/CalendarRangePicker/CalendarRangePicker.d.ts

@@ -1,23 +1,40 @@
 import React from "react";
 import { FormElementStatus } from "../../Form/form";
-type Props = {
+export interface RangeConstraintInterface {
+    value: number;
+    message: string;
+}
+export interface RangeConstraintsInterface {
+    min?: RangeConstraintInterface;
+    max?: RangeConstraintInterface;
+}
+export interface DayStatusInterface {
+    isRangeExceeded?: boolean;
+    isRangeTooShort?: boolean;
+    isCustomInvalid?: boolean;
+    isDisabled?: boolean;
+}
+export type CalendarRangePickerPropsType = {
     numberOfMonths?: number;
     firstMonthDate?: Date;
-    rangeLimit?: number;
+    rangeConstraints?: RangeConstraintsInterface;
     firstAvailableDate?: Date;
     lastAvailableDate?: Date;
     isEditingStartDate: boolean;
     isEditingEndDate: boolean;
     startDate: Date | undefined;
     endDate: Date | undefined;
+    isDayDisabledFn?: (day: Date) => boolean;
+    hasDayNotificationFn?: (day: Date) => boolean;
+    isDayInvalidForSelectionFn?: (day: Date) => boolean;
+    isSundayFirstDayOfWeek?: boolean;
     hint?: {
         status?: FormElementStatus;
         html: string;
     };
-    onChangeDate?: (date: Date, isOutOfRange: boolean, disabled: boolean) => boolean;
+    onChangeDate?: (date: Date, status: DayStatusInterface) => boolean;
     onLeaveDate?: (date: Date) => void;
     onSelectDate?: (date: Date, isOutOfRange: boolean) => void;
     locale?: Record<string, unknown>;
 };
-export declare function CalendarRangePicker({ rangeLimit, firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, locale, }: Props): React.JSX.Element;
-export {};
+export declare function CalendarRangePicker({ rangeConstraints, firstMonthDate, numberOfMonths, hint, firstAvailableDate, lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, isDayDisabledFn, hasDayNotificationFn, isDayInvalidForSelectionFn, isSundayFirstDayOfWeek, locale, }: CalendarRangePickerPropsType): React.JSX.Element;