@redocly/theme 0.58.0 → 0.59.0-next.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 (33) hide show
  1. package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js +1 -1
  2. package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js +1 -1
  3. package/lib/components/Panel/variables.js +1 -0
  4. package/lib/components/Tag/Tag.d.ts +3 -2
  5. package/lib/components/Tag/Tag.js +21 -5
  6. package/lib/components/Tag/variables.dark.js +135 -0
  7. package/lib/components/Tag/variables.js +120 -58
  8. package/lib/core/hooks/use-tabs.d.ts +11 -6
  9. package/lib/core/hooks/use-tabs.js +117 -207
  10. package/lib/core/utils/index.d.ts +1 -0
  11. package/lib/core/utils/index.js +1 -0
  12. package/lib/core/utils/tabs.d.ts +1 -0
  13. package/lib/core/utils/tabs.js +8 -0
  14. package/lib/markdoc/components/Tabs/Tab.js +1 -1
  15. package/lib/markdoc/components/Tabs/TabList.d.ts +2 -14
  16. package/lib/markdoc/components/Tabs/TabList.js +63 -16
  17. package/lib/markdoc/components/Tabs/Tabs.d.ts +2 -2
  18. package/lib/markdoc/components/Tabs/Tabs.js +11 -87
  19. package/lib/markdoc/tags/tabs.js +5 -0
  20. package/package.json +3 -3
  21. package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx +1 -1
  22. package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx +1 -1
  23. package/src/components/Panel/variables.ts +1 -0
  24. package/src/components/Tag/Tag.tsx +33 -8
  25. package/src/components/Tag/variables.dark.ts +135 -0
  26. package/src/components/Tag/variables.ts +120 -58
  27. package/src/core/hooks/use-tabs.ts +160 -238
  28. package/src/core/utils/index.ts +1 -0
  29. package/src/core/utils/tabs.ts +4 -0
  30. package/src/markdoc/components/Tabs/Tab.tsx +1 -0
  31. package/src/markdoc/components/Tabs/TabList.tsx +84 -30
  32. package/src/markdoc/components/Tabs/Tabs.tsx +12 -125
  33. package/src/markdoc/tags/tabs.ts +5 -0
package/src/components/Tag/variables.ts CHANGED
@@ -9,12 +9,13 @@ export const tag = css`
9
9
  --tag-border-style: solid; //@presenter Border
10
10
  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
11
11
  --tag-box-shadow: none; // @presenter Shadow
12
+ --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
12
13
 
13
14
  --tag-status-dot-color-default: var(--color-persian-green-7);
14
15
  --tag-badge-size: var(--spacing-xs);
15
- --tag-badge-border-width: 1.5px;
16
- --tag-badge-border-color: #ffffff;
17
-
16
+ --tag-badge-border-width: 2px;
17
+ --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
18
+ --tag-border-color-focused: var(--color-blue-4); // @presenter Color
18
19
 
19
20
  /**
20
21
  * @tokens Tag spacing
@@ -32,7 +33,7 @@ export const tag = css`
32
33
  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
33
34
 
34
35
  --tag-margin: 0 5px 0 0; //@presenter Spacing
35
- --tag-gap: 5px; //@presenter Spacing
36
+ --tag-gap: 4px; //@presenter Spacing
36
37
 
37
38
  /**
38
39
  * @tokens Tag size
@@ -58,8 +59,8 @@ export const tag = css`
58
59
  * @tokens Tag icon
59
60
  */
60
61
 
61
- --tag-icon-width: 1em; // @presenter Spacing
62
- --tag-icon-height: 1em; // @presenter Spacing
62
+ --tag-icon-width: 14px; // @presenter Spacing
63
+ --tag-icon-height: 14px; // @presenter Spacing
63
64
 
