spoko-design-system 0.2.96 → 0.2.98
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.
- package/icon.config.ts +5 -0
- package/package.json +3 -1
- package/src/components/Category/CategoryTile.astro +2 -2
- package/src/pages/core/typography.astro +38 -17
- package/uno-config/theme/shortcuts/buttons.ts +21 -18
- package/uno-config/theme/shortcuts/components.ts +42 -33
- package/uno-config/theme/shortcuts/constants.ts +152 -3
- package/uno-config/theme/shortcuts/layout.ts +63 -58
- package/uno-config/theme/shortcuts/product.ts +12 -3
package/icon.config.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spoko-design-system",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.98",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "./index.ts",
|
|
6
6
|
"module": "./index.ts",
|
|
@@ -51,6 +51,7 @@
|
|
|
51
51
|
"@iconify-json/bx": "^1.2.2",
|
|
52
52
|
"@iconify-json/carbon": "^1.2.6",
|
|
53
53
|
"@iconify-json/circle-flags": "^1.2.6",
|
|
54
|
+
"@iconify-json/ei": "^1.2.2",
|
|
54
55
|
"@iconify-json/el": "^1.2.1",
|
|
55
56
|
"@iconify-json/eos-icons": "^1.2.2",
|
|
56
57
|
"@iconify-json/et": "^1.2.1",
|
|
@@ -66,6 +67,7 @@
|
|
|
66
67
|
"@iconify-json/octicon": "^1.2.4",
|
|
67
68
|
"@iconify-json/ph": "^1.2.2",
|
|
68
69
|
"@iconify-json/simple-icons": "^1.2.24",
|
|
70
|
+
"@iconify-json/system-uicons": "^1.2.2",
|
|
69
71
|
"@iconify-json/uil": "^1.2.3",
|
|
70
72
|
"@iconify/json": "^2.2.305",
|
|
71
73
|
"@iconify/vue": "^4.3.0",
|
|
@@ -19,7 +19,7 @@ const { CategoryObject, locale = 'en' } = Astro.props;
|
|
|
19
19
|
const { height = 70, width = 70 } = CategoryObject;
|
|
20
20
|
---
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
<a
|
|
23
23
|
href={`/${CategoryObject.slug}/`}
|
|
24
24
|
class="carousel-item"
|
|
25
25
|
data-astro-prefetch
|
|
@@ -36,4 +36,4 @@ const { height = 70, width = 70 } = CategoryObject;
|
|
|
36
36
|
/>
|
|
37
37
|
<div class="swiper-lazy-preloader" />
|
|
38
38
|
<div class="cat-name" itemprop="name">{CategoryObject.name}</div>
|
|
39
|
-
</a>
|
|
39
|
+
</a>
|
|
@@ -3,26 +3,47 @@ import MainLayout from '../../layouts/MainLayout.astro'
|
|
|
3
3
|
import { typography } from '../../../uno-config/theme/typography'
|
|
4
4
|
|
|
5
5
|
const fonts = Object.entries(typography.fontFamily)
|
|
6
|
+
const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing"
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
<MainLayout>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
<div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
|
|
11
|
+
<h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
|
|
12
|
+
|
|
13
|
+
<!-- Font Preview Cards -->
|
|
14
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
15
|
+
{fonts.map(([name, family]) => (
|
|
16
|
+
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
|
|
17
|
+
<!-- Font Sample -->
|
|
18
|
+
<div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
|
|
19
|
+
{loremText}
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<!-- Font Info -->
|
|
23
|
+
<div class="border-t pt-4">
|
|
24
|
+
<div class="flex items-center justify-between mb-2">
|
|
25
|
+
<span class="text-lg font-medium text-gray-900">{name}</span>
|
|
26
|
+
<span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
|
|
27
|
+
</div>
|
|
28
|
+
<code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
|
|
29
|
+
{family.join(', ')}
|
|
30
|
+
</code>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
))}
|
|
34
|
+
</div>
|
|
19
35
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<div class="
|
|
23
|
-
|
|
24
|
-
{family.join(', ')}
|
|
36
|
+
<!-- Font Configuration Code -->
|
|
37
|
+
<div class="bg-gray-900 rounded-lg overflow-hidden">
|
|
38
|
+
<div class="bg-gray-800 px-4 py-2 text-gray-400">
|
|
39
|
+
Font Configuration
|
|
25
40
|
</div>
|
|
26
|
-
|
|
27
|
-
|
|
41
|
+
<pre class="p-4 overflow-x-auto">
|
|
42
|
+
<code class="text-gray-200 text-sm">
|
|
43
|
+
{fonts.map(([name, family]) => `font-${name}:\n${family.join(', ')}
|
|
44
|
+
`).join('\n')}</code>
|
|
45
|
+
</pre>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
28
48
|
</MainLayout>
|
|
49
|
+
|
|
@@ -1,39 +1,42 @@
|
|
|
1
1
|
// shortcuts/buttons.ts
|
|
2
|
-
|
|
2
|
+
import { BUTTON_STYLES, TRANSITIONS } from './constants'
|
|
3
|
+
|
|
4
|
+
const { base, sizes, variants, hover } = BUTTON_STYLES
|
|
3
5
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
export const buttonShortcuts = [
|
|
7
|
+
// Base buttons
|
|
8
|
+
['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50)`],
|
|
9
|
+
['icon-btn', `text-[0.9em] inline-block cursor-pointer select-none opacity-75 ${TRANSITIONS.base} hover:(opacity-100 text-teal-600)`],
|
|
6
10
|
|
|
7
11
|
// Primary buttons
|
|
8
|
-
['btn-primary',
|
|
9
|
-
['btn-primary-outline',
|
|
12
|
+
['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid}`],
|
|
13
|
+
['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${base.transition}`],
|
|
10
14
|
|
|
11
15
|
// Secondary buttons
|
|
12
|
-
['btn-secondary',
|
|
13
|
-
['btn-secondary-outline',
|
|
16
|
+
['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid}`],
|
|
17
|
+
['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline}`],
|
|
14
18
|
|
|
15
19
|
// Tertiary buttons
|
|
16
|
-
['btn-tertiary',
|
|
17
|
-
['btn-tertiary-outline',
|
|
20
|
+
['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid}`],
|
|
21
|
+
['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${base.transition}`],
|
|
18
22
|
|
|
19
23
|
// Utility buttons
|
|
20
24
|
['btn-text', 'text-neutral-dark border border-transparent hover:underline transition-all'],
|
|
21
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'],
|
|
22
26
|
|
|
23
27
|
// Size variants
|
|
24
|
-
['btn-normal',
|
|
25
|
-
['btn-sm',
|
|
26
|
-
['btn-xs',
|
|
28
|
+
['btn-normal', sizes.normal],
|
|
29
|
+
['btn-sm', sizes.sm],
|
|
30
|
+
['btn-xs', sizes.xs],
|
|
27
31
|
|
|
28
32
|
// Hover variants
|
|
29
|
-
['btn-white-hover',
|
|
30
|
-
['btn-light-hover',
|
|
31
|
-
['btn-medium-hover',
|
|
32
|
-
['btn-dark-hover',
|
|
33
|
+
['btn-white-hover', hover.white],
|
|
34
|
+
['btn-light-hover', hover.light],
|
|
35
|
+
['btn-medium-hover', hover.medium],
|
|
36
|
+
['btn-dark-hover', hover.dark],
|
|
33
37
|
|
|
38
|
+
// Special buttons
|
|
34
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'],
|
|
35
40
|
['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
|
|
36
|
-
|
|
37
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)']
|
|
38
|
-
|
|
39
42
|
];
|
|
@@ -1,83 +1,92 @@
|
|
|
1
1
|
// shortcuts/components.ts
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import {
|
|
3
|
+
COLORS,
|
|
4
|
+
IMAGE_STYLES,
|
|
5
|
+
LAYOUT,
|
|
6
|
+
TRANSITIONS,
|
|
7
|
+
PRODUCT_STYLES,
|
|
8
|
+
aspectRatios
|
|
9
|
+
} from './constants'
|
|
4
10
|
|
|
5
11
|
export const componentShortcuts = [
|
|
6
12
|
// Product related
|
|
7
|
-
['product-row',
|
|
8
|
-
|
|
13
|
+
['product-row', `${COLORS.bgWhite} ${LAYOUT.flex.wrap} odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:(w-auto grid grid-cols-3) gap-x-1 gap-y-0 md:(${LAYOUT.grid.product} gap-x-4) justify-start content-start content-start place-content-start py-4 pb-6 sm:pb-4`],
|
|
9
14
|
|
|
10
|
-
['product-row__photo', `${
|
|
11
|
-
['product-row__description',
|
|
15
|
+
['product-row__photo', `${aspectRatios['4/3']} mb-2 sm:mb-0 ${IMAGE_STYLES.overlay} w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden ${LAYOUT.position.relative} ${COLORS.bgNeutralLightest} md:(col-span-1 row-span-1) box-content`],
|
|
16
|
+
['product-row__description', `${PRODUCT_STYLES.description.base} mt-2 ${PRODUCT_STYLES.description.md}`],
|
|
12
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)'],
|
|
13
|
-
|
|
18
|
+
|
|
19
|
+
// Product elements
|
|
20
|
+
['product-number', `font-novamono content-center ${LAYOUT.flex.wrap} flex-col content-start pr-5 ${COLORS.bgWhite}`],
|
|
14
21
|
['p-number', 'inline-flex leading-none relative'],
|
|
15
22
|
['tooltip', 'invisible absolute'],
|
|
16
23
|
['has-tooltip', 'hover:(visible z-50)'],
|
|
17
24
|
['product-code', 'text-blue-light mr-1 leading-none tracking-wide select-all'],
|
|
18
25
|
['product-info', 'text-slate-light text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
|
|
19
26
|
['product-date', 'inline-block text-xxs md:text-xs leading-none mt-1 md:(mt-4 mb-1) mr-2'],
|
|
20
|
-
['product-thumb',
|
|
21
|
-
['product-thumb--plp',
|
|
22
|
-
['product-link--related',
|
|
27
|
+
['product-thumb', PRODUCT_STYLES.thumb.base],
|
|
28
|
+
['product-thumb--plp', PRODUCT_STYLES.thumb.container],
|
|
29
|
+
['product-link--related', `${PRODUCT_STYLES.link.base} dark:bg-accent-deepBlue after:bg-accent-light`],
|
|
23
30
|
['product-model', 'font-400'],
|
|
24
|
-
['product-button',
|
|
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)`],
|
|
25
32
|
|
|
26
33
|
// Category related
|
|
27
|
-
['category-section',
|
|
28
|
-
['category-tile',
|
|
34
|
+
['category-section', `pb-4 w-full ${COLORS.bgWhite} mb-4 overflow-x-hidden ${LAYOUT.flex.wrap} max-w-full`],
|
|
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`],
|
|
29
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'],
|
|
30
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)'],
|
|
31
38
|
['category-carousel__link', 'uppercase ml-auto px-4 text-xs flex items-center mt-3 hover:underline'],
|
|
32
39
|
|
|
33
40
|
// Navigation
|
|
34
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'],
|
|
35
|
-
['btn-navigation',
|
|
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))`],
|
|
36
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'],
|
|
37
44
|
|
|
38
45
|
// Carousel
|
|
39
46
|
['carousel-tile', 'w-52 min-w-52 flex ml-1 lg:ml-1.5'],
|
|
40
|
-
['carousel-product-tile',
|
|
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`],
|
|
41
48
|
['carousel-item', 'w-full w-full group-hover:filter-invert relative flex flex-col'],
|
|
42
49
|
['carousel-big', 'shadow-[inset_0_10px_60px_-15px_rgba(0,0,0,0.1)] w-full h-full'],
|
|
43
50
|
|
|
44
51
|
// PDP (Product Detail Page)
|
|
45
52
|
['pdp-headline', 'text-2xl mb-4 sm:(font-normal mb-6 text-4xl) lg:pr-0 2xl:text-5xl font-headbold text-black font-bold pr-7 pt-0 leading-none'],
|
|
46
|
-
['pdp-detail-row',
|
|
53
|
+
['pdp-detail-row', `text-sm mt-1 md:mt-4 mb-4 grid ${LAYOUT.grid.cols2} sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4`],
|
|
47
54
|
['pdp-slider-thumb', 'block h-22.5 w-31 min-w-31 mb-2'],
|
|
48
55
|
|
|
49
56
|
// PLP (Product List Page)
|
|
50
|
-
['plp-name',
|
|
51
|
-
['plp-desc',
|
|
57
|
+
['plp-name', `${LAYOUT.flex.center} leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12`],
|
|
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`],
|
|
52
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'],
|
|
53
|
-
['plp-b-desc',
|
|
54
|
-
['plp-icons',
|
|
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`],
|
|
55
62
|
['plp-replacements', 'col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
|
|
56
63
|
|
|
57
|
-
|
|
58
64
|
// Miscellaneous
|
|
59
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%]'],
|
|
60
|
-
['engine-info',
|
|
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)`],
|
|
61
67
|
['engine-code', 'underline decoration-dotted underline-offset-4 py-0.5 decoration-neutral-light group-hover:(decoration-blue-500 dark:decoration-accent-light)'],
|
|
62
|
-
['number-secondary',
|
|
68
|
+
['number-secondary', `block ${LAYOUT.position.absolute} inset-0 text-slate-light select-all ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
|
|
63
69
|
['code-formatted', 'leading-none mt-0 relative text-xs'],
|
|
64
70
|
|
|
65
71
|
// Badges
|
|
66
72
|
['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
|
|
67
73
|
|
|
68
|
-
|
|
74
|
+
// Details
|
|
69
75
|
['detail-name', 'text-gray-900 leading-tight font-textlight line-clamp-3 whitespace-normal md:(whitespace-pre-wrap line-clamp-9 font-textregular)'],
|
|
70
|
-
['detail-row',
|
|
76
|
+
['detail-row', `text-sm mt-1 md:mt-4 mb-4 grid ${LAYOUT.grid.cols2} gap-4 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max)`],
|
|
77
|
+
|
|
78
|
+
// Slides
|
|
71
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'],
|
|
72
80
|
['slide-img', 'cursor-zoom-in my-auto z-50 h-full max-w-screen-2xl object-center object-contain pointer-events-none'],
|
|
73
81
|
['slide-pic', 'w-full flex justify-end absolute top-0 bottom-0'],
|
|
74
|
-
['slide-thumb', `block bg-gray-100 ${
|
|
75
|
-
['slide-thumb__img',
|
|
76
|
-
['product-carousel', 'flex-wrap content-between w-64 min-w-64 flex ml-1 first:ml-4'],
|
|
77
|
-
['pdp-slide', `h-full bg-gray-100 ${ASPECT_RATIO} relative overflow-hidden border border-transparent`],
|
|
78
|
-
['product-link', '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)'],
|
|
79
|
-
['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
|
|
80
|
-
['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 ${ASPECT_RATIO} relative`],
|
|
81
|
-
['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto object-contain object-top bg-gray-100 ${ASPECT_RATIO} relative`]
|
|
82
|
+
['slide-thumb', `block bg-gray-100 ${aspectRatios['4/3']} w-30 h-22.5 cursor-grab active:cursor-grabbing`],
|
|
83
|
+
['slide-thumb__img', `pointer-events-none pb-px h-22.5 w-30 m-auto object-cover ${COLORS.bgWhite} dark:bg-accent-deepBlue`],
|
|
82
84
|
|
|
85
|
+
// Product related components
|
|
86
|
+
['product-carousel', `${LAYOUT.flex.wrap} content-between w-64 min-w-64 flex ml-1 first:ml-4`],
|
|
87
|
+
['pdp-slide', `h-full bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative} overflow-hidden border border-transparent`],
|
|
88
|
+
['product-link', PRODUCT_STYLES.link.base],
|
|
89
|
+
['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
|
|
90
|
+
['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
|
|
91
|
+
['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`]
|
|
83
92
|
];
|
|
@@ -1,3 +1,152 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
// Aspect ratios configuration
|
|
2
|
+
export const aspectRatios = {
|
|
3
|
+
'4/3': 'aspect-[4/3]',
|
|
4
|
+
'3/4': 'aspect-[3/4]',
|
|
5
|
+
'1/1': 'aspect-square',
|
|
6
|
+
'3/2': 'aspect-[3/2]',
|
|
7
|
+
'2/3': 'aspect-[2/3]',
|
|
8
|
+
'3/1': 'aspect-[3/1]',
|
|
9
|
+
'16/9': 'aspect-video',
|
|
10
|
+
} as const
|
|
11
|
+
|
|
12
|
+
// Theme colors
|
|
13
|
+
export const COLORS = {
|
|
14
|
+
bgWhite: 'bg-white',
|
|
15
|
+
bgDark: 'dark:bg-blue-901',
|
|
16
|
+
textSlate: 'text-slate-500',
|
|
17
|
+
textNeutralLight: 'dark:text-neutral-light',
|
|
18
|
+
textSlateDark: 'text-slate-darkest',
|
|
19
|
+
bgNeutralLightest: 'bg-neutral-lightest',
|
|
20
|
+
} as const
|
|
21
|
+
|
|
22
|
+
// Image styles
|
|
23
|
+
export const IMAGE_STYLES = {
|
|
24
|
+
base: 'relative object-cover bg-neutral-lightest h-auto max-w-full',
|
|
25
|
+
overlay: 'after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)',
|
|
26
|
+
objectContain: 'object-contain object-center',
|
|
27
|
+
aspectBase: aspectRatios['4/3'],
|
|
28
|
+
} as const
|
|
29
|
+
|
|
30
|
+
// Common layout properties
|
|
31
|
+
export const LAYOUT = {
|
|
32
|
+
flex: {
|
|
33
|
+
base: 'flex',
|
|
34
|
+
center: 'flex items-center justify-center',
|
|
35
|
+
between: 'flex items-center justify-between',
|
|
36
|
+
wrap: 'flex flex-wrap',
|
|
37
|
+
nowrap: 'flex-nowrap',
|
|
38
|
+
},
|
|
39
|
+
spacing: {
|
|
40
|
+
topPadding: 'pt-24 sm:pt-14',
|
|
41
|
+
containerPadding: 'px-4',
|
|
42
|
+
},
|
|
43
|
+
grid: {
|
|
44
|
+
cols2: 'grid-cols-2',
|
|
45
|
+
cols3: 'grid-cols-3',
|
|
46
|
+
cols4: 'grid-cols-4',
|
|
47
|
+
product: 'grid-cols-product',
|
|
48
|
+
},
|
|
49
|
+
position: {
|
|
50
|
+
relative: 'relative',
|
|
51
|
+
absolute: 'absolute',
|
|
52
|
+
fixed: 'fixed',
|
|
53
|
+
},
|
|
54
|
+
} as const
|
|
55
|
+
|
|
56
|
+
// Common transitions
|
|
57
|
+
export const TRANSITIONS = {
|
|
58
|
+
base: 'transition-all duration-300 ease-linear',
|
|
59
|
+
transform: 'transition-transform-300',
|
|
60
|
+
hover: 'transition duration-200 ease-in-out',
|
|
61
|
+
} as const
|
|
62
|
+
|
|
63
|
+
// Button base styles
|
|
64
|
+
export const BUTTON_STYLES = {
|
|
65
|
+
base: {
|
|
66
|
+
layout: 'inline-flex items-center justify-center',
|
|
67
|
+
text: 'text-base font-medium text-center',
|
|
68
|
+
transition: 'transition-all duration-200 ease-in-out',
|
|
69
|
+
},
|
|
70
|
+
sizes: {
|
|
71
|
+
normal: 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap',
|
|
72
|
+
sm: 'px-6 py-2 text-sm whitespace-nowrap',
|
|
73
|
+
xs: 'px-4 py-1 text-sm whitespace-nowrap',
|
|
74
|
+
},
|
|
75
|
+
variants: {
|
|
76
|
+
primary: {
|
|
77
|
+
solid: 'bg-accent-lightest border border-transparent hover:bg-accent-light text-blue-darker shadow',
|
|
78
|
+
outline: 'border-accent-light border text-accent-default hover:(bg-accent-light text-white)',
|
|
79
|
+
},
|
|
80
|
+
secondary: {
|
|
81
|
+
solid: 'bg-neutral-dark border border-transparent hover:bg-neutral-darker text-white shadow',
|
|
82
|
+
outline: 'border-neutral-dark border text-neutral-dark hover:(text-white bg-neutral-dark)',
|
|
83
|
+
},
|
|
84
|
+
tertiary: {
|
|
85
|
+
solid: 'bg-blue-darker hover:bg-accent-darker text-white focus:(ring-4 outline-none ring-blue-light)',
|
|
86
|
+
outline: 'border-blue-darker text-blue-darker focus:(ring-2 outline-none ring-blue-light)',
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
hover: {
|
|
90
|
+
white: 'hover:(text-blue-darker bg-white border-blue-darker)',
|
|
91
|
+
light: 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)',
|
|
92
|
+
medium: 'hover:(text-white bg-brand-primary border-brand-primary)',
|
|
93
|
+
dark: 'hover:(bg-blue-darker text-white border-blue-darker)',
|
|
94
|
+
},
|
|
95
|
+
} as const
|
|
96
|
+
|
|
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
|
+
// Common typography styles
|
|
116
|
+
export const TYPOGRAPHY = {
|
|
117
|
+
headline: {
|
|
118
|
+
base: 'font-headlight',
|
|
119
|
+
bold: 'font-headlight font-bold',
|
|
120
|
+
light: 'font-headlight font-300 tracking-tight',
|
|
121
|
+
},
|
|
122
|
+
text: {
|
|
123
|
+
xs: 'text-xs',
|
|
124
|
+
sm: 'text-sm',
|
|
125
|
+
base: 'text-base',
|
|
126
|
+
lg: 'text-lg',
|
|
127
|
+
},
|
|
128
|
+
} as const
|
|
129
|
+
|
|
130
|
+
// Product constants
|
|
131
|
+
export const PRODUCT_CONSTANTS = {
|
|
132
|
+
link: {
|
|
133
|
+
base: 'relative flex w-full',
|
|
134
|
+
url: 'font-light leading-none mb-2 pr-4 line-clamp-2 h-[2em]',
|
|
135
|
+
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}`,
|
|
137
|
+
},
|
|
138
|
+
image: {
|
|
139
|
+
base: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay}`,
|
|
140
|
+
small: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-22 h-auto`,
|
|
141
|
+
large: `${aspectRatios['4/3']} ${IMAGE_STYLES.base} ${IMAGE_STYLES.overlay} w-60 h-auto`,
|
|
142
|
+
},
|
|
143
|
+
description: {
|
|
144
|
+
base: `text-xs ${COLORS.textSlateDark} ${COLORS.textNeutralLight} leading-tight font-textlight line-clamp-3 whitespace-normal`,
|
|
145
|
+
md: 'md:(text-sm mt-0 font-textregular whitespace-pre-wrap)',
|
|
146
|
+
},
|
|
147
|
+
sizes: {
|
|
148
|
+
small: 'w-22 min-w-22',
|
|
149
|
+
medium: 'w-30 min-w-30',
|
|
150
|
+
large: 'w-60 min-w-60',
|
|
151
|
+
},
|
|
152
|
+
} as const
|
|
@@ -1,59 +1,64 @@
|
|
|
1
|
-
|
|
1
|
+
import {
|
|
2
|
+
COLORS,
|
|
3
|
+
LAYOUT,
|
|
4
|
+
IMAGE_STYLES,
|
|
5
|
+
TYPOGRAPHY,
|
|
6
|
+
TRANSITIONS,
|
|
7
|
+
aspectRatios
|
|
8
|
+
} from './constants'
|
|
9
|
+
|
|
10
|
+
// Generate image shortcuts dynamically
|
|
11
|
+
const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
|
|
12
|
+
`img--${ratio}`,
|
|
13
|
+
`${aspect} ${IMAGE_STYLES.base}`
|
|
14
|
+
])
|
|
15
|
+
|
|
2
16
|
export const layoutShortcuts = [
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
['close-light', 'before:bg-white after:bg-white'],
|
|
52
|
-
['close-dark', 'before:bg-black after:bg-black'],
|
|
53
|
-
['colon-after', 'after:content-[":"]'],
|
|
54
|
-
['adsbygoogle', 'w-full text-center'],
|
|
55
|
-
|
|
56
|
-
['underline-on-hover', 'relative flex w-full bg-white 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'],
|
|
57
|
-
['cat-link', 'cursor-pointer text-accent-deepBlue dark:text-white hover:(text-lightBlue-400 underline) uppercase py-2 md:py-0'],
|
|
58
|
-
|
|
59
|
-
];
|
|
17
|
+
// Main Layout
|
|
18
|
+
['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
|
|
19
|
+
['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
|
+
|
|
22
|
+
// View Toggles
|
|
23
|
+
['view-grid', 'lg:flex-wrap'],
|
|
24
|
+
['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
|
|
25
|
+
|
|
26
|
+
// Containers
|
|
27
|
+
['products-container', 'products-wrapper'],
|
|
28
|
+
['products-wrapper', `${LAYOUT.flex.wrap} gap-4 ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
|
|
29
|
+
['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
|
+
['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
|
+
['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
|
|
33
|
+
['search-container', 'mb-2 sm:mb-0'],
|
|
34
|
+
|
|
35
|
+
// Category Menu
|
|
36
|
+
['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
|
+
['cat-card', 'p-4 text-base break-inside-avoid-column'],
|
|
38
|
+
['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-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
|
|
41
|
+
|
|
42
|
+
// 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
|
+
['subcat', 'text-3.75 block cursor-pointer text-light-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
|
|
45
|
+
['subsubcat', 'pl-2'],
|
|
46
|
+
|
|
47
|
+
// Headers and Banners
|
|
48
|
+
['headline', TYPOGRAPHY.headline.bold],
|
|
49
|
+
['headline-light', TYPOGRAPHY.headline.light],
|
|
50
|
+
['slimbanner', `px-4 sm:px-8 ${LAYOUT.flex.center} text-xs sm:text-base leading-none ${LAYOUT.position.relative} bg-gray-50 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden`],
|
|
51
|
+
|
|
52
|
+
// Image Shortcuts
|
|
53
|
+
...imageShortcuts,
|
|
54
|
+
['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
|
|
55
|
+
['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
|
|
56
|
+
|
|
57
|
+
// Utility Classes
|
|
58
|
+
['close-light', 'before:bg-white after:bg-white'],
|
|
59
|
+
['close-dark', 'before:bg-black after:bg-black'],
|
|
60
|
+
['colon-after', 'after:content-[":"]'],
|
|
61
|
+
['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`],
|
|
64
|
+
];
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
// shortcuts/product.ts
|
|
2
|
+
import { PRODUCT_CONSTANTS, IMAGE_STYLES, aspectRatios } from './constants'
|
|
3
|
+
|
|
4
|
+
const { link } = PRODUCT_CONSTANTS
|
|
5
|
+
|
|
2
6
|
export const productShortcuts = [
|
|
3
|
-
|
|
4
|
-
['product-link--
|
|
5
|
-
|
|
7
|
+
// Product links
|
|
8
|
+
['product-link--url', `${link.url} ${link.urlOverlay}`],
|
|
9
|
+
['product-link--big-tile', link.bigTile],
|
|
10
|
+
|
|
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`],
|
|
6
15
|
];
|