mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
6e8bf4914f
Issue number: N/A --------- ## What is the current behavior? Currently, every Sass variable in Ionic has the `!default` flag added to the end. From the [Sass variables documentation](https://sass-lang.com/documentation/variables/): > Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. > > To make this possible, Sass provides the `!default` flag. This assigns a value to a variable only if that variable isn’t defined or its value is [null](https://sass-lang.com/documentation/values/null). Otherwise, the existing value will be used. In past versions of Ionic Framework, developers wrote Sass variables to rebuild Ionic Framework using their own values. In the latest versions of Ionic Framework, this is not possible. ## What is the new behavior? Removes the `!default` flag from all Sass variables. ## Does this introduce a breaking change? - [ ] Yes - [x] No ------- Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
146 lines
9.4 KiB
SCSS
146 lines
9.4 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: (
|
|
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: #000,
|
|
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: #fff,
|
|
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)
|
|
)
|
|
);
|
|
|
|
// 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);
|