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): combine background/color steps to one var (#16543)

Browse Source 
closes #16202

BREAKING CHANGES

The background and text stepped color variables have been combined to one set of stepped variables. See the documentation for more information: https://beta.ionicframework.com/docs/theming/advanced#stepped-colors
This commit is contained in:
Brandy Carney
2018-11-30 17:44:55 -05:00
committed by GitHub
parent ab84f31443
commit 7b3233f0b5
2 changed files with 171 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
core/src/themes/ionic.theme.default.scss
View File

@@ -100,46 +100,44 @@ $text-color: var(--ion-text-color, $text-color-value) !de
// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
$background-color-step-50: var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
$background-color-step-100: var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
$background-color-step-150: var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
$background-color-step-200: var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
$background-color-step-250: var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
$background-color-step-300: var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
$background-color-step-350: var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
$background-color-step-400: var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
$background-color-step-450: var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
$background-color-step-500: var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
$background-color-step-550: var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
$background-color-step-600: var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
$background-color-step-650: var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
$background-color-step-700: var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
$background-color-step-750: var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
$background-color-step-800: var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
$background-color-step-850: var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
$background-color-step-900: var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
$background-color-step-950: var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
$background-color-step-1000: var(--ion-background-color-step-1000, mix($text-color-value, $background-color-value, 100%)) !default;
$text-color-step-50: var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%)) !default;
$text-color-step-100: var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%)) !default;
$text-color-step-150: var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%)) !default;
$text-color-step-200: var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%)) !default;
$text-color-step-250: var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%)) !default;
$text-color-step-300: var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%)) !default;
$text-color-step-350: var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%)) !default;
$text-color-step-400: var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%)) !default;
$text-color-step-450: var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%)) !default;
$text-color-step-500: var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
$text-color-step-550: var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%)) !default;
$text-color-step-600: var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%)) !default;
$text-color-step-650: var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%)) !default;
$text-color-step-700: var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%)) !default;
$text-color-step-750: var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%)) !default;
$text-color-step-800: var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%)) !default;
$text-color-step-850: var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%)) !default;
$text-color-step-900: var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%)) !default;
$text-color-step-950: var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%)) !default;
$text-color-step-1000: var(--ion-text-color-step-1000, mix($background-color-value, $text-color-value, 100%)) !default;
$background-color-step-50: var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
$background-color-step-100: var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
$background-color-step-150: var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
$background-color-step-200: var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
$background-color-step-250: var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
$background-color-step-300: var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
$background-color-step-350: var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
$background-color-step-400: var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
$background-color-step-450: var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
$background-color-step-500: var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
$background-color-step-550: var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
$background-color-step-600: var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
$background-color-step-650: var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
$background-color-step-700: var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
$background-color-step-750: var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
$background-color-step-800: var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
$background-color-step-850: var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
$background-color-step-900: var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
$background-color-step-950: var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
$text-color-step-50: var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
$text-color-step-100: var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
$text-color-step-150: var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
$text-color-step-200: var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
$text-color-step-250: var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
$text-color-step-300: var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
$text-color-step-350: var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
$text-color-step-400: var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
$text-color-step-450: var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
$text-color-step-500: var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
$text-color-step-550: var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
$text-color-step-600: var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
$text-color-step-650: var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
$text-color-step-700: var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
$text-color-step-750: var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
$text-color-step-800: var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
$text-color-step-850: var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
$text-color-step-900: var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
$text-color-step-950: var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
// Default General Colors
// --------------------------------------------------

