javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(theming): update components to use the proper colors for dark themes (#18735)

Browse Source 
references #18713
This commit is contained in:
Brandy Carney
2019-07-12 17:31:42 -04:00
committed by GitHub
parent 08af35aad2
commit 045bc59b75
25 changed files with 362 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@ -65,7 +65,7 @@ $action-sheet-ios-title-border-style: solid !default
$action-sheet-ios-title-border-color-alpha: .08 !default;
/// @prop - Border color of the action sheet title
$action-sheet-ios-title-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default;
$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
// Action Sheet Subtitle
@ -124,7 +124,7 @@ $action-sheet-ios-button-border-style: solid !default
$action-sheet-ios-button-border-color-alpha: .08 !default;
/// @prop - Border color of the action sheet button
$action-sheet-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default;
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
/// @prop - Background color of the action sheet button
$action-sheet-ios-button-background: transparent !default;
@ -133,7 +133,7 @@ $action-sheet-ios-button-background: transparent !d
$action-sheet-ios-button-background-alpha-activated: .08 !default;
/// @prop - Background color of the activated action sheet button
$action-sheet-ios-button-background-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default;
$action-sheet-ios-button-background-activated: rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default;
/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: $background-color !default;

2
core/src/components/action-sheet/action-sheet.md.vars.scss
View File

@ -23,7 +23,7 @@ $action-sheet-md-padding-bottom: 0 !default;
$action-sheet-md-title-height: 60px !default;
/// @prop - Color of the action sheet title
$action-sheet-md-title-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
/// @prop - Font size of the action sheet title
$action-sheet-md-title-font-size: 16px !default;

4
core/src/components/alert/alert.ios.vars.scss
View File

@ -152,7 +152,7 @@ $alert-ios-button-background-color: transparent !default;
$alert-ios-button-background-color-alpha-activated: .1 !default;
/// @prop - Background color of the alert activated button
$alert-ios-button-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-background-color-alpha-activated) !default;
$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default;
/// @prop - Border width of the alert button
$alert-ios-button-border-width: $hairlines-width !default;
@ -164,7 +164,7 @@ $alert-ios-button-border-style: solid !default;
$alert-ios-button-border-color-alpha: .2 !default;
/// @prop - Border color of the alert button
$alert-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-border-color-alpha) !default;
$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default;
/// @prop - Border radius of the alert button
$alert-ios-button-border-radius: 0 !default;

6
core/src/components/button/button.md.vars.scss
View File

@ -122,7 +122,7 @@ $button-md-outline-box-shadow: none !default;
$button-md-outline-background-color-alpha-hover: .1 !default;
/// @prop - Background color of the outline button on hover
$button-md-outline-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-outline-background-color-alpha-hover) !default;
$button-md-outline-background-color-hover: rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
/// @prop - Background color of the activated outline button
$button-md-outline-background-color-activated: transparent !default;
@ -158,7 +158,7 @@ $button-md-clear-opacity: 1 !default;
$button-md-clear-background-color-alpha-activated: .1 !default;
/// @prop - Background color of the activated clear button
$button-md-clear-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-activated) !default;
$button-md-clear-background-color-activated: rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
/// @prop - Box shadow of the activated clear button
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
@ -167,7 +167,7 @@ $button-md-clear-box-shadow-activated: $button-md-clear-box-sha
$button-md-clear-background-color-alpha-hover: .1 !default;
/// @prop - Background color of the clear button on hover
$button-md-clear-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-hover) !default;
$button-md-clear-background-color-hover: rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
/// @prop - Background color of the ripple on the clear button
$button-md-clear-ripple-background-color: $text-color-step-600 !default;

2
core/src/components/checkbox/checkbox.ios.vars.scss
View File

@ -17,7 +17,7 @@ $checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
$checkbox-ios-icon-size: 26px !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-ios-icon-border-color-off: $item-ios-border-color !default;
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
/// @prop - Border color of the checkbox icon when on
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;

2
core/src/components/checkbox/checkbox.md.vars.scss
View File

@ -38,7 +38,7 @@ $checkbox-md-icon-border-style: solid !default;
$checkbox-md-icon-border-radius: 2px !default;
/// @prop - Border color of the checkbox icon when off
$checkbox-md-icon-border-color-off: rgba(0, 0, 0, .54) !default;
$checkbox-md-icon-border-color-off: rgba($text-color-rgb, .51) !default;
/// @prop - Border color of the checkbox icon when on
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;

12
core/src/components/chip/chip.scss
View File

@ -5,8 +5,8 @@
* @prop --background: Background of the chip
* @prop --color: Color of the chip
*/
--background: rgba(0, 0, 0, .12);
--color: rgba(0, 0, 0, .87);
--background: #{rgba($text-color-rgb, .12)};
--color: #{rgba($text-color-rgb, .87)};
@include border-radius(16px);
@include font-smoothing();
@ -128,7 +128,7 @@
}
:host(:focus) {
--background: rgba(0, 0, 0, .16);
--background: #{rgba($text-color-rgb, .16)};
}
@ -136,7 +136,7 @@
// ---------------------------------------------
:host(.activated) {
--background: rgba(0, 0, 0, .20);
--background: #{rgba($text-color-rgb, .20)};
}
@ -145,7 +145,7 @@
@media (any-hover: hover) {
:host(:hover) {
--background: rgba(0, 0, 0, .16);
--background: #{rgba($text-color-rgb, .16)};
}
:host(.ion-color:hover) {
@ -153,6 +153,6 @@
}
:host(.chip-outline:not(.ion-color):hover) {
background: rgba(0, 0, 0, .04);
background: rgba($text-color-rgb, .04);
}
}

2
core/src/components/fab-button/fab-button.md.vars.scss
View File

@ -31,7 +31,7 @@ $fab-md-list-button-background-color-activated: ion-color(light, shade) !defau
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
/// @prop - Text color of the button in a list
$fab-md-list-button-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
/// @prop - Font size of the button icon in a list
$fab-md-list-button-icon-font-size: 18px !default;

2
core/src/components/item/item.ios.vars.scss
View File

@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def
$item-ios-paragraph-font-size: 14px !default;
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: $text-color-step-600 !default;
$item-ios-paragraph-text-color: rgba($text-color-rgb, .4) !default;
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px !default;

2
core/src/components/item/item.md.vars.scss
View File

@ -133,7 +133,7 @@ $item-md-icon-end-slot-margin-start: 16px !default;
$item-md-icon-end-slot-margin-end: null !default;
/// @prop - Color for an icon in the start/end slot
$item-md-icon-slot-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default;
/// @prop - Font size of an icon in the start/end slot
$item-md-icon-slot-font-size: 24px !default;

2
core/src/components/loading/loading.ios.vars.scss
View File

@ -31,7 +31,7 @@ $loading-ios-border-radius: 8px !default;
$loading-ios-text-color: $text-color !default;
/// @prop - Background of the loading wrapper
$loading-ios-background-color: $background-color-step-50 !default;
$loading-ios-background-color: $overlay-ios-background-color !default;
/// @prop - Background color alpha of the translucent loading wrapper
$loading-ios-translucent-background-color-alpha: .8 !default;

6
core/src/components/range/range.ios.vars.scss
View File

@ -19,10 +19,10 @@ $range-ios-hit-width: 42px !default;
$range-ios-hit-height: $range-ios-slider-height !default;
/// @prop - Height of the range bar
$range-ios-bar-height: 1px !default;
$range-ios-bar-height: 2px !default;
/// @prop - Background of the range bar
$range-ios-bar-background-color: $background-color-step-250 !default;
$range-ios-bar-background-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default;
/// @prop - Background of the active range bar
$range-ios-bar-active-background-color: current-color(base) !default;
@ -40,7 +40,7 @@ $range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px
$range-ios-knob-border-radius: 50% !default;
/// @prop - Background of the range knob
$range-ios-knob-background-color: $background-color !default;
$range-ios-knob-background-color: #ffffff !default;
/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height !default;

