@muraldevkit/ui-toolkit 1.20.1 → 1.21.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/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
- package/dist/components/form/checkbox/MrlCheckbox/MrlCheckbox.d.ts +31 -0
- package/dist/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.d.ts +26 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlCheckbox/global.scss +30 -0
- package/dist/styles/MrlCheckbox/module.scss +27 -0
- package/dist/styles/MrlCheckbox/variables.scss +38 -0
- package/dist/styles/MrlCheckboxStandalone/global.scss +31 -0
- package/dist/styles/MrlCheckboxStandalone/module.scss +45 -0
- package/dist/styles/MrlCheckboxStandalone/variables.scss +41 -0
- package/dist/styles/form/global.scss +0 -31
- package/dist/styles/form/variables.scss +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Checkbox component global styles
|
|
3
|
+
/// @group checkbox
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '../../forms.global.scss' as *;
|
|
7
|
+
@use './MrlCheckbox.variables.scss';
|
|
8
|
+
|
|
9
|
+
// hide double focus ring from nested standalone checkbox component
|
|
10
|
+
.MrlCheckbox .MrlCheckboxStandalone-input:focus-visible + .mrl-u-focus-indicator::after {
|
|
11
|
+
border: none;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.MrlCheckbox-input:disabled {
|
|
15
|
+
~ .MrlCheckbox-inputDisplay {
|
|
16
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.MrlCheckbox-input:checked:disabled {
|
|
21
|
+
~ .MrlCheckbox-inputDisplay {
|
|
22
|
+
--mrl-checkbox-input-background: var(--mrl-color-background-disabled);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.MrlCheckbox-input:checked[aria-invalid='true'] {
|
|
27
|
+
~ .MrlCheckbox-inputDisplay {
|
|
28
|
+
--mrl-checkbox-input-background: var(--mrl-color-background-error);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Checkbox component scoped styles
|
|
3
|
+
/// @group checkbox
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
7
|
+
@use '../../forms.global.scss' as *;
|
|
8
|
+
@use './MrlCheckbox.variables.scss';
|
|
9
|
+
|
|
10
|
+
/// @todo - Design question - what happens if the label goes to multiple lines?
|
|
11
|
+
|
|
12
|
+
.MrlCheckbox .MrlCheckbox-label {
|
|
13
|
+
color: var(--mrl-checkbox-label-color);
|
|
14
|
+
vertical-align: middle;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.MrlCheckbox {
|
|
18
|
+
align-items: center;
|
|
19
|
+
display: flex;
|
|
20
|
+
min-height: var(--mrl-checkbox-height);
|
|
21
|
+
position: relative;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// State: focused
|
|
25
|
+
.mrl-is--focused::after {
|
|
26
|
+
@include mrl-focus-pseudo-element;
|
|
27
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Checkbox component styles
|
|
3
|
+
/// @group checkbox
|
|
4
|
+
////
|
|
5
|
+
@use '../../forms.variables.scss';
|
|
6
|
+
|
|
7
|
+
.MrlCheckbox {
|
|
8
|
+
--mrl-checkbox-label-color: rgba(var(--mrl-gray-80), 1);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// State: selected (checked or indeterminate)
|
|
12
|
+
.MrlCheckbox.mrl-is--selected {
|
|
13
|
+
--mrl-checkbox-label-color: rgba(var(--mrl-gray-100), 1);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// State: error
|
|
17
|
+
.MrlCheckbox.mrl-is--invalid {
|
|
18
|
+
--mrl-checkbox-label-color: rgba(var(--mrl-gray-80), 1);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.MrlCheckbox-input[aria-invalid='true'] {
|
|
22
|
+
~ .mrl-checkbox-inputDisplay {
|
|
23
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// State: disabled
|
|
28
|
+
/* stylelint-disable no-descending-specificity */
|
|
29
|
+
// We want to be able to group all related-state styles together
|
|
30
|
+
.MrlCheckbox.mrl-is--disabled .MrlCheckbox-label {
|
|
31
|
+
--mrl-checkbox-label-color: var(--mrl-color-text-disabled);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// State: hover
|
|
35
|
+
.MrlCheckbox:hover {
|
|
36
|
+
--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
|
|
37
|
+
--mrl-checkbox-label-color: rgba(var(--mrl-gray-90), 1);
|
|
38
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Standalone checkbox global styles
|
|
3
|
+
/// @group checkbox-standalone
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
7
|
+
@use '../../forms.global.scss' as *;
|
|
8
|
+
@use './MrlCheckboxStandalone.variables.scss';
|
|
9
|
+
|
|
10
|
+
.MrlCheckboxStandalone-input {
|
|
11
|
+
@include mrl-focus(
|
|
12
|
+
$is-inline-element: 'true',
|
|
13
|
+
$element-radius: 'var(--mrl-border-radius-content)'
|
|
14
|
+
);
|
|
15
|
+
|
|
16
|
+
// overrides position: relative from the focus mixin
|
|
17
|
+
/* stylelint-disable order/properties-alphabetical-order */
|
|
18
|
+
position: absolute;
|
|
19
|
+
|
|
20
|
+
& + .mrl-u-focus-indicator {
|
|
21
|
+
position: absolute;
|
|
22
|
+
|
|
23
|
+
// Fixes FF display issue
|
|
24
|
+
left: 0;
|
|
25
|
+
top: auto;
|
|
26
|
+
|
|
27
|
+
// Safari needs to have defined dimensions
|
|
28
|
+
height: var(--mrl-checkbox-input-size);
|
|
29
|
+
width: var(--mrl-checkbox-input-size);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Standalone checkbox component styles
|
|
3
|
+
/// @group checkbox-standalone
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '../../forms.global.scss' as *;
|
|
7
|
+
@use './MrlCheckboxStandalone.variables.scss';
|
|
8
|
+
|
|
9
|
+
/// @todo v2 - move mrl-checkbox-standalone styles in shared file back to this file
|
|
10
|
+
|
|
11
|
+
.MrlCheckboxStandalone {
|
|
12
|
+
@include mrl-checkbox-wrapper;
|
|
13
|
+
|
|
14
|
+
align-items: center;
|
|
15
|
+
display: flex;
|
|
16
|
+
min-height: var(--mrl-checkbox-height);
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.MrlCheckboxStandalone-inputDisplay {
|
|
21
|
+
background: var(--mrl-checkbox-input-background);
|
|
22
|
+
border-color: var(--mrl-checkbox-input-border-color);
|
|
23
|
+
border-radius: var(--mrl-checkbox-input-border-radius);
|
|
24
|
+
border-style: solid;
|
|
25
|
+
border-width: var(--mrl-checkbox-input-border-width);
|
|
26
|
+
color: var(--mrl-checkbox-input-color);
|
|
27
|
+
display: flex;
|
|
28
|
+
height: var(--mrl-checkbox-input-size);
|
|
29
|
+
width: var(--mrl-checkbox-input-size);
|
|
30
|
+
z-index: 1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.MrlCheckboxStandalone-inputDisplay-icon {
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.MrlCheckboxStandalone-input {
|
|
38
|
+
@include mrl-checkbox-input;
|
|
39
|
+
|
|
40
|
+
&:checked ~ .MrlCheckboxStandalone-inputDisplay {
|
|
41
|
+
.MrlCheckboxStandalone-inputDisplay-icon {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Checkbox component styles
|
|
3
|
+
/// @group checkbox
|
|
4
|
+
////
|
|
5
|
+
@use '../../forms.variables.scss';
|
|
6
|
+
|
|
7
|
+
// State: error
|
|
8
|
+
.MrlCheckboxStandalone-input[aria-invalid='true'] {
|
|
9
|
+
~ .MrlCheckboxStandalone-inputDisplay {
|
|
10
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.MrlCheckboxStandalone-input:checked[aria-invalid='true'] {
|
|
15
|
+
~ .MrlCheckboxStandalone-inputDisplay {
|
|
16
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-error);
|
|
17
|
+
--mrl-checkbox-input-background: var(--mrl-color-background-error);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// State: disabled
|
|
22
|
+
/* stylelint-disable no-descending-specificity */
|
|
23
|
+
// We want to be able to group all related-state styles together
|
|
24
|
+
.MrlCheckboxStandalone-input:disabled {
|
|
25
|
+
~ .MrlCheckboxStandalone-inputDisplay {
|
|
26
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.MrlCheckboxStandalone-input:checked:disabled {
|
|
31
|
+
~ .MrlCheckboxStandalone-inputDisplay {
|
|
32
|
+
--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
|
|
33
|
+
--mrl-checkbox-input-background: var(--mrl-color-background-disabled);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/* stylelint-enable no-descending-specificity */
|
|
37
|
+
|
|
38
|
+
// State: hover
|
|
39
|
+
.MrlCheckboxStandalone:hover {
|
|
40
|
+
--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
|
|
41
|
+
}
|
|
@@ -127,34 +127,3 @@
|
|
|
127
127
|
width: var(--mrl-checkbox-input-size);
|
|
128
128
|
z-index: $mrl-zIndex-focus + 1;
|
|
129
129
|
}
|
|
130
|
-
|
|
131
|
-
/// Shared styles for checkbox and checkbox-standalone
|
|
132
|
-
/// @todo - v2 - These should ultimately live in the checkbox-standalone component and the mrl-checkbox
|
|
133
|
-
/// class names should be removed. This will need to be communicated as a breaking change
|
|
134
|
-
/// to take into account anyone referencing these styles outside of component usage.
|
|
135
|
-
.mrl-checkbox,
|
|
136
|
-
.mrl-checkboxStandalone {
|
|
137
|
-
align-items: center;
|
|
138
|
-
display: flex;
|
|
139
|
-
min-height: var(--mrl-checkbox-height);
|
|
140
|
-
position: relative;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.mrl-checkbox-inputDisplay,
|
|
144
|
-
.mrl-checkboxStandalone-inputDisplay {
|
|
145
|
-
background: var(--mrl-checkbox-input-background);
|
|
146
|
-
border-color: var(--mrl-checkbox-input-border-color);
|
|
147
|
-
border-radius: var(--mrl-checkbox-input-border-radius);
|
|
148
|
-
border-style: solid;
|
|
149
|
-
border-width: var(--mrl-checkbox-input-border-width);
|
|
150
|
-
color: var(--mrl-checkbox-input-color);
|
|
151
|
-
display: flex;
|
|
152
|
-
height: var(--mrl-checkbox-input-size);
|
|
153
|
-
width: var(--mrl-checkbox-input-size);
|
|
154
|
-
z-index: $mrl-zIndex-base - 1;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.mrl-checkbox-inputDisplay-icon,
|
|
158
|
-
.mrl-checkboxStandalone-inputDisplay-icon {
|
|
159
|
-
display: none;
|
|
160
|
-
}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
// State: selected (checked or indeterminate)
|
|
45
45
|
.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
|
|
46
|
-
.
|
|
46
|
+
.MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay {
|
|
47
47
|
// This doesn't align to any of our contextual color tokens
|
|
48
48
|
--mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
|
|
49
49
|
--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
|