carbon-react 104.19.2 → 104.20.0

package/lib/components/date/__internal__/date-picker/day-picker.style.js

@@ -200,20 +200,11 @@ const StyledDayPicker = _styledComponents.default.div`
     z-index: 1000;
     top: calc(100% + 1px);
     left: 0;
-    background-color: ${({
-  theme
-}) => theme.colors.white};
-    box-shadow: ${({
-  theme
-}) => theme.shadows.depth1};
-    color: ${({
-  theme
-}) => theme.text.color};
+    background-color: var(--colorsUtilityYang100);
+    box-shadow: var(--boxShadow100);
     display: block;
-    font-size: 14px;
-    font-weight: 800;
     overflow: hidden;
-    padding: 24px;
+    padding: var(--spacing300);
     text-align: center;
     user-select: none;
   }
@@ -234,9 +225,7 @@ const StyledDayPicker = _styledComponents.default.div`
   .DayPicker-wrapper {
     padding: 0;
     &:focus {
-      outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
   }
 
@@ -250,8 +239,10 @@ const StyledDayPicker = _styledComponents.default.div`
   }
 
   .DayPicker-Caption {
-    line-height: 40px;
-    height: 40px;
+    color: var(--colorsActionMajorYin090);
+    line-height: var(--sizing500);
+    height: var(--sizing500);
+    //font: var(--typographyDatePickerCalendarMonthM); to be implemented
     font-size: 16px;
     font-weight: 800;
 
@@ -262,28 +253,25 @@ const StyledDayPicker = _styledComponents.default.div`
   }
 
   .DayPicker-Day {
-    min-width: 40px;
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    min-width: var(--sizing500);
+    height: 36px; //var(--sizing450); to be implemented
+    padding: 0;
+    background-color: var(--colorsUtilityYang100);
     cursor: pointer;
     border: none;
-    font-weight: 800;
-    padding: 10px 0;
+    //font-family: var(--fontFamiliesDefault); token value to be updated
+    //font: var(--typographyDatePickerCalendarDateM); to be implemented
+    font-weight: var(--fontWeights700);
+    font-size: var(--fontSizes100);
+    line-height: var(--lineHeights500);
 
     &:hover {
-      background-color: ${({
-  theme
-}) => theme.disabled.input};
-      color: ${({
-  theme
-}) => theme.text.color};
+      background-color: var(--colorsActionMinor050);
+      color: var(--colorsActionMajorYin090);
     }
 
     &:focus {
-      outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+      outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
     }
 
     + * {
@@ -297,52 +285,30 @@ const StyledDayPicker = _styledComponents.default.div`
 
   .DayPicker-Day--today,
   .DayPicker-Day--today.DayPicker-Day--outside {
-    font-weight: 800;
-    color: ${({
-  theme
-}) => theme.text.color};
-    background-color: ${({
-  theme
-}) => theme.disabled.border};
+    color: var(--colorsActionMajorYin090);
+    background-color: var(--colorsActionMinor200);
   }
 
   .DayPicker-Day--outside {
-    color: ${({
-  theme
-}) => theme.disabled.disabled};
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    color: var(--colorsActionMajorYin055);
+    background-color: var(--colorsUtilityYang100);
   }
 
   .DayPicker-Day--disabled,
   .DayPicker-Day--disabled:hover {
-    color: ${({
-  theme
-}) => theme.disabled.disabled};
-    background-color: ${({
-  theme
-}) => theme.colors.white};
+    color: var(colorsActionMajorYin030);
+    background-color: var(--colorsUtilityYang100);
     cursor: default;
   }
 
   .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-    background-color: ${({
-  theme
-}) => theme.colors.primary};
-    color: ${({
-  theme
-}) => theme.colors.white};
-    font-weight: 800;
+    background-color: var(--colorsActionMajor500);
+    color: var(--colorsUtilityYang100);
   }
 
   .DayPicker-Day--selected.DayPicker-Day--disabled:not(.DayPicker-Day--outside) {
-    background-color: ${({
-  theme
-}) => theme.colors.primary};
-    color: ${({
-  theme
-}) => theme.colors.white};
+    background-color: var(--colorsActionMajor500);
+    color: var(--colorsUtilityYang100);
   }
 `;
 StyledDayPicker.defaultProps = {

package/lib/components/date/__internal__/navbar/button.style.js

@@ -7,30 +7,25 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledButton = _styledComponents.default.button.attrs({
   type: "button"
 })`
+  justify-content: center;
   align-items: center;
-  display: block;
-  border: none;
+  display: flex;
+  border: var(--borderWidth200) solid var(--colorsActionMinorTransparent);
   background: none;
   box-shadow: none;
   cursor: pointer;
-  height: 40px;
-  width: 40px;
-  padding: 0;
+  height: var(--sizing500);
+  width: var(--sizing500);
+  padding: var(--spacing150);
+  box-sizing: border-box;
   &:focus {
-    outline: ${({
-  theme
-}) => `3px solid ${theme.colors.focus}`};
+    outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
   }
 `;
-StyledButton.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledButton;
 exports.default = _default;

package/lib/components/date/__internal__/navbar/navbar.style.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledNavbar = _styledComponents.default.div`
@@ -17,11 +15,8 @@ const StyledNavbar = _styledComponents.default.div`
     justify-content: space-between;
     padding: 0;
     top: 0;
-    height: 40px;
+    height: var(--sizing500);
   }
 `;
-StyledNavbar.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledNavbar;
 exports.default = _default;

package/lib/components/date/__internal__/weekday/weekday.style.js

@@ -7,27 +7,23 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledWeekday = _styledComponents.default.div`
   &,
   &.DayPicker-Weekday {
     border: none;
-    min-width: 40px;
+    height: var(--sizing500);
+    min-width: var(--sizing500);
     font-weight: 800;
-    color: ${({
-  theme
-}) => theme.colors.border};
+    color: var(--colorsActionMinor400);
     text-transform: uppercase;
     font-size: 12px;
+    //font: var(--typographyDatePickerCalendarDayM) to be implemented
     text-align: center;
     padding: 20px 0 5px;
+    box-sizing: border-box;
   }
 `;
-StyledWeekday.defaultProps = {
-  theme: _base.default
-};
 var _default = StyledWeekday;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.19.2",
+  "version": "104.20.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {