javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(themes): add tint and shade variants

Browse Source
This commit is contained in:
Adam Bradley
2017-12-21 16:41:39 -06:00
parent 14f7b4977f
commit 41ba80f53c
3 changed files with 57 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/scripts/theme-builder/src/components/css-text/css-text.css
View File

@@ -8,7 +8,7 @@ h1 {
textarea {
margin: 12px 0 0 0;
min-width: 300px;
height: 550px;
height: 640px;
font-family: Courier New, Courier, monospace;
}

2
packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css
View File

@@ -15,4 +15,6 @@ main > section {
.selector-column {
max-width: 600px;
height: 100%;
overflow-y: scroll;
}

54
packages/core/scripts/theme-builder/src/theme-variables.ts
View File

@@ -7,54 +7,108 @@ export const THEME_VARIABLES = [
{
property: '--primary-contrast'
},
{
property: '--primary-tint'
},
{
property: '--primary-shade'
},
{
property: '--secondary'
},
{
property: '--secondary-contrast'
},
{
property: '--secondary-tint'
},
{
property: '--secondary-shade'
},
{
property: '--tertiary'
},
{
property: '--tertiary-contrast'
},
{
property: '--tertiary-tint'
},
{
property: '--tertiary-shade'
},
{
property: '--success'
},
{
property: '--success-contrast'
},
{
property: '--success-tint'
},
{
property: '--success-shade'
},
{
property: '--warning'
},
{
property: '--warning-contrast'
},
{
property: '--warning-tint'
},
{
property: '--warning-shade'
},
{
property: '--danger'
},
{
property: '--danger-contrast'
},
{
property: '--danger-tint'
},
{
property: '--danger-shade'
},
{
property: '--light'
},
{
property: '--light-contrast'
},
{
property: '--light-tint'
},
{
property: '--light-shade'
},
{
property: '--medium'
},
{
property: '--medium-contrast'
},
{
property: '--medium-tint'
},
{
property: '--medium-shade'
},
{
property: '--dark'
},
{
property: '--dark-contrast'
},
{
property: '--dark-tint'
},
{
property: '--dark-shade'
},
{
property: '--text-color'
},