2
core/src/components/searchbar/searchbar.ios.vars.scss
View File

@ -46,7 +46,7 @@ $searchbar-ios-input-text-color: $text-color !default;
$searchbar-ios-input-background-color-alpha: .07 !default;
/// @prop - Background color of the searchbar input
$searchbar-ios-input-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $searchbar-ios-input-background-color-alpha) !default;
$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default;
/// @prop - Transition of the searchbar input
$searchbar-ios-input-transition: all 300ms ease !default;

2
core/src/components/segment-button/segment-button.md.vars.scss
View File

@ -7,7 +7,7 @@
$segment-button-md-opacity: .6 !default;
/// @prop - Text color of the segment button
$segment-button-md-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $segment-button-md-opacity) !default;
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default;
/// @prop - Background of the segment button
$segment-button-md-background: none !default;

4
core/src/components/skeleton-text/skeleton-text.vars.scss
View File

@ -7,10 +7,10 @@
$skeleton-text-background-alpha: .065 !default;
/// @prop - Background color of the skeleton text
$skeleton-text-background: rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-alpha) !default;
$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default;
/// @prop - Background color alpha of the skeleton text animation
$skeleton-text-background-animated-alpha: .135 !default;
/// @prop - Background color of the skeleton text animation
$skeleton-text-background-animated: rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-animated-alpha) !default;
$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default;

6
core/src/components/slides/slides.ios.vars.scss
View File

@ -10,7 +10,7 @@ $slides-ios-bullet-background-active: ion-color(primary, base) !defa
$slides-ios-progress-bar-background-alpha: .25 !default;
/// @prop - Background color of the progress bar
$slides-ios-progress-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-progress-bar-background-alpha) !default;
$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default;
/// @prop - Background color of the active progress bar
$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default;
@ -19,10 +19,10 @@ $slides-ios-progress-bar-background-active: ion-color(primary, shade) !def
$slides-ios-scroll-bar-background-alpha: .1 !default;
/// @prop - Background color of the scroll bar
$slides-ios-scroll-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-background-alpha) !default;
$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default;
/// @prop - Alpha to use for the background color of the scroll bar while dragging
$slides-ios-scroll-bar-drag-background-alpha: .5 !default;
/// @prop - Background color of the scroll bar drag handle
$slides-ios-scroll-bar-drag-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-drag-background-alpha) !default;
$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default;

6
core/src/components/slides/slides.md.vars.scss
View File

@ -10,7 +10,7 @@ $slides-md-bullet-background-active: ion-color(primary, base) !defaul
$slides-md-progress-bar-background-alpha: .25 !default;
/// @prop - Background color of the progress
$slides-md-progress-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-progress-bar-background-alpha) !default;
$slides-md-progress-bar-background: rgba($text-color-rgb, $slides-md-progress-bar-background-alpha) !default;
/// @prop - Background color of the progress bar
$slides-md-progress-bar-background-active: ion-color(primary, shade) !default;
@ -19,10 +19,10 @@ $slides-md-progress-bar-background-active: ion-color(primary, shade) !defau
$slides-md-scroll-bar-background-alpha: .1 !default;
/// @prop - Background color of the scroll bar
$slides-md-scroll-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-background-alpha) !default;
$slides-md-scroll-bar-background: rgba($text-color-rgb, $slides-md-scroll-bar-background-alpha) !default;
/// @prop - Alpha to use for the background color of the scroll bar while dragging
$slides-md-scroll-bar-drag-background-alpha: .5 !default;
/// @prop - Background color of the scroll bar drag handle
$slides-md-scroll-bar-drag-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-drag-background-alpha) !default;
$slides-md-scroll-bar-drag-background: rgba($text-color-rgb, $slides-md-scroll-bar-drag-background-alpha) !default;

