@apify/ui-library 0.71.1-featcolortokens-178953.63 → 0.71.1-featcolortokens-178953.70

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 (86) hide show
  1. package/dist/tsconfig.build.tsbuildinfo +1 -1
  2. package/package.json +3 -2
  3. package/src/codemods/generate_typograpy_tokens_files.mjs +137 -0
  4. package/src/components/action_link.tsx +60 -0
  5. package/src/components/actor_template_card.tsx +116 -0
  6. package/src/components/badge.tsx +148 -0
  7. package/src/components/banner.tsx +94 -0
  8. package/src/components/blog_article.tsx +85 -0
  9. package/src/components/box.tsx +127 -0
  10. package/src/components/button.tsx +305 -0
  11. package/src/components/chip.tsx +128 -0
  12. package/src/components/code/action_button.tsx +96 -0
  13. package/src/components/code/code_block/code_block.styled.tsx +180 -0
  14. package/src/components/code/code_block/code_block.tsx +224 -0
  15. package/src/components/code/code_block/code_block_with_tabs.tsx +257 -0
  16. package/src/components/code/code_block/utils.tsx +67 -0
  17. package/src/components/code/index.ts +5 -0
  18. package/src/components/code/inline_code/inline_code.tsx +62 -0
  19. package/src/components/code/one_line_code/one_line_code.tsx +228 -0
  20. package/src/components/code/prism_highlighter.tsx +180 -0
  21. package/src/components/color_wheel_gradient.tsx +31 -0
  22. package/src/components/floating/index.ts +3 -0
  23. package/src/components/floating/menu.tsx +189 -0
  24. package/src/components/floating/menu_common.tsx +31 -0
  25. package/src/components/floating/menu_components.tsx +99 -0
  26. package/src/components/image.tsx +24 -0
  27. package/src/components/index.ts +22 -0
  28. package/src/components/link.tsx +114 -0
  29. package/src/components/message.tsx +153 -0
  30. package/src/components/rating.tsx +106 -0
  31. package/src/components/readme_renderer/index.ts +3 -0
  32. package/src/components/readme_renderer/pythonize_value.ts +76 -0
  33. package/src/components/readme_renderer/table_of_contents.tsx +272 -0
  34. package/src/components/readme_renderer/utils.tsx +46 -0
  35. package/src/components/simple_markdown/index.ts +2 -0
  36. package/src/components/simple_markdown/simple_markdown.tsx +214 -0
  37. package/src/components/simple_markdown/simple_markdown_components.tsx +293 -0
  38. package/src/components/tabs/index.ts +2 -0
  39. package/src/components/tabs/tab.tsx +217 -0
  40. package/src/components/tabs/tabs.tsx +169 -0
  41. package/src/components/tag.tsx +196 -0
  42. package/src/components/text/heading_content.tsx +56 -0
  43. package/src/components/text/heading_marketing.tsx +55 -0
  44. package/src/components/text/heading_shared.tsx +55 -0
  45. package/src/components/text/index.ts +19 -0
  46. package/src/components/text/text_base.tsx +52 -0
  47. package/src/components/text/text_content.tsx +104 -0
  48. package/src/components/text/text_marketing.tsx +152 -0
  49. package/src/components/text/text_shared.tsx +95 -0
  50. package/src/components/tile/horizontal_tile.tsx +77 -0
  51. package/src/components/tile/index.ts +2 -0
  52. package/src/components/tile/shared.ts +27 -0
  53. package/src/components/tile/vertical_tile.tsx +59 -0
  54. package/src/components/to_consolidate/card.tsx +141 -0
  55. package/src/components/to_consolidate/index.ts +4 -0
  56. package/src/components/to_consolidate/markdown.tsx +609 -0
  57. package/src/components/to_consolidate/pagination.tsx +136 -0
  58. package/src/components/to_consolidate/tab_number_chip.tsx +31 -0
  59. package/src/design_system/colors/build_color_tokens.js +183 -0
  60. package/src/design_system/colors/figma_color_tokens.dark.json +886 -0
  61. package/src/design_system/colors/figma_color_tokens.light.json +886 -0
  62. package/src/design_system/colors/generated/colors_theme.dark.ts +110 -0
  63. package/src/design_system/colors/generated/colors_theme.light.ts +110 -0
  64. package/src/design_system/colors/generated/css_variables.dark.ts +147 -0
  65. package/src/design_system/colors/generated/css_variables.light.ts +147 -0
  66. package/src/design_system/colors/generated/css_variables_palette.dark.ts +74 -0
  67. package/src/design_system/colors/generated/css_variables_palette.light.ts +74 -0
  68. package/src/design_system/colors/generated/properties_theme.ts +179 -0
  69. package/src/design_system/colors/index.ts +7 -0
  70. package/src/design_system/supernova_typography_tokens.json +657 -0
  71. package/src/design_system/theme.ts +25 -0
  72. package/src/design_system/tokens/index.ts +5 -0
  73. package/src/design_system/tokens/layouts.ts +29 -0
  74. package/src/design_system/tokens/radiuses.ts +22 -0
  75. package/src/design_system/tokens/shadows.ts +22 -0
  76. package/src/design_system/tokens/spaces.ts +15 -0
  77. package/src/design_system/tokens/transitions.ts +19 -0
  78. package/src/design_system/typography_theme.ts +197 -0
  79. package/src/index.ts +8 -0
  80. package/src/type_utils.ts +7 -0
  81. package/src/ui_dependency_provider.tsx +58 -0
  82. package/src/utils/copy_to_clipboard.ts +24 -0
  83. package/src/utils/image_color.ts +42 -0
  84. package/src/utils/index.ts +4 -0
  85. package/src/utils/resize_observer.ts +18 -0
  86. package/src/utils/sanitization.ts +14 -0
