@ionic/core 8.7.13-dev.11765921002.107104c2 → 8.7.13-dev.11765925297.1bb45463

package/css/padding.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/css/padding.scss","../src/themes/ionic.mixins.scss"],"names":[],"mappings":"AAeA,gBACE,mBACA,iBACA,iBACA,oBCsTE,aDpTe,ECqTf,cDrTe,ECyUjB,YDzUiB,EC0UjB,eD1UiB,EAGnB,aACE,0CACA,wCACA,wCACA,2CCiTE,sBDpUM,yBCqUN,qBDrUM,yBCsUN,oBDtUM,yBCuUN,mBDvUM,yBCqVR,YDrVQ,yBCsVR,eDtVQ,yBAwBV,iBACE,wCC4TA,YDrVQ,yBA8BV,mBACE,0CCqSE,sBDpUM,yBCqUN,qBDrUM,yBAoCV,iBACE,wCCiSE,oBDtUM,yBCuUN,mBDvUM,yBA0CV,oBACE,2CC2SA,eDtVQ,yBAgDV,sBACE,wCACA,2CCmSA,YDrVQ,yBCsVR,eDtVQ,yBAuDV,wBACE,0CACA,wCC2QE,sBDpUM,yBCqUN,qBDrUM,yBCsUN,oBDtUM,yBCuUN,mBDvUM,yBAkEV,eACE,kBACA,gBACA,gBACA,mBC0PE,YDxPc,ECyPd,aDzPc,EC6QhB,WD7QgB,EC8QhB,cD9QgB,EAGlB,YACE,wCACA,sCACA,sCACA,yCCqPE,qBDnUK,wBCoUL,oBDpUK,wBCqUL,mBDrUK,wBCsUL,kBDtUK,wBCoVP,WDpVO,wBCqVP,cDrVO,wBAmFT,gBACE,sCCgQA,WDpVO,wBAyFT,kBACE,wCCyOE,qBDnUK,wBCoUL,oBDpUK,wBA+FT,gBACE,sCCqOE,mBDrUK,wBCsUL,kBDtUK,wBAqGT,mBACE,yCC+OA,cDrVO,wBA2GT,qBACE,sCACA,yCCuOA,WDpVO,wBCqVP,cDrVO,wBAkHT,uBACE,wCACA,sCC+ME,qBDnUK,wBCoUL,oBDpUK,wBCqUL,mBDrUK,wBCsUL,kBDtUK","file":"padding.css","sourcesContent":["@import \"../themes/ionic.globals\";\n@import \"../themes/ionic.mixins\";\n\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n$padding: var(--ion-padding, 16px);\n$margin: var(--ion-margin, 16px);\n\n// Padding\n// --------------------------------------------------\n\n.ion-no-padding {\n  --padding-start: 0;\n  --padding-end: 0;\n  --padding-top: 0;\n  --padding-bottom: 0;\n\n  @include padding(0);\n}\n\n.ion-padding {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding);\n}\n\n.ion-padding-top {\n  --padding-top: #{$padding};\n\n  @include padding($padding, null, null, null);\n}\n\n.ion-padding-start {\n  --padding-start: #{$padding};\n\n  @include padding-horizontal($padding, null);\n}\n\n.ion-padding-end {\n  --padding-end: #{$padding};\n\n  @include padding-horizontal(null, $padding);\n}\n\n.ion-padding-bottom {\n  --padding-bottom: #{$padding};\n\n  @include padding(null, null, $padding, null);\n}\n\n.ion-padding-vertical {\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding, null, $padding, null);\n}\n\n.ion-padding-horizontal {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n\n  @include padding-horizontal($padding);\n}\n\n\n// Margin\n// --------------------------------------------------\n\n.ion-no-margin {\n  --margin-start: 0;\n  --margin-end: 0;\n  --margin-top: 0;\n  --margin-bottom: 0;\n\n  @include margin(0);\n}\n\n.ion-margin {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin);\n}\n\n.ion-margin-top {\n  --margin-top: #{$margin};\n\n  @include margin($margin, null, null, null);\n}\n\n.ion-margin-start {\n  --margin-start: #{$margin};\n\n  @include margin-horizontal($margin, null);\n}\n\n.ion-margin-end {\n  --margin-end: #{$margin};\n\n  @include margin-horizontal(null, $margin);\n}\n\n.ion-margin-bottom {\n  --margin-bottom: #{$margin};\n\n  @include margin(null, null, $margin, null);\n}\n\n.ion-margin-vertical {\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin, null, $margin, null);\n}\n\n.ion-margin-horizontal {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n\n  @include margin-horizontal($margin);\n}\n","\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n\n  appearance: none;\n  outline: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  border: 0;\n  outline: 0;\n  clip: rect(0 0 0 0);\n\n  opacity: 0;\n  overflow: hidden;\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: str-split($root, \",\");\n  $selectors: #{add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr () {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      left: $start;\n      right: $end;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: str-replace($transform, 'translate3d(');\n      $transform: str-replace($transform, ')');\n\n      $coordinates: str-split($transform, ',');\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == '0' or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../src/css/padding.scss","../src/themes/mixins.scss"],"names":[],"mappings":"AAcA,gBACE,mBACA,iBACA,iBACA,oBCmUE,aDjUe,ECkUf,cDlUe,ECqVjB,YDrViB,ECsVjB,eDtViB,EAGnB,aACE,0CACA,wCACA,wCACA,2CC6TE,sBDhVM,yBCiVN,qBDjVM,yBCkVN,oBDlVM,yBCmVN,mBDnVM,yBCiWR,YDjWQ,yBCkWR,eDlWQ,yBAwBV,iBACE,wCCwUA,YDjWQ,yBA8BV,mBACE,0CCiTE,sBDhVM,yBCiVN,qBDjVM,yBAoCV,iBACE,wCC6SE,oBDlVM,yBCmVN,mBDnVM,yBA0CV,oBACE,2CCuTA,eDlWQ,yBAgDV,sBACE,wCACA,2CC+SA,YDjWQ,yBCkWR,eDlWQ,yBAuDV,wBACE,0CACA,wCCuRE,sBDhVM,yBCiVN,qBDjVM,yBCkVN,oBDlVM,yBCmVN,mBDnVM,yBAiEV,eACE,kBACA,gBACA,gBACA,mBCwQE,YDtQc,ECuQd,aDvQc,EC0RhB,WD1RgB,EC2RhB,cD3RgB,EAGlB,YACE,wCACA,sCACA,sCACA,yCCkQE,qBD/UK,wBCgVL,oBDhVK,wBCiVL,mBDjVK,wBCkVL,kBDlVK,wBCgWP,WDhWO,wBCiWP,cDjWO,wBAkFT,gBACE,sCC6QA,WDhWO,wBAwFT,kBACE,wCCsPE,qBD/UK,wBCgVL,oBDhVK,wBA8FT,gBACE,sCCkPE,mBDjVK,wBCkVL,kBDlVK,wBAoGT,mBACE,yCC4PA,cDjWO,wBA0GT,qBACE,sCACA,yCCoPA,WDhWO,wBCiWP,cDjWO,wBAiHT,uBACE,wCACA,sCC4NE,qBD/UK,wBCgVL,oBDhVK,wBCiVL,mBDjVK,wBCkVL,kBDlVK","file":"padding.css","sourcesContent":["@import \"../themes/native/native.globals\";\n@import \"../themes/mixins\";\n\n// Element Space\n// --------------------------------------------------\n// Creates padding and margin attributes to be used on\n// any element\n\n$padding: var(--ion-padding, 16px);\n$margin: var(--ion-margin, 16px);\n\n// Padding\n// --------------------------------------------------\n\n.ion-no-padding {\n  --padding-start: 0;\n  --padding-end: 0;\n  --padding-top: 0;\n  --padding-bottom: 0;\n\n  @include padding(0);\n}\n\n.ion-padding {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding);\n}\n\n.ion-padding-top {\n  --padding-top: #{$padding};\n\n  @include padding($padding, null, null, null);\n}\n\n.ion-padding-start {\n  --padding-start: #{$padding};\n\n  @include padding-horizontal($padding, null);\n}\n\n.ion-padding-end {\n  --padding-end: #{$padding};\n\n  @include padding-horizontal(null, $padding);\n}\n\n.ion-padding-bottom {\n  --padding-bottom: #{$padding};\n\n  @include padding(null, null, $padding, null);\n}\n\n.ion-padding-vertical {\n  --padding-top: #{$padding};\n  --padding-bottom: #{$padding};\n\n  @include padding($padding, null, $padding, null);\n}\n\n.ion-padding-horizontal {\n  --padding-start: #{$padding};\n  --padding-end: #{$padding};\n\n  @include padding-horizontal($padding);\n}\n\n// Margin\n// --------------------------------------------------\n\n.ion-no-margin {\n  --margin-start: 0;\n  --margin-end: 0;\n  --margin-top: 0;\n  --margin-bottom: 0;\n\n  @include margin(0);\n}\n\n.ion-margin {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin);\n}\n\n.ion-margin-top {\n  --margin-top: #{$margin};\n\n  @include margin($margin, null, null, null);\n}\n\n.ion-margin-start {\n  --margin-start: #{$margin};\n\n  @include margin-horizontal($margin, null);\n}\n\n.ion-margin-end {\n  --margin-end: #{$margin};\n\n  @include margin-horizontal(null, $margin);\n}\n\n.ion-margin-bottom {\n  --margin-bottom: #{$margin};\n\n  @include margin(null, null, $margin, null);\n}\n\n.ion-margin-vertical {\n  --margin-top: #{$margin};\n  --margin-bottom: #{$margin};\n\n  @include margin($margin, null, $margin, null);\n}\n\n.ion-margin-horizontal {\n  --margin-start: #{$margin};\n  --margin-end: #{$margin};\n\n  @include margin-horizontal($margin);\n}\n","@use \"./functions.string\" as string;\n\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n@mixin tablet-viewport() {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n@mixin mobile-viewport() {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin input-cover() {\n  @include position(0, null, null, 0);\n  @include margin(0);\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  border: 0;\n\n  outline: none;\n\n  background: transparent;\n\n  cursor: pointer;\n\n  appearance: none;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n}\n\n@mixin visually-hidden() {\n  position: absolute;\n\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 0;\n\n  outline: 0;\n\n  opacity: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n\n  -webkit-appearance: none;\n  -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n  color: inherit;\n\n  font-family: inherit;\n  font-size: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n\n  letter-spacing: inherit;\n\n  text-align: inherit;\n  text-decoration: inherit;\n  text-indent: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n\n  white-space: inherit;\n}\n\n@mixin button-state() {\n  @include position(0, 0, 0, 0);\n\n  position: absolute;\n\n  content: \"\";\n\n  opacity: 0;\n}\n\n// Font smoothing\n// --------------------------------------------------\n\n@mixin font-smoothing() {\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n  $keys: map-keys($map);\n\n  @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n  $min: map-get($breakpoints, $name);\n\n  @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n  $max: map-get($breakpoints, $name);\n\n  @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n  @content;\n\n  // $root: #{&};\n  // @at-root [dir] {\n  //   #{$root} {\n  //     @content;\n  //   }\n  // }\n}\n\n@mixin rtl() {\n  $root: #{&};\n\n  $rootSplit: string.str-split($root, \",\");\n  $selectors: #{string.add-root-selector($root, \"[dir=rtl]\")};\n  $selectorsSplit: string.str-split($selectors, \",\");\n\n  $hostContextSelectors: ();\n  $restSelectors: ();\n  $dirSelectors: ();\n\n  // Selectors must be split into individual selectors in case the browser\n  // doesn't support a specific selector.\n  // For example, Firefox and Safari doesn't support `:host-context()`.\n  // If an invalid selector is used, then the entire group of selectors\n  // will be ignored.\n  // @link https://www.w3.org/TR/selectors-3/#grouping\n  @each $selector in $selectorsSplit {\n    // Group the selectors back into a single selector to optimize the output.\n    @if str-index($selector, \":host-context\") {\n      $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n    } @else {\n      // Group the selectors back into a single selector to optimize the output.\n      $restSelectors: append($restSelectors, $selector, comma);\n    }\n  }\n\n  // Supported by Chrome.\n  @if length($hostContextSelectors) > 0 {\n    @at-root #{$hostContextSelectors} {\n      @content;\n    }\n  }\n\n  // Supported by all browsers.\n  @if length($restSelectors) > 0 {\n    @at-root #{$restSelectors} {\n      @content;\n    }\n  }\n\n  // If browser can support `:dir()`, then add the `:dir()` selectors.\n  @supports selector(:dir(rtl)) {\n    // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n    // `:host-context()` is added:\n    // - through the `add-root-selector()` function.\n    // - first so that it takes precedence over `:dir()`.\n    // For example,\n    // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n    // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n    // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n    // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n    // -- the app direction is changed dynamically. v17+ works fine.\n    // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n    // Supported by Firefox.\n    @at-root #{string.add-root-selector($root, \":dir(rtl)\", false)} {\n      @content;\n    }\n  }\n}\n\n@mixin ltr() {\n  @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n  $url: url-encode($svg);\n  $viewBox: string.str-split(string.str-extract($svg, \"viewBox='\", \"'\"), \" \");\n\n  @if $flip-rtl != true or $viewBox == null {\n    @include multi-dir() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n  } @else {\n    $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n    $flipped-url: $svg;\n    $flipped-url: string.str-replace($flipped-url, \"<path\", \"<path #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<line\", \"<line #{$transform}\");\n    $flipped-url: string.str-replace($flipped-url, \"<polygon\", \"<polygon #{$transform}\");\n    $flipped-url: url-encode($flipped-url);\n\n    @include ltr() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$url}\");\n    }\n\n    @include rtl() {\n      background-image: url(\"data:image/svg+xml;charset=utf-8,#{$flipped-url}\");\n    }\n  }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n  @if $start == 0 and $end == 0 {\n    #{$prop}-left: $start;\n    #{$prop}-right: $end;\n  } @else {\n    -webkit-#{$prop}-start: $start;\n    #{$prop}-inline-start: $start;\n    -webkit-#{$prop}-end: $end;\n    #{$prop}-inline-end: $end;\n  }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n  @include property-horizontal($prop, $start, $end);\n  #{$prop}-top: $top;\n  #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n  @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n  @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n  @if $start == $end {\n    @include multi-dir() {\n      right: $end;\n      left: $start;\n    }\n  } @else {\n    @at-root {\n      & {\n        inset-inline-start: $start;\n        inset-inline-end: $end;\n      }\n    }\n  }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n  @include position-horizontal($start, $end);\n  top: $top;\n  bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n  @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n  @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n    border-radius: $top-start;\n  } @else {\n    border-start-start-radius: $top-start;\n    border-start-end-radius: $top-end;\n    border-end-end-radius: $bottom-end;\n    border-end-start-radius: $bottom-start;\n  }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n  $other-dir: null;\n\n  @if $dir == ltr {\n    $other-dir: rtl;\n  } @else {\n    $other-dir: ltr;\n  }\n\n  @include ltr() {\n    direction: $dir;\n  }\n\n  @include rtl() {\n    direction: $other-dir;\n  }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n  @if $side == start {\n    @include ltr() {\n      float: left $decorator;\n    }\n\n    @include rtl() {\n      float: right $decorator;\n    }\n  } @else if $side == end {\n    @include ltr() {\n      float: right $decorator;\n    }\n\n    @include rtl() {\n      float: left $decorator;\n    }\n  } @else {\n    @include multi-dir() {\n      float: $side $decorator;\n    }\n  }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n  @if $horizontal == start or $horizontal == end {\n    $horizontal-ltr: null;\n    $horizontal-rtl: null;\n\n    @if $horizontal == start {\n      $horizontal-ltr: left;\n      $horizontal-rtl: right;\n    } @else {\n      $horizontal-ltr: right;\n      $horizontal-rtl: left;\n    }\n\n    @include ltr() {\n      background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n    }\n\n    @include rtl() {\n      background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n    }\n  } @else {\n    @include multi-dir() {\n      background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n    }\n  }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n  @if $x-axis == start {\n    @include ltr() {\n      transform-origin: left $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: right $y-axis;\n    }\n  } @else if $x-axis == end {\n    @include ltr() {\n      transform-origin: right $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: left $y-axis;\n    }\n  } @else if $x-axis == left or $x-axis == right {\n    @include multi-dir() {\n      transform-origin: $x-axis $y-axis;\n    }\n  } @else {\n    @include ltr() {\n      transform-origin: $x-axis $y-axis;\n    }\n\n    @include rtl() {\n      transform-origin: calc(100% - #{$x-axis}) $y-axis;\n    }\n  }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n  $extra: null;\n\n  $x: null;\n  $ltr-translate: null;\n  $rtl-translate: null;\n\n  @each $transform in $transforms {\n    @if (str-index($transform, translate3d)) {\n      $transform: string.str-replace($transform, \"translate3d(\");\n      $transform: string.str-replace($transform, \")\");\n\n      $coordinates: string.str-split($transform, \",\");\n\n      $x: nth($coordinates, 1);\n      $y: nth($coordinates, 2);\n      $z: nth($coordinates, 3);\n\n      $ltr-translate: translate3d($x, $y, $z);\n      $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n    } @else {\n      @if $extra == null {\n        $extra: $transform;\n      } @else {\n        $extra: $extra $transform;\n      }\n    }\n  }\n\n  @if $x == \"0\" or $x == null {\n    @include multi-dir() {\n      transform: $ltr-translate $extra;\n    }\n  } @else {\n    @include ltr() {\n      transform: $ltr-translate $extra;\n    }\n\n    @include rtl() {\n      transform: $rtl-translate $extra;\n    }\n  }\n}\n"]}