21
core/src/components/toggle/toggle.ios.scss
View File

@ -43,32 +43,13 @@
transition: background-color $toggle-ios-transition-duration;
background-color: $toggle-ios-border-color-off;
background-color: $toggle-ios-background-color-off;
overflow: hidden;
pointer-events: none;
}
// iOS Toggle Background Oval: Unchecked
// -----------------------------------------
.toggle-icon::before {
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
@include border-radius($toggle-ios-border-radius);
position: absolute;
transform: scale3d(1, 1, 1);
transition: transform $toggle-ios-transition-duration;
background: var(--background);
content: "";
}
// iOS Toggle Inner Knob: Unchecked
// -----------------------------------------

7
core/src/components/toggle/toggle.ios.vars.scss
View File

@ -17,10 +17,7 @@ $toggle-ios-border-width: 2px !default;
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
/// @prop - Background color of the unchecked toggle
$toggle-ios-background-color-off: $item-ios-background !default;
/// @prop - Border color of the unchecked toggle
$toggle-ios-border-color-off: $background-color-step-50 !default;
$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default;
/// @prop - Background color of the checked toggle
$toggle-ios-background-color-on: ion-color(primary, base) !default;
@ -38,7 +35,7 @@ $toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
/// @prop - Background color of the toggle handle
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
$toggle-ios-handle-background-color: #ffffff !default;
/// @prop - Margin of the toggle handle
$toggle-ios-media-margin: 0 !default;

4
core/src/components/toggle/toggle.md.vars.scss
View File

@ -14,7 +14,7 @@ $toggle-md-track-width: 36px !default;
$toggle-md-track-height: 14px !default;
/// @prop - Background color of the toggle track
$toggle-md-track-background-color-off: ion-color(medium, tint) !default;
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.3) !default;
/// @prop - Background color alpha of the checked toggle track
$toggle-md-track-background-color-alpha-on: .5 !default;
@ -35,7 +35,7 @@ $toggle-md-handle-border-radius: 50% !default;
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
/// @prop - Background color of the toggle handle
$toggle-md-handle-background-color-off: $background-color !default;
$toggle-md-handle-background-color-off: #ffffff !default;
/// @prop - Background color of the checked toggle handle
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;

6
core/src/themes/ionic.theme.default.ios.scss
View File

