ui-style-kit-css 1.0.4 → 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.
- package/CHANGELOG.md +16 -57
- package/CONTRIBUTING.md +24 -0
- package/README.md +102 -140
- package/SECURITY.md +18 -0
- package/STYLE-MAP.md +36 -0
- package/{index.html → demo/index.html} +6 -119
- package/dist/ui-style-kit.css +739 -28
- package/dist/ui-style-kit.min.css +1 -7
- package/docs/PUBLISHING.md +28 -0
- package/docs/STYLE-GUIDE.md +28 -0
- package/docs/TOKENS.md +71 -0
- package/package.json +80 -128
- package/styles/bauhaus.css +5 -2
- package/styles/bento.css +5 -2
- package/styles/brutalism.css +83 -2
- package/styles/cyberpunk.css +83 -2
- package/styles/interactive-surface-bridge.css +341 -0
- package/styles/maximalist.css +5 -2
- package/styles/minimal-saas.css +5 -2
- package/styles/neumorphism.css +5 -2
- package/styles/retro-glass.css +83 -2
- package/styles/retrofuturism.css +5 -2
- package/styles/tactile.css +5 -2
- package/styles/y2k.css +83 -2
- 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:
|
|
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:
|
|
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
|
+
}
|
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
/* =========================================================
|
|
2
|
+
UI Style Kit CSS x Interactive Surface CSS Bridge
|
|
3
|
+
|
|
4
|
+
This optional bridge maps UI Style Kit semantic tokens to
|
|
5
|
+
interactive-surface-css tokens so both libraries can be
|
|
6
|
+
used together without per-theme overrides.
|
|
7
|
+
========================================================= */
|
|
8
|
+
|
|
9
|
+
:where([data-ui][data-theme][data-mode]) .interactive-surface {
|
|
10
|
+
--interactive-surface-border-width: 1px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where([data-ui="minimal-saas"][data-theme][data-mode]) .interactive-surface {
|
|
14
|
+
--interactive-surface-bg: var(--saas-surface-strong, var(--saas-surface, var(--saas-bg)));
|
|
15
|
+
--interactive-surface-fg: var(--saas-text);
|
|
16
|
+
--interactive-surface-border-color: var(--saas-border);
|
|
17
|
+
--interactive-surface-focus-ring-color: var(--saas-focus, var(--saas-accent, var(--saas-primary)));
|
|
18
|
+
--interactive-surface-radius: var(--saas-radius-md, 0.75rem);
|
|
19
|
+
--interactive-surface-state-layer-color: var(--saas-text);
|
|
20
|
+
--interactive-surface-light-icon-color: var(--saas-warning, var(--saas-accent));
|
|
21
|
+
--interactive-surface-dark-icon-color: var(--saas-text);
|
|
22
|
+
--interactive-surface-accessibility-icon-color: var(--saas-focus, var(--saas-accent));
|
|
23
|
+
--interactive-surface-light-icon-color-dark: var(--saas-warning, var(--saas-accent));
|
|
24
|
+
--interactive-surface-dark-icon-color-dark: var(--saas-text);
|
|
25
|
+
--interactive-surface-accessibility-icon-color-dark: var(--saas-focus, var(--saas-accent));
|
|
26
|
+
--interactive-surface-variant-primary-bg: var(--saas-primary);
|
|
27
|
+
--interactive-surface-variant-primary-fg: var(--saas-primary-text, var(--saas-bg));
|
|
28
|
+
--interactive-surface-variant-primary-border-color: var(--saas-primary);
|
|
29
|
+
--interactive-surface-variant-secondary-bg: var(--saas-secondary);
|
|
30
|
+
--interactive-surface-variant-secondary-fg: var(--saas-secondary-text, var(--saas-bg));
|
|
31
|
+
--interactive-surface-variant-secondary-border-color: var(--saas-secondary);
|
|
32
|
+
--interactive-surface-variant-accent-bg: var(--saas-accent);
|
|
33
|
+
--interactive-surface-variant-accent-border-color: var(--saas-accent);
|
|
34
|
+
--interactive-surface-variant-subtle-bg: var(--saas-surface-soft, var(--saas-surface));
|
|
35
|
+
--interactive-surface-variant-subtle-fg: var(--saas-text);
|
|
36
|
+
--interactive-surface-variant-subtle-border-color: var(--saas-border);
|
|
37
|
+
--interactive-surface-variant-warning-bg: var(--saas-warning);
|
|
38
|
+
--interactive-surface-variant-warning-border-color: var(--saas-warning);
|
|
39
|
+
--interactive-surface-variant-danger-bg: var(--saas-danger);
|
|
40
|
+
--interactive-surface-variant-danger-border-color: var(--saas-danger);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:where([data-ui="bento"][data-theme][data-mode]) .interactive-surface {
|
|
44
|
+
--interactive-surface-bg: var(--bento-surface-strong, var(--bento-surface, var(--bento-bg)));
|
|
45
|
+
--interactive-surface-fg: var(--bento-text);
|
|
46
|
+
--interactive-surface-border-color: var(--bento-border);
|
|
47
|
+
--interactive-surface-focus-ring-color: var(--bento-focus, var(--bento-accent, var(--bento-primary)));
|
|
48
|
+
--interactive-surface-radius: var(--bento-radius-md, 0.75rem);
|
|
49
|
+
--interactive-surface-state-layer-color: var(--bento-text);
|
|
50
|
+
--interactive-surface-light-icon-color: var(--bento-warning, var(--bento-accent));
|
|
51
|
+
--interactive-surface-dark-icon-color: var(--bento-text);
|
|
52
|
+
--interactive-surface-accessibility-icon-color: var(--bento-focus, var(--bento-accent));
|
|
53
|
+
--interactive-surface-light-icon-color-dark: var(--bento-warning, var(--bento-accent));
|
|
54
|
+
--interactive-surface-dark-icon-color-dark: var(--bento-text);
|
|
55
|
+
--interactive-surface-accessibility-icon-color-dark: var(--bento-focus, var(--bento-accent));
|
|
56
|
+
--interactive-surface-variant-primary-bg: var(--bento-primary);
|
|
57
|
+
--interactive-surface-variant-primary-fg: var(--bento-primary-text, var(--bento-bg));
|
|
58
|
+
--interactive-surface-variant-primary-border-color: var(--bento-primary);
|
|
59
|
+
--interactive-surface-variant-secondary-bg: var(--bento-secondary);
|
|
60
|
+
--interactive-surface-variant-secondary-fg: var(--bento-secondary-text, var(--bento-bg));
|
|
61
|
+
--interactive-surface-variant-secondary-border-color: var(--bento-secondary);
|
|
62
|
+
--interactive-surface-variant-accent-bg: var(--bento-accent);
|
|
63
|
+
--interactive-surface-variant-accent-border-color: var(--bento-accent);
|
|
64
|
+
--interactive-surface-variant-subtle-bg: var(--bento-surface-soft, var(--bento-surface));
|
|
65
|
+
--interactive-surface-variant-subtle-fg: var(--bento-text);
|
|
66
|
+
--interactive-surface-variant-subtle-border-color: var(--bento-border);
|
|
67
|
+
--interactive-surface-variant-warning-bg: var(--bento-warning);
|
|
68
|
+
--interactive-surface-variant-warning-border-color: var(--bento-warning);
|
|
69
|
+
--interactive-surface-variant-danger-bg: var(--bento-danger);
|
|
70
|
+
--interactive-surface-variant-danger-border-color: var(--bento-danger);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:where([data-ui="maximalist"][data-theme][data-mode]) .interactive-surface {
|
|
74
|
+
--interactive-surface-bg: var(--max-surface-strong, var(--max-surface, var(--max-bg)));
|
|
75
|
+
--interactive-surface-fg: var(--max-text);
|
|
76
|
+
--interactive-surface-border-color: var(--max-border);
|
|
77
|
+
--interactive-surface-focus-ring-color: var(--max-focus, var(--max-accent, var(--max-primary)));
|
|
78
|
+
--interactive-surface-radius: var(--max-radius-md, 0.75rem);
|
|
79
|
+
--interactive-surface-state-layer-color: var(--max-text);
|
|
80
|
+
--interactive-surface-light-icon-color: var(--max-warning, var(--max-accent));
|
|
81
|
+
--interactive-surface-dark-icon-color: var(--max-text);
|
|
82
|
+
--interactive-surface-accessibility-icon-color: var(--max-focus, var(--max-accent));
|
|
83
|
+
--interactive-surface-light-icon-color-dark: var(--max-warning, var(--max-accent));
|
|
84
|
+
--interactive-surface-dark-icon-color-dark: var(--max-text);
|
|
85
|
+
--interactive-surface-accessibility-icon-color-dark: var(--max-focus, var(--max-accent));
|
|
86
|
+
--interactive-surface-variant-primary-bg: var(--max-primary);
|
|
87
|
+
--interactive-surface-variant-primary-fg: var(--max-primary-text, var(--max-bg));
|
|
88
|
+
--interactive-surface-variant-primary-border-color: var(--max-primary);
|
|
89
|
+
--interactive-surface-variant-secondary-bg: var(--max-secondary);
|
|
90
|
+
--interactive-surface-variant-secondary-fg: var(--max-secondary-text, var(--max-bg));
|
|
91
|
+
--interactive-surface-variant-secondary-border-color: var(--max-secondary);
|
|
92
|
+
--interactive-surface-variant-accent-bg: var(--max-accent);
|
|
93
|
+
--interactive-surface-variant-accent-border-color: var(--max-accent);
|
|
94
|
+
--interactive-surface-variant-subtle-bg: var(--max-surface-soft, var(--max-surface));
|
|
95
|
+
--interactive-surface-variant-subtle-fg: var(--max-text);
|
|
96
|
+
--interactive-surface-variant-subtle-border-color: var(--max-border);
|
|
97
|
+
--interactive-surface-variant-warning-bg: var(--max-warning);
|
|
98
|
+
--interactive-surface-variant-warning-border-color: var(--max-warning);
|
|
99
|
+
--interactive-surface-variant-danger-bg: var(--max-danger);
|
|
100
|
+
--interactive-surface-variant-danger-border-color: var(--max-danger);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:where([data-ui="bauhaus"][data-theme][data-mode]) .interactive-surface {
|
|
104
|
+
--interactive-surface-bg: var(--bau-surface-strong, var(--bau-surface, var(--bau-bg)));
|
|
105
|
+
--interactive-surface-fg: var(--bau-text);
|
|
106
|
+
--interactive-surface-border-color: var(--bau-border);
|
|
107
|
+
--interactive-surface-focus-ring-color: var(--bau-focus, var(--bau-accent, var(--bau-primary)));
|
|
108
|
+
--interactive-surface-radius: var(--bau-radius-md, 0.75rem);
|
|
109
|
+
--interactive-surface-state-layer-color: var(--bau-text);
|
|
110
|
+
--interactive-surface-light-icon-color: var(--bau-warning, var(--bau-accent));
|
|
111
|
+
--interactive-surface-dark-icon-color: var(--bau-text);
|
|
112
|
+
--interactive-surface-accessibility-icon-color: var(--bau-focus, var(--bau-accent));
|
|
113
|
+
--interactive-surface-light-icon-color-dark: var(--bau-warning, var(--bau-accent));
|
|
114
|
+
--interactive-surface-dark-icon-color-dark: var(--bau-text);
|
|
115
|
+
--interactive-surface-accessibility-icon-color-dark: var(--bau-focus, var(--bau-accent));
|
|
116
|
+
--interactive-surface-variant-primary-bg: var(--bau-primary);
|
|
117
|
+
--interactive-surface-variant-primary-fg: var(--bau-primary-text, var(--bau-bg));
|
|
118
|
+
--interactive-surface-variant-primary-border-color: var(--bau-primary);
|
|
119
|
+
--interactive-surface-variant-secondary-bg: var(--bau-secondary);
|
|
120
|
+
--interactive-surface-variant-secondary-fg: var(--bau-secondary-text, var(--bau-bg));
|
|
121
|
+
--interactive-surface-variant-secondary-border-color: var(--bau-secondary);
|
|
122
|
+
--interactive-surface-variant-accent-bg: var(--bau-accent);
|
|
123
|
+
--interactive-surface-variant-accent-border-color: var(--bau-accent);
|
|
124
|
+
--interactive-surface-variant-subtle-bg: var(--bau-surface-soft, var(--bau-surface));
|
|
125
|
+
--interactive-surface-variant-subtle-fg: var(--bau-text);
|
|
126
|
+
--interactive-surface-variant-subtle-border-color: var(--bau-border);
|
|
127
|
+
--interactive-surface-variant-warning-bg: var(--bau-warning);
|
|
128
|
+
--interactive-surface-variant-warning-border-color: var(--bau-warning);
|
|
129
|
+
--interactive-surface-variant-danger-bg: var(--bau-danger);
|
|
130
|
+
--interactive-surface-variant-danger-border-color: var(--bau-danger);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:where([data-ui="tactile"][data-theme][data-mode]) .interactive-surface {
|
|
134
|
+
--interactive-surface-bg: var(--tactile-surface-strong, var(--tactile-surface, var(--tactile-bg)));
|
|
135
|
+
--interactive-surface-fg: var(--tactile-text);
|
|
136
|
+
--interactive-surface-border-color: var(--tactile-border);
|
|
137
|
+
--interactive-surface-focus-ring-color: var(--tactile-focus, var(--tactile-accent, var(--tactile-primary)));
|
|
138
|
+
--interactive-surface-radius: var(--tactile-radius-md, 0.75rem);
|
|
139
|
+
--interactive-surface-state-layer-color: var(--tactile-text);
|
|
140
|
+
--interactive-surface-light-icon-color: var(--tactile-warning, var(--tactile-accent));
|
|
141
|
+
--interactive-surface-dark-icon-color: var(--tactile-text);
|
|
142
|
+
--interactive-surface-accessibility-icon-color: var(--tactile-focus, var(--tactile-accent));
|
|
143
|
+
--interactive-surface-light-icon-color-dark: var(--tactile-warning, var(--tactile-accent));
|
|
144
|
+
--interactive-surface-dark-icon-color-dark: var(--tactile-text);
|
|
145
|
+
--interactive-surface-accessibility-icon-color-dark: var(--tactile-focus, var(--tactile-accent));
|
|
146
|
+
--interactive-surface-variant-primary-bg: var(--tactile-primary);
|
|
147
|
+
--interactive-surface-variant-primary-fg: var(--tactile-primary-text, var(--tactile-bg));
|
|
148
|
+
--interactive-surface-variant-primary-border-color: var(--tactile-primary);
|
|
149
|
+
--interactive-surface-variant-secondary-bg: var(--tactile-secondary);
|
|
150
|
+
--interactive-surface-variant-secondary-fg: var(--tactile-secondary-text, var(--tactile-bg));
|
|
151
|
+
--interactive-surface-variant-secondary-border-color: var(--tactile-secondary);
|
|
152
|
+
--interactive-surface-variant-accent-bg: var(--tactile-accent);
|
|
153
|
+
--interactive-surface-variant-accent-border-color: var(--tactile-accent);
|
|
154
|
+
--interactive-surface-variant-subtle-bg: var(--tactile-surface-soft, var(--tactile-surface));
|
|
155
|
+
--interactive-surface-variant-subtle-fg: var(--tactile-text);
|
|
156
|
+
--interactive-surface-variant-subtle-border-color: var(--tactile-border);
|
|
157
|
+
--interactive-surface-variant-warning-bg: var(--tactile-warning);
|
|
158
|
+
--interactive-surface-variant-warning-border-color: var(--tactile-warning);
|
|
159
|
+
--interactive-surface-variant-danger-bg: var(--tactile-danger);
|
|
160
|
+
--interactive-surface-variant-danger-border-color: var(--tactile-danger);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:where([data-ui="neumorphism"][data-theme][data-mode]) .interactive-surface {
|
|
164
|
+
--interactive-surface-bg: var(--neo-surface-strong, var(--neo-surface, var(--neo-bg)));
|
|
165
|
+
--interactive-surface-fg: var(--neo-text);
|
|
166
|
+
--interactive-surface-border-color: var(--neo-border);
|
|
167
|
+
--interactive-surface-focus-ring-color: var(--neo-focus, var(--neo-accent, var(--neo-primary)));
|
|
168
|
+
--interactive-surface-radius: var(--neo-radius-md, 0.75rem);
|
|
169
|
+
--interactive-surface-state-layer-color: var(--neo-text);
|
|
170
|
+
--interactive-surface-light-icon-color: var(--neo-warning, var(--neo-accent));
|
|
171
|
+
--interactive-surface-dark-icon-color: var(--neo-text);
|
|
172
|
+
--interactive-surface-accessibility-icon-color: var(--neo-focus, var(--neo-accent));
|
|
173
|
+
--interactive-surface-light-icon-color-dark: var(--neo-warning, var(--neo-accent));
|
|
174
|
+
--interactive-surface-dark-icon-color-dark: var(--neo-text);
|
|
175
|
+
--interactive-surface-accessibility-icon-color-dark: var(--neo-focus, var(--neo-accent));
|
|
176
|
+
--interactive-surface-variant-primary-bg: var(--neo-primary);
|
|
177
|
+
--interactive-surface-variant-primary-fg: var(--neo-primary-text, var(--neo-bg));
|
|
178
|
+
--interactive-surface-variant-primary-border-color: var(--neo-primary);
|
|
179
|
+
--interactive-surface-variant-secondary-bg: var(--neo-secondary);
|
|
180
|
+
--interactive-surface-variant-secondary-fg: var(--neo-secondary-text, var(--neo-bg));
|
|
181
|
+
--interactive-surface-variant-secondary-border-color: var(--neo-secondary);
|
|
182
|
+
--interactive-surface-variant-accent-bg: var(--neo-accent);
|
|
183
|
+
--interactive-surface-variant-accent-border-color: var(--neo-accent);
|
|
184
|
+
--interactive-surface-variant-subtle-bg: var(--neo-surface-soft, var(--neo-surface));
|
|
185
|
+
--interactive-surface-variant-subtle-fg: var(--neo-text);
|
|
186
|
+
--interactive-surface-variant-subtle-border-color: var(--neo-border);
|
|
187
|
+
--interactive-surface-variant-warning-bg: var(--neo-warning);
|
|
188
|
+
--interactive-surface-variant-warning-border-color: var(--neo-warning);
|
|
189
|
+
--interactive-surface-variant-danger-bg: var(--neo-danger);
|
|
190
|
+
--interactive-surface-variant-danger-border-color: var(--neo-danger);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
:where([data-ui="retrofuturism"][data-theme][data-mode]) .interactive-surface {
|
|
194
|
+
--interactive-surface-bg: var(--retro-surface-strong, var(--retro-surface, var(--retro-bg)));
|
|
195
|
+
--interactive-surface-fg: var(--retro-text);
|
|
196
|
+
--interactive-surface-border-color: var(--retro-border);
|
|
197
|
+
--interactive-surface-focus-ring-color: var(--retro-focus, var(--retro-accent, var(--retro-primary)));
|
|
198
|
+
--interactive-surface-radius: var(--retro-radius-md, 0.75rem);
|
|
199
|
+
--interactive-surface-state-layer-color: var(--retro-text);
|
|
200
|
+
--interactive-surface-light-icon-color: var(--retro-warning, var(--retro-accent));
|
|
201
|
+
--interactive-surface-dark-icon-color: var(--retro-text);
|
|
202
|
+
--interactive-surface-accessibility-icon-color: var(--retro-focus, var(--retro-accent));
|
|
203
|
+
--interactive-surface-light-icon-color-dark: var(--retro-warning, var(--retro-accent));
|
|
204
|
+
--interactive-surface-dark-icon-color-dark: var(--retro-text);
|
|
205
|
+
--interactive-surface-accessibility-icon-color-dark: var(--retro-focus, var(--retro-accent));
|
|
206
|
+
--interactive-surface-variant-primary-bg: var(--retro-primary);
|
|
207
|
+
--interactive-surface-variant-primary-fg: var(--retro-primary-text, var(--retro-bg));
|
|
208
|
+
--interactive-surface-variant-primary-border-color: var(--retro-primary);
|
|
209
|
+
--interactive-surface-variant-secondary-bg: var(--retro-secondary);
|
|
210
|
+
--interactive-surface-variant-secondary-fg: var(--retro-secondary-text, var(--retro-bg));
|
|
211
|
+
--interactive-surface-variant-secondary-border-color: var(--retro-secondary);
|
|
212
|
+
--interactive-surface-variant-accent-bg: var(--retro-accent);
|
|
213
|
+
--interactive-surface-variant-accent-border-color: var(--retro-accent);
|
|
214
|
+
--interactive-surface-variant-subtle-bg: var(--retro-surface-soft, var(--retro-surface));
|
|
215
|
+
--interactive-surface-variant-subtle-fg: var(--retro-text);
|
|
216
|
+
--interactive-surface-variant-subtle-border-color: var(--retro-border);
|
|
217
|
+
--interactive-surface-variant-warning-bg: var(--retro-warning);
|
|
218
|
+
--interactive-surface-variant-warning-border-color: var(--retro-warning);
|
|
219
|
+
--interactive-surface-variant-danger-bg: var(--retro-danger);
|
|
220
|
+
--interactive-surface-variant-danger-border-color: var(--retro-danger);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
:where([data-ui="brutalism"][data-theme][data-mode]) .interactive-surface {
|
|
224
|
+
--interactive-surface-bg: var(--brutal-surface-strong, var(--brutal-surface, var(--brutal-bg)));
|
|
225
|
+
--interactive-surface-fg: var(--brutal-text);
|
|
226
|
+
--interactive-surface-border-color: var(--brutal-border);
|
|
227
|
+
--interactive-surface-focus-ring-color: var(--brutal-focus, var(--brutal-accent, var(--brutal-primary)));
|
|
228
|
+
--interactive-surface-radius: var(--brutal-radius-md, 0.75rem);
|
|
229
|
+
--interactive-surface-state-layer-color: var(--brutal-text);
|
|
230
|
+
--interactive-surface-light-icon-color: var(--brutal-warning, var(--brutal-accent));
|
|
231
|
+
--interactive-surface-dark-icon-color: var(--brutal-text);
|
|
232
|
+
--interactive-surface-accessibility-icon-color: var(--brutal-focus, var(--brutal-accent));
|
|
233
|
+
--interactive-surface-light-icon-color-dark: var(--brutal-warning, var(--brutal-accent));
|
|
234
|
+
--interactive-surface-dark-icon-color-dark: var(--brutal-text);
|
|
235
|
+
--interactive-surface-accessibility-icon-color-dark: var(--brutal-focus, var(--brutal-accent));
|
|
236
|
+
--interactive-surface-variant-primary-bg: var(--brutal-primary);
|
|
237
|
+
--interactive-surface-variant-primary-fg: var(--brutal-primary-text, var(--brutal-bg));
|
|
238
|
+
--interactive-surface-variant-primary-border-color: var(--brutal-primary);
|
|
239
|
+
--interactive-surface-variant-secondary-bg: var(--brutal-secondary);
|
|
240
|
+
--interactive-surface-variant-secondary-fg: var(--brutal-secondary-text, var(--brutal-bg));
|
|
241
|
+
--interactive-surface-variant-secondary-border-color: var(--brutal-secondary);
|
|
242
|
+
--interactive-surface-variant-accent-bg: var(--brutal-accent);
|
|
243
|
+
--interactive-surface-variant-accent-border-color: var(--brutal-accent);
|
|
244
|
+
--interactive-surface-variant-subtle-bg: var(--brutal-surface-soft, var(--brutal-surface));
|
|
245
|
+
--interactive-surface-variant-subtle-fg: var(--brutal-text);
|
|
246
|
+
--interactive-surface-variant-subtle-border-color: var(--brutal-border);
|
|
247
|
+
--interactive-surface-variant-warning-bg: var(--brutal-warning);
|
|
248
|
+
--interactive-surface-variant-warning-border-color: var(--brutal-warning);
|
|
249
|
+
--interactive-surface-variant-danger-bg: var(--brutal-danger);
|
|
250
|
+
--interactive-surface-variant-danger-border-color: var(--brutal-danger);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
:where([data-ui="cyberpunk"][data-theme][data-mode]) .interactive-surface {
|
|
254
|
+
--interactive-surface-bg: var(--cyber-surface-strong, var(--cyber-surface, var(--cyber-bg)));
|
|
255
|
+
--interactive-surface-fg: var(--cyber-text);
|
|
256
|
+
--interactive-surface-border-color: var(--cyber-border);
|
|
257
|
+
--interactive-surface-focus-ring-color: var(--cyber-focus, var(--cyber-accent, var(--cyber-primary)));
|
|
258
|
+
--interactive-surface-radius: var(--cyber-radius-md, 0.75rem);
|
|
259
|
+
--interactive-surface-state-layer-color: var(--cyber-text);
|
|
260
|
+
--interactive-surface-light-icon-color: var(--cyber-warning, var(--cyber-accent));
|
|
261
|
+
--interactive-surface-dark-icon-color: var(--cyber-text);
|
|
262
|
+
--interactive-surface-accessibility-icon-color: var(--cyber-focus, var(--cyber-accent));
|
|
263
|
+
--interactive-surface-light-icon-color-dark: var(--cyber-warning, var(--cyber-accent));
|
|
264
|
+
--interactive-surface-dark-icon-color-dark: var(--cyber-text);
|
|
265
|
+
--interactive-surface-accessibility-icon-color-dark: var(--cyber-focus, var(--cyber-accent));
|
|
266
|
+
--interactive-surface-variant-primary-bg: var(--cyber-primary);
|
|
267
|
+
--interactive-surface-variant-primary-fg: var(--cyber-primary-text, var(--cyber-bg));
|
|
268
|
+
--interactive-surface-variant-primary-border-color: var(--cyber-primary);
|
|
269
|
+
--interactive-surface-variant-secondary-bg: var(--cyber-secondary);
|
|
270
|
+
--interactive-surface-variant-secondary-fg: var(--cyber-secondary-text, var(--cyber-bg));
|
|
271
|
+
--interactive-surface-variant-secondary-border-color: var(--cyber-secondary);
|
|
272
|
+
--interactive-surface-variant-accent-bg: var(--cyber-accent);
|
|
273
|
+
--interactive-surface-variant-accent-border-color: var(--cyber-accent);
|
|
274
|
+
--interactive-surface-variant-subtle-bg: var(--cyber-surface-soft, var(--cyber-surface));
|
|
275
|
+
--interactive-surface-variant-subtle-fg: var(--cyber-text);
|
|
276
|
+
--interactive-surface-variant-subtle-border-color: var(--cyber-border);
|
|
277
|
+
--interactive-surface-variant-warning-bg: var(--cyber-warning);
|
|
278
|
+
--interactive-surface-variant-warning-border-color: var(--cyber-warning);
|
|
279
|
+
--interactive-surface-variant-danger-bg: var(--cyber-danger);
|
|
280
|
+
--interactive-surface-variant-danger-border-color: var(--cyber-danger);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
:where([data-ui="y2k"][data-theme][data-mode]) .interactive-surface {
|
|
284
|
+
--interactive-surface-bg: var(--y2k-surface-strong, var(--y2k-surface, var(--y2k-bg)));
|
|
285
|
+
--interactive-surface-fg: var(--y2k-text);
|
|
286
|
+
--interactive-surface-border-color: var(--y2k-border);
|
|
287
|
+
--interactive-surface-focus-ring-color: var(--y2k-focus, var(--y2k-accent, var(--y2k-primary)));
|
|
288
|
+
--interactive-surface-radius: var(--y2k-radius-md, 0.75rem);
|
|
289
|
+
--interactive-surface-state-layer-color: var(--y2k-text);
|
|
290
|
+
--interactive-surface-light-icon-color: var(--y2k-warning, var(--y2k-accent));
|
|
291
|
+
--interactive-surface-dark-icon-color: var(--y2k-text);
|
|
292
|
+
--interactive-surface-accessibility-icon-color: var(--y2k-focus, var(--y2k-accent));
|
|
293
|
+
--interactive-surface-light-icon-color-dark: var(--y2k-warning, var(--y2k-accent));
|
|
294
|
+
--interactive-surface-dark-icon-color-dark: var(--y2k-text);
|
|
295
|
+
--interactive-surface-accessibility-icon-color-dark: var(--y2k-focus, var(--y2k-accent));
|
|
296
|
+
--interactive-surface-variant-primary-bg: var(--y2k-primary);
|
|
297
|
+
--interactive-surface-variant-primary-fg: var(--y2k-primary-text, var(--y2k-bg));
|
|
298
|
+
--interactive-surface-variant-primary-border-color: var(--y2k-primary);
|
|
299
|
+
--interactive-surface-variant-secondary-bg: var(--y2k-secondary);
|
|
300
|
+
--interactive-surface-variant-secondary-fg: var(--y2k-secondary-text, var(--y2k-bg));
|
|
301
|
+
--interactive-surface-variant-secondary-border-color: var(--y2k-secondary);
|
|
302
|
+
--interactive-surface-variant-accent-bg: var(--y2k-accent);
|
|
303
|
+
--interactive-surface-variant-accent-border-color: var(--y2k-accent);
|
|
304
|
+
--interactive-surface-variant-subtle-bg: var(--y2k-surface-soft, var(--y2k-surface));
|
|
305
|
+
--interactive-surface-variant-subtle-fg: var(--y2k-text);
|
|
306
|
+
--interactive-surface-variant-subtle-border-color: var(--y2k-border);
|
|
307
|
+
--interactive-surface-variant-warning-bg: var(--y2k-warning);
|
|
308
|
+
--interactive-surface-variant-warning-border-color: var(--y2k-warning);
|
|
309
|
+
--interactive-surface-variant-danger-bg: var(--y2k-danger);
|
|
310
|
+
--interactive-surface-variant-danger-border-color: var(--y2k-danger);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
:where([data-ui="retro-glass"][data-theme][data-mode]) .interactive-surface {
|
|
314
|
+
--interactive-surface-bg: var(--rg-surface-strong, var(--rg-surface, var(--rg-bg)));
|
|
315
|
+
--interactive-surface-fg: var(--rg-text);
|
|
316
|
+
--interactive-surface-border-color: var(--rg-border);
|
|
317
|
+
--interactive-surface-focus-ring-color: var(--rg-focus, var(--rg-accent, var(--rg-primary)));
|
|
318
|
+
--interactive-surface-radius: var(--rg-radius-md, 0.75rem);
|
|
319
|
+
--interactive-surface-state-layer-color: var(--rg-text);
|
|
320
|
+
--interactive-surface-light-icon-color: var(--rg-warning, var(--rg-accent));
|
|
321
|
+
--interactive-surface-dark-icon-color: var(--rg-text);
|
|
322
|
+
--interactive-surface-accessibility-icon-color: var(--rg-focus, var(--rg-accent));
|
|
323
|
+
--interactive-surface-light-icon-color-dark: var(--rg-warning, var(--rg-accent));
|
|
324
|
+
--interactive-surface-dark-icon-color-dark: var(--rg-text);
|
|
325
|
+
--interactive-surface-accessibility-icon-color-dark: var(--rg-focus, var(--rg-accent));
|
|
326
|
+
--interactive-surface-variant-primary-bg: var(--rg-primary);
|
|
327
|
+
--interactive-surface-variant-primary-fg: var(--rg-primary-text, var(--rg-bg));
|
|
328
|
+
--interactive-surface-variant-primary-border-color: var(--rg-primary);
|
|
329
|
+
--interactive-surface-variant-secondary-bg: var(--rg-secondary);
|
|
330
|
+
--interactive-surface-variant-secondary-fg: var(--rg-secondary-text, var(--rg-bg));
|
|
331
|
+
--interactive-surface-variant-secondary-border-color: var(--rg-secondary);
|
|
332
|
+
--interactive-surface-variant-accent-bg: var(--rg-accent);
|
|
333
|
+
--interactive-surface-variant-accent-border-color: var(--rg-accent);
|
|
334
|
+
--interactive-surface-variant-subtle-bg: var(--rg-surface-soft, var(--rg-surface));
|
|
335
|
+
--interactive-surface-variant-subtle-fg: var(--rg-text);
|
|
336
|
+
--interactive-surface-variant-subtle-border-color: var(--rg-border);
|
|
337
|
+
--interactive-surface-variant-warning-bg: var(--rg-warning);
|
|
338
|
+
--interactive-surface-variant-warning-border-color: var(--rg-warning);
|
|
339
|
+
--interactive-surface-variant-danger-bg: var(--rg-danger);
|
|
340
|
+
--interactive-surface-variant-danger-border-color: var(--rg-danger);
|
|
341
|
+
}
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
+
}
|