carbon-react 104.14.0 → 104.15.0

package/lib/components/note/note.style.js

@@ -26,7 +26,6 @@ const StyledNoteContent = _styledComponents.default.div`
   width: 100%;
 
   ${({
-  theme,
   hasPreview
 }) => (0, _styledComponents.css)`
     &:not(:last-of-type) {
@@ -42,16 +41,16 @@ const StyledNoteContent = _styledComponents.default.div`
     div.public-DraftEditor-content {
       min-height: inherit;
       height: 100%;
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
 
     &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px ${theme.tile.separator};
+      border-top: solid 1px var(--colorsUtilityMajor050);
     }
 
     ${hasPreview && `
-      margin-top: ${2 * theme.spacing}px;
+      margin-top: var(--spacing200);
     `}
   `}
 `;
@@ -76,10 +75,9 @@ const StyledFooterContent = _styledComponents.default.div`
   font-weight: bold;
 
   ${({
-  theme,
   hasName
 }) => (0, _styledComponents.css)`
-    margin-top: ${2 * theme.spacing}px;
+    margin-top: var(--spacing200);
 
     ${hasName && (0, _styledComponents.css)`
       &:first-of-type {
@@ -88,29 +86,29 @@ const StyledFooterContent = _styledComponents.default.div`
 
       &:nth-of-type(2) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
-        margin-left: ${2 * theme.spacing}px;
+        color: var(--colorsUtilityYin065);
+        margin-left: var(--spacing200);
       }
 
       &:last-of-type:not(:nth-of-type(2)) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
 
     ${!hasName && (0, _styledComponents.css)`
       &:first-of-type {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
       }
 
       &:last-of-type:not(:first-of-type) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
   `}
@@ -118,19 +116,16 @@ const StyledFooterContent = _styledComponents.default.div`
 exports.StyledFooterContent = StyledFooterContent;
 const StyledFooter = _styledComponents.default.div`
   display: flex;
-  margin-bottom: ${({
-  theme
-}) => `${-theme.spacing}px;`}
+  margin-bottom: calc(-1 * var(--spacing100));
   flex-wrap: wrap;
 `;
 exports.StyledFooter = StyledFooter;
 const StyledNote = _styledComponents.default.div`
   ${({
-  theme,
   width
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
-    border: 1px solid ${theme.tile.border};
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
     display: flex;
     flex-direction: column;
     padding: 24px;
@@ -155,19 +150,10 @@ const StyledNote = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledNote = StyledNote;
-StyledNoteContent.defaultProps = {
-  theme: _base.default
-};
 StyledNote.propTypes = {
   padding: _propTypes.default.string,
   width: _propTypes.default.number
 };
 StyledNote.defaultProps = {
   theme: _base.default
-};
-StyledFooter.defaultProps = {
-  theme: _base.default
-};
-StyledFooterContent.defaultProps = {
-  theme: _base.default
 };

package/lib/style/themes/base/base-theme.config.d.ts

@@ -336,9 +336,6 @@ declare function _default(palette: any): {
         background: any;
         altHover: any;
     };
-    note: {
-        timeStamp: string;
-    };
     editorLinkPreview: {
         background: any;
         hoverBackground: any;

package/lib/style/themes/base/base-theme.config.js

@@ -357,9 +357,6 @@ var _default = palette => {
       background: palette.slateTint(80),
       altHover: palette.slateTint(85)
     },
-    note: {
-      timeStamp: "rgba(0,0,0,0.65)"
-    },
     editorLinkPreview: {
       background: palette.slateTint(95),
       hoverBackground: palette.slateTint(80),

package/package.json

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