@muraldevkit/ui-toolkit 2.85.1-dev-fd9x.1 → 2.86.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.
Files changed (8) hide show
  1. package/dist/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.d.ts +3 -1
  2. package/dist/components/svg/config.d.ts +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/styles/MrlAvatar/module.scss +2 -2
  5. package/dist/styles/MrlBlockNotification/module.scss +24 -13
  6. package/dist/styles/MrlBlockNotification/variables.scss +5 -3
  7. package/package.json +1 -2
  8. package/dist/styles.css +0 -89
package/dist/styles/MrlAvatar/module.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  overflow: hidden;
11
11
  text-align: center;
12
12
  width: 100%;
13
- :global(.MrlSvgContainer) {
13
+ :global('.MrlSvgContainer') {
14
14
  display: block;
15
15
  height: auto;
16
16
  max-width: 100%;
@@ -67,7 +67,7 @@
67
67
  display: block;
68
68
  left: 50%;
69
69
  position: absolute;
70
- :global(.mrl-svg) {
70
+ :global('.mrl-svg') {
71
71
  margin: 0;
72
72
  }
73
73
  }
package/dist/styles/MrlBlockNotification/module.scss CHANGED
@@ -5,6 +5,13 @@
5
5
  @use './MrlBlockNotification.variables.scss';
6
6
  @use './MrlBlockNotification.mixins.scss' as *;
7
7
  $mrl-notification-close-inset: var(--mrl-spacing-02);
8
+ .mrl-blockNotification-icon {
9
+ display: flex;
10
+ min-width: fit-content;
11
+ svg {
12
+ color: var(--mrl-blockNotification-svg-color);
13
+ }
14
+ }
8
15
  .mrl-blockNotification {
9
16
  @include mrl-block-notification-animate-in;
10
17
  align-items: center;
@@ -18,22 +25,30 @@ $mrl-notification-close-inset: var(--mrl-spacing-02);
18
25
  padding: var(--mrl-blockNotification-inset-spacing);
19
26
  position: relative;
20
27
  width: 100%;
28
+ .mrl-blockNotification-close-wrapper {
29
+ position: absolute;
30
+ right: $mrl-notification-close-inset;
31
+ top: 50%;
32
+ transform: translateY(-50%);
33
+ svg {
34
+ color: var(--mrl-blockNotification-color);
35
+ }
36
+ }
21
37
  &[data-scope='inline'] {
22
38
  display: inline-flex;
23
39
  justify-content: start;
40
+ position: relative;
24
41
  width: 100%;
25
42
  .cta {
26
43
  margin: var(--mrl-blockNotification-cta-spacing);
27
44
  }
28
- }
29
- .mrl-blockNotification-close-wrapper {
30
- position: absolute;
31
- right: $mrl-notification-close-inset;
32
- top: 50%;
33
- transform: translateY(-50%);
34
- }
35
- svg {
36
- color: var(--mrl-blockNotification-color);
45
+ .mrl-blockNotification-icon {
46
+ align-self: baseline;
47
+ }
48
+ .mrl-blockNotification-close-wrapper {
49
+ position: absolute;
50
+ top: 20px;
51
+ }
37
52
  }
38
53
  }
39
54
  .mrl-blockNotification--dismissible {
@@ -62,7 +77,3 @@ $mrl-notification-close-inset: var(--mrl-spacing-02);
62
77
  display: inline;
63
78
  margin-right: var(--mrl-blockNotification-inline-spacing-message);
64
79
  }
65
- .mrl-blockNotification-icon {
66
- display: flex;
67
- min-width: fit-content;
68
- }
package/dist/styles/MrlBlockNotification/variables.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  &[data-scope='inline'] {
17
17
  --mrl-blockNotification-background: var(--mrl-color-background-info-light);
18
18
  --mrl-blockNotification-color: var(--mrl-color-text-info);
19
+ --mrl-blockNotification-svg-color: var(--mrl-color-text-info);
19
20
  --mrl-blockNotification-heading-color: var(--mrl-color-text-info);
20
21
  }
21
22
  }
@@ -24,6 +25,7 @@
24
25
  &[data-scope='inline'] {
25
26
  --mrl-blockNotification-background: var(--mrl-color-background-error-light);
26
27
  --mrl-blockNotification-color: var(--mrl-color-text-error);
28
+ --mrl-blockNotification-svg-color: var(--mrl-color-text-error);
27
29
  --mrl-blockNotification-heading-color: var(--mrl-color-text-error);
28
30
  }
29
31
  }
@@ -32,6 +34,7 @@
32
34
  &[data-scope='inline'] {
33
35
  --mrl-blockNotification-background: var(--mrl-color-background-success-light);
34
36
  --mrl-blockNotification-color: var(--mrl-color-text-success);
37
+ --mrl-blockNotification-svg-color: var(--mrl-color-text-success);
35
38
  --mrl-blockNotification-heading-color: var(--mrl-color-text-success);
36
39
  }
37
40
  }
@@ -39,13 +42,12 @@
39
42
  --mrl-blockNotification-background: var(--mrl-color-background-warning);
40
43
  --mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
41
44
  --mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
45
+ --mrl-blockNotification-svg-color: rgba(var(--mrl-color-text-warning), 1);
42
46
  &[data-scope='inline'] {
43
47
  --mrl-blockNotification-background: var(--mrl-color-background-warning-light);
44
48
  --mrl-blockNotification-color: var(--mrl-color-text-warning);
45
49
  --mrl-blockNotification-heading-color: var(--mrl-color-text-warning);
46
- svg {
47
- --mrl-blockNotification-color: var(--mrl-color-text-warning);
48
- }
50
+ --mrl-blockNotification-svg-color: rgba(var(--mrl-status-warning), 1);
49
51
  }
50
52
  }
51
53
  .mrl-blockNotification[data-kind='general'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "2.85.1-dev-fd9x.1",
3
+ "version": "2.86.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -108,7 +108,6 @@
108
108
  "jest-environment-jsdom": "29.5.0",
109
109
  "jest-matchmedia-mock": "1.1.0",
110
110
  "lint-staged": "13.2.2",
111
- "mini-css-extract-plugin": "2.9.0",
112
111
  "null-loader": "4.0.1",
113
112
  "prettier": "2.8.8",
114
113
  "react-markdown": "8.0.7",