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
Files
a29ffb49ca7da588f97213ca032e87db42804f3f
ionic-framework/core/src/themes/ionic.theme.default.scss
Brandy Carney 7e2aa5516e refactor(sass): change order of Sass imports to use global vars 
This allows us to use the variables in ionic.theme.default without
having to import it. This new order is consistent with how the mode
specific globals already work.
2018-08-16 11:42:08 -04:00

91 lines
8.2 KiB
SCSS
Raw Blame History

// Default Foreground and Background Colors values
// Allows users to override an foreground / background colors
// TODO: @color-mod: remove all this
$background-color-value: #fff !default;
$background-color-rgb: 255, 255, 255 !default;
$text-color-value: #000 !default;
$text-color-rgb: 0, 0, 0 !default;
// Default Foreground and Background Colors
// --------------------------------------------------
$background-color: var(--ion-background-color, $background-color-value) !default;
$text-color: var(--ion-text-color, $text-color-value) !default;
$placeholder-text-color: var(--ion-placeholder-text-color, #999) !default;
// Default Background & Text Color Steps
// Color Steps are used to provide variations in text and background colors of elements.
// Steps move towards there "opposite" color.
// 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;
// Default General Colors
// --------------------------------------------------
$backdrop-color: var(--ion-backdrop-color, #000) !default;
$border-color: var(--ion-border-color, #b2b2b2) !default;
$box-shadow-color: var(--ion-box-shadow-color, #000) !default;
// Default Tabs & Tab bar
// --------------------------------------------------
$tabbar-background-color: var(--ion-tabbar-background-color, #f8f8f8) !default;
$tabbar-background-color-focused: var(--ion-tabbar-background-color-focused, get-color-shade(#f8f8f8)) !default;
$tabbar-border-color: var(--ion-tabbar-border-color, $border-color) !default;
$tabbar-text-color-active: var(--ion-tabbar-text-color-active, #488aff) !default;
$tabbar-text-color: var(--ion-tabbar-text-color, #8c8c8c) !default;
// Default Toolbar
// --------------------------------------------------
$toolbar-background-color: var(--ion-toolbar-background-color, #f8f8f8) !default;
$toolbar-border-color: var(--ion-toolbar-border-color, $border-color) !default;
$toolbar-color-active: var(--ion-toolbar-color-active, #4a4a4a) !default;
$toolbar-color-inactive: var(--ion-toolbar-color-inactive, #8c8c8c) !default;
$toolbar-text-color: var(--ion-toolbar-text-color, $text-color) !default;
// Default List & List Items
// --------------------------------------------------
$item-background-color: var(--ion-item-background-color, $background-color) !default;
$item-background-color-active: var(--ion-item-background-color-active, $background-color) !default;
$item-border-color: var(--ion-item-border-color, #c8c7cc) !default;
$item-text-color: var(--ion-item-text-color, $text-color) !default;
Reference in New Issue View Git Blame Copy Permalink