mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Merge pull request #547 from PR0M3TH3AN/codex/refactor-blog-color-and-layout-tokens
Deduplicate blog design tokens
This commit is contained in:
3 files changed
+11
-209
No files matched your search
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-logo-accent:var(--color-primary);--color-logo-wordmark:var(--color-neutral-700);--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:var(--color-neutral-700);--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(37,99,235,.18);--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-intense:rgba(250,204,21,.48);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:rgba(11,17,32,.92);--surface-muted:rgba(30,41,59,.82);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);Line truncated
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-logo-accent:var(--color-primary);--color-logo-wordmark:var(--color-neutral-700);--color-logo-wordmark-inverse:var(--color-white);--color-logo-background:var(--color-neutral-700);--color-logo-background-inverse:var(--color-white);--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-info-glass:rgba(37,99,235,.18);--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--sidebar-backdrop-blur:18px;--sidebar-shell-backdrop-saturation:140%;--sidebar-nav-backdrop-saturation:160%;--sidebar-trigger-backdrop-saturation:150%;--sidebar-panel-backdrop-blur:20px;--sidebar-panel-backdrop-saturation:150%;--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-intense:rgba(250,204,21,.48);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:rgba(11,17,32,.92);--surface-muted:rgba(30,41,59,.82);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:vLine truncated
|
||||
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-md);padding-bottom:var(--space-md)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--surface-basLine truncated
|
||||
+8
-208
@@ -65,6 +65,12 @@
|
||||
--color-sidebar-accent-start: rgb(56 189 248 / 0.9);
|
||||
--color-sidebar-accent-end: rgb(129 140 248 / 0.85);
|
||||
--color-sidebar-text-muted: rgb(203 213 225 / 0.75);
|
||||
--sidebar-backdrop-blur: 18px;
|
||||
--sidebar-shell-backdrop-saturation: 140%;
|
||||
--sidebar-nav-backdrop-saturation: 160%;
|
||||
--sidebar-trigger-backdrop-saturation: 150%;
|
||||
--sidebar-panel-backdrop-blur: 20px;
|
||||
--sidebar-panel-backdrop-saturation: 150%;
|
||||
--color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
|
||||
--color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92);
|
||||
--color-surface-tint-subtle: rgb(148 163 184 / 0.08);
|
||||
@@ -255,7 +261,7 @@
|
||||
--progress-transition-duration: var(--motion-duration-fast);
|
||||
--progress-transition-ease: var(--motion-ease-out);
|
||||
|
||||
/* Blog palette */
|
||||
/* Blog palette (theme-agnostic) */
|
||||
--color-blog-transparent: rgb(0 0 0 / 0);
|
||||
--color-blog-cyan-500: rgb(6 182 212);
|
||||
--color-blog-sky-500: rgb(0 187 255);
|
||||
@@ -583,50 +589,6 @@
|
||||
--color-text-frosted-strong: rgb(30 41 59 / 0.85);
|
||||
--color-text-frosted: rgb(51 65 85 / 0.82);
|
||||
--color-text-frosted-soft: rgb(71 85 105 / 0.72);
|
||||
--color-blog-transparent: rgb(0 0 0 / 0);
|
||||
--color-blog-cyan-500: rgb(6 182 212);
|
||||
--color-blog-sky-500: rgb(0 187 255);
|
||||
--color-blog-teal-600: rgb(14 116 144);
|
||||
--color-blog-green-800: rgb(20 83 45);
|
||||
--color-blog-green-700: rgb(21 128 61);
|
||||
--color-blog-teal-700: rgb(22 78 99);
|
||||
--color-blog-gray-900: rgb(23 23 23);
|
||||
--color-blog-coffee-900: rgb(28 25 23);
|
||||
--color-blog-green-500: rgb(34 197 94);
|
||||
--color-blog-gray-800: rgb(43 43 43);
|
||||
--color-blog-gray-700: rgb(59 59 59);
|
||||
--color-blog-teal-accent: rgb(62 139 138);
|
||||
--color-blog-gray-650: rgb(64 64 64);
|
||||
--color-blog-brown-700: rgb(68 64 60);
|
||||
--color-blog-purple-900: rgb(88 28 135);
|
||||
--color-blog-gray-500: rgb(102 102 102);
|
||||
--color-blog-gray-450: rgb(115 115 115);
|
||||
--color-blog-gray-440: rgb(116 116 116);
|
||||
--color-blog-brown-500: rgb(120 113 108);
|
||||
--color-blog-rust-700: rgb(124 45 18);
|
||||
--color-blog-purple-700: rgb(126 34 206);
|
||||
--color-blog-purple-accent: rgb(146 55 156);
|
||||
--color-blog-purple-muted: rgb(150 96 156);
|
||||
--color-blog-gray-300: rgb(153 153 153);
|
||||
--color-blog-purple-500: rgb(168 85 247);
|
||||
--color-blog-gray-275: rgb(169 169 169);
|
||||
--color-blog-red-600: rgb(185 28 28);
|
||||
--color-blog-rust-600: rgb(194 65 12);
|
||||
--color-blog-error: rgb(202 23 23);
|
||||
--color-blog-gray-220: rgb(203 203 203);
|
||||
--color-blog-gray-210: rgb(204 204 204);
|
||||
--color-blog-gray-200: rgb(222 222 222);
|
||||
--color-blog-amber-500: rgb(228 152 77);
|
||||
--color-blog-gray-190: rgb(224 224 224);
|
||||
--color-blog-orange-600: rgb(227 84 40);
|
||||
--color-blog-gray-180: rgb(233 233 233);
|
||||
--color-blog-gray-170: rgb(235 235 235);
|
||||
--color-blog-red-500: rgb(239 68 68);
|
||||
--color-blog-amber-400: rgb(246 173 85);
|
||||
--color-blog-neutral-100: rgb(245 245 245);
|
||||
--color-blog-neutral-120: rgb(246 246 246);
|
||||
--color-blog-orange-500: rgb(249 115 22);
|
||||
--color-blog-neutral-50: rgb(253 253 253);
|
||||
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(15 23 42 / 0.08);
|
||||
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(15 23 42 / 0.12);
|
||||
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(15 23 42 / 0.16);
|
||||
@@ -661,167 +623,5 @@
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
/* Dark theme overrides mirror the defaults. Update with :root and light theme tokens together. */
|
||||
--color-page: rgb(255 255 255);
|
||||
--color-page-alt: rgb(249 250 251);
|
||||
--color-surface: rgb(15 23 42);
|
||||
--color-surface-alt: rgb(17 24 39);
|
||||
--color-bg: var(--color-surface);
|
||||
--color-card: rgb(30 41 59);
|
||||
--color-card-private: rgb(59 29 116);
|
||||
--color-card-critical: rgb(63 11 19);
|
||||
--color-panel: rgb(31 41 55);
|
||||
--color-panel-hover: rgb(51 65 85);
|
||||
--color-border: rgb(55 65 81);
|
||||
--color-border-subtle: rgb(209 213 219);
|
||||
--color-primary: rgb(254 0 50);
|
||||
--color-secondary: rgb(255 147 165);
|
||||
--color-logo-accent: var(--color-primary);
|
||||
--color-logo-wordmark: var(--color-neutral-700);
|
||||
--color-logo-wordmark-inverse: var(--color-white);
|
||||
--color-logo-background: var(--color-neutral-700);
|
||||
--color-logo-background-inverse: var(--color-white);
|
||||
--color-info: rgb(96 165 250);
|
||||
--color-info-strong: rgb(37 99 235);
|
||||
--color-info-pressed: rgb(29 78 216);
|
||||
--color-info-glass: rgb(37 99 235 / 0.18);
|
||||
--color-muted-strong: rgb(107 114 128);
|
||||
--color-text: rgb(248 250 252);
|
||||
--color-text-strong: rgb(15 23 42);
|
||||
--color-text-muted: var(--color-muted);
|
||||
--color-muted: rgb(148 163 184);
|
||||
--color-muted-alt: rgb(156 163 175);
|
||||
--color-subtle-text: rgb(226 232 240);
|
||||
--color-subtle: rgb(229 231 235);
|
||||
--color-critical: rgb(127 29 29);
|
||||
--color-critical-strong: rgb(153 27 27);
|
||||
--color-warning: rgb(250 204 21);
|
||||
--color-warning-strong: rgb(217 119 6);
|
||||
--color-warning-surface: rgb(146 64 14 / 0.24);
|
||||
--color-warning-glass: rgb(250 204 21 / 0.18);
|
||||
--color-neutral-700: rgb(63 63 70);
|
||||
--color-neutral-600: rgb(82 82 91);
|
||||
--color-white: rgb(255 255 255);
|
||||
--color-black: rgb(0 0 0);
|
||||
--color-overlay: rgb(26 34 52);
|
||||
--color-overlay-black: rgb(0 0 0 / 0.9);
|
||||
--color-overlay-muted: rgb(15 23 42 / 0.55);
|
||||
--color-overlay-strong: rgb(15 23 42 / 0.75);
|
||||
--color-overlay-darker: rgb(15 23 42 / 0.88);
|
||||
--color-overlay-panel: rgb(26 34 52 / 0.82);
|
||||
--color-overlay-panel-soft: rgb(26 34 52 / 0.65);
|
||||
--color-overlay-panel-tint: rgb(31 41 55 / 0.5);
|
||||
--color-overlay-panel-glass: rgb(28 37 58 / 0.72);
|
||||
--color-modal-backdrop: rgb(8 12 24 / 0.58);
|
||||
--color-modal-surface: rgb(20 28 46 / 0.78);
|
||||
--color-overlay-veil: rgb(11 17 32 / 0.96);
|
||||
--color-overlay-banner: rgb(51 65 85 / 0.95);
|
||||
--color-sidebar-surface: rgb(17 24 39 / 0.94);
|
||||
--color-sidebar-surface-alt: rgb(11 22 48 / 0.78);
|
||||
--color-sidebar-border: rgb(148 163 184 / 0.28);
|
||||
--color-sidebar-border-strong: rgb(148 163 184 / 0.42);
|
||||
--color-sidebar-hover: rgb(56 189 248 / 0.18);
|
||||
--color-sidebar-hover-strong: rgb(129 140 248 / 0.28);
|
||||
--color-sidebar-glow: rgb(56 189 248 / 0.35);
|
||||
--color-sidebar-accent-start: rgb(56 189 248 / 0.9);
|
||||
--color-sidebar-accent-end: rgb(129 140 248 / 0.85);
|
||||
--color-sidebar-text-muted: rgb(203 213 225 / 0.75);
|
||||
--sidebar-backdrop-blur: 18px;
|
||||
--sidebar-shell-backdrop-saturation: 140%;
|
||||
--sidebar-nav-backdrop-saturation: 160%;
|
||||
--sidebar-trigger-backdrop-saturation: 150%;
|
||||
--sidebar-panel-backdrop-blur: 20px;
|
||||
--sidebar-panel-backdrop-saturation: 150%;
|
||||
--color-overlay-panel-gradient-start: rgb(30 41 59 / 0.92);
|
||||
--color-overlay-panel-gradient-end: rgb(15 23 42 / 0.92);
|
||||
--color-surface-tint-subtle: rgb(148 163 184 / 0.08);
|
||||
--color-border-translucent: rgb(148 163 184 / 0.18);
|
||||
--color-border-translucent-strong: rgb(148 163 184 / 0.25);
|
||||
--color-border-translucent-bright: rgb(148 163 184 / 0.32);
|
||||
--color-border-translucent-stronger: rgb(148 163 184 / 0.35);
|
||||
--color-border-translucent-strongest: rgb(148 163 184 / 0.4);
|
||||
--color-border-translucent-glow: rgb(148 163 184 / 0.55);
|
||||
--color-border-translucent-medium: rgb(148 163 184 / 0.2);
|
||||
--color-border-neutral-soft: rgb(229 231 235 / 0.35);
|
||||
--color-border-info-soft: rgb(96 165 250 / 0.35);
|
||||
--color-border-sidebar-strong: rgb(55 65 81 / 0.9);
|
||||
--color-ring-private: rgb(168 85 247 / 0.55);
|
||||
--color-ring-private-hover: rgb(192 132 252 / 0.65);
|
||||
--color-ring-critical: rgb(239 68 68 / 0.4);
|
||||
--color-ring-critical-soft: rgb(239 68 68 / 0.35);
|
||||
--color-ring-critical-hover: rgb(239 68 68 / 0.45);
|
||||
--color-ring-critical-strong: rgb(239 68 68 / 0.55);
|
||||
--color-ring-alert: rgb(220 38 38 / 0.6);
|
||||
--color-gradient-visibility-start: rgb(129 140 248 / 0.4);
|
||||
--color-gradient-visibility-end: rgb(192 132 252 / 0.32);
|
||||
--color-white-soft: rgb(255 255 255 / 0.1);
|
||||
--color-white-softer: rgb(255 255 255 / 0.3);
|
||||
--color-white-softest: rgb(255 255 255 / 0.4);
|
||||
--color-shadow-floating: rgb(8 11 30 / 0.55);
|
||||
--color-shadow-elevated: rgb(8 11 30 / 0.45);
|
||||
--color-shadow-panel: rgb(15 23 42 / 0.35);
|
||||
--color-shadow-notification: rgb(15 23 42 / 0.3);
|
||||
--color-shadow-intense: rgb(250 204 21 / 0.48);
|
||||
--color-shadow-sidebar: rgb(0 0 0 / 0.45);
|
||||
--color-divider-strong: rgb(15 23 42 / 0.35);
|
||||
--color-text-frosted-strong: rgb(226 232 240 / 0.94);
|
||||
--color-text-frosted: rgb(226 232 240 / 0.9);
|
||||
--color-text-frosted-soft: rgb(226 232 240 / 0.82);
|
||||
--color-blog-transparent: rgb(0 0 0 / 0);
|
||||
--color-blog-cyan-500: rgb(6 182 212);
|
||||
--color-blog-sky-500: rgb(0 187 255);
|
||||
--color-blog-teal-600: rgb(14 116 144);
|
||||
--color-blog-green-800: rgb(20 83 45);
|
||||
--color-blog-green-700: rgb(21 128 61);
|
||||
--color-blog-teal-700: rgb(22 78 99);
|
||||
--color-blog-gray-900: rgb(23 23 23);
|
||||
--color-blog-coffee-900: rgb(28 25 23);
|
||||
--color-blog-green-500: rgb(34 197 94);
|
||||
--color-blog-gray-800: rgb(43 43 43);
|
||||
--color-blog-gray-700: rgb(59 59 59);
|
||||
--color-blog-teal-accent: rgb(62 139 138);
|
||||
--color-blog-gray-650: rgb(64 64 64);
|
||||
--color-blog-brown-700: rgb(68 64 60);
|
||||
--color-blog-purple-900: rgb(88 28 135);
|
||||
--color-blog-gray-500: rgb(102 102 102);
|
||||
--color-blog-gray-450: rgb(115 115 115);
|
||||
--color-blog-gray-440: rgb(116 116 116);
|
||||
--color-blog-brown-500: rgb(120 113 108);
|
||||
--color-blog-rust-700: rgb(124 45 18);
|
||||
--color-blog-purple-700: rgb(126 34 206);
|
||||
--color-blog-purple-accent: rgb(146 55 156);
|
||||
--color-blog-purple-muted: rgb(150 96 156);
|
||||
--color-blog-gray-300: rgb(153 153 153);
|
||||
--color-blog-purple-500: rgb(168 85 247);
|
||||
--color-blog-gray-275: rgb(169 169 169);
|
||||
--color-blog-red-600: rgb(185 28 28);
|
||||
--color-blog-rust-600: rgb(194 65 12);
|
||||
--color-blog-error: rgb(202 23 23);
|
||||
--color-blog-gray-220: rgb(203 203 203);
|
||||
--color-blog-gray-210: rgb(204 204 204);
|
||||
--color-blog-gray-200: rgb(222 222 222);
|
||||
--color-blog-amber-500: rgb(228 152 77);
|
||||
--color-blog-gray-190: rgb(224 224 224);
|
||||
--color-blog-orange-600: rgb(227 84 40);
|
||||
--color-blog-gray-180: rgb(233 233 233);
|
||||
--color-blog-gray-170: rgb(235 235 235);
|
||||
--color-blog-red-500: rgb(239 68 68);
|
||||
--color-blog-amber-400: rgb(246 173 85);
|
||||
--color-blog-neutral-100: rgb(245 245 245);
|
||||
--color-blog-neutral-120: rgb(246 246 246);
|
||||
--color-blog-orange-500: rgb(249 115 22);
|
||||
--color-blog-neutral-50: rgb(253 253 253);
|
||||
--shadow-sm: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 5%);
|
||||
--shadow-md: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 10%);
|
||||
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgb(0 0 0 / 10%);
|
||||
--shadow-modal: 0 2.75rem 6rem -1.25rem rgb(8 11 30 / 75%);
|
||||
--shadow-sidebar-shell: 0 1.875rem 3.75rem -1.5rem var(--color-shadow-sidebar);
|
||||
--shadow-sidebar-accent: 0 1.65rem 3.25rem -1.35rem var(--color-sidebar-glow);
|
||||
--shadow-sidebar-trigger: 0 1.25rem 2.5rem -1.35rem var(--color-shadow-panel);
|
||||
--shadow-sidebar-dropup: 0 1.75rem 3.25rem -1.45rem var(--color-sidebar-glow);
|
||||
--shadow-sidebar-panel: 0 2.25rem 4.5rem -1.85rem var(--color-shadow-sidebar);
|
||||
--shadow-sidebar-focus-ring: 0 0 0 0.125rem var(--color-sidebar-glow),
|
||||
0 0 0 0.25rem var(--color-sidebar-hover-strong);
|
||||
--shadow-popover-zap: 0 22px 48px -18px var(--color-shadow-intense);
|
||||
--shadow-video-modal: 0 1rem 2.25rem var(--color-shadow-elevated);
|
||||
/* No overrides; inherits from :root. */
|
||||
}
|
||||
@@ -93,6 +93,8 @@ The blog embed now consumes dedicated typography and spacing tokens alongside Ta
|
||||
|
||||
Templates should reference these tokens (directly or via Tailwind arbitrary values) instead of hard-coded measurements so the embed stays in sync with future blog refreshes.
|
||||
|
||||
The blog palette now resolves from the base `:root` scope, making color and layout tokens theme-agnostic. Neither the light nor dark theme overrides these variables, so any future blog-specific deltas should be called out explicitly in this guide if they return.
|
||||
|
||||
## Semantic Palette
|
||||
|
||||
All interactive surfaces now draw from a shared semantic color map exposed through `css/tokens.css` and Tailwind utility aliases. The palette is grouped into text, surface, overlay, and status slots so controllers can swap state styles without reaching for raw Tailwind hues:
|
||||
|
||||
Reference in new issue
Block a user