ui-style-kit-css 1.2.1 → 1.2.2

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 (24) hide show
  1. package/CHANGELOG.md +18 -126
  2. package/CONTRIBUTING.md +24 -0
  3. package/README.md +94 -154
  4. package/SECURITY.md +18 -0
  5. package/STYLE-MAP.md +36 -0
  6. package/{index.html → demo/index.html} +6 -119
  7. package/dist/ui-style-kit.css +397 -28
  8. package/dist/ui-style-kit.min.css +1 -7
  9. package/docs/PUBLISHING.md +28 -0
  10. package/docs/STYLE-GUIDE.md +28 -0
  11. package/docs/TOKENS.md +71 -0
  12. package/package.json +78 -128
  13. package/styles/bauhaus.css +5 -2
  14. package/styles/bento.css +5 -2
  15. package/styles/brutalism.css +83 -2
  16. package/styles/cyberpunk.css +83 -2
  17. package/styles/maximalist.css +5 -2
  18. package/styles/minimal-saas.css +5 -2
  19. package/styles/neumorphism.css +5 -2
  20. package/styles/retro-glass.css +83 -2
  21. package/styles/retrofuturism.css +5 -2
  22. package/styles/tactile.css +5 -2
  23. package/styles/y2k.css +83 -2
  24. package/CODE_OF_CONDUCT.md +0 -64
package/styles/cyberpunk.css CHANGED
@@ -11,6 +11,8 @@
11
11
  <body data-ui="cyberpunk" data-theme="midnight-gold" data-mode="contrast">
12
12
  ========================================================= */
13
13
 
