spoko-design-system 1.20.0 → 1.21.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 (92) hide show
  1. package/.claude/settings.json +48 -48
  2. package/.github/dependabot.yml +11 -11
  3. package/.github/todo.yml +3 -3
  4. package/.github/workflows/claude.yml +37 -37
  5. package/.github/workflows/code-quality.yml +72 -72
  6. package/.github/workflows/deploy.yml +43 -43
  7. package/.husky/README.md +41 -41
  8. package/.husky/commit-msg +1 -1
  9. package/.husky/pre-commit +40 -40
  10. package/.prettierignore +14 -14
  11. package/.prettierrc +30 -30
  12. package/.stackblitzrc +5 -5
  13. package/.vscode/extensions.json +4 -4
  14. package/.vscode/launch.json +11 -11
  15. package/.vscode/settings.json +21 -21
  16. package/CHANGELOG.md +470 -462
  17. package/CLAUDE.md +268 -268
  18. package/LICENSE +21 -21
  19. package/README.md +303 -303
  20. package/TOOLTIPS.md +236 -236
  21. package/astro.config.mjs +84 -84
  22. package/commitlint.config.js +3 -3
  23. package/dev-dist/sw.js +91 -91
  24. package/dev-dist/workbox-c676b6d3.js +3391 -3391
  25. package/eslint.config.js +70 -70
  26. package/icon.config.ts +348 -348
  27. package/index.ts +78 -78
  28. package/package.json +160 -160
  29. package/public/arrow-bottom.svg +7 -7
  30. package/public/fonts/lg.svg +53 -53
  31. package/public/fonts/vwhead-bold-demo.html +549 -549
  32. package/public/fonts/vwhead-regular-demo.html +549 -549
  33. package/public/fonts/vwtext-bold-demo.html +549 -549
  34. package/public/fonts/vwtext-regular-demo.html +549 -549
  35. package/public/github.svg +3 -3
  36. package/public/grid_dot.svg +4 -4
  37. package/public/linkedin.svg +44 -44
  38. package/public/make-scrollable-code-focusable.js +3 -3
  39. package/public/pagefind.yml +3 -3
  40. package/public/polo.blue.svg +29 -29
  41. package/public/spoko.space.svg +71 -71
  42. package/public/twitter.svg +46 -46
  43. package/renovate.json +6 -6
  44. package/sandbox.config.json +11 -11
  45. package/sonar-project.properties +26 -26
  46. package/src/components/Category/CategoriesCarousel.astro +3 -7
  47. package/src/pages/components/badges.mdx +57 -57
  48. package/src/pages/components/breadcrumbs.mdx +139 -139
  49. package/src/pages/components/buttons.mdx +359 -359
  50. package/src/pages/components/card.mdx +294 -294
  51. package/src/pages/components/carousel.mdx +62 -62
  52. package/src/pages/components/copyright.mdx +42 -42
  53. package/src/pages/components/details-list.mdx +207 -207
  54. package/src/pages/components/features-list.mdx +37 -37
  55. package/src/pages/components/flags.mdx +49 -49
  56. package/src/pages/components/fuck-russia.mdx +39 -39
  57. package/src/pages/components/hand-drive.mdx +78 -78
  58. package/src/pages/components/headline.mdx +337 -337
  59. package/src/pages/components/image.mdx +513 -513
  60. package/src/pages/components/input.mdx +367 -367
  61. package/src/pages/components/jumbotron.mdx +530 -530
  62. package/src/pages/components/modal.mdx +212 -212
  63. package/src/pages/components/post-header.mdx +64 -64
  64. package/src/pages/components/pr-code.mdx +213 -213
  65. package/src/pages/components/product-engine.mdx +418 -418
  66. package/src/pages/components/product-number.mdx +58 -58
  67. package/src/pages/components/product-tile.mdx +51 -51
  68. package/src/pages/components/quote.mdx +33 -33
  69. package/src/pages/components/slimbanner.mdx +260 -260
  70. package/src/pages/components/table.mdx +108 -108
  71. package/src/pages/core/colors.mdx +21 -21
  72. package/src/pages/core/grid.mdx +193 -193
  73. package/src/pages/core/introduction.mdx +77 -77
  74. package/src/pages/core/tooltips.mdx +491 -491
  75. package/src/pages/patterns/introduction.mdx +60 -60
  76. package/src/styles/_variables.scss +70 -70
  77. package/tailwind.config.cjs +8 -8
  78. package/tsconfig.json +28 -28
  79. package/uno-config/index.ts +269 -269
  80. package/uno-config/theme/breakpoints.ts +9 -9
  81. package/uno-config/theme/colors.ts +65 -65
  82. package/uno-config/theme/dimensions.ts +17 -17
  83. package/uno-config/theme/effects.ts +14 -14
  84. package/uno-config/theme/grid.ts +10 -10
  85. package/uno-config/theme/index.ts +26 -26
  86. package/uno-config/theme/shortcuts/buttons.ts +53 -53
  87. package/uno-config/theme/shortcuts/components.ts +124 -124
  88. package/uno-config/theme/shortcuts/index.ts +20 -20
  89. package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
  90. package/uno-config/theme/shortcuts/layout.ts +75 -75
  91. package/uno-config/theme/typography.ts +29 -29
  92. package/uno.config.ts +2 -2
