mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
6c6f867ce4
* alpha tweaks * added alpha-input cleanup for theme-builder * removed global variables * style(searchbar): fix indentation closes #14196
179 lines
12 KiB
SCSS
179 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 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;
|
|
$ripple-background-color: css-var(#000, ripple-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;
|