Updated themes so they are separated from styles

This commit is contained in:
Viktor De Pasquale 2019-11-19 18:53:50 +01:00
parent 8918113a31
commit fbeaad077f
10 changed files with 84 additions and 41 deletions

View File

@ -14,6 +14,7 @@
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?colorSurface"
android:orientation="vertical"
android:paddingLeft="@{viewModel.insets.left}"
android:paddingRight="@{viewModel.insets.right}"

View File

@ -118,7 +118,7 @@
android:singleLine="true"
android:text="@={viewModel.query}"
android:textAppearance="?appearanceTextBodyNormal"
android:textColor="?colorTextTransient"
android:textColor="@color/color_text_transient"
android:textColorHint="?colorOnSurfaceVariant" />
</com.google.android.material.card.MaterialCardView>

View File

@ -103,7 +103,7 @@
android:singleLine="true"
android:text="@={viewModel.query}"
android:textAppearance="?appearanceTextBodyNormal"
android:textColor="?colorTextTransient"
android:textColor="@color/color_text_transient"
android:textColorHint="?colorOnSurfaceVariant" />
</com.google.android.material.card.MaterialCardView>

View File

@ -41,7 +41,7 @@
app:layout_constraintStart_toEndOf="@+id/developer_link"
app:layout_constraintTop_toTopOf="@+id/developer_link"
app:srcCompat="@drawable/ic_more"
app:tint="?colorTextTransient" />
app:tint="@color/color_text_transient" />
</androidx.constraintlayout.widget.ConstraintLayout>

View File

@ -26,7 +26,7 @@
android:layout_height="wrap_content"
android:text="@{item.title}"
android:textAppearance="?appearanceTextBodyNormal"
android:textColor="?colorPrimaryTransient"
android:textColor="@color/color_primary_transient"
android:textStyle="bold"
tools:text="@tools:sample/lorem/random"
app:layout_constraintBottom_toBottomOf="parent"

View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Foundation.Default" parent="Foundation.Base">
<style name="ThemeFoundationMD2.Default">
<item name="colorPrimary">#2196F3</item>
<item name="colorPrimaryVariant">#802196F3</item>
<item name="colorSecondary">#63B9FF</item>
@ -19,10 +19,6 @@
<item name="colorOnSurfaceVariant">#80BABABA</item>
<item name="colorDisabled">#808080</item>
<item name="colorDisabledVariant">#66808080</item>
<item name="colorTextTransient">@color/color_text_transient</item>
<item name="colorPrimaryTransient">@color/color_primary_transient</item>
<item name="colorErrorTransient">@color/color_error_transient</item>
<item name="colorOnPrimaryTransient">@color/color_on_primary_transient</item>
</style>
</resources>

View File

@ -87,12 +87,6 @@
<!--region Colors-->
<!--Transient-->
<attr name="colorTextTransient" format="reference" />
<attr name="colorPrimaryTransient" format="reference" />
<attr name="colorOnPrimaryTransient" format="reference" />
<attr name="colorErrorTransient" format="reference" />
<!--Static-->
<attr name="colorDisabled" format="color" />
<attr name="colorDisabledVariant" format="color" />

View File

@ -103,28 +103,9 @@
</style>
<style name="Foundation.Default" parent="Foundation.Base">
<item name="android:theme">@style/Theme.Rayquaza</item>
<item name="colorPrimary">#2196F3</item>
<item name="colorPrimaryVariant">#802196F3</item>
<item name="colorSecondary">#1766A6</item>
<item name="colorSecondaryVariant">#801766A6</item>
<item name="colorSurface">#F2F2F2</item>
<item name="colorSurfaceVariant">#E8E8E8</item>
<item name="colorSurfaceSurfaceVariant">?colorSurface</item>
<item name="colorOnPrimary">#F2F2F2</item>
<item name="colorOnPrimaryVariant">#D9E6E6E6</item>
<item name="colorOnSecondary">#F2F2F2</item>
<item name="colorOnBackground">#F2F2F2</item>
<item name="colorError">#CC0047</item>
<item name="colorOnError">#F2F2F2</item>
<item name="colorOnSurface">#444444</item>
<item name="colorOnSurfaceVariant">#80444444</item>
<item name="colorDisabled">#808080</item>
<item name="colorDisabledVariant">#66808080</item>
<item name="colorTextTransient">@color/color_text_transient</item>
<item name="colorPrimaryTransient">@color/color_primary_transient</item>
<item name="colorErrorTransient">@color/color_error_transient</item>
<item name="colorOnPrimaryTransient">@color/color_on_primary_transient</item>
<item name="android:theme">@style/ThemeFoundationMD2.Default</item>
<!--setting window background to transparent should reduce overdraw-->
<item name="android:windowBackground">@android:color/transparent</item>
</style>
</resources>