package/src/pages/components/table.mdx CHANGED
@@ -1,109 +1,109 @@
1
- ---
2
- title: "Table"
3
- layout: "../../layouts/MainLayout.astro"
4
-
5
- ---
6
-
7
- import Table from '../../components/Table.vue'
8
- export const tableData = [
9
- {
10
- id: 1,
11
- name: "Lorem Ipsum",
12
- email: "lorem@email.com",
13
- },
14
- {
15
- id: 2,
16
- name: "Chuck Norris",
17
- email: "ipsum@email.com",
18
- },
19
- {
20
- id: 3,
21
- name: "Ipsum Lorem",
22
- email: "lorem@email.com",
23
- }
24
- ];
25
-
26
- export const tableDataSecondary = [
27
- {
28
- name: "Lorem Ipsum",
29
- email: "lorem@email.com",
30
- },
31
- {
32
- name: "Chuck Norris",
33
- email: "ipsum@email.com",
34
- },
35
- {
36
- name: "Ipsum Lorem",
37
- email: "lorem@email.com",
38
- }
39
- ];
40
-
41
-
42
- # Table
43
-
44
- Simple table based on JSON data object.
45
-
46
- <div class="component-preview">
47
- <Table data={tableData}></Table>
48
- </div>
49
-
50
- ## Code
51
-
52
- ```ts
53
- const tableData = [
54
- {
55
- id: 1,
56
- name: "Lorem Ipsum",
57
- email: "lorem@email.com",
58
- },
59
- {
60
- id: 2,
61
- name: "Chuck Norris",
62
- email: "ipsum@email.com",
63
- },
64
- {
65
- id: 3,
66
- name: "Ipsum Lorem",
67
- email: "lorem@email.com",
68
- }
69
- ];
70
-
71
- ```
72
-
73
- ```html
74
- <!-- Astro -->
75
- <Table data={tableData} />
76
-
77
- <!-- Vue -->
78
- <Table :data="tableData" />
79
- ```
80
-
81
-
82
-
83
- # Table
84
-
85
- <div class="component-preview">
86
- <Table data={tableDataSecondary} />
87
- </div>
88
-
89
- ## Code
90
-
91
- ```ts
92
- const tableDataSecondary = [
93
- {
94
- name: "Lorem Ipsum",
95
- email: "lorem@email.com",
96
- },
97
- {
98
- name: "Chuck Norris",
99
- email: "ipsum@email.com",
100
- },
101
- {
102
- name: "Ipsum Lorem",
103
- email: "lorem@email.com",
104
- }
105
- ];
106
-
107
-
108
- <Table data={tableDataSecondary} />
1
+ ---
2
+ title: "Table"
3
+ layout: "../../layouts/MainLayout.astro"
4
+
5
+ ---
6
+
7
+ import Table from '../../components/Table.vue'
8
+ export const tableData = [
9
+ {
10
+ id: 1,
11
+ name: "Lorem Ipsum",
12
+ email: "lorem@email.com",
13
+ },
14
+ {
15
+ id: 2,
16
+ name: "Chuck Norris",
17
+ email: "ipsum@email.com",
18
+ },
19
+ {
20
+ id: 3,
21
+ name: "Ipsum Lorem",
22
+ email: "lorem@email.com",
23
+ }
24
+ ];
25
+
26
+ export const tableDataSecondary = [
27
+ {
28
+ name: "Lorem Ipsum",
29
+ email: "lorem@email.com",
30
+ },
31
+ {
32
+ name: "Chuck Norris",
33
+ email: "ipsum@email.com",
34
+ },
35
+ {
36
+ name: "Ipsum Lorem",
37
+ email: "lorem@email.com",
38
+ }
39
+ ];
40
+
41
+
42
+ # Table
43
+
44
+ Simple table based on JSON data object.
45
+
46
+ <div class="component-preview">
47
+ <Table data={tableData}></Table>
48
+ </div>
49
+
50
+ ## Code
51
+
52
+ ```ts
53
+ const tableData = [
54
+ {
55
+ id: 1,
56
+ name: "Lorem Ipsum",
57
+ email: "lorem@email.com",
58
+ },
59
+ {
60
+ id: 2,
61
+ name: "Chuck Norris",
62
+ email: "ipsum@email.com",
63
+ },
64
+ {
65
+ id: 3,
66
+ name: "Ipsum Lorem",
67
+ email: "lorem@email.com",
68
+ }
69
+ ];
70
+
71
+ ```
72
+
73
+ ```html
74
+ <!-- Astro -->
75
+ <Table data={tableData} />
76
+
77
+ <!-- Vue -->
78
+ <Table :data="tableData" />
79
+ ```
80
+
81
+
82
+
83
+ # Table
84
+
85
+ <div class="component-preview">
86
+ <Table data={tableDataSecondary} />
87
+ </div>
88
+
89
+ ## Code
90
+
91
+ ```ts
92
+ const tableDataSecondary = [
93
+ {
94
+ name: "Lorem Ipsum",
95
+ email: "lorem@email.com",
96
+ },
97
+ {
98
+ name: "Chuck Norris",
99
+ email: "ipsum@email.com",
100
+ },
101
+ {
102
+ name: "Ipsum Lorem",
103
+ email: "lorem@email.com",
104
+ }
105
+ ];
106
+
107
+
108
+ <Table data={tableDataSecondary} />
109
109
  ```
package/src/pages/core/colors.mdx CHANGED
@@ -1,21 +1,21 @@
1
- ---
2
- layout: ../../layouts/MainLayout.astro
3
- ---
4
-
5
- import MainColors from '../../components/MainColors.vue';
6
-
7
- <h1>Colors</h1>
8
- <p>Base colors for the design system.</p>
9
-
10
- ## How to use
11
-
12
- Click on any element to copy values to your clipboard:
13
-
14
- - **Color swatch** - Click the large color box to copy the hex value
15
- - **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
16
- - **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
17
- - **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
18
-
19
- A green checkmark (✓) will appear when copied successfully.
20
-
21
- <MainColors class="mt-8" client:load />
1
+ ---
2
+ layout: ../../layouts/MainLayout.astro
3
+ ---
4
+
5
+ import MainColors from '../../components/MainColors.vue';
6
+
7
+ <h1>Colors</h1>
8
+ <p>Base colors for the design system.</p>
9
+
10
+ ## How to use
11
+
12
+ Click on any element to copy values to your clipboard:
13
+
14
+ - **Color swatch** - Click the large color box to copy the hex value
15
+ - **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
16
+ - **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
17
+ - **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
18
+
19
+ A green checkmark (✓) will appear when copied successfully.
20
+
21
+ <MainColors class="mt-8" client:load />