diff --git a/core/scss/components/button-group/settings.scss b/core/scss/components/button-group/settings.scss index f554b4b2cf..a9ffdde7d3 100644 --- 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 index a90f09014c..3744db2a4c 100644 --- 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 index 94a24a40f3..89df70671e 100644 --- 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 index a069a0f8d3..3ae278c88c 100644 --- 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 index 2547a04751..5bce25697d 100644 --- 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 index de06a3d8aa..446990d9fa 100644 --- 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 index 6ca17950a2..d3486f9d8f 100644 --- 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 index 68973e49b6..db76880fcf 100644 --- 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(