@oksigenia/access-panel 0.6.0 → 0.6.1
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/CHANGELOG.md +6 -0
- package/README.md +11 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +10 -6
- package/dist/index.js.map +1 -1
- package/dist/web-component.js +10 -6
- package/dist/web-component.js.map +1 -1
- package/package.json +1 -1
package/dist/web-component.js
CHANGED
|
@@ -1001,18 +1001,22 @@ body.oks-ls-1 * { letter-spacing: 0.05em !important; }
|
|
|
1001
1001
|
body.oks-ls-2 * { letter-spacing: 0.10em !important; }
|
|
1002
1002
|
body.oks-ls-3 * { letter-spacing: 0.16em !important; }
|
|
1003
1003
|
|
|
1004
|
+
/* Focus highlight colour is themeable via --oks-focus-color (default #005fcc):
|
|
1005
|
+
set it on :root for a dark theme so the highlight stays visible. The
|
|
1006
|
+
persistent "all interactive" dashed derives a 45% tint from it; the glow can
|
|
1007
|
+
be overridden on its own with --oks-focus-glow. */
|
|
1004
1008
|
body.oks-a11y-focus a:not(oksigenia-access-panel):not(oksigenia-access-panel *),
|
|
1005
1009
|
body.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-panel *),
|
|
1006
1010
|
body.oks-a11y-focus input,
|
|
1007
1011
|
body.oks-a11y-focus select,
|
|
1008
1012
|
body.oks-a11y-focus textarea {
|
|
1009
|
-
outline: 2px dashed
|
|
1013
|
+
outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
|
|
1010
1014
|
outline-offset: 2px !important;
|
|
1011
1015
|
}
|
|
1012
1016
|
body.oks-a11y-focus *:focus-visible {
|
|
1013
|
-
outline: 3px solid #005fcc !important;
|
|
1017
|
+
outline: 3px solid var(--oks-focus-color, #005fcc) !important;
|
|
1014
1018
|
outline-offset: 3px !important;
|
|
1015
|
-
box-shadow: 0 0 0 6px
|
|
1019
|
+
box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
|
|
1016
1020
|
}
|
|
1017
1021
|
|
|
1018
1022
|
body.oks-a11y-contrast.oks-a11y-focus *:focus,
|
|
@@ -1149,13 +1153,13 @@ ${s}.oks-a11y-focus button,
|
|
|
1149
1153
|
${s}.oks-a11y-focus input,
|
|
1150
1154
|
${s}.oks-a11y-focus select,
|
|
1151
1155
|
${s}.oks-a11y-focus textarea {
|
|
1152
|
-
outline: 2px dashed
|
|
1156
|
+
outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
|
|
1153
1157
|
outline-offset: 2px !important;
|
|
1154
1158
|
}
|
|
1155
1159
|
${s}.oks-a11y-focus *:focus-visible {
|
|
1156
|
-
outline: 3px solid #005fcc !important;
|
|
1160
|
+
outline: 3px solid var(--oks-focus-color, #005fcc) !important;
|
|
1157
1161
|
outline-offset: 3px !important;
|
|
1158
|
-
box-shadow: 0 0 0 6px
|
|
1162
|
+
box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
|
|
1159
1163
|
}
|
|
1160
1164
|
|
|
1161
1165
|
${s}.oks-a11y-contrast, ${s}.oks-a11y-contrast * {
|