feat: Implement Citizen Skin Style #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

Ziphyrien wants to merge 1 commit into Cubic-Project:main from Ziphyrien:feature/citizen-skin

src/css/base/theme.css

Large diffs are not rendered by default.

src/css/base/variables.css

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,159 +1,184 @@
  
    /* ======================================

       NitWikit 设计系统 - CSS 变量

       借鉴 Nuxt 设计系统

       Citizen Skin Variables for NitWikit

       Based on MediaWiki Citizen Skin

    ====================================== */

    :root {

        /* ======================================

           主色调 - Nuxt Green (完整色阶)

           Citizen: Primary Color (OKLCH)

           Default: Purple-ish from documentation example

        ====================================== */

        --green-50: #effdf5;

        --green-100: #d9fbe8;

        --green-200: #b3f5d1;

        --green-300: #75edae;

        --green-400: #00dc82;

        --green-500: #00c16a;

        --green-600: #00a155;

        --green-700: #007f45;

        --green-800: #016538;

        --green-900: #0a5331;

        --green-950: #052e16;

        /* 主色语义化变量 */

        --primary: var(--green-500);

        --primary-dark: var(--green-600);

        --primary-darker: var(--green-700);

        --primary-light: var(--green-400);

        --primary-lighter: var(--green-300);

        /* 文字专用主色 - 对比度更高 (WCAG AA) */

        --primary-text: var(--green-600);

        /* 主色透明度变体 (简化) */

        --primary-alpha-5: rgba(0, 220, 130, 0.05);

        --primary-alpha-8: rgba(0, 220, 130, 0.08);

        --primary-alpha-10: rgba(0, 220, 130, 0.1);

        --primary-alpha-15: rgba(0, 220, 130, 0.15);

        --primary-alpha-20: rgba(0, 220, 130, 0.2);

        --primary-alpha-30: rgba(0, 220, 130, 0.3);

        --primary-alpha-border: rgba(0, 220, 130, 0.25);

        --color-progressive-oklch__l: 53.25%;

        --color-progressive-oklch__c: 0.1679;

        --color-progressive-oklch__h: 262.29;

        /* ======================================

           中性色 - Slate (完整色阶)

        ====================================== */

        --slate-50: #f8fafc;

        --slate-100: #f1f5f9;

        --slate-200: #e2e8f0;

        --slate-300: #cbd5e1;

        --slate-400: #94a3b8;

        --slate-500: #64748b;

        --slate-600: #475569;

        --slate-700: #334155;

        --slate-800: #1e293b;

        --slate-900: #0f172a;

        --slate-950: #020617;

        --color-progressive: oklch(

            var(--color-progressive-oklch__l)

            var(--color-progressive-oklch__c)

            var(--color-progressive-oklch__h)

        );

        /* ======================================

           语义化颜色 (亮色模式)

           Citizen: Surface Colors (Light Mode)

        ====================================== */

        --text-primary: var(--slate-900);

        --text-secondary: var(--slate-700);

        --text-light: var(--slate-500);

        --text-muted: var(--slate-500);

        --bg-base: var(--slate-50);

        --bg-light: var(--slate-100);

        --bg-muted: var(--slate-200);

        --bg-card: #ffffff;

        --bg-elevated: #ffffff;

        --bg-dark: var(--slate-900);

        --bg-footer: var(--slate-100);

        --border: var(--slate-200);

        --border-light: var(--slate-100);

        --border-dark: var(--slate-300);

        --color-surface-0: #ffffff;

        --color-surface-1: #f8f9fa;

        --color-surface-2: #eaecf0;

        --color-surface-3: #dee2e6;

        --color-surface-4: #ced4da;

        /* ======================================

           阴影系统

           Citizen: Text Colors (Light Mode)

        ====================================== */

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);

        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

        --shadow-glow: 0 0 20px rgba(0, 220, 130, 0.15);

        --color-base: #202122;

        --color-emphasized: #000000;

        --color-subtle: #54595d;

        /* ======================================

           圆角系统

           Citizen: Typography

        ====================================== */

        --radius-xs: 0.125rem;

        --radius-sm: 0.25rem;

        --radius-md: 0.375rem;

        --radius-lg: 0.5rem;

        --radius-xl: 0.75rem;

        --radius-2xl: 1rem;

        --radius-full: 9999px;

        --font-family-citizen-base: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;

        --font-family-citizen-serif: 'Roboto Serif', serif;

        --font-family-citizen-monospace: 'JetBrains Mono', 'Roboto Mono', monospace;

        /* ======================================

           过渡动画

           Citizen: Layout

        ====================================== */

        --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

        --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

        --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

        --transition-smooth: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

        --width-layout: 1200px; /* Adjusted for Docusaurus container */

        /* ======================================

           字体系统

           Citizen: Recipes / Customization

        ====================================== */

        --font-sans:

            "Public Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",

            "Microsoft YaHei", system-ui, sans-serif;

        --font-mono:

            "Maple Mono NF CN", "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",

            monospace;

        --transform-image-hover: scale(1.02);

        --backdrop-filter-frosted-glass: blur(20px) saturate(180%);

        --opacity-glass: 0.75;

        --border-radius-base: 12px;

        /* ======================================

           Docusaurus/Infima 变量映射

           Docusaurus / Infima Mapping

        ====================================== */

        --ifm-color-primary: var(--primary);

        --ifm-color-primary-dark: var(--primary-dark);

        --ifm-color-primary-darker: var(--primary-darker);

        --ifm-color-primary-light: var(--primary-light);

        --ifm-color-primary-lighter: var(--primary-lighter);

        --ifm-color-primary-lightest: #99f2cd;

        --ifm-code-font-size: 90%;

        --ifm-font-family-base: var(--font-sans);

        --ifm-font-family-monospace: var(--font-mono);

        --ifm-background-color: var(--bg-light);

        --ifm-background-surface-color: var(--bg-card);

        --ifm-navbar-background-color: rgba(255, 255, 255, 1);

        --ifm-color-primary: var(--color-progressive);

        /* Generate shades using color-mix (Modern CSS) or calc with OKLCH */

        --ifm-color-primary-dark: oklch(calc(var(--color-progressive-oklch__l) - 5%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-color-primary-darker: oklch(calc(var(--color-progressive-oklch__l) - 10%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-color-primary-darkest: oklch(calc(var(--color-progressive-oklch__l) - 15%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-color-primary-light: oklch(calc(var(--color-progressive-oklch__l) + 5%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-color-primary-lighter: oklch(calc(var(--color-progressive-oklch__l) + 10%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-color-primary-lightest: oklch(calc(var(--color-progressive-oklch__l) + 15%) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h));

        --ifm-background-color: var(--color-surface-0);

        --ifm-background-surface-color: var(--color-surface-1);

        --ifm-font-color-base: var(--color-base);

        --ifm-heading-color: var(--color-emphasized);

        --ifm-font-family-base: var(--font-family-citizen-base);

        --ifm-font-family-monospace: var(--font-family-citizen-monospace);

        --ifm-navbar-background-color: var(--color-surface-1);

        --ifm-navbar-height: 4rem;

        --ifm-navbar-shadow: none;

        --ifm-navbar-padding-vertical: 0;

        --ifm-navbar-padding-horizontal: 1.5rem;

        --ifm-menu-color: var(--text-secondary);

        --ifm-menu-color-active: var(--primary);

        --ifm-menu-color-background-active: var(--primary-alpha-10);

        --ifm-menu-color-background-hover: var(--primary-alpha-5);

        --ifm-toc-border-color: var(--border);

        --ifm-heading-color: var(--text-primary);

        --ifm-font-color-base: var(--text-primary);

        /* Borders */

        --ifm-border-color: var(--color-surface-3);

        /* ======================================

           提示框颜色 (亮色模式)

           Missing Variables Mapping

           (Added to fix missing borders and styles)

        ====================================== */

        --alert-info: #2563eb;

        --alert-info-bg: rgba(37, 99, 235, 0.08);

        --alert-warning: #d97706;

        --alert-warning-bg: rgba(217, 119, 6, 0.08);

        --alert-danger: #dc2626;

        --alert-danger-bg: rgba(220, 38, 38, 0.08);

        --alert-success: #059669;

        --alert-success-bg: rgba(5, 150, 105, 0.08);

        --alert-note: #7c3aed;

        --alert-note-bg: rgba(124, 58, 237, 0.08);

        --border: var(--ifm-border-color);

        --radius-sm: 4px;

        --radius-md: 8px;

        --radius-lg: 12px;

        --bg-light: var(--color-surface-0);

        --bg-card: var(--color-surface-1);

        --bg-muted: var(--color-surface-2);

        --bg-elevated: var(--color-surface-2);

        --text-primary: var(--color-base);

        --text-secondary: var(--color-subtle);

        --text-light: var(--color-subtle);

        --text-muted: var(--color-surface-4);

        --primary: var(--color-progressive);

        --primary-dark: var(--ifm-color-primary-dark);

        --primary-text: var(--color-progressive);

        --primary-alpha-5: oklch(from var(--color-progressive) l c h / 0.05);

        --primary-alpha-8: oklch(from var(--color-progressive) l c h / 0.08);

        --primary-alpha-10: oklch(from var(--color-progressive) l c h / 0.1);

        --primary-alpha-border: oklch(from var(--color-progressive) l c h / 0.2);

        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

        --transition-fast: 150ms ease;

        --transition-base: 300ms ease;

        /* Alert Colors */

        --alert-info: #2979ff;

        --alert-info-bg: rgba(41, 121, 255, 0.1);

        --alert-warning: #ff9100;

        --alert-warning-bg: rgba(255, 145, 0, 0.1);

        --alert-danger: #ff1744;

        --alert-danger-bg: rgba(255, 23, 68, 0.1);

        --alert-success: #00e676;

        --alert-success-bg: rgba(0, 230, 118, 0.1);

        --alert-note: #651fff;

        --alert-note-bg: rgba(101, 31, 255, 0.1);

    }

    /* ======================================

       Dark Mode Overrides

    ====================================== */

    [data-theme='dark'] {

        /* Citizen: Surface Colors (Dark Mode) */

        --color-surface-0: #0f1216; /* Deep dark */

        --color-surface-1: #1a1e23; /* Card bg */

        --color-surface-2: #262b32;

        --color-surface-3: #343b44;

        --color-surface-4: #434c56;

        /* Citizen: Text Colors (Dark Mode) */

        --color-base: #c8ccd1;

        --color-emphasized: #ffffff;

        --color-subtle: #89919a;

        /* Adjust Primary for Dark Mode if needed */

        /* Keeping same hue/chroma but ensuring lightness is sufficient */

        --color-progressive-oklch__l: 60%; 

        --ifm-border-color: var(--color-surface-2);

        /* Update Mappings for Dark Mode */

        --border: var(--ifm-border-color);

        --bg-light: var(--color-surface-0);

        --bg-card: var(--color-surface-1);

        --bg-muted: var(--color-surface-2);

        --bg-elevated: var(--color-surface-3);

        --text-primary: var(--color-base);

        --text-secondary: var(--color-subtle);

        /* Alert Colors for Dark Mode (Slightly adjusted for contrast if needed) */

        --alert-info: #448aff;

        --alert-info-bg: rgba(68, 138, 255, 0.15);

        --alert-warning: #ffb74d;

        --alert-warning-bg: rgba(255, 183, 77, 0.15);

        --alert-danger: #ff5252;

        --alert-danger-bg: rgba(255, 82, 82, 0.15);

        --alert-success: #69f0ae;

        --alert-success-bg: rgba(105, 240, 174, 0.15);

        --alert-note: #b388ff;

        --alert-note-bg: rgba(179, 136, 255, 0.15);

    }

    /* ======================================

       Pure Black Mode (Optional Recipe)

       .citizen-feature-pure-black-clientpref-1

    ====================================== */

    [data-theme='dark'][data-pure-black='true'] {

        --color-surface-0: #000000;

        --color-surface-1: #101010;

        --color-surface-2: #202020;

    }

src/css/components/alert.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -163,12 +163,18 @@ blockquote p:last-child { @@
     [data-theme="dark"] .alert--info,
     [data-theme="dark"] .theme-admonition-info {
         background-color: var(--alert-info-bg);
+        border-left-color: var(--alert-info);
+        --ifm-alert-color: var(--color-emphasized);
+        color: var(--color-emphasized);
     }
     [data-theme="dark"] .alert--warning,
     [data-theme="dark"] .theme-admonition-warning,
     [data-theme="dark"] .theme-admonition-caution {
         background-color: var(--alert-warning-bg);
+        border-left-color: var(--alert-warning);
+        --ifm-alert-color: var(--color-emphasized);
+        color: var(--color-emphasized);
     }
     [data-theme="dark"] .alert--warning .alert__heading,
@@ Expand All / @@ -180,6 +186,9 @@ blockquote p:last-child { @@
     [data-theme="dark"] .alert--danger,
     [data-theme="dark"] .theme-admonition-danger {
         background-color: var(--alert-danger-bg);
+        border-left-color: var(--alert-danger);
+        --ifm-alert-color: var(--color-emphasized);
+        color: var(--color-emphasized);
     }
     [data-theme="dark"] .alert--danger .alert__heading,
@@ Expand All / @@ -191,6 +200,9 @@ blockquote p:last-child { @@
     [data-theme="dark"] .theme-admonition-success,
     [data-theme="dark"] .theme-admonition-tip {
         background-color: var(--alert-success-bg);
+        border-left-color: var(--alert-success);
+        --ifm-alert-color: var(--color-emphasized);
+        color: var(--color-emphasized);
     }
     [data-theme="dark"] .alert--success .alert__heading,
@@ Expand All / @@ -202,6 +214,9 @@ blockquote p:last-child { @@
     [data-theme="dark"] .alert--secondary,
     [data-theme="dark"] .theme-admonition-note {
         background-color: var(--alert-note-bg);
+        border-left-color: var(--alert-note);
+        --ifm-alert-color: var(--color-emphasized);
+        color: var(--color-emphasized);
     }
     [data-theme="dark"] .alert--secondary .alert__heading,
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Implement Citizen Skin Style #22

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!