mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
278 lines
8.8 KiB
SCSS
278 lines
8.8 KiB
SCSS
// Ionic Theme
|
|
// -------------------------------------------------------------------------------------------
|
|
// This file contains the theme variables shared
|
|
// between modes. This should only include variables
|
|
// used to theme the application colors.
|
|
|
|
// Default Ionic Colors
|
|
// -------------------------------------------------------------------------------------------
|
|
// 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)
|
|
|
|
$primary: #0054e9;
|
|
$secondary: #0163aa;
|
|
$tertiary: #6030ff;
|
|
$success: #2dd55b;
|
|
$warning: #ffc409;
|
|
$danger: #c5000f;
|
|
$light: #f4f5f8;
|
|
$medium: #636469;
|
|
$dark: #222428;
|
|
|
|
$colors: (
|
|
primary: (
|
|
bold: (
|
|
base: $primary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($primary),
|
|
tint: get-color-tint($primary),
|
|
),
|
|
),
|
|
secondary: (
|
|
bold: (
|
|
base: $secondary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($secondary),
|
|
tint: get-color-tint($secondary),
|
|
),
|
|
),
|
|
tertiary: (
|
|
bold: (
|
|
base: $tertiary,
|
|
contrast: #fff,
|
|
shade: get-color-shade($tertiary),
|
|
tint: get-color-tint($tertiary),
|
|
),
|
|
),
|
|
success: (
|
|
bold: (
|
|
base: $success,
|
|
contrast: #000,
|
|
shade: get-color-shade($success),
|
|
tint: get-color-tint($success),
|
|
),
|
|
),
|
|
warning: (
|
|
bold: (
|
|
base: $warning,
|
|
contrast: #000,
|
|
shade: get-color-shade($warning),
|
|
tint: get-color-tint($warning),
|
|
),
|
|
),
|
|
danger: (
|
|
bold: (
|
|
base: $danger,
|
|
contrast: #fff,
|
|
shade: get-color-shade($danger),
|
|
tint: get-color-tint($danger),
|
|
),
|
|
),
|
|
light: (
|
|
bold: (
|
|
base: $light,
|
|
contrast: #000,
|
|
shade: get-color-shade($light),
|
|
tint: get-color-tint($light),
|
|
),
|
|
),
|
|
medium: (
|
|
bold: (
|
|
base: $medium,
|
|
contrast: #fff,
|
|
shade: get-color-shade($medium),
|
|
tint: get-color-tint($medium),
|
|
),
|
|
),
|
|
dark: (
|
|
bold: (
|
|
base: $dark,
|
|
contrast: #fff,
|
|
shade: get-color-shade($dark),
|
|
tint: get-color-tint($dark),
|
|
),
|
|
),
|
|
);
|
|
|
|
// Default Foreground and Background Colors
|
|
// -------------------------------------------------------------------------------------------
|
|
// Used internally to calculate the default steps
|
|
|
|
$background-color-value: #fff;
|
|
$background-color-rgb-value: 255, 255, 255;
|
|
|
|
$text-color-value: #000;
|
|
$text-color-rgb-value: 0, 0, 0;
|
|
|
|
$background-color: var(--ion-background-color, $background-color-value);
|
|
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value);
|
|
$text-color: var(--ion-text-color, $text-color-value);
|
|
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value);
|
|
|
|
// Default Foreground and Background Step Colors
|
|
// -------------------------------------------------------------------------------------------
|
|
// Color Steps are used to provide variations in text and background colors of elements.
|
|
// Steps move towards their contrasting 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-color-step-50,
|
|
var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))
|
|
);
|
|
$background-color-step-100: var(
|
|
--ion-color-step-100,
|
|
var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))
|
|
);
|
|
$background-color-step-150: var(
|
|
--ion-color-step-150,
|
|
var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))
|
|
);
|
|
$background-color-step-200: var(
|
|
--ion-color-step-200,
|
|
var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))
|
|
);
|
|
$background-color-step-250: var(
|
|
--ion-color-step-250,
|
|
var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))
|
|
);
|
|
$background-color-step-300: var(
|
|
--ion-color-step-300,
|
|
var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))
|
|
);
|
|
$background-color-step-350: var(
|
|
--ion-color-step-350,
|
|
var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))
|
|
);
|
|
$background-color-step-400: var(
|
|
--ion-color-step-400,
|
|
var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))
|
|
);
|
|
$background-color-step-450: var(
|
|
--ion-color-step-450,
|
|
var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))
|
|
);
|
|
$background-color-step-500: var(
|
|
--ion-color-step-500,
|
|
var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))
|
|
);
|
|
$background-color-step-550: var(
|
|
--ion-color-step-550,
|
|
var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))
|
|
);
|
|
$background-color-step-600: var(
|
|
--ion-color-step-600,
|
|
var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))
|
|
);
|
|
$background-color-step-650: var(
|
|
--ion-color-step-650,
|
|
var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))
|
|
);
|
|
$background-color-step-700: var(
|
|
--ion-color-step-700,
|
|
var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))
|
|
);
|
|
$background-color-step-750: var(
|
|
--ion-color-step-750,
|
|
var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))
|
|
);
|
|
$background-color-step-800: var(
|
|
--ion-color-step-800,
|
|
var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))
|
|
);
|
|
$background-color-step-850: var(
|
|
--ion-color-step-850,
|
|
var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))
|
|
);
|
|
$background-color-step-900: var(
|
|
--ion-color-step-900,
|
|
var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))
|
|
);
|
|
$background-color-step-950: var(
|
|
--ion-color-step-950,
|
|
var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))
|
|
);
|
|
$text-color-step-50: var(
|
|
--ion-color-step-950,
|
|
var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))
|
|
);
|
|
$text-color-step-100: var(
|
|
--ion-color-step-900,
|
|
var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))
|
|
);
|
|
$text-color-step-150: var(
|
|
--ion-color-step-850,
|
|
var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))
|
|
);
|
|
$text-color-step-200: var(
|
|
--ion-color-step-800,
|
|
var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))
|
|
);
|
|
$text-color-step-250: var(
|
|
--ion-color-step-750,
|
|
var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))
|
|
);
|
|
$text-color-step-300: var(
|
|
--ion-color-step-700,
|
|
var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))
|
|
);
|
|
$text-color-step-350: var(
|
|
--ion-color-step-650,
|
|
var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))
|
|
);
|
|
$text-color-step-400: var(
|
|
--ion-color-step-600,
|
|
var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))
|
|
);
|
|
$text-color-step-450: var(
|
|
--ion-color-step-550,
|
|
var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))
|
|
);
|
|
$text-color-step-500: var(
|
|
--ion-color-step-500,
|
|
var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))
|
|
);
|
|
$text-color-step-550: var(
|
|
--ion-color-step-450,
|
|
var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))
|
|
);
|
|
$text-color-step-600: var(
|
|
--ion-color-step-400,
|
|
var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))
|
|
);
|
|
$text-color-step-650: var(
|
|
--ion-color-step-350,
|
|
var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))
|
|
);
|
|
$text-color-step-700: var(
|
|
--ion-color-step-300,
|
|
var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))
|
|
);
|
|
$text-color-step-750: var(
|
|
--ion-color-step-250,
|
|
var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))
|
|
);
|
|
$text-color-step-800: var(
|
|
--ion-color-step-200,
|
|
var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))
|
|
);
|
|
$text-color-step-850: var(
|
|
--ion-color-step-150,
|
|
var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))
|
|
);
|
|
$text-color-step-900: var(
|
|
--ion-color-step-100,
|
|
var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))
|
|
);
|
|
$text-color-step-950: var(
|
|
--ion-color-step-50,
|
|
var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))
|
|
);
|
|
|
|
// Default General Colors
|
|
// --------------------------------------------------
|
|
$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);
|