javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tokens): update tokens architecture and usage (#29950)

Browse Source 
Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed old tokens stored on foundations folder. Now the jsons with
the tokens come from the new dependency:
https://github.com/OutSystems/outsystems-design-tokens.
- The tokens from UX Team completely changed the structure and in some
cases the values. Everything was replaced on the project to use the new
tokens.
- Snapshots updated and differences reviewed with UX Team. A fix was
done on the testing css, to make sure the correct _Inter_ font-family
was actually used. This resulted in some differences on the text for
some componentes, that had snapshots with the native fonts.
- Removed generation of scss file on tokens script, that contained the
:root selector with the custom CSS properties, as they were not used on
the Ionic context.
- Removed generation of html file with tokens preview, as there wasn't a
great value on this (we have storybook on other contexts) and it allowed
to reduce a lot of code and complexity from the tokens script.
- The token command was adapted to use the command available from the
https://github.com/OutSystems/outsystems-design-tokens package, using
the `--config` prop, where we pass the path to our Ionic token script,
where we generate the needed scss variables and utility-classes (by
default the tokens repo tries to be as agnostic as possible, and only
generates the css variables, without the prefix and added details we
need on the Ionic side).
- Removed the token command from the npm run build, as it unnecessarily
added time on that command to run. Besides, it should not be common that
we need to run this command in the future.
- Updated reference to latest version of [Style Dictionary
4.1.3](https://v4.styledictionary.com/version-4/statement/). Version 4
comes with a lot of improvements, but also breaking-changes, so it was
needed to adapt the tokens script. The code on the script is also now
cleaner.
- Changed prefix from ionic to ion. The term ionic was used initially,
to help differentiate from the old ios/md stuff, but I feel with the
current scss architecture, that is no longer needed, and we can use the
same prefix across themes.

This requires to run `npm install ` again.

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
Bernardo Cardoso
2024-10-28 18:17:48 +00:00
committed by GitHub
parent 4d81c8f55f
commit a5a7bee25c
477 changed files with 6632 additions and 9766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
core/src/css/ionic/core.ionic.scss
View File

@ -4,8 +4,8 @@
// --------------------------------------------------
:root {
--ionic-global-background-color: #{globals.$ionic-color-neutral-100};
--ionic-global-text-color: #{globals.$ionic-color-neutral-900};
--ionic-global-background-color: #{globals.$ion-primitives-neutral-100};
--ionic-global-text-color: #{globals.$ion-primitives-neutral-900};
/**
* Set the theme colors from the
@ -50,7 +50,7 @@ html.ionic ion-modal ion-header {
html.ionic ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ionic ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ionic ion-modal ion-footer ion-toolbar:first-of-type {
padding-top: globals.$ionic-space-400;
padding-top: globals.$ion-space-400;
}
/**
@ -61,7 +61,7 @@ html.ionic ion-modal ion-footer ion-toolbar:first-of-type {
html.ionic ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ionic ion-modal.modal-sheet ion-header ion-toolbar:last-of-type,
html.ionic ion-modal ion-footer ion-toolbar:last-of-type {
padding-bottom: globals.$ionic-space-400;
padding-bottom: globals.$ion-space-400;
}
/**
@ -69,8 +69,8 @@ html.ionic ion-modal ion-footer ion-toolbar:last-of-type {
* for the safe area insets.
*/
html.ionic ion-modal ion-toolbar {
--padding-start: calc(var(--ion-safe-area-right) + #{globals.$ionic-space-400});
--padding-end: calc(var(--ion-safe-area-left) + #{globals.$ionic-space-400});
--padding-start: calc(var(--ion-safe-area-right) + #{globals.$ion-space-400});
--padding-end: calc(var(--ion-safe-area-left) + #{globals.$ion-space-400});
}
/**
@ -95,9 +95,9 @@ html.ionic ion-modal ion-header ion-toolbar ion-title {
* within a modal.
*/
html.ionic ion-modal.modal-sheet ion-content {
--padding-start: #{globals.$ionic-space-400};
--padding-end: #{globals.$ionic-space-400};
--padding-bottom: #{globals.$ionic-space-400};
--padding-start: #{globals.$ion-space-400};
--padding-end: #{globals.$ion-space-400};
--padding-bottom: #{globals.$ion-space-400};
}
/**
@ -223,7 +223,7 @@ ion-toast-controller,
html.plt-ios.plt-hybrid,
html.plt-ios.plt-pwa {
--ion-statusbar-padding: #{globals.$ionic-space-500};
--ion-statusbar-padding: #{globals.$ion-space-500};
}
@supports (padding-top: 20px) {
@ -293,28 +293,28 @@ ion-card-header.ion-color .ion-inherit-color {
}
.menu-content-reveal {
box-shadow: #{globals.$ionic-elevation-100};
box-shadow: #{globals.$ion-elevation-1};
}
.menu-content-push {
box-shadow: #{globals.$ionic-elevation-100};
box-shadow: #{globals.$ion-elevation-1};
}
// Accordion Styles
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
border-top-left-radius: globals.$ionic-border-radius-200;
border-top-right-radius: globals.$ionic-border-radius-200;
border-top-left-radius: globals.$ion-border-radius-200;
border-top-right-radius: globals.$ion-border-radius-200;
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-left-radius: globals.$ionic-border-radius-200;
border-bottom-right-radius: globals.$ionic-border-radius-200;
border-bottom-left-radius: globals.$ion-border-radius-200;
border-bottom-right-radius: globals.$ion-border-radius-200;
}
// The toggle icon is nested in the accordion item so we need to
// style it from a global level.
ion-accordion > [slot="header"] .ion-accordion-toggle-icon {
color: globals.$ionic-color-neutral-1000;
font-size: globals.$ionic-scale-600;
color: globals.$ion-primitives-neutral-1000;
font-size: globals.$ion-scale-600;
}
ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
@ -341,15 +341,15 @@ ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
// Items inside of an accordion should have reduced padding
// due to the padding added to the accordion content.
ion-accordion > [slot="content"] ion-item {
@include globals.typography(globals.$ionic-body-md-regular);
@include globals.typography(globals.$ion-body-md-regular);
color: globals.$ionic-color-neutral-1000;
color: globals.$ion-primitives-neutral-1000;
--padding-start: 0;
--padding-top: #{globals.$ionic-space-300};
--padding-bottom: #{globals.$ionic-space-300};
--padding-top: #{globals.$ion-space-300};
--padding-bottom: #{globals.$ion-space-300};
--padding-end: 0;
--min-height: #{globals.$ionic-scale-700};
--min-height: #{globals.$ion-scale-700};
}
// Safari/iOS 15 changes the appearance of input[type="date"].

6
core/src/css/ionic/ionic-swiper.ionic.scss
View File

@ -4,10 +4,10 @@
// --------------------------------------------------
.swiper {
--bullet-background: #{tokens.$ionic-color-neutral-800};
--bullet-background-active: #{tokens.$ionic-color-primary-base};
--bullet-background: #{tokens.$ion-primitives-neutral-800};
--bullet-background-active: #{tokens.$ion-semantics-primary-base};
--progress-bar-background: rgba(#010408, 0.25);
--progress-bar-background-active: #{tokens.$ionic-color-primary-600};
--progress-bar-background-active: #{tokens.$ion-semantics-primary-600};
--scroll-bar-background: rgba(#010408, 0.1);
--scroll-bar-background-active: rgba(#010408, 0.5);
/**

18
core/src/css/ionic/link.ionic.scss
View File

@ -7,11 +7,11 @@
align-items: center;
gap: globals.$ionic-space-100;
gap: globals.$ion-space-100;
transition: color 0.2s ease-in-out;
font-weight: globals.$ionic-font-weight-regular;
font-weight: globals.$ion-font-weight-regular;
text-decoration-color: inherit;
@ -23,7 +23,7 @@
// -------------------------------------------------------------------------------
&:visited {
color: globals.$ionic-color-info-500;
color: globals.$ion-semantics-info-500;
}
}
@ -31,7 +31,7 @@
// -------------------------------------------------------------------------------
@mixin ionic-link {
color: globals.$ionic-color-info-400;
color: globals.$ion-semantics-info-400;
text-decoration: none;
@ -51,7 +51,7 @@
&:focus,
&.ion-focused {
outline: 2px solid globals.$ionic-color-primary-100;
outline: 2px solid globals.$ion-semantics-primary-100;
outline-offset: 2px;
text-decoration: underline;
@ -62,7 +62,7 @@
&:active,
&.ion-activated {
color: globals.$ionic-color-info-500;
color: globals.$ion-semantics-info-500;
text-decoration: underline;
}
@ -88,7 +88,7 @@ a.ionic-link,
@media (any-hover: hover) {
&:hover {
color: globals.$ionic-color-info-400;
color: globals.$ion-semantics-info-400;
}
}
@ -97,7 +97,7 @@ a.ionic-link,
&:focus,
&.ion-focused {
outline: 2px solid globals.$ionic-color-primary-100;
outline: 2px solid globals.$ion-semantics-primary-100;
outline-offset: 2px;
color: currentColor;
@ -110,7 +110,7 @@ a.ionic-link,
&:active,
&.ion-activated {
color: globals.$ionic-color-info-500;
color: globals.$ion-semantics-info-500;
}
}

16
core/src/css/ionic/typography.ionic.scss
View File

@ -2,34 +2,34 @@
// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
html {
font-family: globals.$ionic-font-family;
font-family: globals.$ion-font-family;
}
body {
@include globals.typography(globals.$ionic-body-md-regular);
@include globals.typography(globals.$ion-body-md-regular);
}
/* Override html headings based on heading tokens */
h1 {
@include globals.typography(globals.$ionic-heading-h1-regular);
@include globals.typography(globals.$ion-heading-h1-regular);
}
h2 {
@include globals.typography(globals.$ionic-heading-h2-regular);
@include globals.typography(globals.$ion-heading-h2-regular);
}
h3 {
@include globals.typography(globals.$ionic-heading-h3-regular);
@include globals.typography(globals.$ion-heading-h3-regular);
}
h4 {
@include globals.typography(globals.$ionic-heading-h4-regular);
@include globals.typography(globals.$ion-heading-h4-regular);
}
h5 {
@include globals.typography(globals.$ionic-heading-h5-regular);
@include globals.typography(globals.$ion-heading-h5-regular);
}
h6 {
@include globals.typography(globals.$ionic-heading-h6-regular);
@include globals.typography(globals.$ion-heading-h6-regular);
}

104
core/src/css/test/typography/basic/index.html
View File

@ -23,90 +23,84 @@
</ion-toolbar>
</ion-header>
<ion-content class="ionic-padding-space-400">
<ion-content class="ion-padding-space-400">
<div>
<ion-title>Display</ion-title>
<ion-title>lg</ion-title>
<p><ion-text class="ionic-display-lg-regular">display-lg-regular</ion-text></p>
<p><ion-text class="ionic-display-lg-light">display-lg-light</ion-text></p>
<p><ion-text class="ion-display-lg-regular">display-lg-regular</ion-text></p>
<p><ion-text class="ion-display-lg-light">display-lg-light</ion-text></p>
<ion-title>sm</ion-title>
<p><ion-text class="ionic-display-sm-regular">display-sm-regular</ion-text></p>
<p><ion-text class="ionic-display-sm-light">display-sm-light</ion-text></p>
<p><ion-text class="ion-display-sm-regular">display-sm-regular</ion-text></p>
<p><ion-text class="ion-display-sm-light">display-sm-light</ion-text></p>
</div>
<br />
<div>
<ion-title>Headings</ion-title>
<ion-title>h1</ion-title>
<p><ion-text class="ionic-heading-h1-regular">heading-h1-regular</ion-text></p>
<p><ion-text class="ionic-heading-h1-medium">heading-h1-medium</ion-text></p>
<p><ion-text class="ionic-heading-h1-semi-bold">heading-h1-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h1-bold">heading-h1-bold</ion-text></p>
<p><ion-text class="ion-heading-h1-regular">heading-h1-regular</ion-text></p>
<p><ion-text class="ion-heading-h1-medium">heading-h1-medium</ion-text></p>
<p><ion-text class="ion-heading-h1-semi-bold">heading-h1-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h1-bold">heading-h1-bold</ion-text></p>
<ion-title>h2</ion-title>
<p><ion-text class="ionic-heading-h2-regular">heading-h2-regular</ion-text></p>
<p><ion-text class="ionic-heading-h2-medium">heading-h2-medium</ion-text></p>
<p><ion-text class="ionic-heading-h2-semi-bold">heading-h2-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h2-bold">heading-h2-bold</ion-text></p>
<p><ion-text class="ion-heading-h2-regular">heading-h2-regular</ion-text></p>
<p><ion-text class="ion-heading-h2-medium">heading-h2-medium</ion-text></p>
<p><ion-text class="ion-heading-h2-semi-bold">heading-h2-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h2-bold">heading-h2-bold</ion-text></p>
<ion-title>h3</ion-title>
<p><ion-text class="ionic-heading-h3-regular">heading-h3-regular</ion-text></p>
<p><ion-text class="ionic-heading-h3-medium">heading-h3-medium</ion-text></p>
<p><ion-text class="ionic-heading-h3-semi-bold">heading-h3-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h3-bold">heading-h3-bold</ion-text></p>
<p><ion-text class="ion-heading-h3-regular">heading-h3-regular</ion-text></p>
<p><ion-text class="ion-heading-h3-medium">heading-h3-medium</ion-text></p>
<p><ion-text class="ion-heading-h3-semi-bold">heading-h3-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h3-bold">heading-h3-bold</ion-text></p>
<ion-title>h4</ion-title>
<p><ion-text class="ionic-heading-h4-regular">heading-h4-regular</ion-text></p>
<p><ion-text class="ionic-heading-h4-medium">heading-h4-medium</ion-text></p>
<p><ion-text class="ionic-heading-h4-semi-bold">heading-h4-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h4-bold">heading-h4-bold</ion-text></p>
<p><ion-text class="ion-heading-h4-regular">heading-h4-regular</ion-text></p>
<p><ion-text class="ion-heading-h4-medium">heading-h4-medium</ion-text></p>
<p><ion-text class="ion-heading-h4-semi-bold">heading-h4-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h4-bold">heading-h4-bold</ion-text></p>
<ion-title>h5</ion-title>
<p><ion-text class="ionic-heading-h5-regular">heading-h5-regular</ion-text></p>
<p><ion-text class="ionic-heading-h5-medium">heading-h5-medium</ion-text></p>
<p><ion-text class="ionic-heading-h5-semi-bold">heading-h5-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h5-bold">heading-h5-bold</ion-text></p>
<p><ion-text class="ion-heading-h5-regular">heading-h5-regular</ion-text></p>
<p><ion-text class="ion-heading-h5-medium">heading-h5-medium</ion-text></p>
<p><ion-text class="ion-heading-h5-semi-bold">heading-h5-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h5-bold">heading-h5-bold</ion-text></p>
<ion-title>h6</ion-title>
<p><ion-text class="ionic-heading-h6-regular">heading-h6-regular</ion-text></p>
<p><ion-text class="ionic-heading-h6-medium">heading-h6-medium</ion-text></p>
<p><ion-text class="ionic-heading-h6-semi-bold">heading-h6-semi-bold</ion-text></p>
<p><ion-text class="ionic-heading-h6-bold">heading-h6-bold</ion-text></p>
<p><ion-text class="ion-heading-h6-regular">heading-h6-regular</ion-text></p>
<p><ion-text class="ion-heading-h6-medium">heading-h6-medium</ion-text></p>
<p><ion-text class="ion-heading-h6-semi-bold">heading-h6-semi-bold</ion-text></p>
<p><ion-text class="ion-heading-h6-bold">heading-h6-bold</ion-text></p>
</div>
<br />
<div>
<ion-title>Body</ion-title>
<ion-title>sm</ion-title>
<p><ion-text class="ionic-body-sm-regular">ionic-body-sm-regular</ion-text></p>
<p><ion-text class="ionic-body-sm-medium">ionic-body-sm-medium</ion-text></p>
<p><ion-text class="ionic-body-sm-semi-bold">ionic-body-sm-semi-bold</ion-text></p>
<p><ion-text class="ionic-body-sm-bold">ionic-body-sm-bold</ion-text></p>
<p><ion-text class="ionic-body-sm-link">ionic-body-sm-link</ion-text></p>
<p><ion-text class="ionic-body-sm-italic">ionic-body-sm-italic</ion-text></p>
<p><ion-text class="ion-body-sm-regular">ion-body-sm-regular</ion-text></p>
<p><ion-text class="ion-body-sm-medium">ion-body-sm-medium</ion-text></p>
<p><ion-text class="ion-body-sm-semi-bold">ion-body-sm-semi-bold</ion-text></p>
<p><ion-text class="ion-body-sm-bold">ion-body-sm-bold</ion-text></p>
<ion-title>md</ion-title>
<p><ion-text class="ionic-body-md-regular">ionic-body-md-regular</ion-text></p>
<p><ion-text class="ionic-body-md-medium">ionic-body-md-medium</ion-text></p>
<p><ion-text class="ionic-body-md-semi-bold">ionic-body-md-semi-bold</ion-text></p>
<p><ion-text class="ionic-body-md-bold">ionic-body-md-bold</ion-text></p>
<p><ion-text class="ionic-body-md-link">ionic-body-md-link</ion-text></p>
<p><ion-text class="ionic-body-md-italic">ionic-body-md-italic</ion-text></p>
<p><ion-text class="ion-body-md-regular">ion-body-md-regular</ion-text></p>
<p><ion-text class="ion-body-md-medium">ion-body-md-medium</ion-text></p>
<p><ion-text class="ion-body-md-semi-bold">ion-body-md-semi-bold</ion-text></p>
<p><ion-text class="ion-body-md-bold">ion-body-md-bold</ion-text></p>
<ion-title>lg</ion-title>
<p><ion-text class="ionic-body-lg-regular">ionic-body-lg-regular</ion-text></p>
<p><ion-text class="ionic-body-lg-medium">ionic-body-lg-medium</ion-text></p>
<p><ion-text class="ionic-body-lg-semi-bold">ionic-body-lg-semi-bold</ion-text></p>
<p><ion-text class="ionic-body-lg-bold">ionic-body-lg-bold</ion-text></p>
<p><ion-text class="ionic-body-lg-link">ionic-body-lg-link</ion-text></p>
<p><ion-text class="ionic-body-lg-italic">ionic-body-lg-italic</ion-text></p>
<p><ion-text class="ion-body-lg-regular">ion-body-lg-regular</ion-text></p>
<p><ion-text class="ion-body-lg-medium">ion-body-lg-medium</ion-text></p>
<p><ion-text class="ion-body-lg-semi-bold">ion-body-lg-semi-bold</ion-text></p>
<p><ion-text class="ion-body-lg-bold">ion-body-lg-bold</ion-text></p>
</div>
<br />
<div>
<ion-title>Action</ion-title>
<p><ion-text class="ionic-action-sm">ionic-action-sm</ion-text></p>
<p><ion-text class="ionic-action-md">ionic-action-md</ion-text></p>
<p><ion-text class="ionic-action-lg">ionic-action-lg</ion-text></p>
<p><ion-text class="ionic-action-xl">ionic-action-xl</ion-text></p>
<p><ion-text class="ion-body-action-sm">ion-action-sm</ion-text></p>
<p><ion-text class="ion-body-action-md">ion-action-md</ion-text></p>
<p><ion-text class="ion-body-action-lg">ion-action-lg</ion-text></p>
<p><ion-text class="ion-body-action-xl">ion-action-xl</ion-text></p>
</div>
<br />
<div>
<ion-title>Overline</ion-title>
<p><ion-text class="ionic-overline-regular">ionic-overline-regular</ion-text></p>
<p><ion-text class="ionic-overline-medium">ionic-overline-medium</ion-text></p>
<p><ion-text class="ionic-overline-semi-bold">ionic-overline-semi-bold</ion-text></p>
<p><ion-text class="ionic-overline-bold">ionic-overline-bold</ion-text></p>
<p><ion-text class="ion-overline-regular">ion-overline-regular</ion-text></p>
<p><ion-text class="ion-overline-medium">ion-overline-medium</ion-text></p>
<p><ion-text class="ion-overline-semi-bold">ion-overline-semi-bold</ion-text></p>
<p><ion-text class="ion-overline-bold">ion-overline-bold</ion-text></p>
</div>
</ion-content>
</ion-app>

BIN
core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 187 KiB

BIN
core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 146 KiB

After

Width:  |  Height:  |  Size: 135 KiB