@kylincloud/flamegraph 0.35.19 → 0.35.20

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kylincloud/flamegraph",
3
- "version": "0.35.19",
3
+ "version": "0.35.20",
4
4
  "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.node.cjs.js",
@@ -71,7 +71,7 @@ export const DiffLegendPaletteDropdown = (
71
71
  >
72
72
  {/* 触发按钮:当前色带预览 + 下拉箭头 */}
73
73
  <DiffLegend palette={palette} showMode="small" />
74
- <span className={styles.dropdownArrow}>▼</span>
74
+ <span className={styles.dropdownArrow}></span>
75
75
  </MenuButton>
76
76
  }
77
77
  onItemClick={(e) => {
@@ -9,7 +9,6 @@
9
9
  }
10
10
 
11
11
  .search {
12
- // 默认样式:白色背景,适用于 light 和 kylin 模式
13
12
  background: var(--ps-immutable-white);
14
13
  transition:
15
14
  background-color 0.1s ease-out,
@@ -23,16 +22,15 @@
23
22
  height: 37px;
24
23
  width: 100%;
25
24
 
26
- // 2)文本颜色改成“偏灰”,不要纯黑
27
- // 这里用一个接近 antd 的值:rgba(0, 0, 0, 0.65)
28
- color: rgba(0, 0, 0, 0.65);
25
+ /* 2)文本颜色改成“偏灰”,不要纯黑 */
26
+ color: rgba(0, 0, 0, 0.85);
29
27
 
30
- // 3)placeholder 再淡一点,类似 antd 的 placeholder
28
+ /* 3)placeholder 再淡一点,类似 antd 的 placeholder */
31
29
  &::placeholder {
32
30
  color: rgba(0, 0, 0, 0.25);
33
31
  }
34
32
 
35
- // 适配 light 和 kylin 模式
33
+ /* 适配 light 和 kylin 模式 */
36
34
  &.light,
37
35
  &.kylin {
38
36
  background: var(--ps-immutable-white);
@@ -40,7 +38,7 @@
40
38
  border-color: var(--ps-ui-border);
41
39
  }
42
40
 
43
- // 适配 dark 模式
41
+ /* 适配 dark 模式 */
44
42
  @media (prefers-color-scheme: dark) {
45
43
 
46
44
  &,
@@ -55,22 +53,30 @@
55
53
  }
56
54
  }
57
55
 
58
- // 聚焦样式
56
+ /* 聚焦时的绿色框样式 */
57
+ &:focus-visible {
58
+ background: var(--ps-immutable-white);
59
+ border-color: rgb(93, 151, 111);
60
+ box-shadow: 0 0 0 3px rgba(93, 151, 111, 0.4); /* 更强的阴影效果 */
61
+ outline: none; /* 确保没有其他 outline 样式 */
62
+ }
63
+
64
+ /* light 和 kylin 模式下的聚焦样式 */
59
65
  &.light:focus,
60
66
  &.kylin:focus {
61
67
  background: var(--ps-immutable-white);
62
68
  border-color: rgb(93, 151, 111);
63
- box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2);
64
- outline: none;
69
+ box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2); /* 较弱的阴影效果 */
70
+ outline: none; /* 确保没有其他 outline 样式 */
65
71
  }
66
72
 
67
- // dark 模式下的聚焦样式
73
+ /* dark 模式下的聚焦样式 */
68
74
  @media (prefers-color-scheme: dark) {
69
75
  &.dark:focus {
70
76
  background: var(--ps-immutable-dark-background);
71
- border-color: rgb(93, 151, 111);
72
- box-shadow: 0 0 0 2px rgba(93, 151, 111, 0.2);
73
- outline: none;
77
+ border-color: rgb(48, 48, 48); /* 使用更深的边框颜色 */
78
+ box-shadow: 0 0 0 2px rgba(48, 48, 48, 0.6); /* 更深的阴影效果 */
79
+ outline: none; /* 确保没有其他 outline 样式 */
74
80
  }
75
81
  }
76
82
  }