package/css/palettes/dark.always.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAuEE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAgFE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}

package/css/palettes/dark.class.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAuEE,kBAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,sBACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,gCACE,wFACA,0FACA,4FAKF,qBACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAgFE,kBAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,sBACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,gCACE,wFACA,0FACA,4FAKF,qBACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}

package/css/palettes/dark.system.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.system.scss","../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAEA,mCCqEE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.system.css","sourcesContent":["@import \"./dark\";\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    @include dark-base-palette();\n  }\n\n  :root.ios {\n    @include dark-ios-palette();\n  }\n\n  :root.md {\n    @include dark-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/dark.system.scss","../../src/css/palettes/dark.scss"],"names":[],"mappings":"AAEA,mCC8EE,MAEI,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,+BACA,wCACA,qCACA,4CACA,qCACA,oCALA,8BACA,wCACA,oCACA,2CACA,oCACA,mCALA,6BACA,qCACA,mCACA,0CACA,mCACA,kCALA,6BACA,sCACA,mCACA,0CACA,mCACA,kCALA,4BACA,oCACA,kCACA,yCACA,kCACA,iCALA,2BACA,kCACA,iCACA,8CACA,iCACA,gCALA,4BACA,sCACA,kCACA,yCACA,kCACA,iCALA,0BACA,oCACA,gCACA,uCACA,gCACA,+BAMJ,UACE,gCACA,oCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,+BAGF,oBACE,wFACA,0FACA,4FAKF,SACE,gCACA,uCACA,0BACA,oCACA,wCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,yCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,+BACA,kCACA,kCACA","file":"dark.system.css","sourcesContent":["@import \"./dark\";\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    @include dark-base-palette();\n  }\n\n  :root.ios {\n    @include dark-ios-palette();\n  }\n\n  :root.md {\n    @include dark-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #4d8dff;\n$secondary: #46b1ff;\n$tertiary: #8482fb;\n$success: #2dd55b;\n$warning: #ffce31;\n$danger: #f24c58;\n$light: #222428;\n$medium: #989aa2;\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@mixin dark-base-palette() {\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 dark-ios-palette() {\n  & {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #0d0d0d;\n    --ion-background-color-step-100: #1a1a1a;\n    --ion-background-color-step-150: #262626;\n    --ion-background-color-step-200: #333333;\n    --ion-background-color-step-250: #404040;\n    --ion-background-color-step-300: #4d4d4d;\n    --ion-background-color-step-350: #595959;\n    --ion-background-color-step-400: #666666;\n    --ion-background-color-step-450: #737373;\n    --ion-background-color-step-500: #808080;\n    --ion-background-color-step-550: #8c8c8c;\n    --ion-background-color-step-600: #999999;\n    --ion-background-color-step-650: #a6a6a6;\n    --ion-background-color-step-700: #b3b3b3;\n    --ion-background-color-step-750: #bfbfbf;\n    --ion-background-color-step-800: #cccccc;\n    --ion-background-color-step-850: #d9d9d9;\n    --ion-background-color-step-900: #e6e6e6;\n    --ion-background-color-step-950: #f2f2f2;\n    --ion-text-color-step-50: #f2f2f2;\n    --ion-text-color-step-100: #e6e6e6;\n    --ion-text-color-step-150: #d9d9d9;\n    --ion-text-color-step-200: #cccccc;\n    --ion-text-color-step-250: #bfbfbf;\n    --ion-text-color-step-300: #b3b3b3;\n    --ion-text-color-step-350: #a6a6a6;\n    --ion-text-color-step-400: #999999;\n    --ion-text-color-step-450: #8c8c8c;\n    --ion-text-color-step-500: #808080;\n    --ion-text-color-step-550: #737373;\n    --ion-text-color-step-600: #666666;\n    --ion-text-color-step-650: #595959;\n    --ion-text-color-step-700: #4d4d4d;\n    --ion-text-color-step-750: #404040;\n    --ion-text-color-step-800: #333333;\n    --ion-text-color-step-850: #262626;\n    --ion-text-color-step-900: #1a1a1a;\n    --ion-text-color-step-950: #0d0d0d;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n\n  & ion-modal {\n    --ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));\n    --ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));\n    --ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));\n  }\n}\n\n@mixin dark-md-palette() {\n  & {\n    --ion-background-color: #121212;\n    --ion-background-color-rgb: 18, 18, 18;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-background-color-step-50: #1e1e1e;\n    --ion-background-color-step-100: #2a2a2a;\n    --ion-background-color-step-150: #363636;\n    --ion-background-color-step-200: #414141;\n    --ion-background-color-step-250: #4d4d4d;\n    --ion-background-color-step-300: #595959;\n    --ion-background-color-step-350: #656565;\n    --ion-background-color-step-400: #717171;\n    --ion-background-color-step-450: #7d7d7d;\n    --ion-background-color-step-500: #898989;\n    --ion-background-color-step-550: #949494;\n    --ion-background-color-step-600: #a0a0a0;\n    --ion-background-color-step-650: #acacac;\n    --ion-background-color-step-700: #b8b8b8;\n    --ion-background-color-step-750: #c4c4c4;\n    --ion-background-color-step-800: #d0d0d0;\n    --ion-background-color-step-850: #dbdbdb;\n    --ion-background-color-step-900: #e7e7e7;\n    --ion-background-color-step-950: #f3f3f3;\n    --ion-text-color-step-50: #f3f3f3;\n    --ion-text-color-step-100: #e7e7e7;\n    --ion-text-color-step-150: #dbdbdb;\n    --ion-text-color-step-200: #d0d0d0;\n    --ion-text-color-step-250: #c4c4c4;\n    --ion-text-color-step-300: #b8b8b8;\n    --ion-text-color-step-350: #acacac;\n    --ion-text-color-step-400: #a0a0a0;\n    --ion-text-color-step-450: #949494;\n    --ion-text-color-step-500: #898989;\n    --ion-text-color-step-550: #7d7d7d;\n    --ion-text-color-step-600: #717171;\n    --ion-text-color-step-650: #656565;\n    --ion-text-color-step-700: #595959;\n    --ion-text-color-step-750: #4d4d4d;\n    --ion-text-color-step-800: #414141;\n    --ion-text-color-step-850: #363636;\n    --ion-text-color-step-900: #2a2a2a;\n    --ion-text-color-step-950: #1e1e1e;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n  }\n}\n"]}

