@foblex/m-render 3.0.5 → 4.0.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 (15) hide show
  1. package/assets/styles/_alert.scss +9 -4
  2. package/assets/styles/_badge.scss +6 -5
  3. package/assets/styles/_button.scss +13 -4
  4. package/assets/styles/_code-group.scss +37 -0
  5. package/assets/styles/_code-highlight.scss +16 -35
  6. package/assets/styles/_code-view.scss +51 -33
  7. package/assets/styles/_doc-text.scss +27 -23
  8. package/assets/styles/_icons.scss +3 -3
  9. package/assets/styles/_table.scss +32 -11
  10. package/assets/styles/_variables.scss +224 -139
  11. package/assets/styles/styles.scss +5 -0
  12. package/fesm2022/foblex-m-render.mjs +53 -35
  13. package/fesm2022/foblex-m-render.mjs.map +1 -1
  14. package/package.json +1 -1
  15. package/types/foblex-m-render.d.ts +4 -1
package/assets/styles/_alert.scss CHANGED
@@ -1,18 +1,18 @@
1
1
  .m-render {
2
2
 
3
3
  .f-alert {
4
- margin: 16px 0;
4
+ margin: 20px 0;
5
5
  border-radius: var(--f-alert-border-radius);
6
- padding: 16px 16px 8px;
6
+ padding: 14px 16px 10px;
7
7
  line-height: 24px;
8
8
  font-size: 14px;
9
- border: none;
9
+ border: 1px solid transparent;
10
+ box-shadow: var(--shadow-1);
10
11
 
11
12
  .f-alert-title {
12
13
  margin: 0;
13
14
  line-height: inherit;
14
15
  font-weight: 600;
15
- text-transform: uppercase;
16
16
  }
17
17
 
18
18
  p {
@@ -25,26 +25,31 @@
25
25
  &.tip {
26
26
  color: var(--f-alert-tip-color);
27
27
  background-color: var(--f-alert-tip-background);
28
+ border-color: var(--f-alert-tip-border-color);
28
29
  }
29
30
 
30
31
  &.info {
31
32
  color: var(--f-alert-info-color);
32
33
  background-color: var(--f-alert-info-background);
34
+ border-color: var(--f-alert-info-border-color);
33
35
  }
34
36
 
35
37
  &.warning {
36
38
  color: var(--f-alert-warning-color);
37
39
  background-color: var(--f-alert-warning-background);
40
+ border-color: var(--f-alert-warning-border-color);
38
41
  }
39
42
 
40
43
  &.danger {
41
44
  color: var(--f-alert-danger-color);
42
45
  background-color: var(--f-alert-danger-background);
46
+ border-color: var(--f-alert-danger-border-color);
43
47
  }
44
48
 
45
49
  &.success {
46
50
  color: var(--f-alert-success-color);
47
51
  background-color: var(--f-alert-success-background);
52
+ border-color: var(--f-alert-success-border-color);
48
53
  }
49
54
  }
50
55
  }
package/assets/styles/_badge.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  .f-badge {
2
2
  display: inline-block;
3
- border: 1px solid transparent;
4
- border-radius: var(--border-radius);
3
+ border: 1px solid var(--divider-color);
4
+ border-radius: 999px;
5
5
  padding: 0 10px;
6
6
  line-height: 22px;
7
- font-size: 12px;
8
- font-weight: 500;
7
+ font-size: 11px;
8
+ font-weight: 600;
9
+ letter-spacing: 0.02em;
9
10
 
10
11
  &.tip {
11
12
  color: var(--f-badge-tip-color);
@@ -36,7 +37,7 @@
36
37
  f-navigation-panel {
37
38
  .f-badge {
38
39
  padding: 0 6px;
39
- line-height: 14px;
40
+ line-height: 18px;
40
41
  }
41
42
  }
42
43
 
package/assets/styles/_button.scss CHANGED
@@ -3,40 +3,49 @@
3
3
  text-align: center;
4
4
  font-weight: 600;
5
5
  white-space: nowrap;
6
- transition: color .25s, background-color .25s;
6
+ transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
7
7
 
8
- border-radius: 4px;
9
- padding: 0 20px;
10
- line-height: 38px;
8
+ border: 1px solid var(--button-default-border);
9
+ border-radius: 999px;
10
+ padding: 0 18px;
11
+ line-height: 36px;
11
12
  font-size: 14px;
12
13
 
13
14
  color: var(--button-default-text);
14
15
  background-color: var(--button-default-bg);
16
+ box-shadow: var(--shadow-1);
15
17
  cursor: pointer;
16
18
  pointer-events: all;
17
19
 
18
20
  &:hover {
19
21
  color: var(--button-default-hover-text);
20
22
  background-color: var(--button-default-hover-bg);
23
+ border-color: var(--button-default-hover-border);
24
+ transform: translateY(-1px);
21
25
  }
22
26
 
23
27
  &:active {
24
28
  color: var(--button-default-active-text);
25
29
  background-color: var(--button-default-active-bg);
30
+ border-color: var(--button-default-active-border);
31
+ transform: translateY(0);
26
32
  }
27
33
 
28
34
  &.primary {
29
35
  color: var(--button-primary-text);
30
36
  background-color: var(--button-primary-bg);
37
+ border-color: var(--button-primary-border);
31
38
 
32
39
  &:hover {
33
40
  color: var(--button-primary-hover-text);
34
41
  background-color: var(--button-primary-hover-bg);
42
+ border-color: var(--button-primary-hover-border);
35
43
  }
36
44
 
37
45
  &:active {
38
46
  color: var(--button-primary-active-text);
39
47
  background-color: var(--button-primary-active-bg);
48
+ border-color: var(--button-primary-active-border);
40
49
  }
41
50
  }
42
51
  }
package/assets/styles/_code-group.scss CHANGED
@@ -3,9 +3,16 @@
3
3
  margin-top: 12px;
4
4
  }
5
5
 
6
+ .f-code-group + .f-code-group {
7
+ margin-top: 16px;
8
+ }
9
+
6
10
  .f-code-group {
7
11
  display: block;
12
+ border: 1px solid var(--code-view-border-color);
8
13
  border-radius: var(--code-group-border-radius);
14
+ background-color: var(--code-group-tabs-background);
15
+ box-shadow: var(--shadow-1);
9
16
  overflow: hidden;
10
17
  height: 100%;
11
18
  width: 100%;
@@ -42,9 +49,39 @@
42
49
  display: flex;
43
50
  justify-content: flex-start;
44
51
  align-items: flex-start;
52
+ background-color: var(--code-view-background);
45
53
  height: calc(100% - 52px);
46
54
  overflow: auto;
47
55
  position: relative;
56
+
57
+ > .f-code-view,
58
+ > .f-example-view {
59
+ width: 100%;
60
+ border: 0;
61
+ border-radius: 0;
62
+ box-shadow: none;
63
+ background-color: transparent;
64
+ }
65
+
66
+ > .f-code-view pre code {
67
+ border-radius: 0;
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ @media (hover: hover) {
74
+ .m-render {
75
+ .f-code-group {
76
+ .f-code-group-body > .f-code-view .f-copy-button {
77
+ opacity: 0;
78
+ pointer-events: none;
79
+ }
80
+
81
+ &:hover .f-code-group-body > .f-code-view .f-copy-button {
82
+ opacity: 1;
83
+ pointer-events: auto;
84
+ }
48
85
  }
49
86
  }
50
87
  }
package/assets/styles/_code-highlight.scss CHANGED
@@ -1,37 +1,18 @@
1
1
  .m-render {
2
- --token-tag: #1d4ed8;
3
- --token-attr-name: #7c3aed;
4
- --token-attr-value: #0f7a43;
5
- --token-string: #0f8a55;
6
- --token-punctuation: #2f3441;
7
- --token-keyword: #6d28d9;
8
- --token-function: #1e40af;
9
- --token-number: #b45309;
10
- --token-operator: #4b5563;
11
- --token-interpolation: #8b3cf6;
12
- --token-expression: #0c7a4c;
13
- --token-comment: #6b7280;
14
- --token-selector: #1d4ed8;
15
- --token-variable: #9b2fae;
16
- }
17
-
18
- .dark {
19
- .m-render {
20
- --token-tag: #8fb5ff;
21
- --token-attr-name: #d2b4ff;
22
- --token-attr-value: #7fe3a0;
23
- --token-string: #84e1a8;
24
- --token-punctuation: #ececf2;
25
- --token-keyword: #cab8ff;
26
- --token-function: #79a6ff;
27
- --token-number: #f3c97a;
28
- --token-operator: #b6bbca;
29
- --token-interpolation: #e4b8ff;
30
- --token-expression: #8fe7b8;
31
- --token-comment: #8d95a5;
32
- --token-selector: #8fb5ff;
33
- --token-variable: #ffb4d8;
34
- }
2
+ --token-tag: var(--primary-text);
3
+ --token-attr-name: var(--important-2);
4
+ --token-attr-value: var(--success-2);
5
+ --token-string: var(--success-2);
6
+ --token-punctuation: var(--secondary-text);
7
+ --token-keyword: var(--important-2);
8
+ --token-function: var(--primary-text);
9
+ --token-number: var(--warning-2);
10
+ --token-operator: var(--secondary-text);
11
+ --token-interpolation: var(--important-1);
12
+ --token-expression: var(--primary-text);
13
+ --token-comment: var(--tertiary-text);
14
+ --token-selector: var(--primary-text);
15
+ --token-variable: var(--important-1);
35
16
  }
36
17
 
37
18
  .m-render {
@@ -95,7 +76,7 @@
95
76
  .m-render {
96
77
  .language-scss .token.selector,
97
78
  .language-css .token.selector {
98
- color: var(--token-selector, #3e63dd);
79
+ color: var(--token-selector, var(--primary-text));
99
80
  }
100
81
 
101
82
  .language-scss .token.property,
@@ -111,7 +92,7 @@
111
92
  }
112
93
 
113
94
  .language-scss .token.variable {
114
- color: var(--token-variable, #d17adf);
95
+ color: var(--token-variable, var(--important-1));
115
96
  }
116
97
 
117
98
  .language-scss .token.keyword {
package/assets/styles/_code-view.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  code {
20
20
  display: block;
21
- padding: 16px 24px;
21
+ padding: 18px 22px;
22
22
  width: fit-content;
23
23
  min-width: 100%;
24
24
  line-height: var(--code-view-line-height);
@@ -30,81 +30,99 @@
30
30
  .f-code-view, .f-example-view {
31
31
  position: relative;
32
32
  background-color: var(--code-view-background);
33
+ border: 1px solid var(--code-view-border-color);
34
+ box-shadow: var(--shadow-1);
33
35
  border-radius: var(--code-view-border-radius);
34
36
  overflow-x: auto;
35
37
  width: 100%;
36
38
 
37
39
  .f-copy-button {
38
40
  position: absolute;
39
- top: 8px;
40
- right: 20px;
41
+ top: 10px;
42
+ right: 10px;
41
43
  border: 1px solid var(--code-view-copy-button-border-color);
42
- border-radius: 4px;
43
- width: 32px;
44
- height: 32px;
44
+ border-radius: 10px;
45
+ min-width: 58px;
46
+ height: 28px;
47
+ padding: 0 12px;
45
48
  z-index: 3;
46
49
  background-color: var(--code-view-copy-button-background);
47
- opacity: 0;
50
+ opacity: 1;
48
51
  cursor: pointer;
49
- background-image: var(--copy-icon);
50
- background-position: 50%;
51
- background-size: 14px;
52
- background-repeat: no-repeat;
53
- transition: background-color 0.25s, opacity 0.25s;
52
+ color: var(--primary-text);
53
+ font-size: 12px;
54
+ font-weight: 600;
55
+ line-height: 1;
56
+ transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
54
57
 
55
58
  &:hover {
56
59
  background-color: var(--code-view-copy-button-hover-background);
60
+ border-color: var(--dark-divider-color);
57
61
  }
58
62
  }
59
63
 
60
64
  .f-fullscreen-button {
61
65
  position: absolute;
62
- top: 8px;
63
- right: 20px;
66
+ top: 12px;
67
+ right: 14px;
64
68
  border: 1px solid var(--code-view-copy-button-border-color);
65
- border-radius: 4px;
66
- width: 32px;
67
- height: 32px;
69
+ border-radius: 999px;
70
+ width: 34px;
71
+ height: 34px;
68
72
  z-index: 3;
69
73
  background-color: var(--code-view-copy-button-background);
70
74
  opacity: 0;
71
75
  cursor: pointer;
72
- background-image: var(--fullscreen-icon);
73
- background-position: 50%;
74
- background-size: 14px;
75
- background-repeat: no-repeat;
76
76
  transition: background-color 0.25s, opacity 0.25s;
77
77
 
78
+ &::before {
79
+ content: "";
80
+ position: absolute;
81
+ inset: 0;
82
+ margin: auto;
83
+ width: 14px;
84
+ height: 14px;
85
+ background-color: var(--secondary-text);
86
+ mask-image: var(--fullscreen-icon);
87
+ mask-position: center;
88
+ mask-repeat: no-repeat;
89
+ mask-size: 14px 14px;
90
+ }
91
+
78
92
  &.exit {
79
- background-image: var(--fullscreen-exit-icon);
93
+ &::before {
94
+ mask-image: var(--fullscreen-exit-icon);
95
+ }
80
96
  }
81
97
 
82
98
  &:hover {
83
99
  background-color: var(--code-view-copy-button-hover-background);
100
+
101
+ &::before {
102
+ background-color: var(--primary-text);
103
+ }
84
104
  }
85
105
  }
86
106
 
87
107
  .f-code-language {
88
108
  position: absolute;
89
- top: 2px;
90
- right: 20px;
91
- font-size: 12px;
92
- font-weight: 500;
109
+ top: 18px;
110
+ right: 80px;
111
+ font-size: 10px;
112
+ font-weight: 400;
93
113
  color: var(--code-view-lang-color);
94
114
  transition: opacity 0.4s;
115
+ letter-spacing: 0.02em;
116
+ opacity: 0.72;
95
117
  }
96
118
 
97
119
  &:hover {
98
- .f-copy-button {
99
- opacity: 1;
100
-
101
- &:active {
102
- opacity: 0.1;
103
- }
120
+ .f-copy-button:active {
121
+ opacity: 0.7;
104
122
  }
105
123
 
106
124
  .f-code-language {
107
- opacity: 0;
125
+ opacity: 0.85;
108
126
  }
109
127
 
110
128
  .f-fullscreen-button {
package/assets/styles/_doc-text.scss CHANGED
@@ -9,38 +9,38 @@
9
9
 
10
10
  h1 {
11
11
  letter-spacing: -0.02em;
12
- line-height: 40px;
13
- font-size: 28px;
12
+ line-height: 1.15;
13
+ font-size: 30px;
14
14
  }
15
15
 
16
16
  h2 {
17
- margin: 48px 0 16px;
17
+ margin: 56px 0 18px;
18
18
  border-top: 1px solid var(--divider-color);
19
- padding-top: 24px;
19
+ padding-top: 28px;
20
20
  letter-spacing: -0.02em;
21
- line-height: 32px;
22
- font-size: 24px;
21
+ line-height: 1.2;
22
+ font-size: 26px;
23
23
  }
24
24
 
25
25
  h3 {
26
- margin: 32px 0 0;
26
+ margin: 36px 0 0;
27
27
  letter-spacing: -0.01em;
28
- line-height: 28px;
29
- font-size: 20px;
28
+ line-height: 1.25;
29
+ font-size: 21px;
30
30
  }
31
31
 
32
32
  h4 {
33
33
  margin: 24px 0 0;
34
34
  letter-spacing: -0.01em;
35
- line-height: 24px;
35
+ line-height: 1.35;
36
36
  font-size: 18px;
37
37
  }
38
38
 
39
39
  @media (min-width: 768px) {
40
40
  h1 {
41
41
  letter-spacing: -0.02em;
42
- line-height: 40px;
43
- font-size: 32px;
42
+ line-height: 1.1;
43
+ font-size: 36px;
44
44
  }
45
45
  }
46
46
 
@@ -51,13 +51,15 @@
51
51
  }
52
52
 
53
53
  p {
54
- line-height: 28px;
54
+ line-height: 1.8;
55
55
  }
56
56
 
57
57
  blockquote {
58
- margin: 16px 0;
59
- border-left: 2px solid var(--divider-color);
60
- padding-left: 16px;
58
+ margin: 24px 0;
59
+ border: 1px solid var(--divider-color);
60
+ border-radius: calc(var(--border-radius) - 2px);
61
+ padding: 16px 18px;
62
+ background-color: var(--surface-glass);
61
63
  color: var(--secondary-text);
62
64
  }
63
65
 
@@ -68,12 +70,14 @@
68
70
 
69
71
  a {
70
72
  font-weight: 500;
71
- color: var(--primary-1);
73
+ color: var(--primary-text);
72
74
  text-decoration: underline;
73
- text-underline-offset: 2px;
75
+ text-decoration-color: var(--alpha-20);
76
+ text-underline-offset: 3px;
74
77
 
75
78
  &:hover {
76
- color: var(--primary-2);
79
+ color: var(--primary-text);
80
+ text-decoration-color: currentColor;
77
81
  }
78
82
  }
79
83
 
@@ -103,7 +107,7 @@
103
107
  }
104
108
 
105
109
  hr {
106
- margin: 16px 0;
110
+ margin: 24px 0;
107
111
  border: none;
108
112
  border-top: 1px solid var(--divider-color);
109
113
  }
@@ -111,8 +115,9 @@
111
115
  :not(pre) > code {
112
116
  font-size: var(--not-pre-code-font-size);
113
117
  color: var(--not-pre-code-color);
114
- border-radius: var(--border-radius);
115
- padding: 3px 6px;
118
+ border: 1px solid var(--divider-color);
119
+ border-radius: 8px;
120
+ padding: 3px 7px;
116
121
  background-color: var(--not-pre-code-background);
117
122
 
118
123
  word-wrap: break-word;
@@ -121,4 +126,3 @@
121
126
  }
122
127
  }
123
128
 
124
-
package/assets/styles/_icons.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
- --copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
3
- --fullscreen-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
4
- --fullscreen-exit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3C/svg%3E");
2
+ --copy-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
3
+ --fullscreen-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
4
+ --fullscreen-exit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M21 16h-3a2 2 0 0 0-2 2v3'/%3E%3C/svg%3E");
5
5
  }
6
6
 
7
7
  .f-icon {
package/assets/styles/_table.scss CHANGED
@@ -2,15 +2,14 @@
2
2
 
3
3
  table {
4
4
  width: 100%;
5
- border-collapse: collapse;
5
+ border-collapse: separate;
6
+ border-spacing: 0;
6
7
  font-size: 14px;
7
8
  line-height: 1.6;
8
- margin: 16px 0;
9
-
10
- thead {
11
- background-color: var(--alt-background);
12
- color: var(--primary-text);
13
- }
9
+ margin: 24px 0;
10
+ border: 1px solid var(--divider-color);
11
+ border-radius: var(--border-radius);
12
+ box-shadow: var(--shadow-1);
14
13
 
15
14
  th,
16
15
  td {
@@ -18,18 +17,40 @@
18
17
  text-align: left;
19
18
  border-bottom: 1px solid var(--divider-color);
20
19
  color: var(--primary-text);
20
+ background-clip: padding-box;
21
21
  }
22
22
 
23
23
  th {
24
24
  font-weight: 600;
25
+ background-color: var(--surface-glass-strong);
25
26
  }
26
27
 
27
- tr {
28
+ td {
28
29
  background-color: var(--background-color);
30
+ }
31
+
32
+ thead th:first-child {
33
+ border-top-left-radius: calc(var(--border-radius) - 1px);
34
+ }
35
+
36
+ thead th:last-child {
37
+ border-top-right-radius: calc(var(--border-radius) - 1px);
38
+ }
39
+
40
+ tbody tr:hover td {
41
+ background-color: var(--soft-background);
42
+ }
43
+
44
+ tbody tr:last-child td {
45
+ border-bottom: 0;
46
+ }
47
+
48
+ tbody tr:last-child td:first-child {
49
+ border-bottom-left-radius: calc(var(--border-radius) - 1px);
50
+ }
29
51
 
30
- &:hover {
31
- background-color: var(--soft-background);
32
- }
52
+ tbody tr:last-child td:last-child {
53
+ border-bottom-right-radius: calc(var(--border-radius) - 1px);
33
54
  }
34
55
 
35
56
  code {