@apify/ui-library 1.134.2 → 1.135.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 (53) hide show
  1. package/dist/src/components/button.d.ts.map +1 -1
  2. package/dist/src/components/chip.d.ts.map +1 -1
  3. package/dist/src/components/code/action_button.d.ts.map +1 -1
  4. package/dist/src/components/code/code_block/code_block.d.ts.map +1 -1
  5. package/dist/src/components/code/code_block/code_block_with_tabs.d.ts.map +1 -1
  6. package/dist/src/components/code/code_block/utils.d.ts.map +1 -1
  7. package/dist/src/components/code/prism_highlighter.d.ts +3 -3
  8. package/dist/src/components/code/prism_highlighter.d.ts.map +1 -1
  9. package/dist/src/components/floating/floating_component_base.d.ts.map +1 -1
  10. package/dist/src/components/floating/menu.d.ts.map +1 -1
  11. package/dist/src/components/floating/menu_common.d.ts.map +1 -1
  12. package/dist/src/components/floating/tooltip.d.ts.map +1 -1
  13. package/dist/src/components/floating/tooltip_content.d.ts.map +1 -1
  14. package/dist/src/components/icon_button.d.ts.map +1 -1
  15. package/dist/src/components/icon_button.js +1 -3
  16. package/dist/src/components/icon_button.js.map +1 -1
  17. package/dist/src/components/link.d.ts.map +1 -1
  18. package/dist/src/components/message.d.ts.map +1 -1
  19. package/dist/src/components/readme_renderer/pythonize_value.d.ts.map +1 -1
  20. package/dist/src/components/readme_renderer/table_of_contents.d.ts.map +1 -1
  21. package/dist/src/components/readme_renderer/utils.d.ts.map +1 -1
  22. package/dist/src/components/select/select.d.ts.map +1 -1
  23. package/dist/src/components/shortcut.d.ts.map +1 -1
  24. package/dist/src/components/spinner.d.ts.map +1 -1
  25. package/dist/src/components/switch/switch.d.ts.map +1 -1
  26. package/dist/src/components/tabs/tab.d.ts.map +1 -1
  27. package/dist/src/components/tabs/tabs.d.ts.map +1 -1
  28. package/dist/src/design_system/colors/generated/css_variables.dark.d.ts +1 -1
  29. package/dist/src/design_system/colors/generated/css_variables.dark.d.ts.map +1 -1
  30. package/dist/src/design_system/colors/generated/css_variables.dark.js +1 -0
  31. package/dist/src/design_system/colors/generated/css_variables.dark.js.map +1 -1
  32. package/dist/src/design_system/colors/generated/css_variables.light.d.ts +1 -1
  33. package/dist/src/design_system/colors/generated/css_variables.light.d.ts.map +1 -1
  34. package/dist/src/design_system/colors/generated/css_variables.light.js +1 -0
  35. package/dist/src/design_system/colors/generated/css_variables.light.js.map +1 -1
  36. package/dist/src/design_system/colors/generated/properties_theme.d.ts +1 -0
  37. package/dist/src/design_system/colors/generated/properties_theme.d.ts.map +1 -1
  38. package/dist/src/design_system/colors/generated/properties_theme.js +1 -0
  39. package/dist/src/design_system/colors/generated/properties_theme.js.map +1 -1
  40. package/dist/src/design_system/theme.d.ts +1 -0
  41. package/dist/src/design_system/theme.d.ts.map +1 -1
  42. package/dist/src/utils/resize_observer.d.ts.map +1 -1
  43. package/dist/src/utils/sanitization.d.ts.map +1 -1
  44. package/dist/tsconfig.build.tsbuildinfo +1 -1
  45. package/package.json +3 -3
  46. package/src/design_system/colors/Colors.mdx +21 -2
  47. package/src/design_system/colors/figma_color_tokens.dark.json +4 -0
  48. package/src/design_system/colors/figma_color_tokens.light.json +4 -0
  49. package/src/design_system/colors/generated/css_variables.dark.ts +1 -0
  50. package/src/design_system/colors/generated/css_variables.light.ts +1 -0
  51. package/src/design_system/colors/generated/properties_theme.ts +1 -0
  52. package/style/colors/dark.scss +1 -0
  53. package/style/colors/light.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apify/ui-library",
3
- "version": "1.134.2",
3
+ "version": "1.135.0",
4
4
  "description": "React UI library used by apify.com",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -27,7 +27,7 @@
27
27
  "It's not nice, but helps us to get around the problem of multiple react instances."
28
28
  ],
29
29
  "dependencies": {
30
- "@apify/ui-icons": "^1.34.3",
30
+ "@apify/ui-icons": "^1.36.0",
31
31
  "@floating-ui/react": "^0.27.19",
32
32
  "@radix-ui/react-checkbox": "^1.3.3",
33
33
  "@radix-ui/react-collapsible": "^1.1.12",
@@ -70,5 +70,5 @@
70
70
  "src",
71
71
  "style"
72
72
  ],
