spoko-design-system 0.8.4 → 0.8.6

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 (8) hide show
  1. package/.astro/data-store.json +1 -1
  2. package/.astro/settings.json +1 -1
  3. package/index.ts +2 -0
  4. package/package.json +123 -123
  5. package/src/components/Headline.vue +42 -2
  6. package/src/pages/components/headline.mdx +69 -84
  7. package/uno-config/theme/shortcuts/constants.ts +13 -3
  8. package/uno-config/theme/shortcuts/layout.ts +12 -2
package/.astro/data-store.json CHANGED
@@ -1 +1 @@
1
- [["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.9.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"experimentalDefaultStyles\":true},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
1
+ [["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.11.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
package/.astro/settings.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "_variables": {
3
- "lastUpdateCheck": 1749557085797
3
+ "lastUpdateCheck": 1751564292126
4
4
  }
5
5
  }
package/index.ts CHANGED
@@ -15,6 +15,8 @@ export { default as Breadcrumbs } from './src/components/Breadcrumbs.vue';
15
15
  export { default as ProductDetailsList } from './src/components/ProductDetailsList.vue';
16
16
  export { default as FeaturesList } from './src/components/FeaturesList.vue';
17
17
  export { default as ProductCodes } from './src/components/ProductCodes.vue';
18
+ export { default as Headline } from './src/components/Headline.vue';
19
+
18
20
  export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
19
21
  export { default as ProductButton } from './src/components/Product/ProductButton.vue';
20
22
  export { default as ProductColors } from './src/components/Product/ProductColors.vue';
package/package.json CHANGED
@@ -1,124 +1,124 @@
1
- {
2
- "name": "spoko-design-system",
3
- "version": "0.8.4",
4
- "private": false,
5
- "main": "./index.ts",
6
- "module": "./index.ts",
7
- "types": "./index.ts",
8
- "exports": {
9
- ".": {
10
- "import": "./index.ts",
11
- "require": "./index.ts"
12
- },
13
- "./styles/*": "./src/styles/*",
14
- "./icons": "./icon.config.ts",
15
- "./icon-collections": "./icon.collections.ts",
16
- "./uno-config": "./uno-config/index.ts"
17
- },
18
- "scripts": {
19
- "dev": "astro dev",
20
- "start": "astro dev",
21
- "build": "astro build",
22
- "preview": "astro preview"
23
- },
24
- "repository": {
25
- "type": "git",
26
- "url": "https://github.com/polo-blue/sds"
27
- },
28
- "author": {
29
- "name": "spokospace",
30
- "email": "szymon@spoko.space",
31
- "url": "https://spoko.space"
32
- },
33
- "homepage": "https://sds.spoko.space/",
34
- "license": "MIT",
35
- "keywords": [
36
- "astro-starter",
37
- "seo",
38
- "astro",
39
- "sds design system",
40
- "spoko design system"
41
- ],
42
- "dependencies": {
43
- "@algolia/client-search": "^5.30.0",
44
- "@astrojs/mdx": "^4.3.0",
45
- "@astrojs/node": "^9.2.2",
46
- "@astrojs/sitemap": "^3.4.1",
47
- "@astrojs/ts-plugin": "^1.10.4",
48
- "@astrojs/vue": "^5.1.0",
49
- "@docsearch/css": "^3.9.0",
50
- "@iconify-json/ant-design": "^1.2.5",
51
- "@iconify-json/bi": "^1.2.4",
52
- "@iconify-json/bx": "^1.2.2",
53
- "@iconify-json/carbon": "^1.2.10",
54
- "@iconify-json/circle-flags": "^1.2.6",
55
- "@iconify-json/ei": "^1.2.2",
56
- "@iconify-json/el": "^1.2.1",
57
- "@iconify-json/eos-icons": "^1.2.2",
58
- "@iconify-json/et": "^1.2.1",
59
- "@iconify-json/flowbite": "^1.2.5",
60
- "@iconify-json/fluent": "^1.2.26",
61
- "@iconify-json/fluent-emoji": "1.2.3",
62
- "@iconify-json/ic": "^1.2.2",
63
- "@iconify-json/icon-park-outline": "^1.2.2",
64
- "@iconify-json/la": "^1.2.1",
65
- "@iconify-json/material-symbols-light": "^1.2.28",
66
- "@iconify-json/mdi": "^1.2.3",
67
- "@iconify-json/noto-v1": "^1.2.2",
68
- "@iconify-json/octicon": "^1.2.7",
69
- "@iconify-json/ph": "^1.2.2",
70
- "@iconify-json/simple-icons": "^1.2.41",
71
- "@iconify-json/system-uicons": "^1.2.2",
72
- "@iconify-json/uil": "^1.2.3",
73
- "@iconify/json": "^2.2.354",
74
- "@iconify/vue": "^5.0.0",
75
- "@playform/compress": "^0.2.0",
76
- "@playform/inline": "^0.1.2",
77
- "@unocss/astro": "66.3.2",
78
- "@unocss/preset-attributify": "66.3.2",
79
- "@unocss/preset-typography": "66.3.2",
80
- "@unocss/preset-uno": "66.3.2",
81
- "@unocss/preset-web-fonts": "66.3.2",
82
- "@unocss/preset-wind": "66.3.2",
83
- "@unocss/reset": "66.3.2",
84
- "@vite-pwa/astro": "^1.1.0",
85
- "@vueuse/core": "^13.5.0",
86
- "astro-i18next": "1.0.0-beta.21",
87
- "astro-icon": "^1.1.5",
88
- "astro-meta-tags": "^0.3.2",
89
- "astro-navbar": "^2.4.0",
90
- "astro-pagefind": "^1.8.3",
91
- "astro-remote": "^0.3.4",
92
- "dotenv": "^17.0.1",
93
- "i18next": "^25.3.0",
94
- "i18next-browser-languagedetector": "^8.2.0",
95
- "i18next-fs-backend": "^2.6.0",
96
- "i18next-http-backend": "^3.0.2",
97
- "i18next-vue": "^5.3.0",
98
- "swiper": "^11.2.10",
99
- "unocss": "66.3.2",
100
- "vue": "^3.5.17"
101
- },
102
- "devDependencies": {
103
- "@types/gtag.js": "^0.0.20",
104
- "@types/node": "^24.0.10",
105
- "@unocss/transformer-variant-group": "66.3.2",
106
- "@vitejs/plugin-vue": "^6.0.0",
107
- "@vue/compiler-sfc": "^3.5.17",
108
- "astro": "^5.10.2",
109
- "unocss": "^0.65.0",
110
- "vite": "^7.0.0"
111
- },
112
- "packageManager": "pnpm@9.15.3",
113
- "pnpm": {
114
- "default": "9.15.3",
115
- "overrides": {
116
- "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
117
- "sharp@<0.30.5": ">=0.30.5"
118
- }
119
- },
120
- "engines": {
121
- "node": ">=18.14.1",
122
- "pnpm": ">=9.15.3"
123
- }
1
+ {
2
+ "name": "spoko-design-system",
3
+ "version": "0.8.6",
4
+ "private": false,
5
+ "main": "./index.ts",
6
+ "module": "./index.ts",
7
+ "types": "./index.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./index.ts",
11
+ "require": "./index.ts"
12
+ },
13
+ "./styles/*": "./src/styles/*",
14
+ "./icons": "./icon.config.ts",
15
+ "./icon-collections": "./icon.collections.ts",
16
+ "./uno-config": "./uno-config/index.ts"
17
+ },
18
+ "scripts": {
19
+ "dev": "astro dev",
20
+ "start": "astro dev",
21
+ "build": "astro build",
22
+ "preview": "astro preview"
23
+ },
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "https://github.com/polo-blue/sds"
27
+ },
28
+ "author": {
29
+ "name": "spokospace",
30
+ "email": "szymon@spoko.space",
31
+ "url": "https://spoko.space"
32
+ },
33
+ "homepage": "https://sds.spoko.space/",
34
+ "license": "MIT",
35
+ "keywords": [
36
+ "astro-starter",
37
+ "seo",
38
+ "astro",
39
+ "sds design system",
40
+ "spoko design system"
41
+ ],
42
+ "dependencies": {
43
+ "@algolia/client-search": "^5.30.0",
44
+ "@astrojs/mdx": "^4.3.0",
45
+ "@astrojs/node": "^9.3.0",
46
+ "@astrojs/sitemap": "^3.4.1",
47
+ "@astrojs/ts-plugin": "^1.10.4",
48
+ "@astrojs/vue": "^5.1.0",
49
+ "@docsearch/css": "^3.9.0",
50
+ "@iconify-json/ant-design": "^1.2.5",
51
+ "@iconify-json/bi": "^1.2.4",
52
+ "@iconify-json/bx": "^1.2.2",
53
+ "@iconify-json/carbon": "^1.2.10",
54
+ "@iconify-json/circle-flags": "^1.2.6",
55
+ "@iconify-json/ei": "^1.2.2",
56
+ "@iconify-json/el": "^1.2.1",
57
+ "@iconify-json/eos-icons": "^1.2.2",
58
+ "@iconify-json/et": "^1.2.1",
59
+ "@iconify-json/flowbite": "^1.2.5",
60
+ "@iconify-json/fluent": "^1.2.26",
61
+ "@iconify-json/fluent-emoji": "1.2.3",
62
+ "@iconify-json/ic": "^1.2.2",
63
+ "@iconify-json/icon-park-outline": "^1.2.2",
64
+ "@iconify-json/la": "^1.2.1",
65
+ "@iconify-json/material-symbols-light": "^1.2.28",
66
+ "@iconify-json/mdi": "^1.2.3",
67
+ "@iconify-json/noto-v1": "^1.2.2",
68
+ "@iconify-json/octicon": "^1.2.7",
69
+ "@iconify-json/ph": "^1.2.2",
70
+ "@iconify-json/simple-icons": "^1.2.41",
71
+ "@iconify-json/system-uicons": "^1.2.2",
72
+ "@iconify-json/uil": "^1.2.3",
73
+ "@iconify/json": "^2.2.354",
74
+ "@iconify/vue": "^5.0.0",
75
+ "@playform/compress": "^0.2.0",
76
+ "@playform/inline": "^0.1.2",
77
+ "@unocss/astro": "66.3.2",
78
+ "@unocss/preset-attributify": "66.3.2",
79
+ "@unocss/preset-typography": "66.3.2",
80
+ "@unocss/preset-uno": "66.3.2",
81
+ "@unocss/preset-web-fonts": "66.3.2",
82
+ "@unocss/preset-wind": "66.3.2",
83
+ "@unocss/reset": "66.3.2",
84
+ "@vite-pwa/astro": "^1.1.0",
85
+ "@vueuse/core": "^13.5.0",
86
+ "astro-i18next": "1.0.0-beta.21",
87
+ "astro-icon": "^1.1.5",
88
+ "astro-meta-tags": "^0.3.2",
89
+ "astro-navbar": "^2.4.0",
90
+ "astro-pagefind": "^1.8.3",
91
+ "astro-remote": "^0.3.4",
92
+ "dotenv": "^17.0.1",
93
+ "i18next": "^25.3.0",
94
+ "i18next-browser-languagedetector": "^8.2.0",
95
+ "i18next-fs-backend": "^2.6.0",
96
+ "i18next-http-backend": "^3.0.2",
97
+ "i18next-vue": "^5.3.0",
98
+ "swiper": "^11.2.10",
99
+ "unocss": "66.3.2",
100
+ "vue": "^3.5.17"
101
+ },
102
+ "devDependencies": {
103
+ "@types/gtag.js": "^0.0.20",
104
+ "@types/node": "^24.0.10",
105
+ "@unocss/transformer-variant-group": "66.3.2",
106
+ "@vitejs/plugin-vue": "^6.0.0",
107
+ "@vue/compiler-sfc": "^3.5.17",
108
+ "astro": "^5.11.0",
109
+ "unocss": "^0.65.0",
110
+ "vite": "^7.0.1"
111
+ },
112
+ "packageManager": "pnpm@9.15.3",
113
+ "pnpm": {
114
+ "default": "9.15.3",
115
+ "overrides": {
116
+ "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
117
+ "sharp@<0.30.5": ">=0.30.5"
118
+ }
119
+ },
120
+ "engines": {
121
+ "node": ">=18.14.1",
122
+ "pnpm": ">=9.15.3"
123
+ }
124
124
  }
package/src/components/Headline.vue CHANGED
@@ -12,17 +12,57 @@ const props = defineProps({
12
12
  required: false,
13
13
  default: null
14
14
  },
15
+ fontFamily: {
16
+ type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
17
+ required: false,
18
+ default: 'head'
19
+ },
20
+ fontWeight: {
21
+ type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
22
+ required: false,
23
+ default: 'regular'
24
+ },
15
25
  underline: {
16
26
  type: Boolean,
17
27
  required: false,
18
28
  default: false
19
29
  }
20
30
  })
