@classic-homes/theme-styles 0.1.49 → 0.1.50
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/package.json +4 -1
- package/src/accessibility.css +49 -39
- package/src/base.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@classic-homes/theme-styles",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.50",
|
|
4
4
|
"description": "Base styles and utilities for the Classic Theme design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -12,6 +12,9 @@
|
|
|
12
12
|
"./accessibility": "./src/accessibility.css",
|
|
13
13
|
"./utilities": "./src/utilities.css"
|
|
14
14
|
},
|
|
15
|
+
"sideEffects": [
|
|
16
|
+
"*.css"
|
|
17
|
+
],
|
|
15
18
|
"files": [
|
|
16
19
|
"src"
|
|
17
20
|
],
|
package/src/accessibility.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Classic Theme Accessibility Styles
|
|
3
|
-
*
|
|
3
|
+
*
|
|
4
4
|
* WCAG 2.1 AA compliant styles for focus states, touch targets,
|
|
5
5
|
* reduced motion, and screen reader utilities.
|
|
6
6
|
*/
|
|
@@ -19,18 +19,49 @@
|
|
|
19
19
|
outline: none;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
/* Enhanced focus for interactive elements */
|
|
22
|
+
/* Enhanced focus for interactive elements - adds rounded corners */
|
|
23
23
|
button:focus-visible,
|
|
24
24
|
[role='button']:focus-visible,
|
|
25
25
|
input:focus-visible,
|
|
26
26
|
select:focus-visible,
|
|
27
27
|
textarea:focus-visible,
|
|
28
28
|
a:focus-visible {
|
|
29
|
-
outline: 2px solid hsl(var(--ring));
|
|
30
|
-
outline-offset: 2px;
|
|
31
29
|
border-radius: var(--radius, 0.25rem);
|
|
32
30
|
}
|
|
33
31
|
|
|
32
|
+
/* ===== Reduced Motion (WCAG 2.3.3) ===== */
|
|
33
|
+
|
|
34
|
+
@media (prefers-reduced-motion: reduce) {
|
|
35
|
+
*,
|
|
36
|
+
*::before,
|
|
37
|
+
*::after {
|
|
38
|
+
animation-duration: 0.01ms !important;
|
|
39
|
+
animation-iteration-count: 1 !important;
|
|
40
|
+
transition-duration: 0.01ms !important;
|
|
41
|
+
scroll-behavior: auto !important;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* ===== High Contrast Mode Support ===== */
|
|
46
|
+
|
|
47
|
+
@media (forced-colors: active) {
|
|
48
|
+
/* Ensure borders are visible in high contrast mode */
|
|
49
|
+
button,
|
|
50
|
+
input,
|
|
51
|
+
select,
|
|
52
|
+
textarea,
|
|
53
|
+
[role='button'] {
|
|
54
|
+
border: 1px solid ButtonText;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Ensure focus is visible */
|
|
58
|
+
:focus-visible {
|
|
59
|
+
outline: 2px solid Highlight;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@layer classic-theme.utilities {
|
|
34
65
|
/* ===== Skip Link (WCAG 2.4.1) ===== */
|
|
35
66
|
|
|
36
67
|
.skip-link {
|
|
@@ -76,19 +107,6 @@
|
|
|
76
107
|
height: 100%;
|
|
77
108
|
}
|
|
78
109
|
|
|
79
|
-
/* ===== Reduced Motion (WCAG 2.3.3) ===== */
|
|
80
|
-
|
|
81
|
-
@media (prefers-reduced-motion: reduce) {
|
|
82
|
-
*,
|
|
83
|
-
*::before,
|
|
84
|
-
*::after {
|
|
85
|
-
animation-duration: 0.01ms !important;
|
|
86
|
-
animation-iteration-count: 1 !important;
|
|
87
|
-
transition-duration: 0.01ms !important;
|
|
88
|
-
scroll-behavior: auto !important;
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
110
|
/* ===== Screen Reader Only (WCAG) ===== */
|
|
93
111
|
|
|
94
112
|
.sr-only {
|
|
@@ -99,6 +117,7 @@
|
|
|
99
117
|
margin: -1px;
|
|
100
118
|
overflow: hidden;
|
|
101
119
|
clip: rect(0, 0, 0, 0);
|
|
120
|
+
clip-path: inset(50%);
|
|
102
121
|
white-space: nowrap;
|
|
103
122
|
border-width: 0;
|
|
104
123
|
}
|
|
@@ -113,27 +132,10 @@
|
|
|
113
132
|
margin: inherit;
|
|
114
133
|
overflow: visible;
|
|
115
134
|
clip: auto;
|
|
135
|
+
clip-path: none;
|
|
116
136
|
white-space: normal;
|
|
117
137
|
}
|
|
118
138
|
|
|
119
|
-
/* ===== High Contrast Mode Support ===== */
|
|
120
|
-
|
|
121
|
-
@media (forced-colors: active) {
|
|
122
|
-
/* Ensure borders are visible in high contrast mode */
|
|
123
|
-
button,
|
|
124
|
-
input,
|
|
125
|
-
select,
|
|
126
|
-
textarea,
|
|
127
|
-
[role='button'] {
|
|
128
|
-
border: 1px solid ButtonText;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
/* Ensure focus is visible */
|
|
132
|
-
:focus-visible {
|
|
133
|
-
outline: 2px solid Highlight;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
139
|
/* ===== Visible Focus Indicator Utility ===== */
|
|
138
140
|
|
|
139
141
|
.focus-ring {
|
|
@@ -146,14 +148,22 @@
|
|
|
146
148
|
0 0 0 4px hsl(var(--ring));
|
|
147
149
|
}
|
|
148
150
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
151
|
+
/**
|
|
152
|
+
* Focus Hidden for Decorative Elements
|
|
153
|
+
*
|
|
154
|
+
* WARNING: Using this class on interactive elements violates WCAG 2.1 Level AA.
|
|
155
|
+
* This class should ONLY be used on:
|
|
156
|
+
* - Purely decorative, non-interactive elements
|
|
157
|
+
* - Elements with aria-hidden="true"
|
|
158
|
+
*
|
|
159
|
+
* For interactive elements that should not receive focus, use tabindex="-1" instead.
|
|
160
|
+
*/
|
|
161
|
+
.focus-hidden-for-decorative[aria-hidden='true'] {
|
|
152
162
|
outline: none !important;
|
|
153
163
|
box-shadow: none !important;
|
|
154
164
|
}
|
|
155
165
|
|
|
156
|
-
.
|
|
166
|
+
.focus-hidden-for-decorative[aria-hidden='true']:focus {
|
|
157
167
|
outline: none !important;
|
|
158
168
|
}
|
|
159
169
|
}
|