core/src/css/palettes/high-contrast.scss - main - githubmirror/ionic-framework

core/src/css/palettes/high-contrast.scss
157 строк6 KB
Liam DeBeasi
chore(theming): remove Sass default flags (#29401)
25 апр 2024, 22:59
25 апр 2024, 22:596e8bf49
@use "sass:map";
@import "../../themes/ionic.functions.color";

$primary:         #003fae;
$secondary:       #01487b;
$tertiary:        #3400e6;
$success:         #004314;
$warning:         #5f4100;
$danger:          #9c000c;
$light:           #f4f5f8;
$medium:          #444446;
$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:         #fff,
    shade:            get-color-shade($success),
    tint:             get-color-tint($success)
  ),
  warning: (
    base:             $warning,
    contrast:         #fff,
    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)
  )
);

/// Text step colors are generated based on
/// how dark or light text can be. The darkest
/// text color is usually the default text color (white or black).
/// The darker the $lightest-text-color is, the darker each
/// stepped color is. If you want to increase text contrast,
/// make $lightest-text-color darker.
$background-color: #ffffff;
$text-color: #000000;

$darkest-text-color: $text-color;
$lightest-text-color: #888888;

/// Loop through each color object above
/// and generate CSS Variables for each
/// color. Do not use the ion-color function
/// here because that will set the variable
/// to evaluate to itself with a fallback.
/// For example:
/// --ion-color-primary: #{ion-color(primary, base)};
/// Maps to:
/// --ion-color-primary: var(--ion-color-primary, #...);
@mixin high-contrast-light-base-palette() {
  & {
    --ion-background-color: #{$background-color};
    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};
    --ion-text-color: #{$text-color};
    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};
    --ion-placeholder-opacity: 0.8;

    /// Only the item borders should increase in contrast
    /// Borders for elements like toolbars should remain the same
    --ion-item-border-color: #7a7a7a;
    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};
    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};
    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};
    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};
    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};
    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};
    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};
    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};
    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};
    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};
    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};
    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};
    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};
    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};
    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};
    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};
    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};
    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};
    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};

    @each $color-name, $value in $colors {
      --ion-color-#{$color-name}: #{map.get($value, base)};
      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
    }
  }
}

@mixin high-contrast-light-md-palette() {
  // Toast
  // --------------------------------------------------

  & ion-toast {
    --color: var(--ion-background-color);
  }

  & ion-toast::part(button) {
    // Fallback for browsers that don't support color-mix
    color: var(--color);
  }

  /* stylelint-disable-next-line order/order */
  @supports (color: color-mix(in lch, plum, pink)) {
    & ion-toast::part(button) {
      color: color-mix(in srgb, var(--color) 70%, var(--button-color));
    }
  }

  & ion-toast::part(button cancel) {
    color: var(--color);
  }
}