@ -9,7 +9,7 @@
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
$border-ios-color: var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default;
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-50, #f9f9f9)) !default;
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
// iOS Tabs & Tab bar
// --------------------------------------------------
@ -31,6 +31,6 @@ $toolbar-ios-color-activated: var(--ion-toolbar-color-activated, i
$item-ios-background: var(--ion-item-background, $background-color) !default;
$item-ios-background-activated: var(--ion-item-background-activated, var(--ion-color-step-150, #d9d9d9)) !default;
$item-ios-background-focused: var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
$item-ios-background-hover: var(--ion-item-background-hover, var(--ion-color-step-50, #f5f5f5)) !default;
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, #c8c7cc))) !default;
$item-ios-background-hover: var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
$item-ios-color: var(--ion-item-color, $text-color) !default;

2
core/src/themes/ionic.theme.default.md.scss
View File

@ -32,6 +32,6 @@ $toolbar-md-color-activated: var(--ion-toolbar-color-activated, #
$item-md-background: var(--ion-item-background, $background-color) !default;
// activated item background does not exist in MD as it uses the ripple color
$item-md-background-focused: var(--ion-item-background-focused, var(--ion-color-step-100, #e1e1e1)) !default;
$item-md-background-hover: var(--ion-item-background-hover, var(--ion-color-step-50, #f5f5f5)) !default;
$item-md-background-hover: var(--ion-item-background-hover, rgba($text-color-rgb, 0.04)) !default;
$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
$item-md-color: var(--ion-item-color, $text-color) !default;

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

@ -87,11 +87,12 @@ $background-color-value: #fff !default;
$background-color-rgb-value: 255, 255, 255 !default;
$text-color-value: #000 !default;
$text-color-rgb: 0, 0, 0 !default;
$text-color-rgb-value: 0, 0, 0 !default;
$background-color: var(--ion-background-color, $background-color-value) !default;
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default;
$text-color: var(--ion-text-color, $text-color-value) !default;
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default;
// Default Foreground and Background Step Colors
// -------------------------------------------------------------------------------------------

162
core/src/themes/test/css-variables/css/dark.css
View File

@ -1,47 +1,139 @@
:root {
--ion-background-color: #171717;
--ion-text-color: #ffffff;
--ion-color-step-50: #232323;
--ion-color-step-100: #2e2e2e;
--ion-color-step-150: #3a3a3a;
--ion-color-step-200: #454545;
--ion-color-step-250: #515151;
--ion-color-step-300: #5d5d5d;
--ion-color-step-350: #686868;
--ion-color-step-400: #747474;
--ion-color-step-450: #7f7f7f;
--ion-color-step-500: #8b8b8b;
--ion-color-step-550: #979797;
--ion-color-step-600: #a2a2a2;
--ion-color-step-650: #aeaeae;
--ion-color-step-700: #b9b9b9;
--ion-color-step-750: #c5c5c5;
--ion-color-step-800: #d1d1d1;
--ion-color-step-850: #dcdcdc;
--ion-color-step-900: #e8e8e8;
--ion-color-step-950: #f3f3f3;
--ion-background-color-rgb: 23,23,23;
--ion-background-color-rgb: 0,0,0;
--ion-text-color-rgb: 255,255,255;
--ion-item-background: #1b2025;
--ion-item-background-activated: #051b35;
/* Custom Toolbar CSS (optional) */
--ion-toolbar-background: #000;
/* --ion-toolbar-background: #000;
--ion-toolbar-border-color: #333;
--ion-toolbar-color: limegreen;
--ion-toolbar-color-activated: rgb(35, 156, 35);
--ion-toolbar-color-activated: rgb(35, 156, 35); */
--ion-color-primary: #428CFF;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;
--ion-color-secondary: #50C8FF;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;
--ion-color-tertiary: #6A64FF;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;
--ion-color-success: #2FDF75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;
--ion-color-warning: #FFD534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;
--ion-color-danger: #FF4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;
--ion-color-dark: #F4F5F8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;
--ion-color-medium: #989AA2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;
--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}
/* Customize the Toolbar Segment by Mode */
.ios {
--ion-toolbar-color-unchecked: limegreen;
--ion-toolbar-color-checked: limegreen;
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;
--ion-item-background: #1c1c1c;
--ion-item-background-activated: #313131;
/* --ion-toolbar-color-unchecked: limegreen;
--ion-toolbar-color-checked: limegreen; */
}
.md {
--ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
--ion-toolbar-color-checked: #fff;
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-border-color: #222222;
--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--ion-item-background: #1A1B1E;
/* --ion-toolbar-color-unchecked: rgba(255, 255, 255, .6);
--ion-toolbar-color-checked: #fff; */
}

336
core/src/themes/test/css-variables/index.html
View File

@ -4,7 +4,8 @@
<head>
<meta charset="UTF-8">
<title>CSS Variable - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@ -43,6 +44,10 @@
margin-bottom: 8px;
}
ion-toolbar ion-segment {
margin-bottom: 0;
}
.icon-section ion-icon {
font-size: 48px;
}
@ -98,10 +103,18 @@
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button><ion-label>Favorites</ion-label></ion-segment-button>
<ion-segment-button><ion-label>All</ion-label></ion-segment-button>
<ion-segment-button disabled><ion-label>Disabled</ion-label></ion-segment-button>
<ion-segment-button checked><ion-label>Active</ion-label></ion-segment-button>
<ion-segment-button>
<ion-label>Favorites</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>All</ion-label>
</ion-segment-button>
<ion-segment-button disabled>
<ion-label>Disabled</ion-label>
</ion-segment-button>
<ion-segment-button checked>
<ion-label>Active</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
@ -115,7 +128,8 @@
</ion-card-header>
<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods.
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a
week in the woods.
Wash your spirit clean.
</ion-card-content>
</ion-card>
@ -156,11 +170,11 @@
<section>
<ion-list>
<ion-item>
<ion-item button>
<ion-label>Pokémon Yellow</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-item button>
<ion-label>Super Metroid</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
@ -177,40 +191,56 @@
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
<ion-label>
<h2>Super Mario World</h2>
<p>Featuring Luigi</p>
</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item>
<ion-label>Street Fighter II</ion-label>
<ion-label>
<h2>Street Fighter II</h2>
<p>The Sequel</p>
</ion-label>
<ion-note slot="end">Note</ion-note>
</ion-item>
<ion-item-divider>Sliding Items</ion-item-divider>
<ion-item-sliding>
<ion-item><ion-label>Half Life</ion-label></ion-item>
<ion-item>
<ion-label>Half Life</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item color="secondary"><ion-label>Final Fantasy VII</ion-label></ion-item>
<ion-item color="secondary">
<ion-label>Final Fantasy VII</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Tetris</ion-label></ion-item>
<ion-item>
<ion-label>Tetris</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
<ion-item>
<ion-label>Donkey Kong III</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option>More</ion-item-option>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding>
<ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
<ion-item>
<ion-label>Goldeneye 007</ion-label>
</ion-item>
<ion-item-options>
<ion-item-option disabled="true">More</ion-item-option>
</ion-item-options>
@ -219,125 +249,134 @@
</section>
<section>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Fruits</ion-label>
</ion-item-divider>
<ion-list>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Fruits</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Veggies</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Celery</ion-label>
<ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Lettuce, checked, disabled</ion-label>
<ion-radio color="tertiary" slot="start" value="lettuce" checked disabled></ion-radio>
</ion-item>
<ion-item>
<ion-label>Onion</ion-label>
<ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list>
<ion-item>
<ion-label>Apple</ion-label>
<ion-radio slot="start" value="apple"></ion-radio>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-label>Grape, checked, disabled</ion-label>
<ion-radio slot="start" id="grapeChecked" value="grape" checked disabled></ion-radio>
<ion-range color="success" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-label>Cherry</ion-label>
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-radio-group id="fruitRadio">
<ion-item-divider>
<ion-label>Veggies</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Celery</ion-label>
<ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
<ion-range color="warning" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-label>Lettuce, checked, disabled</ion-label>
<ion-radio color="tertiary" slot="start" value="lettuce" checked disabled></ion-radio>
<ion-range color="danger" value="20"></ion-range>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Onion</ion-label>
<ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
</ion-item>
</ion-radio-group>
<ion-item>
<ion-range value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range color="success" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range color="warning" value="20"></ion-range>
</ion-item>
<ion-item>
<ion-range color="danger" value="20"></ion-range>
</ion-item>
</section>
<section>
<ion-item>
<ion-label>Default</ion-label>
<ion-checkbox slot="end" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Primary</ion-label>
<ion-checkbox slot="end" color="primary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Secondary</ion-label>
<ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Warning</ion-label>
<ion-checkbox slot="end" color="warning" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Danger</ion-label>
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Light</ion-label>
<ion-checkbox slot="end" color="light" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox slot="end" color="dark" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Unchecked by Default</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-checkbox slot="end" disabled></ion-checkbox>
</ion-item>
<ion-list>
<ion-item>
<ion-label>Default</ion-label>
<ion-checkbox slot="end" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Primary</ion-label>
<ion-checkbox slot="end" color="primary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Secondary</ion-label>
<ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Warning</ion-label>
<ion-checkbox slot="end" color="warning" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Danger</ion-label>
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Light</ion-label>
<ion-checkbox slot="end" color="light" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Dark</ion-label>
<ion-checkbox slot="end" color="dark" checked></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Unchecked by Default</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-checkbox slot="end" disabled></ion-checkbox>
</ion-item>
<ion-item>
<ion-toggle slot="start"></ion-toggle>
<ion-label>Blueberry</ion-label>
</ion-item>
<ion-item>
<ion-toggle slot="start"></ion-toggle>
<ion-label>Blueberry</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="success" slot="start" checked></ion-toggle>
<ion-label>Lettuce</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="success" slot="start" checked></ion-toggle>
<ion-label>Lettuce</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="danger" slot="start" checked></ion-toggle>
<ion-label>Apple</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="danger" slot="start" checked></ion-toggle>
<ion-label>Apple</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="tertiary" slot="start" checked></ion-toggle>
<ion-label>Radish</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="tertiary" slot="start" checked></ion-toggle>
<ion-label>Radish</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="dark" slot="start" checked></ion-toggle>
<ion-label>Blackberry</ion-label>
</ion-item>
<ion-item>
<ion-toggle color="dark" slot="start" checked></ion-toggle>
<ion-label>Blackberry</ion-label>
</ion-item>
</ion-list>
</section>
</div>
</ion-content>
@ -370,6 +409,7 @@
<ion-button fill="clear" color="warning">Warning Clear</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
@ -382,6 +422,7 @@
<ion-button class="ion-focused" fill="clear" color="warning">Warning Clear</ion-button>
<ion-button class="ion-focused" color="danger">Danger</ion-button>
<ion-button class="ion-focused" color="light">Light</ion-button>
<ion-button class="ion-focused" color="dark">Dark</ion-button>
<ion-button class="ion-focused" expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button class="ion-focused" expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
@ -406,7 +447,8 @@
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
<ion-icon slot="start" name="pin"></ion-icon>Map
</ion-button>
<ion-button shape="round">Round</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>
@ -718,38 +760,38 @@
<ion-content>
<div class="wrapper">
<!-- <section> -->
<ion-list>
<ion-item button onClick="presentAlert()">
<ion-label>Present Alert</ion-label>
</ion-item>
<ion-item button onClick="presentActionSheet()">
<ion-label>Present Action Sheet</ion-label>
</ion-item>
<ion-item button onClick="presentLoading()">
<ion-label>Present Loading</ion-label>
</ion-item>
<ion-item button onClick="presentModal()">
<ion-label>Present Modal</ion-label>
</ion-item>
<ion-item button onClick="presentPopover(event)">
<ion-label>Present Popover</ion-label>
</ion-item>
<ion-item button onClick="presentToast()">
<ion-label>Present Toast</ion-label>
</ion-item>
<ion-item>
<ion-label>Datetime</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Select</ion-label>
<ion-select>
<ion-select-option>1</ion-select-option>
<ion-select-option>2</ion-select-option>
<ion-select-option>3</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list>
<ion-item button onClick="presentAlert()">
<ion-label>Present Alert</ion-label>
</ion-item>
<ion-item button onClick="presentActionSheet()">
<ion-label>Present Action Sheet</ion-label>
</ion-item>
<ion-item button onClick="presentLoading()">
<ion-label>Present Loading</ion-label>
</ion-item>
<ion-item button onClick="presentModal()">
<ion-label>Present Modal</ion-label>
</ion-item>
<ion-item button onClick="presentPopover(event)">
<ion-label>Present Popover</ion-label>
</ion-item>
<ion-item button onClick="presentToast()">
<ion-label>Present Toast</ion-label>
</ion-item>
<ion-item>
<ion-label>Datetime</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Select</ion-label>
<ion-select>
<ion-select-option>1</ion-select-option>
<ion-select-option>2</ion-select-option>
<ion-select-option>3</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<!-- </section> -->
</div>
</ion-content>