64
65
  /**
65
66
  * @tokens Tag colors
@@ -72,85 +73,127 @@ export const tag = css`
72
73
  .tag-draft,
73
74
  .tag-schema,
74
75
  .tag-default {
75
- --tag-color: var(--text-color-primary); // @presenter Color
76
+ --tag-color: var(--text-color-secondary); // @presenter Color
76
77
  --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
77
78
  --tag-border-color: var(--border-color-primary); // @presenter Color
79
+ --tag-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
78
80
  --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
81
+ --tag-border-color-hover: var(--color-warm-grey-5); // @presenter Color
82
+ }
83
+
84
+ .tag-green {
85
+ --tag-color: var(--color-green-8); // @presenter Color
86
+ --tag-bg-color: var(--color-green-1); // @presenter Color
87
+ --tag-border-color: var(--color-green-5); // @presenter Color
88
+ --tag-bg-color-hover: var(--color-green-2); // @presenter Color
89
+ --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
90
+ --tag-border-color-hover: var(--color-green-6); // @presenter Color
79
91
  }
80
92
 
81
- .tag-green,
82
93
  .tag-success,
83
94
  .tag-approved {
84
95
  --tag-color: var(--color-success-active); // @presenter Color
85
96
  --tag-bg-color: var(--color-success-bg); // @presenter Color
86
- --tag-border-color: var(--color-success-active); // @presenter Color
97
+ --tag-border-color: var(--color-success-border); // @presenter Color
87
98
  --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
99
+ --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
100
+ --tag-border-color-hover: var(--color-success-border-hover); // @presenter Color
101
+ }
102
+
103
+ .tag-red {
104
+ --tag-color: var(--color-red-7); // @presenter Color
105
+ --tag-bg-color: var(--color-red-1); // @presenter Color
106
+ --tag-border-color: var(--color-red-3); // @presenter Color
107
+ --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
108
+ --tag-bg-color-hover: var(--color-red-2); // @presenter Color
109
+ --tag-border-color-hover: var(--color-red-5); // @presenter Color
88
110
  }
89
111
 
90
- .tag-red,
91
112
  .tag-error,
92
113
  .tag-declined {
93
114
  --tag-color: var(--color-error-active); // @presenter Color
94
115
  --tag-bg-color: var(--color-error-bg); // @presenter Color
95
- --tag-border-color: var(--color-error-active); // @presenter Color
116
+ --tag-border-color: var(--color-error-border); // @presenter Color
96
117
  --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
118
+ --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
119
+ --tag-border-color-hover: var(--color-error-border-hover); // @presenter Color
97
120
  }
98
121
 
99
- .tag-gold,
100
122
  .tag-warning,
101
123
  .tag-deprecated {
102
124
  --tag-color: var(--color-warning-active); // @presenter Color
103
125
  --tag-bg-color: var(--color-warning-bg); // @presenter Color
104
- --tag-border-color: var(--color-warning-active); // @presenter Color
126
+ --tag-border-color: var(--color-warning-border); // @presenter Color
105
127
  --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
128
+ --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
129
+ --tag-border-color-hover: var(--color-warning-border-hover); // @presenter Color
106
130
  }
107
131
 
108
- .tag-blue,
109
- .tag-processing {
132
+ .tag-blue {
133
+ --tag-color: var(--color-blue-7); // @presenter Color
134
+ --tag-bg-color: var(--color-blue-1); // @presenter Color
135
+ --tag-border-color: var(--color-blue-4); // @presenter Color
136
+ --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
137
+ --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
138
+ --tag-border-color-hover: var(--color-blue-6); // @presenter Color
139
+ }
140
+
141
+ .tag-processing,
142
+ .tag-info {
110
143
  --tag-color: var(--color-info-active); // @presenter Color
111
144
  --tag-bg-color: var(--color-info-bg); // @presenter Color
112
- --tag-border-color: var(--color-info-active); // @presenter Color
145
+ --tag-border-color: var(--color-info-border); // @presenter Color
113
146
  --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
147
+ --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
148
+ --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
149
+ }
150
+
151
+ .tag-link {
152
+ --tag-color: var(--color-info-active); // @presenter Color
153
+ --tag-bg-color: var(--color-info-bg); // @presenter Color
154
+ --tag-border-color: var(--color-info-border); // @presenter Color
155
+ --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
156
+ --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
157
+ --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
114
158
  }
115
159
 
116
160
  .tag-purple,
117
161
  .tag-head {
118
162
  --tag-color: var(--color-purple-7); // @presenter Color
119
163
  --tag-bg-color: var(--color-purple-1); // @presenter Color
120
- --tag-border-color: var(--color-purple-7); // @presenter Color
121
- --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
164
+ --tag-border-color: var(--color-purple-4); // @presenter Color
165
+ --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
166
+ --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
167
+ --tag-border-color-hover: var(--color-purple-6); // @presenter Color
122
168
  }
123
169
 
124
- .tag-cyan,
125
- .tag-option,
126
- .tag-geekblue,
127
- .tag-link {
128
- --tag-color: var(--color-turquoise-7); // @presenter Color
170
+ .tag-turquoise,
171
+ .tag-option {
172
+ --tag-color: var(--color-turquoise-8); // @presenter Color
129
173
  --tag-bg-color: var(--color-turquoise-1); // @presenter Color
130
- --tag-border-color: var(--color-turquoise-7); // @presenter Color
131
- --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
174
+ --tag-border-color: var(--color-turquoise-5); // @presenter Color
175
+ --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
176
+ --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
177
+ --tag-border-color-hover: var(--color-turquoise-7); // @presenter Color
132
178
  }
133
179
 
134
- .tag-yellow {
135
- --tag-color: var(--color-carrot-7); // @presenter Color
180
+ .tag-carrot {
181
+ --tag-color: var(--color-carrot-8); // @presenter Color
136
182
  --tag-bg-color: var(--color-carrot-1); // @presenter Color
137
- --tag-border-color: var(--color-carrot-7); // @presenter Color
138
- --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
183
+ --tag-border-color: var(--color-carrot-6); // @presenter Color
184
+ --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
185
+ --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
186
+ --tag-border-color-hover: var(--color-carrot-7); // @presenter Color
139
187
  }
140
188
 
141
189
  .tag-magenta,
142
190
  .tag-hook {
143
191
  --tag-color: var(--color-magenta-7); // @presenter Color
144
192
  --tag-bg-color: var(--color-magenta-1); // @presenter Color
145
- --tag-border-color: var(--color-magenta-7); // @presenter Color
146
- --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
147
- }
148
-
149
- .tag-lime {
150
- --tag-color: var(--color-green-7); // @presenter Color
151
- --tag-bg-color: none; // @presenter Color
152
- --tag-border-color: var(--color-green-7); // @presenter Color
153
- --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
193
+ --tag-border-color: var(--color-magenta-3); // @presenter Color
194
+ --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
195
+ --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
196
+ --tag-border-color-hover: var(--color-magenta-5); // @presenter Color
154
197
  }
155
198
 
156
199
  .tag-product {
@@ -162,37 +205,56 @@ export const tag = css`
162
205
 
163
206
  .tag-grass {
164
207
  --tag-color: var(--color-grass-8); // @presenter Color
165
- --tag-bg-color: transparent; // @presenter Color
208
+ --tag-bg-color: var(--color-grass-1); // @presenter Color
166
209
  --tag-border-color: var(--color-grass-4); // @presenter Color
167
- --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
168
- }
169
-
170
- .tag-purple {
171
- --tag-color: var(--color-purple-7); // @presenter Color
172
- --tag-bg-color: transparent; // @presenter Color
173
- --tag-border-color: var(--color-purple-4); // @presenter Color
174
- --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
210
+ --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
211
+ --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
212
+ --tag-border-color-hover: var(--color-grass-6); // @presenter Color
175
213
  }
176
214
 
177
215
  .tag-sky {
178
- --tag-color: var(--color-sky-9); // @presenter Color
179
- --tag-bg-color: transparent; // @presenter Color
216
+ --tag-color: var(--color-sky-8); // @presenter Color
217
+ --tag-bg-color: var(--color-sky-1); // @presenter Color
180
218
  --tag-border-color: var(--color-sky-5); // @presenter Color
219
+ --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
181
220
  --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
221
+ --tag-border-color-hover: var(--color-sky-7); // @presenter Color
182
222
  }
183
223
 
184
224
  .tag-raspberry {
185
225
  --tag-color: var(--color-raspberry-7); // @presenter Color
186
- --tag-bg-color: transparent; // @presenter Color
226
+ --tag-bg-color: var(--color-raspberry-1); // @presenter Color
187
227
  --tag-border-color: var(--color-raspberry-3); // @presenter Color
188
- --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
189
- }
190
-
191
- .tag-carrot {
192
- --tag-color: var(--color-carrot-8); // @presenter Color
193
- --tag-bg-color: transparent; // @presenter Color
194
- --tag-border-color: var(--color-carrot-6); // @presenter Color
195
- --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
228
+ --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
229
+ --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
230
+ --tag-border-color-hover: var(--color-raspberry-5); // @presenter Color
231
+ }
232
+
233
+ .tag-orange {
234
+ --tag-color: var(--color-orange-7); // @presenter Color
235
+ --tag-bg-color: var(--color-orange-1); // @presenter Color
236
+ --tag-border-color: var(--color-orange-4); // @presenter Color
237
+ --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
238
+ --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
239
+ --tag-border-color-hover: var(--color-orange-5); // @presenter Color
240
+ }
241
+
242
+ .tag-persian-green {
243
+ --tag-color: var(--color-persian-green-8); // @presenter Color
244
+ --tag-bg-color: var(--color-persian-green-1); // @presenter Color
245
+ --tag-border-color: var(--color-persian-green-5); // @presenter Color
246
+ --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
247
+ --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
248
+ --tag-border-color-hover: var(--color-persian-green-6); // @presenter Color
249
+ }
250
+
251
+ .tag-blueberry {
252
+ --tag-color: var(--color-blueberry-7); // @presenter Color
253
+ --tag-bg-color: var(--color-blueberry-1); // @presenter Color
254
+ --tag-border-color: var(--color-blueberry-4); // @presenter Color
255
+ --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
256
+ --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
257
+ --tag-border-color-hover: var(--color-blueberry-6); // @presenter Color
196
258
  }
197
259
 
198
260
  /**