baseui 10.12.1 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/accordion/accordion.js +60 -13
- package/accordion/accordion.js.flow +49 -12
- package/accordion/index.d.ts +0 -3
- package/accordion/panel.js +7 -6
- package/accordion/panel.js.flow +20 -20
- package/accordion/stateless-accordion.js +2 -4
- package/accordion/stateless-accordion.js.flow +0 -2
- package/accordion/types.js.flow +0 -5
- package/button/constants.js +1 -2
- package/button/constants.js.flow +0 -1
- package/button/index.d.ts +0 -1
- package/button/styled-components.js +2 -29
- package/button/styled-components.js.flow +2 -30
- package/checkbox/checkbox.js +6 -30
- package/checkbox/checkbox.js.flow +7 -38
- package/checkbox/constants.js +2 -1
- package/checkbox/constants.js.flow +2 -1
- package/checkbox/index.d.ts +4 -6
- package/checkbox/index.js +0 -6
- package/checkbox/index.js.flow +0 -1
- package/checkbox/styled-components.js +52 -149
- package/checkbox/styled-components.js.flow +59 -165
- package/checkbox/types.js.flow +0 -5
- package/data-table/column-categorical.js +1 -1
- package/data-table/column-categorical.js.flow +1 -1
- package/data-table/column-datetime.js +1 -1
- package/data-table/column-datetime.js.flow +3 -1
- package/data-table/column.js +6 -2
- package/data-table/column.js.flow +9 -7
- package/data-table/data-table.js +1 -1
- package/data-table/data-table.js.flow +1 -1
- package/data-table/header-cell.js +3 -0
- package/data-table/header-cell.js.flow +1 -1
- package/datepicker/calendar.js +15 -7
- package/datepicker/calendar.js.flow +23 -9
- package/datepicker/constants.js +12 -2
- package/datepicker/constants.js.flow +10 -0
- package/datepicker/datepicker.js +61 -30
- package/datepicker/datepicker.js.flow +77 -37
- package/datepicker/day.js +85 -34
- package/datepicker/day.js.flow +118 -54
- package/datepicker/locale.js.flow +0 -1
- package/datepicker/month.js +3 -1
- package/datepicker/month.js.flow +2 -0
- package/datepicker/stateful-container.js.flow +2 -1
- package/datepicker/styled-components.js +23 -1
- package/datepicker/styled-components.js.flow +12 -2
- package/datepicker/types.js.flow +35 -10
- package/datepicker/utils/date-helpers.js +30 -0
- package/datepicker/utils/date-helpers.js.flow +12 -0
- package/datepicker/week.js +3 -1
- package/datepicker/week.js.flow +2 -0
- package/es/accordion/accordion.js +52 -12
- package/es/accordion/panel.js +7 -5
- package/es/accordion/stateless-accordion.js +2 -4
- package/es/button/constants.js +1 -2
- package/es/button/styled-components.js +2 -29
- package/es/checkbox/checkbox.js +7 -32
- package/es/checkbox/constants.js +2 -1
- package/es/checkbox/index.js +1 -1
- package/es/checkbox/styled-components.js +51 -146
- package/es/data-table/column-categorical.js +1 -1
- package/es/data-table/column-datetime.js +1 -1
- package/es/data-table/column.js +6 -2
- package/es/data-table/data-table.js +1 -1
- package/es/data-table/header-cell.js +3 -0
- package/es/datepicker/calendar.js +15 -7
- package/es/datepicker/constants.js +8 -0
- package/es/datepicker/datepicker.js +56 -29
- package/es/datepicker/day.js +77 -34
- package/es/datepicker/month.js +3 -1
- package/es/datepicker/styled-components.js +8 -2
- package/es/datepicker/types.js +1 -1
- package/es/datepicker/utils/date-helpers.js +16 -0
- package/es/datepicker/week.js +3 -1
- package/es/file-uploader/file-uploader.js +4 -4
- package/es/header-navigation/styled-components.js +3 -3
- package/es/helpers/overrides.js +1 -2
- package/es/input/styled-components.js +4 -4
- package/es/layer/layer.js +4 -4
- package/es/locale/index.js +0 -7
- package/es/menu/stateful-container.js +0 -1
- package/es/menu/styled-components.js +1 -1
- package/es/modal/index.js +1 -1
- package/es/modal/modal.js +19 -65
- package/es/modal/styled-components.js +12 -48
- package/es/phone-input/default-props.js +1 -1
- package/es/phone-input/index.js +0 -4
- package/es/phone-input/phone-input-lite.js +55 -31
- package/es/radio/radio.js +1 -7
- package/es/radio/radiogroup.js +3 -28
- package/es/radio/styled-components.js +4 -5
- package/es/rating/styled-components.js +3 -3
- package/es/select/index.js +1 -2
- package/es/select/select-component.js +4 -8
- package/es/select/styled-components.js +4 -4
- package/es/snackbar/styled-components.js +2 -2
- package/es/spinner/index.js +3 -9
- package/es/spinner/styled-components.js +2 -32
- package/es/table/filter.js +3 -3
- package/es/tag/styled-components.js +1 -1
- package/es/themes/dark-theme/color-component-tokens.js +0 -38
- package/es/themes/dark-theme/color-tokens.js +0 -2
- package/es/themes/dark-theme/create-dark-theme.js +0 -2
- package/es/themes/dark-theme/dark-theme.js +0 -2
- package/es/themes/light-theme/color-component-tokens.js +0 -38
- package/es/themes/light-theme/color-tokens.js +0 -2
- package/es/themes/light-theme/create-light-theme.js +0 -2
- package/es/themes/light-theme/light-theme.js +0 -2
- package/es/timepicker/timepicker.js +1 -8
- package/es/typography/index.js +1 -31
- package/esm/accordion/accordion.js +60 -13
- package/esm/accordion/panel.js +7 -6
- package/esm/accordion/stateless-accordion.js +2 -4
- package/esm/button/constants.js +1 -2
- package/esm/button/styled-components.js +2 -29
- package/esm/checkbox/checkbox.js +7 -30
- package/esm/checkbox/constants.js +2 -1
- package/esm/checkbox/index.js +1 -1
- package/esm/checkbox/styled-components.js +52 -147
- package/esm/data-table/column-categorical.js +1 -1
- package/esm/data-table/column-datetime.js +1 -1
- package/esm/data-table/column.js +6 -2
- package/esm/data-table/data-table.js +1 -1
- package/esm/data-table/header-cell.js +3 -0
- package/esm/datepicker/calendar.js +15 -7
- package/esm/datepicker/constants.js +8 -0
- package/esm/datepicker/datepicker.js +60 -30
- package/esm/datepicker/day.js +84 -34
- package/esm/datepicker/month.js +3 -1
- package/esm/datepicker/styled-components.js +24 -2
- package/esm/datepicker/types.js +1 -1
- package/esm/datepicker/utils/date-helpers.js +30 -0
- package/esm/datepicker/week.js +3 -1
- package/esm/file-uploader/file-uploader.js +4 -4
- package/esm/header-navigation/styled-components.js +3 -3
- package/esm/helpers/overrides.js +1 -2
- package/esm/input/styled-components.js +4 -4
- package/esm/layer/layer.js +4 -4
- package/esm/locale/index.js +0 -7
- package/esm/menu/stateful-container.js +0 -1
- package/esm/menu/styled-components.js +1 -1
- package/esm/modal/index.js +1 -1
- package/esm/modal/modal.js +28 -71
- package/esm/modal/styled-components.js +6 -38
- package/esm/phone-input/default-props.js +1 -1
- package/esm/phone-input/index.js +0 -4
- package/esm/phone-input/phone-input-lite.js +60 -37
- package/esm/radio/radio.js +1 -7
- package/esm/radio/radiogroup.js +3 -28
- package/esm/radio/styled-components.js +4 -5
- package/esm/rating/styled-components.js +3 -3
- package/esm/select/index.js +1 -2
- package/esm/select/select-component.js +4 -8
- package/esm/select/styled-components.js +4 -4
- package/esm/snackbar/styled-components.js +2 -2
- package/esm/spinner/index.js +3 -9
- package/esm/spinner/styled-components.js +2 -40
- package/esm/table/filter.js +3 -3
- package/esm/tag/styled-components.js +1 -1
- package/esm/themes/dark-theme/color-component-tokens.js +0 -38
- package/esm/themes/dark-theme/color-tokens.js +0 -2
- package/esm/themes/dark-theme/create-dark-theme.js +1 -2
- package/esm/themes/dark-theme/dark-theme.js +1 -2
- package/esm/themes/light-theme/color-component-tokens.js +0 -38
- package/esm/themes/light-theme/color-tokens.js +0 -2
- package/esm/themes/light-theme/create-light-theme.js +1 -2
- package/esm/themes/light-theme/light-theme.js +1 -2
- package/esm/timepicker/timepicker.js +1 -8
- package/esm/typography/index.js +1 -35
- package/file-uploader/file-uploader.js +3 -3
- package/file-uploader/file-uploader.js.flow +4 -4
- package/header-navigation/styled-components.js +3 -3
- package/header-navigation/styled-components.js.flow +3 -3
- package/helpers/overrides.js +1 -2
- package/helpers/overrides.js.flow +1 -1
- package/input/index.d.ts +5 -9
- package/input/styled-components.js +4 -4
- package/input/styled-components.js.flow +4 -4
- package/layer/layer.js +4 -4
- package/layer/layer.js.flow +4 -3
- package/locale/index.js +0 -7
- package/locale/index.js.flow +0 -7
- package/locale.ts +0 -1
- package/menu/index.d.ts +1 -3
- package/menu/stateful-container.js +0 -1
- package/menu/stateful-container.js.flow +0 -1
- package/menu/styled-components.js +1 -1
- package/menu/styled-components.js.flow +1 -1
- package/modal/index.d.ts +4 -6
- package/modal/index.js +0 -6
- package/modal/index.js.flow +0 -1
- package/modal/modal.js +27 -70
- package/modal/modal.js.flow +17 -83
- package/modal/styled-components.js +7 -40
- package/modal/styled-components.js.flow +12 -44
- package/modal/types.js.flow +1 -10
- package/package.json +2 -2
- package/phone-input/default-props.js +1 -1
- package/phone-input/default-props.js.flow +1 -1
- package/phone-input/index.d.ts +0 -1
- package/phone-input/index.js +0 -36
- package/phone-input/index.js.flow +0 -4
- package/phone-input/phone-input-lite.js +63 -38
- package/phone-input/phone-input-lite.js.flow +66 -44
- package/radio/index.d.ts +4 -9
- package/radio/radio.js +1 -7
- package/radio/radio.js.flow +1 -8
- package/radio/radiogroup.js +3 -28
- package/radio/radiogroup.js.flow +2 -26
- package/radio/styled-components.js +4 -5
- package/radio/styled-components.js.flow +3 -4
- package/radio/types.js.flow +4 -15
- package/rating/styled-components.js +3 -3
- package/rating/styled-components.js.flow +3 -3
- package/select/index.d.ts +0 -2
- package/select/index.js +0 -6
- package/select/index.js.flow +0 -2
- package/select/select-component.js +4 -8
- package/select/select-component.js.flow +2 -3
- package/select/styled-components.js +4 -4
- package/select/styled-components.js.flow +4 -4
- package/snackbar/styled-components.js +1 -1
- package/snackbar/styled-components.js.flow +11 -11
- package/spinner/index.d.ts +5 -18
- package/spinner/index.js +2 -68
- package/spinner/index.js.flow +2 -27
- package/spinner/styled-components.js +9 -45
- package/spinner/styled-components.js.flow +2 -34
- package/spinner/types.js.flow +1 -19
- package/styles/types.js.flow +0 -2
- package/table/filter.js +3 -3
- package/table/filter.js.flow +3 -3
- package/tag/styled-components.js +1 -1
- package/tag/styled-components.js.flow +1 -1
- package/theme.ts +0 -81
- package/themes/dark-theme/color-component-tokens.js +0 -38
- package/themes/dark-theme/color-component-tokens.js.flow +0 -42
- package/themes/dark-theme/color-tokens.js +0 -2
- package/themes/dark-theme/color-tokens.js.flow +0 -2
- package/themes/dark-theme/create-dark-theme.js +1 -3
- package/themes/dark-theme/create-dark-theme.js.flow +0 -2
- package/themes/dark-theme/dark-theme.js +1 -3
- package/themes/dark-theme/dark-theme.js.flow +0 -2
- package/themes/light-theme/color-component-tokens.js +0 -38
- package/themes/light-theme/color-component-tokens.js.flow +0 -43
- package/themes/light-theme/color-tokens.js +0 -2
- package/themes/light-theme/color-tokens.js.flow +0 -2
- package/themes/light-theme/create-light-theme.js +1 -3
- package/themes/light-theme/create-light-theme.js.flow +0 -2
- package/themes/light-theme/light-theme.js +1 -3
- package/themes/light-theme/light-theme.js.flow +0 -2
- package/themes/types.js.flow +0 -68
- package/timepicker/timepicker.js +1 -8
- package/timepicker/timepicker.js.flow +4 -10
- package/typography/index.d.ts +0 -23
- package/typography/index.js +2 -57
- package/typography/index.js.flow +0 -31
- package/es/spinner/spinner.js +0 -68
- package/es/themes/dark-theme/color-deprecated-semantic-tokens.js +0 -35
- package/es/themes/light-theme/color-deprecated-semantic-tokens.js +0 -35
- package/esm/spinner/spinner.js +0 -125
- package/esm/themes/dark-theme/color-deprecated-semantic-tokens.js +0 -38
- package/esm/themes/light-theme/color-deprecated-semantic-tokens.js +0 -38
- package/spinner/spinner.js +0 -136
- package/spinner/spinner.js.flow +0 -75
- package/themes/dark-theme/color-deprecated-semantic-tokens.js +0 -50
- package/themes/dark-theme/color-deprecated-semantic-tokens.js.flow +0 -42
- package/themes/light-theme/color-deprecated-semantic-tokens.js +0 -50
- package/themes/light-theme/color-deprecated-semantic-tokens.js.flow +0 -42
|
@@ -46,15 +46,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
46
46
|
buttonTertiarySpinnerForeground: themePrimitives.accent,
|
|
47
47
|
buttonTertiarySpinnerBackground: themePrimitives.primary100,
|
|
48
48
|
|
|
49
|
-
buttonMinimalFill: 'transparent',
|
|
50
|
-
buttonMinimalText: themePrimitives.primary,
|
|
51
|
-
buttonMinimalHover: themePrimitives.primary50,
|
|
52
|
-
buttonMinimalActive: themePrimitives.primary100,
|
|
53
|
-
buttonMinimalSelectedFill: themePrimitives.primary100,
|
|
54
|
-
buttonMinimalSelectedText: themePrimitives.primary,
|
|
55
|
-
buttonMinimalSpinnerForeground: themePrimitives.accent,
|
|
56
|
-
buttonMinimalSpinnerBackground: themePrimitives.primary100,
|
|
57
|
-
|
|
58
49
|
buttonDisabledFill: themePrimitives.mono200,
|
|
59
50
|
buttonDisabledText: themePrimitives.mono600,
|
|
60
51
|
buttonDisabledActiveFill: themePrimitives.mono700,
|
|
@@ -67,13 +58,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
67
58
|
breadcrumbsSeparatorFill: themePrimitives.mono700,
|
|
68
59
|
|
|
69
60
|
// Datepicker
|
|
70
|
-
datepickerBackground: themePrimitives.mono100,
|
|
71
|
-
datepickerDayFont: themePrimitives.mono1000,
|
|
72
|
-
datepickerDayFontDisabled: themePrimitives.mono500,
|
|
73
|
-
datepickerDayPseudoSelected: themePrimitives.primary100,
|
|
74
|
-
datepickerDayPseudoHighlighted: themePrimitives.primary200,
|
|
75
|
-
|
|
76
|
-
// Calendar
|
|
77
61
|
calendarBackground: themePrimitives.mono100,
|
|
78
62
|
calendarForeground: themePrimitives.mono1000,
|
|
79
63
|
calendarForegroundDisabled: themePrimitives.mono500,
|
|
@@ -81,7 +65,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
81
65
|
calendarHeaderForeground: themePrimitives.primary,
|
|
82
66
|
calendarHeaderBackgroundActive: themePrimitives.primary700,
|
|
83
67
|
calendarHeaderForegroundDisabled: themePrimitives.primary500,
|
|
84
|
-
calendarDayBackgroundPseudoSelected: themePrimitives.primary100,
|
|
85
68
|
calendarDayForegroundPseudoSelected: themePrimitives.mono1000,
|
|
86
69
|
calendarDayBackgroundPseudoSelectedHighlighted: themePrimitives.primary200,
|
|
87
70
|
calendarDayForegroundPseudoSelectedHighlighted: themePrimitives.mono1000,
|
|
@@ -110,15 +93,12 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
110
93
|
// List
|
|
111
94
|
listHeaderFill: themePrimitives.white,
|
|
112
95
|
listBodyFill: themePrimitives.white,
|
|
113
|
-
listIconFill: themePrimitives.mono500,
|
|
114
|
-
listBorder: themePrimitives.mono500,
|
|
115
96
|
|
|
116
97
|
// ProgressSteps
|
|
117
98
|
progressStepsCompletedText: themePrimitives.white,
|
|
118
99
|
progressStepsCompletedFill: themePrimitives.primary,
|
|
119
100
|
progressStepsActiveText: themePrimitives.white,
|
|
120
101
|
progressStepsActiveFill: themePrimitives.primary,
|
|
121
|
-
progressStepsIconActiveFill: themePrimitives.primary,
|
|
122
102
|
|
|
123
103
|
// Toggle
|
|
124
104
|
toggleFill: themePrimitives.white,
|
|
@@ -157,24 +137,12 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
157
137
|
sliderHandleFill: themePrimitives.primaryA,
|
|
158
138
|
sliderHandleFillDisabled: themePrimitives.primary400,
|
|
159
139
|
sliderHandleInnerFill: themePrimitives.primaryA,
|
|
160
|
-
|
|
161
140
|
sliderTrackFillHover: themePrimitives.mono500,
|
|
162
141
|
sliderTrackFillActive: themePrimitives.mono600,
|
|
163
|
-
sliderTrackFillSelected: themePrimitives.primary,
|
|
164
|
-
sliderTrackFillSelectedHover: themePrimitives.primary,
|
|
165
|
-
sliderTrackFillSelectedActive: themePrimitives.primary500,
|
|
166
142
|
sliderTrackFillDisabled: themePrimitives.mono300,
|
|
167
|
-
sliderHandleFillHover: themePrimitives.white,
|
|
168
|
-
sliderHandleFillActive: themePrimitives.white,
|
|
169
|
-
sliderHandleFillSelected: themePrimitives.white,
|
|
170
|
-
sliderHandleFillSelectedHover: themePrimitives.white,
|
|
171
|
-
sliderHandleFillSelectedActive: themePrimitives.white,
|
|
172
143
|
sliderHandleInnerFillDisabled: themePrimitives.mono400,
|
|
173
144
|
sliderHandleInnerFillSelectedHover: themePrimitives.primary,
|
|
174
145
|
sliderHandleInnerFillSelectedActive: themePrimitives.primary500,
|
|
175
|
-
sliderBorder: themePrimitives.mono500,
|
|
176
|
-
sliderBorderHover: themePrimitives.primary,
|
|
177
|
-
sliderBorderDisabled: themePrimitives.mono600,
|
|
178
146
|
|
|
179
147
|
// Inputs
|
|
180
148
|
inputBorder: themePrimitives.mono300,
|
|
@@ -205,19 +173,11 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
205
173
|
modalCloseColorHover: themePrimitives.mono800,
|
|
206
174
|
modalCloseColorFocus: themePrimitives.mono800,
|
|
207
175
|
|
|
208
|
-
// Pagination
|
|
209
|
-
paginationTriangleDown: themePrimitives.mono800,
|
|
210
|
-
|
|
211
|
-
// Header navigation
|
|
212
|
-
headerNavigationFill: 'transparent',
|
|
213
|
-
|
|
214
176
|
// Tab
|
|
215
177
|
tabBarFill: themePrimitives.mono200,
|
|
216
178
|
tabColor: themePrimitives.mono800,
|
|
217
179
|
|
|
218
180
|
// Notification
|
|
219
|
-
notificationPrimaryBackground: themePrimitives.primary50,
|
|
220
|
-
notificationPrimaryText: themePrimitives.primaryA,
|
|
221
181
|
notificationInfoBackground: themePrimitives.accent50,
|
|
222
182
|
notificationInfoText: themePrimitives.primaryA,
|
|
223
183
|
notificationPositiveBackground: themePrimitives.positive50,
|
|
@@ -231,7 +191,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
231
191
|
|
|
232
192
|
// Custom ramps
|
|
233
193
|
tagFontDisabledRampUnit: '100',
|
|
234
|
-
tagOutlinedDisabledRampUnit: '200',
|
|
235
194
|
tagSolidFontRampUnit: '0',
|
|
236
195
|
tagSolidRampUnit: '400',
|
|
237
196
|
tagOutlinedFontRampUnit: '400',
|
|
@@ -244,7 +203,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
244
203
|
tagLightRampUnit: '50',
|
|
245
204
|
tagLightHoverRampUnit: '100',
|
|
246
205
|
tagLightActiveRampUnit: '100',
|
|
247
|
-
tagLightDisabledRampUnit: '50',
|
|
248
206
|
tagLightFontRampUnit: '500',
|
|
249
207
|
tagLightFontHoverRampUnit: '500',
|
|
250
208
|
tagOutlinedHoverRampUnit: '50',
|
|
@@ -394,7 +352,6 @@ export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorToke
|
|
|
394
352
|
|
|
395
353
|
// Toast
|
|
396
354
|
toastText: themePrimitives.white,
|
|
397
|
-
toastPrimaryBackground: themePrimitives.primary400,
|
|
398
355
|
toastPrimaryText: themePrimitives.white,
|
|
399
356
|
toastInfoBackground: themePrimitives.accent400,
|
|
400
357
|
toastInfoText: themePrimitives.white,
|
|
@@ -81,8 +81,6 @@ var lightColorTokens = {
|
|
|
81
81
|
mono900: _index.colors.gray700,
|
|
82
82
|
mono1000: _index.colors.black,
|
|
83
83
|
// Rating Palette,
|
|
84
|
-
rating200: _index.colors.yellow200,
|
|
85
|
-
rating400: _index.colors.yellow400,
|
|
86
84
|
ratingInactiveFill: _index.colors.gray100,
|
|
87
85
|
ratingStroke: _index.colors.gray300
|
|
88
86
|
};
|
|
@@ -17,8 +17,6 @@ var _colorTokens = _interopRequireDefault(require("./color-tokens.js"));
|
|
|
17
17
|
|
|
18
18
|
var _colorComponentTokens = _interopRequireDefault(require("./color-component-tokens.js"));
|
|
19
19
|
|
|
20
|
-
var _colorDeprecatedSemanticTokens = _interopRequireDefault(require("./color-deprecated-semantic-tokens.js"));
|
|
21
|
-
|
|
22
20
|
var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-tokens.js"));
|
|
23
21
|
|
|
24
22
|
var _typography = _interopRequireDefault(require("../shared/typography.js"));
|
|
@@ -59,7 +57,7 @@ function createLightTheme() {
|
|
|
59
57
|
animation: _animation.default,
|
|
60
58
|
borders: _borders.default,
|
|
61
59
|
breakpoints: _breakpoints.default,
|
|
62
|
-
colors: _objectSpread(_objectSpread(_objectSpread(
|
|
60
|
+
colors: _objectSpread(_objectSpread(_objectSpread({}, colorTokens), (0, _colorComponentTokens.default)(colorTokens)), (0, _colorSemanticTokens.default)(colorTokens)),
|
|
63
61
|
direction: 'auto',
|
|
64
62
|
grid: _grid.default,
|
|
65
63
|
lighting: _lighting.default,
|
|
@@ -12,7 +12,6 @@ import breakpoints from '../shared/breakpoints.js';
|
|
|
12
12
|
import deepMerge from '../../utils/deep-merge.js';
|
|
13
13
|
import defaultColorTokens from './color-tokens.js';
|
|
14
14
|
import getComponentColorTokens from './color-component-tokens.js';
|
|
15
|
-
import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
|
|
16
15
|
import getSemanticColorTokens from './color-semantic-tokens.js';
|
|
17
16
|
import getTypography from '../shared/typography.js';
|
|
18
17
|
import grid from '../shared/grid.js';
|
|
@@ -43,7 +42,6 @@ export default function createLightTheme(
|
|
|
43
42
|
colors: {
|
|
44
43
|
...colorTokens,
|
|
45
44
|
...getComponentColorTokens(colorTokens),
|
|
46
|
-
...getDeprecatedSemanticColorTokens(colorTokens),
|
|
47
45
|
...getSemanticColorTokens(colorTokens),
|
|
48
46
|
},
|
|
49
47
|
direction: 'auto',
|
|
@@ -11,8 +11,6 @@ var _colorSemanticTokens = _interopRequireDefault(require("./color-semantic-toke
|
|
|
11
11
|
|
|
12
12
|
var _colorComponentTokens = _interopRequireDefault(require("./color-component-tokens.js"));
|
|
13
13
|
|
|
14
|
-
var _colorDeprecatedSemanticTokens = _interopRequireDefault(require("./color-deprecated-semantic-tokens.js"));
|
|
15
|
-
|
|
16
14
|
var _borders = _interopRequireDefault(require("../shared/borders.js"));
|
|
17
15
|
|
|
18
16
|
var _lighting = _interopRequireDefault(require("../shared/lighting.js"));
|
|
@@ -39,7 +37,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
39
37
|
|
|
40
38
|
var LightTheme = {
|
|
41
39
|
name: 'light-theme',
|
|
42
|
-
colors: _objectSpread(_objectSpread(_objectSpread(
|
|
40
|
+
colors: _objectSpread(_objectSpread(_objectSpread({}, _colorTokens.default), (0, _colorComponentTokens.default)()), (0, _colorSemanticTokens.default)()),
|
|
43
41
|
animation: _animation.default,
|
|
44
42
|
breakpoints: _breakpoints.default,
|
|
45
43
|
borders: _borders.default,
|
|
@@ -8,7 +8,6 @@ LICENSE file in the root directory of this source tree.
|
|
|
8
8
|
import colorTokens from './color-tokens.js';
|
|
9
9
|
import getSemanticColorTokens from './color-semantic-tokens.js';
|
|
10
10
|
import getComponentColorTokens from './color-component-tokens.js';
|
|
11
|
-
import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
|
|
12
11
|
import borders from '../shared/borders.js';
|
|
13
12
|
import lighting from '../shared/lighting.js';
|
|
14
13
|
import getTypography from '../shared/typography.js';
|
|
@@ -25,7 +24,6 @@ export const LightTheme: ThemeT = {
|
|
|
25
24
|
colors: {
|
|
26
25
|
...colorTokens,
|
|
27
26
|
...getComponentColorTokens(),
|
|
28
|
-
...getDeprecatedSemanticColorTokens(),
|
|
29
27
|
...getSemanticColorTokens(),
|
|
30
28
|
},
|
|
31
29
|
animation,
|
package/themes/types.js.flow
CHANGED
|
@@ -94,8 +94,6 @@ export type ColorTokensT = {
|
|
|
94
94
|
mono1000: string,
|
|
95
95
|
|
|
96
96
|
// Rating Palette
|
|
97
|
-
rating200: string,
|
|
98
|
-
rating400: string,
|
|
99
97
|
ratingInactiveFill: string,
|
|
100
98
|
ratingStroke: string,
|
|
101
99
|
};
|
|
@@ -202,14 +200,6 @@ export type ComponentColorTokensT = {|
|
|
|
202
200
|
buttonTertiaryDisabledActiveText: string,
|
|
203
201
|
buttonTertiarySpinnerForeground: string,
|
|
204
202
|
buttonTertiarySpinnerBackground: string,
|
|
205
|
-
buttonMinimalFill: string,
|
|
206
|
-
buttonMinimalText: string,
|
|
207
|
-
buttonMinimalHover: string,
|
|
208
|
-
buttonMinimalActive: string,
|
|
209
|
-
buttonMinimalSelectedText: string,
|
|
210
|
-
buttonMinimalSelectedFill: string,
|
|
211
|
-
buttonMinimalSpinnerForeground: string,
|
|
212
|
-
buttonMinimalSpinnerBackground: string,
|
|
213
203
|
buttonDisabledFill: string,
|
|
214
204
|
buttonDisabledText: string,
|
|
215
205
|
buttonDisabledActiveFill: string,
|
|
@@ -222,12 +212,6 @@ export type ComponentColorTokensT = {|
|
|
|
222
212
|
breadcrumbsSeparatorFill: string,
|
|
223
213
|
|
|
224
214
|
// Datepicker
|
|
225
|
-
datepickerBackground: string,
|
|
226
|
-
datepickerDayFont: string,
|
|
227
|
-
datepickerDayFontDisabled: string,
|
|
228
|
-
datepickerDayPseudoSelected: string,
|
|
229
|
-
datepickerDayPseudoHighlighted: string,
|
|
230
|
-
|
|
231
215
|
calendarBackground: string,
|
|
232
216
|
calendarForeground: string,
|
|
233
217
|
calendarForegroundDisabled: string,
|
|
@@ -235,7 +219,6 @@ export type ComponentColorTokensT = {|
|
|
|
235
219
|
calendarHeaderForeground: string,
|
|
236
220
|
calendarHeaderBackgroundActive: string,
|
|
237
221
|
calendarHeaderForegroundDisabled: string,
|
|
238
|
-
calendarDayBackgroundPseudoSelected: string,
|
|
239
222
|
calendarDayForegroundPseudoSelected: string,
|
|
240
223
|
calendarDayBackgroundPseudoSelectedHighlighted: string,
|
|
241
224
|
calendarDayForegroundPseudoSelectedHighlighted: string,
|
|
@@ -264,15 +247,12 @@ export type ComponentColorTokensT = {|
|
|
|
264
247
|
// Lists
|
|
265
248
|
listHeaderFill: string,
|
|
266
249
|
listBodyFill: string,
|
|
267
|
-
listIconFill: string,
|
|
268
|
-
listBorder: string,
|
|
269
250
|
|
|
270
251
|
// ProgressSteps
|
|
271
252
|
progressStepsCompletedText: string,
|
|
272
253
|
progressStepsCompletedFill: string,
|
|
273
254
|
progressStepsActiveText: string,
|
|
274
255
|
progressStepsActiveFill: string,
|
|
275
|
-
progressStepsIconActiveFill: string,
|
|
276
256
|
|
|
277
257
|
// Toggle
|
|
278
258
|
toggleFill: string,
|
|
@@ -305,24 +285,13 @@ export type ComponentColorTokensT = {|
|
|
|
305
285
|
sliderTrackFill: string,
|
|
306
286
|
sliderTrackFillHover: string,
|
|
307
287
|
sliderTrackFillActive: string,
|
|
308
|
-
sliderTrackFillSelected: string,
|
|
309
|
-
sliderTrackFillSelectedHover: string,
|
|
310
|
-
sliderTrackFillSelectedActive: string,
|
|
311
288
|
sliderTrackFillDisabled: string,
|
|
312
289
|
sliderHandleFill: string,
|
|
313
|
-
sliderHandleFillHover: string,
|
|
314
|
-
sliderHandleFillActive: string,
|
|
315
|
-
sliderHandleFillSelected: string,
|
|
316
|
-
sliderHandleFillSelectedHover: string,
|
|
317
|
-
sliderHandleFillSelectedActive: string,
|
|
318
290
|
sliderHandleFillDisabled: string,
|
|
319
291
|
sliderHandleInnerFill: string,
|
|
320
292
|
sliderHandleInnerFillDisabled: string,
|
|
321
293
|
sliderHandleInnerFillSelectedHover: string,
|
|
322
294
|
sliderHandleInnerFillSelectedActive: string,
|
|
323
|
-
sliderBorder: string,
|
|
324
|
-
sliderBorderHover: string,
|
|
325
|
-
sliderBorderDisabled: string,
|
|
326
295
|
|
|
327
296
|
// Input
|
|
328
297
|
inputBorder: string,
|
|
@@ -341,8 +310,6 @@ export type ComponentColorTokensT = {|
|
|
|
341
310
|
inputPlaceholderDisabled: string,
|
|
342
311
|
|
|
343
312
|
// Notification
|
|
344
|
-
notificationPrimaryBackground: string,
|
|
345
|
-
notificationPrimaryText: string,
|
|
346
313
|
notificationInfoBackground: string,
|
|
347
314
|
notificationInfoText: string,
|
|
348
315
|
notificationPositiveBackground: string,
|
|
@@ -365,12 +332,6 @@ export type ComponentColorTokensT = {|
|
|
|
365
332
|
modalCloseColorHover: string,
|
|
366
333
|
modalCloseColorFocus: string,
|
|
367
334
|
|
|
368
|
-
// Pagination
|
|
369
|
-
paginationTriangleDown: string,
|
|
370
|
-
|
|
371
|
-
// Header navigation
|
|
372
|
-
headerNavigationFill: string,
|
|
373
|
-
|
|
374
335
|
// Tab
|
|
375
336
|
tabBarFill: string,
|
|
376
337
|
tabColor: string,
|
|
@@ -385,13 +346,11 @@ export type ComponentColorTokensT = {|
|
|
|
385
346
|
tagLightRampUnit: string,
|
|
386
347
|
tagLightHoverRampUnit: string,
|
|
387
348
|
tagLightActiveRampUnit: string,
|
|
388
|
-
tagLightDisabledRampUnit: string,
|
|
389
349
|
tagLightFontRampUnit: string,
|
|
390
350
|
tagLightFontHoverRampUnit: string,
|
|
391
351
|
tagOutlinedRampUnit: string,
|
|
392
352
|
tagOutlinedHoverRampUnit: string,
|
|
393
353
|
tagOutlinedActiveRampUnit: string,
|
|
394
|
-
tagOutlinedDisabledRampUnit: string,
|
|
395
354
|
tagOutlinedFontRampUnit: string,
|
|
396
355
|
tagOutlinedFontHoverRampUnit: string,
|
|
397
356
|
tagFontDisabledRampUnit: string,
|
|
@@ -527,7 +486,6 @@ export type ComponentColorTokensT = {|
|
|
|
527
486
|
|
|
528
487
|
// Toast
|
|
529
488
|
toastText: string,
|
|
530
|
-
toastPrimaryBackground: string,
|
|
531
489
|
toastPrimaryText: string,
|
|
532
490
|
toastInfoBackground: string,
|
|
533
491
|
toastInfoText: string,
|
|
@@ -549,32 +507,6 @@ export type ComponentColorTokensT = {|
|
|
|
549
507
|
tooltipText: string,
|
|
550
508
|
|};
|
|
551
509
|
|
|
552
|
-
export type DeprecatedSemanticColorTokensT = {|
|
|
553
|
-
// Font Color
|
|
554
|
-
colorPrimary: string,
|
|
555
|
-
colorSecondary: string,
|
|
556
|
-
|
|
557
|
-
// Background
|
|
558
|
-
background: string,
|
|
559
|
-
backgroundAlt: string,
|
|
560
|
-
backgroundInv: string,
|
|
561
|
-
|
|
562
|
-
// Foreground
|
|
563
|
-
foreground: string,
|
|
564
|
-
foregroundAlt: string,
|
|
565
|
-
foregroundInv: string,
|
|
566
|
-
|
|
567
|
-
// Borders
|
|
568
|
-
border: string,
|
|
569
|
-
borderAlt: string,
|
|
570
|
-
borderFocus: string,
|
|
571
|
-
borderError: string,
|
|
572
|
-
|
|
573
|
-
// Shadow
|
|
574
|
-
shadowFocus: string,
|
|
575
|
-
shadowError: string,
|
|
576
|
-
|};
|
|
577
|
-
|
|
578
510
|
export type FontTokensT = {|
|
|
579
511
|
primaryFontFamily: string,
|
|
580
512
|
|};
|
package/timepicker/timepicker.js
CHANGED
|
@@ -390,14 +390,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
390
390
|
}, selectProps.overrides);
|
|
391
391
|
var value = this.props.value && adapter.isValid(this.props.value) ? this.buildSelectedOption(this.props.value, this.props.format) : this.state.value;
|
|
392
392
|
return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
|
|
393
|
-
var ariaLabel;
|
|
394
|
-
|
|
395
|
-
if (locale.datepicker.timePickerAriaLabel) {
|
|
396
|
-
ariaLabel = locale.datepicker.timePickerAriaLabel;
|
|
397
|
-
} else {
|
|
398
|
-
ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
|
|
399
|
-
}
|
|
400
|
-
|
|
393
|
+
var ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
|
|
401
394
|
return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
|
|
402
395
|
"aria-label": ariaLabel,
|
|
403
396
|
disabled: _this2.props.disabled,
|
|
@@ -289,16 +289,10 @@ class TimePicker<T = Date> extends React.Component<TimePickerPropsT<T>, TimePick
|
|
|
289
289
|
return (
|
|
290
290
|
<LocaleContext.Consumer>
|
|
291
291
|
{(locale) => {
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
} else {
|
|
297
|
-
ariaLabel =
|
|
298
|
-
format === '12'
|
|
299
|
-
? locale.datepicker.timePickerAriaLabel12Hour
|
|
300
|
-
: locale.datepicker.timePickerAriaLabel24Hour;
|
|
301
|
-
}
|
|
292
|
+
const ariaLabel =
|
|
293
|
+
format === '12'
|
|
294
|
+
? locale.datepicker.timePickerAriaLabel12Hour
|
|
295
|
+
: locale.datepicker.timePickerAriaLabel24Hour;
|
|
302
296
|
|
|
303
297
|
return (
|
|
304
298
|
<OverriddenSelect
|
package/typography/index.d.ts
CHANGED
|
@@ -37,26 +37,3 @@ export const MonoParagraphLarge: React.FC<BlockProps>;
|
|
|
37
37
|
export const MonoParagraphMedium: React.FC<BlockProps>;
|
|
38
38
|
export const MonoParagraphSmall: React.FC<BlockProps>;
|
|
39
39
|
export const MonoParagraphXSmall: React.FC<BlockProps>;
|
|
40
|
-
|
|
41
|
-
// TODO(v11): remove
|
|
42
|
-
export const Caption1: React.FC<BlockProps>;
|
|
43
|
-
export const Caption2: React.FC<BlockProps>;
|
|
44
|
-
export const Display: React.FC<BlockProps>;
|
|
45
|
-
export const Display1: React.FC<BlockProps>;
|
|
46
|
-
export const Display2: React.FC<BlockProps>;
|
|
47
|
-
export const Display3: React.FC<BlockProps>;
|
|
48
|
-
export const Display4: React.FC<BlockProps>;
|
|
49
|
-
export const H1: React.FC<BlockProps>;
|
|
50
|
-
export const H2: React.FC<BlockProps>;
|
|
51
|
-
export const H3: React.FC<BlockProps>;
|
|
52
|
-
export const H4: React.FC<BlockProps>;
|
|
53
|
-
export const H5: React.FC<BlockProps>;
|
|
54
|
-
export const H6: React.FC<BlockProps>;
|
|
55
|
-
export const Label1: React.FC<BlockProps>;
|
|
56
|
-
export const Label2: React.FC<BlockProps>;
|
|
57
|
-
export const Label3: React.FC<BlockProps>;
|
|
58
|
-
export const Label4: React.FC<BlockProps>;
|
|
59
|
-
export const Paragraph1: React.FC<BlockProps>;
|
|
60
|
-
export const Paragraph2: React.FC<BlockProps>;
|
|
61
|
-
export const Paragraph3: React.FC<BlockProps>;
|
|
62
|
-
export const Paragraph4: React.FC<BlockProps>;
|
package/typography/index.js
CHANGED
|
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.MonoParagraphXSmall = exports.MonoParagraphSmall = exports.MonoParagraphMedium = exports.MonoParagraphLarge = exports.MonoLabelXSmall = exports.MonoLabelSmall = exports.MonoLabelMedium = exports.MonoLabelLarge = exports.MonoHeadingXSmall = exports.MonoHeadingSmall = exports.MonoHeadingMedium = exports.MonoHeadingLarge = exports.MonoHeadingXLarge = exports.MonoHeadingXXLarge = exports.MonoDisplayXSmall = exports.MonoDisplaySmall = exports.MonoDisplayMedium = exports.MonoDisplayLarge = exports.ParagraphXSmall = exports.ParagraphSmall = exports.ParagraphMedium = exports.ParagraphLarge = exports.LabelXSmall = exports.LabelSmall = exports.LabelMedium = exports.LabelLarge = exports.HeadingXSmall = exports.HeadingSmall = exports.HeadingMedium = exports.HeadingLarge = exports.HeadingXLarge = exports.HeadingXXLarge = exports.DisplayXSmall = exports.DisplaySmall = exports.DisplayMedium = exports.DisplayLarge = void 0;
|
|
9
9
|
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
@@ -578,59 +578,4 @@ var MonoParagraphXSmall = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
578
578
|
);
|
|
579
579
|
});
|
|
580
580
|
exports.MonoParagraphXSmall = MonoParagraphXSmall;
|
|
581
|
-
MonoParagraphXSmall.displayName = 'MonoParagraphXSmall';
|
|
582
|
-
// Aliases for backwards compatibility
|
|
583
|
-
|
|
584
|
-
var Display = DisplayLarge;
|
|
585
|
-
exports.Display = Display;
|
|
586
|
-
var Display1 = DisplayLarge;
|
|
587
|
-
exports.Display1 = Display1;
|
|
588
|
-
var Display2 = DisplayMedium;
|
|
589
|
-
exports.Display2 = Display2;
|
|
590
|
-
var Display3 = DisplaySmall;
|
|
591
|
-
exports.Display3 = Display3;
|
|
592
|
-
var Display4 = DisplayXSmall;
|
|
593
|
-
exports.Display4 = Display4;
|
|
594
|
-
var H1 = HeadingXXLarge;
|
|
595
|
-
exports.H1 = H1;
|
|
596
|
-
var H2 = HeadingXLarge;
|
|
597
|
-
exports.H2 = H2;
|
|
598
|
-
var H3 = HeadingLarge;
|
|
599
|
-
exports.H3 = H3;
|
|
600
|
-
var H4 = HeadingMedium;
|
|
601
|
-
exports.H4 = H4;
|
|
602
|
-
var H5 = HeadingSmall;
|
|
603
|
-
exports.H5 = H5;
|
|
604
|
-
var H6 = HeadingXSmall;
|
|
605
|
-
exports.H6 = H6;
|
|
606
|
-
var Paragraph1 = ParagraphLarge;
|
|
607
|
-
exports.Paragraph1 = Paragraph1;
|
|
608
|
-
var Paragraph2 = ParagraphMedium;
|
|
609
|
-
exports.Paragraph2 = Paragraph2;
|
|
610
|
-
var Paragraph3 = ParagraphSmall;
|
|
611
|
-
exports.Paragraph3 = Paragraph3;
|
|
612
|
-
var Paragraph4 = ParagraphXSmall;
|
|
613
|
-
exports.Paragraph4 = Paragraph4;
|
|
614
|
-
var Label1 = LabelLarge;
|
|
615
|
-
exports.Label1 = Label1;
|
|
616
|
-
var Label2 = LabelMedium;
|
|
617
|
-
exports.Label2 = Label2;
|
|
618
|
-
var Label3 = LabelSmall;
|
|
619
|
-
exports.Label3 = Label3;
|
|
620
|
-
var Label4 = LabelXSmall;
|
|
621
|
-
exports.Label4 = Label4;
|
|
622
|
-
var Caption1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
623
|
-
return /*#__PURE__*/React.createElement(Paragraph4, _extends({}, props, {
|
|
624
|
-
color: props.color || 'contentSecondary',
|
|
625
|
-
ref: ref
|
|
626
|
-
}));
|
|
627
|
-
});
|
|
628
|
-
exports.Caption1 = Caption1;
|
|
629
|
-
Caption1.displayName = 'Caption1';
|
|
630
|
-
var Caption2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
631
|
-
return /*#__PURE__*/React.createElement(Label4, _extends({}, props, {
|
|
632
|
-
color: props.color || 'contentSecondary'
|
|
633
|
-
}));
|
|
634
|
-
});
|
|
635
|
-
exports.Caption2 = Caption2;
|
|
636
|
-
Caption2.displayName = 'Caption2';
|
|
581
|
+
MonoParagraphXSmall.displayName = 'MonoParagraphXSmall';
|
package/typography/index.js.flow
CHANGED
|
@@ -462,37 +462,6 @@ export const MonoParagraphXSmall = React.forwardRef<BlockPropsT, HTMLElement>((p
|
|
|
462
462
|
));
|
|
463
463
|
MonoParagraphXSmall.displayName = 'MonoParagraphXSmall';
|
|
464
464
|
|
|
465
|
-
// TODO(v11): remove
|
|
466
|
-
// Aliases for backwards compatibility
|
|
467
|
-
export const Display = DisplayLarge;
|
|
468
|
-
export const Display1 = DisplayLarge;
|
|
469
|
-
export const Display2 = DisplayMedium;
|
|
470
|
-
export const Display3 = DisplaySmall;
|
|
471
|
-
export const Display4 = DisplayXSmall;
|
|
472
|
-
export const H1 = HeadingXXLarge;
|
|
473
|
-
export const H2 = HeadingXLarge;
|
|
474
|
-
export const H3 = HeadingLarge;
|
|
475
|
-
export const H4 = HeadingMedium;
|
|
476
|
-
export const H5 = HeadingSmall;
|
|
477
|
-
export const H6 = HeadingXSmall;
|
|
478
|
-
export const Paragraph1 = ParagraphLarge;
|
|
479
|
-
export const Paragraph2 = ParagraphMedium;
|
|
480
|
-
export const Paragraph3 = ParagraphSmall;
|
|
481
|
-
export const Paragraph4 = ParagraphXSmall;
|
|
482
|
-
export const Label1 = LabelLarge;
|
|
483
|
-
export const Label2 = LabelMedium;
|
|
484
|
-
export const Label3 = LabelSmall;
|
|
485
|
-
export const Label4 = LabelXSmall;
|
|
486
|
-
|
|
487
|
-
export const Caption1 = React.forwardRef<BlockPropsT, HTMLElement>((props, ref) => (
|
|
488
|
-
<Paragraph4 {...props} color={props.color || 'contentSecondary'} ref={ref} />
|
|
489
|
-
));
|
|
490
|
-
Caption1.displayName = 'Caption1';
|
|
491
|
-
export const Caption2 = React.forwardRef<BlockPropsT, HTMLElement>((props, ref) => (
|
|
492
|
-
<Label4 {...props} color={props.color || 'contentSecondary'} />
|
|
493
|
-
));
|
|
494
|
-
Caption2.displayName = 'Caption2';
|
|
495
|
-
|
|
496
465
|
declare var __DEV__: boolean;
|
|
497
466
|
declare var __NODE__: boolean;
|
|
498
467
|
declare var __BROWSER__: boolean;
|
package/es/spinner/spinner.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Copyright (c) Uber Technologies, Inc.
|
|
7
|
-
|
|
8
|
-
This source code is licensed under the MIT license found in the
|
|
9
|
-
LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/
|
|
11
|
-
import * as React from 'react';
|
|
12
|
-
import { mergeOverrides, getOverrides } from '../helpers/overrides.js';
|
|
13
|
-
import Icon from '../icon/icon.js';
|
|
14
|
-
import { Svg as StyledSvg, StyledActivePath, StyledTrackPath } from './styled-components.js';
|
|
15
|
-
|
|
16
|
-
class Spinner extends React.Component {
|
|
17
|
-
componentDidMount() {
|
|
18
|
-
// TODO(v11): remove warning when switching default Spinner
|
|
19
|
-
if (process.env.NODE_ENV !== "production") {
|
|
20
|
-
if (!this.props.$silenceV11DeprecationWarning) {
|
|
21
|
-
console.warn(`❖ [baseui] Please consider using "StyledSpinnerNext" instead of "Spinner". ` + `In v11, "StyledSpinnerNext" will become the default "Spinner"` + ` and the current SVG based implementation will be deprecated.`);
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
render() {
|
|
27
|
-
const {
|
|
28
|
-
overrides = {}
|
|
29
|
-
} = this.props;
|
|
30
|
-
const mergedOverrides = mergeOverrides({
|
|
31
|
-
Svg: StyledSvg
|
|
32
|
-
}, overrides);
|
|
33
|
-
const [TrackPath, trackPathProps] = getOverrides(overrides.TrackPath, StyledTrackPath);
|
|
34
|
-
const [ActivePath, activePathProps] = getOverrides(overrides.ActivePath, StyledActivePath);
|
|
35
|
-
return (
|
|
36
|
-
/*#__PURE__*/
|
|
37
|
-
// $FlowExpectedError[cannot-spread-inexact]
|
|
38
|
-
React.createElement(Icon, _extends({
|
|
39
|
-
"aria-label": 'Loading',
|
|
40
|
-
"data-baseweb": "spinner",
|
|
41
|
-
title: "Spinner",
|
|
42
|
-
viewBox: "3 3 18 18"
|
|
43
|
-
}, this.props, {
|
|
44
|
-
overrides: mergedOverrides
|
|
45
|
-
}), /*#__PURE__*/React.createElement(TrackPath, _extends({
|
|
46
|
-
fillRule: "evenodd",
|
|
47
|
-
clipRule: "evenodd",
|
|
48
|
-
d: "M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z",
|
|
49
|
-
$color: this.props.color
|
|
50
|
-
}, trackPathProps)), /*#__PURE__*/React.createElement(ActivePath, _extends({
|
|
51
|
-
fillRule: "evenodd",
|
|
52
|
-
clipRule: "evenodd",
|
|
53
|
-
d: "M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z",
|
|
54
|
-
$color: this.props.color
|
|
55
|
-
}, activePathProps)))
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
_defineProperty(Spinner, "defaultProps", {
|
|
62
|
-
color: '',
|
|
63
|
-
size: 44,
|
|
64
|
-
title: 'Loading',
|
|
65
|
-
overrides: {}
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
export default Spinner;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright (c) Uber Technologies, Inc.
|
|
3
|
-
|
|
4
|
-
This source code is licensed under the MIT license found in the
|
|
5
|
-
LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
import colorTokens from './color-tokens.js';
|
|
8
|
-
|
|
9
|
-
/* ---- DEPRECATED ---- */
|
|
10
|
-
export default ((themePrimitives = colorTokens) => ({
|
|
11
|
-
// TODO(#2318) Remove Legacy Semantic Colors values in the next v11 major
|
|
12
|
-
// since it's not used in the component specific tokens
|
|
13
|
-
// and we ship semantic tokens separately
|
|
14
|
-
|
|
15
|
-
/* ---- Legacy Semantic Colors ---- */
|
|
16
|
-
// Font Color
|
|
17
|
-
colorPrimary: themePrimitives.mono100,
|
|
18
|
-
colorSecondary: themePrimitives.mono200,
|
|
19
|
-
// Background
|
|
20
|
-
background: themePrimitives.mono1000,
|
|
21
|
-
backgroundAlt: themePrimitives.mono700,
|
|
22
|
-
backgroundInv: themePrimitives.mono100,
|
|
23
|
-
// Foreground
|
|
24
|
-
foreground: themePrimitives.mono100,
|
|
25
|
-
foregroundAlt: themePrimitives.mono300,
|
|
26
|
-
foregroundInv: themePrimitives.mono1000,
|
|
27
|
-
// Borders
|
|
28
|
-
border: themePrimitives.mono600,
|
|
29
|
-
borderAlt: themePrimitives.mono700,
|
|
30
|
-
borderFocus: themePrimitives.primary,
|
|
31
|
-
borderError: themePrimitives.negative,
|
|
32
|
-
// Shadow
|
|
33
|
-
shadowFocus: 'rgba(39, 110, 241, 0.32)',
|
|
34
|
-
shadowError: 'rgba(229, 73, 55, 0.32)'
|
|
35
|
-
}));
|