srcdev-nuxt-components 5.0.1 → 5.0.3

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/README.md +1 -1
  2. package/assets/styles/extends-layer/srcdev-components/display-prompt-core/index.css +3 -3
  3. package/assets/styles/setup/typography/utility-classes/_generic-font-classes.css +25 -25
  4. package/assets/styles/setup/typography/vars/_reponsive-font-sizes.css +8 -8
  5. package/assets/styles/setup/utility-classes/_page.css +1 -1
  6. package/components/display-prompt/DisplayPromptCore.vue +3 -3
  7. package/components/skip-links/SkipLinks.vue +9 -2
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -55,7 +55,7 @@ The setup layer provides the foundational styles and utilities:
55
55
  #### Typography (`/typography`)
56
56
 
57
57
  - **Responsive Font Sizes** - Fluid typography using clamp() functions:
58
- - `--step-5` to `--step--2` providing 8 responsive font size steps
58
+ - `--step-8` to `--step-1` providing 8 responsive font size steps
59
59
  - **Utility Classes** - Pre-built typography classes:
60
60
  - `.heading-1` through `.heading-5` - Semantic heading styles
61
61
  - Generic font weight and variation settings
package/assets/styles/extends-layer/srcdev-components/display-prompt-core/index.css CHANGED
@@ -28,7 +28,7 @@
28
28
  padding: 0.2rem;
29
29
 
30
30
  .title {
31
- font-size: var(--step-2);
31
+ font-size: var(--step-5);
32
32
  font-weight: bold;
33
33
  line-height: 1.3;
34
34
  color: var(--component-theme-8);
@@ -37,7 +37,7 @@
37
37
  }
38
38
 
