@apify/ui-library 1.134.3 → 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 (24) hide show
  1. package/dist/src/design_system/colors/generated/css_variables.dark.d.ts +1 -1
  2. package/dist/src/design_system/colors/generated/css_variables.dark.d.ts.map +1 -1
  3. package/dist/src/design_system/colors/generated/css_variables.dark.js +1 -0
  4. package/dist/src/design_system/colors/generated/css_variables.dark.js.map +1 -1
  5. package/dist/src/design_system/colors/generated/css_variables.light.d.ts +1 -1
  6. package/dist/src/design_system/colors/generated/css_variables.light.d.ts.map +1 -1
  7. package/dist/src/design_system/colors/generated/css_variables.light.js +1 -0
  8. package/dist/src/design_system/colors/generated/css_variables.light.js.map +1 -1
  9. package/dist/src/design_system/colors/generated/properties_theme.d.ts +1 -0
  10. package/dist/src/design_system/colors/generated/properties_theme.d.ts.map +1 -1
  11. package/dist/src/design_system/colors/generated/properties_theme.js +1 -0
  12. package/dist/src/design_system/colors/generated/properties_theme.js.map +1 -1
  13. package/dist/src/design_system/theme.d.ts +1 -0
  14. package/dist/src/design_system/theme.d.ts.map +1 -1
  15. package/dist/tsconfig.build.tsbuildinfo +1 -1
  16. package/package.json +3 -3
  17. package/src/design_system/colors/Colors.mdx +21 -2
  18. package/src/design_system/colors/figma_color_tokens.dark.json +4 -0
  19. package/src/design_system/colors/figma_color_tokens.light.json +4 -0
  20. package/src/design_system/colors/generated/css_variables.dark.ts +1 -0
  21. package/src/design_system/colors/generated/css_variables.light.ts +1 -0
  22. package/src/design_system/colors/generated/properties_theme.ts +1 -0
  23. package/style/colors/dark.scss +1 -0
  24. 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.3",
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.35.0",
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": "a32a7d8199b17ee2467b767642bb826672ba8b59"
73
+ "gitHead": "7879cfe3a270df653f5eb4496f15fe643afd53dd"
74
74
  }
package/src/design_system/colors/Colors.mdx CHANGED
@@ -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))
package/src/design_system/colors/figma_color_tokens.dark.json CHANGED
@@ -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}"
package/src/design_system/colors/figma_color_tokens.light.json CHANGED
@@ -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}"
package/src/design_system/colors/generated/css_variables.dark.ts CHANGED
@@ -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;
package/src/design_system/colors/generated/css_variables.light.ts CHANGED
@@ -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;
package/src/design_system/colors/generated/properties_theme.ts CHANGED
@@ -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)',
package/style/colors/dark.scss CHANGED
@@ -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,
package/style/colors/light.scss CHANGED
@@ -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,