31
+
32
+ // Generate the typography class based on font family and weight
33
+ const getTypographyClass = (): string => {
34
+ const family = props.fontFamily
35
+ const weight = props.fontWeight
36
+
37
+ // Handle special cases for mono fonts
38
+ if (family === 'novamono' || family === 'mono') {
39
+ return `font-${family}`
40
+ }
41
+
42
+ // For head family, generate specific classes
43
+ if (family === 'head') {
44
+ if (weight === 'light') return 'headline-light'
45
+ if (weight === 'bold') return 'headline-bold'
46
+ if (weight === 'light-bold') return 'headline-light-bold'
47
+ if (weight === 'light-thin') return 'headline-light-thin'
48
+ return 'headline' // for regular weight
49
+ }
50
+
51
+ // For text family, generate appropriate class
52
+ if (family === 'text') {
53
+ return `font-text${weight}`
54
+ }
55
+
56
+ // Default fallback
57
+ return 'headline'
58
+ }
59
+
60
+ const typographyClass = getTypographyClass()
21
61
  </script>
22
62
 
23
63
  <template>
24
64
  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
25
- :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
65
+ :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
26
66
  <slot />
27
67
  </component>
28
68
  </template>
@@ -45,4 +85,4 @@ const props = defineProps({
45
85
  background-color: #64748b
46
86
  }
47
87
  }
