@skygraph/styles 0.6.4 → 0.6.6

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 (68) hide show
  1. package/README.md +98 -98
  2. package/components/autocomplete.css +35 -35
  3. package/components/autofield.css +67 -67
  4. package/components/avatar.css +37 -37
  5. package/components/badge.css +102 -102
  6. package/components/breadcrumb.css +29 -29
  7. package/components/button.css +181 -181
  8. package/components/calendar.css +408 -408
  9. package/components/carousel.css +102 -102
  10. package/components/cascader.css +380 -380
  11. package/components/charts.css +408 -408
  12. package/components/checkbox.css +114 -114
  13. package/components/collapse.css +166 -166
  14. package/components/colorpicker.css +252 -252
  15. package/components/context-menu.css +95 -95
  16. package/components/descriptions.css +82 -82
  17. package/components/diagram.css +435 -435
  18. package/components/drawer.css +124 -124
  19. package/components/dropdown.css +110 -110
  20. package/components/empty.css +25 -25
  21. package/components/event-timeline.css +134 -134
  22. package/components/field.css +35 -35
  23. package/components/form.css +115 -115
  24. package/components/gantt.css +166 -166
  25. package/components/input-number.css +76 -76
  26. package/components/input-password.css +104 -104
  27. package/components/input.css +211 -211
  28. package/components/list.css +366 -366
  29. package/components/mentions.css +54 -54
  30. package/components/menu.css +326 -326
  31. package/components/modal.css +1 -0
  32. package/components/notification.css +128 -128
  33. package/components/pagination.css +162 -162
  34. package/components/popconfirm.css +95 -95
  35. package/components/progress.css +116 -116
  36. package/components/radio.css +95 -95
  37. package/components/rate.css +48 -48
  38. package/components/resource-calendar.css +224 -224
  39. package/components/result.css +45 -45
  40. package/components/schema-form-editor.css +433 -433
  41. package/components/search-input.css +112 -112
  42. package/components/segmented.css +76 -76
  43. package/components/select.css +181 -181
  44. package/components/skeleton.css +72 -72
  45. package/components/slider.css +51 -51
  46. package/components/spin.css +102 -102
  47. package/components/steps.css +194 -194
  48. package/components/switch.css +75 -75
  49. package/components/table.css +9 -1
  50. package/components/tabs.css +137 -137
  51. package/components/tag.css +61 -61
  52. package/components/textarea.css +22 -22
  53. package/components/timeline.css +169 -169
  54. package/components/timepicker.css +224 -224
  55. package/components/tooltip.css +91 -91
  56. package/components/transfer.css +140 -140
  57. package/components/tree.css +601 -601
  58. package/components/treeselect.css +221 -221
  59. package/components/upload.css +124 -124
  60. package/index.css +70 -70
  61. package/index.d.ts +9 -9
  62. package/package.json +1 -1
  63. package/print.css +88 -88
  64. package/reset.css +17 -17
  65. package/themes/dark.css +17 -17
  66. package/themes/default.css +14 -14
  67. package/tokens.css +310 -310
  68. package/transitions.css +158 -158