39
39
  .text {
40
- font-size: var(--step-2);
40
+ font-size: var(--step-5);
41
41
  font-weight: normal;
42
42
  line-height: 1.3;
43
43
  color: var(--component-theme-8);
@@ -60,7 +60,7 @@
60
60
 
61
61
  .icon {
62
62
  color: var(--component-theme-8);
63
- font-size: var(--step-2);
63
+ font-size: var(--step-5);
64
64
  border: 1px solid green;
65
65
  padding: 1rem;
66
66
  }
package/assets/styles/setup/typography/utility-classes/_generic-font-classes.css CHANGED
@@ -1,36 +1,36 @@
1
1
  :root {
2
2
  .heading-1 {
3
- font-size: var(--step-5);
3
+ font-size: var(--step-8);
4
4
  font-weight: bold;
5
5
  line-height: 1.3;
6
6
  }
7
7
 
8
8
  .heading-2 {
9
- font-size: var(--step-4);
9
+ font-size: var(--step-7);
10
10
  font-weight: bold;
11
11
  line-height: 1.3;
12
12
  }
13
13
 
14
14
  .heading-3 {
15
- font-size: var(--step-3);
15
+ font-size: var(--step-6);
16
16
  font-weight: bold;
17
17
  line-height: 1.3;
18
18
  }
19
19
 
20
20
  .heading-4 {
21
- font-size: var(--step-2);
21
+ font-size: var(--step-5);
22
22
  font-weight: bold;
23
23
  line-height: 1.3;
24
24
  }
25
25
 
26
26
  .heading-5 {
27
- font-size: var(--step-1);
27
+ font-size: var(--step-4);
28
28
  font-weight: bold;
29
29
  line-height: 1.3;
30
30
  }
31
31
 
32
32
  .heading-6 {
33
- font-size: var(--step-0);
33
+ font-size: var(--step-3);
34
34
  font-weight: bold;
35
35
  line-height: 1.3;
36
36
  }
@@ -38,19 +38,19 @@
38
38
  /* Body text */
39
39
 
40
40
  .body-large {
41
- font-size: var(--step-3);
41
+ font-size: var(--step-6);
42
42
  font-weight: normal;
43
43
  line-height: 1.5;
44
44
  }
45
45
 
46
46
  .body-medium {
47
- font-size: var(--step-2);
47
+ font-size: var(--step-5);
48
48
  font-weight: normal;
49
49
  line-height: 1.5;
50
50
  }
51
51
 
52
52
  .body-normal {
53
- font-size: var(--step-1);
53
+ font-size: var(--step-4);
54
54
  font-weight: normal;
55
55
  line-height: 1.5;
56
56
  }
@@ -62,67 +62,67 @@
62
62
  }
63
63
 
64
64
  .body-xsmall {
65
- font-size: var(--step--1);
65
+ font-size: var(--step-2);
66
66
  font-weight: normal;
67
67
  line-height: 1.5;
68
68
  }
69
69
 
70
70
  .body-large-semibold {
71
- font-size: var(--step-3);
71
+ font-size: var(--step-6);
72
72
  font-weight: 500;
73
73
  line-height: 1.5;
74
74
  }
75
75
 
76
76
  .body-medium-semibold {
77
- font-size: var(--step-2);
77
+ font-size: var(--step-5);
78
78
  font-weight: 500;
79
79
  line-height: 1.5;
80
80
  }
81
81
 
82
82
  .body-normal-semibold {
83
- font-size: var(--step-1);
83
+ font-size: var(--step-4);
84
84
  font-weight: 500;
85
85
  line-height: 1.5;
86
86
  }
87
87
 
88
88
  .body-small-semibold {
89
- font-size: var(--step-0);
89
+ font-size: var(--step-3);
90
90
  font-weight: 500;
91
91
  line-height: 1.5;
92
92
  }
93
93
 
94
94
  .body-xsmall-semibold {
95
- font-size: var(--step--1);
95
+ font-size: var(--step-2);
96
96
  font-weight: 500;
97
97
  line-height: 1.5;
98
98
  }
99
99
 
100
100
  .body-large-bold {
101
- font-size: var(--step-3);
101
+ font-size: var(--step-6);
102
102
  font-weight: bold;
103
103
  line-height: 1.5;
104
104
  }
105
105
 
106
106
  .body-medium-bold {
107
- font-size: var(--step-2);
107
+ font-size: var(--step-5);
108
108
  font-weight: bold;
109
109
  line-height: 1.5;
110
110
  }
111
111
 
112
112
  .body-normal-bold {
113
- font-size: var(--step-1);
113
+ font-size: var(--step-4);
114
114
  font-weight: bold;
115
115
  line-height: 1.5;
116
116
  }
117
117
 
118
118
  .body-small-bold {
119
- font-size: var(--step-0);
119
+ font-size: var(--step-3);
120
120
  font-weight: bold;
121
121
  line-height: 1.5;
122
122
  }
123
123
 
124
124
  .body-xsmall-bold {
125
- font-size: var(--step--1);
125
+ font-size: var(--step-2);
126
126
  font-weight: bold;
127
127
  line-height: 1.5;
128
128
  }
@@ -131,7 +131,7 @@
131
131
 
132
132
  .link-large {
133
133
  color: var(--theme-link-default);
134
- font-size: var(--step-3);
134
+ font-size: var(--step-6);
135
135
  font-weight: 600;
136
136
  line-height: 1.5;
137
137
  text-decoration: underline;
@@ -143,7 +143,7 @@
143
143
 
144
144
  .link-medium {
145
145
  color: var(--theme-link-default);
146
- font-size: var(--step-2);
146
+ font-size: var(--step-5);
147
147
  font-weight: 600;
148
148
  line-height: 1.5;
149
149
  text-decoration: underline;
@@ -155,7 +155,7 @@
155
155
 
156
156
  .link-normal {
157
157
  color: var(--theme-link-default);
158
- font-size: var(--step-1);
158
+ font-size: var(--step-4);
159
159
  font-weight: 600;
160
160
  line-height: 1.5;
161
161
  text-decoration: underline;
@@ -168,7 +168,7 @@
168
168
 
169
169
  .link-small {
170
170
  color: var(--theme-link-default);
171
- font-size: var(--step-0);
171
+ font-size: var(--step-3);
172
172
  font-weight: 600;
173
173
  line-height: 1.5;
174
174
  text-decoration: underline;
@@ -180,7 +180,7 @@
180
180
 
181
181
  .link-xsmall {
182
182
  color: var(--theme-link-default);
183
- font-size: var(--step--1);
183
+ font-size: var(--step-2);
184
184
  font-weight: 600;
185
185
  line-height: 1.5;
186
186
  text-decoration: underline;
package/assets/styles/setup/typography/vars/_reponsive-font-sizes.css CHANGED
@@ -1,10 +1,10 @@
1
1
  :root {
2
- --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
3
- --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
4
- --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
5
- --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
6
- --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
7
- --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
8
- --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
9
- --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
2
+ --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
3
+ --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
4
+ --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
5
+ --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
6
+ --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
7
+ --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
8
+ --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
9
+ --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
10
10
  }
package/assets/styles/setup/utility-classes/_page.css CHANGED
@@ -28,7 +28,7 @@ li,
28
28
  a {
29
29
  color: light-dark(var(--gray-12), var(--gray-3));
30
30
  font-family: var(--font-family);
31
- font-size: var(--step-1);
31
+ font-size: var(--step-4);
32
32
  }
33
33
 
34
34
  body {
package/components/display-prompt/DisplayPromptCore.vue CHANGED
@@ -132,7 +132,7 @@ const dismissPrompt = () => {
132
132
  padding: 0.2rem;
133
133
 
134
134
  .title {
135
- font-size: var(--step-2);
135
+ font-size: var(--step-5);
136
136
  font-weight: bold;
137
137
  line-height: 1.3;
138
138
  color: var(--component-theme-8);
@@ -141,7 +141,7 @@ const dismissPrompt = () => {
141
141
  }
142
142
 
143
143
  .text {
144
- font-size: var(--step-2);
144
+ font-size: var(--step-5);
145
145
  font-weight: normal;
146
146
  line-height: 1.3;
147
147
  color: var(--component-theme-8);
@@ -177,7 +177,7 @@ const dismissPrompt = () => {
177
177
  .icon {
178
178
  color: var(--component-theme-8);
179
179
  display: block;
180
- font-size: var(--step-2);
180
+ font-size: var(--step-5);
181
181
  padding: 1rem;
182
182
  }
183
183
  }
package/components/skip-links/SkipLinks.vue CHANGED
@@ -1,6 +1,10 @@
1
1
  <template>
2
2
  <ul class="home-link-navigation" aria-label="Home Navigation">
3
- <li class="home-link"><a href="/">Logo</a></li>
3
+ <li v-if="hasHomeLink" class="home-link">
4
+ <slot name="homeLink">
5
+ <NuxtLink to="/" class="home-link-default">Logo</NuxtLink>
6
+ </slot>
7
+ </li>
4
8
  <li class="skip-links">
5
9
  <ul class="skip-links-nav">
6
10
  <li class="skip-link-item"><a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a></li>
@@ -10,7 +14,10 @@
10
14
  </ul>
11
15
  </template>
12
16
 
13
- <script lang="ts" setup></script>
17
+ <script lang="ts" setup>
18
+ const slots = useSlots();
19
+ const hasHomeLink = ref(slots.homeLink !== undefined);
20
+ </script>
14
21
 
15
22
  <style lang="css">
16
23
  .home-link-navigation {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "5.0.1",
4
+ "version": "5.0.3",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",