package/css/palettes/high-contrast-dark.always.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAgGE,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,+BASJ,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.always.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"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAyGE,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.always.css","sourcesContent":["@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"]}

package/css/palettes/high-contrast-dark.class.css.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAyGE,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,+BAQJ,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/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"]}

package/css/palettes/high-contrast-dark.system.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.system.scss","../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA,+DC8FE,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,+BASJ,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/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"]}
+{"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"]}

package/css/palettes/high-contrast.always.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AA4FE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae;\n$secondary:       #01487b;\n$tertiary:        #3400e6;\n$success:         #004314;\n$warning:         #5f4100;\n$danger:          #9c000c;\n$light:           #f4f5f8;\n$medium:          #444446;\n$dark:            #222428;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAqGE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n  primary: (\n    base: $primary,\n    contrast: #fff,\n    shade: get-color-shade($primary),\n    tint: get-color-tint($primary),\n    foreground: $primary,\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: #fff,\n    shade: get-color-shade($secondary),\n    tint: get-color-tint($secondary),\n    foreground: $secondary,\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: #fff,\n    shade: get-color-shade($tertiary),\n    tint: get-color-tint($tertiary),\n    foreground: $tertiary,\n  ),\n  success: (\n    base: $success,\n    contrast: #fff,\n    shade: get-color-shade($success),\n    tint: get-color-tint($success),\n    foreground: $success,\n  ),\n  warning: (\n    base: $warning,\n    contrast: #fff,\n    shade: get-color-shade($warning),\n    tint: get-color-tint($warning),\n    foreground: $warning,\n  ),\n  danger: (\n    base: $danger,\n    contrast: #fff,\n    shade: get-color-shade($danger),\n    tint: get-color-tint($danger),\n    foreground: $danger,\n  ),\n  light: (\n    base: $light,\n    contrast: #000,\n    shade: get-color-shade($light),\n    tint: get-color-tint($light),\n    foreground: $light,\n  ),\n  medium: (\n    base: $medium,\n    contrast: #fff,\n    shade: get-color-shade($medium),\n    tint: get-color-tint($medium),\n    foreground: $medium,\n  ),\n  dark: (\n    base: $dark,\n    contrast: #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}