package/src/design_system/colors/generated/properties_theme.ts ADDED
@@ -0,0 +1,179 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const colorProperties = {
6
+ neutral: {
7
+ text: 'var(--color-neutral-text)',
8
+ textMuted: 'var(--color-neutral-text-muted)',
9
+ textSubtle: 'var(--color-neutral-text-subtle)',
10
+ textDisabled: 'var(--color-neutral-text-disabled)',
11
+ textOnPrimary: 'var(--color-neutral-text-on-primary)',
12
+ iconOnPrimary: 'var(--color-neutral-icon-on-primary)',
13
+ background: 'var(--color-neutral-background)',
14
+ backgroundMuted: 'var(--color-neutral-background-muted)',
15
+ backgroundSubtle: 'var(--color-neutral-background-subtle)',
16
+ backgroundWhite: 'var(--color-neutral-background-white)',
17
+ cardBackground: 'var(--color-neutral-card-background)',
18
+ cardBackgroundHover: 'var(--color-neutral-card-background-hover)',
19
+ border: 'var(--color-neutral-border)',
20
+ separatorSubtle: 'var(--color-neutral-separator-subtle)',
21
+ hover: 'var(--color-neutral-hover)',
22
+ disabled: 'var(--color-neutral-disabled)',
23
+ overflow: 'var(--color-neutral-overflow)',
24
+ icon: 'var(--color-neutral-icon)',
25
+ iconSubtle: 'var(--color-neutral-icon-subtle)',
26
+ iconDisabled: 'var(--color-neutral-icon-disabled)',
27
+ fieldBorder: 'var(--color-neutral-field-border)',
28
+ actionSecondary: 'var(--color-neutral-action-secondary)',
29
+ actionSecondaryHover: 'var(--color-neutral-action-secondary-hover)',
30
+ actionSecondaryActive: 'var(--color-neutral-action-secondary-active)',
31
+ chipBackground: 'var(--color-neutral-chip-background)',
32
+ chipBackgroundHover: 'var(--color-neutral-chip-background-hover)',
33
+ chipBackgroundActive: 'var(--color-neutral-chip-background-active)',
34
+ chipBackgroundDisabled: 'var(--color-neutral-chip-background-disabled)',
35
+ largeTooltipBackground: 'var(--color-neutral-large-tooltip-background)',
36
+ largeTooltipBorder: 'var(--color-neutral-large-tooltip-border)',
37
+ smallTooltipText: 'var(--color-neutral-small-tooltip-text)',
38
+ smallTooltipBackground: 'var(--color-neutral-small-tooltip-background)',
39
+ smallTooltipBorder: 'var(--color-neutral-small-tooltip-border)',
40
+ overlay: 'var(--color-neutral-overlay)',
41
+ fieldBackground: 'var(--color-neutral-field-background)',
42
+ textPlaceholder: 'var(--color-neutral-text-placeholder)',
43
+ },
44
+ primary: {
45
+ text: 'var(--color-primary-text)',
46
+ textInteractive: 'var(--color-primary-text-interactive)',
47
+ icon: 'var(--color-primary-icon)',
48
+ action: 'var(--color-primary-action)',
49
+ actionHover: 'var(--color-primary-action-hover)',
50
+ actionActive: 'var(--color-primary-action-active)',
51
+ fieldBorderActive: 'var(--color-primary-field-border-active)',
52
+ borderSubtle: 'var(--color-primary-border-subtle)',
53
+ background: 'var(--color-primary-background)',
54
+ backgroundSubtle: 'var(--color-primary-background-subtle)',
55
+ backgroundHover: 'var(--color-primary-background-hover)',
56
+ chipBackground: 'var(--color-primary-chip-background)',
57
+ chipBackgroundSubtle: 'var(--color-primary-chip-background-subtle)',
58
+ chipBackgroundHover: 'var(--color-primary-chip-background-hover)',
59
+ chipText: 'var(--color-primary-chip-text)',
60
+ shadowActive: 'var(--color-primary-shadow-active)',
61
+ },
62
+ primaryBlack: {
63
+ action: 'var(--color-primary-black-action)',
64
+ actionHover: 'var(--color-primary-black-action-hover)',
65
+ actionActive: 'var(--color-primary-black-action-active)',
66
+ background: 'var(--color-primary-black-background)',
67
+ backgroundHover: 'var(--color-primary-black-background-hover)',
68
+ chipText: 'var(--color-primary-black-chip-text)',
69
+ },
70
+ success: {
71
+ text: 'var(--color-success-text)',
72
+ icon: 'var(--color-success-icon)',
73
+ background: 'var(--color-success-background)',
74
+ backgroundHover: 'var(--color-success-background-hover)',
75
+ backgroundSubtle: 'var(--color-success-background-subtle)',
76
+ backgroundSubtleHover: 'var(--color-success-background-subtle-hover)',
77
+ backgroundSubtleActive: 'var(--color-success-background-subtle-active)',
78
+ chipBackground: 'var(--color-success-chip-background)',
79
+ chipBackgroundHover: 'var(--color-success-chip-background-hover)',
80
+ chipText: 'var(--color-success-chip-text)',
81
+ border: 'var(--color-success-border)',
82
+ borderSubtle: 'var(--color-success-border-subtle)',
83
+ action: 'var(--color-success-action)',
84
+ actionHover: 'var(--color-success-action-hover)',
85
+ actionActive: 'var(--color-success-action-active)',
86
+ },
87
+ warning: {
88
+ text: 'var(--color-warning-text)',
89
+ icon: 'var(--color-warning-icon)',
90
+ background: 'var(--color-warning-background)',
91
+ backgroundHover: 'var(--color-warning-background-hover)',
92
+ backgroundSubtle: 'var(--color-warning-background-subtle)',
93
+ chipBackground: 'var(--color-warning-chip-background)',
94
+ chipBackgroundHover: 'var(--color-warning-chip-background-hover)',
95
+ chipText: 'var(--color-warning-chip-text)',
96
+ border: 'var(--color-warning-border)',
97
+ borderSubtle: 'var(--color-warning-border-subtle)',
98
+ fieldBorder: 'var(--color-warning-field-border)',
99
+ },
100
+ danger: {
101
+ text: 'var(--color-danger-text)',
102
+ icon: 'var(--color-danger-icon)',
103
+ background: 'var(--color-danger-background)',
104
+ backgroundHover: 'var(--color-danger-background-hover)',
105
+ backgroundSubtle: 'var(--color-danger-background-subtle)',
106
+ backgroundSubtleHover: 'var(--color-danger-background-subtle-hover)',
107
+ backgroundSubtleActive: 'var(--color-danger-background-subtle-active)',
108
+ chipBackground: 'var(--color-danger-chip-background)',
109
+ chipBackgroundHover: 'var(--color-danger-chip-background-hover)',
110
+ chipText: 'var(--color-danger-chip-text)',
111
+ border: 'var(--color-danger-border)',
112
+ borderSubtle: 'var(--color-danger-border-subtle)',
113
+ fieldBorder: 'var(--color-danger-field-border)',
114
+ action: 'var(--color-danger-action)',
115
+ actionHover: 'var(--color-danger-action-hover)',
116
+ actionActive: 'var(--color-danger-action-active)',
117
+ },
118
+ special: {
119
+ freePlanBackground: 'var(--color-special-free-plan-background)',
120
+ starterPlanBackground: 'var(--color-special-starter-plan-background)',
121
+ scalePlanBackground: 'var(--color-special-scale-plan-background)',
122
+ businessPlanBackground: 'var(--color-special-business-plan-background)',
123
+ enterprisePlanBackground: 'var(--color-special-enterprise-plan-background)',
124
+ },
125
+ rose: {
126
+ light: 'var(--color-rose-light)',
127
+ base: 'var(--color-rose-base)',
128
+ dark: 'var(--color-rose-dark)',
129
+ text: 'var(--color-rose-text)',
130
+ },
131
+ buttercup: {
132
+ light: 'var(--color-buttercup-light)',
133
+ base: 'var(--color-buttercup-base)',
134
+ dark: 'var(--color-buttercup-dark)',
135
+ text: 'var(--color-buttercup-text)',
136
+ },
137
+ paprika: {
138
+ light: 'var(--color-paprika-light)',
139
+ base: 'var(--color-paprika-base)',
140
+ dark: 'var(--color-paprika-dark)',
141
+ text: 'var(--color-paprika-text)',
142
+ },
143
+ teal: {
144
+ light: 'var(--color-teal-light)',
145
+ base: 'var(--color-teal-base)',
146
+ dark: 'var(--color-teal-dark)',
147
+ text: 'var(--color-teal-text)',
148
+ },
149
+ indigo: {
150
+ light: 'var(--color-indigo-light)',
151
+ base: 'var(--color-indigo-base)',
152
+ dark: 'var(--color-indigo-dark)',
153
+ text: 'var(--color-indigo-text)',
154
+ },
155
+ slate: {
156
+ light: 'var(--color-slate-light)',
157
+ base: 'var(--color-slate-base)',
158
+ dark: 'var(--color-slate-dark)',
159
+ text: 'var(--color-slate-text)',
160
+ },
161
+ coral: {
162
+ light: 'var(--color-coral-light)',
163
+ base: 'var(--color-coral-base)',
164
+ dark: 'var(--color-coral-dark)',
165
+ text: 'var(--color-coral-text)',
166
+ },
167
+ lavender: {
168
+ light: 'var(--color-lavender-light)',
169
+ base: 'var(--color-lavender-base)',
170
+ dark: 'var(--color-lavender-dark)',
171
+ text: 'var(--color-lavender-text)',
172
+ },
173
+ bamboo: {
174
+ light: 'var(--color-bamboo-light)',
175
+ base: 'var(--color-bamboo-base)',
176
+ dark: 'var(--color-bamboo-dark)',
177
+ text: 'var(--color-bamboo-text)',
178
+ },
179
+ } as const;
package/src/design_system/colors/index.ts ADDED
@@ -0,0 +1,7 @@
1
+ export { tokens as cssColorsVariablesLight } from './generated/css_variables.light.js';
2
+ export { tokens as cssColorsVariablesDark } from './generated/css_variables.dark.js';
3
+ export { tokens as cssColorsVariablesPaletteLight } from './generated/css_variables_palette.light.js';
4
+ export { tokens as cssColorsVariablesPaletteDark } from './generated/css_variables_palette.dark.js';
5
+ export { darkTheme } from './generated/colors_theme.dark.js';
6
+ export { lightTheme } from './generated/colors_theme.light.js';
7
+ export { colorProperties } from './generated/properties_theme.js';