spoko-design-system 1.18.1 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/settings.json +48 -48
- package/.github/dependabot.yml +11 -11
- package/.github/todo.yml +3 -3
- package/.github/workflows/claude.yml +37 -37
- package/.github/workflows/code-quality.yml +72 -72
- package/.github/workflows/deploy.yml +43 -43
- package/.husky/README.md +41 -41
- package/.husky/commit-msg +1 -1
- package/.husky/pre-commit +40 -40
- package/.prettierignore +14 -14
- package/.prettierrc +30 -30
- package/.stackblitzrc +5 -5
- package/.vscode/extensions.json +4 -4
- package/.vscode/launch.json +11 -11
- package/.vscode/settings.json +21 -21
- package/CHANGELOG.md +462 -450
- package/CLAUDE.md +268 -268
- package/LICENSE +21 -21
- package/README.md +303 -132
- package/TOOLTIPS.md +236 -236
- package/astro.config.mjs +84 -84
- package/commitlint.config.js +3 -3
- package/dev-dist/sw.js +91 -91
- package/dev-dist/workbox-c676b6d3.js +3391 -3391
- package/eslint.config.js +70 -70
- package/icon.config.ts +348 -348
- package/index.ts +78 -78
- package/package.json +160 -160
- package/public/arrow-bottom.svg +7 -7
- package/public/fonts/lg.svg +53 -53
- package/public/fonts/vwhead-bold-demo.html +549 -549
- package/public/fonts/vwhead-regular-demo.html +549 -549
- package/public/fonts/vwtext-bold-demo.html +549 -549
- package/public/fonts/vwtext-regular-demo.html +549 -549
- package/public/github.svg +3 -3
- package/public/grid_dot.svg +4 -4
- package/public/linkedin.svg +44 -44
- package/public/make-scrollable-code-focusable.js +3 -3
- package/public/pagefind.yml +3 -3
- package/public/polo.blue.svg +29 -29
- package/public/spoko.space.svg +71 -71
- package/public/twitter.svg +46 -46
- package/renovate.json +6 -6
- package/sandbox.config.json +11 -11
- package/sonar-project.properties +26 -26
- package/src/components/Category/CategoryDetails.astro +46 -18
- package/src/components/Jumbotron/variants/Hero.astro +9 -1
- package/src/components/Jumbotron/variants/PostSplit.astro +8 -0
- package/src/pages/components/badges.mdx +57 -57
- package/src/pages/components/breadcrumbs.mdx +139 -139
- package/src/pages/components/buttons.mdx +359 -359
- package/src/pages/components/card.mdx +294 -294
- package/src/pages/components/carousel.mdx +62 -62
- package/src/pages/components/copyright.mdx +42 -42
- package/src/pages/components/details-list.mdx +207 -207
- package/src/pages/components/features-list.mdx +37 -37
- package/src/pages/components/flags.mdx +49 -49
- package/src/pages/components/fuck-russia.mdx +39 -39
- package/src/pages/components/hand-drive.mdx +78 -78
- package/src/pages/components/headline.mdx +337 -337
- package/src/pages/components/image.mdx +513 -513
- package/src/pages/components/input.mdx +367 -367
- package/src/pages/components/jumbotron.mdx +530 -530
- package/src/pages/components/modal.mdx +212 -212
- package/src/pages/components/post-header.mdx +64 -64
- package/src/pages/components/pr-code.mdx +213 -213
- package/src/pages/components/product-engine.mdx +418 -418
- package/src/pages/components/product-number.mdx +58 -58
- package/src/pages/components/product-tile.mdx +51 -51
- package/src/pages/components/quote.mdx +33 -33
- package/src/pages/components/slimbanner.mdx +260 -260
- package/src/pages/components/table.mdx +108 -108
- package/src/pages/core/colors.mdx +21 -21
- package/src/pages/core/grid.mdx +193 -193
- package/src/pages/core/introduction.mdx +77 -77
- package/src/pages/core/tooltips.mdx +491 -491
- package/src/pages/patterns/introduction.mdx +60 -60
- package/src/styles/_variables.scss +70 -70
- package/tailwind.config.cjs +8 -8
- package/tsconfig.json +28 -28
- package/uno-config/index.ts +269 -269
- package/uno-config/theme/breakpoints.ts +9 -9
- package/uno-config/theme/colors.ts +65 -65
- package/uno-config/theme/dimensions.ts +17 -17
- package/uno-config/theme/effects.ts +14 -14
- package/uno-config/theme/grid.ts +10 -10
- package/uno-config/theme/index.ts +26 -26
- package/uno-config/theme/shortcuts/buttons.ts +53 -53
- package/uno-config/theme/shortcuts/components.ts +124 -124
- package/uno-config/theme/shortcuts/index.ts +20 -20
- package/uno-config/theme/shortcuts/jumbotron.ts +71 -71
- package/uno-config/theme/shortcuts/layout.ts +75 -75
- package/uno-config/theme/typography.ts +29 -29
- package/uno.config.ts +2 -2
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
// shortcuts/index.ts
|
|
2
|
-
import type { UserShortcuts } from 'unocss'
|
|
3
|
-
import { buttonShortcuts } from './buttons';
|
|
4
|
-
import { layoutShortcuts } from './layout';
|
|
5
|
-
import { componentShortcuts } from './components';
|
|
6
|
-
import { productShortcuts } from './product';
|
|
7
|
-
import { jumbotronShortcuts } from './jumbotron';
|
|
8
|
-
import { inputShortcuts } from './inputs';
|
|
9
|
-
|
|
10
|
-
const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
|
|
11
|
-
return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export const shortcuts: UserShortcuts = {
|
|
15
|
-
...convertToShortcuts(buttonShortcuts),
|
|
16
|
-
...convertToShortcuts(layoutShortcuts),
|
|
17
|
-
...convertToShortcuts(componentShortcuts),
|
|
18
|
-
...convertToShortcuts(productShortcuts),
|
|
19
|
-
...convertToShortcuts(jumbotronShortcuts),
|
|
20
|
-
...convertToShortcuts(inputShortcuts),
|
|
1
|
+
// shortcuts/index.ts
|
|
2
|
+
import type { UserShortcuts } from 'unocss'
|
|
3
|
+
import { buttonShortcuts } from './buttons';
|
|
4
|
+
import { layoutShortcuts } from './layout';
|
|
5
|
+
import { componentShortcuts } from './components';
|
|
6
|
+
import { productShortcuts } from './product';
|
|
7
|
+
import { jumbotronShortcuts } from './jumbotron';
|
|
8
|
+
import { inputShortcuts } from './inputs';
|
|
9
|
+
|
|
10
|
+
const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
|
|
11
|
+
return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const shortcuts: UserShortcuts = {
|
|
15
|
+
...convertToShortcuts(buttonShortcuts),
|
|
16
|
+
...convertToShortcuts(layoutShortcuts),
|
|
17
|
+
...convertToShortcuts(componentShortcuts),
|
|
18
|
+
...convertToShortcuts(productShortcuts),
|
|
19
|
+
...convertToShortcuts(jumbotronShortcuts),
|
|
20
|
+
...convertToShortcuts(inputShortcuts),
|
|
21
21
|
};
|
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
// shortcuts/jumbotron.ts
|
|
2
|
-
// import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
|
|
3
|
-
import { breakpoints } from './../breakpoints';
|
|
4
|
-
|
|
5
|
-
export const jumbotronShortcuts = [
|
|
6
|
-
// Default variant
|
|
7
|
-
['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
|
|
8
|
-
['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
|
|
9
|
-
['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
|
|
10
|
-
[
|
|
11
|
-
'jumbotron-title-default',
|
|
12
|
-
'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl',
|
|
13
|
-
],
|
|
14
|
-
['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
|
|
15
|
-
|
|
16
|
-
// Hero variant
|
|
17
|
-
['jumbotron-hero-wrapper', 'relative w-full'],
|
|
18
|
-
['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
|
|
19
|
-
['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
|
|
20
|
-
[
|
|
21
|
-
'jumbotron-hero-container',
|
|
22
|
-
'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex',
|
|
23
|
-
],
|
|
24
|
-
['jumbotron-hero-header', 'relative z-10 text-white'],
|
|
25
|
-
[
|
|
26
|
-
'jumbotron-hero-title',
|
|
27
|
-
'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight',
|
|
28
|
-
],
|
|
29
|
-
|
|
30
|
-
// Post variant
|
|
31
|
-
['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
|
|
32
|
-
[
|
|
33
|
-
'jumbotron-post-heading',
|
|
34
|
-
'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]',
|
|
35
|
-
],
|
|
36
|
-
[
|
|
37
|
-
'jumbotron-post-container',
|
|
38
|
-
`w-full sm:max-w-[${breakpoints.sm}] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[${breakpoints['2xl']}] px-4 py-5 flex flex-col flex-wrap`,
|
|
39
|
-
],
|
|
40
|
-
[
|
|
41
|
-
'jumbotron-post-title',
|
|
42
|
-
'font-headlight text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1',
|
|
43
|
-
],
|
|
44
|
-
|
|
45
|
-
// Metadata and categories
|
|
46
|
-
['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
|
|
47
|
-
['jumbotron-categories', 'order-1 mt-4'],
|
|
48
|
-
|
|
49
|
-
// Content styles
|
|
50
|
-
['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-tight'],
|
|
51
|
-
['jumbotron-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
|
|
52
|
-
|
|
53
|
-
// Post Split variant
|
|
54
|
-
['jumbotron-split-wrapper', 'w-full'],
|
|
55
|
-
['jumbotron-split-container', 'xl:container mx-auto px-3.5 md:px-0'],
|
|
56
|
-
['jumbotron-split-header', 'w-full justify-center text-white z-2 mt-auto md:(grid grid-cols-2) pb-4 mb-8'],
|
|
57
|
-
['jumbotron-split-header-wide', 'md:grid-cols-[2fr_1fr]'],
|
|
58
|
-
['jumbotron-split-header-slim', 'pb-2 mb-4'],
|
|
59
|
-
['jumbotron-split-content', 'pl-4 pr-8 py-5 xl:(py-0 pl-0) flex flex-wrap'],
|
|
60
|
-
['jumbotron-split-content-slim', 'py-3 xl:py-0'],
|
|
61
|
-
[
|
|
62
|
-
'jumbotron-split-title',
|
|
63
|
-
'font-headlight text-3xl md:(text-4xl mb-3) xl:text-11 mt-1 order-2 line-clamp-3 pb-1 w-full',
|
|
64
|
-
],
|
|
65
|
-
['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
|
|
66
|
-
['jumbotron-split-image-wrapper', 'relative -mb-8 md:mt-4'],
|
|
67
|
-
['jumbotron-split-image-wrapper-slim', '-mb-4 md:mt-2'],
|
|
68
|
-
['jumbotron-split-image', 'relative shadow-xl md:max-h-112 overflow-hidden'],
|
|
69
|
-
['jumbotron-split-image-slim', 'md:max-h-72'],
|
|
70
|
-
['jumbotron-split-img', 'object-cover'],
|
|
71
|
-
];
|
|
1
|
+
// shortcuts/jumbotron.ts
|
|
2
|
+
// import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
|
|
3
|
+
import { breakpoints } from './../breakpoints';
|
|
4
|
+
|
|
5
|
+
export const jumbotronShortcuts = [
|
|
6
|
+
// Default variant
|
|
7
|
+
['jumbotron-header-base', 'relative mx-auto my-auto w-full text-center py-8'],
|
|
8
|
+
['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
|
|
9
|
+
['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
|
|
10
|
+
[
|
|
11
|
+
'jumbotron-title-default',
|
|
12
|
+
'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl',
|
|
13
|
+
],
|
|
14
|
+
['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
|
|
15
|
+
|
|
16
|
+
// Hero variant
|
|
17
|
+
['jumbotron-hero-wrapper', 'relative w-full'],
|
|
18
|
+
['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
|
|
19
|
+
['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
|
|
20
|
+
[
|
|
21
|
+
'jumbotron-hero-container',
|
|
22
|
+
'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex',
|
|
23
|
+
],
|
|
24
|
+
['jumbotron-hero-header', 'relative z-10 text-white'],
|
|
25
|
+
[
|
|
26
|
+
'jumbotron-hero-title',
|
|
27
|
+
'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight',
|
|
28
|
+
],
|
|
29
|
+
|
|
30
|
+
// Post variant
|
|
31
|
+
['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
|
|
32
|
+
[
|
|
33
|
+
'jumbotron-post-heading',
|
|
34
|
+
'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]',
|
|
35
|
+
],
|
|
36
|
+
[
|
|
37
|
+
'jumbotron-post-container',
|
|
38
|
+
`w-full sm:max-w-[${breakpoints.sm}] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[${breakpoints['2xl']}] px-4 py-5 flex flex-col flex-wrap`,
|
|
39
|
+
],
|
|
40
|
+
[
|
|
41
|
+
'jumbotron-post-title',
|
|
42
|
+
'font-headlight text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1',
|
|
43
|
+
],
|
|
44
|
+
|
|
45
|
+
// Metadata and categories
|
|
46
|
+
['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
|
|
47
|
+
['jumbotron-categories', 'order-1 mt-4'],
|
|
48
|
+
|
|
49
|
+
// Content styles
|
|
50
|
+
['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-tight'],
|
|
51
|
+
['jumbotron-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
|
|
52
|
+
|
|
53
|
+
// Post Split variant
|
|
54
|
+
['jumbotron-split-wrapper', 'w-full'],
|
|
55
|
+
['jumbotron-split-container', 'xl:container mx-auto px-3.5 md:px-0'],
|
|
56
|
+
['jumbotron-split-header', 'w-full justify-center text-white z-2 mt-auto md:(grid grid-cols-2) pb-4 mb-8'],
|
|
57
|
+
['jumbotron-split-header-wide', 'md:grid-cols-[2fr_1fr]'],
|
|
58
|
+
['jumbotron-split-header-slim', 'pb-2 mb-4'],
|
|
59
|
+
['jumbotron-split-content', 'pl-4 pr-8 py-5 xl:(py-0 pl-0) flex flex-wrap'],
|
|
60
|
+
['jumbotron-split-content-slim', 'py-3 xl:py-0'],
|
|
61
|
+
[
|
|
62
|
+
'jumbotron-split-title',
|
|
63
|
+
'font-headlight text-3xl md:(text-4xl mb-3) xl:text-11 mt-1 order-2 line-clamp-3 pb-1 w-full',
|
|
64
|
+
],
|
|
65
|
+
['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
|
|
66
|
+
['jumbotron-split-image-wrapper', 'relative -mb-8 md:mt-4'],
|
|
67
|
+
['jumbotron-split-image-wrapper-slim', '-mb-4 md:mt-2'],
|
|
68
|
+
['jumbotron-split-image', 'relative shadow-xl md:max-h-112 overflow-hidden'],
|
|
69
|
+
['jumbotron-split-image-slim', 'md:max-h-72'],
|
|
70
|
+
['jumbotron-split-img', 'object-cover'],
|
|
71
|
+
];
|
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
// shortcuts/layout.ts
|
|
2
|
-
import {
|
|
3
|
-
COLORS,
|
|
4
|
-
LAYOUT,
|
|
5
|
-
IMAGE_STYLES,
|
|
6
|
-
TYPOGRAPHY,
|
|
7
|
-
TRANSITIONS,
|
|
8
|
-
aspectRatios
|
|
9
|
-
} from './constants'
|
|
10
|
-
|
|
11
|
-
// Generate image shortcuts dynamically
|
|
12
|
-
const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
|
|
13
|
-
`img--${ratio}`,
|
|
14
|
-
`${aspect} ${IMAGE_STYLES.base}`
|
|
15
|
-
])
|
|
16
|
-
|
|
17
|
-
export const layoutShortcuts = [
|
|
18
|
-
|
|
19
|
-
// Headers and Banners
|
|
20
|
-
['headline', TYPOGRAPHY.headline.bold],
|
|
21
|
-
['headline-light', TYPOGRAPHY.headline.light],
|
|
22
|
-
['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`],
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// Main Layout
|
|
26
|
-
['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
|
|
27
|
-
['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
|
|
28
|
-
['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`],
|
|
29
|
-
|
|
30
|
-
// View Toggles
|
|
31
|
-
['view-grid', 'lg:flex-wrap'],
|
|
32
|
-
['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
|
|
33
|
-
|
|
34
|
-
// Containers
|
|
35
|
-
['products-container', 'products-wrapper'],
|
|
36
|
-
['products-wrapper', `${LAYOUT.flex.wrap} ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
|
|
37
|
-
['product-list', 'sm:block products-wrapper'],
|
|
38
|
-
['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]`],
|
|
39
|
-
['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`],
|
|
40
|
-
['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
|
|
41
|
-
['search-container', 'mb-2 sm:mb-0'],
|
|
42
|
-
|
|
43
|
-
// Category Menu
|
|
44
|
-
['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)`],
|
|
45
|
-
['cat-card', 'p-4 text-base break-inside-avoid-column'],
|
|
46
|
-
['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
|
|
47
|
-
['cats-slide', `${TRANSITIONS.base} pt-1 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`],
|
|
48
|
-
['cats-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
|
|
49
|
-
|
|
50
|
-
// Sidebars and Navigation
|
|
51
|
-
['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`],
|
|
52
|
-
['subcat', 'text-3.75 block cursor-pointer text-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
|
|
53
|
-
['subsubcat', 'pl-2'],
|
|
54
|
-
|
|
55
|
-
// Headers and Banners
|
|
56
|
-
['headline', TYPOGRAPHY.headline.base],
|
|
57
|
-
['headline-light', TYPOGRAPHY.headline.light],
|
|
58
|
-
['headline-bold', TYPOGRAPHY.headline.bold],
|
|
59
|
-
['headline-light-bold', TYPOGRAPHY.headline.lightBold],
|
|
60
|
-
['headline-light-thin', TYPOGRAPHY.headline.lightThin],
|
|
61
|
-
['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`],
|
|
62
|
-
|
|
63
|
-
// Image Shortcuts
|
|
64
|
-
...imageShortcuts,
|
|
65
|
-
['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
|
|
66
|
-
['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
|
|
67
|
-
|
|
68
|
-
// Utility Classes
|
|
69
|
-
['close-light', 'before:bg-white after:bg-white'],
|
|
70
|
-
['close-dark', 'before:bg-black after:bg-black'],
|
|
71
|
-
['colon-after', 'after:content-[":"]'],
|
|
72
|
-
['adsbygoogle', 'w-full text-center'],
|
|
73
|
-
['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`],
|
|
74
|
-
['cat-link', `${TYPOGRAPHY.headline.bold} cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-brand-secondary underline) uppercase py-2 md:py-0`],
|
|
75
|
-
];
|
|
1
|
+
// shortcuts/layout.ts
|
|
2
|
+
import {
|
|
3
|
+
COLORS,
|
|
4
|
+
LAYOUT,
|
|
5
|
+
IMAGE_STYLES,
|
|
6
|
+
TYPOGRAPHY,
|
|
7
|
+
TRANSITIONS,
|
|
8
|
+
aspectRatios
|
|
9
|
+
} from './constants'
|
|
10
|
+
|
|
11
|
+
// Generate image shortcuts dynamically
|
|
12
|
+
const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
|
|
13
|
+
`img--${ratio}`,
|
|
14
|
+
`${aspect} ${IMAGE_STYLES.base}`
|
|
15
|
+
])
|
|
16
|
+
|
|
17
|
+
export const layoutShortcuts = [
|
|
18
|
+
|
|
19
|
+
// Headers and Banners
|
|
20
|
+
['headline', TYPOGRAPHY.headline.bold],
|
|
21
|
+
['headline-light', TYPOGRAPHY.headline.light],
|
|
22
|
+
['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`],
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// Main Layout
|
|
26
|
+
['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
|
|
27
|
+
['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
|
|
28
|
+
['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`],
|
|
29
|
+
|
|
30
|
+
// View Toggles
|
|
31
|
+
['view-grid', 'lg:flex-wrap'],
|
|
32
|
+
['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
|
|
33
|
+
|
|
34
|
+
// Containers
|
|
35
|
+
['products-container', 'products-wrapper'],
|
|
36
|
+
['products-wrapper', `${LAYOUT.flex.wrap} ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
|
|
37
|
+
['product-list', 'sm:block products-wrapper'],
|
|
38
|
+
['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]`],
|
|
39
|
+
['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`],
|
|
40
|
+
['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
|
|
41
|
+
['search-container', 'mb-2 sm:mb-0'],
|
|
42
|
+
|
|
43
|
+
// Category Menu
|
|
44
|
+
['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)`],
|
|
45
|
+
['cat-card', 'p-4 text-base break-inside-avoid-column'],
|
|
46
|
+
['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
|
|
47
|
+
['cats-slide', `${TRANSITIONS.base} pt-1 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`],
|
|
48
|
+
['cats-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
|
|
49
|
+
|
|
50
|
+
// Sidebars and Navigation
|
|
51
|
+
['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`],
|
|
52
|
+
['subcat', 'text-3.75 block cursor-pointer text-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
|
|
53
|
+
['subsubcat', 'pl-2'],
|
|
54
|
+
|
|
55
|
+
// Headers and Banners
|
|
56
|
+
['headline', TYPOGRAPHY.headline.base],
|
|
57
|
+
['headline-light', TYPOGRAPHY.headline.light],
|
|
58
|
+
['headline-bold', TYPOGRAPHY.headline.bold],
|
|
59
|
+
['headline-light-bold', TYPOGRAPHY.headline.lightBold],
|
|
60
|
+
['headline-light-thin', TYPOGRAPHY.headline.lightThin],
|
|
61
|
+
['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`],
|
|
62
|
+
|
|
63
|
+
// Image Shortcuts
|
|
64
|
+
...imageShortcuts,
|
|
65
|
+
['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
|
|
66
|
+
['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
|
|
67
|
+
|
|
68
|
+
// Utility Classes
|
|
69
|
+
['close-light', 'before:bg-white after:bg-white'],
|
|
70
|
+
['close-dark', 'before:bg-black after:bg-black'],
|
|
71
|
+
['colon-after', 'after:content-[":"]'],
|
|
72
|
+
['adsbygoogle', 'w-full text-center'],
|
|
73
|
+
['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`],
|
|
74
|
+
['cat-link', `${TYPOGRAPHY.headline.bold} cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-brand-secondary underline) uppercase py-2 md:py-0`],
|
|
75
|
+
];
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
// theme/typography.ts
|
|
2
|
-
interface FontFamily {
|
|
3
|
-
[key: string]: string[];
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
interface FontSize {
|
|
7
|
-
[key: string]: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
interface Typography {
|
|
11
|
-
fontFamily: FontFamily;
|
|
12
|
-
fontSize: FontSize;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export const typography: Typography = {
|
|
16
|
-
fontFamily: {
|
|
17
|
-
sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
|
|
18
|
-
novamono: ['Nova Mono'],
|
|
19
|
-
mono: ['Nova Mono'],
|
|
20
|
-
headlight: ['vw_headlight', 'system-ui'],
|
|
21
|
-
headregular: ['vw_headregular'],
|
|
22
|
-
headbold: ['vw_headbold'],
|
|
23
|
-
textlight: ['vw_textlight'],
|
|
24
|
-
textregular: ['vw_textregular'],
|
|
25
|
-
textbold: ['vw_textbold']
|
|
26
|
-
},
|
|
27
|
-
fontSize: {
|
|
28
|
-
xxs: '.625rem',
|
|
29
|
-
}
|
|
1
|
+
// theme/typography.ts
|
|
2
|
+
interface FontFamily {
|
|
3
|
+
[key: string]: string[];
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
interface FontSize {
|
|
7
|
+
[key: string]: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
interface Typography {
|
|
11
|
+
fontFamily: FontFamily;
|
|
12
|
+
fontSize: FontSize;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const typography: Typography = {
|
|
16
|
+
fontFamily: {
|
|
17
|
+
sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
|
|
18
|
+
novamono: ['Nova Mono'],
|
|
19
|
+
mono: ['Nova Mono'],
|
|
20
|
+
headlight: ['vw_headlight', 'system-ui'],
|
|
21
|
+
headregular: ['vw_headregular'],
|
|
22
|
+
headbold: ['vw_headbold'],
|
|
23
|
+
textlight: ['vw_textlight'],
|
|
24
|
+
textregular: ['vw_textregular'],
|
|
25
|
+
textbold: ['vw_textbold']
|
|
26
|
+
},
|
|
27
|
+
fontSize: {
|
|
28
|
+
xxs: '.625rem',
|
|
29
|
+
}
|
|
30
30
|
};
|
package/uno.config.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { createSdsConfig } from './uno-config';
|
|
2
|
-
|
|
1
|
+
import { createSdsConfig } from './uno-config';
|
|
2
|
+
|
|
3
3
|
export default createSdsConfig();
|