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

refactor(many): remove *.ionic.vars files (#29983)

Browse Source 
- Removes the `*.ionic.vars.scss` files for item, list and input and uses the design tokens directly
- Removes the `tab-bar.ionic.vars.scss` file and moves the variables to the default ionic theme file since this uses global css variables
This commit is contained in:
Brandy Carney
2024-11-01 11:26:21 -04:00
committed by GitHub
parent ca091e2773
commit 0fbc2b27f7
11 changed files with 33 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 22 KiB

1
core/src/components/input/input.ionic.scss
View File

@@ -1,6 +1,5 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@import "./input";
@import "./input.ionic.vars";
@import "./input.ionic.outline.scss";
// Ionic Input

2
core/src/components/input/input.ionic.vars.scss
View File

@@ -1,2 +0,0 @@
// Ionic Input
// --------------------------------------------------

3
core/src/components/item/item.ionic.scss
View File

@@ -1,12 +1,11 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./item.common";
@use "./item.ionic.vars" as vars;
// Item
// --------------------------------------------------
:host {
--background: #{vars.$item-ionic-background};
--background: #{globals.$ion-primitives-base-white};
--background-activated: #{globals.$ion-primitives-neutral-200};
--border-color: #{globals.$ion-primitives-neutral-300};
--border-style: #{globals.$ion-border-style-solid};

10
core/src/components/item/item.ionic.vars.scss
View File

@@ -1,10 +0,0 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
/// @prop - Padding start for the item content
$item-ionic-padding-start: globals.$ion-space-400;
/// @prop - Padding end for the item content
$item-ionic-padding-end: globals.$ion-space-400;
/// @prop - Background color for the item content
$item-ionic-background: globals.$ion-primitives-base-white;

11
core/src/components/list-header/list-header.ionic.scss
View File

@@ -1,5 +1,4 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "../item/item.ionic.vars" as itemVars;
@import "./list-header";
:host {
@@ -10,7 +9,7 @@
min-height: 58px;
/**
/**
* The focus rings from components like buttons and links
* are being cut off. This style ensures that the focus ring
* is completely visible.
@@ -19,13 +18,13 @@
/* stylelint-disable */
@include ltr() {
padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-end});
padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-start});
padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
}
@include rtl() {
padding-right: calc(var(--ion-safe-area-right, 0px) + #{itemVars.$item-ionic-padding-start});
padding-left: calc(var(--ion-safe-area-left, 0px) + #{itemVars.$item-ionic-padding-end});
padding-right: calc(var(--ion-safe-area-right, 0px) + #{globals.$ion-space-400});
padding-left: calc(var(--ion-safe-area-left, 0px) + #{globals.$ion-space-400});
}
/* stylelint-enable */
}

32
core/src/components/list/list.ionic.scss
View File

@@ -1,6 +1,4 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "../item/item.ionic.vars" as itemVars;
@import "./list.ionic.vars.scss";
// Ionic List
// --------------------------------------------------
@@ -11,7 +9,7 @@ ion-list {
display: block;
background: #{itemVars.$item-ionic-background};
background: #{globals.$ion-primitives-base-white};
contain: content;
list-style-type: none;
@@ -52,7 +50,7 @@ ion-list {
* The top of the list should not have a border radius because
* that would include the header.
*/
@include globals.border-radius(initial, initial, $list-ionic-border-radius-round, $list-ionic-border-radius-round);
@include globals.border-radius(initial, initial, globals.$ion-border-radius-400, globals.$ion-border-radius-400);
}
// Target the first element in the list after the header
@@ -62,7 +60,7 @@ ion-list {
* The bottom of the first element should not have a border radius
* because that would not look connected to the rest.
*/
@include globals.border-radius($list-ionic-border-radius-round, $list-ionic-border-radius-round, initial, initial);
@include globals.border-radius(globals.$ion-border-radius-400, globals.$ion-border-radius-400, initial, initial);
}
/* Soft */
@@ -72,7 +70,7 @@ ion-list {
* The top of the list should not have a border radius because
* that would include the header.
*/
@include globals.border-radius(initial, initial, $list-ionic-border-radius-soft, $list-ionic-border-radius-soft);
@include globals.border-radius(initial, initial, globals.$ion-border-radius-200, globals.$ion-border-radius-200);
}
// Target the first element in the list after the header
@@ -82,7 +80,7 @@ ion-list {
* The bottom of the first element should not have a border radius
* because that would not look connected to the rest.
*/
@include globals.border-radius($list-ionic-border-radius-soft, $list-ionic-border-radius-soft, initial, initial);
@include globals.border-radius(globals.$ion-border-radius-200, globals.$ion-border-radius-200, initial, initial);
}
/* Rectangular */
@@ -92,12 +90,7 @@ ion-list {
* The top of the list should not have a border radius because
* that would include the header.
*/
@include globals.border-radius(
initial,
initial,
$list-ionic-border-radius-rectangular,
$list-ionic-border-radius-rectangular
);
@include globals.border-radius(initial, initial, globals.$ion-border-radius-0, globals.$ion-border-radius-0);
}
// Target the first element in the list after the header
@@ -107,29 +100,24 @@ ion-list {
* The bottom of the first element should not have a border radius
* because that would not look connected to the rest.
*/
@include globals.border-radius(
$list-ionic-border-radius-rectangular,
$list-ionic-border-radius-rectangular,
initial,
initial
);
@include globals.border-radius(globals.$ion-border-radius-0, globals.$ion-border-radius-0, initial, initial);
}
}
.list-ionic:not(:has(ion-list-header)) {
/* Round */
&.list-round {
@include globals.border-radius($list-ionic-border-radius-round);
@include globals.border-radius(globals.$ion-border-radius-400);
}
/* Soft */
&.list-soft {
@include globals.border-radius($list-ionic-border-radius-soft);
@include globals.border-radius(globals.$ion-border-radius-200);
}
/* Rectangular */
&.list-rectangular {
@include globals.border-radius($list-ionic-border-radius-rectangular);
@include globals.border-radius(globals.$ion-border-radius-0);
}
}

11
core/src/components/list/list.ionic.vars.scss
View File

@@ -1,11 +0,0 @@
// Ionic List
// --------------------------------------------------
/// @prop - Round border radius of the list
$list-ionic-border-radius-round: globals.$ion-border-radius-400;
/// @prop - Soft border radius of the list
$list-ionic-border-radius-soft: globals.$ion-border-radius-200;
/// @prop - Rectangular border radius of the list
$list-ionic-border-radius-rectangular: globals.$ion-border-radius-0;

12
core/src/components/tab-bar/tab-bar.ionic.scss
View File

@@ -1,13 +1,13 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./tab-bar.common";
@import "./tab-bar.ionic.vars";
:host {
--background: #{$tabbar-ionic-background};
--background-activated: #{$tabbar-ionic-background-activated};
--background-focused: #{$tabbar-ionic-background-focused};
--color: #{$tabbar-ionic-color};
--color-selected: #{$tabbar-ionic-color-selected};
--background: #{globals.$tabbar-ionic-background};
--background-activated: #{globals.$tabbar-ionic-background-activated};
--background-focused: #{globals.$tabbar-ionic-background-focused};
--border: #{globals.$ion-border-size-0} #{globals.$ion-border-style-solid} #{globals.$tabbar-ionic-border-color};
--color: #{globals.$tabbar-ionic-color};
--color-selected: #{globals.$tabbar-ionic-color-selected};
/**
* Tab bar has a box sizing of content-box to ensure the padding

19
core/src/components/tab-bar/tab-bar.ionic.vars.scss
View File

@@ -1,19 +0,0 @@
@use "../../themes/ionic/ionic.globals.scss" as globals;
// Ionic Tab Bar
// --------------------------------------------------
/// @prop - Background color of the tab bar
$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-base-white);
/// @prop - Background color of the tab bar button when activated
$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
/// @prop - Background color of the tab bar button when focused
$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
/// @prop - Color of the tab bar button
$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);
/// @prop - Color of the selected tab bar button
$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);

11
core/src/themes/ionic/ionic.theme.default.scss
View File

@@ -1,4 +1,5 @@
@use "../functions.color" as color;
@use "../../foundations/ionic.vars.scss" as globals;
// Ionic Theme
// -------------------------------------------------------------------------------------------
@@ -89,3 +90,13 @@ $ionic-colors: (
tint: color.get-color-tint($dark),
),
);
// Ionic Tabs & Tab Bar
// --------------------------------------------------
$tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-base-white);
$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);
$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);
$tabbar-ionic-border-color: var(--ion-tab-bar-border-color, transparent);