73
- "gitHead": "80b843dce14832793c2bff2e4ffda8d525ce1cf2"
73
+ "gitHead": "7879cfe3a270df653f5eb4496f15fe643afd53dd"
74
74
  }
@@ -6,9 +6,28 @@ import { darkTheme } from './generated/colors_theme.dark.ts';
6
6
 
7
7
  # Colors
8
8
 
9
+ ## Semantic tokens
10
+
11
+ <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
12
+ <div>
13
+ <h3>Light</h3>
14
+ <ColorPalette>
15
+ <ColorItem title="neutral.onSurface" subtitle="#6d71781f" colors={{ color: '#6d71781f' }} />
16
+ </ColorPalette>
17
+ </div>
18
+ <div>
19
+ <h3>Dark</h3>
20
+ <ColorPalette>
21
+ <ColorItem title="neutral.onSurface" subtitle="#6d717838" colors={{ color: '#6d717838' }} />
22
+ </ColorPalette>
23
+ </div>
24
+ </div>
25
+
26
+ ## Palette
27
+
9
28
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
10
29
  <div>
11
- <h2>Light Theme</h2>
30
+ <h3>Light Theme</h3>
12
31
  <ColorPalette>
13
32
  {Object.entries(lightTheme)
14
33
  .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
@@ -18,7 +37,7 @@ import { darkTheme } from './generated/colors_theme.dark.ts';
18
37
  </ColorPalette>
19
38
  </div>
20
39
  <div>
21
- <h2>Dark Theme</h2>
40
+ <h3>Dark Theme</h3>
22
41
  <ColorPalette>
23
42
  {Object.entries(darkTheme)
24
43
  .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
@@ -61,6 +61,10 @@
61
61
  "$type": "color",
62
62
  "$value": "{Palette.Neutral.775}"
63
63
  },
64
+ "On_Surface": {
65
+ "$type": "color",
66
+ "$value": "#6d717838"
67
+ },
64
68
  "Disabled": {
65
69
  "$type": "color",
66
70
  "$value": "{Palette.Neutral.750}"
@@ -61,6 +61,10 @@
61
61
  "$type": "color",
62
62
  "$value": "{Palette.Neutral.75}"
63
63
  },
64
+ "On_Surface": {
65
+ "$type": "color",
66
+ "$value": "#6d71781f"
67
+ },
64
68
  "Disabled": {
65
69
  "$type": "color",
66
70
  "$value": "{Palette.Neutral.50}"
@@ -18,6 +18,7 @@ export const tokens = `
18
18
  --color-neutral-border: #3d3f43;
19
19
  --color-neutral-separator-subtle: #333538;
20
20
  --color-neutral-hover: #292b2e;
21
+ --color-neutral-on-surface: rgba(109, 113, 120, 0.22);
21
22
  --color-neutral-disabled: #333538;
22
23
  --color-neutral-overflow: #242528;
23
24
  --color-neutral-icon: #bfc1c5;
@@ -18,6 +18,7 @@ export const tokens = `
18
18
  --color-neutral-border: #d2d3d6;
19
19
  --color-neutral-separator-subtle: #e4e5e6;
20
20
  --color-neutral-hover: #edeeef;
21
+ --color-neutral-on-surface: rgba(109, 113, 120, 0.12);
21
22
  --color-neutral-disabled: #f4f4f5;
22
23
  --color-neutral-overflow: #e4e5e6;
23
24
  --color-neutral-icon: #4f5257;
@@ -19,6 +19,7 @@ export const colorProperties = {
19
19
  border: 'var(--color-neutral-border)',
20
20
  separatorSubtle: 'var(--color-neutral-separator-subtle)',
21
21
  hover: 'var(--color-neutral-hover)',
22
+ onSurface: 'var(--color-neutral-on-surface)',
22
23
  disabled: 'var(--color-neutral-disabled)',
23
24
  overflow: 'var(--color-neutral-overflow)',
24
25
  icon: 'var(--color-neutral-icon)',
@@ -19,6 +19,7 @@ $tokens: (
19
19
  'color-neutral-border': #3d3f43,
20
20
  'color-neutral-separator-subtle': #333538,
21
21
  'color-neutral-hover': #292b2e,
22
+ 'color-neutral-on-surface': rgba(109, 113, 120, 0.22),
22
23
  'color-neutral-disabled': #333538,
23
24
  'color-neutral-overflow': #242528,
24
25
  'color-neutral-icon': #bfc1c5,
@@ -19,6 +19,7 @@ $tokens: (
19
19
  'color-neutral-border': #d2d3d6,
20
20
  'color-neutral-separator-subtle': #e4e5e6,
21
21
  'color-neutral-hover': #edeeef,
22
+ 'color-neutral-on-surface': rgba(109, 113, 120, 0.12),
22
23
  'color-neutral-disabled': #f4f4f5,
23
24
  'color-neutral-overflow': #e4e5e6,
24
25
  'color-neutral-icon': #4f5257,