spoko-design-system 0.1.2 → 0.1.4

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 (14) hide show
  1. package/package.json +12 -12
  2. package/src/components/Headline.vue +1 -1
  3. package/src/components/ProductDetailName.vue +56 -0
  4. package/src/components/ProductDetailsList.vue +36 -0
  5. package/src/components/SlimBanner.vue +2 -2
  6. package/src/config.ts +1 -0
  7. package/src/layouts/Layout.astro +1 -1
  8. package/src/pages/components/card.mdx +123 -2
  9. package/src/pages/components/details-list.mdx +66 -0
  10. package/src/pages/components/table.mdx +6 -6
  11. package/src/pages/index.astro +2 -2
  12. package/src/styles/base/_typography.scss +1 -0
  13. package/uno.config.ts +3 -3
  14. /package/src/components/{MainTable.vue → Table.vue} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "astro dev",
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "dependencies": {
30
30
  "@algolia/client-search": "^4.22.1",
31
- "@astrojs/mdx": "^2.1.0",
31
+ "@astrojs/mdx": "^2.1.1",
32
32
  "@astrojs/node": "^7.0.4",
33
33
  "@astrojs/sitemap": "^3.0.5",
34
34
  "@astrojs/vue": "^4.0.8",
@@ -42,7 +42,7 @@
42
42
  "@iconify-json/el": "^1.1.8",
43
43
  "@iconify-json/eos-icons": "^1.1.10",
44
44
  "@iconify-json/flowbite": "^1.1.0",
45
- "@iconify-json/fluent": "^1.1.46",
45
+ "@iconify-json/fluent": "^1.1.47",
46
46
  "@iconify-json/fluent-emoji": "1.1.18",
47
47
  "@iconify-json/icon-park-outline": "^1.1.15",
48
48
  "@iconify-json/la": "^1.1.8",
@@ -50,11 +50,11 @@
50
50
  "@iconify-json/noto-v1": "^1.1.11",
51
51
  "@iconify-json/octicon": "^1.1.52",
52
52
  "@iconify-json/ph": "^1.1.10",
53
- "@iconify-json/simple-icons": "^1.0.5",
53
+ "@iconify-json/simple-icons": "^1.1.90",
54
54
  "@iconify-json/uil": "^1.1.8",
55
- "@iconify/json": "^2.2.175",
55
+ "@iconify/json": "^2.2.177",
56
56
  "@iconify/vue": "^4.1.1",
57
- "@types/node": "^20.11.7",
57
+ "@types/node": "^20.11.14",
58
58
  "@types/react": "^18.2.48",
59
59
  "@unocss/astro": "^0.58.4",
60
60
  "@unocss/preset-attributify": "^0.58.4",
@@ -66,23 +66,23 @@
66
66
  "@vueuse/core": "^10.7.2",
67
67
  "astro-compress": "^2.2.8",
68
68
  "astro-i18next": "1.0.0-beta.21",
69
- "astro-icon": "^1.0.2",
69
+ "astro-icon": "^1.0.4",
70
70
  "astro-navbar": "^2.3.0",
71
71
  "astro-pagefind": "^1.4.0",
72
- "i18next": "^23.7.20",
72
+ "i18next": "^23.8.2",
73
73
  "i18next-browser-languagedetector": "^7.2.0",
74
74
  "i18next-fs-backend": "^2.3.1",
75
- "i18next-http-backend": "^2.4.2",
75
+ "i18next-http-backend": "^2.4.3",
76
76
  "i18next-vue": "^3.0.0",
77
77
  "sass": "^1.70.0",
78
+ "swiper": "^11.0.5",
78
79
  "unocss": "^0.57.7",
79
80
  "vite": "^5.0.12",
80
- "vue": "^3.4.15",
81
- "swiper": "^11.0.5"
81
+ "vue": "^3.4.15"
82
82
  },
83
83
  "devDependencies": {
84
84
  "@unocss/transformer-variant-group": "^0.58.4",
85
- "astro": "^4.2.4",
85
+ "astro": "^4.2.8",
86
86
  "unocss": "^0.58.3"
87
87
  },
88
88
  "pnpm": {
package/src/components/Headline.vue CHANGED
@@ -4,7 +4,7 @@ import type { PropType } from 'vue'
4
4
  const props = defineProps({
5
5
  as: {
6
6
  type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
7
- default: null,
7
+ default: 'span',
8
8
  required: true,
9
9
  },
10
10
  textSize: {
package/src/components/ProductDetailName.vue ADDED
@@ -0,0 +1,56 @@
1
+ <script lang="ts" setup>
2
+ import { PropType } from 'vue';
3
+
4
+ const props = defineProps({
5
+ as: {
6
+ type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
7
+ default: 'div',
8
+ required: true,
9
+ },
10
+ text: {
11
+ type: String,
12
+ default: '',
13
+ required: true,
14
+ },
15
+ styles: {
16
+ type: String,
17
+ default: '',
18
+ required: false,
19
+ }
20
+ })
21
+ </script>
22
+
23
+ <template>
24
+ <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex">
25
+ <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
26
+ {{ props.text }}
27
+ </span>
28
+ </component>
29
+ </template>
30
+
31
+
32
+ <style lang="scss">
33
+ .detail-name {
34
+ @apply overflow-hidden relative;
35
+
36
+ span {
37
+ @apply block bg-white dark:bg-blue-901 relative z-10 pr-1.5 w-full;
38
+
39
+ &:before {
40
+ // order: 2;
41
+ @apply text-gray-300 absolute select-none border-b border-gray-200 dark:border-gray-600 w-full -z-1;
42
+ height: 1em;
43
+ white-space: nowrap;
44
+ font-weight: 100;
45
+ bottom: 3px;
46
+ left: 0;
47
+ flex: 1;
48
+ content: '';
49
+ position:absolute;
50
+ }
51
+ }
52
+
53
+
54
+ }
55
+
56
+ </style>
package/src/components/ProductDetailsList.vue ADDED
@@ -0,0 +1,36 @@
1
+ <script setup lang="ts">
2
+ import ProductDetailName from "./ProductDetailName.vue";
3
+ const props = defineProps<{
4
+ value: {name: string, value: string}[];
5
+ }>();
6
+
7
+ </script>
8
+
9
+ <template>
10
+ <table class="details table-auto text-left bg-white">
11
+ <tbody>
12
+ <tr class="border" v-for="row, index in props.value" :key="index">
13
+ <ProductDetailName as="th" :text="row.name" />
14
+ <td>{{ row.value }}</td>
15
+ </tr>
16
+ </tbody>
17
+ </table>
18
+ </template>
19
+
20
+ <style lang="scss">
21
+ .details {
22
+ border: none;
23
+ box-shadow: none;
24
+
25
+ td,
26
+ tr,
27
+ th {
28
+ border: none;
29
+ @apply leading-4 text-sm;
30
+ }
31
+
32
+ th {
33
+ @apply pr-0
34
+ }
35
+ }
36
+ </style>
package/src/components/SlimBanner.vue CHANGED
@@ -16,7 +16,7 @@ const toggleVisibility = () => {
16
16
 
17
17
  <template>
18
18
  <div v-if="isShow" data-pagefind-ignore
19
- class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
19
+ class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 py-3 flex items-center justify-center text-xs sm:(text-base px-8) leading-none text-white relative print-hidden">
20
20
  <span
21
21
  class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
22
22
  <span class="leading-none "><span
@@ -31,7 +31,7 @@ const toggleVisibility = () => {
31
31
  </button>
32
32
  </div>
33
33
  <div v-else data-pagefind-ignore
34
- class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
34
+ class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
35
35
  <div class="tracking-widest leading-none">
36
36
  <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
37
37
  data-text="TERRORIST" /> <span data-text="STATE" />
package/src/config.ts CHANGED
@@ -29,6 +29,7 @@ export const SIDEBAR = [
29
29
  { text: "Card", link: "/components/card/" },
30
30
  { text: "Carousel", link: "/components/carousel/" },
31
31
  { text: "Copyright", link: "/components/copyright/" },
32
+ { text: "Details List", link: "/components/details-list/" },
32
33
  { text: "HandDrive", link: "/components/hand-drive/" },
33
34
  { text: "Headline", link: "/components/headline/" },
34
35
  { text: "Icons", link: "/components/icons/" },
package/src/layouts/Layout.astro CHANGED
@@ -44,7 +44,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
44
44
  createdy by
45
45
  </div>
46
46
  <img
47
- class="h-4 md:h-5 w-min"
47
+ class="h-4 w-min md:h-5 "
48
48
  src="spoko.space.svg"
49
49
  alt="Modern Websites"
50
50
  width="126"
package/src/pages/components/card.mdx CHANGED
@@ -12,7 +12,7 @@ import Image from '../../components/Image.astro'
12
12
  Card - product link component which can be used for carousels, section with related products, recently added etc.
13
13
 
14
14
  <div class="component-preview">
15
- <div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
15
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
16
16
  <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
17
17
  <a href="#">
18
18
  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
@@ -70,7 +70,7 @@ Card - product link component which can be used for carousels, section with rela
70
70
  </div>
71
71
 
72
72
  ```html
73
- <div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
73
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
74
74
  <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
75
75
  <a href="#">
76
76
  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
@@ -91,4 +91,125 @@ Card - product link component which can be used for carousels, section with rela
91
91
  </div>
92
92
  ```
93
93
 
94
+ ## Grid example
94
95
 
96
+ <div class="component-preview">
97
+ <div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
98
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
99
+ <a href="#">
100
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
101
+ <div class="px-4 py-3 w-72">
102
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
103
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
104
+ <div class="flex items-center">
105
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
106
+ <del>
107
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
108
+ </del>
109
+ <Icon name="octicon:info-24" class="ml-auto" />
110
+ </div>
111
+ </div>
112
+ </a>
113
+ </div>
114
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
115
+ <a href="#">
116
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
117
+ <div class="px-4 py-3 w-72">
118
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
119
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
120
+ <div class="flex items-center">
121
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
122
+ <del>
123
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
124
+ </del>
125
+ <Icon name="octicon:info-24" class="ml-auto" />
126
+ </div>
127
+ </div>
128
+ </a>
129
+ </div>
130
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
131
+ <a href="#">
132
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
133
+ <div class="px-4 py-3 w-72">
134
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
135
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
136
+ <div class="flex items-center">
137
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
138
+ <del>
139
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
140
+ </del>
141
+ <Icon name="octicon:info-24" class="ml-auto" />
142
+ </div>
143
+ </div>
144
+ </a>
145
+ </div>
146
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
147
+ <a href="#">
148
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
149
+ <div class="px-4 py-3 w-72">
150
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
151
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
152
+ <div class="flex items-center">
153
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
154
+ <del>
155
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
156
+ </del>
157
+ <Icon name="octicon:info-24" class="ml-auto" />
158
+ </div>
159
+ </div>
160
+ </a>
161
+ </div>
162
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
163
+ <a href="#">
164
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
165
+ <div class="px-4 py-3 w-72">
166
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
167
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
168
+ <div class="flex items-center">
169
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
170
+ <del>
171
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
172
+ </del>
173
+ <Icon name="octicon:info-24" class="ml-auto" />
174
+ </div>
175
+ </div>
176
+ </a>
177
+ </div>
178
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
179
+ <a href="#">
180
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
181
+ <div class="px-4 py-3 w-72">
182
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
183
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
184
+ <div class="flex items-center">
185
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
186
+ <del>
187
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
188
+ </del>
189
+ <Icon name="octicon:info-24" class="ml-auto" />
190
+ </div>
191
+ </div>
192
+ </a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ ```html
197
+ <div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
198
+ <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
199
+ <a href="#">
200
+ <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
201
+ <div class="px-4 py-3 w-72">
202
+ <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
203
+ <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
204
+ <div class="flex items-center">
205
+ <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
206
+ <del>
207
+ <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
208
+ </del>
209
+ <Icon name="octicon:info-24" class="ml-auto" />
210
+ </div>
211
+ </div>
212
+ </a>
213
+ </div>
214
+ </div>
215
+ ```
package/src/pages/components/details-list.mdx ADDED
@@ -0,0 +1,66 @@
1
+ ---
2
+ title: "DetailsList"
3
+ layout: "../../layouts/MainLayout.astro"
4
+ ---
5
+
6
+ import ProductDetailsList from '../../components/ProductDetailsList.vue'
7
+
8
+ export const tablevalue = [
9
+ {
10
+ name: "Product ID",
11
+ value: "9452694356",
12
+ },
13
+ {
14
+ name: "Color",
15
+ value: "Black",
16
+ },
17
+ {
18
+ name: "Fitting position",
19
+ value: "Front axle",
20
+ },
21
+ {
22
+ name: "Brake disc thicknes",
23
+ value: "22 mm",
24
+ },
25
+ {
26
+ name: "Weight",
27
+ value: "5.185 kg"
28
+ }
29
+ ];
30
+
31
+ # Product Details Table
32
+
33
+ <div class="component-preview flex-wrap">
34
+ <div class="bg-white rounded-lg p-8">
35
+ <ProductDetailsList value={tablevalue}></ProductDetailsList>
36
+ </div>
37
+ </div>
38
+
39
+ ```ts
40
+ const tablevalue = [
41
+ {
42
+ name: "Product ID",
43
+ value: "9452694356",
44
+ },
45
+ {
46
+ name: "Color",
47
+ value: "Black",
48
+ },
49
+ {
50
+ name: "Fitting position",
51
+ value: "Front axle",
52
+ },
53
+ {
54
+ name: "Brake disc thicknes",
55
+ value: "22 mm",
56
+ },
57
+ {
58
+ name: "Weight",
59
+ value: "5.185 kg"
60
+ }
61
+ ];
62
+
63
+ ```
64
+ ```html
65
+ <ProductDetailsList value={tablevalue}></ProductDetailsList>
66
+ ```
package/src/pages/components/table.mdx CHANGED
@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
4
4
 
5
5
  ---
6
6
 
7
- import MainTable from '../../components/MainTable.vue'
7
+ import Table from '../../components/Table.vue'
8
8
  export const tableData = [
9
9
  {
10
10
  id: 1,
@@ -44,7 +44,7 @@ export const tableDataSecondary = [
44
44
  Simple table based on JSON data object.
45
45
 
46
46
  <div class="component-preview">
47
- <MainTable data={tableData}></MainTable>
47
+ <Table data={tableData}></Table>
48
48
  </div>
49
49
 
50
50
  ## Code
@@ -72,10 +72,10 @@ const tableData = [
72
72
 
73
73
  ```html
74
74
  <!-- Astro -->
75
- <MainTable data={tableData} />
75
+ <Table data={tableData} />
76
76
 
77
77
  <!-- Vue -->
78
- <MainTable :data="tableData" />
78
+ <Table :data="tableData" />
79
79
  ```
80
80
 
81
81
 
@@ -83,7 +83,7 @@ const tableData = [
83
83
  # Table
84
84
 
85
85
  <div class="component-preview">
86
- <MainTable data={tableDataSecondary} />
86
+ <Table data={tableDataSecondary} />
87
87
  </div>
88
88
 
89
89
  ## Code
@@ -105,5 +105,5 @@ const tableDataSecondary = [
105
105
  ];
106
106
 
107
107
 
108
- <MainTable data={tableDataSecondary} />
108
+ <Table data={tableDataSecondary} />
109
109
  ```
package/src/pages/index.astro CHANGED
@@ -49,7 +49,7 @@ const navItems = [
49
49
  </Button>
50
50
  </Jumbatron>
51
51
  <nav>
52
- <ul class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row) ">
52
+ <div class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row) ">
53
53
  {
54
54
  navItems.map(({ title, description, url, icon }) => (
55
55
  <a
@@ -65,7 +65,7 @@ const navItems = [
65
65
  </a>
66
66
  ))
67
67
  }
68
- </ul>
68
+ </div>
69
69
  </nav>
70
70
  </div>
71
71
  </Layout>
package/src/styles/base/_typography.scss CHANGED
@@ -64,6 +64,7 @@
64
64
  font-display: swap;
65
65
  }
66
66
 
67
+ // for some content which don't need to index in Google
67
68
  [data-text]:before {
68
69
  content: attr(data-text);
69
70
  }
package/uno.config.ts CHANGED
@@ -38,11 +38,11 @@ export default defineConfig({
38
38
  ['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
39
39
  ['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
40
40
  ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
41
- ['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
42
- ['img--medium', 'w-60'],
41
+ ['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
42
+ ['img--medium', 'h-full w-60'],
43
43
  ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
44
44
  ['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
45
- ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
45
+ ['btn-primary', 'bg-lightBlue-400 border border-transparent font-medium hover:bg-lightBlue-500 inline-flex items-center justify-center shadow text-base text-blue-700'],
46
46
  ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
47
47
  ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
48
48
  ['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
/package/src/components/{MainTable.vue → Table.vue} RENAMED
File without changes