{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.system.scss","../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA,+DCuGE,MACE,+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,+BAQJ,UACE,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,oBACE,6DACA,+DACA,iEAOF,SACE,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,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast-dark.system.css","sourcesContent":["@import \"./high-contrast-dark\";\n\n@media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n  :root {\n    @include high-contrast-dark-base-palette();\n  }\n\n  :root.ios {\n    @include high-contrast-dark-ios-palette();\n  }\n\n  :root.md {\n    @include high-contrast-dark-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/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    foreground: $primary,\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: #000,\n    shade: get-color-shade($secondary),\n    tint: get-color-tint($secondary),\n    foreground: $secondary,\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: #000,\n    shade: get-color-shade($tertiary),\n    tint: get-color-tint($tertiary),\n    foreground: $tertiary,\n  ),\n  success: (\n    base: $success,\n    contrast: #000,\n    shade: get-color-shade($success),\n    tint: get-color-tint($success),\n    foreground: $success,\n  ),\n  warning: (\n    base: $warning,\n    contrast: #000,\n    shade: get-color-shade($warning),\n    tint: get-color-tint($warning),\n    foreground: $warning,\n  ),\n  danger: (\n    base: $danger,\n    contrast: #000,\n    shade: get-color-shade($danger),\n    tint: get-color-tint($danger),\n    foreground: $danger,\n  ),\n  light: (\n    base: $light,\n    contrast: #fff,\n    shade: get-color-shade($light),\n    tint: get-color-tint($light),\n    foreground: $light,\n  ),\n  medium: (\n    base: $medium,\n    contrast: #000,\n    shade: get-color-shade($medium),\n    tint: get-color-tint($medium),\n    foreground: $medium,\n  ),\n  dark: (\n    base: $dark,\n    contrast: #000,\n    shade: get-color-shade($dark),\n    tint: get-color-tint($dark),\n    foreground: $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@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"]}