package/components/breadcrumb.css CHANGED
@@ -1,29 +1,29 @@
1
- .sg-breadcrumb {
2
- display: flex;
3
- align-items: center;
4
- flex-wrap: wrap;
5
- font-size: var(--sg-font-size);
6
- color: var(--sg-color-text);
7
- line-height: var(--sg-line-height);
8
- }
9
-
10
- .sg-breadcrumb-link {
11
- color: var(--sg-color-text-secondary);
12
- text-decoration: none;
13
- cursor: pointer;
14
- transition: color var(--sg-transition-duration) var(--sg-transition-timing);
15
- }
16
-
17
- .sg-breadcrumb-link:hover {
18
- color: var(--sg-color-primary);
19
- }
20
-
21
- .sg-breadcrumb-current {
22
- color: var(--sg-color-text);
23
- font-weight: 500;
24
- }
25
-
26
- .sg-breadcrumb-separator {
27
- margin: 0 var(--sg-padding-sm);
28
- color: var(--sg-color-text-tertiary);
29
- }
1
+ .sg-breadcrumb {
2
+ display: flex;
3
+ align-items: center;
4
+ flex-wrap: wrap;
5
+ font-size: var(--sg-font-size);
6
+ color: var(--sg-color-text);
7
+ line-height: var(--sg-line-height);
8
+ }
9
+
10
+ .sg-breadcrumb-link {
11
+ color: var(--sg-color-text-secondary);
12
+ text-decoration: none;
13
+ cursor: pointer;
14
+ transition: color var(--sg-transition-duration) var(--sg-transition-timing);
15
+ }
16
+
17
+ .sg-breadcrumb-link:hover {
18
+ color: var(--sg-color-primary);
19
+ }
20
+
21
+ .sg-breadcrumb-current {
22
+ color: var(--sg-color-text);
23
+ font-weight: 500;
24
+ }
25
+
26
+ .sg-breadcrumb-separator {
27
+ margin: 0 var(--sg-padding-sm);
28
+ color: var(--sg-color-text-tertiary);
29
+ }
package/components/button.css CHANGED
@@ -1,181 +1,181 @@
1
- .sg-button {
2
- --sg-btn-bg: transparent;
3
- --sg-btn-color: var(--sg-color-text);
4
- --sg-btn-border: var(--sg-color-border);
5
- --sg-btn-height: var(--sg-height-md);
6
- --sg-btn-padding: 0 var(--sg-padding-md);
7
- --sg-btn-radius: var(--sg-border-radius);
8
- --sg-btn-font-size: var(--sg-font-size);
9
-
10
- display: inline-flex;
11
- align-items: center;
12
- justify-content: center;
13
- gap: var(--sg-padding-xs);
14
- height: var(--sg-btn-height);
15
- padding: var(--sg-btn-padding);
16
- font-size: var(--sg-btn-font-size);
17
- line-height: var(--sg-line-height);
18
- color: var(--sg-btn-color);
19
- background: var(--sg-btn-bg);
20
- border: 1px solid var(--sg-btn-border);
21
- border-radius: var(--sg-btn-radius);
22
- cursor: pointer;
23
- transition: color var(--sg-transition-duration) var(--sg-transition-timing),
24
- background var(--sg-transition-duration) var(--sg-transition-timing),
25
- border-color var(--sg-transition-duration) var(--sg-transition-timing),
26
- box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
27
- user-select: none;
28
- white-space: nowrap;
29
- font-family: inherit;
30
- }
31
-
32
- .sg-button:hover {
33
- --sg-btn-color: var(--sg-color-primary-hover);
34
- --sg-btn-border: var(--sg-color-primary-hover);
35
- }
36
-
37
- .sg-button:active {
38
- --sg-btn-color: var(--sg-color-primary-active);
39
- --sg-btn-border: var(--sg-color-primary-active);
40
- }
41
-
42
- .sg-button:focus-visible {
43
- outline: none;
44
- --sg-btn-border: var(--sg-color-primary);
45
- box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
46
- }
47
-
48
- .sg-button:disabled {
49
- --sg-btn-color: var(--sg-color-text-disabled);
50
- --sg-btn-border: var(--sg-color-border);
51
- --sg-btn-bg: var(--sg-color-bg-disabled);
52
- cursor: not-allowed;
53
- }
54
-
55
- .sg-button-primary {
56
- --sg-btn-bg: var(--sg-color-primary);
57
- --sg-btn-color: var(--sg-color-white);
58
- --sg-btn-border: var(--sg-color-primary);
59
- }
60
- .sg-button-primary:hover {
61
- --sg-btn-bg: var(--sg-color-primary-hover);
62
- --sg-btn-color: var(--sg-color-white);
63
- --sg-btn-border: var(--sg-color-primary-hover);
64
- }
65
- .sg-button-primary:active {
66
- --sg-btn-bg: var(--sg-color-primary-active);
67
- --sg-btn-color: var(--sg-color-white);
68
- --sg-btn-border: var(--sg-color-primary-active);
69
- }
70
-
71
- .sg-button-dashed {
72
- border-style: dashed;
73
- }
74
-
75
- .sg-button-text {
76
- --sg-btn-border: transparent;
77
- --sg-btn-bg: transparent;
78
- }
79
- .sg-button-text:hover {
80
- --sg-btn-bg: var(--sg-color-bg-hover);
81
- --sg-btn-border: transparent;
82
- }
83
-
84
- .sg-button-link {
85
- --sg-btn-color: var(--sg-color-primary);
86
- --sg-btn-border: transparent;
87
- --sg-btn-bg: transparent;
88
- }
89
- .sg-button-link:hover {
90
- --sg-btn-color: var(--sg-color-primary-hover);
91
- }
92
-
93
- .sg-button-small {
94
- --sg-btn-height: var(--sg-height-sm);
95
- --sg-btn-padding: 0 var(--sg-padding-sm);
96
- --sg-btn-font-size: var(--sg-font-size-sm);
97
- }
98
- .sg-button-large {
99
- --sg-btn-height: var(--sg-height-lg);
100
- --sg-btn-padding: 0 var(--sg-padding-lg);
101
- --sg-btn-font-size: var(--sg-font-size-lg);
102
- }
103
-
104
- .sg-button-loading {
105
- cursor: default;
106
- opacity: 0.65;
107
- --sg-spin-color: currentColor;
108
- }
109
-
110
- /* === Danger variant ===
111
- * Combines with `type`:
112
- * default → red text + red border
113
- * primary → solid red fill
114
- * dashed → red dashed border + red text
115
- * text → red text, transparent bg (red bg on hover)
116
- * link → red text, no border
117
- */
118
- .sg-button-danger {
119
- --sg-btn-color: var(--sg-color-error);
120
- --sg-btn-border: var(--sg-color-error);
121
- }
122
- .sg-button-danger:hover {
123
- --sg-btn-color: var(--sg-red-6);
124
- --sg-btn-border: var(--sg-red-6);
125
- }
126
- .sg-button-danger:active {
127
- --sg-btn-color: var(--sg-red-6);
128
- --sg-btn-border: var(--sg-red-6);
129
- }
130
- .sg-button-danger:focus-visible {
131
- --sg-btn-border: var(--sg-color-error);
132
- box-shadow: 0 0 0 2px var(--sg-color-error-bg);
133
- }
134
-
135
- .sg-button-primary.sg-button-danger {
136
- --sg-btn-bg: var(--sg-color-error);
137
- --sg-btn-color: var(--sg-color-white);
138
- --sg-btn-border: var(--sg-color-error);
139
- }
140
- .sg-button-primary.sg-button-danger:hover {
141
- --sg-btn-bg: var(--sg-red-6);
142
- --sg-btn-color: var(--sg-color-white);
143
- --sg-btn-border: var(--sg-red-6);
144
- }
145
- .sg-button-primary.sg-button-danger:active {
146
- --sg-btn-bg: var(--sg-red-6);
147
- --sg-btn-color: var(--sg-color-white);
148
- --sg-btn-border: var(--sg-red-6);
149
- }
150
-
151
- .sg-button-text.sg-button-danger {
152
- --sg-btn-bg: transparent;
153
- --sg-btn-border: transparent;
154
- --sg-btn-color: var(--sg-color-error);
155
- }
156
- .sg-button-text.sg-button-danger:hover {
157
- --sg-btn-bg: var(--sg-color-error-bg);
158
- --sg-btn-border: transparent;
159
- --sg-btn-color: var(--sg-color-error);
160
- }
161
-
162
- .sg-button-link.sg-button-danger {
163
- --sg-btn-bg: transparent;
164
- --sg-btn-border: transparent;
165
- --sg-btn-color: var(--sg-color-error);
166
- }
167
- .sg-button-link.sg-button-danger:hover {
168
- --sg-btn-color: var(--sg-red-6);
169
- }
170
-
171
- .sg-button-danger:disabled {
172
- --sg-btn-color: var(--sg-color-text-disabled);
173
- --sg-btn-border: var(--sg-color-border);
174
- --sg-btn-bg: var(--sg-color-bg-disabled);
175
- }
176
-
177
- /* === Block: stretch to parent width === */
178
- .sg-button-block {
179
- display: flex;
180
- width: 100%;
181
- }
1
+ .sg-button {
2
+ --sg-btn-bg: transparent;
3
+ --sg-btn-color: var(--sg-color-text);
4
+ --sg-btn-border: var(--sg-color-border);
5
+ --sg-btn-height: var(--sg-height-md);
6
+ --sg-btn-padding: 0 var(--sg-padding-md);
7
+ --sg-btn-radius: var(--sg-border-radius);
8
+ --sg-btn-font-size: var(--sg-font-size);
9
+
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ gap: var(--sg-padding-xs);
14
+ height: var(--sg-btn-height);
15
+ padding: var(--sg-btn-padding);
16
+ font-size: var(--sg-btn-font-size);
17
+ line-height: var(--sg-line-height);
18
+ color: var(--sg-btn-color);
19
+ background: var(--sg-btn-bg);
20
+ border: 1px solid var(--sg-btn-border);
21
+ border-radius: var(--sg-btn-radius);
22
+ cursor: pointer;
23
+ transition: color var(--sg-transition-duration) var(--sg-transition-timing),
24
+ background var(--sg-transition-duration) var(--sg-transition-timing),
25
+ border-color var(--sg-transition-duration) var(--sg-transition-timing),
26
+ box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
27
+ user-select: none;
28
+ white-space: nowrap;
29
+ font-family: inherit;
30
+ }
31
+
32
+ .sg-button:hover {
33
+ --sg-btn-color: var(--sg-color-primary-hover);
34
+ --sg-btn-border: var(--sg-color-primary-hover);
35
+ }
36
+
37
+ .sg-button:active {
38
+ --sg-btn-color: var(--sg-color-primary-active);
39
+ --sg-btn-border: var(--sg-color-primary-active);
40
+ }
41
+
42
+ .sg-button:focus-visible {
43
+ outline: none;
44
+ --sg-btn-border: var(--sg-color-primary);
45
+ box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
46
+ }
47
+
48
+ .sg-button:disabled {
49
+ --sg-btn-color: var(--sg-color-text-disabled);
50
+ --sg-btn-border: var(--sg-color-border);
51
+ --sg-btn-bg: var(--sg-color-bg-disabled);
52
+ cursor: not-allowed;
53
+ }
54
+
55
+ .sg-button-primary {
56
+ --sg-btn-bg: var(--sg-color-primary);
57
+ --sg-btn-color: var(--sg-color-white);
58
+ --sg-btn-border: var(--sg-color-primary);
59
+ }
60
+ .sg-button-primary:hover {
61
+ --sg-btn-bg: var(--sg-color-primary-hover);
62
+ --sg-btn-color: var(--sg-color-white);
63
+ --sg-btn-border: var(--sg-color-primary-hover);
64
+ }
65
+ .sg-button-primary:active {
66
+ --sg-btn-bg: var(--sg-color-primary-active);
67
+ --sg-btn-color: var(--sg-color-white);
68
+ --sg-btn-border: var(--sg-color-primary-active);
69
+ }
70
+
71
+ .sg-button-dashed {
72
+ border-style: dashed;
73
+ }
74
+
75
+ .sg-button-text {
76
+ --sg-btn-border: transparent;
77
+ --sg-btn-bg: transparent;
78
+ }
79
+ .sg-button-text:hover {
80
+ --sg-btn-bg: var(--sg-color-bg-hover);
81
+ --sg-btn-border: transparent;
82
+ }
83
+
84
+ .sg-button-link {
85
+ --sg-btn-color: var(--sg-color-primary);
86
+ --sg-btn-border: transparent;
87
+ --sg-btn-bg: transparent;
88
+ }
89
+ .sg-button-link:hover {
90
+ --sg-btn-color: var(--sg-color-primary-hover);
91
+ }
92
+
93
+ .sg-button-small {
94
+ --sg-btn-height: var(--sg-height-sm);
95
+ --sg-btn-padding: 0 var(--sg-padding-sm);
96
+ --sg-btn-font-size: var(--sg-font-size-sm);
97
+ }
98
+ .sg-button-large {
99
+ --sg-btn-height: var(--sg-height-lg);
100
+ --sg-btn-padding: 0 var(--sg-padding-lg);
101
+ --sg-btn-font-size: var(--sg-font-size-lg);
102
+ }
103
+
104
+ .sg-button-loading {
105
+ cursor: default;
106
+ opacity: 0.65;
107
+ --sg-spin-color: currentColor;
108
+ }
109
+
110
+ /* === Danger variant ===
111
+ * Combines with `type`:
112
+ * default → red text + red border
113
+ * primary → solid red fill
114
+ * dashed → red dashed border + red text
115
+ * text → red text, transparent bg (red bg on hover)
116
+ * link → red text, no border
117
+ */
118
+ .sg-button-danger {
119
+ --sg-btn-color: var(--sg-color-error);
120
+ --sg-btn-border: var(--sg-color-error);
121
+ }
122
+ .sg-button-danger:hover {
123
+ --sg-btn-color: var(--sg-red-6);
124
+ --sg-btn-border: var(--sg-red-6);
125
+ }
126
+ .sg-button-danger:active {
127
+ --sg-btn-color: var(--sg-red-6);
128
+ --sg-btn-border: var(--sg-red-6);
129
+ }
130
+ .sg-button-danger:focus-visible {
131
+ --sg-btn-border: var(--sg-color-error);
132
+ box-shadow: 0 0 0 2px var(--sg-color-error-bg);
133
+ }
134
+
135
+ .sg-button-primary.sg-button-danger {
136
+ --sg-btn-bg: var(--sg-color-error);
137
+ --sg-btn-color: var(--sg-color-white);
138
+ --sg-btn-border: var(--sg-color-error);
139
+ }
140
+ .sg-button-primary.sg-button-danger:hover {
141
+ --sg-btn-bg: var(--sg-red-6);
142
+ --sg-btn-color: var(--sg-color-white);
143
+ --sg-btn-border: var(--sg-red-6);
144
+ }
145
+ .sg-button-primary.sg-button-danger:active {
146
+ --sg-btn-bg: var(--sg-red-6);
147
+ --sg-btn-color: var(--sg-color-white);
148
+ --sg-btn-border: var(--sg-red-6);
149
+ }
150
+
151
+ .sg-button-text.sg-button-danger {
152
+ --sg-btn-bg: transparent;
153
+ --sg-btn-border: transparent;
154
+ --sg-btn-color: var(--sg-color-error);
155
+ }
156
+ .sg-button-text.sg-button-danger:hover {
157
+ --sg-btn-bg: var(--sg-color-error-bg);
158
+ --sg-btn-border: transparent;
159
+ --sg-btn-color: var(--sg-color-error);
160
+ }
161
+
162
+ .sg-button-link.sg-button-danger {
163
+ --sg-btn-bg: transparent;
164
+ --sg-btn-border: transparent;
165
+ --sg-btn-color: var(--sg-color-error);
166
+ }
167
+ .sg-button-link.sg-button-danger:hover {
168
+ --sg-btn-color: var(--sg-red-6);
169
+ }
170
+
171
+ .sg-button-danger:disabled {
172
+ --sg-btn-color: var(--sg-color-text-disabled);
173
+ --sg-btn-border: var(--sg-color-border);
174
+ --sg-btn-bg: var(--sg-color-bg-disabled);
175
+ }
176
+
177
+ /* === Block: stretch to parent width === */
178
+ .sg-button-block {
179
+ display: flex;
180
+ width: 100%;
181
+ }