Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(list): remove dark theme #2082

Merged
merged 17 commits into from
Jan 30, 2018
Merged

chore(list): remove dark theme #2082

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
75b9666
feat(list): remove dark theme
Jan 25, 2018
3a879b0
feat(list): remove dark theme demos
Jan 25, 2018
7cf490c
feat(list): removed theme mixins from list.scss file
Jan 25, 2018
43f89a1
Merge branch 'master' into feat/list/remove-dark-theme
Jan 25, 2018
0397cd7
Merge branch 'master' into feat/list/remove-dark-theme
Jan 25, 2018
cc17cd3
Merge branch 'master' into feat/list/remove-dark-theme
Jan 26, 2018
3876f02
chore(list): added back $mdc-list-divider-color-light with mdc-theme-…
Jan 26, 2018
b37479f
Merge branch 'feat/list/remove-dark-theme' of github.com:material-com…
Jan 26, 2018
affe8ea
Merge branch 'master' into feat/list/remove-dark-theme
Jan 26, 2018
c774ac4
Merge branch 'feat/list/remove-dark-theme' of github.com:material-com…
Jan 26, 2018
7779b0f
Merge branch 'master' into feat/list/remove-dark-theme
Jan 26, 2018
5d485a0
Merge branch 'master' into feat/list/remove-dark-theme
Jan 29, 2018
200a147
Merge branch 'master' into feat/list/remove-dark-theme
Jan 30, 2018
7b9a464
Merge branch 'feat/list/remove-dark-theme' of github.com:material-com…
Jan 30, 2018
bef9ac9
chore(list): fix divider colors
Jan 30, 2018
79fe80c
Merge branch 'master' into feat/list/remove-dark-theme
Jan 30, 2018
8c14227
Merge branch 'master' into feat/list/remove-dark-theme
Jan 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 0 additions & 244 deletions demos/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,14 +217,6 @@ <h3>Text only (dense)</h3>
<li class="mdc-list-item">Single-line item</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Text Only (dark)</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">Single-line item</li>
<li class="mdc-list-item">Single-line item</li>
<li class="mdc-list-item">Single-line item</li>
</ul>
</section>
<section>
<h3>Graphic</h3>
<aside><p><em>Note: The grey background is styled using demo placeholder styles</em></p></aside>
Expand Down Expand Up @@ -283,29 +275,6 @@ <h3>Graphic Example - Icon with Text</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Graphic Example - Icon with Text (Dark)</h3>
<ul class="mdc-list demo-list">
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
network_wifi
</i>
Wi-Fi
</li>
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
bluetooth
</i>
Bluetooth
</li>
<li class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
data_usage
</i>
Data Usage
</li>
</ul>
</section>
<section>
<h3>Avatar List</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down Expand Up @@ -363,29 +332,6 @@ <h3>Example - Avatar with Text</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Avatar with Text (Dark)</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars">
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal1.svg"
width="56" height="56" alt="Panda">
Panda
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal2.svg"
width="56" height="56" alt="Sloth">
Sloth
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal3.svg"
width="56" height="56" alt="Brown Bear">
Brown Bear
</li>
</ul>
</section>
<section>
<h3>Metadata</h3>
<ul class="mdc-list demo-list">
Expand Down Expand Up @@ -498,44 +444,6 @@ <h3>Example - Avatar with Text and Icon</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Avatar with Text and Icon (Dark)</h3>
<ul class="mdc-list mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--avatar-and-meta-icon">
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal3.svg"
width="56" height="56" alt="Brown Bear">
Brown Bear
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Remove from favorites" title="Remove from favorites"
onclick="event.preventDefault();">
favorite
</a>
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal1.svg"
width="56" height="56" alt="Panda">
Panda
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Add to favorites" title="Add to favorites"
onclick="event.preventDefault();">
favorite_border
</a>
</li>
<li class="mdc-list-item">
<img class="mdc-list-item__graphic"
src="/images/animal2.svg"
width="56" height="56" alt="Sloth">
Sloth
<a class="mdc-list-item__meta material-icons" href="#"
aria-label="Add to favorites" title="Add to favorites"
onclick="event.preventDefault();">
favorite_border
</a>
</li>
</ul>
</section>
</section>
<section>
<h2>Two-Line List</h2>
Expand Down Expand Up @@ -788,53 +696,6 @@ <h3>Example - Two-line Avatar + Text + Icon</h3>
</li>
</ul>
</section>
<section class="mdc-theme--dark">
<h3>Example - Two-line Avatar + Text + Icon (Dark)</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Photos
<span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Recipes
<span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Work
<span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
</section>
<section>
<h3>Lists w/ Ellipsis</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
Expand Down Expand Up @@ -1037,88 +898,6 @@ <h3 class="mdc-list-group__subheader">Files</h3>
</ul>
</div>
</section>
<section class="mdc-theme--dark">
<h3>Example - Two-Line Lists, Avatars, Metadata, Inset Dividers (Dark)</h3>
<div class="mdc-list-group">
<h3 class="mdc-list-group__subheader">Folders</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Photos
<span class="mdc-list-item__secondary-text">Jan 9, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Recipes
<span class="mdc-list-item__secondary-text">Jan 17, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">folder</i>
</span>
<span class="mdc-list-item__text">
Work
<span class="mdc-list-item__secondary-text">Jan 28, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
<hr class="mdc-list-divider mdc-list-divider--inset mdc-list-divider--padded">
<h3 class="mdc-list-group__subheader">Files</h3>
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list demo-list demo-list--with-avatars demo-list--icon-placeholders">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">insert_drive_file</i>
</span>
<span class="mdc-list-item__text">
Vacation Itinerary
<span class="mdc-list-item__secondary-text">Jan 10, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic" role="presentation">
<i class="material-icons" aria-hidden="true">insert_drive_file</i>
</span>
<span class="mdc-list-item__text">
Kitchen Remodel
<span class="mdc-list-item__secondary-text">Jan 20, 2014</span>
</span>
<a href="#" class="mdc-list-item__meta material-icons"
aria-label="View more information" title="More info"
onclick="event.preventDefault();">
info
</a>
</li>
</ul>
</div>
</section>
</section>
<section>
<h2>Interactive Lists (with ink ripple)</h2>
Expand All @@ -1145,29 +924,6 @@ <h3>Example - Interactive List</h3>
</a>
</nav>
</section>
<section class="mdc-theme--dark">
<h3>Example - Interactive List (Dark Theme)</h3>
<nav class="mdc-list demo-list" data-demo-interactive-list>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
network_wifi
</i>
Wi-Fi
</a>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
bluetooth
</i>
Bluetooth
</a>
<a href="#" class="mdc-list-item">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">
data_usage
</i>
Data Usage
</a>
</nav>
</section>
</section>
</div>
</main>
Expand Down
21 changes: 1 addition & 20 deletions demos/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,31 +29,14 @@ a.material-icons {
max-width: 600px;
}