package/css/palettes/high-contrast.class.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AA4FE,2BACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,wCACE,qCAGF,sDAEE,mBAIF,gDACE,sDACE,iEAIJ,6DACE","file":"high-contrast.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae;\n$secondary:       #01487b;\n$tertiary:        #3400e6;\n$success:         #004314;\n$warning:         #5f4100;\n$danger:          #9c000c;\n$light:           #f4f5f8;\n$medium:          #444446;\n$dark:            #222428;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAqGE,2BACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,wCACE,qCAGF,sDAEE,mBAIF,gDACE,sDACE,iEAIJ,6DACE","file":"high-contrast.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n  primary: (\n    base: $primary,\n    contrast: #fff,\n    shade: get-color-shade($primary),\n    tint: get-color-tint($primary),\n    foreground: $primary,\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: #fff,\n    shade: get-color-shade($secondary),\n    tint: get-color-tint($secondary),\n    foreground: $secondary,\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: #fff,\n    shade: get-color-shade($tertiary),\n    tint: get-color-tint($tertiary),\n    foreground: $tertiary,\n  ),\n  success: (\n    base: $success,\n    contrast: #fff,\n    shade: get-color-shade($success),\n    tint: get-color-tint($success),\n    foreground: $success,\n  ),\n  warning: (\n    base: $warning,\n    contrast: #fff,\n    shade: get-color-shade($warning),\n    tint: get-color-tint($warning),\n    foreground: $warning,\n  ),\n  danger: (\n    base: $danger,\n    contrast: #fff,\n    shade: get-color-shade($danger),\n    tint: get-color-tint($danger),\n    foreground: $danger,\n  ),\n  light: (\n    base: $light,\n    contrast: #000,\n    shade: get-color-shade($light),\n    tint: get-color-tint($light),\n    foreground: $light,\n  ),\n  medium: (\n    base: $medium,\n    contrast: #fff,\n    shade: get-color-shade($medium),\n    tint: get-color-tint($medium),\n    foreground: $medium,\n  ),\n  dark: (\n    base: $dark,\n    contrast: #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}

