mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
147a6090e4
* Cleanup for iOS mode used in material variables Refactor to alpha variables for colors in the color map updated theme builder with new alpha variables updated theme builder with duplicate default CSS modes * moved alpha transform into css-var removed ion-color-alpha fixes for disabled css-variable mode added defaults for user configurable variables * revert to spinner related code
193 lines
12 KiB
SCSS
193 lines
12 KiB
SCSS
@import "./ionic.globals";
|
|
|
|
// Default Theme
|
|
// ----------------------------------
|
|
|
|
// Private color variables, use colors() to override
|
|
$primary: #3880ff;
|
|
$secondary: #0cd1e8;
|
|
$tertiary: #7044ff;
|
|
$success: #10dc60;
|
|
$warning: #ffce00;
|
|
$danger: #f04141;
|
|
$light: #f4f5f8;
|
|
$medium: #989aa2;
|
|
$dark: #222428;
|
|
|
|
// Allows users to override an individual color
|
|
$colors: () !default;
|
|
|
|
// Primary color map should provide
|
|
// - base: main color to be used.
|
|
// - contrast: Color that will provide readable text against the base color
|
|
// - shade: 12% darker version of the base color (mix with black)
|
|
// - tint: 10% lighter version of the base color (mix with white)
|
|
$ion-colors: (
|
|
primary: (
|
|
base: $primary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($primary),
|
|
tint: get-color-tint($primary)
|
|
),
|
|
secondary: (
|
|
base: $secondary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($secondary),
|
|
tint: get-color-tint($secondary)
|
|
),
|
|
tertiary: (
|
|
base: $tertiary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($tertiary),
|
|
tint: get-color-tint($tertiary)
|
|
),
|
|
success: (
|
|
base: $success,
|
|
contrast: #fff,
|
|
shade: get-color-shade($success),
|
|
tint: get-color-tint($success)
|
|
),
|
|
warning: (
|
|
base: $warning,
|
|
contrast: #000,
|
|
shade: get-color-shade($warning),
|
|
tint: get-color-tint($warning)
|
|
),
|
|
danger: (
|
|
base: $danger,
|
|
contrast: #fff,
|
|
shade: get-color-shade($danger),
|
|
tint: get-color-tint($danger)
|
|
),
|
|
light: (
|
|
base: $light,
|
|
contrast: #000,
|
|
shade: get-color-shade($light),
|
|
tint: get-color-tint($light)
|
|
),
|
|
medium: (
|
|
base: $medium,
|
|
contrast: #000,
|
|
shade: get-color-shade($medium),
|
|
tint: get-color-tint($medium)
|
|
),
|
|
dark: (
|
|
base: $dark,
|
|
contrast: #fff,
|
|
shade: get-color-shade($dark),
|
|
tint: get-color-tint($dark)
|
|
)
|
|
);
|
|
$colors: ion-extend-colors($ion-colors, $colors);
|
|
|
|
// Default Alpha levels
|
|
// --------------------------------------------------
|
|
$alpha-activated: css-var(.1, alpha-activated) !default;
|
|
$alpha-border-low: css-var(.1, alpha-border-low) !default;
|
|
$alpha-border-medium: css-var(.2, alpha-border-medium) !default;
|
|
$alpha-border-high: css-var(.3, alpha-border-high) !default;
|
|
$alpha-disabled: css-var(.5, alpha-disabled) !default;
|
|
$alpha-focused: css-var(.25, alpha-focused) !default;
|
|
$alpha-hover: css-var(.1, alpha-hover) !default;
|
|
$alpha-lowest: css-var(.1, alpha-lowest) !default;
|
|
$alpha-low: css-var(.25, alpha-low) !default;
|
|
$alpha-medium: css-var(.5, alpha-medium) !default;
|
|
$alpha-high: css-var(.8, alpha-high) !default;
|
|
$alpha-highest: css-var(.9, alpha-highest) !default;
|
|
|
|
// Default General
|
|
// --------------------------------------------------
|
|
$content-margin: 16px !default;
|
|
$content-padding: 16px !default;
|
|
$font-family-base: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif !default;
|
|
$font-size-base: 14px !default; // TODO: remove
|
|
|
|
// 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;
|
|
$text-color-value: #000 !default;
|
|
|
|
// Default Foreground and Background Colors
|
|
// --------------------------------------------------
|
|
$background-color: css-var($background-color-value, background-color) !default;
|
|
$text-color: css-var($text-color-value, text-color) !default;
|
|
$placeholder-text-color: css-var(#999, placeholder-text-color) !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: css-var(mix($text-color-value, $background-color-value, 5%), background-color-step-50) !default;
|
|
$background-color-step-100: css-var(mix($text-color-value, $background-color-value, 10%), background-color-step-100) !default;
|
|
$background-color-step-150: css-var(mix($text-color-value, $background-color-value, 15%), background-color-step-150) !default;
|
|
$background-color-step-200: css-var(mix($text-color-value, $background-color-value, 20%), background-color-step-200) !default;
|
|
$background-color-step-250: css-var(mix($text-color-value, $background-color-value, 25%), background-color-step-250) !default;
|
|
$background-color-step-300: css-var(mix($text-color-value, $background-color-value, 30%), background-color-step-300) !default;
|
|
$background-color-step-350: css-var(mix($text-color-value, $background-color-value, 35%), background-color-step-350) !default;
|
|
$background-color-step-400: css-var(mix($text-color-value, $background-color-value, 40%), background-color-step-400) !default;
|
|
$background-color-step-450: css-var(mix($text-color-value, $background-color-value, 45%), background-color-step-450) !default;
|
|
$background-color-step-500: css-var(mix($text-color-value, $background-color-value, 50%), background-color-step-500) !default;
|
|
$background-color-step-550: css-var(mix($text-color-value, $background-color-value, 55%), background-color-step-550) !default;
|
|
$background-color-step-600: css-var(mix($text-color-value, $background-color-value, 60%), background-color-step-600) !default;
|
|
$background-color-step-650: css-var(mix($text-color-value, $background-color-value, 65%), background-color-step-650) !default;
|
|
$background-color-step-700: css-var(mix($text-color-value, $background-color-value, 70%), background-color-step-700) !default;
|
|
$background-color-step-750: css-var(mix($text-color-value, $background-color-value, 75%), background-color-step-750) !default;
|
|
$background-color-step-800: css-var(mix($text-color-value, $background-color-value, 80%), background-color-step-800) !default;
|
|
$background-color-step-850: css-var(mix($text-color-value, $background-color-value, 85%), background-color-step-850) !default;
|
|
$background-color-step-900: css-var(mix($text-color-value, $background-color-value, 90%), background-color-step-900) !default;
|
|
$background-color-step-950: css-var(mix($text-color-value, $background-color-value, 95%), background-color-step-950) !default;
|
|
$background-color-step-1000: css-var(mix($text-color-value, $background-color-value, 100%), background-color-step-1000) !default;
|
|
$text-color-step-50: css-var(mix($background-color-value, $text-color-value, 5%), text-color-step-50) !default;
|
|
$text-color-step-100: css-var(mix($background-color-value, $text-color-value, 10%), text-color-step-100) !default;
|
|
$text-color-step-150: css-var(mix($background-color-value, $text-color-value, 15%), text-color-step-150) !default;
|
|
$text-color-step-200: css-var(mix($background-color-value, $text-color-value, 20%), text-color-step-200) !default;
|
|
$text-color-step-250: css-var(mix($background-color-value, $text-color-value, 25%), text-color-step-250) !default;
|
|
$text-color-step-300: css-var(mix($background-color-value, $text-color-value, 30%), text-color-step-300) !default;
|
|
$text-color-step-350: css-var(mix($background-color-value, $text-color-value, 35%), text-color-step-350) !default;
|
|
$text-color-step-400: css-var(mix($background-color-value, $text-color-value, 40%), text-color-step-400) !default;
|
|
$text-color-step-450: css-var(mix($background-color-value, $text-color-value, 45%), text-color-step-450) !default;
|
|
$text-color-step-500: css-var(mix($background-color-value, $text-color-value, 50%), text-color-step-500) !default;
|
|
$text-color-step-550: css-var(mix($background-color-value, $text-color-value, 55%), text-color-step-550) !default;
|
|
$text-color-step-600: css-var(mix($background-color-value, $text-color-value, 60%), text-color-step-600) !default;
|
|
$text-color-step-650: css-var(mix($background-color-value, $text-color-value, 65%), text-color-step-650) !default;
|
|
$text-color-step-700: css-var(mix($background-color-value, $text-color-value, 70%), text-color-step-700) !default;
|
|
$text-color-step-750: css-var(mix($background-color-value, $text-color-value, 75%), text-color-step-750) !default;
|
|
$text-color-step-800: css-var(mix($background-color-value, $text-color-value, 80%), text-color-step-800) !default;
|
|
$text-color-step-850: css-var(mix($background-color-value, $text-color-value, 85%), text-color-step-850) !default;
|
|
$text-color-step-900: css-var(mix($background-color-value, $text-color-value, 90%), text-color-step-900) !default;
|
|
$text-color-step-950: css-var(mix($background-color-value, $text-color-value, 95%), text-color-step-950) !default;
|
|
$text-color-step-1000: css-var(mix($background-color-value, $text-color-value, 100%), text-color-step-1000) !default;
|
|
|
|
// Default General Colors
|
|
// --------------------------------------------------
|
|
$backdrop-color: css-var(#000, backdrop-color) !default;
|
|
$border-color: css-var(#b2b2b2, border-color) !default;
|
|
$box-shadow-color: css-var(#000, box-shadow-color) !default;
|
|
$overlay-background-color: css-var(#fafafa, overlay-background-color) !default;
|
|
|
|
// Default Tabs & Tab bar
|
|
// --------------------------------------------------
|
|
$tabbar-background-color: css-var(#f8f8f8, tabbar-background-color) !default;
|
|
$tabbar-background-color-focused: css-var(get-color-shade(#f8f8f8), tabbar-background-color-focused) !default;
|
|
$tabbar-border-color: css-var($border-color, tabbar-border-color) !default;
|
|
$tabbar-text-color-active: css-var(#488aff, tabbar-text-color-active) !default;
|
|
$tabbar-text-color: css-var(#8c8c8c, tabbar-text-color) !default;
|
|
|
|
// Default Toolbar
|
|
// --------------------------------------------------
|
|
$toolbar-background-color: css-var(#f8f8f8, toolbar-background-color) !default;
|
|
$toolbar-border-color: css-var($border-color, toolbar-border-color) !default;
|
|
$toolbar-color-active: css-var(#4a4a4a, toolbar-color-active) !default;
|
|
$toolbar-color-inactive: css-var(#8c8c8c, toolbar-color-inactive) !default;
|
|
$toolbar-text-color: css-var($text-color, toolbar-text-color) !default;
|
|
|
|
// Default List & List Items
|
|
// --------------------------------------------------
|
|
$item-background-color: css-var($background-color, item-background-color) !default;
|
|
$item-background-color-active: css-var($background-color, item-background-color-active) !default;
|
|
$item-border-color: css-var(#c8c7cc, item-border-color) !default;
|
|
$item-text-color: css-var($text-color, item-text-color) !default;
|