spoko-design-system 0.3.0 → 0.3.1

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 (23) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/src/components/Breadcrumbs.vue +2 -2
  4. package/src/components/Header/Header.astro +1 -1
  5. package/src/components/LeftSidebar.astro +1 -1
  6. package/src/components/MainInput.vue +2 -2
  7. package/src/components/PostHeader.astro +2 -2
  8. package/src/components/PrCode.vue +4 -4
  9. package/src/components/Product/ProductCodes.vue +5 -5
  10. package/src/components/Product/ProductDoc.vue +1 -1
  11. package/src/components/layout/Header.astro +1 -1
  12. package/src/pages/components/card.mdx +6 -6
  13. package/src/pages/components/icons.astro +3 -3
  14. package/src/pages/components/input.mdx +8 -8
  15. package/src/pages/components/jumbatron.mdx +6 -6
  16. package/src/pages/components/slimbanner.mdx +1 -1
  17. package/src/pages/core/grid.mdx +2 -2
  18. package/src/pages/index.astro +5 -5
  19. package/uno-config/theme/shortcuts/buttons.ts +7 -7
  20. package/uno-config/theme/shortcuts/components.ts +13 -13
  21. package/uno-config/theme/shortcuts/constants.ts +19 -25
  22. package/uno-config/theme/shortcuts/layout.ts +7 -6
  23. package/uno-config/theme/shortcuts/product.ts +5 -5
package/README.md CHANGED
@@ -105,7 +105,7 @@ You can import your component library or create your own and document it easily.
105
105
  There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
106
106
 
107
107
  <div class="component-preview">
108
- <button class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
108
+ <button class="text-white bg-blue-lightest px-4 py-2 rounded-md">Your component</button>
109
109
  </div>
110
110
 
111
111
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "0.3.00",
3
+ "version": "0.3.01",
4
4
  "private": false,
5
5
  "main": "./index.ts",
6
6
  "module": "./index.ts",
