mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
refactor(button): use the new tokens (#29561)
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. --> - On ionic.button.scss all dependencies to button.scss were removed, to avoid the old native theme values being mixed on the new ionic theme button. - ionic.button.vars.scss partial was removed - All values were changed to use tokens. - Updated snapshots that bring slight differences due to now we are totally using the ionic theme tokens. - Tests with colors where the ionic button was being added also now have differences, as the current ion-colors aren't affecting the ionic theme button. This is expected, as the ionic theme should only work with the colors from the new Design System, which is something being tacked on this [PR](https://github.com/ionic-team/ionic-framework/pull/29557). in the future, we should remove the ionic button from these color ctests and create new ones that add the new set of colors to the ionic button. ## Does this introduce a breaking change? - [ ] Yes - [x] 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. -->
This commit is contained in:
Bernardo Cardoso
@ -1,32 +1,55 @@
|
||||
@use "../../themes/ionic/ionic.globals.scss" as globals;
|
||||
@import "./button";
|
||||
@import "./button.ionic.vars";
|
||||
|
||||
// Ionic Button
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host {
|
||||
--overflow: hidden;
|
||||
--border-width: initial;
|
||||
--border-color: initial;
|
||||
--border-style: initial;
|
||||
--color-activated: var(--color);
|
||||
--color-focused: var(--color);
|
||||
--color-hover: var(--color);
|
||||
--box-shadow: none;
|
||||
--padding-bottom: var(--padding-top);
|
||||
--padding-end: #{$button-ionic-padding-end};
|
||||
--padding-end: #{globals.$ionic-space-400};
|
||||
--padding-start: var(--padding-end);
|
||||
--padding-top: #{$button-ionic-padding-top};
|
||||
// TODO(FW-6187): set this to a design token when it is added
|
||||
--focus-ring-color: #9ec4fd;
|
||||
--focus-ring-width: 2px;
|
||||
--padding-top: #{globals.$ionic-space-300};
|
||||
--focus-ring-color: #{globals.$ionic-state-focus-1};
|
||||
--focus-ring-width: #{globals.$ionic-border-size-050};
|
||||
|
||||
display: inline-block;
|
||||
|
||||
position: relative;
|
||||
|
||||
min-height: #{$button-ionic-min-height};
|
||||
width: auto;
|
||||
|
||||
font-size: #{$button-ionic-font-size};
|
||||
min-height: globals.$ionic-scale-1000;
|
||||
|
||||
color: var(--color);
|
||||
|
||||
font-family: globals.$ionic-font-family;
|
||||
|
||||
font-size: globals.$ionic-font-size-350;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
white-space: normal;
|
||||
|
||||
user-select: none;
|
||||
vertical-align: top; // the better option for most scenarios
|
||||
vertical-align: -webkit-baseline-middle; // the best for those that support it
|
||||
|
||||
font-kerning: none;
|
||||
|
||||
// Target area
|
||||
&::after {
|
||||
@include position(50%, 0, null, 0);
|
||||
@include globals.position(50%, 0, null, 0);
|
||||
position: absolute;
|
||||
|
||||
height: 100%;
|
||||
min-height: px-to-rem(48);
|
||||
min-height: globals.$ionic-scale-1200;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
@ -38,11 +61,11 @@
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="start"]) {
|
||||
@include margin-horizontal(null, px-to-rem(8));
|
||||
@include globals.margin-horizontal(null, globals.$ionic-space-200);
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="end"]) {
|
||||
@include margin-horizontal(px-to-rem(8), null);
|
||||
@include globals.margin-horizontal(globals.$ionic-space-200, null);
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,52 +76,52 @@
|
||||
:host(.button-xsmall),
|
||||
:host(.button-small) {
|
||||
::slotted(ion-icon[slot="start"]) {
|
||||
@include margin-horizontal(null, px-to-rem(4));
|
||||
@include globals.margin-horizontal(null, globals.$ionic-space-100);
|
||||
}
|
||||
|
||||
::slotted(ion-icon[slot="end"]) {
|
||||
@include margin-horizontal(px-to-rem(4), null);
|
||||
@include globals.margin-horizontal(globals.$ionic-space-100, null);
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra Small Button */
|
||||
:host(.button-xsmall) {
|
||||
--padding-top: #{$button-ionic-xsmall-padding-top};
|
||||
--padding-end: #{$button-ionic-xsmall-padding-end};
|
||||
--padding-top: #{globals.$ionic-space-100};
|
||||
--padding-end: #{globals.$ionic-space-300};
|
||||
|
||||
min-height: #{$button-ionic-xsmall-min-height};
|
||||
min-height: globals.$ionic-space-600;
|
||||
|
||||
font-size: #{$button-ionic-xsmall-font-size};
|
||||
font-size: globals.$ionic-font-size-300;
|
||||
}
|
||||
|
||||
/* Small Button */
|
||||
:host(.button-small) {
|
||||
--padding-top: #{$button-ionic-small-padding-top};
|
||||
--padding-end: #{$button-ionic-small-padding-end};
|
||||
--padding-top: #{globals.$ionic-space-200};
|
||||
--padding-end: #{globals.$ionic-space-400};
|
||||
|
||||
min-height: #{$button-ionic-small-min-height};
|
||||
min-height: #{globals.$ionic-scale-800};
|
||||
|
||||
font-size: #{$button-ionic-small-font-size};
|
||||
font-size: #{globals.$ionic-font-size-300};
|
||||
}
|
||||
|
||||
/* Large Button */
|
||||
:host(.button-large) {
|
||||
--padding-top: #{$button-ionic-large-padding-top};
|
||||
--padding-end: #{$button-ionic-large-padding-end};
|
||||
--padding-top: #{globals.$ionic-space-400};
|
||||
--padding-end: #{globals.$ionic-space-600};
|
||||
|
||||
min-height: #{$button-ionic-large-min-height};
|
||||
min-height: #{globals.$ionic-scale-1200};
|
||||
|
||||
font-size: #{$button-ionic-large-font-size};
|
||||
font-size: #{globals.$ionic-font-size-400};
|
||||
}
|
||||
|
||||
/* Extra Large Button */
|
||||
:host(.button-xlarge) {
|
||||
--padding-top: #{$button-ionic-xlarge-padding-top};
|
||||
--padding-end: #{$button-ionic-xlarge-padding-end};
|
||||
--padding-top: #{globals.$ionic-space-400};
|
||||
--padding-end: #{globals.$ionic-space-800};
|
||||
|
||||
min-height: #{$button-ionic-xlarge-min-height};
|
||||
min-height: #{globals.$ionic-scale-1400};
|
||||
|
||||
font-size: #{$button-ionic-xlarge-font-size};
|
||||
font-size: #{globals.$ionic-font-size-500};
|
||||
}
|
||||
|
||||
// Button with Icons
|
||||
@ -108,7 +131,7 @@
|
||||
::slotted(ion-icon[slot="start"]),
|
||||
::slotted(ion-icon[slot="end"]),
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: px-to-rem(16);
|
||||
font-size: globals.$ionic-font-size-400;
|
||||
}
|
||||
|
||||
:host(.button-xsmall),
|
||||
@ -118,7 +141,7 @@
|
||||
::slotted(ion-icon[slot="start"]),
|
||||
::slotted(ion-icon[slot="end"]),
|
||||
::slotted(ion-icon[slot="icon-only"]) {
|
||||
font-size: 1em;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,33 +176,33 @@
|
||||
|
||||
// Only show the focus ring when the button is focused
|
||||
:host(.ion-focused) .button-native {
|
||||
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
||||
outline-offset: 2px;
|
||||
outline: var(--focus-ring-width) globals.$ionic-border-style-solid var(--focus-ring-color);
|
||||
outline-offset: globals.$ionic-border-size-050;
|
||||
}
|
||||
|
||||
// Fill Solid Button
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host(.button-solid) {
|
||||
--background-activated: #{ion-color(primary, shade)};
|
||||
--background-activated: #{globals.$ionic-color-primary-base};
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color.ion-activated) .button-native::after {
|
||||
background: #{current-color(shade)};
|
||||
:host(.button-solid.ion-activated) .button-native::after {
|
||||
background: #{globals.$ionic-color-primary-900};
|
||||
}
|
||||
|
||||
// Fill Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-outline) {
|
||||
--border-width: #{$button-ionic-outline-border-width};
|
||||
--border-style: #{$button-ionic-outline-border-style};
|
||||
--background-activated: #e3e3e3;
|
||||
--border-width: #{globals.$ionic-border-size-025};
|
||||
--border-style: #{globals.$ionic-border-style-solid};
|
||||
--background-activated: #{globals.$ionic-color-neutral-200};
|
||||
--background-activated-opacity: 1;
|
||||
--background-focused: transparent;
|
||||
--background-hover: transparent;
|
||||
--background-focused-opacity: 0.1;
|
||||
--color-activated: #{ion-color(primary, base)};
|
||||
--color-activated: #{globals.$ionic-color-primary-base};
|
||||
}
|
||||
|
||||
:host(.button-outline.ion-focused) {
|
||||
@ -190,7 +213,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-clear) {
|
||||
--background-activated: #e3e3e3;
|
||||
--background-activated: #{globals.$ionic-color-neutral-200};
|
||||
--background-activated-opacity: 1;
|
||||
--background-focused: transparent;
|
||||
--background-hover: transparent;
|
||||
@ -199,22 +222,215 @@
|
||||
// Button Hover
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-solid) {
|
||||
--background-hover: #{globals.$ionic-color-primary-800};
|
||||
}
|
||||
|
||||
:host(.button-outline),
|
||||
:host(.button-clear) {
|
||||
--background-hover: #121212;
|
||||
--background-hover-opacity: 0.04;
|
||||
--background-hover: #{globals.$ionic-color-neutral-100};
|
||||
}
|
||||
|
||||
// Button: Disabled
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-disabled) {
|
||||
--color: #c9c9c9;
|
||||
--background: #{globals.$ionic-state-disabled};
|
||||
--border-color: var(--color);
|
||||
|
||||
opacity: 1;
|
||||
cursor: default;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host(.button-solid.button-disabled) {
|
||||
--background: #f5f5f5;
|
||||
// Solid Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Solid Color
|
||||
:host(.button-solid) {
|
||||
--background: #{globals.$ionic-color-primary-base};
|
||||
--color: #{globals.$ionic-color-base-white};
|
||||
}
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Outline Color
|
||||
:host(.button-outline) {
|
||||
--border-color: #{globals.$ionic-color-primary-base};
|
||||
--background: #{globals.$ionic-color-base-white};
|
||||
--color: #{globals.$ionic-color-primary-base};
|
||||
}
|
||||
|
||||
// Clear Button
|
||||
// --------------------------------------------------
|
||||
|
||||
// Default Clear Color
|
||||
:host(.button-clear) {
|
||||
--border-width: #{globals.$ionic-border-size-0};
|
||||
--background: transparent;
|
||||
--color: #{globals.$ionic-color-primary-base};
|
||||
}
|
||||
|
||||
// Block Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-block) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.button-block) .button-native {
|
||||
@include globals.margin-horizontal(0);
|
||||
|
||||
width: 100%;
|
||||
|
||||
clear: both;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
:host(.button-block) .button-native::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Full Button
|
||||
// --------------------------------------------------
|
||||
|
||||
:host(.button-full) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host(.button-full) .button-native {
|
||||
@include globals.margin-horizontal(0);
|
||||
|
||||
width: 100%;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
:host(.button-full:not(.button-round)) .button-native {
|
||||
@include globals.border-radius(0);
|
||||
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.button-native {
|
||||
@include globals.border-radius(var(--border-radius));
|
||||
@include globals.font-smoothing();
|
||||
@include globals.margin(0);
|
||||
@include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
|
||||
@include globals.text-inherit();
|
||||
|
||||
display: flex;
|
||||
|
||||
position: relative;
|
||||
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
min-height: inherit;
|
||||
|
||||
transition: var(--transition);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
|
||||
outline: none;
|
||||
|
||||
background: var(--background);
|
||||
|
||||
line-height: 1;
|
||||
|
||||
box-shadow: var(--box-shadow);
|
||||
|
||||
contain: layout style;
|
||||
cursor: pointer;
|
||||
|
||||
opacity: var(--opacity);
|
||||
overflow: var(--overflow);
|
||||
|
||||
z-index: 0;
|
||||
box-sizing: border-box;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.button-native::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Button Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted([slot="start"]),
|
||||
::slotted([slot="end"]) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// Button Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
::slotted(ion-icon) {
|
||||
font-size: globals.$ionic-font-size-500;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Button: States
|
||||
// --------------------------------------------------
|
||||
|
||||
.button-native::after {
|
||||
@include globals.button-state();
|
||||
}
|
||||
|
||||
// Button Focused
|
||||
:host(.ion-focused) {
|
||||
color: var(--color-focused);
|
||||
}
|
||||
|
||||
:host(.ion-focused) .button-native::after {
|
||||
background: var(--background-focused);
|
||||
|
||||
opacity: var(--background-focused-opacity);
|
||||
}
|
||||
|
||||
// Button Hover
|
||||
@media (any-hover: hover) {
|
||||
:host(:hover) {
|
||||
color: var(--color-hover);
|
||||
}
|
||||
|
||||
:host(:hover) .button-native::after {
|
||||
background: var(--background-hover);
|
||||
|
||||
opacity: var(--background-hover-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// Button Activated
|
||||
:host(.ion-activated) {
|
||||
color: var(--color-activated);
|
||||
}
|
||||
|
||||
:host(.ion-activated) .button-native::after {
|
||||
background: var(--background-activated);
|
||||
|
||||
opacity: var(--background-activated-opacity);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user