14
+
15
+ @layer ui-style-kit.cyberpunk {
14
16
  :root {
15
17
  --cyber-radius-xs: 0.25rem;
16
18
  --cyber-radius-sm: 0.5rem;
@@ -111,7 +113,7 @@
111
113
  --cyber-border-rgb: 214 200 165;
112
114
  --cyber-primary-rgb: 184 135 47;
113
115
  --cyber-primary-hover-rgb: 148 104 31;
114
- --cyber-primary-text-rgb: 255 255 255;
116
+ --cyber-primary-text-rgb: 16 16 16;
115
117
  --cyber-secondary-rgb: 34 49 79;
116
118
  --cyber-secondary-hover-rgb: 23 36 60;
117
119
  --cyber-secondary-text-rgb: 255 255 255;
@@ -671,7 +673,7 @@
671
673
  --cyber-border-rgb: 198 216 179;
672
674
  --cyber-primary-rgb: 95 159 31;
673
675
  --cyber-primary-hover-rgb: 73 125 23;
674
- --cyber-primary-text-rgb: 255 255 255;
676
+ --cyber-primary-text-rgb: 16 16 16;
675
677
  --cyber-secondary-rgb: 20 127 134;
676
678
  --cyber-secondary-hover-rgb: 14 98 104;
677
679
  --cyber-secondary-text-rgb: 255 255 255;
@@ -856,3 +858,82 @@
856
858
  .cyber-text-primary { color: var(--cyber-primary); } .cyber-text-secondary { color: var(--cyber-secondary); } .cyber-text-accent { color: var(--cyber-accent); } .cyber-text-success { color: var(--cyber-success); } .cyber-text-warning { color: var(--cyber-warning); } .cyber-text-danger { color: var(--cyber-danger); }
857
859
  [data-ui="cyberpunk"] :focus-visible { outline: 3px solid var(--cyber-focus); outline-offset: 3px; } .cyber-button:focus-visible, .cyber-icon-button:focus-visible, .cyber-input:focus-visible, .cyber-nav-link:focus-visible { box-shadow: 0 0 0 3px rgb(var(--cyber-focus-rgb) / .28), 0 0 28px rgb(var(--cyber-focus-rgb) / .28); }
858
860
  @media (prefers-reduced-motion: reduce) { [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
861
+
862
+ /* =========================================================
863
+ Native HTML Coverage + CSS Accessibility Layer
864
+ ========================================================= */
865
+
866
+ .cyber-sr-only,
867
+ .cyber-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
868
+ .cyber-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--cyber-primary); color: var(--cyber-primary-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-sm); box-shadow: var(--cyber-shadow-md); font-weight: 900; text-decoration: none; }
869
+ .cyber-skip-link:focus { transform: translateY(0); }
870
+ .cyber-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--cyber-border); }
871
+
872
+ [data-ui="cyberpunk"] :where(h1, h2, h3, h4, h5, h6) { color: var(--cyber-text); font-family: var(--cyber-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
873
+ [data-ui="cyberpunk"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
874
+ [data-ui="cyberpunk"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
875
+ [data-ui="cyberpunk"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
876
+ [data-ui="cyberpunk"] :where(p) { margin: 0 0 1rem; color: var(--cyber-text-muted); line-height: 1.7; }
877
+ [data-ui="cyberpunk"] :where(a) { color: var(--cyber-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
878
+ [data-ui="cyberpunk"] :where(a:hover) { color: var(--cyber-primary-hover); }
879
+ [data-ui="cyberpunk"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--cyber-text-muted); }
880
+ [data-ui="cyberpunk"] :where(li) { margin-block: .25rem; }
881
+ [data-ui="cyberpunk"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--cyber-text); background: var(--cyber-surface-soft); border-left: .35rem solid var(--cyber-primary); border-radius: var(--cyber-radius-md); }
882
+ [data-ui="cyberpunk"] :where(code, kbd, samp) { font-family: var(--cyber-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid rgb(var(--cyber-border-rgb) / .45); border-radius: var(--cyber-radius-xs); padding: .15em .35em; }
883
+ [data-ui="cyberpunk"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
884
+ [data-ui="cyberpunk"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
885
+ [data-ui="cyberpunk"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--cyber-border); }
886
+ [data-ui="cyberpunk"] :where(mark) { background: rgb(var(--cyber-warning-rgb) / .32); color: var(--cyber-text); border-radius: .2em; padding-inline: .15em; }
887
+ [data-ui="cyberpunk"] :where(small) { color: var(--cyber-text-muted); }
888
+ [data-ui="cyberpunk"] :where(abbr[title]) { text-decoration: underline dotted var(--cyber-primary); text-underline-offset: .18em; cursor: help; }
889
+ [data-ui="cyberpunk"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
890
+ [data-ui="cyberpunk"] :where(figure) { margin: 1.25rem 0; }
891
+ [data-ui="cyberpunk"] :where(figcaption) { margin-top: .5rem; color: var(--cyber-text-muted); font-size: .9rem; }
892
+ [data-ui="cyberpunk"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
893
+ [data-ui="cyberpunk"] :where(legend) { padding-inline: .35rem; color: var(--cyber-text); font-weight: 900; }
894
+ [data-ui="cyberpunk"] :where(label) { color: var(--cyber-text); font-weight: 750; }
895
+ [data-ui="cyberpunk"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--cyber-surface-soft); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); font: inherit; }
896
+ [data-ui="cyberpunk"] :where(textarea) { resize: vertical; min-height: 7rem; }
897
+ [data-ui="cyberpunk"] :where(input, textarea, select, button) { font: inherit; }
898
+ [data-ui="cyberpunk"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--cyber-primary); color: var(--cyber-primary-text); border: 1px solid var(--cyber-primary); border-radius: var(--cyber-radius-md); font-weight: 850; cursor: pointer; }
899
+ [data-ui="cyberpunk"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--cyber-primary-hover); border-color: var(--cyber-primary-hover); }
900
+ [data-ui="cyberpunk"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--cyber-primary); }
901
+ [data-ui="cyberpunk"] :where(input[type="range"]) { width: 100%; accent-color: var(--cyber-primary); }
902
+ [data-ui="cyberpunk"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--cyber-surface-soft); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-sm); }
903
+ [data-ui="cyberpunk"] :where(input[type="file"]) { color: var(--cyber-text-muted); }
904
+ [data-ui="cyberpunk"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--cyber-primary); border-radius: var(--cyber-radius-sm); background: var(--cyber-primary); color: var(--cyber-primary-text); font-weight: 800; cursor: pointer; }
905
+ [data-ui="cyberpunk"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
906
+ [data-ui="cyberpunk"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--cyber-danger); }
907
+ [data-ui="cyberpunk"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); overflow: hidden; }
908
+ [data-ui="cyberpunk"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--cyber-text-muted); font-size: .9rem; }
909
+ [data-ui="cyberpunk"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--cyber-border); }
910
+ [data-ui="cyberpunk"] :where(th) { color: var(--cyber-text); background: rgb(var(--cyber-primary-rgb) / .08); }
911
+ [data-ui="cyberpunk"] :where(td) { color: var(--cyber-text-muted); }
912
+ [data-ui="cyberpunk"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--cyber-surface); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-md); }
913
+ [data-ui="cyberpunk"] :where(summary) { color: var(--cyber-text); font-weight: 900; cursor: pointer; }
914
+ [data-ui="cyberpunk"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--cyber-surface-strong); color: var(--cyber-text); border: 1px solid var(--cyber-border); border-radius: var(--cyber-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
915
+ [data-ui="cyberpunk"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
916
+ [data-ui="cyberpunk"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--cyber-primary); }
917
+ [data-ui="cyberpunk"] :where(:focus-visible) { outline: 3px solid var(--cyber-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--cyber-focus-rgb) / .28); }
918
+ [data-ui="cyberpunk"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--cyber-focus); outline-offset: .35rem; }
919
+ [data-ui="cyberpunk"] :where([aria-current="page"]) { font-weight: 900; }
920
+ [data-ui="cyberpunk"] :where([aria-busy="true"]) { cursor: progress; }
921
+ [data-ui="cyberpunk"] :where([hidden]) { display: none !important; }
922
+ [data-ui="cyberpunk"] ::selection { background: var(--cyber-primary); color: var(--cyber-primary-text); }
923
+
924
+ @media (prefers-reduced-motion: reduce) {
925
+ [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
926
+ }
927
+ @media (prefers-contrast: more) {
928
+ [data-ui="cyberpunk"] { --cyber-border-alpha: 1; }
929
+ }
930
+ @media (forced-colors: active) {
931
+ [data-ui="cyberpunk"] * { forced-color-adjust: auto; }
932
+ [data-ui="cyberpunk"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
933
+ }
934
+ @media print {
935
+ [data-ui="cyberpunk"] { background: #fff !important; color: #000 !important; }
936
+ [data-ui="cyberpunk"] * { box-shadow: none !important; text-shadow: none !important; }
937
+ [data-ui="cyberpunk"] a { color: #000 !important; text-decoration: underline; }
938
+ }
939
+ }
package/styles/maximalist.css CHANGED
@@ -10,6 +10,8 @@
10
10
  <body data-ui="maximalist" data-theme="cyber-lime" data-mode="contrast">
11
11
  ========================================================= */
12
12
 
13
+
14
+ @layer ui-style-kit.maximalist {
13
15
  :root {
14
16
  --max-font-sans: Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
15
17
  --max-font-display: Cooper Black, Baloo 2, Nunito, Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
90
92
  --max-border-rgb: 214 200 165;
91
93
  --max-primary-rgb: 184 135 47;
92
94
  --max-primary-hover-rgb: 148 104 31;
93
- --max-primary-text-rgb: 255 255 255;
95
+ --max-primary-text-rgb: 16 16 16;
94
96
  --max-secondary-rgb: 34 49 79;
95
97
  --max-secondary-hover-rgb: 23 36 60;
96
98
  --max-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
618
620
  --max-border-rgb: 198 216 179;
619
621
  --max-primary-rgb: 95 159 31;
620
622
  --max-primary-hover-rgb: 73 125 23;
621
- --max-primary-text-rgb: 255 255 255;
623
+ --max-primary-text-rgb: 16 16 16;
622
624
  --max-secondary-rgb: 20 127 134;
623
625
  --max-secondary-hover-rgb: 14 98 104;
624
626
  --max-secondary-text-rgb: 255 255 255;
@@ -976,3 +978,4 @@
976
978
  [data-ui="maximalist"] * { box-shadow: none !important; text-shadow: none !important; }
977
979
  [data-ui="maximalist"] a { color: #000 !important; text-decoration: underline; }
978
980
  }
981
+ }
package/styles/minimal-saas.css CHANGED
@@ -10,6 +10,8 @@
10
10
  <body data-ui="minimal-saas" data-theme="cyber-lime" data-mode="contrast">
11
11
  ========================================================= */
12
12
 
13
+
14
+ @layer ui-style-kit.minimal_saas {
13
15
  :root {
14
16
  --saas-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
15
17
  --saas-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
90
92
  --saas-border-rgb: 214 200 165;
91
93
  --saas-primary-rgb: 184 135 47;
92
94
  --saas-primary-hover-rgb: 148 104 31;
93
- --saas-primary-text-rgb: 255 255 255;
95
+ --saas-primary-text-rgb: 16 16 16;
94
96
  --saas-secondary-rgb: 34 49 79;
95
97
  --saas-secondary-hover-rgb: 23 36 60;
96
98
  --saas-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
618
620
  --saas-border-rgb: 198 216 179;
619
621
  --saas-primary-rgb: 95 159 31;
620
622
  --saas-primary-hover-rgb: 73 125 23;
621
- --saas-primary-text-rgb: 255 255 255;
623
+ --saas-primary-text-rgb: 16 16 16;
622
624
  --saas-secondary-rgb: 20 127 134;
623
625
  --saas-secondary-hover-rgb: 14 98 104;
624
626
  --saas-secondary-text-rgb: 255 255 255;
@@ -976,3 +978,4 @@
976
978
  [data-ui="minimal-saas"] * { box-shadow: none !important; text-shadow: none !important; }
977
979
  [data-ui="minimal-saas"] a { color: #000 !important; text-decoration: underline; }
978
980
  }
981
+ }
package/styles/neumorphism.css CHANGED
@@ -10,6 +10,8 @@
10
10
  <body data-ui="neumorphism" data-theme="cyber-lime" data-mode="contrast">
11
11
  ========================================================= */
12
12
 
13
+
14
+ @layer ui-style-kit.neumorphism {
13
15
  :root {
14
16
  --neo-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
15
17
  --neo-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
90
92
  --neo-border-rgb: 214 200 165;
91
93
  --neo-primary-rgb: 184 135 47;
92
94
  --neo-primary-hover-rgb: 148 104 31;
93
- --neo-primary-text-rgb: 255 255 255;
95
+ --neo-primary-text-rgb: 16 16 16;
94
96
  --neo-secondary-rgb: 34 49 79;
95
97
  --neo-secondary-hover-rgb: 23 36 60;
96
98
  --neo-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
618
620
  --neo-border-rgb: 198 216 179;
619
621
  --neo-primary-rgb: 95 159 31;
620
622
  --neo-primary-hover-rgb: 73 125 23;
621
- --neo-primary-text-rgb: 255 255 255;
623
+ --neo-primary-text-rgb: 16 16 16;
622
624
  --neo-secondary-rgb: 20 127 134;
623
625
  --neo-secondary-hover-rgb: 14 98 104;
624
626
  --neo-secondary-text-rgb: 255 255 255;
@@ -1005,3 +1007,4 @@
1005
1007
  [data-ui="neumorphism"] * { box-shadow: none !important; text-shadow: none !important; }
1006
1008
  [data-ui="neumorphism"] a { color: #000 !important; text-decoration: underline; }
1007
1009
  }
1010
+ }
package/styles/retro-glass.css CHANGED
@@ -11,6 +11,8 @@
11
11
  <body data-ui="retro-glass" data-theme="midnight-gold" data-mode="contrast">
12
12
  ========================================================= */
13
13
 
14
+
15
+ @layer ui-style-kit.retro_glass {
14
16
  :root {
15
17
  --rg-radius-xs: 0.25rem;
16
18
  --rg-radius-sm: 0.5rem;
@@ -111,7 +113,7 @@
111
113
  --rg-border-rgb: 214 200 165;
112
114
  --rg-primary-rgb: 184 135 47;
113
115
  --rg-primary-hover-rgb: 148 104 31;
114
- --rg-primary-text-rgb: 255 255 255;
116
+ --rg-primary-text-rgb: 16 16 16;
115
117
  --rg-secondary-rgb: 34 49 79;
116
118
  --rg-secondary-hover-rgb: 23 36 60;
117
119
  --rg-secondary-text-rgb: 255 255 255;
@@ -671,7 +673,7 @@
671
673
  --rg-border-rgb: 198 216 179;
672
674
  --rg-primary-rgb: 95 159 31;
673
675
  --rg-primary-hover-rgb: 73 125 23;
674
- --rg-primary-text-rgb: 255 255 255;
676
+ --rg-primary-text-rgb: 16 16 16;
675
677
  --rg-secondary-rgb: 20 127 134;
676
678
  --rg-secondary-hover-rgb: 14 98 104;
677
679
  --rg-secondary-text-rgb: 255 255 255;
@@ -838,3 +840,82 @@
838
840
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-ui="retro-glass"] { --rg-panel-alpha: .96; --rg-panel-strong-alpha: 1; --rg-panel-soft-alpha: .9; } }
839
841
  [data-ui="retro-glass"] :focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; }
840
842
  @media (prefers-reduced-motion: reduce) { [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
843
+
844
+ /* =========================================================
845
+ Native HTML Coverage + CSS Accessibility Layer
846
+ ========================================================= */
847
+
848
+ .rg-sr-only,
849
+ .rg-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
850
+ .rg-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); box-shadow: var(--rg-shadow-md); font-weight: 900; text-decoration: none; }
851
+ .rg-skip-link:focus { transform: translateY(0); }
852
+ .rg-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--rg-border); }
853
+
854
+ [data-ui="retro-glass"] :where(h1, h2, h3, h4, h5, h6) { color: var(--rg-text); font-family: var(--rg-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
855
+ [data-ui="retro-glass"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
856
+ [data-ui="retro-glass"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
857
+ [data-ui="retro-glass"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
858
+ [data-ui="retro-glass"] :where(p) { margin: 0 0 1rem; color: var(--rg-text-muted); line-height: 1.7; }
859
+ [data-ui="retro-glass"] :where(a) { color: var(--rg-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
860
+ [data-ui="retro-glass"] :where(a:hover) { color: var(--rg-primary-hover); }
861
+ [data-ui="retro-glass"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--rg-text-muted); }
862
+ [data-ui="retro-glass"] :where(li) { margin-block: .25rem; }
863
+ [data-ui="retro-glass"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--rg-text); background: var(--rg-surface-soft); border-left: .35rem solid var(--rg-primary); border-radius: var(--rg-radius-md); }
864
+ [data-ui="retro-glass"] :where(code, kbd, samp) { font-family: var(--rg-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .45); border-radius: var(--rg-radius-xs); padding: .15em .35em; }
865
+ [data-ui="retro-glass"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
866
+ [data-ui="retro-glass"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
867
+ [data-ui="retro-glass"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--rg-border); }
868
+ [data-ui="retro-glass"] :where(mark) { background: rgb(var(--rg-warning-rgb) / .32); color: var(--rg-text); border-radius: .2em; padding-inline: .15em; }
869
+ [data-ui="retro-glass"] :where(small) { color: var(--rg-text-muted); }
870
+ [data-ui="retro-glass"] :where(abbr[title]) { text-decoration: underline dotted var(--rg-primary); text-underline-offset: .18em; cursor: help; }
871
+ [data-ui="retro-glass"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
872
+ [data-ui="retro-glass"] :where(figure) { margin: 1.25rem 0; }
873
+ [data-ui="retro-glass"] :where(figcaption) { margin-top: .5rem; color: var(--rg-text-muted); font-size: .9rem; }
874
+ [data-ui="retro-glass"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
875
+ [data-ui="retro-glass"] :where(legend) { padding-inline: .35rem; color: var(--rg-text); font-weight: 900; }
876
+ [data-ui="retro-glass"] :where(label) { color: var(--rg-text); font-weight: 750; }
877
+ [data-ui="retro-glass"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--rg-surface-soft); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); font: inherit; }
878
+ [data-ui="retro-glass"] :where(textarea) { resize: vertical; min-height: 7rem; }
879
+ [data-ui="retro-glass"] :where(input, textarea, select, button) { font: inherit; }
880
+ [data-ui="retro-glass"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--rg-primary); color: var(--rg-primary-text); border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-md); font-weight: 850; cursor: pointer; }
881
+ [data-ui="retro-glass"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--rg-primary-hover); border-color: var(--rg-primary-hover); }
882
+ [data-ui="retro-glass"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--rg-primary); }
883
+ [data-ui="retro-glass"] :where(input[type="range"]) { width: 100%; accent-color: var(--rg-primary); }
884
+ [data-ui="retro-glass"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--rg-surface-soft); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-sm); }
885
+ [data-ui="retro-glass"] :where(input[type="file"]) { color: var(--rg-text-muted); }
886
+ [data-ui="retro-glass"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--rg-primary); border-radius: var(--rg-radius-sm); background: var(--rg-primary); color: var(--rg-primary-text); font-weight: 800; cursor: pointer; }
887
+ [data-ui="retro-glass"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
888
+ [data-ui="retro-glass"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--rg-danger); }
889
+ [data-ui="retro-glass"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); overflow: hidden; }
890
+ [data-ui="retro-glass"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--rg-text-muted); font-size: .9rem; }
891
+ [data-ui="retro-glass"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--rg-border); }
892
+ [data-ui="retro-glass"] :where(th) { color: var(--rg-text); background: rgb(var(--rg-primary-rgb) / .08); }
893
+ [data-ui="retro-glass"] :where(td) { color: var(--rg-text-muted); }
894
+ [data-ui="retro-glass"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-md); }
895
+ [data-ui="retro-glass"] :where(summary) { color: var(--rg-text); font-weight: 900; cursor: pointer; }
896
+ [data-ui="retro-glass"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--rg-surface-strong); color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
897
+ [data-ui="retro-glass"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
898
+ [data-ui="retro-glass"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--rg-primary); }
899
+ [data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--rg-focus-rgb) / .28); }
900
+ [data-ui="retro-glass"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--rg-focus); outline-offset: .35rem; }
901
+ [data-ui="retro-glass"] :where([aria-current="page"]) { font-weight: 900; }
902
+ [data-ui="retro-glass"] :where([aria-busy="true"]) { cursor: progress; }
903
+ [data-ui="retro-glass"] :where([hidden]) { display: none !important; }
904
+ [data-ui="retro-glass"] ::selection { background: var(--rg-primary); color: var(--rg-primary-text); }
905
+
906
+ @media (prefers-reduced-motion: reduce) {
907
+ [data-ui="retro-glass"] *, [data-ui="retro-glass"] *::before, [data-ui="retro-glass"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
908
+ }
909
+ @media (prefers-contrast: more) {
910
+ [data-ui="retro-glass"] { --rg-border-alpha: 1; }
911
+ }
912
+ @media (forced-colors: active) {
913
+ [data-ui="retro-glass"] * { forced-color-adjust: auto; }
914
+ [data-ui="retro-glass"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
915
+ }
916
+ @media print {
917
+ [data-ui="retro-glass"] { background: #fff !important; color: #000 !important; }
918
+ [data-ui="retro-glass"] * { box-shadow: none !important; text-shadow: none !important; }
919
+ [data-ui="retro-glass"] a { color: #000 !important; text-decoration: underline; }
920
+ }
921
+ }
package/styles/retrofuturism.css CHANGED
@@ -10,6 +10,8 @@
10
10
  <body data-ui="retrofuturism" data-theme="cyber-lime" data-mode="contrast">
11
11
  ========================================================= */
12
12
 
13
+
14
+ @layer ui-style-kit.retrofuturism {
13
15
  :root {
14
16
  --retro-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
15
17
  --retro-font-display: Orbitron, Eurostile, "Bank Gothic", Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
90
92
  --retro-border-rgb: 214 200 165;
91
93
  --retro-primary-rgb: 184 135 47;
92
94
  --retro-primary-hover-rgb: 148 104 31;
93
- --retro-primary-text-rgb: 255 255 255;
95
+ --retro-primary-text-rgb: 16 16 16;
94
96
  --retro-secondary-rgb: 34 49 79;
95
97
  --retro-secondary-hover-rgb: 23 36 60;
96
98
  --retro-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
618
620
  --retro-border-rgb: 198 216 179;
619
621
  --retro-primary-rgb: 95 159 31;
620
622
  --retro-primary-hover-rgb: 73 125 23;
621
- --retro-primary-text-rgb: 255 255 255;
623
+ --retro-primary-text-rgb: 16 16 16;
622
624
  --retro-secondary-rgb: 20 127 134;
623
625
  --retro-secondary-hover-rgb: 14 98 104;
624
626
  --retro-secondary-text-rgb: 255 255 255;
@@ -1013,3 +1015,4 @@
1013
1015
  [data-ui="retrofuturism"] * { box-shadow: none !important; text-shadow: none !important; }
1014
1016
  [data-ui="retrofuturism"] a { color: #000 !important; text-decoration: underline; }
1015
1017
  }
1018
+ }
package/styles/tactile.css CHANGED
@@ -10,6 +10,8 @@
10
10
  <body data-ui="tactile" data-theme="cyber-lime" data-mode="contrast">
11
11
  ========================================================= */
12
12
 
13
+
14
+ @layer ui-style-kit.tactile {
13
15
  :root {
14
16
  --tactile-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
15
17
  --tactile-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
@@ -90,7 +92,7 @@
90
92
  --tactile-border-rgb: 214 200 165;
91
93
  --tactile-primary-rgb: 184 135 47;
92
94
  --tactile-primary-hover-rgb: 148 104 31;
93
- --tactile-primary-text-rgb: 255 255 255;
95
+ --tactile-primary-text-rgb: 16 16 16;
94
96
  --tactile-secondary-rgb: 34 49 79;
95
97
  --tactile-secondary-hover-rgb: 23 36 60;
96
98
  --tactile-secondary-text-rgb: 255 255 255;
@@ -618,7 +620,7 @@
618
620
  --tactile-border-rgb: 198 216 179;
619
621
  --tactile-primary-rgb: 95 159 31;
620
622
  --tactile-primary-hover-rgb: 73 125 23;
621
- --tactile-primary-text-rgb: 255 255 255;
623
+ --tactile-primary-text-rgb: 16 16 16;
622
624
  --tactile-secondary-rgb: 20 127 134;
623
625
  --tactile-secondary-hover-rgb: 14 98 104;
624
626
  --tactile-secondary-text-rgb: 255 255 255;
@@ -975,3 +977,4 @@
975
977
  [data-ui="tactile"] * { box-shadow: none !important; text-shadow: none !important; }
976
978
  [data-ui="tactile"] a { color: #000 !important; text-decoration: underline; }
977
979
  }
980
+ }
package/styles/y2k.css CHANGED
@@ -11,6 +11,8 @@
11
11
  <body data-ui="y2k" data-theme="midnight-gold" data-mode="contrast">
12
12
  ========================================================= */
13
13
 
14
+
15
+ @layer ui-style-kit.y2k {
14
16
  :root {
15
17
  --y2k-radius-xs: 0.25rem;
16
18
  --y2k-radius-sm: 0.5rem;
@@ -111,7 +113,7 @@
111
113
  --y2k-border-rgb: 214 200 165;
112
114
  --y2k-primary-rgb: 184 135 47;
113
115
  --y2k-primary-hover-rgb: 148 104 31;
114
- --y2k-primary-text-rgb: 255 255 255;
116
+ --y2k-primary-text-rgb: 16 16 16;
115
117
  --y2k-secondary-rgb: 34 49 79;
116
118
  --y2k-secondary-hover-rgb: 23 36 60;
117
119
  --y2k-secondary-text-rgb: 255 255 255;
@@ -671,7 +673,7 @@
671
673
  --y2k-border-rgb: 198 216 179;
672
674
  --y2k-primary-rgb: 95 159 31;
673
675
  --y2k-primary-hover-rgb: 73 125 23;
674
- --y2k-primary-text-rgb: 255 255 255;
676
+ --y2k-primary-text-rgb: 16 16 16;
675
677
  --y2k-secondary-rgb: 20 127 134;
676
678
  --y2k-secondary-hover-rgb: 14 98 104;
677
679
  --y2k-secondary-text-rgb: 255 255 255;
@@ -837,3 +839,82 @@
837
839
  .y2k-text-primary { color: var(--y2k-primary); } .y2k-text-secondary { color: var(--y2k-secondary); } .y2k-text-accent { color: var(--y2k-accent); } .y2k-text-success { color: var(--y2k-success); } .y2k-text-warning { color: var(--y2k-warning); } .y2k-text-danger { color: var(--y2k-danger); }
838
840
  [data-ui="y2k"] :focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; }
839
841
  @media (prefers-reduced-motion: reduce) { [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
842
+
843
+ /* =========================================================
844
+ Native HTML Coverage + CSS Accessibility Layer
845
+ ========================================================= */
846
+
847
+ .y2k-sr-only,
848
+ .y2k-visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
849
+ .y2k-skip-link { position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 10000; transform: translateY(-150%); padding: .75rem 1rem; background: var(--y2k-primary); color: var(--y2k-primary-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-sm); box-shadow: var(--y2k-shadow-md); font-weight: 900; text-decoration: none; }
850
+ .y2k-skip-link:focus { transform: translateY(0); }
851
+ .y2k-divider { width: 100%; height: 1px; border: 0; margin: 1.5rem 0; background: var(--y2k-border); }
852
+
853
+ [data-ui="y2k"] :where(h1, h2, h3, h4, h5, h6) { color: var(--y2k-text); font-family: var(--y2k-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
854
+ [data-ui="y2k"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
855
+ [data-ui="y2k"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
856
+ [data-ui="y2k"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
857
+ [data-ui="y2k"] :where(p) { margin: 0 0 1rem; color: var(--y2k-text-muted); line-height: 1.7; }
858
+ [data-ui="y2k"] :where(a) { color: var(--y2k-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
859
+ [data-ui="y2k"] :where(a:hover) { color: var(--y2k-primary-hover); }
860
+ [data-ui="y2k"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--y2k-text-muted); }
861
+ [data-ui="y2k"] :where(li) { margin-block: .25rem; }
862
+ [data-ui="y2k"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--y2k-text); background: var(--y2k-surface-soft); border-left: .35rem solid var(--y2k-primary); border-radius: var(--y2k-radius-md); }
863
+ [data-ui="y2k"] :where(code, kbd, samp) { font-family: var(--y2k-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace); font-size: .92em; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid rgb(var(--y2k-border-rgb) / .45); border-radius: var(--y2k-radius-xs); padding: .15em .35em; }
864
+ [data-ui="y2k"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
865
+ [data-ui="y2k"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
866
+ [data-ui="y2k"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--y2k-border); }
867
+ [data-ui="y2k"] :where(mark) { background: rgb(var(--y2k-warning-rgb) / .32); color: var(--y2k-text); border-radius: .2em; padding-inline: .15em; }
868
+ [data-ui="y2k"] :where(small) { color: var(--y2k-text-muted); }
869
+ [data-ui="y2k"] :where(abbr[title]) { text-decoration: underline dotted var(--y2k-primary); text-underline-offset: .18em; cursor: help; }
870
+ [data-ui="y2k"] :where(img, picture, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
871
+ [data-ui="y2k"] :where(figure) { margin: 1.25rem 0; }
872
+ [data-ui="y2k"] :where(figcaption) { margin-top: .5rem; color: var(--y2k-text-muted); font-size: .9rem; }
873
+ [data-ui="y2k"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
874
+ [data-ui="y2k"] :where(legend) { padding-inline: .35rem; color: var(--y2k-text); font-weight: 900; }
875
+ [data-ui="y2k"] :where(label) { color: var(--y2k-text); font-weight: 750; }
876
+ [data-ui="y2k"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); font: inherit; }
877
+ [data-ui="y2k"] :where(textarea) { resize: vertical; min-height: 7rem; }
878
+ [data-ui="y2k"] :where(input, textarea, select, button) { font: inherit; }
879
+ [data-ui="y2k"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--y2k-primary); color: var(--y2k-primary-text); border: 1px solid var(--y2k-primary); border-radius: var(--y2k-radius-md); font-weight: 850; cursor: pointer; }
880
+ [data-ui="y2k"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--y2k-primary-hover); border-color: var(--y2k-primary-hover); }
881
+ [data-ui="y2k"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--y2k-primary); }
882
+ [data-ui="y2k"] :where(input[type="range"]) { width: 100%; accent-color: var(--y2k-primary); }
883
+ [data-ui="y2k"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--y2k-surface-soft); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-sm); }
884
+ [data-ui="y2k"] :where(input[type="file"]) { color: var(--y2k-text-muted); }
885
+ [data-ui="y2k"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--y2k-primary); border-radius: var(--y2k-radius-sm); background: var(--y2k-primary); color: var(--y2k-primary-text); font-weight: 800; cursor: pointer; }
886
+ [data-ui="y2k"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
887
+ [data-ui="y2k"] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) { border-color: var(--y2k-danger); }
888
+ [data-ui="y2k"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--y2k-surface); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); overflow: hidden; }
889
+ [data-ui="y2k"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--y2k-text-muted); font-size: .9rem; }
890
+ [data-ui="y2k"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--y2k-border); }
891
+ [data-ui="y2k"] :where(th) { color: var(--y2k-text); background: rgb(var(--y2k-primary-rgb) / .08); }
892
+ [data-ui="y2k"] :where(td) { color: var(--y2k-text-muted); }
893
+ [data-ui="y2k"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--y2k-surface); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-md); }
894
+ [data-ui="y2k"] :where(summary) { color: var(--y2k-text); font-weight: 900; cursor: pointer; }
895
+ [data-ui="y2k"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid var(--y2k-border); border-radius: var(--y2k-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
896
+ [data-ui="y2k"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
897
+ [data-ui="y2k"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--y2k-primary); }
898
+ [data-ui="y2k"] :where(:focus-visible) { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: 0 0 0 4px rgb(var(--y2k-focus-rgb) / .28); }
899
+ [data-ui="y2k"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--y2k-focus); outline-offset: .35rem; }
900
+ [data-ui="y2k"] :where([aria-current="page"]) { font-weight: 900; }
901
+ [data-ui="y2k"] :where([aria-busy="true"]) { cursor: progress; }
902
+ [data-ui="y2k"] :where([hidden]) { display: none !important; }
903
+ [data-ui="y2k"] ::selection { background: var(--y2k-primary); color: var(--y2k-primary-text); }
904
+
905
+ @media (prefers-reduced-motion: reduce) {
906
+ [data-ui="y2k"] *, [data-ui="y2k"] *::before, [data-ui="y2k"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
907
+ }
908
+ @media (prefers-contrast: more) {
909
+ [data-ui="y2k"] { --y2k-border-alpha: 1; }
910
+ }
911
+ @media (forced-colors: active) {
912
+ [data-ui="y2k"] * { forced-color-adjust: auto; }
913
+ [data-ui="y2k"] :where(:focus-visible) { outline: 3px solid CanvasText; box-shadow: none; }
914
+ }
915
+ @media print {
916
+ [data-ui="y2k"] { background: #fff !important; color: #000 !important; }
917
+ [data-ui="y2k"] * { box-shadow: none !important; text-shadow: none !important; }
918
+ [data-ui="y2k"] a { color: #000 !important; text-decoration: underline; }
919
+ }
920
+ }
package/CODE_OF_CONDUCT.md DELETED
@@ -1,64 +0,0 @@
1
- # Code of Conduct
2
-
3
- ## Our Pledge
4
-
5
- We are committed to making participation in this project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity or expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
6
-
7
- We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
8
-
9
- ## Our Standards
10
-
11
- Examples of behavior that contributes to a positive environment include:
12
-
13
- - Using welcoming and inclusive language
14
- - Respecting different viewpoints and experiences
15
- - Giving and accepting constructive feedback
16
- - Focusing on what is best for the community and the project
17
- - Showing empathy and kindness toward other community members
18
-
19
- Examples of unacceptable behavior include:
20
-
21
- - Sexualized language or imagery, and unwelcome sexual attention or advances
22
- - Trolling, insulting or derogatory comments, and personal or political attacks
23
- - Public or private harassment
24
- - Publishing others' private information, such as a physical or email address, without explicit permission
25
- - Other conduct that could reasonably be considered inappropriate in a professional setting
26
-
27
- ## Enforcement Responsibilities
28
-
29
- Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to behavior they deem inappropriate, threatening, offensive, or harmful.
30
-
31
- Maintainers may remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned with this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
32
-
33
- ## Scope
34
-
35
- This Code of Conduct applies within all project spaces and also applies when an individual is officially representing the project in public spaces. Examples include using an official project email address, posting via official social channels, or acting as an appointed representative at events.
36
-
37
- ## Reporting
38
-
39
- If you experience or witness unacceptable behavior, report it to the maintainers as soon as possible.
40
-
41
- - Preferred contact: [Foscat](https://github.com/Foscat) or [Email Me](mailto:fosterkyle6456@gmail.com)
42
- - Alternative: open a private report through repository maintainers on GitHub
43
-
44
- All reports will be reviewed promptly and handled with care and discretion. Maintainers will respect the privacy and security of the reporter to the extent possible.
45
-
46
- ## Enforcement Guidelines
47
-
48
- Maintainers may follow these Community Impact Guidelines when determining consequences:
49
-
50
- 1. Correction
51
- For minor or first-time issues, maintainers may provide a private written warning with clarification of expected behavior.
52
-
53
- 2. Warning
54
- For a violation involving a single incident or a pattern of behavior, maintainers may issue a warning with clear consequences for continued behavior.
55
-
56
- 3. Temporary Ban
57
- For serious or repeated violations, maintainers may impose a temporary ban from community interaction and project participation.
58
-
59
- 4. Permanent Ban
60
- For sustained inappropriate behavior, harassment, or threats to community safety, maintainers may impose a permanent ban from any sort of public interaction within the project.
61
-
62
- ## Attribution
63
-
64
- This Code of Conduct is informed by the Contributor Covenant and common open source community moderation practices.