From 3a01811845bd33855951f382fad31e40d4d02122 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 22 Jun 2023 16:13:59 -0400 Subject: [PATCH] chore: migrate chip sass files to use --- core/src/components/chip/chip.scss | 55 +++++---- .../ionic.functions.color.scss | 14 ++- .../ionic.functions.string.scss | 49 ++++---- core/src/themes-migrated/ionic.globals.scss | 8 +- core/src/themes-migrated/ionic.mixins.scss | 78 ++++++------ .../themes-migrated/ionic.theme.default.scss | 115 +++++++++--------- 6 files changed, 169 insertions(+), 150 deletions(-) diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss index 742bd4d708..34d2718448 100644 --- a/core/src/components/chip/chip.scss +++ b/core/src/components/chip/chip.scss @@ -1,17 +1,20 @@ -@import "../../themes-migrated/ionic.globals"; +@use "../../themes-migrated/ionic.globals" as ionic4; +@use "../../themes-migrated/ionic.functions.color" as ionic3; +@use "../../themes-migrated/ionic.mixins" as ionic2; +@use "../../themes-migrated/ionic.theme.default"; :host { /** * @prop --background: Background of the chip * @prop --color: Color of the chip */ - --background: #{rgba($text-color-rgb, .12)}; - --color: #{rgba($text-color-rgb, .87)}; + --background: #{rgba(ionic.$text-color-rgb, .12)}; + --color: #{rgba(ionic.$text-color-rgb, .87)}; - @include border-radius(16px); - @include font-smoothing(); - @include margin(4px); - @include padding(7px, 12px); + @include ionic2.border-radius(16px); + @include ionic2.font-smoothing(); + @include ionic2.margin(4px); + @include ionic2.padding(7px, 12px); display: inline-flex; @@ -24,7 +27,7 @@ background: var(--background); color: var(--color); - font-family: $font-family-base; + font-family: ionic4.$font-family-base; font-size: 14px; cursor: pointer; @@ -45,16 +48,16 @@ // --------------------------------------------- :host(.ion-color) { - background: current-color(base, .08); - color: current-color(shade); + background: ionic3.current-color(base, .08); + color: ionic3.current-color(shade); } :host(.ion-color:focus) { - background: current-color(base, .12); + background: ionic3.current-color(base, .12); } :host(.ion-color.ion-activated) { - background: current-color(base, .16); + background: ionic3.current-color(base, .16); } @@ -67,21 +70,21 @@ } :host(.chip-outline) { - border-color: rgba($text-color-rgb, .32); + border-color: rgba(ionic.$text-color-rgb, .32); background: transparent; } :host(.chip-outline.ion-color) { - border-color: current-color(base, .32); + border-color: ionic3.current-color(base, .32); } :host(.chip-outline:not(.ion-color):focus) { - background: rgba($text-color-rgb, .04); + background: rgba(ionic.$text-color-rgb, .04); } :host(.chip-outline.ion-activated:not(.ion-color)) { - background: rgba($text-color-rgb, .08); + background: rgba(ionic.$text-color-rgb, .08); } @@ -93,15 +96,15 @@ } :host(:not(.ion-color)) ::slotted(ion-icon) { - color: rgba($text-color-rgb, .54); + color: rgba(ionic.$text-color-rgb, .54); } ::slotted(ion-icon:first-child) { - @include margin(-4px, 8px, -4px, -4px); + @include ionic2.margin(-4px, 8px, -4px, -4px); } ::slotted(ion-icon:last-child) { - @include margin(-4px, -4px, -4px, 8px); + @include ionic2.margin(-4px, -4px, -4px, 8px); } @@ -114,11 +117,11 @@ } ::slotted(ion-avatar:first-child) { - @include margin(-4px, 8px, -4px, -8px); + @include ionic2.margin(-4px, 8px, -4px, -8px); } ::slotted(ion-avatar:last-child) { - @include margin(-4px, -8px, -4px, 8px); + @include ionic2.margin(-4px, -8px, -4px, 8px); } @@ -130,7 +133,7 @@ } :host(:focus) { - --background: #{rgba($text-color-rgb, .16)}; + --background: #{rgba(ionic.$text-color-rgb, .16)}; } @@ -138,7 +141,7 @@ // --------------------------------------------- :host(.ion-activated) { - --background: #{rgba($text-color-rgb, .20)}; + --background: #{rgba(ionic.$text-color-rgb, .20)}; } @@ -147,14 +150,14 @@ @media (any-hover: hover) { :host(:hover) { - --background: #{rgba($text-color-rgb, .16)}; + --background: #{rgba(ionic.$text-color-rgb, .16)}; } :host(.ion-color:hover) { - background: current-color(base, .12); + background: ionic3.current-color(base, .12); } :host(.chip-outline:not(.ion-color):hover) { - background: rgba($text-color-rgb, .04); + background: rgba(ionic.$text-color-rgb, .04); } } diff --git a/core/src/themes-migrated/ionic.functions.color.scss b/core/src/themes-migrated/ionic.functions.color.scss index 1d78bbe131..aac867e862 100644 --- a/core/src/themes-migrated/ionic.functions.color.scss +++ b/core/src/themes-migrated/ionic.functions.color.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "sass:map"; +@use "ionic.theme.default"; + // Gets the active color's css variable from a variation. Alpha is optional. // -------------------------------------------------------------------------------------------- // Example usage: @@ -20,8 +24,8 @@ // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5) // -------------------------------------------------------------------------------------------- @function ion-color($name, $variation, $alpha: null, $rgb: null) { - $values: map-get($colors, $name); - $value: map-get($values, $variation); + $values: map.get(ionic.$colors, $name); + $value: map.get($values, $variation); $variable: --ion-color-#{$name}-#{$variation}; @if ($variation == base) { @@ -43,17 +47,17 @@ // Mixes a color with black to create its shade. // -------------------------------------------------------------------------------------------- @function get-color-shade($color) { - @return mix(#000, $color, 12%); + @return color.mix(#000, $color, 12%); } // Mixes a color with white to create its tint. // -------------------------------------------------------------------------------------------- @function get-color-tint($color) { - @return mix(#fff, $color, 10%); + @return color.mix(#fff, $color, 10%); } // Converts a color to a comma separated rgb. // -------------------------------------------------------------------------------------------- @function color-to-rgb-list($color) { - @return #{red($color)},#{green($color)},#{blue($color)}; + @return #{color.red($color)},#{color.green($color)},#{color.blue($color)}; } diff --git a/core/src/themes-migrated/ionic.functions.string.scss b/core/src/themes-migrated/ionic.functions.string.scss index 098a2e9f73..9714eb40c4 100644 --- a/core/src/themes-migrated/ionic.functions.string.scss +++ b/core/src/themes-migrated/ionic.functions.string.scss @@ -1,3 +1,6 @@ +@use "sass:list"; +@use "sass:meta"; +@use "sass:string"; // String Utility Functions // -------------------------------------------------------------------------------- @@ -5,10 +8,10 @@ // -------------------------------------------------------------------------------- @function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace); } @return $string; @@ -22,20 +25,20 @@ // empty array/list $split-arr: (); // first index of separator in string - $index: str-index($string, $separator); + $index: string.index($string, $separator); // loop through string @while $index != null { // get the substring from the first character to the separator - $item: str-slice($string, 1, $index - 1); + $item: string.slice($string, 1, $index - 1); // push item to array - $split-arr: append($split-arr, $item); + $split-arr: list.append($split-arr, $item); // remove item and separator from string - $string: str-slice($string, $index + 1); + $string: string.slice($string, $index + 1); // find new index of separator - $index: str-index($string, $separator); + $index: string.index($string, $separator); } // add the remaining string to list (the last item) - $split-arr: append($split-arr, $string); + $split-arr: list.append($split-arr, $string); @return $split-arr; } @@ -45,14 +48,14 @@ // -------------------------------------------------------------------------------- @function str-extract($string, $start, $end) { - $start-index: str-index($string, $start); + $start-index: string.index($string, $start); @if $start-index { - $post: str-slice($string, $start-index + str-length($start)); - $end-index: str-index($post, $end); + $post: string.slice($string, $start-index + string.length($start)); + $end-index: string.index($post, $end); @if $end-index { - @return str-slice($post, 1, $end-index - 1); + @return string.slice($post, 1, $end-index - 1); } } @@ -64,8 +67,8 @@ // -------------------------------------------------------------------------------- @function str-contains($string, $needle) { - @if (type-of($string) == string) { - @return str-index($string, $needle) != null; + @if (meta.type-of($string) == string) { + @return string.index($string, $needle) != null; } @return false; @@ -102,7 +105,7 @@ // @include add-root-selector(":host(.fixed)", "[dir=rtl]") // --> :host-context([dir=rtl]):host(.fixed) $shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host("); - $list: append($list, $shadow-element, comma); + $list: list.append($list, $shadow-element, comma); $new-element: (); $elements: str-split($selector, " "); @@ -123,18 +126,18 @@ // @include add-root-selector(":host(.fixed)", "[dir=rtl]") // --> :host-context([dir=rtl]).fixed - $new-element: append($new-element, $scoped-element, space); + $new-element: list.append($new-element, $scoped-element, space); } @else { // Add back any selectors that followed the host after transforming the // first selector: // :host(.fixed) ::slotted(ion-icon) // --> :host-context([dir=rtl]):host(.fixed) ::slotted(ion-icon) // --> :host-context([dir=rtl]).fixed ::slotted(ion-icon) - $new-element: append($new-element, $element, space); + $new-element: list.append($new-element, $element, space); } } - $list: append($list, $new-element, comma); + $list: list.append($list, $new-element, comma); // If the selector contains :host without a parantheses // it means it is targeting just the host // element so we can change it to look for host-context @@ -153,24 +156,24 @@ // Add the final selector after all transformations: // :host -> :host-context([dir=rtl]) - $new-element: append($new-element, $updated-element, space); + $new-element: list.append($new-element, $updated-element, space); } @else { // Add back any selectors that followed the host after transforming the // first selector: // :host ::slotted(ion-icon) -> :host-context([dir=rtl]) ::slotted(ion-icon) - $new-element: append($new-element, $element, space); + $new-element: list.append($new-element, $element, space); } } - $list: append($list, $new-element, comma); + $list: list.append($list, $new-element, comma); // If the selector does not contain host at all it is either a shadow // or normal element so append both the addHostSelector and host-context // @include add-root-selector("ion-component", "[dir=rtl]") // --> :host-context([dir=rtl]) ion-component // --> [dir=rtl] ion-component } @else { - $list: append($list, "#{$addHostSelector} #{$selector}", comma); - $list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma); + $list: list.append($list, "#{$addHostSelector} #{$selector}", comma); + $list: list.append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma); } } diff --git a/core/src/themes-migrated/ionic.globals.scss b/core/src/themes-migrated/ionic.globals.scss index e1495fabd0..e82613d1b9 100644 --- a/core/src/themes-migrated/ionic.globals.scss +++ b/core/src/themes-migrated/ionic.globals.scss @@ -1,15 +1,15 @@ // Global Utility Functions -@import "./ionic.functions.string"; +@use "ionic.functions.string"; // Global Color Functions -@import "./ionic.functions.color"; +@use "ionic.functions.color" as ionic2; // Global Mixins -@import "./ionic.mixins"; +@use "ionic.mixins" as ionic3; // Default Theme -@import "./ionic.theme.default"; +@use "ionic.theme.default" as ionic4; // Default General diff --git a/core/src/themes-migrated/ionic.mixins.scss b/core/src/themes-migrated/ionic.mixins.scss index 053a4627c6..dc3dd04ff2 100644 --- a/core/src/themes-migrated/ionic.mixins.scss +++ b/core/src/themes-migrated/ionic.mixins.scss @@ -1,3 +1,9 @@ +@use "sass:list"; +@use "sass:map"; +@use "sass:string"; +@use "ionic.functions.string"; +@use "ionic.globals" as ionic3; + @mixin input-cover() { @include position(0, null, null, 0); @include margin(0); @@ -79,9 +85,9 @@ // Get the key from a map based on the index @function index-to-key($map, $index) { - $keys: map-keys($map); + $keys: map.keys($map); - @return nth($keys, $index); + @return list.nth($keys, $index); } @@ -102,8 +108,8 @@ // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 576px -@function breakpoint-min($name, $breakpoints: $screen-breakpoints) { - $min: map-get($breakpoints, $name); +@function breakpoint-min($name, $breakpoints: ionic3.$screen-breakpoints) { + $min: map.get($breakpoints, $name); @return if($name != index-to-key($breakpoints, 1), $min, null); } @@ -115,13 +121,13 @@ // "" (Returns a blank string) // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // "-sm" -@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) { +@function breakpoint-infix($name, $breakpoints: ionic3.$screen-breakpoints) { @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); } // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. -@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) { +@mixin media-breakpoint-up($name, $breakpoints: ionic3.$screen-breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { @media (min-width: $min) { @@ -140,9 +146,9 @@ // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md -@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) { - $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +@function breakpoint-next($name, $breakpoints: ionic3.$screen-breakpoints, $breakpoint-names: map.keys($breakpoints)) { + $n: list.index($breakpoint-names, $name); + @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null); } // Maximum breakpoint width. Null for the smallest (first) breakpoint. @@ -155,14 +161,14 @@ // // >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) // 767.98px -@function breakpoint-max($name, $breakpoints: $screen-breakpoints) { - $max: map-get($breakpoints, $name); +@function breakpoint-max($name, $breakpoints: ionic3.$screen-breakpoints) { + $max: map.get($breakpoints, $name); @return if($max and $max > 0, $max - .02, null); } // Media of at most the maximum breakpoint width. No query for the largest breakpoint. // Makes the @content apply to the given breakpoint and narrower. -@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) { +@mixin media-breakpoint-down($name, $breakpoints: ionic3.$screen-breakpoints) { $max: breakpoint-max($name, $breakpoints); @if $max { @media (max-width: $max) { @@ -194,9 +200,9 @@ @mixin rtl() { $root: #{&}; - $rootSplit: str-split($root, ","); - $selectors: #{add-root-selector($root, "[dir=rtl]")}; - $selectorsSplit: str-split($selectors, ","); + $rootSplit: ionic.str-split($root, ","); + $selectors: #{ionic.add-root-selector($root, "[dir=rtl]")}; + $selectorsSplit: ionic.str-split($selectors, ","); $hostContextSelectors: (); $restSelectors: (); @@ -210,23 +216,23 @@ // @link https://www.w3.org/TR/selectors-3/#grouping @each $selector in $selectorsSplit { // Group the selectors back into a single selector to optimize the output. - @if str-index($selector, ":host-context") { - $hostContextSelectors: append($hostContextSelectors, $selector, comma); + @if string.index($selector, ":host-context") { + $hostContextSelectors: list.append($hostContextSelectors, $selector, comma); } @else { // Group the selectors back into a single selector to optimize the output. - $restSelectors: append($restSelectors, $selector, comma); + $restSelectors: list.append($restSelectors, $selector, comma); } } // Supported by Chrome. - @if length($hostContextSelectors) > 0 { + @if list.length($hostContextSelectors) > 0 { @at-root #{$hostContextSelectors} { @content; } } // Supported by all browsers. - @if length($restSelectors) > 0 { + @if list.length($restSelectors) > 0 { @at-root #{$restSelectors} { @content; } @@ -245,11 +251,11 @@ @each $selector in $rootSplit { $dirSelector: "#{$selector}:dir(rtl)"; // Group the selectors back into a single selector to optimize the output. - $dirSelectors: append($dirSelectors, $dirSelector, comma); + $dirSelectors: list.append($dirSelectors, $dirSelector, comma); } // Supported by Firefox. - @if length($dirSelectors) > 0 { + @if list.length($dirSelectors) > 0 { @at-root #{$dirSelectors} { @content; } @@ -266,20 +272,20 @@ // @param {string} $svg // ---------------------------------------------------------- @mixin svg-background-image($svg, $flip-rtl: false) { - $url: url-encode($svg); - $viewBox: str-split(str-extract($svg, "viewBox='", "'"), " "); + $url: ionic.url-encode($svg); + $viewBox: ionic.str-split(ionic.str-extract($svg, "viewBox='", "'"), " "); @if $flip-rtl != true or $viewBox == null { @include multi-dir() { background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); } } @else { - $transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'"; + $transform: "transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'"; $flipped-url: $svg; - $flipped-url: str-replace($flipped-url, "