@muraldevkit/ui-toolkit 1.4.0 → 1.5.1
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/MrlButton/MrlButton.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/src/components/svg/MrlSvg/MrlSvg.module.scss +26 -0
- package/dist/src/components/svg/MrlSvgAnimate/MrlSvgAnimate.module.scss +22 -0
- package/dist/src/components/tooltip/MrlTooltip/MrlTooltip.module.scss +4 -0
- package/dist/src/components/tooltip/MrlTooltipContent/MrlTooltipContent.module.scss +142 -0
- package/dist/styles/MrlButton/global.scss +55 -0
- package/dist/styles/button/global.scss +67 -0
- package/dist/styles/button/mixins.scss +75 -0
- package/dist/styles/button/variables.scss +194 -0
- package/dist/styles/svg/variables.scss +21 -0
- package/dist/styles/tooltip/mixins.scss +19 -0
- package/package.json +2 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@use '../svg.variables.scss';
|
|
2
|
+
|
|
3
|
+
.MrlSvgContainer {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.MrlSvg {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
fill: currentcolor;
|
|
10
|
+
|
|
11
|
+
// We set static height & width so the icon doesn't shrink when it's
|
|
12
|
+
// within a flex parent that has competing content. We want the icon
|
|
13
|
+
// to maintain its intended size. If the user needs the icon to scale
|
|
14
|
+
// they should use size="auto"
|
|
15
|
+
height: var(--mrl-svg-size);
|
|
16
|
+
width: var(--mrl-svg-size);
|
|
17
|
+
|
|
18
|
+
* {
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.MrlSvg--auto {
|
|
24
|
+
// inline-flex was not filling the container unless specified
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@use '../svg.variables.scss';
|
|
2
|
+
|
|
3
|
+
.MrlSvgAnimate {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
fill: currentcolor;
|
|
6
|
+
|
|
7
|
+
// We set static height & width so the icon doesn't shrink when it's
|
|
8
|
+
// within a flex parent that has competing content. We want the icon
|
|
9
|
+
// to maintain its intended size. If the user needs the icon to scale
|
|
10
|
+
// they should use size="auto"
|
|
11
|
+
height: var(--mrl-svg-size);
|
|
12
|
+
width: var(--mrl-svg-size);
|
|
13
|
+
|
|
14
|
+
* {
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.MrlSvgAnimate--auto {
|
|
20
|
+
// inline-flex was not filling the container unless specified
|
|
21
|
+
width: 100%;
|
|
22
|
+
}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Tooltip Content styles
|
|
3
|
+
/// @group Tooltip
|
|
4
|
+
////
|
|
5
|
+
///
|
|
6
|
+
@use 'sass:math';
|
|
7
|
+
@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
|
|
8
|
+
|
|
9
|
+
// Created a couple Sass variables for things that are reused a lot but don't need theming
|
|
10
|
+
$mrl-tooltip-arrow-horizontal-center: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
|
|
11
|
+
$mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
|
|
12
|
+
|
|
13
|
+
// The first number of this calculation needs to match the value of var(--mrl-tooltip-arrow-size)
|
|
14
|
+
$mrl-tooltip-arrow-size: math.hypot(8px, 5px);
|
|
15
|
+
|
|
16
|
+
@use '../MrlTooltip.mixins.scss' as *;
|
|
17
|
+
@use './variables.scss';
|
|
18
|
+
|
|
19
|
+
.mrl-tooltip-content {
|
|
20
|
+
background: var(--mrl-tooltip-background-color);
|
|
21
|
+
border-radius: var(--mrl-tooltip-border-radius);
|
|
22
|
+
color: var(--mrl-tooltip-text-color);
|
|
23
|
+
cursor: default;
|
|
24
|
+
font-family: proxima-nova, sans-serif;
|
|
25
|
+
font-size: var(--mrl-tooltip-font-size);
|
|
26
|
+
font-weight: var(--mrl-type-weight-title-secondary);
|
|
27
|
+
line-height: var(--mrl-tooltip-line-height);
|
|
28
|
+
max-width: calc(var(--mrl-spacing-09) * 7);
|
|
29
|
+
opacity: 0;
|
|
30
|
+
overflow-wrap: break-word;
|
|
31
|
+
padding: var(--mrl-tooltip-padding);
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
position: absolute;
|
|
34
|
+
transition-property: opacity;
|
|
35
|
+
white-space: normal;
|
|
36
|
+
width: max-content;
|
|
37
|
+
z-index: $mrl-zIndex-tooltips;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Arrow
|
|
41
|
+
.mrl-tooltip-content::after {
|
|
42
|
+
background: transparent;
|
|
43
|
+
border-bottom: $mrl-tooltip-arrow-size solid var(--mrl-tooltip-background-color);
|
|
44
|
+
border-right: $mrl-tooltip-arrow-size solid transparent;
|
|
45
|
+
content: '';
|
|
46
|
+
height: 0;
|
|
47
|
+
position: absolute;
|
|
48
|
+
transform: rotate(135deg);
|
|
49
|
+
width: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// State: Show (Default is hide)
|
|
53
|
+
.mrl-tooltip-content[data-state='show'],
|
|
54
|
+
.mrl-tooltip-content:hover {
|
|
55
|
+
@include mrl-tooltip-show;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Position: Top
|
|
59
|
+
.mrl-tooltip-content[data-position='top'] {
|
|
60
|
+
bottom: 100%;
|
|
61
|
+
margin-bottom: var(--mrl-tooltip-trigger-offset);
|
|
62
|
+
right: 50%;
|
|
63
|
+
transform: translateX(50%);
|
|
64
|
+
|
|
65
|
+
&::after {
|
|
66
|
+
border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
|
|
67
|
+
bottom: $mrl-tooltip-arrow-vertical-center;
|
|
68
|
+
left: $mrl-tooltip-arrow-horizontal-center;
|
|
69
|
+
transform: rotate(315deg);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.mrl-tooltip-content[data-anchor="start"] {
|
|
74
|
+
left: 0;
|
|
75
|
+
right: initial;
|
|
76
|
+
transform: none;
|
|
77
|
+
|
|
78
|
+
&::after {
|
|
79
|
+
left: var(--mrl-tooltip-arrow-spacing);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.mrl-tooltip-content[data-anchor='end'] {
|
|
84
|
+
right: 0;
|
|
85
|
+
transform: none;
|
|
86
|
+
|
|
87
|
+
&::after {
|
|
88
|
+
left: auto;
|
|
89
|
+
right: var(--mrl-tooltip-arrow-spacing);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Position: Bottom
|
|
94
|
+
.mrl-tooltip-content[data-position='bottom'] {
|
|
95
|
+
margin-top: var(--mrl-tooltip-trigger-offset);
|
|
96
|
+
top: 100%;
|
|
97
|
+
|
|
98
|
+
&::after {
|
|
99
|
+
border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
|
|
100
|
+
top: $mrl-tooltip-arrow-vertical-center;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.mrl-tooltip-content[data-position='bottom'][data-anchor='center'] {
|
|
105
|
+
right: 50%;
|
|
106
|
+
transform: translateX(50%);
|
|
107
|
+
|
|
108
|
+
&::after {
|
|
109
|
+
left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Position: Left
|
|
114
|
+
.mrl-tooltip-content[data-position='left']{
|
|
115
|
+
left: initial;
|
|
116
|
+
margin-right: var(--mrl-tooltip-trigger-offset);
|
|
117
|
+
right: 100%;
|
|
118
|
+
top: 50%;
|
|
119
|
+
transform: translateY(-50%);
|
|
120
|
+
|
|
121
|
+
&::after {
|
|
122
|
+
border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
|
|
123
|
+
display: var(--mrl-tooltip-arrow-display-left-right);
|
|
124
|
+
right: $mrl-tooltip-arrow-vertical-center;
|
|
125
|
+
top: $mrl-tooltip-arrow-horizontal-center;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Position: Right
|
|
130
|
+
.mrl-tooltip-content[data-position='right'] {
|
|
131
|
+
left: 100%;
|
|
132
|
+
margin-left: var(--mrl-tooltip-trigger-offset);
|
|
133
|
+
top: 50%;
|
|
134
|
+
transform: translateY(-50%);
|
|
135
|
+
|
|
136
|
+
&::after {
|
|
137
|
+
border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
|
|
138
|
+
display: var(--mrl-tooltip-arrow-display-left-right);
|
|
139
|
+
left: $mrl-tooltip-arrow-vertical-center;
|
|
140
|
+
top: $mrl-tooltip-arrow-horizontal-center;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Shadow Button component styles
|
|
3
|
+
/// @group button
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
7
|
+
@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
|
|
8
|
+
@use '../button.global.scss' as *;
|
|
9
|
+
@use '../button.variables.scss' as *;
|
|
10
|
+
|
|
11
|
+
.mrlButton {
|
|
12
|
+
@include mrl-text-interactive('small');
|
|
13
|
+
@include mrl-button-size;
|
|
14
|
+
|
|
15
|
+
align-items: center;
|
|
16
|
+
display: inline-flex;
|
|
17
|
+
padding: var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);
|
|
18
|
+
text-align: center;
|
|
19
|
+
vertical-align: middle;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
|
|
22
|
+
// Size variants
|
|
23
|
+
&.mrlButton--small {
|
|
24
|
+
@include mrl-text-interactive('xsmall');
|
|
25
|
+
@include mrl-button-size('small');
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&.mrlButton--large {
|
|
29
|
+
@include mrl-text-interactive;
|
|
30
|
+
@include mrl-button-size('large');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.MrlSvgContainer {
|
|
34
|
+
margin-right: var(--mrl-button-icon-margin-right);
|
|
35
|
+
|
|
36
|
+
// Due to the nested nature of the icon we have limited ways to overwrite
|
|
37
|
+
// the mrl-svg's CSS. There is not a way to simply apply more weight to the
|
|
38
|
+
// selector so we can use "important" or we can use completely different CSS
|
|
39
|
+
// properties. I opted to go with the latter and using min/max to overwrite
|
|
40
|
+
// "width: 100%". As the design system matures and the wild-west of Classic
|
|
41
|
+
// is removed, we may not need this level of flexibility.
|
|
42
|
+
max-width: var(--mrl-button-icon-size);
|
|
43
|
+
min-width: var(--mrl-button-icon-size);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Icon position
|
|
47
|
+
&.mrlButton--icon-after {
|
|
48
|
+
flex-direction: row-reverse;
|
|
49
|
+
|
|
50
|
+
.MrlSvgContainer {
|
|
51
|
+
margin-left: var(--mrl-button-icon-margin-right);
|
|
52
|
+
margin-right: 0;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Common Button component styles
|
|
3
|
+
/// @group button
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
7
|
+
@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
|
|
8
|
+
@use './button.mixins.scss' as *;
|
|
9
|
+
|
|
10
|
+
$mrl-interaction-scope: ':not(#{$mrl-button-toggle-selector}):not([aria-disabled="true"])';
|
|
11
|
+
|
|
12
|
+
// @todo - move display and visibility to common styles or remove :not selectors from
|
|
13
|
+
// the skeleton definition so it doesn't need to be duplicated with the `mrl-button` component
|
|
14
|
+
// which has a different HTML structure.
|
|
15
|
+
.mrlIconButton,
|
|
16
|
+
.mrlButton {
|
|
17
|
+
@include mrl-button-common;
|
|
18
|
+
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
|
|
21
|
+
// required for focus indicator
|
|
22
|
+
position: relative;
|
|
23
|
+
visibility: inherit;
|
|
24
|
+
|
|
25
|
+
// Focus state
|
|
26
|
+
&:focus-visible::after {
|
|
27
|
+
@include mrl-focus-pseudo-element;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--inverse:focus-visible::after,
|
|
31
|
+
&--ghost-inverse:focus-visible::after {
|
|
32
|
+
@include mrl-focus-pseudo-element($color-token: '-inverse');
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Hover state for all buttons
|
|
36
|
+
&:hover {
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Disabled state
|
|
41
|
+
&[aria-disabled='true'] {
|
|
42
|
+
@include mrl-button-common-disabled;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[aria-disabled='true']:hover {
|
|
46
|
+
@include mrl-button-common-disabled;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Hover state for non-selected toggle buttons
|
|
50
|
+
&:hover#{$mrl-interaction-scope} {
|
|
51
|
+
@include mrl-button-common-hover;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// Active/Pressed state
|
|
55
|
+
// In order for active to work, it has to have a higher CSS specificity than :hover.
|
|
56
|
+
// Adding :active on selected toggle buttons requires a button selector re-architecture.
|
|
57
|
+
&:active#{$mrl-interaction-scope} {
|
|
58
|
+
@include mrl-button-common-active;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Developer-initiated skeleton state
|
|
62
|
+
// Requires additional weight to overwrite other hydrated versions of the component
|
|
63
|
+
&--skeleton,
|
|
64
|
+
&--skeleton[aria-disabled="true"] {
|
|
65
|
+
@include mrl-button-skeleton;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Shared Button mixins
|
|
3
|
+
/// @group button
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
$mrl-button-toggle-selector: '[aria-pressed="true"],[aria-expanded="true"],[aria-selected="true"],[aria-checked="true"]';
|
|
7
|
+
|
|
8
|
+
/// Default motion styles for button components
|
|
9
|
+
/// @group button
|
|
10
|
+
@mixin mrl-button-common-motion() {
|
|
11
|
+
transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
|
|
12
|
+
transition-property: background-color, border-color, color;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/// Common default styles for button components
|
|
16
|
+
/// @group button
|
|
17
|
+
@mixin mrl-button-common() {
|
|
18
|
+
background: var(--mrl-button-background-color);
|
|
19
|
+
border: none;
|
|
20
|
+
border-radius: var(--mrl-button-border-radius);
|
|
21
|
+
|
|
22
|
+
// Due to spacing design specs in Classic, we have to use a shadow to
|
|
23
|
+
// create the border for the button
|
|
24
|
+
box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);
|
|
25
|
+
color: var(--mrl-button-text-color);
|
|
26
|
+
justify-content: center;
|
|
27
|
+
min-width: auto;
|
|
28
|
+
outline: none;
|
|
29
|
+
|
|
30
|
+
// This adds transition styles when mousing out
|
|
31
|
+
@include mrl-button-common-motion;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/// Default styles for button components on hover
|
|
35
|
+
/// @group button
|
|
36
|
+
@mixin mrl-button-common-hover() {
|
|
37
|
+
background: var(--mrl-button-background-color-hover);
|
|
38
|
+
box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);
|
|
39
|
+
color: var(--mrl-button-text-color-hover);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/// Default styles for button components on active/press
|
|
43
|
+
/// @group button
|
|
44
|
+
@mixin mrl-button-common-active() {
|
|
45
|
+
background: var(--mrl-button-background-color-active);
|
|
46
|
+
box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);
|
|
47
|
+
color: var(--mrl-button-text-color-active);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/// Default styles for button components when disabled
|
|
51
|
+
/// @group button
|
|
52
|
+
@mixin mrl-button-common-disabled() {
|
|
53
|
+
background: var(--mrl-button-background-color-disabled);
|
|
54
|
+
box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
|
|
55
|
+
color: var(--mrl-button-text-color-disabled);
|
|
56
|
+
cursor: default;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/// Styles for before element when the button has an underline/ bottom border
|
|
60
|
+
/// for the toggle style
|
|
61
|
+
/// @group button
|
|
62
|
+
/// @todo - remove this mixin once we verify no one is using it in the product
|
|
63
|
+
@mixin mrl-button-common-selected-underline {
|
|
64
|
+
background: var(--mrl-color-accent);
|
|
65
|
+
|
|
66
|
+
// This is a specific component overwrite
|
|
67
|
+
border-radius: 1px 1px 0 0;
|
|
68
|
+
bottom: calc((var(--mrl-button-underline-width) + var(--mrl-spacing-02)) * -1);
|
|
69
|
+
content: '';
|
|
70
|
+
display: block;
|
|
71
|
+
height: var(--mrl-button-underline-width);
|
|
72
|
+
left: var(--mrl-spacing-02);
|
|
73
|
+
position: absolute;
|
|
74
|
+
width: calc(100% - (var(--mrl-spacing-02) * 2));
|
|
75
|
+
}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Button shared variables
|
|
3
|
+
/// @group button
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
|
|
7
|
+
|
|
8
|
+
.mrlIconButton,
|
|
9
|
+
.mrlButton {
|
|
10
|
+
// background-color-skeleton, border-radius, and height are all
|
|
11
|
+
// defined in the foundation package under the button skeleton
|
|
12
|
+
--mrl-button-background-color: var(--mrl-color-background);
|
|
13
|
+
--mrl-button-background-color-active: rgba(var(--mrl-gray-30), 1);
|
|
14
|
+
--mrl-button-background-color-disabled: var(--mrl-color-background);
|
|
15
|
+
--mrl-button-background-color-hover: rgba(var(--mrl-gray-20), 1);
|
|
16
|
+
--mrl-button-border-color: rgba(var(--mrl-gray-80), 1);
|
|
17
|
+
--mrl-button-border-color-active: rgba(var(--mrl-black), 1);
|
|
18
|
+
--mrl-button-border-color-disabled: var(--mrl-color-line-disabled);
|
|
19
|
+
--mrl-button-border-color-hover: rgba(var(--mrl-gray-90), 1);
|
|
20
|
+
--mrl-button-border-width: var(--mrl-line-width-border);
|
|
21
|
+
--mrl-button-icon-size: var(--mrl-spacing-07);
|
|
22
|
+
--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
|
|
23
|
+
--mrl-button-text-color-active: rgba(var(--mrl-black), 1);
|
|
24
|
+
--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
|
|
25
|
+
--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
|
|
26
|
+
|
|
27
|
+
// Used for basic buttons only
|
|
28
|
+
--mrl-button-inset-vertical: 0;
|
|
29
|
+
--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
|
|
30
|
+
--mrl-button-icon-margin-right: var(--mrl-space-inline-related);
|
|
31
|
+
|
|
32
|
+
// Size variants need to be defined first as the ghost variant overwrites
|
|
33
|
+
// some of these rules
|
|
34
|
+
|
|
35
|
+
&--small {
|
|
36
|
+
@include mrl-button-size('small');
|
|
37
|
+
|
|
38
|
+
// Note: button height is defined in the button skeleton within ds-foundation
|
|
39
|
+
--mrl-button-icon-size: var(--mrl-spacing-06);
|
|
40
|
+
|
|
41
|
+
// Used for basic buttons only
|
|
42
|
+
--mrl-button-inset-horizontal: var(--mrl-spacing-04);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&.mrlIconButton--small {
|
|
46
|
+
@include mrl-button-size('small', true);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--large {
|
|
50
|
+
@include mrl-button-size('large');
|
|
51
|
+
|
|
52
|
+
// Note: button height is defined in the button skeleton within ds-foundation
|
|
53
|
+
// Used for basic buttons only
|
|
54
|
+
--mrl-button-inset-horizontal: var(--mrl-spacing-05);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.mrlIconButton--large {
|
|
58
|
+
@include mrl-button-size('large', true);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// Secondary (default) buttons are the only ones with a visible border, so
|
|
62
|
+
// we want to overwrite these styles for all other kinds
|
|
63
|
+
&.mrlButton--primary,
|
|
64
|
+
&.mrlButton--ghost,
|
|
65
|
+
&.mrlButton--ghost-inverse,
|
|
66
|
+
&.mrlIconButton--ghost {
|
|
67
|
+
--mrl-button-border-color: transparent;
|
|
68
|
+
--mrl-button-border-color-active: transparent;
|
|
69
|
+
--mrl-button-border-color-hover: transparent;
|
|
70
|
+
--mrl-button-border-color-disabled: transparent;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&--primary {
|
|
74
|
+
// Overrides mrl-button styles
|
|
75
|
+
--mrl-button-background-color: var(--mrl-color-brand);
|
|
76
|
+
--mrl-button-background-color-active: var(--mrl-color-brand-active);
|
|
77
|
+
--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
|
|
78
|
+
--mrl-button-background-color-hover: var(--mrl-color-brand-hover);
|
|
79
|
+
--mrl-button-text-color: var(--mrl-color-text-inverse);
|
|
80
|
+
--mrl-button-text-color-active: var(--mrl-color-text-inverse);
|
|
81
|
+
--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
|
|
82
|
+
--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&--ghost {
|
|
86
|
+
// Overrides mrl-button styles
|
|
87
|
+
--mrl-button-background-color: transparent;
|
|
88
|
+
--mrl-button-background-color-active: var(--mrl-black-opacity-01);
|
|
89
|
+
--mrl-button-background-color-hover: var(--mrl-black-opacity-00);
|
|
90
|
+
--mrl-button-background-color-disabled: transparent;
|
|
91
|
+
--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
|
|
92
|
+
--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
|
|
93
|
+
--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
|
|
94
|
+
--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
|
|
95
|
+
|
|
96
|
+
// Used for basic buttons only
|
|
97
|
+
--mrl-button-inset-horizontal: calc(
|
|
98
|
+
var(--mrl-spacing-01) + var(--mrl-spacing-02)
|
|
99
|
+
);
|
|
100
|
+
--mrl-button-icon-margin-right: var(--mrl-spacing-02);
|
|
101
|
+
|
|
102
|
+
// Toggle Button Styles
|
|
103
|
+
// For ghost buttons the selected state is always the same no matter what the toggle-style is
|
|
104
|
+
&[aria-pressed='true'],
|
|
105
|
+
&[aria-checked='true'],
|
|
106
|
+
&[aria-expanded='true'],
|
|
107
|
+
&[aria-selected='true'] {
|
|
108
|
+
--mrl-button-background-color: var(--mrl-color-background-inverse);
|
|
109
|
+
--mrl-button-text-color: var(--mrl-color-text-inverse);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&--ghost-inverse {
|
|
114
|
+
// Overrides mrl-button styles
|
|
115
|
+
--mrl-button-background-color: transparent;
|
|
116
|
+
--mrl-button-background-color-active: var(--mrl-white-opacity-04);
|
|
117
|
+
--mrl-button-background-color-hover: var(--mrl-white-opacity-02);
|
|
118
|
+
--mrl-button-background-color-disabled: transparent;
|
|
119
|
+
--mrl-button-text-color: var(--mrl-color-text-inverse);
|
|
120
|
+
--mrl-button-text-color-active: var(--mrl-color-text-inverse);
|
|
121
|
+
--mrl-button-text-color-hover: var(--mrl-color-text-inverse);
|
|
122
|
+
--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
|
|
123
|
+
|
|
124
|
+
// Used for basic buttons only
|
|
125
|
+
--mrl-button-inset-horizontal: calc(
|
|
126
|
+
var(--mrl-spacing-01) + var(--mrl-spacing-02)
|
|
127
|
+
);
|
|
128
|
+
--mrl-button-icon-margin-right: var(--mrl-spacing-02);
|
|
129
|
+
|
|
130
|
+
// Skeleton state for inverse buttons
|
|
131
|
+
&.mrlButton--skeleton {
|
|
132
|
+
--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Default Toggle Button Styles
|
|
136
|
+
&.toggleStyle--default[aria-pressed='true'],
|
|
137
|
+
&.toggleStyle--default[aria-checked='true'],
|
|
138
|
+
&.toggleStyle--default[aria-expanded='true'],
|
|
139
|
+
&.toggleStyle--default[aria-selected='true'] {
|
|
140
|
+
--mrl-button-background-color: var(--mrl-color-background);
|
|
141
|
+
--mrl-button-text-color: var(--mrl-color-text);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Secondary Toggle Button Styles
|
|
145
|
+
&.toggleStyle--secondary[aria-pressed='true'],
|
|
146
|
+
&.toggleStyle--secondary[aria-checked='true'],
|
|
147
|
+
&.toggleStyle--secondary[aria-expanded='true'],
|
|
148
|
+
&.toggleStyle--secondary[aria-selected='true'] {
|
|
149
|
+
--mrl-button-background-color: var(--mrl-color-accent);
|
|
150
|
+
--mrl-button-text-color: var(--mrl-color-text-inverse);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
// Disabled Toggle Button Styles
|
|
154
|
+
&[aria-disabled='true'][aria-pressed='true'],
|
|
155
|
+
&[aria-disabled='true'][aria-checked='true'],
|
|
156
|
+
&[aria-disabled='true'][aria-expanded='true'],
|
|
157
|
+
&[aria-disabled='true'][aria-selected='true'] {
|
|
158
|
+
--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
|
|
159
|
+
--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&--inverse {
|
|
164
|
+
// Overrides mrl-button styles
|
|
165
|
+
// Currently the inverse button does not follow any standard pattern of colors and
|
|
166
|
+
// requires component overwrites
|
|
167
|
+
--mrl-button-background-color: var(--mrl-color-background);
|
|
168
|
+
--mrl-button-background-color-active: var(--mrl-white-opacity-06);
|
|
169
|
+
--mrl-button-background-color-hover: var(--mrl-white-opacity-08);
|
|
170
|
+
--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
|
|
171
|
+
--mrl-button-border-color: rgba(var(--mrl-gray-20), 1);
|
|
172
|
+
--mrl-button-border-color-active: var(--mrl-black-opacity-00);
|
|
173
|
+
--mrl-button-border-color-hover: var(--mrl-black-opacity-00);
|
|
174
|
+
--mrl-button-border-color-disabled: var(--mrl-black-opacity-00);
|
|
175
|
+
--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
|
|
176
|
+
--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
|
|
177
|
+
--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
|
|
178
|
+
|
|
179
|
+
// Skeleton state for inverse buttons
|
|
180
|
+
&.mrlButton--skeleton {
|
|
181
|
+
--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// Disabled Toggle Button Styles
|
|
186
|
+
// -----------------------------------------------------------------------
|
|
187
|
+
&[aria-disabled='true'][aria-pressed='true'],
|
|
188
|
+
&[aria-disabled='true'][aria-checked='true'],
|
|
189
|
+
&[aria-disabled='true'][aria-expanded='true'],
|
|
190
|
+
&[aria-disabled='true'][aria-selected='true'] {
|
|
191
|
+
--mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
|
|
192
|
+
--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// SVG component variables
|
|
3
|
+
/// @group svg
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
.MrlSvg {
|
|
7
|
+
// default to `medium` size
|
|
8
|
+
--mrl-svg-size: var(--mrl-spacing-07);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.MrlSvg--small {
|
|
12
|
+
--mrl-svg-size: var(--mrl-spacing-06);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.MrlSvg--large {
|
|
16
|
+
--mrl-svg-size: var(--mrl-spacing-10);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.MrlSvg--auto {
|
|
20
|
+
--mrl-svg-size: 100%;
|
|
21
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Mural's tooltip shared styles
|
|
3
|
+
/// @group tooltip
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
/// Shared styles for text-related inputs such as text-input and textarea
|
|
7
|
+
/// There are no configurations for this mixin
|
|
8
|
+
///
|
|
9
|
+
/// @example @include mrl-text-inputs;
|
|
10
|
+
@mixin mrl-tooltip-show {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
pointer-events: inherit;
|
|
13
|
+
|
|
14
|
+
// We set these properties only on show so we don't have a delay/animation
|
|
15
|
+
// when the tooltip is hidden
|
|
16
|
+
transition-delay: var(--mrl-duration-03);
|
|
17
|
+
transition-duration: var(--mrl-duration-03);
|
|
18
|
+
transition-timing-function: var(--mrl-timing-m2);
|
|
19
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ui-toolkit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.1",
|
|
4
4
|
"description": "Mural's UI Toolkit",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -72,6 +72,7 @@
|
|
|
72
72
|
"@typescript-eslint/parser": "4.33.0",
|
|
73
73
|
"axe-playwright": "1.2.3",
|
|
74
74
|
"babel-loader": "9.1.2",
|
|
75
|
+
"copy-webpack-plugin": "11.0.0",
|
|
75
76
|
"css-loader": "6.7.3",
|
|
76
77
|
"eslint": "7.32.0",
|
|
77
78
|
"eslint-config-prettier": "8.6.0",
|