feat(space-list): light mode theme for space list (#606)

* feat(space-list): light mode theme for space list * revert example changes * chore: address feedback no color updates * chore: update colors * chore: remove changes from default example * chore: remove changes from default example * chore: remove changes from default example * chore: further code req changes * chore: build core * fix: space list snapshots * feat: add space list meeting & buttongroup lightmode changes * feat(light-mode): update snapshot and buttongroup colors Co-authored-by: aimeex3 <819823+aimeex3@users.noreply.github.com>
momentum-design · Jun 8, 2020 · 03336cd · 03336cd
1 parent 7c12181
commit 03336cd
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 12 deletions.
diff --git a/core/scss/components/button-group/settings.scss b/core/scss/components/button-group/settings.scss
@@ -1,14 +1,14 @@
 $button-group__class: '#{$prefix}-button-group';
 
-$button-group__font-size: rem-calc(12);
+$button-group__font-size: rem-calc(14);
 $button-group__border-size: rem-calc(1);
 $button-group__border: $button-group__border-size solid $md-gray-20;
 $button-group__color: $md-black-100;
 $button-group__background: transparent;
 $button-group__line-height: rem-calc(16);
 $button-group__padding: rem-calc(8) rem-calc(18);
-$button-group-active__color: $md-white-100;
-$button-group-active__background: $black-48;
+$button-group-active__color: $md-gray-100;
+$button-group-active__background: $md-blue-10;
 $button-group-disabled__color: $md-gray-50;
 $button-group-hover__background: $black-04;
 $button-group__border-radius-pill: rem-calc(25);

diff --git a/core/scss/components/list-item/list-item.scss b/core/scss/components/list-item/list-item.scss
@@ -69,6 +69,21 @@
           $active-bgrd-color: $list-item__background--dark,
           $header-color: $list-item-header__color--dark
         );
+
+        &-light {
+          @include list-item-color(
+            $background-color: $md-gray-05,
+            $color: $md-gray-70,
+            $active-color: $md-gray-100,
+            $hover-bgrd-color: $md-gray-10,
+            $active-bgrd-color: $md-gray-10,
+            $hover-header-color: $md-gray-100,
+            $hover-subheader-color: $md-gray-100,
+            $header-color: $md-gray-70,
+            $subheader-color: $md-gray-70,
+            $focus-color: $md-gray-10
+          );
+        }
       }
 
       @include list-item--dark(

diff --git a/core/scss/components/space-list/space-list-item.scss b/core/scss/components/space-list/space-list-item.scss
@@ -297,6 +297,94 @@
           font-size: rem-calc(14);
         }
       }