275
core/src/themes/test/steps/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>CSS Variable - Basic</title>
<title>Themes - Steps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
@@ -18,163 +18,155 @@
}
.background-step-50 {
background-color: var(--ion-background-color-step-50);
}
.text-step-50 {
color: var(--ion-text-color-step-50);
background: var(--ion-color-step-50, #f2f2f2);
}
.background-step-100 {
background-color: var(--ion-background-color-step-100);
}
.text-step-100 {
color: var(--ion-text-color-step-100);
background: var(--ion-color-step-100, #e6e6e6);
}
.background-step-150 {
background-color: var(--ion-background-color-step-150);
}
.text-step-150 {
color: var(--ion-text-color-step-150);
background: var(--ion-color-step-150, #d9d9d9);
}
.background-step-200 {
background-color: var(--ion-background-color-step-200);
}
.text-step-200 {
color: var(--ion-text-color-step-200);
background: var(--ion-color-step-200, #cccccc);
}
.background-step-250 {
background-color: var(--ion-background-color-step-250);
}
.text-step-250 {
color: var(--ion-text-color-step-250);
background: var(--ion-color-step-250, #bfbfbf);
}
.background-step-300 {
background-color: var(--ion-background-color-step-300);
}
.text-step-300 {
color: var(--ion-text-color-step-300);
background: var(--ion-color-step-300, #b3b3b3);
}
.background-step-350 {
background-color: var(--ion-background-color-step-350);
}
.text-step-350 {
color: var(--ion-text-color-step-350);
background: var(--ion-color-step-350, #a6a6a6);
}
.background-step-400 {
background-color: var(--ion-background-color-step-400);
}
.text-step-400 {
color: var(--ion-text-color-step-400);
background: var(--ion-color-step-400, #999999);
}
.background-step-450 {
background-color: var(--ion-background-color-step-450);
}
.text-step-450 {
color: var(--ion-text-color-step-450);
background: var(--ion-color-step-450, #8c8c8c);
}
.background-step-500 {
background-color: var(--ion-background-color-step-500);
}
.text-step-500 {
color: var(--ion-text-color-step-500);
background: var(--ion-color-step-500, gray);
}
.background-step-550 {
background-color: var(--ion-background-color-step-550);
}
.text-step-550 {
color: var(--ion-text-color-step-550);
background: var(--ion-color-step-550, #737373);
}
.background-step-600 {
background-color: var(--ion-background-color-step-600);
}
.text-step-600 {
color: var(--ion-text-color-step-600);
background: var(--ion-color-step-600, #666666);
}
.background-step-650 {
background-color: var(--ion-background-color-step-650);
}
.text-step-650 {
color: var(--ion-text-color-step-650);
background: var(--ion-color-step-650, #595959);
}
.background-step-700 {
background-color: var(--ion-background-color-step-700);
}
.text-step-700 {
color: var(--ion-text-color-step-700);
background: var(--ion-color-step-700, #4d4d4d);
}
.background-step-750 {
background-color: var(--ion-background-color-step-750);
}
.text-step-750 {
color: var(--ion-text-color-step-750);
background: var(--ion-color-step-750, #404040);
}
.background-step-800 {
background-color: var(--ion-background-color-step-800);
}
.text-step-800 {
color: var(--ion-text-color-step-800);
background: var(--ion-color-step-800, #333333);
}
.background-step-850 {
background-color: var(--ion-background-color-step-850);
}
.text-step-850 {
color: var(--ion-text-color-step-850);
background: var(--ion-color-step-850, #262626);
}
.background-step-900 {
background-color: var(--ion-background-color-step-900);
}
.text-step-900 {
color: var(--ion-text-color-step-900);
background: var(--ion-color-step-900, #1a1a1a);
}
.background-step-950 {
background-color: var(--ion-background-color-step-950);
background: var(--ion-color-step-950, #0d0d0d);
}
.text-step-50 {
color: var(--ion-color-step-950, #0d0d0d);
}
.text-step-100 {
color: var(--ion-color-step-900, #1a1a1a);
}
.text-step-150 {
color: var(--ion-color-step-850, #262626);
}
.text-step-200 {
color: var(--ion-color-step-800, #333333);
}
.text-step-250 {
color: var(--ion-color-step-750, #404040);
}
.text-step-300 {
color: var(--ion-color-step-700, #4d4d4d);
}
.text-step-350 {
color: var(--ion-color-step-650, #595959);
}
.text-step-400 {
color: var(--ion-color-step-600, #666666);
}
.text-step-450 {
color: var(--ion-color-step-550, #737373);
}
.text-step-500 {
color: var(--ion-color-step-500, gray);
}
.text-step-550 {
color: var(--ion-color-step-450, #8c8c8c);
}
.text-step-600 {
color: var(--ion-color-step-400, #999999);
}
.text-step-650 {
color: var(--ion-color-step-350, #a6a6a6);
}
.text-step-700 {
color: var(--ion-color-step-300, #b3b3b3);
}
.text-step-750 {
color: var(--ion-color-step-250, #bfbfbf);
}
.text-step-800 {
color: var(--ion-color-step-200, #cccccc);
}
.text-step-850 {
color: var(--ion-color-step-150, #d9d9d9);
}
.text-step-900 {
color: var(--ion-color-step-100, #e6e6e6);
}
.text-step-950 {
color: var(--ion-text-color-step-950);
}
.background-step-1000 {
background-color: var(--ion-background-color-step-1000);
}
.text-step-1000 {
color: var(--ion-text-color-step-1000);
color: var(--ion-color-step-50, #f2f2f2);
}
</style>
@@ -183,49 +175,48 @@
<body>
<ion-app>
<ion-content padding>
<div class="block background-step-50">Background</div>
<div class="block background-step-100">Background</div>
<div class="block background-step-150">Background</div>
<div class="block background-step-200">Background</div>
<div class="block background-step-250">Background</div>
<div class="block background-step-300">Background</div>
<div class="block background-step-350">Background</div>
<div class="block background-step-400">Background</div>
<div class="block background-step-450">Background</div>
<div class="block background-step-500">Background</div>
<div class="block background-step-550">Background</div>
<div class="block background-step-600">Background</div>
<div class="block background-step-650">Background</div>
<div class="block background-step-700">Background</div>
<div class="block background-step-750">Background</div>
<div class="block background-step-800">Background</div>
<div class="block background-step-850">Background</div>
<div class="block background-step-900">Background</div>
<div class="block background-step-950">Background</div>
<div class="block background-step-1000">Background</div>
<div class="block">Background</div>
<div class="block background-step-50">Step 50</div>
<div class="block background-step-100">Step 100</div>
<div class="block background-step-150">Step 150</div>
<div class="block background-step-200">Step 200</div>
<div class="block background-step-250">Step 250</div>
<div class="block background-step-300">Step 300</div>
<div class="block background-step-350">Step 350</div>
<div class="block background-step-400">Step 400</div>
<div class="block background-step-450">Step 450</div>
<div class="block background-step-500">Step 500</div>
<div class="block background-step-550">Step 550</div>
<div class="block background-step-600">Step 600</div>
<div class="block background-step-650">Step 650</div>
<div class="block background-step-700">Step 700</div>
<div class="block background-step-750">Step 750</div>
<div class="block background-step-800">Step 800</div>
<div class="block background-step-850">Step 850</div>
<div class="block background-step-900">Step 900</div>
<div class="block background-step-950">Step 950</div>
<hr>
<div class="block text-step-50">Text</div>
<div class="block text-step-100">Text</div>
<div class="block text-step-150">Text</div>
<div class="block text-step-200">Text</div>
<div class="block text-step-250">Text</div>
<div class="block text-step-300">Text</div>
<div class="block text-step-350">Text</div>
<div class="block text-step-400">Text</div>
<div class="block text-step-450">Text</div>
<div class="block text-step-500">Text</div>
<div class="block text-step-550">Text</div>
<div class="block text-step-600">Text</div>
<div class="block text-step-650">Text</div>
<div class="block text-step-700">Text</div>
<div class="block text-step-750">Text</div>
<div class="block text-step-800">Text</div>
<div class="block text-step-850">Text</div>
<div class="block text-step-900">Text</div>
<div class="block text-step-950">Text</div>
<div class="block text-step-1000">Text</div>
<div class="block">Text</div>
<div class="block text-step-50">Step 50</div>
<div class="block text-step-100">Step 100</div>
<div class="block text-step-150">Step 150</div>
<div class="block text-step-200">Step 200</div>
<div class="block text-step-250">Step 250</div>
<div class="block text-step-300">Step 300</div>
<div class="block text-step-350">Step 350</div>
<div class="block text-step-400">Step 400</div>
<div class="block text-step-450">Step 450</div>
<div class="block text-step-500">Step 500</div>
<div class="block text-step-550">Step 550</div>
<div class="block text-step-600">Step 600</div>
<div class="block text-step-650">Step 650</div>
<div class="block text-step-700">Step 700</div>
<div class="block text-step-750">Step 750</div>
<div class="block text-step-800">Step 800</div>
<div class="block text-step-850">Step 850</div>
<div class="block text-step-900">Step 900</div>
<div class="block text-step-950">Step 950</div>
</ion-content>
</ion-app>
</body>