.mdc-theme--dark {
background: #303030;
}

.mdc-theme--dark > h3 {
color: white;
}

.demo-list--icon-placeholders,
.demo-list--with-avatars {
@include mdc-list-item-graphic-ink-color(white);
@include mdc-list-item-graphic-fill-color(text-icon-on-background);

@include mdc-theme-dark {
@include mdc-list-item-graphic-ink-color(#303030);
@include mdc-list-item-graphic-fill-color(text-icon-on-dark);
}
}

.demo-list--avatar-and-meta-icon {
@include mdc-list-item-meta-ink-color($material-color-pink-a200);

@include mdc-theme-dark {
@include mdc-list-item-meta-ink-color($material-color-pink-a200);
}
}

.demo-list-group--custom,
Expand Down Expand Up @@ -87,9 +70,7 @@ a.material-icons {
border: 1px solid rgba(0, 0, 0, 0.1);
}

#demo-wrapper .mdc-list-group .mdc-list,
#demo-wrapper .mdc-theme--dark .mdc-list,
#demo-wrapper .mdc-theme--dark .mdc-list-group {
#demo-wrapper .mdc-list-group .mdc-list {
border: none;
}

Expand Down
5 changes: 2 additions & 3 deletions packages/mdc-list/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

$mdc-list-divider-color-light: rgba(0, 0, 0, .12) !default;
$mdc-list-divider-color-dark: rgba(255, 255, 255, .2) !default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering one of two things here...

  • Should we keep this variable and use mdc-theme-contrast-tone in our styles to determine whether to use light or dark based on the value of the background color?
  • Should we remove this and also remove -light from the other variable?

cc @acdvorak

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we would just keep this style in here that other people can reference if they create their own "dark-theme"?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I vote for option 1: keep this variable and use mdc-theme-contrast-tone.

E.g.:

@at-root {
  $divider-color: if(
    mdc-theme-contrast-tone($mdc-theme-background) == "dark",
    $mdc-list-divider-color-dark,
    $mdc-list-divider-color-light
  );

  @include mdc-list-divider-color($divider-color);
}

That way, if the client overrides $mdc-theme-background, we will automatically set the correct divider color for them. If they don't like the color we choose, they can always override it with the mixin.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I see what you guys are saying now. I will update as stated here. Thanks!


$mdc-list-divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;
$mdc-list-divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;
$mdc-list-side-padding: 16px;
$mdc-list-text-offset: 72px;
Loading