javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: rename namespaces from ionic to be more descriptive

Browse Source
This commit is contained in:
Brandy Carney
2023-06-22 16:44:39 -04:00
parent 3a01811845
commit 4ea2cd2b50
5 changed files with 78 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
core/src/components/chip/chip.scss
View File

@@ -1,20 +1,20 @@
@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";
@use "../../themes-migrated/ionic.globals" as globals;
@use "../../themes-migrated/ionic.functions.color" as colorFunctions;
@use "../../themes-migrated/ionic.mixins" as mixins;
@use "../../themes-migrated/ionic.theme.default" as defaultTheme;
:host {
/**
* @prop --background: Background of the chip
* @prop --color: Color of the chip
*/
--background: #{rgba(ionic.$text-color-rgb, .12)};
--color: #{rgba(ionic.$text-color-rgb, .87)};
--background: #{rgba(defaultTheme.$text-color-rgb, .12)};
--color: #{rgba(defaultTheme.$text-color-rgb, .87)};
@include ionic2.border-radius(16px);
@include ionic2.font-smoothing();
@include ionic2.margin(4px);
@include ionic2.padding(7px, 12px);
@include mixins.border-radius(16px);
@include mixins.font-smoothing();
@include mixins.margin(4px);
@include mixins.padding(7px, 12px);
display: inline-flex;
@@ -27,7 +27,7 @@
background: var(--background);
color: var(--color);
font-family: ionic4.$font-family-base;
font-family: globals.$font-family-base;
font-size: 14px;
cursor: pointer;
@@ -48,16 +48,16 @@
// ---------------------------------------------
:host(.ion-color) {
background: ionic3.current-color(base, .08);
color: ionic3.current-color(shade);
background: colorFunctions.current-color(base, .08);
color: colorFunctions.current-color(shade);
}
:host(.ion-color:focus) {
background: ionic3.current-color(base, .12);
background: colorFunctions.current-color(base, .12);
}
:host(.ion-color.ion-activated) {
background: ionic3.current-color(base, .16);
background: colorFunctions.current-color(base, .16);
}
@@ -70,21 +70,21 @@
}
:host(.chip-outline) {
border-color: rgba(ionic.$text-color-rgb, .32);
border-color: rgba(defaultTheme.$text-color-rgb, .32);
background: transparent;
}
:host(.chip-outline.ion-color) {
border-color: ionic3.current-color(base, .32);
border-color: colorFunctions.current-color(base, .32);
}
:host(.chip-outline:not(.ion-color):focus) {
background: rgba(ionic.$text-color-rgb, .04);
background: rgba(defaultTheme.$text-color-rgb, .04);
}
:host(.chip-outline.ion-activated:not(.ion-color)) {
background: rgba(ionic.$text-color-rgb, .08);
background: rgba(defaultTheme.$text-color-rgb, .08);
}
@@ -96,15 +96,15 @@
}
:host(:not(.ion-color)) ::slotted(ion-icon) {
color: rgba(ionic.$text-color-rgb, .54);
color: rgba(defaultTheme.$text-color-rgb, .54);
}
::slotted(ion-icon:first-child) {
@include ionic2.margin(-4px, 8px, -4px, -4px);
@include mixins.margin(-4px, 8px, -4px, -4px);
}
::slotted(ion-icon:last-child) {
@include ionic2.margin(-4px, -4px, -4px, 8px);
@include mixins.margin(-4px, -4px, -4px, 8px);
}
@@ -117,11 +117,11 @@
}
::slotted(ion-avatar:first-child) {
@include ionic2.margin(-4px, 8px, -4px, -8px);
@include mixins.margin(-4px, 8px, -4px, -8px);
}
::slotted(ion-avatar:last-child) {
@include ionic2.margin(-4px, -8px, -4px, 8px);
@include mixins.margin(-4px, -8px, -4px, 8px);
}
@@ -133,7 +133,7 @@
}
:host(:focus) {
--background: #{rgba(ionic.$text-color-rgb, .16)};
--background: #{rgba(defaultTheme.$text-color-rgb, .16)};
}
@@ -141,7 +141,7 @@
// ---------------------------------------------
:host(.ion-activated) {
--background: #{rgba(ionic.$text-color-rgb, .20)};
--background: #{rgba(defaultTheme.$text-color-rgb, .20)};
}
@@ -150,14 +150,14 @@
@media (any-hover: hover) {
:host(:hover) {
--background: #{rgba(ionic.$text-color-rgb, .16)};
--background: #{rgba(defaultTheme.$text-color-rgb, .16)};
}
:host(.ion-color:hover) {
background: ionic3.current-color(base, .12);
background: colorFunctions.current-color(base, .12);
}
:host(.chip-outline:not(.ion-color):hover) {
background: rgba(ionic.$text-color-rgb, .04);
background: rgba(defaultTheme.$text-color-rgb, .04);
}
}