48
- </style>
88
+ </style>
package/src/pages/components/headline.mdx CHANGED
@@ -29,7 +29,7 @@ supported parameters
29
29
  ```js
30
30
  as: {
31
31
  type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
32
- default: null,
32
+ default: 'span',
33
33
  required: true,
34
34
  },
35
35
  textSize: {
@@ -40,113 +40,98 @@ textSize: {
40
40
 
41
41
  ```
42
42
 
43
- ## Headline H1
44
43
 
45
- <div class="component-preview">
46
- <Headline as="h1">Lorem Ipsum</Headline>
44
+ ## Examples
45
+
46
+ <div class="component-preview flex-wrap flex-col justify-start !items-start">
47
+ <ul class="list-decimal list-outside">
48
+ <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline></li>
49
+ <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
50
+ <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
51
+ <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline></li>
52
+ <li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline></li>
53
+ <li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline></li>
54
+ <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline></li>
55
+ <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline></li>
56
+ <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline></li>
57
+ <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline></li>
58
+ <li class="px-4 pb-4"><Headline as="code" font-family="novamono">Nova Mono Code Text</Headline></li>
59
+ <li class="px-4 pb-4"><Headline as="code" font-family="mono">Mono Code Text</Headline></li>
60
+ <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline></li>
61
+ <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline></li>
62
+ <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
63
+ <Icon name="ph:cat-thin" class="inline-block mr-4" />
64
+ Headline with Icon
65
+ </Headline></li>
66
+ <li class="px-4 pb-4"><Headline as="h1">Default Headline</Headline></li>
67
+ <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
68
+ <Icon name="ph:cat-thin" class="inline-block mr-4" />
69
+ Complete Example
70
+ </Headline></li>
71
+ </ul>
47
72
  </div>
