core/src/themes/ionic.theme.default.scss - main - githubmirror/ionic-framework

core/src/themes/ionic.theme.default.scss
145 строк9 KB
Liam DeBeasi
chore(theming): remove Sass default flags (#29401)
25 апр 2024, 22:59
25 апр 2024, 22:596e8bf49
// 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);