indicator-ui 0.1.123 → 0.1.124
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/dist/index.css +1768 -888
- package/dist/index.css.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/scss/styles/mixins/index.scss +0 -1
- package/dist/scss/styles/mixins/utils.scss +1 -3
- package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss +1 -2
- package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss +15 -33
- package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss +15 -33
- package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss +27 -41
- package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss +20 -32
- package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss +38 -62
- package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss +37 -63
- package/dist/scss/ui/Buttons/styles/mixins/properties/small.scss +7 -0
- package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss +39 -81
- package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss +39 -81
- package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss +16 -78
- package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-gray.scss +16 -34
- package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss +16 -78
- package/dist/scss/ui/Buttons/styles/mixins/properties/utils/button-color.scss +35 -0
- package/dist/scss/ui/Buttons/styles/mixins/properties/warning-link-color.scss +14 -35
- package/dist/scss/ui/Buttons/styles/mixins/properties/warning-primary.scss +21 -19
- package/dist/scss/ui/Buttons/styles/mixins/properties/warning-secondary-color.scss +37 -39
- package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeDefault.scss +24 -0
- package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeDisabled.scss +26 -0
- package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/dateTimeError.scss +26 -0
- package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/states/index.scss +3 -0
- package/dist/scss/ui/InputFields/DateTimeFieldMask/styles/mixins/utils/dateRangeFieldColor.scss +57 -0
- package/dist/scss/ui/MicroButton/styles/mixins/properties/blue-light.scss +15 -11
- package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss +33 -10
- package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss +33 -10
- package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss +15 -13
- package/dist/scss/ui/MicroButton/styles/mixins/properties/dark.scss +22 -9
- package/dist/scss/ui/MicroButton/styles/mixins/properties/gray-fill.scss +15 -13
- package/dist/scss/ui/MicroButton/styles/mixins/properties/gray.scss +15 -13
- package/dist/scss/ui/MicroButton/styles/mixins/properties/light.scss +33 -10
- package/dist/scss/ui/MicroButton/styles/mixins/properties/red-fill.scss +15 -13
- package/dist/scss/ui/MicroButton/styles/mixins/properties/red-hover.scss +15 -13
- package/dist/scss/ui/MicroButton/styles/mixins/properties/utils/micro-button-color.scss +20 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldDefault.scss +24 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldDisabled.scss +26 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldError.scss +26 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldErrorFocus.scss +26 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/formFieldFocus.scss +26 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/states/index.scss +5 -0
- package/dist/scss/ui/formFields/FormField/styles/mixins/utils/formFieldColor.scss +59 -0
- package/dist/scss/ui/formFields/mixins/index.scss +1 -0
- package/dist/scss/ui/formFields/mixins/input-color.scss +71 -0
- package/dist/ts/src/test/App.d.ts +1 -1
- package/dist/ts/src/test/layout/PageLayout.d.ts +1 -1
- package/dist/ts/src/test/pages/BreadcrumbsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/ButtonsPage/ButtonsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/CascadeSelectorPage.d.ts +1 -1
- package/dist/ts/src/test/pages/CheckboxMarkPage.d.ts +1 -1
- package/dist/ts/src/test/pages/CheckboxPage.d.ts +1 -1
- package/dist/ts/src/test/pages/DateTimeFieldMaskPage.d.ts +1 -1
- package/dist/ts/src/test/pages/DateTimeFieldsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/DateTimePickerPage.d.ts +1 -1
- package/dist/ts/src/test/pages/DropdownItemPage.d.ts +1 -1
- package/dist/ts/src/test/pages/DropdownV2Page.d.ts +1 -1
- package/dist/ts/src/test/pages/FieldsPage/FieldsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/FormBuilderPage.d.ts +1 -1
- package/dist/ts/src/test/pages/FormPage.d.ts +1 -1
- package/dist/ts/src/test/pages/HomePage.d.ts +1 -1
- package/dist/ts/src/test/pages/LoadingIndicatorPage.d.ts +1 -1
- package/dist/ts/src/test/pages/MediaPlayerPage.d.ts +1 -1
- package/dist/ts/src/test/pages/MicroButtonsPage/MicroButtonsPage.d.ts +1 -0
- package/dist/ts/src/test/pages/ModalsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/PaginationPage.d.ts +1 -1
- package/dist/ts/src/test/pages/SelectFieldPage.d.ts +1 -1
- package/dist/ts/src/test/pages/SlideTransitionPage.d.ts +1 -1
- package/dist/ts/src/test/pages/TabFramePage.d.ts +1 -1
- package/dist/ts/src/test/pages/TagPage.d.ts +1 -1
- package/dist/ts/src/test/pages/TestPage.d.ts +1 -1
- package/dist/ts/src/test/pages/ToggleBasePage.d.ts +1 -1
- package/dist/ts/src/test/pages/TogglePage.d.ts +1 -1
- package/dist/ts/src/test/pages/TooltipTage.d.ts +1 -1
- package/dist/ts/src/test/pages/UiAnimationsPage.d.ts +1 -1
- package/dist/ts/src/test/pages/UseDragPage.d.ts +1 -1
- package/dist/ts/src/test/pages/UseSmartPositionPage.d.ts +1 -1
- package/dist/ts/src/test/pages/UseSmartScrollPage.d.ts +1 -1
- package/dist/ts/src/test/pages/UserPickPage.d.ts +1 -1
- package/dist/ts/src/test/pages/index.d.ts +1 -1
- package/dist/ts/src/ui/Breadcrumbs/ui/BreadcrumbButton.d.ts +1 -1
- package/dist/ts/src/ui/Breadcrumbs/ui/Breadcrumbs.d.ts +1 -1
- package/dist/ts/src/ui/Breadcrumbs/ui/Divider.d.ts +1 -1
- package/dist/ts/src/ui/Buttons/types/ButtonTypes.d.ts +1 -1
- package/dist/ts/src/ui/Carousel/ui/Carousel.d.ts +1 -1
- package/dist/ts/src/ui/CascadeSelector/ui/CascadeSelector.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/components/CalendarButton.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/components/CalendarDay.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/components/CalendarMonth.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/components/CalendarYear.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/components/TimePickerTag.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/parts/Footer.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/parts/Header.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/parts/Main.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/DatePicker.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/MonthPicker.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/TimePicker.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/TimeSuggestions.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/YearPicker.d.ts +1 -1
- package/dist/ts/src/ui/DateTimePicker/ui/pickers/YearSwitcher.d.ts +1 -1
- package/dist/ts/src/ui/DropdownV2/ui/DropdownItemV2.d.ts +1 -1
- package/dist/ts/src/ui/DropdownV2/ui/components/Check.d.ts +1 -1
- package/dist/ts/src/ui/DropdownV2/ui/components/Info.d.ts +1 -1
- package/dist/ts/src/ui/FormBuilder/lib/formBuilder.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeField/ui/DateField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeField/ui/DateFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeField/ui/DateTimeField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeField/ui/TimeField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeField/ui/TimeFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeFieldMask/ui/DateTimeFieldMask.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeRangeField/ui/DateRangeField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeRangeField/ui/DateTimeRangeField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/DateTimeRangeField/ui/TimeRangeField.d.ts +1 -1
- package/dist/ts/src/ui/InputFields/TextareaField/ui/TextareaField.d.ts +1 -1
- package/dist/ts/src/ui/Loaders/ui/LoadingIndicator.d.ts +1 -1
- package/dist/ts/src/ui/MediaViewer/ui/components/ControlBar.d.ts +1 -1
- package/dist/ts/src/ui/MediaViewer/ui/components/VideoProgressBar.d.ts +1 -1
- package/dist/ts/src/ui/PaginationBar/ui/PageSwitcher.d.ts +1 -1
- package/dist/ts/src/ui/PaginationBar/ui/PaginationBar.d.ts +1 -1
- package/dist/ts/src/ui/PlayButton/ui/PlayButton.d.ts +1 -1
- package/dist/ts/src/ui/SlideTransition/ui/SlideTransition.d.ts +1 -1
- package/dist/ts/src/ui/TabButtons/ui/TabButtons.d.ts +1 -1
- package/dist/ts/src/ui/TabFrame/ui/TabFrame.d.ts +1 -1
- package/dist/ts/src/ui/Tag/ui/FilterTag.d.ts +1 -1
- package/dist/ts/src/ui/Tag/ui/Tag.d.ts +1 -1
- package/dist/ts/src/ui/Tag/ui/TagCheckbox.d.ts +1 -1
- package/dist/ts/src/ui/Tag/ui/TagCount.d.ts +1 -1
- package/dist/ts/src/ui/Toggle/ui/Toggle.d.ts +1 -1
- package/dist/ts/src/ui/Tooltip/ui/Tooltip.d.ts +1 -1
- package/dist/ts/src/ui/UserPick/ui/UserPick.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormDateField/ui/FormDateField.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormDateRangeField/ui/FormDateRangeField.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormDateRangeField/ui/FormDateRangeFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormDateRangeField/ui/InputInnerButton.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormDateRangeField/ui/Mask.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useFormPaginatedSelectField.d.ts +63 -57
- package/dist/ts/src/ui/formFields/FormPaginatedSelectField/hooks/useSelectFieldState.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormPaginatedSelectField/lib/index.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormPaginatedSelectField/ui/FormPaginatedSelectFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormRadioField/ui/FieldItem.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormRadioField/ui/FormRadioField.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormSelectField/ui/FormSelectFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/formFields/FormTextareaField/ui/FormTextareaFieldBase.d.ts +1 -1
- package/dist/ts/src/ui/formFields/extends/ui/DropdownArrow.d.ts +1 -1
- package/dist/ts/src/ui/formFields/extends/ui/InputInnerButton.d.ts +1 -1
- package/docs/CSSVariables/CSSThemeCustomize.md +112 -135
- package/package.json +1 -1
- package/dist/scss/styles/mixins/formFieldMixins.scss +0 -55
- package/dist/ts/src/test/pages/MicroButtonsPage.d.ts +0 -1
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
@use '../../../../../styles' as *;
|
|
2
|
+
@use './utils/micro-button-color' as *;
|
|
2
3
|
|
|
3
4
|
@mixin red-fill() {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
@include micro-button-color(
|
|
6
|
+
$prefix: 'red-fill',
|
|
7
|
+
$background-color: var(--base-white),
|
|
8
|
+
$border-color: var(--error-300),
|
|
9
|
+
$icon-color: var(--error-500)
|
|
10
|
+
);
|
|
7
11
|
|
|
8
|
-
@include
|
|
12
|
+
@include hover {
|
|
13
|
+
&:active,
|
|
9
14
|
&:not(&:disabled):hover {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
&:active {
|
|
17
|
-
background: var(--error-50);
|
|
18
|
-
@include modify-svg($stroke: var(--error-600));
|
|
15
|
+
@include micro-button-color(
|
|
16
|
+
$prefix: 'red-fill-hover',
|
|
17
|
+
$background-color: var(--error-50),
|
|
18
|
+
$border-color: var(--error-300),
|
|
19
|
+
$icon-color: var(--error-600)
|
|
20
|
+
);
|
|
19
21
|
}
|
|
20
22
|
}
|
|
21
23
|
}
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
@use '../../../../../styles' as *;
|
|
2
|
+
@use './utils/micro-button-color' as *;
|
|
2
3
|
|
|
3
4
|
@mixin red-hover() {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
@include micro-button-color(
|
|
6
|
+
$prefix: 'error-hover',
|
|
7
|
+
$background-color: transparent,
|
|
8
|
+
$border-color: transparent,
|
|
9
|
+
$icon-color: var(--error-400)
|
|
10
|
+
);
|
|
7
11
|
|
|
8
|
-
@include
|
|
12
|
+
@include hover {
|
|
13
|
+
&:active,
|
|
9
14
|
&:not(&:disabled):hover {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
&:active {
|
|
17
|
-
background-color: var(--error-100);
|
|
18
|
-
@include modify-svg($stroke: var(--error-500));
|
|
15
|
+
@include micro-button-color(
|
|
16
|
+
$prefix: 'error-hover-hover',
|
|
17
|
+
$background-color: var(--error-100),
|
|
18
|
+
$border-color: transparent,
|
|
19
|
+
$icon-color: var(--error-500)
|
|
20
|
+
);
|
|
19
21
|
}
|
|
20
22
|
}
|
|
21
23
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
|
|
3
|
+
@mixin micro-button-color(
|
|
4
|
+
$prefix,
|
|
5
|
+
$background-color: null,
|
|
6
|
+
$border-color: null,
|
|
7
|
+
$icon-color: null) {
|
|
8
|
+
|
|
9
|
+
& {
|
|
10
|
+
@if ($background-color != null) {
|
|
11
|
+
background-color: var(--ui-micro-button-#{$prefix}-background-color, $background-color);
|
|
12
|
+
}
|
|
13
|
+
@if ($border-color != null) {
|
|
14
|
+
border: 1px solid var(--ui-micro-button-#{$prefix}-border-color, $border-color);
|
|
15
|
+
}
|
|
16
|
+
@if ($icon-color != null) {
|
|
17
|
+
@include modify-svg($stroke: var(--ui-micro-button-#{$prefix}-icon-color, $icon-color));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use '../utils/formFieldColor' as fieldColor;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldDefault {
|
|
5
|
+
@include fieldColor.formFieldColor(
|
|
6
|
+
$background-color: var(--base-white),
|
|
7
|
+
$border-color: var(--gray-300),
|
|
8
|
+
$text-color: var(--gray-900),
|
|
9
|
+
$icon-color: var(--gray-400),
|
|
10
|
+
$placeholder-color: var(--gray-400),
|
|
11
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
@include darkTheme {
|
|
15
|
+
@include fieldColor.formFieldColor(
|
|
16
|
+
$background-color: var(--gray-950),
|
|
17
|
+
$border-color: var(--gray-800),
|
|
18
|
+
$text-color: var(--gray-25),
|
|
19
|
+
$icon-color: var(--gray-500),
|
|
20
|
+
$placeholder-color: var(--gray-500),
|
|
21
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use '../utils/formFieldColor' as fieldColor;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldDisabled {
|
|
5
|
+
@include fieldColor.formFieldColor(
|
|
6
|
+
$prefix: 'disabled',
|
|
7
|
+
$background-color: var(--gray-50),
|
|
8
|
+
$border-color: var(--gray-300),
|
|
9
|
+
$text-color: var(--gray-500),
|
|
10
|
+
$icon-color: var(--gray-400),
|
|
11
|
+
$placeholder-color: transparent,
|
|
12
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
@include darkTheme {
|
|
16
|
+
@include fieldColor.formFieldColor(
|
|
17
|
+
$prefix: 'disabled',
|
|
18
|
+
$background-color: var(--gray-950),
|
|
19
|
+
$border-color: var(--gray-800),
|
|
20
|
+
$text-color: var(--gray-25),
|
|
21
|
+
$icon-color: var(--gray-400),
|
|
22
|
+
$placeholder-color: transparent,
|
|
23
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use '../utils/formFieldColor' as fieldColor;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldError {
|
|
5
|
+
@include fieldColor.formFieldColor(
|
|
6
|
+
$prefix: 'error',
|
|
7
|
+
$background-color: var(--ui-form-field-background-color, var(--base-white)),
|
|
8
|
+
$border-color: var(--error-300),
|
|
9
|
+
$text-color: var(--ui-form-field-text-color, var(--gray-900)),
|
|
10
|
+
$icon-color: var(--ui-form-field-icon-color, var(--gray-400)),
|
|
11
|
+
$placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-400)),
|
|
12
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
@include darkTheme {
|
|
16
|
+
@include fieldColor.formFieldColor(
|
|
17
|
+
$prefix: 'error',
|
|
18
|
+
$background-color: var(--ui-form-field-background-color, var(--gray-950)),
|
|
19
|
+
$border-color: var(--error-900),
|
|
20
|
+
$text-color: var(--ui-form-field-text-color, var(--gray-25)),
|
|
21
|
+
$icon-color: var(--ui-form-field-icon-color, var(--gray-500)),
|
|
22
|
+
$placeholder-color: var(--ui-form-field-placeholder-color, var(--gray-500)),
|
|
23
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use '../utils/formFieldColor' as fieldColor;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldErrorFocus {
|
|
5
|
+
@include fieldColor.formFieldColor(
|
|
6
|
+
$prefix: 'error-focus',
|
|
7
|
+
$background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--base-white))),
|
|
8
|
+
$border-color: var(--error-400),
|
|
9
|
+
$text-color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-900))),
|
|
10
|
+
$icon-color: var(--ui-form-field-error-icon-color, var(--ui-form-field-icon-color, var(--gray-400))),
|
|
11
|
+
$placeholder-color: var(--ui-form-field-error-placeholder-color, var(--ui-form-field-placeholder-color, var(--gray-400))),
|
|
12
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
@include darkTheme {
|
|
16
|
+
@include fieldColor.formFieldColor(
|
|
17
|
+
$prefix: 'error-focus',
|
|
18
|
+
$background-color: var(--ui-form-field-error-background-color, var(--ui-form-field-background-color, var(--gray-950))),
|
|
19
|
+
$border-color: var(--error-700),
|
|
20
|
+
$text-color: var(--ui-form-field-error-text-color, var(--ui-form-field-text-color, var(--gray-25))),
|
|
21
|
+
$icon-color: var(--ui-form-field-error-icon-color, var(--ui-form-field-icon-color, var(--gray-500))),
|
|
22
|
+
$placeholder-color: var(--ui-form-field-error-placeholder-color, var(--ui-form-field-placeholder-color, var(--gray-500))),
|
|
23
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use '../utils/formFieldColor' as fieldColor;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldFocus {
|
|
5
|
+
@include fieldColor.formFieldColor(
|
|
6
|
+
$prefix: 'focus',
|
|
7
|
+
$background-color: var(--base-white),
|
|
8
|
+
$border-color: var(--gray-400),
|
|
9
|
+
$text-color: var(--gray-900),
|
|
10
|
+
$icon-color: var(--gray-400),
|
|
11
|
+
$placeholder-color: var(--gray-400),
|
|
12
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
@include darkTheme {
|
|
16
|
+
@include fieldColor.formFieldColor(
|
|
17
|
+
$prefix: 'focus',
|
|
18
|
+
$background-color: var(--gray-950),
|
|
19
|
+
$border-color: var(--gray-700),
|
|
20
|
+
$text-color: var(--gray-25),
|
|
21
|
+
$icon-color: var(--gray-500),
|
|
22
|
+
$placeholder-color: var(--gray-500),
|
|
23
|
+
$box-shadow: 0 1px 2px 0 #1018280D,
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@use '../../../../../../styles' as *;
|
|
2
|
+
@use "@/ui/formFields/mixins" as color;
|
|
3
|
+
|
|
4
|
+
@mixin formFieldColor(
|
|
5
|
+
$prefix: null,
|
|
6
|
+
$background-color,
|
|
7
|
+
$border-color,
|
|
8
|
+
$icon-color,
|
|
9
|
+
$text-color,
|
|
10
|
+
$placeholder-color,
|
|
11
|
+
$box-shadow: null) {
|
|
12
|
+
|
|
13
|
+
$component: 'form-field';
|
|
14
|
+
|
|
15
|
+
& {
|
|
16
|
+
@include color.input-color(
|
|
17
|
+
$component: $component,
|
|
18
|
+
$prefix: $prefix,
|
|
19
|
+
$background-color: $background-color,
|
|
20
|
+
$border-color: $border-color,
|
|
21
|
+
$text-color: $text-color,
|
|
22
|
+
$box-shadow: $box-shadow,
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
.textSupport {
|
|
26
|
+
@include color.input-color(
|
|
27
|
+
$component: $component,
|
|
28
|
+
$prefix: $prefix,
|
|
29
|
+
$text-color: $text-color,
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.inputField {
|
|
34
|
+
@include color.input-color(
|
|
35
|
+
$component: $component,
|
|
36
|
+
$prefix: $prefix,
|
|
37
|
+
$background-color: $background-color,
|
|
38
|
+
$text-color: $text-color,
|
|
39
|
+
$autofill: true
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
&::placeholder, &.placeholder {
|
|
43
|
+
@include color.input-color(
|
|
44
|
+
$component: $component,
|
|
45
|
+
$prefix: $prefix,
|
|
46
|
+
$placeholder-color: $placeholder-color,
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.icon {
|
|
52
|
+
@include color.input-color(
|
|
53
|
+
$component: $component,
|
|
54
|
+
$prefix: $prefix,
|
|
55
|
+
$icon-color: $icon-color,
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward "input-color";
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@use '../../../styles' as *;
|
|
2
|
+
|
|
3
|
+
@mixin input-color(
|
|
4
|
+
$component,
|
|
5
|
+
$prefix: null,
|
|
6
|
+
$background-color: null,
|
|
7
|
+
$border-color: null,
|
|
8
|
+
$icon-color: null,
|
|
9
|
+
$text-color: null,
|
|
10
|
+
$placeholder-color: null,
|
|
11
|
+
$box-shadow: null,
|
|
12
|
+
$autofill: false,
|
|
13
|
+
) {
|
|
14
|
+
|
|
15
|
+
$css-prefix: '';
|
|
16
|
+
@if ($prefix != null) {
|
|
17
|
+
$css-prefix: #{$prefix}-;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
& {
|
|
21
|
+
@if ($background-color != null) {
|
|
22
|
+
background-color: var(--ui-#{$component}-#{$css-prefix}background-color, $background-color);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@if ($border-color != null) {
|
|
26
|
+
border: 1px solid var(--ui-#{$component}-#{$css-prefix}border-color, $border-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@if ($box-shadow != null) {
|
|
30
|
+
box-shadow: var(--ui-#{$component}-#{$css-prefix}box-shadow, $box-shadow);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@if ($text-color != null) {
|
|
34
|
+
caret: $text-color;
|
|
35
|
+
@include fnt-flex($color: var(--ui-#{$component}-#{$css-prefix}text-color, $text-color));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@if ($placeholder-color != null) {
|
|
39
|
+
@include fnt-flex($color: var(--ui-#{$component}-#{$css-prefix}placeholder-color, $placeholder-color));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@if ($icon-color != null) {
|
|
43
|
+
@include modify-svg($stroke: var(--ui-#{$component}-#{$css-prefix}icon-color, $icon-color));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@if ($autofill) {
|
|
47
|
+
&:-webkit-autofill,
|
|
48
|
+
&:-webkit-autofill:hover,
|
|
49
|
+
&:-webkit-autofill:active {
|
|
50
|
+
transition: none;
|
|
51
|
+
@if ($text-color != null) {
|
|
52
|
+
-webkit-text-fill-color: var(--ui-#{$component}-#{$css-prefix}-text-color, $text-color) !important;
|
|
53
|
+
}
|
|
54
|
+
@if ($background-color != null) {
|
|
55
|
+
-webkit-box-shadow: 0 0 0 40rem var(--ui-#{$component}-#{$css-prefix}-background-color, $background-color) inset;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
@if ($background-color != null) {
|
|
59
|
+
&:-webkit-autofill:focus {
|
|
60
|
+
-webkit-box-shadow: 0 0 0 40rem var(--ui-#{$component}-#{$css-prefix}-background-color, $background-color) inset;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
&:auto-fill,
|
|
64
|
+
&:autofill {
|
|
65
|
+
@if ($text-color != null) {
|
|
66
|
+
color: var(--ui-#{$component}-#{$css-prefix}-text-color, $text-color) !important;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import './global.scss';
|
|
2
|
-
export declare function App(): JSX.Element;
|
|
2
|
+
export declare function App(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function BreadcrumbsPage(): JSX.Element;
|
|
1
|
+
export declare function BreadcrumbsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import '../style.scss';
|
|
2
|
-
export declare function ButtonsPage(): JSX.Element;
|
|
2
|
+
export declare function ButtonsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function CascadeSelectorPage(): JSX.Element;
|
|
1
|
+
export declare function CascadeSelectorPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function CheckboxMarkPage(): JSX.Element;
|
|
1
|
+
export declare function CheckboxMarkPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function CheckboxPage(): JSX.Element;
|
|
1
|
+
export declare function CheckboxPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function DateTimeFieldMaskPage(): JSX.Element;
|
|
1
|
+
export declare function DateTimeFieldMaskPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function DateTimeFieldsPage(): JSX.Element;
|
|
1
|
+
export declare function DateTimeFieldsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function DateTimePickerPage(): JSX.Element;
|
|
1
|
+
export declare function DateTimePickerPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function DropdownItemPage(): JSX.Element;
|
|
1
|
+
export declare function DropdownItemPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function DropdownV2Page(): JSX.Element;
|
|
1
|
+
export declare function DropdownV2Page(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function FieldsPage(): JSX.Element;
|
|
1
|
+
export declare function FieldsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function FormBuilderPage(): JSX.Element;
|
|
1
|
+
export declare function FormBuilderPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function FormPage(): JSX.Element;
|
|
1
|
+
export declare function FormPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function HomePage(): JSX.Element;
|
|
1
|
+
export declare function HomePage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function LoadingIndicatorPage(): JSX.Element;
|
|
1
|
+
export declare function LoadingIndicatorPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function MediaPlayerPage(): JSX.Element;
|
|
1
|
+
export declare function MediaPlayerPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function MicroButtonsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function ModalsPage(): JSX.Element;
|
|
1
|
+
export declare function ModalsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function PaginationPage(): JSX.Element;
|
|
1
|
+
export declare function PaginationPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function SelectFieldPage(): JSX.Element;
|
|
1
|
+
export declare function SelectFieldPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function SlideTransitionPage(): JSX.Element;
|
|
1
|
+
export declare function SlideTransitionPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function TabFramePage(): JSX.Element;
|
|
1
|
+
export declare function TabFramePage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function TagPage(): JSX.Element;
|
|
1
|
+
export declare function TagPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function TestPage(): JSX.Element;
|
|
1
|
+
export declare function TestPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function ToggleBasePage(): JSX.Element;
|
|
1
|
+
export declare function ToggleBasePage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function TogglePage(): JSX.Element;
|
|
1
|
+
export declare function TogglePage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const TooltipPage: () => JSX.Element;
|
|
1
|
+
export declare const TooltipPage: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function UIAnimationsPage(): JSX.Element;
|
|
1
|
+
export declare function UIAnimationsPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function UseDragPage(): JSX.Element;
|
|
1
|
+
export declare function UseDragPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function UseSmartPositionPage(): JSX.Element;
|
|
1
|
+
export declare function UseSmartPositionPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function UseSmartScrollPage(): JSX.Element;
|
|
1
|
+
export declare function UseSmartScrollPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function UserPickPage(): JSX.Element;
|
|
1
|
+
export declare function UserPickPage(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * from './HomePage';
|
|
2
2
|
export * from './ButtonsPage/ButtonsPage';
|
|
3
|
-
export * from './MicroButtonsPage';
|
|
3
|
+
export * from './MicroButtonsPage/MicroButtonsPage';
|
|
4
4
|
export * from './FieldsPage/FieldsPage';
|
|
5
5
|
export * from './CheckboxMarkPage';
|
|
6
6
|
export * from './FormBuilderPage';
|
|
@@ -6,5 +6,5 @@ type PropsType<T extends ElementType> = Merge<AsProps<T>, {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
type?: 'text' | 'button-primary' | 'button-gray';
|
|
8
8
|
}>;
|
|
9
|
-
export declare function BreadcrumbButton<T extends ElementType = 'button'>(props: PropsType<T>): JSX.Element;
|
|
9
|
+
export declare function BreadcrumbButton<T extends ElementType = 'button'>(props: PropsType<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -5,5 +5,5 @@ type PropsType<T extends ElementType> = Merge<AsProps<T>, {
|
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
type?: React.ComponentProps<typeof Divider>['type'];
|
|
7
7
|
}>;
|
|
8
|
-
export declare function Breadcrumbs<T extends ElementType = 'div'>(props: PropsType<T>): JSX.Element;
|
|
8
|
+
export declare function Breadcrumbs<T extends ElementType = 'div'>(props: PropsType<T>): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
export {};
|
|
@@ -6,7 +6,7 @@ export type ButtonHierarchyType = 'primary' | 'secondary-color' | 'secondary-gra
|
|
|
6
6
|
* Компонент кнопки
|
|
7
7
|
*/
|
|
8
8
|
export type ButtonPropsType<T extends React.ElementType> = AsProps<T, {
|
|
9
|
-
/** Размер кнопки (small, medium, large) */
|
|
9
|
+
/** Размер кнопки (small, medium, large, ultra) */
|
|
10
10
|
size?: ButtonSizeType;
|
|
11
11
|
/** Иерархия (primary, secondary, etc.) */
|
|
12
12
|
hierarchy?: ButtonHierarchyType;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CarouselPropsType } from "../types";
|
|
2
|
-
export declare function Carousel({ children, activeIndex, setActiveIndex }: CarouselPropsType): JSX.Element;
|
|
2
|
+
export declare function Carousel({ children, activeIndex, setActiveIndex }: CarouselPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CascadeSelectorPropsType } from "../types";
|
|
2
|
-
export declare function CascadeSelector<T extends unknown = unknown>({ value, options, onChange, multiple, defaultAllHidden, maxChosenOptions, disabled, }: CascadeSelectorPropsType<T>): JSX.Element;
|
|
2
|
+
export declare function CascadeSelector<T extends unknown = unknown>({ value, options, onChange, multiple, defaultAllHidden, maxChosenOptions, disabled, }: CascadeSelectorPropsType<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CalendarButtonPropsType } from "../../types";
|
|
2
|
-
export declare function CalendarButton(props: CalendarButtonPropsType): JSX.Element;
|
|
2
|
+
export declare function CalendarButton(props: CalendarButtonPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CalendarDayPropsType } from '../../types';
|
|
2
|
-
export declare function CalendarDay({ text, info, mark, currentDay, filter, holiday, active, disabled, ...props }: CalendarDayPropsType): JSX.Element;
|
|
2
|
+
export declare function CalendarDay({ text, info, mark, currentDay, filter, holiday, active, disabled, ...props }: CalendarDayPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CalendarMonthPropsType } from "../../types";
|
|
2
|
-
export declare function CalendarMonth({ text, current, disabled, ...props }: CalendarMonthPropsType): JSX.Element;
|
|
2
|
+
export declare function CalendarMonth({ text, current, disabled, ...props }: CalendarMonthPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CalendarYearPropsType } from "../../types";
|
|
2
|
-
export declare function CalendarYear({ text, current, disabled, ...props }: CalendarYearPropsType): JSX.Element;
|
|
2
|
+
export declare function CalendarYear({ text, current, disabled, ...props }: CalendarYearPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TimePickerTagPropsType } from "../../types";
|
|
2
|
-
export declare function TimePickerTag({ text, ...props }: TimePickerTagPropsType): JSX.Element;
|
|
2
|
+
export declare function TimePickerTag({ text, ...props }: TimePickerTagPropsType): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function Footer(): JSX.Element;
|
|
1
|
+
export declare function Footer(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function Header(): JSX.Element;
|
|
1
|
+
export declare function Header(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function Main(): JSX.Element;
|
|
1
|
+
export declare function Main(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { useDatePicker } from "../../hooks";
|
|
2
2
|
type PropsType = Parameters<typeof useDatePicker>[number];
|
|
3
|
-
export declare function DatePicker(props: PropsType): JSX.Element;
|
|
3
|
+
export declare function DatePicker(props: PropsType): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export {};
|