48
73
 
49
74
  ```js
50
- <Headline as="h1">
51
- Lorem Ipsum
52
- </Headline>
75
+ /* 1 */
76
+ <Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
53
77
 
54
- ```
78
+ /* 2 */
79
+ <Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>
55
80
 
81
+ /* 3 */
82
+ <Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>
56
83
 
57
- ## Headline H2
84
+ /* 4 */
85
+ <Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>
58
86
 
59
- <div class="component-preview">
60
- <Headline as="h2"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />Lorem Ipsum</Headline>
61
- </div>
87
+ /* 5 */
88
+ <Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>
62
89
 
63
- ```js
64
- <Headline as="h2">
65
- <Icon name="ph:cat-thin" class="mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />
66
- Lorem Ipsum
67
- </Headline>
90
+ /* 6 */
91
+ <Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>
68
92
 
69
- ```
93
+ /* 7 */
94
+ <Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>
70
95
 
71
- ## Headline DIV
96
+ /* 8 */
97
+ <Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>
72
98
 
73
- <div class="component-preview">
74
- <Headline as="div"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
75
- </div>
99
+ /* 9 */
100
+ <Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>
76
101
 
77
- ```js
78
- <Headline as="div">
79
- <Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />
80
- Lorem Ipsum
81
- </Headline>
102
+ /* 10 */
103
+ <Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>
82
104
 
83
- ```
105
+ /* 11 */
106
+ <Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>
84
107
 
