fix(button): update for ios spec (#26864)
BREAKING CHANGE: Button is updated to align with the design specification for iOS. **Design tokens** | Token | Previous Value | New Value | | ---------------------------------- | -------------- | --------- | | `$button-ios-letter-spacing` | `-0.03em` | `0` | | `$button-ios-clear-letter-spacing` | `0` | Removed | | `$button-ios-height` | `2.8em` | `3.1em` | | `$button-ios-border-radius` | `10px` | `14px` | | `$button-ios-large-height` | `2.8em` | `3.1em` | | `$button-ios-large-border-radius` | `12px` | `16px` |
@ -78,8 +78,6 @@
|
||||
|
||||
font-size: #{$button-ios-clear-font-size};
|
||||
font-weight: #{$button-ios-clear-font-weight};
|
||||
|
||||
letter-spacing: #{$button-ios-clear-letter-spacing};
|
||||
}
|
||||
|
||||
|
||||
|
@ -28,10 +28,10 @@ $button-ios-padding-bottom: $button-ios-padding-top !d
|
||||
$button-ios-padding-start: $button-ios-padding-end !default;
|
||||
|
||||
/// @prop - Height of the button
|
||||
$button-ios-height: 2.8em !default;
|
||||
$button-ios-height: 3.1em !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-ios-border-radius: 10px !default;
|
||||
$button-ios-border-radius: 14px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-ios-font-size: 16px !default;
|
||||
@ -39,9 +39,6 @@ $button-ios-font-size: 16px !default;
|
||||
/// @prop - Font weight of the button text
|
||||
$button-ios-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Letter spacing of the button text
|
||||
$button-ios-letter-spacing: -.03em !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$button-ios-background-color: ion-color(primary, base) !default;
|
||||
|
||||
@ -80,10 +77,10 @@ $button-ios-large-padding-bottom: $button-ios-large-padding-
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end !default;
|
||||
|
||||
/// @prop - Height of the large button
|
||||
$button-ios-large-height: 2.8em !default;
|
||||
$button-ios-large-height: 3.1em !default;
|
||||
|
||||
/// @prop - Border radius of the large button
|
||||
$button-ios-large-border-radius: 12px !default;
|
||||
$button-ios-large-border-radius: 16px !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-ios-large-font-size: 20px !default;
|
||||
@ -159,8 +156,8 @@ $button-ios-clear-font-size: 17px !default;
|
||||
/// @prop - Font weight of the clear button
|
||||
$button-ios-clear-font-weight: normal !default;
|
||||
|
||||
/// @prop - Letter spacing of the clear button
|
||||
$button-ios-clear-letter-spacing: 0 !default;
|
||||
/// @prop - Letter spacing of the button
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
|
||||
/// @prop - Border color of the clear button
|
||||
$button-ios-clear-border-color: transparent !default;
|
||||
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 123 KiB |
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 126 KiB |
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 128 KiB |
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 86 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 111 KiB |
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 143 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 144 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 108 KiB |
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |