Skip to content

Commit c801e2a

Browse files
liamdebeasiliamdebeasi
authored
chore: remove unused sass variables (#28363)
Issue number: N/A --------- <!-- 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 current behavior? <!-- Please describe the current behavior that you are modifying. --> This project has several unused Sass variables still in the code base. The team would like to remove these. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Removed unused Sass variables ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> The original scope of this ticket was for checkbox only, but many other components had unused sass variables, so I decided to tackle everything all at once. Since these variables are not used anywhere: 1. The build should pass 2. There should be no screenshot diffs
1 parent 5a30082 commit c801e2a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+3
-600
lines changed

‎core/src/components/action-sheet/action-sheet.ios.vars.scss‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -58,19 +58,6 @@ $action-sheet-ios-title-font-weight: 400 !default;
5858
/// @prop - Font weight of the action sheet title when it has a sub title
5959
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
6060

61-
/// @prop - Border width of the action sheet title
62-
$action-sheet-ios-title-border-width: $hairlines-width !default;
63-
64-
/// @prop - Border style of the action sheet title
65-
$action-sheet-ios-title-border-style: solid !default;
66-
67-
/// @prop - Border color alpha of the action sheet title
68-
$action-sheet-ios-title-border-color-alpha: .08 !default;
69-
70-
/// @prop - Border color of the action sheet title
71-
$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
72-
73-
7461
// Action Sheet Subtitle
7562
// --------------------------------------------------
7663

@@ -129,9 +116,6 @@ $action-sheet-ios-button-background-selected: var(--ion-colo
129116
/// @prop - Destructive text color of the action sheet button
130117
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;
131118

132-
/// @prop - Background color of the action sheet cancel button
133-
$action-sheet-ios-button-cancel-background: $background-color !default;
134-
135119
/// @prop - Font weight of the action sheet cancel button
136120
$action-sheet-ios-button-cancel-font-weight: 600 !default;
137121

‎core/src/components/action-sheet/action-sheet.md.vars.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,6 @@ $action-sheet-md-button-padding-bottom: $action-sheet-md-button-
8484
/// @prop - Padding start of the action sheet button
8585
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;
8686

87-
/// @prop - Background color of the action sheet button
88-
$action-sheet-md-button-background: transparent !default;
89-
9087
// Action Sheet Icon
9188
// --------------------------------------------------
9289

@@ -104,6 +101,3 @@ $action-sheet-md-icon-margin-bottom: 0 !default;
104101

105102
/// @prop - Margin start of the icon in the action sheet button
106103
$action-sheet-md-icon-margin-start: 0 !default;
107-
108-
/// @prop - Color of the icon in the action sheet button
109-
$action-sheet-md-icon-color: $action-sheet-md-title-color !default;

‎core/src/components/alert/alert.md.vars.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,6 @@ $alert-md-button-text-color: ion-color(primary, base) !default;
157157
/// @prop - Background color of the alert button
158158
$alert-md-button-background-color: transparent !default;
159159

160-
/// @prop - Background color of the alert activated button
161-
$alert-md-button-background-color-activated: ion-color(primary, base, .04) !default;
162-
163160
/// @prop - Border radius of the alert button
164161
$alert-md-button-border-radius: 2px !default;
165162

‎core/src/components/button/button.ios.vars.scss‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -41,28 +41,6 @@ $button-ios-font-size: dynamic-font-max(16px, 3)
4141
/// @prop - Font weight of the button text
4242
$button-ios-font-weight: 500 !default;
4343

44-
/// @prop - Background color of the button
45-
$button-ios-background-color: ion-color(primary, base) !default;
46-
47-
/// @prop - Text color of the button
48-
$button-ios-text-color: ion-color(primary, contrast) !default;
49-
50-
/// @prop - Background color of the activated button
51-
$button-ios-background-color-activated: ion-color(primary, shade) !default;
52-
53-
/// @prop - Opacity of the activated button
54-
$button-ios-opacity-activated: 1 !default;
55-
56-
/// @prop - Opacity of the button on hover
57-
$button-ios-opacity-hover: .8 !default;
58-
59-
/// @prop - Background color of the focused button
60-
$button-ios-background-color-focused: ion-color(primary, shade) !default;
61-
62-
/// @prop - Opacity of the button when disabled
63-
$button-ios-opacity-disabled: .5 !default;
64-
65-
6644
// iOS Large Button
6745
// --------------------------------------------------
6846

@@ -129,30 +107,6 @@ $button-ios-outline-border-style: solid !default;
129107
/// @prop - Border radius of the outline button
130108
$button-ios-outline-border-radius: $button-ios-border-radius !default;
131109

132-
/// @prop - Border color of the outline button
133-
$button-ios-outline-border-color: $button-ios-background-color !default;
134-
135-
/// @prop - Text color of the outline button
136-
$button-ios-outline-text-color: $button-ios-background-color !default;
137-
138-
/// @prop - Background color of the outline button
139-
$button-ios-outline-background-color: transparent !default;
140-
141-
/// @prop - Text color of the activated outline button
142-
$button-ios-outline-text-color-activated: ion-color(primary, contrast) !default;
143-
144-
/// @prop - Background color of the activated outline button
145-
$button-ios-outline-background-color-activated: $button-ios-background-color !default;
146-
147-
/// @prop - Opacity of the activated outline button
148-
$button-ios-outline-opacity-activated: 1 !default;
149-
150-
/// @prop - Background color alpha of the focused outline button
151-
$button-ios-outline-background-color-alpha-focused: .25 !default;
152-
153-
/// @prop - Background color of the focused outline button
154-
$button-ios-outline-background-color-focused: ion-color(primary, base, $button-ios-outline-background-color-alpha-focused) !default;
155-
156110
// iOS Clear Button
157111
// --------------------------------------------------
158112

@@ -167,30 +121,12 @@ $button-ios-clear-font-weight: normal !default;
167121
/// @prop - Letter spacing of the button
168122
$button-ios-letter-spacing: 0 !default;
169123

170-
/// @prop - Border color of the clear button
171-
$button-ios-clear-border-color: transparent !default;
172-
173-
/// @prop - Background color of the clear button
174-
$button-ios-clear-background-color: transparent !default;
175-
176-
/// @prop - Background color of the activated clear button
177-
$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default;
178-
179124
/// @prop - Opacity of the activated clear button
180125
$button-ios-clear-opacity-activated: .4 !default;
181126

182-
/// @prop - Text color of the clear button on hover
183-
$button-ios-clear-text-color-hover: $button-ios-background-color !default;
184-
185127
/// @prop - Opacity of the clear button on hover
186128
$button-ios-clear-opacity-hover: .6 !default;
187129

188-
/// @prop - Background color alpha of the focused clear button
189-
$button-ios-clear-background-color-alpha-focused: .25 !default;
190-
191-
/// @prop - Background color of the focused clear button
192-
$button-ios-clear-background-color-focused: ion-color(primary, base, $button-ios-clear-background-color-alpha-focused) !default;
193-
194130
// iOS Round Button
195131
// --------------------------------------------------
196132

‎core/src/components/button/button.md.vars.scss‎

Lines changed: 0 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,9 @@ $button-md-letter-spacing: 0.06em;
4747
/// @prop - Box shadow of the button
4848
$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
4949

50-
/// @prop - Opacity of the activated button
51-
$button-md-opacity-activated: 1 !default;
52-
5350
/// @prop - Box shadow of the activated button
5451
$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
5552

56-
/// @prop - Background color of the ripple on the button
57-
$button-md-ripple-background-color: $text-color-step-400 !default;
58-
59-
/// @prop - Opacity of the button when disabled
60-
$button-md-opacity-disabled: .5 !default;
61-
6253
// Material Design Large Button
6354
// --------------------------------------------------
6455

@@ -102,82 +93,6 @@ $button-md-small-min-height: 2.1em !default;
10293
/// @prop - Font size of the small button
10394
$button-md-small-font-size: dynamic-font(13px) !default;
10495

105-
106-
// Material Design Outline Button
107-
// --------------------------------------------------
108-
109-
/// @prop - Border width of the outline button
110-
$button-md-outline-border-width: 1px !default;
111-
112-
/// @prop - Border style of the outline button
113-
$button-md-outline-border-style: solid !default;
114-
115-
/// @prop - Background color of the outline button
116-
$button-md-outline-background-color: transparent !default;
117-
118-
/// @prop - Box shadow of the outline button
119-
$button-md-outline-box-shadow: none !default;
120-
121-
/// @prop - Background color alpha of the outline button on hover
122-
$button-md-outline-background-color-alpha-hover: .1 !default;
123-
124-
/// @prop - Background color of the outline button on hover
125-
$button-md-outline-background-color-hover: rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
126-
127-
/// @prop - Background color of the activated outline button
128-
$button-md-outline-background-color-activated: transparent !default;
129-
130-
/// @prop - Box shadow of the activated outline button
131-
$button-md-outline-box-shadow-activated: none !default;
132-
133-
/// @prop - Opacity of the activated outline button
134-
$button-md-outline-opacity-activated: 1 !default;
135-
136-
/// @prop - Background color alpha of the focused outline button
137-
$button-md-outline-background-color-alpha-focused: .1 !default;
138-
139-
/// @prop - Background color of the focused outline button
140-
$button-md-outline-background-color-focused: ion-color(primary, base, $button-md-outline-background-color-alpha-focused) !default;
141-
142-
// Material Design Clear Button
143-
// --------------------------------------------------
144-
145-
/// @prop - Border color of the clear button
146-
$button-md-clear-border-color: transparent !default;
147-
148-
/// @prop - Background color of the clear button
149-
$button-md-clear-background-color: transparent !default;
150-
151-
/// @prop - Box shadow of the clear button
152-
$button-md-clear-box-shadow: none !default;
153-
154-
/// @prop - Opacity of the clear button
155-
$button-md-clear-opacity: 1 !default;
156-
157-
/// @prop - Background color alpha of the activated clear button
158-
$button-md-clear-background-color-alpha-activated: .1 !default;
159-
160-
/// @prop - Background color of the activated clear button
161-
$button-md-clear-background-color-activated: rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
162-
163-
/// @prop - Box shadow of the activated clear button
164-
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
165-
166-
/// @prop - Background color alpha of the clear button on hover
167-
$button-md-clear-background-color-alpha-hover: .1 !default;
168-
169-
/// @prop - Background color of the clear button on hover
170-
$button-md-clear-background-color-hover: rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
171-
172-
/// @prop - Background color of the ripple on the clear button
173-
$button-md-clear-ripple-background-color: $text-color-step-600 !default;
174-
175-
/// @props - Background color of the focused clear button
176-
$button-md-clear-background-color-alpha-focused: .1 !default;
177-
178-
/// @props - Background color of the focused clear button
179-
$button-md-clear-background-color-focused: ion-color(primary, base, $button-md-clear-background-color-alpha-focused) !default;
180-
18196
// Material Design Round Button
18297
// --------------------------------------------------
18398

‎core/src/components/checkbox/checkbox.ios.vars.scss‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,12 @@
88
/// @prop - Background color of the checkbox when off
99
$checkbox-ios-background-color-off: $item-ios-background !default;
1010

11-
/// @prop - Background color of the checkbox when on
12-
$checkbox-ios-background-color-on: ion-color(primary, base) !default;
13-
14-
/// @prop - Background color of focus indicator for checkbox when focused
15-
$checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
16-
1711
/// @prop - Size of the checkbox icon
1812
$checkbox-ios-icon-size: dynamic-font-max(26px, 2.538) !default;
1913

2014
/// @prop - Border color of the checkbox icon when off
2115
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
2216

23-
/// @prop - Border color of the checkbox icon when on
24-
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
25-
2617
/// @prop - Border width of the checkbox icon
2718
$checkbox-ios-icon-border-width: dynamic-font(1px) !default;
2819

@@ -32,27 +23,6 @@ $checkbox-ios-icon-border-style: solid !default;
3223
/// @prop - Border radius of the checkbox icon
3324
$checkbox-ios-icon-border-radius: 50% !default;
3425

35-
/// @prop - Width of the checkmark border in the checkbox
36-
$checkbox-ios-checkmark-border-width: 1px !default;
37-
38-
/// @prop - Style of the checkmark border in the checkbox
39-
$checkbox-ios-checkmark-border-style: solid !default;
40-
41-
/// @prop - Color of the checkmark border in the checkbox
42-
$checkbox-ios-checkmark-border-color: ion-color(primary, contrast) !default;
43-
44-
/// @prop - Top of the checkmark in the checkbox
45-
$checkbox-ios-checkmark-top: calc($checkbox-ios-icon-size / 6) !default;
46-
47-
/// @prop - Start of the checkmark in the checkbox
48-
$checkbox-ios-checkmark-start: calc($checkbox-ios-icon-size / 3 + 1px) !default;
49-
50-
/// @prop - Width of the checkmark in the checkbox
51-
$checkbox-ios-checkmark-width: calc($checkbox-ios-icon-size / 6 + 1px) !default;
52-
53-
/// @prop - Height of the checkmark in the checkbox
54-
$checkbox-ios-checkmark-height: calc($checkbox-ios-icon-size * 0.5) !default;
55-
5626
/// @prop - Opacity of the disabled checkbox
5727
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
5828

‎core/src/components/checkbox/checkbox.md.vars.scss‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,20 @@ $checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !defa
1010
/// @prop - Background color of the checkbox icon when off
1111
$checkbox-md-icon-background-color-off: $item-md-background !default;
1212

13-
/// @prop - Background color of focus indicator for checkbox when focused
14-
$checkbox-md-background-color-focused: ion-color(primary, tint) !default;
15-
16-
/// @prop - Background color of the checkbox icon when on
17-
$checkbox-md-icon-background-color-on: ion-color(primary, base) !default;
18-
1913
/// @prop - Size of the checkbox icon
2014
/// The icon size does not use dynamic font
2115
/// because it does not scale in native.
2216
$checkbox-md-icon-size: 18px !default;
2317

24-
/// @prop - Width of the checkbox icon checkmark
25-
$checkbox-md-icon-checkmark-width: 2px !default;
26-
27-
/// @prop - Style of the checkbox icon checkmark
28-
$checkbox-md-icon-checkmark-style: solid !default;
29-
30-
/// @prop - Color of the checkbox icon checkmark
31-
$checkbox-md-icon-checkmark-color: ion-color(primary, contrast) !default;
32-
3318
/// @prop - Border width of the checkbox icon
3419
$checkbox-md-icon-border-width: 2px !default;
3520

3621
/// @prop - Border style of the checkbox icon
3722
$checkbox-md-icon-border-style: solid !default;
3823

39-
/// @prop - Border radius of the checkbox icon
40-
$checkbox-md-icon-border-radius: 2px !default;
41-
4224
/// @prop - Border color of the checkbox icon when off
4325
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default;
4426

45-
/// @prop - Border color of the checkbox icon when on
46-
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;
47-
4827
/// @prop - Transition duration of the checkbox
4928
$checkbox-md-transition-duration: 180ms !default;
5029

‎core/src/components/datetime/datetime.ios.vars.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,6 @@ $datetime-ios-border-color: 0.55px solid $background-color-step-200 !def
77
/// @prop - Padding for content
88
$datetime-ios-padding: 16px !default;
99

10-
/// @prop - Height of the time picker
11-
$datetime-ios-time-height: 28px !default;
12-
13-
/// @prop - Width of the time picker
14-
$datetime-ios-time-width: 68px !default;
15-
16-
/// @prop - Border radius of the time picker
17-
$datetime-ios-time-border-radius: 8px !default;
18-
1910
/// @prop - The font size at which layouts may change to accommodate Dynamic Type
2011
$datetime-dynamic-font-breakpoint: 24px !default;
2112

‎core/src/components/datetime/datetime.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "./datetime.vars";
1+
@import "../../themes/ionic.globals";
22

33
// Datetime
44
// --------------------------------------------------

‎core/src/components/datetime/datetime.vars.scss‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)