85
- ## Headline P
86
- Paragraph `<p>`
108
+ /* 12 */
109
+ <Headline as="code" font-family="mono">Mono Code Text</Headline>
87
110
 
88
- <div class="component-preview">
89
- <Headline as="p"><Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
90
- </div>
111
+ /* 13 */
112
+ <Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>
91
113
 
92
- ```js
93
- <Headline as="p">
94
- <Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
95
- Lorem Ipsum
96
- </Headline>
97
-
98
- ```
99
-
100
- ## Headline without icon
114
+ /* 14 */
115
+ <Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>
101
116
 
102
- <div class="component-preview">
103
- <Headline as="p">Lorem Ipsum</Headline>
104
- </div>
105
-
106
- ```js
107
- <Headline as="p">Lorem Ipsum</Headline>
108
-
109
- ```
110
-
111
- ## Headline without icon, text size 4xl
112
-
113
- <div class="component-preview">
114
- <Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
115
- </div>
116
-
117
- ```js
118
- <Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
119
-
120
- ```
121
-
122
-
123
- ## Headline without icon, text size 4xl with blue icon
124
-
125
- <div class="component-preview">
126
- <Headline as="h1" text-size="4xl"><Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
127
- </div>
128
-
129
- ```js
130
- <Headline as="h1" text-size="4xl" icon-color="blue-wrc">
131
- <Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
132
- Lorem Ipsum
117
+ /* 15 */
118
+ <Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
119
+ <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
120
+ Headline with Icon
133
121
  </Headline>
134
122
 
135
- ```
136
-
123
+ /* 16 */
124
+ <Headline as="h1">Default Headline</Headline>
137
125
 
138
- ## Headline with underline
126
+ /* 17 */
127
+ <Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
128
+ <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
129
+ Complete Example
130
+ </Headline>
139
131
 
140
- <div class="component-preview">
141
- <Headline as="h1" text-size="4xl" underline><Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
142
- </div>
143
132
 
144
- ```js
145
- <Headline as="h1" text-size="4xl" icon-color="blue-wrc" underline>
146
- <Icon name="ph:cat-thin" class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
147
- Lorem Ipsum
148
- </Headline>
149
133
 
150
134
  ```
151
135
 
136
+
152
137
  #
package/uno-config/theme/shortcuts/constants.ts CHANGED
@@ -105,11 +105,21 @@ export const BUTTON_STYLES = {
105
105
  // Common typography styles
106
106
  export const TYPOGRAPHY = {
107
107
  headline: {
108
- base: 'font-headlight',
109
- bold: 'font-headlight font-bold',
110
- light: 'font-headlight font-300 tracking-tight',
108
+ base: 'font-headregular',
109
+ bold: 'font-headbold', // dedykowany font bold
110
+ light: 'font-headlight',
111
+ lightBold: 'font-headlight font-bold', // light font + CSS bold
112
+ lightThin: 'font-headlight font-300 tracking-tight', // light + thin + tracking
113
+ // base: 'font-headregular',
114
+ // bold: 'font-headlight font-bold',
115
+ // light: 'font-headlight font-300 tracking-tight',
111
116
  },
112
117
  text: {
118
+ light: 'font-textlight',
119
+ regular: 'font-textregular',
120
+ bold: 'font-textbold',
121
+ lightBold: 'font-textlight font-bold', // light font + CSS bold
122
+ lightThin: 'font-textlight font-300 tracking-tight', // light + th
113
123
  xs: 'text-3',
114
124
  sm: 'text 3.5',
115
125
  base: 'text-4',
package/uno-config/theme/shortcuts/layout.ts CHANGED
@@ -15,6 +15,13 @@ const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
15
15
  ])
16
16
 
17
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
+
18
25
  // Main Layout
19
26
  ['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
20
27
  ['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
@@ -46,8 +53,11 @@ export const layoutShortcuts = [
46
53
  ['subsubcat', 'pl-2'],
47
54
 
48
55
  // Headers and Banners
49
- ['headline', TYPOGRAPHY.headline.bold],
50
- ['headline-light', TYPOGRAPHY.headline.light],
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],
51
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`],
52
62
 
53
63
  // Image Shortcuts