package/src/components/Breadcrumbs.vue CHANGED
@@ -42,7 +42,7 @@ const isLast = (index: Number) => {
42
42
  <ul class="breadcrumbs flex items-center p-0 leading-none ">
43
43
  <li v-if="props.showBack" class="breadcrumb-item flex">
44
44
  <button
45
- class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-lightBlue-500 whitespace-nowrap my-auto"
45
+ class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light whitespace-nowrap my-auto"
46
46
  :title="props.textBack" onclick="history.back()">
47
47
  <span class="block px-3" i-bx-bx-arrow-back />
48
48
  </button>
@@ -52,7 +52,7 @@ const isLast = (index: Number) => {
52
52
  itemtype="https://schema.org/BreadcrumbList">
53
53
  <li v-if="props.showHome" class="breadcrumb-item flex">
54
54
  <a href="/"
55
- class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-lightBlue-400 whitespace-nowrap translate-y-0 text-sm my-auto px-3"
55
+ class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto px-3"
56
56
  :title="textBack" itemprop="item" i-carbon-home>
57
57
  </a>
58
58
  <meta itemprop="position" content="1">
package/src/components/Header/Header.astro CHANGED
@@ -15,7 +15,7 @@ import Search from "astro-pagefind/components/Search";
15
15
  >
16
16
  <div class="flex flex-nowrap">
17
17
  <MenuIcon class="w-4 h-4 text-gray-800 lg:hidden mr-4" />
18
- <a class="text-2xl font-medium block font-textbold leading-none block my-auto text-blue-600" href="/"> SDS</a>
18
+ <a class="text-2xl font-medium block font-textbold leading-none block my-auto text-blue-medium" href="/"> SDS</a>
19
19
  <Search
20
20
  transition:persist
21
21
  transition:name="search-field"
package/src/components/LeftSidebar.astro CHANGED
@@ -25,7 +25,7 @@ const getLinkClasses = (link) => {
25
25
 
26
26
  <Astronav>
27
27
  <MenuItems
28
- class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-500 bg-opacity-5 flex)"
28
+ class="hidden z-20 bg-blue-gray-100 w-64 h-full overflow-y-auto px-4 border-r pb-3 absolute lg:(relative bg-blue-lightest bg-opacity-5 flex)"
29
29
  >
30
30
  <ul class="mt-0 mb-auto">
31
31
  {
package/src/components/MainInput.vue CHANGED
@@ -6,10 +6,10 @@ const props = defineProps<{
6
6
 
7
7
  <template>
8
8
  <label class="group text-left w-full max-w-xs flex flex-col">
9
- <span class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600">{{ label
9
+ <span class="group-hover:text-blue-medium ml-2 text-slate-600 text-sm group-focus-within:text-blue-medium">{{ label
10
10
  }}</span>
11
11
  <input
12
- class="group-hover:border-blue-500 border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-600"
12
+ class="group-hover:border-blue-lightest border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-medium"
13
13
  type="text" />
14
14
  </label>
15
15
  </template>
package/src/components/PostHeader.astro CHANGED
@@ -22,7 +22,7 @@ import Date from "./Date.astro";
22
22
  ---
23
23
 
24
24
  <header
25
- class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-900"
25
+ class="post-header pt-11 w-full justify-center text-white z-2 bg-blue-darkest"
26
26
  >
27
27
  <div class="heading flex flex-wrap">
28
28
  <div
@@ -95,7 +95,7 @@ import Date from "./Date.astro";
95
95
 
96
96
  <style is:global>
97
97
  .icon {
98
- @apply text-lightBlue-400 mr-2;
98
+ @apply text-brand-secondary mr-2;
99
99
  width: 1em;
100
100
  height: 1em;
101
101
  fill: currentcolor;
package/src/components/PrCode.vue CHANGED
@@ -32,7 +32,7 @@ const props = defineProps({
32
32
  }
33
33
 
34
34
  .btn-prcode::before {
35
- @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500 text-center z-50;
35
+ @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light text-center z-50;
36
36
  display: none;
37
37
  position: absolute;
38
38
  top: -10px;
@@ -71,7 +71,7 @@ const props = defineProps({
71
71
  }
72
72
 
73
73
  .btn-prcode--2JZ {
74
- @apply text-lightBlue-500;
74
+ @apply text-accent-light;
75
75
  }
76
76
 
77
77
  .btn-prcode--2JZ::before {
@@ -79,7 +79,7 @@ const props = defineProps({
79
79
  }
80
80
 
81
81
  .btn-prcode--7L6 {
82
- @apply text-lightBlue-500;
82
+ @apply text-accent-light;
83
83
  }
84
84
 
85
85
  .btn-prcode--7L6::before {
@@ -95,7 +95,7 @@ const props = defineProps({
95
95
  }
96
96
 
97
97
  .btn-prcode--2JE {
98
- @apply text-lightBlue-700;
98
+ @apply text-accent-dark;
99
99
  }
100
100
 
101
101
  .btn-prcode--2JE::before {
package/src/components/Product/ProductCodes.vue CHANGED
@@ -47,7 +47,7 @@ const settings = {
47
47
 
48
48
  <style scoped>
49
49
  .btn-prcode {
50
- @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-700 after:absolute after:w-4 text-center;
50
+ @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-darker after:absolute after:w-4 text-center;
51
51
  }
52
52
 
53
53
  .btn-prcode--pdp {
@@ -55,7 +55,7 @@ const settings = {
55
55
  }
56
56
 
57
57
  .btn-prcode::before {
58
- @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-lightBlue-500;
58
+ @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light;
59
59
  display: none;
60
60
  position: absolute;
61
61
  text-align: center;
@@ -102,7 +102,7 @@ const settings = {
102
102
  }
103
103
 
104
104
  .btn-prcode--2JZ {
105
- @apply text-lightBlue-500;
105
+ @apply text-accent-light;
106
106
  }
107
107
 
108
108
  .btn-prcode--2JZ::before {
@@ -110,7 +110,7 @@ const settings = {
110
110
  }
111
111
 
112
112
  .btn-prcode--7L6 {
113
- @apply text-lightBlue-500;
113
+ @apply text-accent-light;
114
114
  }
115
115
 
116
116
  .btn-prcode--7L6::before {
@@ -128,7 +128,7 @@ const settings = {
128
128
  }
129
129
 
130
130
  .btn-prcode--2JE {
131
- @apply text-lightBlue-700;
131
+ @apply text-accent-dark;
132
132
  }
133
133
 
134
134
  .btn-prcode--2JE::before {
package/src/components/Product/ProductDoc.vue CHANGED
@@ -19,7 +19,7 @@ const props = defineProps({
19
19
  :title="props.file.path"
20
20
  class="flex items-center hover:underline underline-offset-2 hover:underline-1"
21
21
  >
22
- <div i-system-uicons-document-justified class="text-blue-500 dark:text-lightBlue-500" /> <span>{{ props.file.name }}</span>
22
+ <div i-system-uicons-document-justified class="text-blue-lightest dark:text-accent-light" /> <span>{{ props.file.name }}</span>
23
23
  </a>
24
24
  </li>
25
25
  </template>
package/src/components/layout/Header.astro CHANGED
@@ -35,7 +35,7 @@ const navItemsLeft = [
35
35
  navItemsLeft.map(({ title, description, url, img }) => (
36
36
  <a
37
37
  href={url}
38
- class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
38
+ class="text-gray-400 hover:bg-blue-darker hover:text-white px-3 py-1 rounded-full text-sm font-medium"
39
39
  title={description}
40
40
  itemprop="url"
41
41
  >
package/src/pages/components/card.mdx CHANGED
@@ -224,7 +224,7 @@ Skewed background with CSS & SVG.
224
224
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
225
225
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
226
226
  <blockquote class="relative p-8 mb-4 text-white/90">
227
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
227
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
228
228
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
229
229
  <p class="text-md font-light mt-2 text-white">
230
230
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
@@ -235,7 +235,7 @@ Skewed background with CSS & SVG.
235
235
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
236
236
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
237
237
  <blockquote class="relative p-8 mb-4 text-white/90">
238
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
238
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
239
239
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
240
240
  <p class="text-md font-light mt-2 text-white">
241
241
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
@@ -246,7 +246,7 @@ Skewed background with CSS & SVG.
246
246
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
247
247
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
248
248
  <blockquote class="relative p-8 mb-4 text-white/90">
249
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
249
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
250
250
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
251
251
  <p class="text-md font-light mt-2 text-white">
252
252
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
@@ -257,7 +257,7 @@ Skewed background with CSS & SVG.
257
257
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
258
258
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
259
259
  <blockquote class="relative p-8 mb-4 text-white/90">
260
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
260
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
261
261
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
262
262
  <p class="text-md font-light mt-2 text-white">
263
263
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
@@ -268,7 +268,7 @@ Skewed background with CSS & SVG.
268
268
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
269
269
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
270
270
  <blockquote class="relative p-8 mb-4 text-white/90">
271
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
271
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
272
272
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
273
273
  <p class="text-md font-light mt-2 text-white">
274
274
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
@@ -279,7 +279,7 @@ Skewed background with CSS & SVG.
279
279
  <div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
280
280
  <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
281
281
  <blockquote class="relative p-8 mb-4 text-white/90">
282
- <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
282
+ <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-medium fill-current"></polygon></svg>
283
283
  <h4 class="text-xl font-bold text-white">Officia deserunt commodo sit eiusmod</h4>
284
284
  <p class="text-md font-light mt-2 text-white">
285
285
  Ullamco qui minim anim aliqua ex sunt irure aliqua irure ullamco tempor laborum non sit. Fugiat ipsum cillum deserunt proident esse elit.
package/src/pages/components/icons.astro CHANGED
@@ -27,7 +27,7 @@ const sortedIconCollections = Object.entries(ICONS)
27
27
  <p class="mb-4">Astro Icon is a straightforward icon system for the Astro framework.</p>
28
28
 
29
29
  <a href="https://www.astroicon.dev/"
30
- class="text-blue-600 hover:text-blue-800 underline"
30
+ class="text-blue-medium hover:text-accent-darker underline"
31
31
  target="_blank"
32
32
  rel="noopener noreferrer">
33
33
  https://www.astroicon.dev/
@@ -42,7 +42,7 @@ const sortedIconCollections = Object.entries(ICONS)
42
42
  <div>
43
43
  <h2 class="text-xl font-semibold mb-4">
44
44
  <a href={url}
45
- class="text-blue-600 hover:text-blue-800 inline-flex items-center gap-2"
45
+ class="text-blue-medium hover:text-accent-darker inline-flex items-center gap-2"
46
46
  target="_blank"
47
47
  rel="noopener noreferrer">
48
48
  {name}
@@ -57,7 +57,7 @@ const sortedIconCollections = Object.entries(ICONS)
57
57
  <div class="p-4 bg-gray-50 rounded-lg mb-2 w-full flex justify-center items-center min-h-[64px]">
58
58
  <Icon
59
59
  name={`${name}:${iconName}`}
60
- class="text-3xl text-blue-600"
60
+ class="text-3xl text-blue-medium"
61
61
  />
62
62
  </div>
63
63
  <code class="text-sm text-gray-600 text-center break-all">
package/src/pages/components/input.mdx CHANGED
@@ -20,13 +20,13 @@ import MainInput from '../../components/MainInput.vue'
20
20
 
21
21
  <div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
22
22
  <div class="relative">
23
- <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
24
- <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
23
+ <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
24
+ <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
25
25
  </div>
26
26
 
27
27
  <div class="relative z-0">
28
- <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
29
- <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
28
+ <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
29
+ <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
30
30
  </div>
31
31
  </div>
32
32
 
@@ -35,12 +35,12 @@ import MainInput from '../../components/MainInput.vue'
35
35
 
36
36
  ```js
37
37
  <div class="relative">
38
- <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
39
- <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
38
+ <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
39
+ <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
40
40
  </div>
41
41
 
42
42
  <div class="relative z-0">
43
- <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
44
- <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
43
+ <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer" placeholder=" " />
44
+ <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
45
45
  </div>
46
46
  ```
package/src/pages/components/jumbatron.mdx CHANGED
@@ -13,7 +13,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
13
13
 
14
14
  ## Jumbatron - classic
15
15
  <div class="component-preview">
16
- <Jumbatron class="w-full" intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
16
+ <Jumbatron class="w-full" intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
17
17
  <p slot="subtitle"
18
18
  class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
19
19
  set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
@@ -28,7 +28,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
28
28
  </div>
29
29
 
30
30
  ```js
31
- <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
31
+ <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
32
32
  <span slot="intro" set:html= />
33
33
  <p slot="subtitle"
34
34
  class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
@@ -46,7 +46,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
46
46
  ## Small Jumbatron
47
47
 
48
48
  <div class="component-preview">
49
- <Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
49
+ <Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
50
50
  <p slot="subtitle"
51
51
  class="mt-5 sm:mt-8 sm:flex sm:justify-center"
52
52
  set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
@@ -55,7 +55,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
55
55
  </div>
56
56
 
57
57
  ```js
58
- <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
58
+ <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
59
59
 
60
60
  <p slot="subtitle"
61
61
  class="mt-5 sm:mt-8 sm:flex sm:justify-center"
@@ -74,7 +74,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
74
74
  ## Small Jumbatron - custom slot intro instead of prop
75
75
  <div class="component-preview">
76
76
  <Jumbatron class="w-full" small >
77
- <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.</h2>
77
+ <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.</h2>
78
78
  <p slot="subtitle"
79
79
  class="mt-5 sm:mt-8 sm:flex sm:justify-center"
80
80
  set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
@@ -85,7 +85,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
85
85
  ```js
86
86
  <Jumbatron class="w-full" small >
87
87
  <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">
88
- Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.
88
+ Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
89
89
  </h2>
90
90
  <p slot="subtitle"
91
91
  class="mt-5 sm:mt-8 sm:flex sm:justify-center"
package/src/pages/components/slimbanner.mdx CHANGED
@@ -31,5 +31,5 @@ SlimBanner - solidarity with Ukraine.
31
31
 
32
32
  ## uno.config.ts / shortcuts
33
33
  ```js
34
- ['slimbanner','px-4 sm:px-8 flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100 z-2 px-4 py-3 sm:(text-base px-8) text-blue-700 print-hidden'],
34
+ ['slimbanner','px-4 sm:px-8 flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],
35
35
  ```
package/src/pages/core/grid.mdx CHANGED
@@ -32,7 +32,7 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
32
32
  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
33
33
  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
34
34
  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
35
- <p class='breakout call-to-action border-2 border-blue-700 font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
35
+ <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
36
36
  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
37
37
  <h3>Images as full-bleed works too</h3>
38
38
  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
@@ -73,7 +73,7 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
73
73
  <p class='breakout call-to-action bg-gray-200 text-xl font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well.</p>
74
74
  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
75
75
  <p>Officia est non in non veniam in enim do adipisicing aliquip. Irure non duis reprehenderit fugiat sunt dolore excepteur nulla labore commodo occaecat fugiat non. Voluptate non dolore ullamco ullamco veniam est sint aute irure labore. Minim mollit sunt qui amet reprehenderit fugiat anim et duis tempor velit. Aute excepteur cupidatat voluptate duis nisi dolore nulla occaecat adipisicing minim est culpa. Aute eiusmod labore ex minim eu laborum velit proident adipisicing anim nulla sunt.Eu magna mollit cupidatat occaecat aute sunt aliqua nulla cillum in consequat ipsum sunt. Aliquip deserunt nulla sit aliquip est elit id. Amet eu labore id ad laboris voluptate consectetur sunt elit mollit. Culpa irure velit velit ipsum quis dolore esse dolor excepteur Lorem.</p>
76
- <p class='breakout call-to-action border-2 border-blue-700 font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
76
+ <p class='breakout call-to-action border-2 border-blue-darker font-headregular'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed without bothering with a div or anything on the outside of it as well</p>
77
77
  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur deleniti. Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
78
78
  <h3>Images as full-bleed works too</h3>
79
79
  <img class='full-width' src="https://unsplash.it/1600/400" alt="" />
package/src/pages/index.astro CHANGED
@@ -76,7 +76,7 @@ const navItems = [
76
76
  </div>
77
77
  </nav>
78
78
  <div
79
- class="mt-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative"
79
+ class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative"
80
80
  >
81
81
  <Quote>
82
82
  <blockquote>
@@ -105,16 +105,16 @@ const navItems = [
105
105
  <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
106
106
  <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
107
107
  <li class="leading-5 me-6 mb-4 lg:mb-0">
108
- <a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> catalog.polo.blue</a>
108
+ <a href="https://catalog.polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> catalog.polo.blue</a>
109
109
  </li>
110
110
  <li class="leading-5 me-6 mb-4 lg:mb-0">
111
- <a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> polo.blue</a>
111
+ <a href="https://polo.blue" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> polo.blue</a>
112
112
  </li>
113
113
  <li class="leading-5 me-6 mb-4 lg:mb-0">
114
- <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> spoko.space</a>
114
+ <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> spoko.space</a>
115
115
  </li>
116
116
  <li class="leading-5 me-6 mb-4 lg:mb-0">
117
- <a href="https://sale.polo.blue/" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank">sale.polo.blue</a>
117
+ <a href="https://sale.polo.blue/" class="transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank">sale.polo.blue</a>
118
118
  </li>
119
119
  </ul>
120
120
  </div>
package/uno-config/theme/shortcuts/buttons.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  // shortcuts/buttons.ts
2
- import { BUTTON_STYLES, TRANSITIONS } from './constants'
2
+ import { BUTTON_STYLES, TRANSITIONS, LAYOUT, COLORS } from './constants'
3
3
 
4
4
  const { base, sizes, variants, hover } = BUTTON_STYLES
5
5
 
@@ -10,7 +10,7 @@ export const buttonShortcuts = [
10
10
 
11
11
  // Primary buttons
12
12
  ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid}`],
13
- ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${base.transition}`],
13
+ ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${TRANSITIONS.base}`],
14
14
 
15
15
  // Secondary buttons
16
16
  ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid}`],
@@ -18,11 +18,11 @@ export const buttonShortcuts = [
18
18
 
19
19
  // Tertiary buttons
20
20
  ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid}`],
21
- ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${base.transition}`],
21
+ ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${TRANSITIONS.base}`],
22
22
 
23
23
  // Utility buttons
24
- ['btn-text', 'text-neutral-dark border border-transparent hover:underline transition-all'],
25
- ['btn-tag', 'bg-blue-ultralight text-blue-darker font-medium mr-2 dark:bg-neutral-darker dark:text-blue-light border border-blue-default hover:border-blue-medium justify-center'],
24
+ ['btn-text', `text-neutral-dark border border-transparent hover:underline ${TRANSITIONS.base}`],
25
+ ['btn-tag', `bg-blue-ultralight text-blue-darker font-medium mr-2 dark:bg-neutral-darker dark:text-blue-light border border-blue-default hover:border-blue-medium ${LAYOUT.flex.center}`],
26
26
 
27
27
  // Size variants
28
28
  ['btn-normal', sizes.normal],
@@ -36,7 +36,7 @@ export const buttonShortcuts = [
36
36
  ['btn-dark-hover', hover.dark],
37
37
 
38
38
  // Special buttons
39
- ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
39
+ ['btn-copy', `leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) ${LAYOUT.position.absolute}`],
40
40
  ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
41
- ['btn-prcode', 'relative inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-700 absolute w-4 pl-0.5)']
41
+ ['btn-prcode', `${LAYOUT.position.relative} inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-darker ${LAYOUT.position.absolute} w-4 pl-0.5)`]
42
42
  ];
package/uno-config/theme/shortcuts/components.ts CHANGED
@@ -17,8 +17,8 @@ export const componentShortcuts = [
17
17
  ['product-row__main', 'w-full sm:w-auto col-span-2 leading-none relative sm:pl-1 md:(pl-0 row-start-1 col-start-2 col-span-1)'],
18
18
 
19
19
  // Product elements
20
- ['product-number', `font-novamono content-center ${LAYOUT.flex.wrap} flex-col content-start pr-5 ${COLORS.bgWhite}`],
21
- ['p-number', 'inline-flex leading-none relative'],
20
+ ['product-number', `font-novamono ${LAYOUT.flex.colCenter} content-start pr-5 ${COLORS.bgWhite}`],
21
+ ['p-number', `${LAYOUT.flex.base} leading-none relative`],
22
22
  ['tooltip', 'invisible absolute'],
23
23
  ['has-tooltip', 'hover:(visible z-50)'],
24
24
  ['product-code', 'text-blue-light mr-1 leading-none tracking-wide select-all'],
@@ -28,24 +28,24 @@ export const componentShortcuts = [
28
28
  ['product-thumb--plp', PRODUCT_STYLES.thumb.container],
29
29
  ['product-link--related', `${PRODUCT_STYLES.link.base} dark:bg-accent-deepBlue after:bg-accent-light`],
30
30
  ['product-model', 'font-400'],
31
- ['product-button', `text-blue-500 cursor-pointer text-base leading-none ${LAYOUT.flex.center} w-8 h-8 min-w-8 ${TRANSITIONS.base} ${COLORS.bgWhite} dark:bg-accent-deepBlue focus:(text-blue-500) hover:(text-blue-500)`],
31
+ ['product-button', `text-blue-lightest cursor-pointer text-base leading-none ${LAYOUT.flex.center} w-8 h-8 min-w-8 ${TRANSITIONS.base} ${COLORS.bgWhite} dark:bg-accent-deepBlue focus:(text-blue-lightest) hover:(text-blue-lightest)`],
32
32
 
33
33
  // Category related
34
34
  ['category-section', `pb-4 w-full ${COLORS.bgWhite} mb-4 overflow-x-hidden ${LAYOUT.flex.wrap} max-w-full`],
35
35
  ['category-tile', `${LAYOUT.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%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5 first:ml-4`],
36
- ['category-toggler', 'sm:bg-opacity-20 pt-1 flex-inline items-center justify-center hover:text-light-blue-500 text-neutral-light hover:text-blue-500 px-4 leading-7 pb-0.5 md:pl-0'],
36
+ ['category-toggler', `sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest px-4 leading-7 pb-0.5 md:pl-0`],
37
37
  ['category-link', 'w-full sm:w-auto text-neutral-default hover:(bg-gray-50 sm:bg-inherit) py-2 sm:py-0 text-lg font-medium text-left px-3 block sm:(text-base leading-4 mb-1.5) md:(px-4 py-1 table-cell)'],
38
- ['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
38
+ ['category-carousel__link', `uppercase ml-auto px-4 text-xs ${LAYOUT.flex.alignCenter} mt-3 hover:underline`],
39
39
 
40
40
  // Navigation
41
41
  ['nav-link', 'text-slate-light hover:bg-blue-darker hover:text-white px-3 py-3.5 md:py-1 rounded-full text-sm font-medium'],
42
- ['btn-navigation', `${COLORS.bgWhite} drop-shadow-md rounded-full border ${LAYOUT.flex.center} w-1/2 h-12 bottom-1 z-2 md:(bg-white/90 text-inherit hover:(text-light-blue-500 bg-white))`],
42
+ ['btn-navigation', `${COLORS.bgWhite} drop-shadow-md rounded-full border ${LAYOUT.flex.center} w-1/2 h-12 bottom-1 z-2 md:(bg-white/90 text-inherit hover:(text-accent-light bg-white))`],
43
43
  ['btn-navigation__active', 'border border-transparent md:(border-neutral-lighter focus:ring-0) font-medium text-white bg-blue-darker hover:bg-accent-darker focus:ring-2 focus:outline-none focus:ring-blue-300'],
44
44
 
45
45
  // Carousel
46
- ['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
46
+ ['carousel-tile', `${LAYOUT.flex.base} w-52 min-w-52 ml-1 lg:ml-1.5`],
47
47
  ['carousel-product-tile', `${LAYOUT.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`],
48
- ['carousel-item', 'w-full w-full group-hover:filter-invert relative flex flex-col'],
48
+ ['carousel-item', `w-full w-full group-hover:filter-invert relative ${LAYOUT.flex.col}`],
49
49
  ['carousel-big', 'shadow-[inset_0_10px_60px_-15px_rgba(0,0,0,0.1)] w-full h-full'],
50
50
 
51
51
  // PDP (Product Detail Page)
@@ -54,17 +54,17 @@ export const componentShortcuts = [
54
54
  ['pdp-slider-thumb', 'block h-22.5 w-31 min-w-31 mb-2'],
55
55
 
56
56
  // PLP (Product List Page)
57
- ['plp-name', `${LAYOUT.flex.center} leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12`],
57
+ ['plp-name', `${LAYOUT.flex.alignCenter} leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12`],
58
58
  ['plp-desc', `hidden sm:block col-span-3 md:col-span-1 md:col-start-3 ${LAYOUT.position.relative} px-2 sm:px-0`],
59
59
  ['plp-materials', 'text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular whitespace-normal md:whitespace-pre-wrap'],
60
60
  ['plp-b-desc', `pb-4 ${COLORS.bgWhite} text-base ${LAYOUT.flex.wrap} mt-6`],
61
- ['plp-icons', `${LAYOUT.position.absolute} top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto ${LAYOUT.flex.base} justify-end text-sm`],
61
+ ['plp-icons', `${LAYOUT.position.absolute} top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto ${LAYOUT.flex.justifyEnd} text-sm`],
62
62
  ['plp-replacements', 'col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
63
63
 
64
64
  // Miscellaneous
65
65
  ['flag-ua', '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%]'],
66
66
  ['engine-info', `${LAYOUT.position.absolute} z-20 inline-block w-56 text-xs font-light text-slate-light ${TRANSITIONS.base} ${COLORS.bgWhite} border border-neutral-lighter rounded-lg shadow-sm dark:text-neutral-default dark:border-slate-default dark:bg-slate-darker bottom-full mb-2 invisible opacity-0 group-hover:(opacity-100 visible -left-full before:left-9) before:(absolute w-0 h-0 -bottom-3 border-l-transparent border-r-transparent border-t-neutral-lightest dark:border-t-slate-dark border-l-10 border-r-10 border-t-10 content-empty)`],
67
- ['engine-code', 'underline decoration-dotted underline-offset-4 py-0.5 decoration-neutral-light group-hover:(decoration-blue-500 dark:decoration-accent-light)'],
67
+ ['engine-code', 'underline decoration-dotted underline-offset-4 py-0.5 decoration-neutral-light group-hover:(decoration-blue-lightest dark:decoration-accent-light)'],
68
68
  ['number-secondary', `block ${LAYOUT.position.absolute} inset-0 text-slate-light select-all ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
69
69
  ['code-formatted', 'leading-none mt-0 relative text-xs'],
70
70
 
@@ -78,12 +78,12 @@ export const componentShortcuts = [
78
78
  // Slides
79
79
  ['slide-bg', 'scale-140 bg-center bg-no-repeat bg-contain h-full w-full absolute top-0 filter-blur overflow-hidden transform bg-gray-200 dark:bg-gray-700'],
80
80
  ['slide-img', 'cursor-zoom-in my-auto z-50 h-full max-w-screen-2xl object-center object-contain pointer-events-none'],
81
- ['slide-pic', 'w-full flex justify-end absolute top-0 bottom-0'],
81
+ ['slide-pic', `w-full ${LAYOUT.flex.justifyEnd} absolute top-0 bottom-0`],
82
82
  ['slide-thumb', `block bg-gray-100 ${aspectRatios['4/3']} w-30 h-22.5 cursor-grab active:cursor-grabbing`],
83
83
  ['slide-thumb__img', `pointer-events-none pb-px h-22.5 w-30 m-auto object-cover ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
84
84
 
85
85
  // Product related components
86
- ['product-carousel', `${LAYOUT.flex.wrap} content-between w-64 min-w-64 flex ml-1 first:ml-4`],
86
+ ['product-carousel', `${LAYOUT.flex.wrap} content-between w-64 min-w-64 ${LAYOUT.flex.base} ml-1 first:ml-4`],
87
87
  ['pdp-slide', `h-full bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative} overflow-hidden border border-transparent`],
88
88
  ['product-link', PRODUCT_STYLES.link.base],
89
89
  ['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
package/uno-config/theme/shortcuts/constants.ts CHANGED
@@ -12,7 +12,7 @@ export const aspectRatios = {
12
12
  // Theme colors
13
13
  export const COLORS = {
14
14
  bgWhite: 'bg-white',
15
- bgDark: 'dark:bg-blue-901',
15
+ bgDark: 'dark:bg-accent-deepBlue',
16
16
  textSlate: 'text-slate-500',
17
17
  textNeutralLight: 'dark:text-neutral-light',
18
18
  textSlateDark: 'text-slate-darkest',
@@ -32,9 +32,17 @@ export const LAYOUT = {
32
32
  flex: {
33
33
  base: 'flex',
34
34
  center: 'flex items-center justify-center',
35
+ alignCenter: 'flex items-center',
36
+ justifyCenter: 'flex justify-center',
35
37
  between: 'flex items-center justify-between',
36
38
  wrap: 'flex flex-wrap',
37
39
  nowrap: 'flex-nowrap',
40
+ col: 'flex flex-col',
41
+ colCenter: 'flex flex-col items-center',
42
+ start: 'flex items-start',
43
+ end: 'flex items-end',
44
+ justifyEnd: 'flex justify-end',
45
+ alignEnd: 'flex items-end',
38
46
  },
39
47
  spacing: {
40
48
  topPadding: 'pt-24 sm:pt-14',
@@ -74,7 +82,7 @@ export const BUTTON_STYLES = {
74
82
  },
75
83
  variants: {
76
84
  primary: {
77
- solid: 'bg-accent-lightest border border-transparent hover:bg-accent-light text-blue-darker shadow',
85
+ solid: 'bg-brand-secondary border border-transparent hover:bg-accent-light text-blue-darker shadow',
78
86
  outline: 'border-accent-light border text-accent-default hover:(bg-accent-light text-white)',
79
87
  },
80
88
  secondary: {
@@ -88,30 +96,12 @@ export const BUTTON_STYLES = {
88
96
  },
89
97
  hover: {
90
98
  white: 'hover:(text-blue-darker bg-white border-blue-darker)',
91
- light: 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)',
99
+ light: 'hover:(text-blue-darker bg-brand-secondary border-brand-secondary)',
92
100
  medium: 'hover:(text-white bg-brand-primary border-brand-primary)',
93
101
  dark: 'hover:(bg-blue-darker text-white border-blue-darker)',
94
102
  },
95
103
  } as const
96
104
 
97
- // Product specific styles
98
- export const PRODUCT_STYLES = {
99
- thumb: {
100
- base: 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-neutral-lightest',
101
- container: `${aspectRatios['4/3']} flex items-center justify-center mb-3 sm:mb-0 ${IMAGE_STYLES.overlay}`,
102
- },
103
- link: {
104
- base: 'relative flex w-full bg-white after:(absolute bg-lightBlue-500 w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',
105
- url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
106
- urlOverlay: 'before:(content-empty absolute left-0 right-4 h-full top-0)',
107
- bigTile: `aspect-[4/3] flex items-center justify-center mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,
108
- },
109
- description: {
110
- base: `text-xs ${COLORS.textSlateDark} ${COLORS.textNeutralLight} leading-tight font-textlight line-clamp-3 whitespace-normal`,
111
- md: 'md:(text-sm mt-0 font-textregular whitespace-pre-wrap)',
112
- },
113
- } as const
114
-
115
105
  // Common typography styles
116
106
  export const TYPOGRAPHY = {
117
107
  headline: {
@@ -127,13 +117,17 @@ export const TYPOGRAPHY = {
127
117
  },
128
118
  } as const
129
119
 
130
- // Product constants
131
- export const PRODUCT_CONSTANTS = {
120
+ // Product specific styles (merged PRODUCT_STYLES and PRODUCT_CONSTANTS)
121
+ export const PRODUCT_STYLES = {
122
+ thumb: {
123
+ base: 'h-full w-full object-cover object-center transform scale-100 group-hover:scale-110 absolute inset-0 will-change-transform bg-neutral-lightest',
124
+ container: `${aspectRatios['4/3']} ${LAYOUT.flex.alignCenter} mb-3 sm:mb-0 ${IMAGE_STYLES.overlay}`,
125
+ },
132
126
  link: {
133
- base: 'relative flex w-full',
127
+ base: 'relative flex w-full bg-white after:(absolute bg-accent-light w-[calc(100%-1rem)] left-0 h-px top-[calc(100%-1px)] bottom-1 content-empty scale-x-0 transition-transform-300 origin-top-right) hover:after:(origin-top-left scale-x-100)',
134
128
  url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
135
129
  urlOverlay: 'before:(content-empty absolute left-0 right-4 h-full top-0)',
136
- bigTile: `${aspectRatios['4/3']} flex items-center justify-center mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,
130
+ bigTile: `${aspectRatios['4/3']} ${LAYOUT.flex.center} mb-3 w-60 min-w-60 h-auto object-contain object-top bg-gray-50 relative ${IMAGE_STYLES.overlay}`,
137
131
  },
138
132
  image: {
139
133
  base: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay}`,
package/uno-config/theme/shortcuts/layout.ts CHANGED
@@ -1,3 +1,4 @@
1
+ // shortcuts/layout.ts
1
2
  import {
2
3
  COLORS,
3
4
  LAYOUT,
@@ -17,7 +18,7 @@ export const layoutShortcuts = [
17
18
  // Main Layout
18
19
  ['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
19
20
  ['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
20
- ['nav', `${COLORS.bgWhite} ${COLORS.bgDark} ${LAYOUT.position.absolute} sm:fixed w-full top-0 z-41 mx-auto ${LAYOUT.spacing.containerPadding} pt-1 h-24 ${LAYOUT.flex.base} border-b border-neutral-lighter justify-between items-center flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden`],
21
+ ['nav', `${COLORS.bgWhite} ${COLORS.bgDark} ${LAYOUT.position.absolute} sm:fixed w-full top-0 z-41 mx-auto ${LAYOUT.spacing.containerPadding} pt-1 h-24 ${LAYOUT.flex.between} flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden`],
21
22
 
22
23
  // View Toggles
23
24
  ['view-grid', 'lg:flex-wrap'],
@@ -27,7 +28,7 @@ export const layoutShortcuts = [
27
28
  ['products-container', 'products-wrapper'],
28
29
  ['products-wrapper', `${LAYOUT.flex.wrap} gap-4 ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
29
30
  ['product-list', 'sm:block products-wrapper'],
30
- ['products-grid', `${LAYOUT.flex.base} w-full flex-nowrap items-center pr-4 md:grid grid-rows-1 overflow-hidden ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]`],
31
+ ['products-grid', `${LAYOUT.flex.alignCenter} w-full flex-nowrap pr-4 md:grid grid-rows-1 overflow-hidden ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]`],
31
32
  ['similar-products', `${LAYOUT.flex.center} space-y-4 gap-8 flex-wrap px-4 md:grid ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5`],
32
33
  ['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
33
34
  ['search-container', 'mb-2 sm:mb-0'],
@@ -36,11 +37,11 @@ export const layoutShortcuts = [
36
37
  ['cat-menu', `fixed h-21 bottom-[-6px] w-full z-10 border-t-1 border-neutral-light ${COLORS.bgWhite} dark:bg-blue-darkest text-center sm:(static z-auto border-t-none h-28)`],
37
38
  ['cat-card', 'p-4 text-base break-inside-avoid-column'],
38
39
  ['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
39
- ['cats-slide', `${TRANSITIONS.base} mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black ${COLORS.textNeutralLight} hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer ${LAYOUT.flex.center} flex-col justify-center transition ease-in-out duration-700 px-1.5 cursor-grab active:cursor-grabbing overflow-hidden`],
40
+ ['cats-slide', `${TRANSITIONS.base} mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black ${COLORS.textNeutralLight} hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer ${LAYOUT.flex.colCenter} px-1.5 cursor-grab active:cursor-grabbing overflow-hidden`],
40
41
  ['cats-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
41
42
 
42
43
  // Sidebars and Navigation
43
- ['sidebar-title', 'font-headregular text-light-blue-500 text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 flex items-center justify-center sm:justify-start py-3'],
44
+ ['sidebar-title', `font-headregular text-accent-light text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 ${LAYOUT.flex.center} sm:justify-start py-3`],
44
45
  ['subcat', 'text-3.75 block cursor-pointer text-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
45
46
  ['subsubcat', 'pl-2'],
46
47
 
@@ -59,6 +60,6 @@ export const layoutShortcuts = [
59
60
  ['close-dark', 'before:bg-black after:bg-black'],
60
61
  ['colon-after', 'after:content-[":"]'],
61
62
  ['adsbygoogle', 'w-full text-center'],
62
- ['underline-on-hover', `${LAYOUT.position.relative} ${LAYOUT.flex.base} w-full ${COLORS.bgWhite} pb-1 after:absolute after:bg-lightBlue-55000 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`],
63
- ['cat-link', `cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-lightBlue-400 underline) uppercase py-2 md:py-0`],
63
+ ['underline-on-hover', `${LAYOUT.position.relative} ${LAYOUT.flex.base} w-full ${COLORS.bgWhite} pb-1 after:absolute 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`],
64
+ ['cat-link', `cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-brand-secondary underline) uppercase py-2 md:py-0`],
64
65
  ];
package/uno-config/theme/shortcuts/product.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  // shortcuts/product.ts
2
- import { PRODUCT_CONSTANTS, IMAGE_STYLES, aspectRatios } from './constants'
2
+ import { PRODUCT_STYLES } from './constants'
3
3
 
4
- const { link } = PRODUCT_CONSTANTS
4
+ const { link, image } = PRODUCT_STYLES
5
5
 
6
6
  export const productShortcuts = [
7
7
  // Product links
@@ -9,7 +9,7 @@ export const productShortcuts = [
9
9
  ['product-link--big-tile', link.bigTile],
10
10
 
11
11
  // Product images
12
- ['product-image', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay}`],
13
- ['product-image--small', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-22 h-auto`],
14
- ['product-image--large', `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-60 h-auto`],
12
+ ['product-image', image.base],
13
+ ['product-image--small', image.small],
14
+ ['product-image--large', image.large],
15
15
  ];