5
core/src/themes-migrated/ionic.functions.color.scss
View File

@@ -1,6 +1,7 @@
@use "sass:color";
@use "sass:map";
@use "ionic.theme.default";
@use "ionic.theme.default" as defaultTheme;
// Gets the active color's css variable from a variation. Alpha is optional.
// --------------------------------------------------------------------------------------------
@@ -24,7 +25,7 @@
// 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(ionic.$colors, $name);
$values: map.get(defaultTheme.$colors, $name);
$value: map.get($values, $variation);
$variable: --ion-color-#{$name}-#{$variation};

8
core/src/themes-migrated/ionic.globals.scss
View File

@@ -1,15 +1,15 @@
// Global Utility Functions
@use "ionic.functions.string";
@use "ionic.functions.string" as stringFunctions;
// Global Color Functions
@use "ionic.functions.color" as ionic2;
@use "ionic.functions.color" as colorFunctions;
// Global Mixins
@use "ionic.mixins" as ionic3;
@use "ionic.mixins" as mixins;
// Default Theme
@use "ionic.theme.default" as ionic4;
@use "ionic.theme.default" as defaultTheme;
// Default General

43
core/src/themes-migrated/ionic.mixins.scss
View File

@@ -1,8 +1,9 @@
@use "sass:list";
@use "sass:map";
@use "sass:string";
@use "ionic.functions.string";
@use "ionic.globals" as ionic3;
@use "ionic.functions.string" as stringFunctions;
@use "ionic.globals" as globals;
@mixin input-cover() {
@include position(0, null, null, 0);
@@ -108,7 +109,7 @@
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
@function breakpoint-min($name, $breakpoints: ionic3.$screen-breakpoints) {
@function breakpoint-min($name, $breakpoints: globals.$screen-breakpoints) {
$min: map.get($breakpoints, $name);
@return if($name != index-to-key($breakpoints, 1), $min, null);
@@ -121,13 +122,13 @@
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: ionic3.$screen-breakpoints) {
@function breakpoint-infix($name, $breakpoints: globals.$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: ionic3.$screen-breakpoints) {
@mixin media-breakpoint-up($name, $breakpoints: globals.$screen-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@@ -146,7 +147,7 @@
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
// md
@function breakpoint-next($name, $breakpoints: ionic3.$screen-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
@function breakpoint-next($name, $breakpoints: globals.$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);
}
@@ -161,14 +162,14 @@
//
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 767.98px
@function breakpoint-max($name, $breakpoints: ionic3.$screen-breakpoints) {
@function breakpoint-max($name, $breakpoints: globals.$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: ionic3.$screen-breakpoints) {
@mixin media-breakpoint-down($name, $breakpoints: globals.$screen-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@@ -200,9 +201,9 @@
@mixin rtl() {
$root: #{&};
$rootSplit: ionic.str-split($root, ",");
$selectors: #{ionic.add-root-selector($root, "[dir=rtl]")};
$selectorsSplit: ionic.str-split($selectors, ",");
$rootSplit: stringFunctions.str-split($root, ",");
$selectors: #{stringFunctions.add-root-selector($root, "[dir=rtl]")};
$selectorsSplit: stringFunctions.str-split($selectors, ",");
$hostContextSelectors: ();
$restSelectors: ();
@@ -223,7 +224,7 @@
$restSelectors: list.append($restSelectors, $selector, comma);
}
}
// Supported by Chrome.
@if list.length($hostContextSelectors) > 0 {
@at-root #{$hostContextSelectors} {
@@ -272,8 +273,8 @@
// @param {string} $svg
// ----------------------------------------------------------
@mixin svg-background-image($svg, $flip-rtl: false) {
$url: ionic.url-encode($svg);
$viewBox: ionic.str-split(ionic.str-extract($svg, "viewBox='", "'"), " ");
$url: stringFunctions.url-encode($svg);
$viewBox: stringFunctions.str-split(stringFunctions.str-extract($svg, "viewBox='", "'"), " ");
@if $flip-rtl != true or $viewBox == null {
@include multi-dir() {
@@ -282,10 +283,10 @@
} @else {
$transform: "transform='translate(#{list.nth($viewBox, 3)}, 0) scale(-1, 1)'";
$flipped-url: $svg;
$flipped-url: ionic.str-replace($flipped-url, "<path", "<path #{$transform}");
$flipped-url: ionic.str-replace($flipped-url, "<line", "<line #{$transform}");
$flipped-url: ionic.str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
$flipped-url: ionic.url-encode($flipped-url);
$flipped-url: stringFunctions.str-replace($flipped-url, "<path", "<path #{$transform}");
$flipped-url: stringFunctions.str-replace($flipped-url, "<line", "<line #{$transform}");
$flipped-url: stringFunctions.str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
$flipped-url: stringFunctions.url-encode($flipped-url);
@include ltr () {
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
@@ -563,10 +564,10 @@
@each $transform in $transforms {
@if (string.index($transform, translate3d)) {
$transform: ionic.str-replace($transform, 'translate3d(');
$transform: ionic.str-replace($transform, ')');
$transform: stringFunctions.str-replace($transform, 'translate3d(');
$transform: stringFunctions.str-replace($transform, ')');
$coordinates: ionic.str-split($transform, ',');
$coordinates: stringFunctions.str-split($transform, ',');
$x: list.nth($coordinates, 1);
$y: list.nth($coordinates, 2);

39
core/src/themes-migrated/ionic.theme.default.scss
View File

@@ -1,5 +1,6 @@
@use "sass:color";
@use "ionic.functions.color";
@use "ionic.functions.color" as colorFunctions;
// Ionic Theme
// -------------------------------------------------------------------------------------------
@@ -29,56 +30,56 @@ $colors: (
primary: (
base: $primary,
contrast: #fff,
shade: ionic.get-color-shade($primary),
tint: ionic.get-color-tint($primary)
shade: colorFunctions.get-color-shade($primary),
tint: colorFunctions.get-color-tint($primary)
),
secondary: (
base: $secondary,
contrast: #fff,
shade: ionic.get-color-shade($secondary),
tint: ionic.get-color-tint($secondary)
shade: colorFunctions.get-color-shade($secondary),
tint: colorFunctions.get-color-tint($secondary)
),
tertiary: (
base: $tertiary,
contrast: #fff,
shade: ionic.get-color-shade($tertiary),
tint: ionic.get-color-tint($tertiary)
shade: colorFunctions.get-color-shade($tertiary),
tint: colorFunctions.get-color-tint($tertiary)
),
success: (
base: $success,
contrast: #fff,
shade: ionic.get-color-shade($success),
tint: ionic.get-color-tint($success)
shade: colorFunctions.get-color-shade($success),
tint: colorFunctions.get-color-tint($success)
),
warning: (
base: $warning,
contrast: #000,
shade: ionic.get-color-shade($warning),
tint: ionic.get-color-tint($warning)
shade: colorFunctions.get-color-shade($warning),
tint: colorFunctions.get-color-tint($warning)
),
danger: (
base: $danger,
contrast: #fff,
shade: ionic.get-color-shade($danger),
tint: ionic.get-color-tint($danger)
shade: colorFunctions.get-color-shade($danger),
tint: colorFunctions.get-color-tint($danger)
),
light: (
base: $light,
contrast: #000,
shade: ionic.get-color-shade($light),
tint: ionic.get-color-tint($light)
shade: colorFunctions.get-color-shade($light),
tint: colorFunctions.get-color-tint($light)
),
medium: (
base: $medium,
contrast: #fff,
shade: ionic.get-color-shade($medium),
tint: ionic.get-color-tint($medium)
shade: colorFunctions.get-color-shade($medium),
tint: colorFunctions.get-color-tint($medium)
),
dark: (
base: $dark,
contrast: #fff,
shade: ionic.get-color-shade($dark),
tint: ionic.get-color-tint($dark)
shade: colorFunctions.get-color-shade($dark),
tint: colorFunctions.get-color-tint($dark)
)
) !default;