View File

@ -137,19 +137,19 @@ variant. Make sure to use style referenced by attribute defined it attrs.xml.
<style name="WidgetFoundation.Icon" parent="WidgetFoundation.Image.Big">
<item name="android:padding">@dimen/l_75</item>
<item name="android:background">?selectableItemBackgroundBorderless</item>
<item name="tint">?colorTextTransient</item>
<item name="tint">@color/color_text_transient</item>
</style>
<style name="WidgetFoundation.Icon.Primary">
<item name="tint">?colorPrimaryTransient</item>
<item name="tint">@color/color_primary_transient</item>
</style>
<style name="WidgetFoundation.Icon.OnPrimary">
<item name="tint">?colorOnPrimaryTransient</item>
<item name="tint">@color/color_on_primary_transient</item>
</style>
<style name="WidgetFoundation.Icon.Error">
<item name="tint">?colorErrorTransient</item>
<item name="tint">@color/color_error_transient</item>
</style>
<style name="WidgetFoundation.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">

View File

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--
# Theme guide
This should provide all the information you need to create new !color! themes.
## Inheritance
You might want to inherit default values from "base" theme. You can do so implicitly by just
writing `<style name="ThemeFoundationMD2.MySuperAwesomeTheme" parent="ThemeFoundationMD2.Default">`.
With this approach you can only change values you (don't) like - such as `colorPrimary` or
`colorSecondary`.
There's also an option to define theme completely from ground up and that's done just by
omitting `parent="..."`. It will inherit _nothing_ from the base.
## Day / Night ? How do I define both in one theme?
Define Theme here for "Day" theme and in `values-night` directory define theme with same name
and parent if applicable. The framework will automatically switch between day/night themes based
on user's requested configuration. (Always light, Always dark, Follow system)
You might choose to define only "Day" theme with Dark colors to have dark theme regardless.
That's super lazy approach and is discouraged but the framework permits it. If not inherited
from default theme, you must define all colors yourself in both day AND night variants.
## What to theme
Generally I'd suggest theming only `colorPrimary`, `colorSecondary` and their variants. Make
sure that text is readable if displayed on primary or secondary color!
You can check that very easily by visiting https://www.colorhexa.com/. After you put in your
color hex, you can scroll down to "Preview" where it will compute whether dark/bright text
should be displayed on top of it. Then you must edit respective `colorOn...`.
Also check "Color Blindness Simulator". Primary and secondary colors must not match or be
similar in type. Text on color must have enough contrast so it can be read by everyone!
!! Themes that will not satisfy these requirements will be promptly deleted without further
!! notice. In repeated attempts to push such themes you will be automatically blacklisted.
-->
<style name="ThemeFoundationMD2" parent="" />
<!--1st party themes-->
<style name="ThemeFoundationMD2.Default">
<item name="colorPrimary">#2196F3</item>
<item name="colorPrimaryVariant">#802196F3</item>
<item name="colorSecondary">#1766A6</item>
<item name="colorSecondaryVariant">#801766A6</item>
<item name="colorSurface">#F2F2F2</item>
<item name="colorSurfaceVariant">#E8E8E8</item>
<item name="colorSurfaceSurfaceVariant">?colorSurface</item>
<item name="colorOnPrimary">#F2F2F2</item>
<item name="colorOnPrimaryVariant">#D9E6E6E6</item>
<item name="colorOnSecondary">#F2F2F2</item>
<item name="colorOnBackground">#F2F2F2</item>
<item name="colorError">#CC0047</item>
<item name="colorOnError">#F2F2F2</item>
<item name="colorOnSurface">#444444</item>
<item name="colorOnSurfaceVariant">#80444444</item>
<item name="colorDisabled">#808080</item>
<item name="colorDisabledVariant">#66808080</item>
</style>
<!--3rd party themes-->
</resources>