@kvell-group/ui 1.15.6 → 1.15.7
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/package.json
CHANGED
|
@@ -1,4 +1,30 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
--checkbox-size-sm: rem(16px);
|
|
3
|
+
--checkbox-size-md: rem(20px);
|
|
4
|
+
--checkbox-radius: var(--mantine-radius-xs);
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.label {
|
|
2
|
-
--label-offset-start:
|
|
3
|
-
|
|
8
|
+
--label-offset-start: rem(8px);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
:where([data-mantine-color-scheme='light']) .root:hover .input:not(:checked):not(:disabled) {
|
|
12
|
+
border-color: var(--mantine-color-border-action-hover-0);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.inner {
|
|
16
|
+
margin-top: rem(2px);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.input {
|
|
20
|
+
box-shadow: var(--mantine-shadow-xs);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:where([data-mantine-color-scheme='light']) .input:disabled {
|
|
24
|
+
background-color: var(--mantine-color-background-checkbox-disabled-0);
|
|
25
|
+
border-color: var(--mantine-color-background-checkbox-disabled-0);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
[data-mantine-color-scheme='light'] .input:disabled + .icon {
|
|
29
|
+
color: var(--mantine-color-border-base-surface-0);
|
|
4
30
|
}
|
|
@@ -5,6 +5,8 @@ import { MantineProvider } from '@/components/MainProvider'
|
|
|
5
5
|
import '@mantine/core/styles.css'
|
|
6
6
|
import { theme } from '@/components/theme'
|
|
7
7
|
import { Checkbox as CheckboxComponent } from '@/components/Inputs/Checkbox'
|
|
8
|
+
import { Text } from '@/components/Text'
|
|
9
|
+
import { Anchor } from '@mantine/core'
|
|
8
10
|
|
|
9
11
|
// ----------------------------------------------------------------------
|
|
10
12
|
|
|
@@ -26,7 +28,20 @@ type Story = StoryObj<typeof CheckboxComponent>
|
|
|
26
28
|
|
|
27
29
|
export const Checkbox: Story = {
|
|
28
30
|
args: {
|
|
29
|
-
label:
|
|
31
|
+
label: (
|
|
32
|
+
<Text variant='caption-l-medium'>
|
|
33
|
+
Соглашаюсь с условиями{' '}
|
|
34
|
+
<Anchor
|
|
35
|
+
href='#'
|
|
36
|
+
target='_blank'
|
|
37
|
+
rel='noreferrer'
|
|
38
|
+
c='text-accent-blue-accent.0'
|
|
39
|
+
inherit
|
|
40
|
+
>
|
|
41
|
+
КИД (Ключевого информационного документа)
|
|
42
|
+
</Anchor>
|
|
43
|
+
</Text>
|
|
44
|
+
),
|
|
30
45
|
},
|
|
31
46
|
}
|
|
32
47
|
|
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
import { Checkbox as MantineCheckbox } from '@mantine/core'
|
|
2
2
|
import textClassNames from '../../../styles/typography.module.css'
|
|
3
3
|
import classNames from './Checkbox.module.css'
|
|
4
|
-
import {
|
|
4
|
+
import { CAPTION_L_MEDIUM_FONT_VARIANT } from '../../../constants/font-variants'
|
|
5
5
|
import clsx from 'clsx'
|
|
6
6
|
|
|
7
7
|
// ----------------------------------------------------------------------
|
|
8
8
|
|
|
9
|
-
const inputClassName = clsx(textClassNames[
|
|
9
|
+
const inputClassName = clsx(textClassNames[CAPTION_L_MEDIUM_FONT_VARIANT], classNames.label)
|
|
10
10
|
|
|
11
11
|
// ----------------------------------------------------------------------
|
|
12
12
|
|
|
13
13
|
export const Checkbox = MantineCheckbox.withProps({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
size: 'sm',
|
|
15
|
+
classNames: {
|
|
16
|
+
label: inputClassName,
|
|
17
|
+
root: classNames.root,
|
|
18
|
+
inner: classNames.inner,
|
|
19
|
+
input: classNames.input,
|
|
20
|
+
icon: classNames.icon,
|
|
21
|
+
},
|
|
17
22
|
})
|
package/src/components/theme.ts
CHANGED
|
@@ -19,7 +19,9 @@ export const theme: MantineThemeOverride = {
|
|
|
19
19
|
//borders
|
|
20
20
|
'border-action-normal': colorsTuple('#dee0e3'),
|
|
21
21
|
'border-action-destructive': colorsTuple('#f7c3c0'),
|
|
22
|
+
'border-action-hover': colorsTuple('#C8CAD0'),
|
|
22
23
|
'border-base-alpha': colorsTuple('#0a0f2914'),
|
|
24
|
+
'border-base-surface': colorsTuple('#ffffff'),
|
|
23
25
|
|
|
24
26
|
//buttons
|
|
25
27
|
'background-button-tertiary': colorsTuple('#0a0f290a'),
|
|
@@ -36,10 +38,12 @@ export const theme: MantineThemeOverride = {
|
|
|
36
38
|
'text-base-tertiary': colorsTuple('#0d112666'),
|
|
37
39
|
'text-base-quaternary': colorsTuple('#0a0f2940'),
|
|
38
40
|
'text-status-destructive': colorsTuple('#e6483d'),
|
|
41
|
+
'text-accent-blue-accent': colorsTuple('#4778F5'),
|
|
39
42
|
|
|
40
43
|
//toggle
|
|
41
44
|
'background-toggle-active': colorsTuple('#26bd6c'),
|
|
42
45
|
'background-toggle-default': colorsTuple('#babdc5'),
|
|
46
|
+
'background-checkbox-disabled': colorsTuple('#DEE0E3'),
|
|
43
47
|
|
|
44
48
|
//typography
|
|
45
49
|
'typography-secondary': colorsTuple('#91989e'),
|