package/css/palettes/high-contrast.system.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.system.scss","../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAEA,+BC0FE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.system.css","sourcesContent":["@import \"./high-contrast\";\n\n@media (prefers-contrast: more) {\n  :root {\n    @include high-contrast-light-base-palette();\n  }\n\n  :root.md {\n    @include high-contrast-light-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae;\n$secondary:       #01487b;\n$tertiary:        #3400e6;\n$success:         #004314;\n$warning:         #5f4100;\n$danger:          #9c000c;\n$light:           #f4f5f8;\n$medium:          #444446;\n$dark:            #222428;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.system.scss","../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAEA,+BCmGE,MACE,gCACA,0CACA,0BACA,8BACA,+BAIA,iCACA,kCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCACA,mCAGE,6BACA,oCACA,mCACA,gDACA,mCACA,kCALA,+BACA,sCACA,qCACA,kDACA,qCACA,oCALA,8BACA,qCACA,oCACA,iDACA,oCACA,mCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,6BACA,mCACA,mCACA,gDACA,mCACA,kCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,2BACA,qCACA,iCACA,wCACA,iCACA,gCALA,4BACA,mCACA,kCACA,+CACA,kCACA,iCALA,0BACA,iCACA,gCACA,6CACA,gCACA,+BASJ,mBACE,qCAGF,iCAEE,mBAIF,gDACE,iCACE,iEAIJ,wCACE","file":"high-contrast.system.css","sourcesContent":["@import \"./high-contrast\";\n\n@media (prefers-contrast: more) {\n  :root {\n    @include high-contrast-light-base-palette();\n  }\n\n  :root.md {\n    @include high-contrast-light-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/functions.color\";\n\n$primary: #003fae;\n$secondary: #01487b;\n$tertiary: #3400e6;\n$success: #004314;\n$warning: #5f4100;\n$danger: #9c000c;\n$light: #f4f5f8;\n$medium: #444446;\n$dark: #222428;\n\n$colors: (\n  primary: (\n    base: $primary,\n    contrast: #fff,\n    shade: get-color-shade($primary),\n    tint: get-color-tint($primary),\n    foreground: $primary,\n  ),\n  secondary: (\n    base: $secondary,\n    contrast: #fff,\n    shade: get-color-shade($secondary),\n    tint: get-color-tint($secondary),\n    foreground: $secondary,\n  ),\n  tertiary: (\n    base: $tertiary,\n    contrast: #fff,\n    shade: get-color-shade($tertiary),\n    tint: get-color-tint($tertiary),\n    foreground: $tertiary,\n  ),\n  success: (\n    base: $success,\n    contrast: #fff,\n    shade: get-color-shade($success),\n    tint: get-color-tint($success),\n    foreground: $success,\n  ),\n  warning: (\n    base: $warning,\n    contrast: #fff,\n    shade: get-color-shade($warning),\n    tint: get-color-tint($warning),\n    foreground: $warning,\n  ),\n  danger: (\n    base: $danger,\n    contrast: #fff,\n    shade: get-color-shade($danger),\n    tint: get-color-tint($danger),\n    foreground: $danger,\n  ),\n  light: (\n    base: $light,\n    contrast: #000,\n    shade: get-color-shade($light),\n    tint: get-color-tint($light),\n    foreground: $light,\n  ),\n  medium: (\n    base: $medium,\n    contrast: #fff,\n    shade: get-color-shade($medium),\n    tint: get-color-tint($medium),\n    foreground: $medium,\n  ),\n  dark: (\n    base: $dark,\n    contrast: #fff,\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$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\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@mixin high-contrast-light-base-palette() {\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-placeholder-opacity: 0.8;\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: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\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-light-md-palette() {\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) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}