@ionic/core/css/palettes/high-contrast-dark.class.css.map

Base components for Ionic

{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAgGE,4CACE,+BAGE,6BACA,uCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BASJ,gDACE,gCACA,oCACA,0BACA,oCACA,+BACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,sCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,0DACE,6DACA,+DACA,iEAOF,+CACE,gCACA,uCACA,0BACA,oCACA,4BACA,+BACA,kCACA,kCACA,+BAIA,8DACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCAMF,yDACE,qCAGF,uEAEE,mBAIF,gDACE,uEACE,iEAIJ,8EACE","file":"high-contrast-dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #7cabff;\n$secondary:       #62bdff;\n$tertiary:        #b6b9f9;\n$success:         #4ada71;\n$warning:         #ffce31;\n$danger:          #fc9aa2;\n$light:           #222428;\n$medium:          #a8aab3;\n$dark:            #f4f5f8;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #000,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #000,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #000,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #000,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #000,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #000,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #fff,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #000,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #000,\n    shade:            get-color-shade($dark),\n    tint:             get-color-tint($dark)\n  )\n);\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n  & {\n    --ion-placeholder-opacity: 0.8;\n\n    @each $color-name, $value in $colors {\n      --ion-color-#{$color-name}: #{map.get($value, base)};\n      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n    }\n\n  }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n  $background-color: #000000;\n  \n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: var(--ion-background-color-step-400);\n    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n  }\n\n  // Modal\n  // --------------------------------------------------\n\n  & ion-modal {\n    --ion-background-color: var(--ion-background-color-step-100);\n    --ion-toolbar-background: var(--ion-background-color-step-150);\n    --ion-toolbar-border-color: var(--ion-background-color-step-250);\n  }\n}\n\n@mixin high-contrast-dark-md-palette() {\n  $background-color: #121212;\n  \n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-border-color: #222222;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: var(--ion-background-color-step-400);\n    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n  }\n\n  // Toast\n  // --------------------------------------------------\n\n  & ion-toast {\n    --color: var(--ion-background-color);\n  }\n\n  & ion-toast::part(button) {\n    // Fallback for browsers that don't support color-mix\n    color: var(--color);\n  }\n\n  /* stylelint-disable-next-line order/order */\n  @supports (color: color-mix(in lch, plum, pink)) {\n    & ion-toast::part(button) {\n      color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}