@muraldevkit/ui-toolkit 1.5.3 → 1.6.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 -2
- package/dist/components/index.d.ts +3 -2
- package/dist/components/link/constants.d.ts +18 -0
- package/dist/components/link/index.d.ts +39 -0
- package/dist/index.js +1 -1
- package/dist/src/components/link/link.module.scss +74 -0
- package/dist/utils/setAttributes/setAttributes.d.ts +1 -1
- package/package.json +1 -2
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
|
|
2
|
+
@use './variables.scss';
|
|
3
|
+
|
|
4
|
+
.mrl-link {
|
|
5
|
+
@include mrl-focus(
|
|
6
|
+
$element-radius: 'var(--mrl-radii-02)',
|
|
7
|
+
$border-width: 'var(--mrl-link-border-width)'
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
border-bottom: var(--mrl-link-border-width) var(--mrl-link-border-style) currentcolor;
|
|
11
|
+
color: var(--mrl-link-color);
|
|
12
|
+
font-weight: var(--mrl-link-font-weight);
|
|
13
|
+
text-decoration: none;
|
|
14
|
+
transition: all var(--mrl-duration-03) var(--mrl-timing-m2);
|
|
15
|
+
transition-property: border-color, color;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Color Scheme modifiers
|
|
19
|
+
a.mrl-link--inverse {
|
|
20
|
+
@include mrl-focus(
|
|
21
|
+
$is-inverse: 'true',
|
|
22
|
+
$element-radius: 'var(--mrl-radii-02)',
|
|
23
|
+
$border-width: 'var(--mrl-link-border-width)'
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Visited Links
|
|
28
|
+
// -----------------------------------------------------------------------
|
|
29
|
+
// Due to privacy restrictions the visited pseudo class is very particular about how it is styled
|
|
30
|
+
// and is limited in what it supports. We can not have an opacity or even define the color using
|
|
31
|
+
// RGBA even if the alpha is set to full opacity.
|
|
32
|
+
/* stylelint-disable color-function-notation */
|
|
33
|
+
a.mrl-link:visited {
|
|
34
|
+
color: rgb(var(--mrl-red-100));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
a.mrl-link--mono:visited {
|
|
38
|
+
color: rgb(var(--mrl-gray-80));
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
a.mrl-link--inverse:visited {
|
|
42
|
+
color: rgb(var(--mrl-white));
|
|
43
|
+
}
|
|
44
|
+
/* stylelint-enable color-function-notation */
|
|
45
|
+
|
|
46
|
+
// Link styles
|
|
47
|
+
// -----------------------------------------------------------------------
|
|
48
|
+
// Note the visited styles required the use of `a` within the selector but
|
|
49
|
+
// in order to overwrite the visited styles for visited links on hover and
|
|
50
|
+
// active following the LVHA rule we need to apply that selector here too
|
|
51
|
+
a.mrl-link:hover {
|
|
52
|
+
color: var(--mrl-link-color-hover);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
a.mrl-link:active {
|
|
56
|
+
color: var(--mrl-link-color-active);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Size Modifiers
|
|
60
|
+
a.mrl-link--large {
|
|
61
|
+
@include mrl-text-interactive('large');
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
a.mrl-link--medium {
|
|
65
|
+
@include mrl-text-interactive('medium');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
a.mrl-link--small {
|
|
69
|
+
@include mrl-text-interactive('small');
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
a.mrl-link--xsmall {
|
|
73
|
+
@include mrl-text-interactive('xsmall');
|
|
74
|
+
}
|
|
@@ -26,7 +26,7 @@ export declare const setClasses: (customClasses: AttrsObject | string | undefine
|
|
|
26
26
|
* Use when applying attributes such as a className directly to a react component.
|
|
27
27
|
* @returns {AttrsObject} - An object of component attributes
|
|
28
28
|
*/
|
|
29
|
-
export declare const setAttributes: (attributes: AttrsObject | string | undefined, defaults?: AttrsObject, className?: string
|
|
29
|
+
export declare const setAttributes: (attributes: AttrsObject | string | undefined, defaults?: AttrsObject, className?: string) => AttrsObject;
|
|
30
30
|
/**
|
|
31
31
|
* Generates unique identifier
|
|
32
32
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ui-toolkit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Mural's UI Toolkit",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -89,7 +89,6 @@
|
|
|
89
89
|
"jest": "29.5.0",
|
|
90
90
|
"jest-environment-jsdom": "29.5.0",
|
|
91
91
|
"lint-staged": "13.2.2",
|
|
92
|
-
"path": "^0.12.7",
|
|
93
92
|
"prettier": "2.8.8",
|
|
94
93
|
"prop-types": "^15.8.1",
|
|
95
94
|
"rimraf": "5.0.0",
|