+
+      &-light {
+        @include list-item-color(
+          $background-color: $md-gray-05,
+          $color: $md-gray-70,
+          $active-color: $md-gray-100,
+          $hover-bgrd-color: $md-gray-10,
+          $active-bgrd-color: $md-gray-10,
+          $hover-header-color: $md-gray-100,
+          $hover-subheader-color: $md-gray-100,
+          $header-color: $md-gray-70,
+          $subheader-color: $md-gray-70,
+          $focus-color: $md-gray-10
+        );
+
+        .md-icon {
+          color: $md-gray-70;
+        }
+
+        &.#{$list-item__class}--space-filter-summary {
+          [class*='__header'] {
+            color: $md-gray-70;
+          }
+        }
+
+        &.#{$list-item__class}--space-search,
+        &.#{$list-item__class}--space-filter,
+        &.#{$list-item__class}--space-flag,
+        &.#{$list-item__class}--space-filter-search {
+          > [class$='__center'] {
+            > [class*='__header'] {
+              > [class$='-secondary'] {
+                color: $md-gray-70;
+              }
+            }
+          }
+
+          [class$='__result-container'] {
+            [class$='__attachment'] {
+              [class$='__attachment--top'] {
+                [class$='-left'] {
+                  color: $md-gray-70;
+                }
+              }
+            }
+          }
+
+          [class*='__result'] {
+            color: $md-gray-70;
+          }
+        }
+
+        &.#{$list-item__class}--space-filter:not(.md-list-item--unread),
+        &.#{$list-item__class}--space-filter-search:not(.md-list-item--unread),
+        &.#{$list-item__class}--space-flag:not(.md-list-item--unread) {
+          > [class$='__center'] {
+            [class$='__header'],
+            [class$='__header--overview'] {
+              color: $md-gray-70;
+            }
+          }
+        }
+
+        [class$='__header--overview'] {
+          color: $md-gray-70;
+        }
+
+        &.#{$list-item__class}--unread {
+          .#{$list-item__class}__header {
+            color: $md-gray-100;
+          }
+        }
+
+        &.#{$list-item__class}--space-meeting {
+          [class$='--attendees'] {
+            color: $md-gray-70;
+            fill: $md-gray-70;
+          }
+
+          .#{$button__class} {
+            color: $md-gray-05;
+            background-color: $md-green-60;
+            &:hover {
+              background-color: $md-green-70;
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/core/scss/ng/select.scss b/core/scss/ng/select.scss
@@ -413,7 +413,7 @@
       background-color: $md-theme-50;
 
       .md-input {
-        color: #292929;
+        color: $md-gray-90;
       }
 
       > a {

diff --git a/core/scss/ng/settings/settings.scss b/core/scss/ng/settings/settings.scss
@@ -8469,15 +8469,15 @@ $button-container--small__width: 104px;
 
 $button-group__class: '#{$prefix}-button-group';
 
-$button-group__font-size: rem-calc(12);
+$button-group__font-size: rem-calc(14);
 $button-group__border-size: rem-calc(1);
 $button-group__border: $button-group__border-size solid $md-gray-20;
 $button-group__color: $md-black-100;
 $button-group__background: transparent;
 $button-group__line-height: rem-calc(16);
 $button-group__padding: rem-calc(8) rem-calc(18);
-$button-group-active__color: $md-white-100;
-$button-group-active__background: $black-48;
+$button-group-active__color: $md-gray-100;
+$button-group-active__background: $md-blue-10;
 $button-group-disabled__color: $md-gray-50;
 $button-group-hover__background: $black-04;
 $button-group__border-radius-pill: rem-calc(25);

diff --git a/core/scss/settings/settings.scss b/core/scss/settings/settings.scss
@@ -5254,15 +5254,15 @@ $button-container--small__width: 104px;
 
 $button-group__class: '#{$prefix}-button-group';
 
-$button-group__font-size: rem-calc(12);
+$button-group__font-size: rem-calc(14);
 $button-group__border-size: rem-calc(1);
 $button-group__border: $button-group__border-size solid $md-gray-20;
 $button-group__color: $md-black-100;
 $button-group__background: transparent;
 $button-group__line-height: rem-calc(16);
 $button-group__padding: rem-calc(8) rem-calc(18);
-$button-group-active__color: $md-white-100;
-$button-group-active__background: $black-48;
+$button-group-active__color: $md-gray-100;
+$button-group-active__background: $md-blue-10;
 $button-group-disabled__color: $md-gray-50;
 $button-group-hover__background: $black-04;
 $button-group__border-radius-pill: rem-calc(25);

diff --git a/react/src/lib/ListItemHeader/index.js b/react/src/lib/ListItemHeader/index.js
@@ -77,7 +77,7 @@ ListItemHeader.propTypes = {
   /** @prop ListItem title | '' */
   title: PropTypes.string,
   /** @prop ListItemHeader type variation | '' */
-  type: PropTypes.oneOf(['', 'space']),
+  type: PropTypes.oneOf(['', 'space', 'space-light']),
 };
 
 ListItemHeader.defaultProps = {

diff --git a/react/src/lib/SpaceListItem/examples/Default.js b/react/src/lib/SpaceListItem/examples/Default.js
@@ -10,7 +10,7 @@ export default class ListItemDefault extends React.PureComponent {
     return(
       <div className="medium-4 columns">
         <List style={{backgroundColor: 'black'}}>
-          <SpaceListItem isOverview header='Overview Item' />
+          <SpaceListItem isOverview header='Overview Item'/>
           <SpaceListItem header='Header Only'/>
           <SpaceListItem header='Bold Unread' isBold isUnread/>
           <SpaceListItem header='Bold Mentioned' isBold isMentioned/>

diff --git a/react/src/lib/SpaceListItem/index.js b/react/src/lib/SpaceListItem/index.js
@@ -35,6 +35,7 @@ class SpaceListItem extends React.PureComponent {
       resultRight,
       searchTerm,
       subheader,
+      theme,
       title,
       type,
       ...props
@@ -204,6 +205,7 @@ class SpaceListItem extends React.PureComponent {
         className={
           `${(isBold && ` md-list-item--unread`) || ''}` +
           `${(type && ` md-list-item--space-${type}`) || ''}` +
+          `${(theme && ` md-list-item--space-${theme}`) || ''}` +
           `${(className && ` ${className}`) || ''}`
         }
         id={id}
@@ -254,6 +256,8 @@ SpaceListItem.propTypes = {
   searchTerm: PropTypes.string,
   /** @prop SpaceListItem subheader node | ''s */
   subheader: PropTypes.node,
+  /** @prop SpaceListItem theme | '' */
+  theme: PropTypes.string,
   /** @prop SpaceListItem title | '' */
   title: PropTypes.string,
   /** @prop SpaceListItem type | '' */
@@ -286,6 +290,7 @@ SpaceListItem.defaultProps = {
   searchTerm: '',
   subheader: '',
   title: '',
+  theme: '',
   type: ''
 };
 

diff --git a/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SpaceListItem/tests/__snapshots__/index.spec.js.snap
@@ -22,6 +22,7 @@ ShallowWrapper {
     resultRight={null}
     searchTerm=""
     subheader=""
+    theme=""
     title=""
     type=""
   />,

diff --git a/react/src/lib/SpaceListMeeting/index.js b/react/src/lib/SpaceListMeeting/index.js
@@ -32,6 +32,7 @@ class SpaceListMeeting extends React.PureComponent {
       isBold,
       meetingType,
       subheader,
+      theme,
       title,
       ...props
     } = this.props;
@@ -128,6 +129,7 @@ class SpaceListMeeting extends React.PureComponent {
         className={
           'md-list-item--space-meeting' +
           `${(isBold && ` md-list-item--unread`) || ''}` +
+          `${(theme && ` md-list-item--space-${theme}`) || ''}` +
           `${(className && ` ${className}`) || ''}`
         }
         id={id}
@@ -175,6 +177,8 @@ SpaceListMeeting.propTypes = {
   meetingType: PropTypes.oneOf(['', 'group', 'number', 'device']),
   /** @prop SpaceListMeeting sub header node | '' */
   subheader: PropTypes.node,
+  /** @prop SpaceListMeeting color theme */
+  theme: PropTypes.string,
   /** @prop SpaceListMeeting title | '' */
   title: PropTypes.string,
 };
@@ -192,6 +196,7 @@ SpaceListMeeting.defaultProps = {
   eventOverlayProps: null,
   meetingType: '',
   subheader: '',
+  theme: '',
   title: '',
 };
 

diff --git a/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap b/react/src/lib/SpaceListMeeting/tests/__snapshots__/index.spec.js.snap
@@ -17,6 +17,7 @@ ShallowWrapper {
     isMessagingOnlyShare={false}
     meetingType=""
     subheader=""
+    theme=""
     title=""
   />,
   Symbol(enzyme.__renderer__): Object {