Upload folder using huggingface_hub

run.py

@@ -1,4 +1,5 @@
 import gradio as gr
+from windows95 import Windows95, WINDOWS_95_CSS
 
 # Windows 95 Theme Demo
 # This demo showcases the nostalgic Windows 95-inspired theme
@@ -138,5 +139,4 @@ with gr.Blocks() as demo:
 
 
 if __name__ == "__main__":
-    # Custom CSS is now baked into the theme - no need to pass css separately!
-    demo.launch(theme=gr.themes.Windows95())
+    demo.launch(theme=Windows95(), css=WINDOWS_95_CSS)

windows95.py

@@ -0,0 +1,1189 @@
+from __future__ import annotations
+
+from collections.abc import Iterable
+
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+# Custom CSS to style the Gradio footer as a Windows 95 taskbar
+WINDOWS_95_CSS = """
+/* Remove transforms from parent containers that break fixed positioning */
+.gradio-container,
+.gradio-container > *,
+.main,
+.wrap,
+.app,
+gradio-app,
+gradio-app > *,
+body > * {
+    transform: none !important;
+    filter: none !important;
+    perspective: none !important;
+    contain: none !important;
+    will-change: auto !important;
+}
+
+/* Windows 95 Taskbar Footer */
+footer {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    margin: 0 !important;
+    padding: 4px 8px !important;
+    background: #C0C0C0 !important;
+    border-top: 2px solid #FFFFFF !important;
+    box-shadow:
+        inset 0 1px 0 0 #DFDFDF,
+        inset 0 -1px 0 0 #808080,
+        0 -1px 0 0 #404040 !important;
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    z-index: 2147483647 !important;
+    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important;
+    height: auto !important;
+    min-height: 32px !important;
+    transform: none !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+}
+
+/* Style footer buttons like Windows 95 taskbar buttons */
+footer button,
+footer a {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border: none !important;
+    padding: 4px 12px !important;
+    margin: 0 2px !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important;
+    font-size: 12px !important;
+}
+
+footer button:hover,
+footer a:hover {
+    color: #000000 !important;
+}
+
+footer button:active,
+footer a:active {
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #DFDFDF !important;
+}
+
+/* Hide the dividers */
+footer .divider {
+    display: none !important;
+}
+
+/* Style the images/icons */
+footer img {
+    filter: none !important;
+}
+
+/* Add padding to main content to account for fixed footer */
+.gradio-container {
+    padding-bottom: 50px !important;
+}
+
+/* Ensure footer stays fixed even in flex/grid containers */
+.main,
+.wrap,
+.app {
+    padding-bottom: 50px !important;
+}
+
+/* Start button style for the first button (if desired) */
+footer button:first-of-type,
+footer a:first-of-type {
+    font-weight: bold !important;
+}
+
+/* System tray style for the last elements - sunken appearance */
+footer button:last-of-type,
+footer .settings {
+    margin-left: auto !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF,
+        inset 2px 2px 0px 0px #404040,
+        inset -2px -2px 0px 0px #DFDFDF !important;
+}
+
+/* API docs panel styling - gray background like Windows 95 */
+.api-docs-wrap,
+#api-recorder-container {
+    background: #C0C0C0 !important;
+}
+
+/* API name badges - navy background needs white text */
+.post,
+h3 .post,
+span.post {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+    border-color: #000080 !important;
+}
+
+/* Parameter type badges in API docs - the highlight class */
+.highlight,
+span.highlight,
+.code.highlight {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+    padding: 2px 6px !important;
+}
+
+/* Parameter type badges in API docs */
+.type,
+.param-type,
+.parameter-type {
+    color: #FFFFFF !important;
+    background: #000080 !important;
+    padding: 2px 6px !important;
+}
+
+/* Required/Optional badges */
+span[class*="required"],
+span[class*="optional"],
+.required,
+.optional {
+    color: #FFFFFF !important;
+}
+
+/* ===== Windows 95 Copy Button ===== */
+.copy-button,
+button[class*="copy"],
+[class*="copy-button"] {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 4px 12px !important;
+    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important;
+    font-size: 12px !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+}
+
+.copy-button:hover,
+button[class*="copy"]:hover,
+[class*="copy-button"]:hover {
+    background: #C0C0C0 !important;
+}
+
+.copy-button:active,
+button[class*="copy"]:active,
+[class*="copy-button"]:active {
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #DFDFDF !important;
+}
+
+/* Copy button icons */
+.copy-button svg,
+button[class*="copy"] svg {
+    color: #000000 !important;
+    fill: #000000 !important;
+}
+
+/* The "Copy Page" dropdown button - be specific to avoid breaking footer */
+.api-docs-wrap [class*="dropdown"] button,
+.api-docs-wrap .dropdown-toggle,
+.api-docs-wrap button[aria-haspopup="true"] {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+}
+
+/* ===== Windows 95 Dropdown Menus ===== */
+[role="menu"],
+[role="listbox"],
+.dropdown-menu,
+div[class*="dropdown"] > div,
+ul[class*="menu"],
+div[class*="menu"]:not(.overflow-menu) {
+    background: #C0C0C0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 2px !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF,
+        4px 4px 0px 0px rgba(0,0,0,0.3) !important;
+}
+
+/* Dropdown menu items */
+[role="menu"] button,
+[role="menu"] a,
+[role="menuitem"],
+.dropdown-menu button,
+.dropdown-menu a,
+div[class*="dropdown"] button,
+div[class*="dropdown"] a {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 4px 24px 4px 8px !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    text-align: left !important;
+    display: block !important;
+    width: 100% !important;
+}
+
+[role="menu"] button:hover,
+[role="menu"] a:hover,
+[role="menuitem"]:hover,
+.dropdown-menu button:hover,
+.dropdown-menu a:hover,
+div[class*="dropdown"] button:hover,
+div[class*="dropdown"] a:hover {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+/* Menu item descriptions/subtitles */
+[role="menu"] span,
+[role="menu"] p,
+.dropdown-menu span,
+.dropdown-menu p {
+    color: inherit !important;
+}
+
+/* Menu icons */
+[role="menu"] svg,
+.dropdown-menu svg {
+    color: inherit !important;
+    fill: currentColor !important;
+}
+
+/* Any element using color-accent-soft as background needs white text */
+[style*="color-accent-soft"],
+[style*="accent"] {
+    color: #FFFFFF !important;
+}
+
+/* Code blocks - keep readable with white background */
+pre {
+    background: #FFFFFF !important;
+    color: #000000 !important;
+    box-shadow: inset 1px 1px 0px 0px #808080,
+                inset -1px -1px 0px 0px #FFFFFF,
+                inset 2px 2px 0px 0px #404040,
+                inset -2px -2px 0px 0px #DFDFDF !important;
+}
+
+pre code,
+code {
+    background: transparent !important;
+    color: #000000 !important;
+}
+
+/* API name in code snippets - keep the accent color visible */
+pre .api-name,
+code .api-name {
+    color: #000080 !important;
+}
+
+/* Highlighted text in code - navy background needs white text */
+pre .highlight,
+pre span.highlight,
+code .highlight,
+code span.highlight {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+/* String literals in code */
+pre .token.string,
+.token.string {
+    color: #008000 !important;
+}
+
+/* Syntax highlighting keywords with navy background need white text */
+pre span[style*="background"],
+code span[style*="background"],
+pre .keyword,
+pre .builtin,
+pre .function-name,
+code .keyword,
+code .builtin {
+    color: #FFFFFF !important;
+}
+
+/* ===== Windows 95 Style Tabs ===== */
+/* Remove gap between tabs and content */
+.tabs {
+    gap: 0 !important;
+}
+
+/* Tab container - remove the modern underline */
+.tab-container::after {
+    display: none !important;
+}
+
+.tab-wrapper {
+    padding-bottom: 0 !important;
+    margin-bottom: -2px !important;
+    border-bottom: none !important;
+    background: transparent !important;
+    z-index: 1 !important;
+    position: relative !important;
+}
+
+/* Individual tab buttons - raised 3D folder tab style */
+.tab-container button,
+.tabs button[role="tab"] {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 4px 16px !important;
+    margin: 0 !important;
+    margin-right: -1px !important;
+    position: relative !important;
+    bottom: -2px !important;
+    font-weight: 400 !important;
+    /* 3D raised effect for inactive tabs */
+    box-shadow:
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -1px 0px 0px 0px #808080,
+        inset 2px 2px 0px 0px #DFDFDF,
+        inset -2px 0px 0px 0px #404040,
+        0px -1px 0px 0px #FFFFFF !important;
+    /* Clip the bottom to show connection */
+    border-bottom: 2px solid #C0C0C0 !important;
+}
+
+/* Inactive tabs - slightly darker/recessed look */
+.tab-container button:not(.selected),
+.tabs button[role="tab"]:not(.selected) {
+    background: #C0C0C0 !important;
+    border-bottom: 2px solid #808080 !important;
+    margin-bottom: 0 !important;
+}
+
+/* Hover state for non-selected tabs */
+.tab-container button:hover:not(.selected),
+.tabs button[role="tab"]:hover:not(.selected) {
+    background: #C0C0C0 !important;
+}
+
+/* Selected tab - connected to content below */
+.tab-container button.selected,
+.tabs button[role="tab"].selected,
+.tabs button[role="tab"][aria-selected="true"] {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+    border-bottom: 2px solid #C0C0C0 !important;
+    z-index: 2 !important;
+    /* Full raised 3D effect */
+    box-shadow:
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -1px 0px 0px 0px #808080,
+        inset 2px 2px 0px 0px #DFDFDF,
+        inset -2px 0px 0px 0px #404040 !important;
+}
+
+/* Remove the modern accent underline from selected tab */
+.tab-container button.selected::after,
+.tabs button[role="tab"].selected::after,
+.tabs button[role="tab"][aria-selected="true"]::after {
+    display: none !important;
+}
+
+/* Tab content panel */
+.tabs > :not(.tab-wrapper):not(style) {
+    background: #C0C0C0 !important;
+    border: none !important;
+    border-top: 2px solid #808080 !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 0px 0px 0px #FFFFFF,
+        inset 0px 1px 0px 0px #FFFFFF,
+        -2px -2px 0px 0px #404040,
+        2px 2px 0px 0px #DFDFDF !important;
+    padding: 8px !important;
+    margin-top: 0 !important;
+}
+
+/* Overflow menu button */
+.overflow-menu > button {
+    background: #C0C0C0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+}
+
+/* Overflow dropdown */
+.overflow-dropdown {
+    background: #C0C0C0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF,
+        2px 2px 4px rgba(0,0,0,0.3) !important;
+}
+
+.overflow-dropdown button {
+    background: #C0C0C0 !important;
+    color: #000000 !important;
+}
+
+.overflow-dropdown button:hover {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+.overflow-dropdown button.selected {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+/* ===== Windows 95 Scrollbars ===== */
+* {
+    scrollbar-width: auto;
+    scrollbar-color: #C0C0C0 #DFDFDF;
+}
+
+*::-webkit-scrollbar {
+    width: 16px !important;
+    height: 16px !important;
+}
+
+*::-webkit-scrollbar-track {
+    background: #DFDFDF !important;
+    background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23C0C0C0'/%3E%3C/svg%3E") !important;
+    background-size: 2px 2px !important;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #C0C0C0 !important;
+    border: none !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+}
+
+*::-webkit-scrollbar-button {
+    background: #C0C0C0 !important;
+    border: none !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+    display: block !important;
+    height: 16px !important;
+    width: 16px !important;
+}
+
+/* ===== Windows 95 Tooltips ===== */
+[data-tooltip],
+[title],
+.tooltip,
+[role="tooltip"] {
+    --tooltip-bg: #FFFFE1 !important;
+    --tooltip-color: #000000 !important;
+}
+
+/* ===== Windows 95 Selection ===== */
+::selection {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+::-moz-selection {
+    background: #000080 !important;
+    color: #FFFFFF !important;
+}
+
+/* ===== Windows 95 Focus Ring ===== */
+*:focus {
+    outline: 1px dotted #000000 !important;
+    outline-offset: -4px !important;
+}
+
+button:focus,
+input:focus,
+textarea:focus,
+select:focus {
+    outline: 1px dotted #000000 !important;
+    outline-offset: 2px !important;
+}
+
+/* ===== Windows 95 Disabled State ===== */
+button:disabled,
+input:disabled,
+textarea:disabled,
+select:disabled,
+[disabled] {
+    color: #808080 !important;
+    text-shadow: 1px 1px 0px #FFFFFF !important;
+    cursor: not-allowed !important;
+}
+
+/* ===== Windows 95 Progress Bar ===== */
+progress,
+.progress-bar,
+[role="progressbar"] {
+    background: #C0C0C0 !important;
+    border: none !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF,
+        inset 2px 2px 0px 0px #404040,
+        inset -2px -2px 0px 0px #DFDFDF !important;
+    height: 20px !important;
+    border-radius: 0 !important;
+}
+
+progress::-webkit-progress-bar {
+    background: #C0C0C0 !important;
+    border-radius: 0 !important;
+}
+
+progress::-webkit-progress-value {
+    background: repeating-linear-gradient(
+        90deg,
+        #000080 0px,
+        #000080 8px,
+        #C0C0C0 8px,
+        #C0C0C0 10px
+    ) !important;
+    border-radius: 0 !important;
+}
+
+progress::-moz-progress-bar {
+    background: repeating-linear-gradient(
+        90deg,
+        #000080 0px,
+        #000080 8px,
+        #C0C0C0 8px,
+        #C0C0C0 10px
+    ) !important;
+    border-radius: 0 !important;
+}
+
+/* ===== Windows 95 Accordion/Group Box ===== */
+.accordion,
+details,
+fieldset,
+.group {
+    border: none !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -1px -1px 0px 0px #808080 !important;
+    background: #C0C0C0 !important;
+    padding: 8px !important;
+    margin: 4px 0 !important;
+}
+
+/* ===== Windows 95 Dropdown/Select ===== */
+select,
+.dropdown,
+[role="listbox"] {
+    background: #FFFFFF !important;
+    border: none !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF,
+        inset 2px 2px 0px 0px #404040,
+        inset -2px -2px 0px 0px #DFDFDF !important;
+    border-radius: 0 !important;
+    padding: 2px 4px !important;
+}
+
+/* ===== Windows 95 Slider/Range ===== */
+input[type="range"] {
+    -webkit-appearance: none !important;
+    background: transparent !important;
+    height: 24px !important;
+}
+
+input[type="range"]::-webkit-slider-track {
+    background: #C0C0C0 !important;
+    height: 4px !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF !important;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    width: 12px !important;
+    height: 20px !important;
+    background: #C0C0C0 !important;
+    border: none !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #FFFFFF,
+        inset -2px -2px 0px 0px #404040,
+        inset 2px 2px 0px 0px #DFDFDF !important;
+    cursor: pointer !important;
+    margin-top: -8px !important;
+}
+
+/* ===== Windows 95 Labels with Icons ===== */
+.label-wrap label::before,
+.block-label span::before {
+    /* Could add a small icon here */
+}
+
+/* ===== Windows 95 Image/Media containers ===== */
+.image-container,
+.video-container,
+.gallery {
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF,
+        inset 2px 2px 0px 0px #404040,
+        inset -2px -2px 0px 0px #DFDFDF !important;
+}
+
+/* Exclude small icons from bezel effect */
+footer img,
+button img,
+a img,
+svg {
+    box-shadow: none !important;
+}
+
+/* ===== Windows 95 File Upload ===== */
+.upload-container,
+.file-upload,
+[type="file"] {
+    background: #C0C0C0 !important;
+    border: 2px dashed #808080 !important;
+    border-radius: 0 !important;
+}
+
+/* ===== Windows 95 Loading/Hourglass Cursor ===== */
+.pending,
+.loading,
+[aria-busy="true"] {
+    cursor: wait !important;
+}
+
+/* ===== Windows 95 Markdown/Prose ===== */
+.prose h1,
+.prose h2,
+.prose h3,
+.markdown h1,
+.markdown h2,
+.markdown h3,
+h1, h2, h3 {
+    color: #000000 !important;
+    font-weight: bold !important;
+    border-bottom: none !important;
+}
+
+/* ===== Windows 95 Horizontal Rule ===== */
+hr {
+    border: none !important;
+    height: 2px !important;
+    background: linear-gradient(to bottom, #808080 0%, #808080 50%, #FFFFFF 50%, #FFFFFF 100%) !important;
+    margin: 8px 0 !important;
+}
+
+/* ===== Windows 95 Blockquote ===== */
+blockquote {
+    background: #FFFFFF !important;
+    border-left: 4px solid #000080 !important;
+    padding: 8px !important;
+    margin: 8px 0 !important;
+    box-shadow:
+        inset 1px 1px 0px 0px #808080,
+        inset -1px -1px 0px 0px #FFFFFF !important;
+}
+
+/* ===== Windows 95 Chatbot Messages ===== */
+.message,
+.chat-message,
+[class*="message"] {
+    border-radius: 0 !important;
+}
+
+.user-message,
+[class*="user"] {
+    background: #FFFFFF !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #DFDFDF !important;
+}
+
+.bot-message,
+[class*="bot"],
+[class*="assistant"] {
+    background: #FFFFC0 !important;
+    box-shadow:
+        inset -1px -1px 0px 0px #808080,
+        inset 1px 1px 0px 0px #DFDFDF !important;
+}
+
+/* ===== Windows 95 Loading Animation ===== */
+@keyframes win95-loading {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 100% 0%; }
+}
+
+.loading-indicator,
+.loader {
+    background: repeating-linear-gradient(
+        90deg,
+        #000080 0px,
+        #000080 16px,
+        transparent 16px,
+        transparent 20px
+    ) !important;
+    background-size: 200% 100% !important;
+    animation: win95-loading 1s linear infinite !important;
+}
+"""
+
+
+class Windows95Gray(colors.Color):
+    """Custom color palette matching Windows 95 system colors."""
+
+    def __init__(self):
+        super().__init__(
+            c50="#FFFFFF",  # Window background / highlight
+            c100="#DFDFDF",  # Light gray
+            c200="#C0C0C0",  # Button face / 3D objects (classic silver)
+            c300="#A0A0A0",  # Disabled text / inactive elements
+            c400="#808080",  # Button shadow / 3D dark shadow
+            c500="#606060",  # Dark elements
+            c600="#404040",  # Darker elements
+            c700="#303030",  # Very dark
+            c800="#202020",  # Near black
+            c900="#000000",  # Window text (black)
+            c950="#000000",  # Pure black
+            name="win95gray",
+        )
+
+
+class Windows95Blue(colors.Color):
+    """Windows 95 navy blue for title bars and selections."""
+
+    def __init__(self):
+        super().__init__(
+            c50="#E6E6FF",  # Lightest blue
+            c100="#CCCCFF",  # Light blue
+            c200="#9999FF",  # Medium light blue
+            c300="#6666FF",  # Medium blue
+            c400="#3333CC",  # Blue
+            c500="#000080",  # Navy blue (active title bar)
+            c600="#000066",  # Dark navy
+            c700="#000055",  # Darker navy
+            c800="#000044",  # Very dark navy
+            c900="#000033",  # Nearly black navy
+            c950="#000022",  # Darkest navy
+            name="win95blue",
+        )
+
+
+class Windows95Teal(colors.Color):
+    """Windows 95 teal accent color."""
+
+    def __init__(self):
+        super().__init__(
+            c50="#E0FFFF",  # Lightest teal
+            c100="#B0FFFF",  # Light teal
+            c200="#80FFFF",  # Medium light teal
+            c300="#40E0E0",  # Medium teal
+            c400="#20C0C0",  # Teal
+            c500="#008080",  # Classic teal (desktop default)
+            c600="#006666",  # Dark teal
+            c700="#005555",  # Darker teal
+            c800="#004444",  # Very dark teal
+            c900="#003333",  # Nearly black teal
+            c950="#002222",  # Darkest teal
+            name="win95teal",
+        )
+
+
+# Windows 95 3D border shadow effects
+WIN95_SHADOW_RAISED = "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF"
+WIN95_SHADOW_SUNKEN = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF"
+WIN95_SHADOW_PRESSED = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF"
+WIN95_SHADOW_ETCHED = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF"
+
+
+class Windows95(Base):
+    """
+    A nostalgic theme inspired by Microsoft Windows 95.
+
+    Features the classic gray interface, 3D beveled buttons,
+    sunken input fields, and the iconic system font styling.
+    """
+
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = None,
+        secondary_hue: colors.Color | str = None,
+        neutral_hue: colors.Color | str = None,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_none,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font | str | Iterable[fonts.Font | str] = (
+            "MS Sans Serif",
+            "Tahoma",
+            "Segoe UI",
+            "Arial",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
+            "Fixedsys",
+            "Consolas",
+            "Courier New",
+            "monospace",
+        ),
+    ):
+        # Use our custom Windows 95 color palettes
+        if primary_hue is None:
+            primary_hue = Windows95Blue()
+        if secondary_hue is None:
+            secondary_hue = Windows95Teal()
+        if neutral_hue is None:
+            neutral_hue = Windows95Gray()
+
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+            custom_css=WINDOWS_95_CSS,
+        )
+
+        self.name = "windows95"
+
+        super().set(
+            # ===== Body / Background =====
+            # Classic gray desktop background
+            body_background_fill="#008080",  # Teal desktop
+            body_background_fill_dark="#008080",
+            body_text_color="#000000",
+            body_text_color_dark="#000000",
+            body_text_color_subdued="#808080",
+            body_text_color_subdued_dark="#808080",
+            body_text_weight="400",
+            # ===== Core Element Colors =====
+            # Window/panel backgrounds
+            background_fill_primary="#C0C0C0",  # Silver gray
+            background_fill_primary_dark="#C0C0C0",
+            background_fill_secondary="#C0C0C0",
+            background_fill_secondary_dark="#C0C0C0",
+            # Border colors
+            border_color_primary="#808080",
+            border_color_primary_dark="#808080",
+            border_color_accent="#000080",  # Navy blue accent
+            border_color_accent_dark="#000080",
+            # Accent colors (selection, highlights)
+            color_accent="#000080",  # Navy blue
+            color_accent_soft="#000080",  # Navy blue for badges/tags
+            color_accent_soft_dark="#000080",
+            # ===== Links =====
+            link_text_color="#0000FF",  # Classic blue links
+            link_text_color_dark="#0000FF",
+            link_text_color_hover="#0000FF",
+            link_text_color_hover_dark="#0000FF",
+            link_text_color_active="#800080",  # Purple when active
+            link_text_color_active_dark="#800080",
+            link_text_color_visited="#800080",  # Purple visited
+            link_text_color_visited_dark="#800080",
+            # ===== Text Styling =====
+            prose_text_size="*text_md",
+            prose_text_weight="400",
+            prose_header_text_weight="700",
+            code_background_fill="#FFFFFF",
+            code_background_fill_dark="#FFFFFF",
+            # ===== Shadows (3D Beveled Effects) =====
+            shadow_drop="none",
+            shadow_drop_lg="none",
+            shadow_inset=WIN95_SHADOW_SUNKEN,
+            shadow_spread="0px",
+            shadow_spread_dark="0px",
+            # ===== Block/Container Styling =====
+            # Main content blocks with raised 3D effect
+            block_background_fill="#C0C0C0",
+            block_background_fill_dark="#C0C0C0",
+            block_border_color="#808080",
+            block_border_color_dark="#808080",
+            block_border_width="2px",
+            block_border_width_dark="2px",
+            block_padding="*spacing_md",
+            block_radius="0px",
+            block_shadow=WIN95_SHADOW_RAISED,
+            block_shadow_dark=WIN95_SHADOW_RAISED,
+            # Block labels (like window title bars)
+            block_label_background_fill="#000080",  # Navy title bar
+            block_label_background_fill_dark="#000080",
+            block_label_text_color="#FFFFFF",  # White text on title bar
+            block_label_text_color_dark="#FFFFFF",
+            block_label_border_color="#000080",
+            block_label_border_color_dark="#000080",
+            block_label_border_width="0px",
+            block_label_border_width_dark="0px",
+            block_label_padding="*spacing_xs *spacing_sm",
+            block_label_margin="0",
+            block_label_radius="0px",
+            block_label_text_size="*text_sm",
+            block_label_text_weight="700",
+            block_label_shadow="none",
+            block_label_right_radius="0px",
+            # Block titles
+            block_title_background_fill="transparent",
+            block_title_background_fill_dark="transparent",
+            block_title_text_color="#000000",
+            block_title_text_color_dark="#000000",
+            block_title_border_color="transparent",
+            block_title_border_color_dark="transparent",
+            block_title_border_width="0px",
+            block_title_border_width_dark="0px",
+            block_title_padding="*spacing_xs 0",
+            block_title_radius="0px",
+            block_title_text_size="*text_sm",
+            block_title_text_weight="700",
+            # Block info
+            block_info_text_color="#000000",
+            block_info_text_color_dark="#000000",
+            block_info_text_size="*text_sm",
+            block_info_text_weight="400",
+            # ===== Panel Styling =====
+            panel_background_fill="#C0C0C0",
+            panel_background_fill_dark="#C0C0C0",
+            panel_border_color="#808080",
+            panel_border_color_dark="#808080",
+            panel_border_width="2px",
+            panel_border_width_dark="2px",
+            # ===== Layout =====
+            container_radius="0px",
+            form_gap_width="1px",
+            layout_gap="*spacing_md",
+            section_header_text_size="*text_md",
+            section_header_text_weight="700",
+            embed_radius="0px",
+            # ===== Input Fields (Sunken 3D Effect) =====
+            input_background_fill="#FFFFFF",  # White input fields
+            input_background_fill_dark="#FFFFFF",
+            input_background_fill_focus="#FFFFFF",
+            input_background_fill_focus_dark="#FFFFFF",
+            input_background_fill_hover="#FFFFFF",
+            input_background_fill_hover_dark="#FFFFFF",
+            input_border_color="#808080",
+            input_border_color_dark="#808080",
+            input_border_color_focus="#000080",  # Navy when focused
+            input_border_color_focus_dark="#000080",
+            input_border_color_hover="#808080",
+            input_border_color_hover_dark="#808080",
+            input_border_width="2px",
+            input_border_width_dark="2px",
+            input_padding="*spacing_sm",
+            input_radius="0px",
+            input_shadow=WIN95_SHADOW_SUNKEN,
+            input_shadow_dark=WIN95_SHADOW_SUNKEN,
+            input_shadow_focus=WIN95_SHADOW_SUNKEN,
+            input_shadow_focus_dark=WIN95_SHADOW_SUNKEN,
+            input_text_size="*text_md",
+            input_text_weight="400",
+            input_placeholder_color="#808080",
+            input_placeholder_color_dark="#808080",
+            # ===== Buttons (Raised 3D Effect) =====
+            button_border_width="2px",
+            button_border_width_dark="2px",
+            button_transition="none",
+            button_transform_hover="none",
+            button_transform_active="none",
+            # Large buttons
+            button_large_padding="*spacing_sm *spacing_lg",
+            button_large_radius="0px",
+            button_large_text_size="*text_md",
+            button_large_text_weight="400",
+            # Medium buttons
+            button_medium_padding="*spacing_xs *spacing_md",
+            button_medium_radius="0px",
+            button_medium_text_size="*text_md",
+            button_medium_text_weight="400",
+            # Small buttons
+            button_small_padding="*spacing_xs *spacing_sm",
+            button_small_radius="0px",
+            button_small_text_size="*text_sm",
+            button_small_text_weight="400",
+            # Primary button (like OK button)
+            button_primary_background_fill="#C0C0C0",
+            button_primary_background_fill_dark="#C0C0C0",
+            button_primary_background_fill_hover="#C0C0C0",
+            button_primary_background_fill_hover_dark="#C0C0C0",
+            button_primary_border_color="#000000",
+            button_primary_border_color_dark="#000000",
+            button_primary_border_color_hover="#000000",
+            button_primary_border_color_hover_dark="#000000",
+            button_primary_text_color="#000000",
+            button_primary_text_color_dark="#000000",
+            button_primary_text_color_hover="#000000",
+            button_primary_text_color_hover_dark="#000000",
+            button_primary_shadow=WIN95_SHADOW_RAISED,
+            button_primary_shadow_dark=WIN95_SHADOW_RAISED,
+            button_primary_shadow_hover=WIN95_SHADOW_RAISED,
+            button_primary_shadow_hover_dark=WIN95_SHADOW_RAISED,
+            button_primary_shadow_active=WIN95_SHADOW_PRESSED,
+            button_primary_shadow_active_dark=WIN95_SHADOW_PRESSED,
+            # Secondary button
+            button_secondary_background_fill="#C0C0C0",
+            button_secondary_background_fill_dark="#C0C0C0",
+            button_secondary_background_fill_hover="#C0C0C0",
+            button_secondary_background_fill_hover_dark="#C0C0C0",
+            button_secondary_border_color="#808080",
+            button_secondary_border_color_dark="#808080",
+            button_secondary_border_color_hover="#808080",
+            button_secondary_border_color_hover_dark="#808080",
+            button_secondary_text_color="#000000",
+            button_secondary_text_color_dark="#000000",
+            button_secondary_text_color_hover="#000000",
+            button_secondary_text_color_hover_dark="#000000",
+            button_secondary_shadow=WIN95_SHADOW_RAISED,
+            button_secondary_shadow_dark=WIN95_SHADOW_RAISED,
+            button_secondary_shadow_hover=WIN95_SHADOW_RAISED,
+            button_secondary_shadow_hover_dark=WIN95_SHADOW_RAISED,
+            button_secondary_shadow_active=WIN95_SHADOW_PRESSED,
+            button_secondary_shadow_active_dark=WIN95_SHADOW_PRESSED,
+            # Cancel button
+            button_cancel_background_fill="#C0C0C0",
+            button_cancel_background_fill_dark="#C0C0C0",
+            button_cancel_background_fill_hover="#C0C0C0",
+            button_cancel_background_fill_hover_dark="#C0C0C0",
+            button_cancel_border_color="#808080",
+            button_cancel_border_color_dark="#808080",
+            button_cancel_border_color_hover="#808080",
+            button_cancel_border_color_hover_dark="#808080",
+            button_cancel_text_color="#000000",
+            button_cancel_text_color_dark="#000000",
+            button_cancel_text_color_hover="#000000",
+            button_cancel_text_color_hover_dark="#000000",
+            button_cancel_shadow=WIN95_SHADOW_RAISED,
+            button_cancel_shadow_dark=WIN95_SHADOW_RAISED,
+            button_cancel_shadow_hover=WIN95_SHADOW_RAISED,
+            button_cancel_shadow_hover_dark=WIN95_SHADOW_RAISED,
+            button_cancel_shadow_active=WIN95_SHADOW_PRESSED,
+            button_cancel_shadow_active_dark=WIN95_SHADOW_PRESSED,
+            # ===== Checkboxes and Radio Buttons =====
+            checkbox_background_color="#FFFFFF",
+            checkbox_background_color_dark="#FFFFFF",
+            checkbox_background_color_focus="#FFFFFF",
+            checkbox_background_color_focus_dark="#FFFFFF",
+            checkbox_background_color_hover="#FFFFFF",
+            checkbox_background_color_hover_dark="#FFFFFF",
+            checkbox_background_color_selected="#FFFFFF",
+            checkbox_background_color_selected_dark="#FFFFFF",
+            checkbox_border_color="#808080",
+            checkbox_border_color_dark="#808080",
+            checkbox_border_color_focus="#000080",
+            checkbox_border_color_focus_dark="#000080",
+            checkbox_border_color_hover="#808080",
+            checkbox_border_color_hover_dark="#808080",
+            checkbox_border_color_selected="#808080",
+            checkbox_border_color_selected_dark="#808080",
+            checkbox_border_radius="0px",
+            checkbox_border_width="2px",
+            checkbox_border_width_dark="2px",
+            checkbox_shadow=WIN95_SHADOW_SUNKEN,
+            # Checkbox check mark (black check)
+            checkbox_check="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")",
+            # Radio button circle (black dot)
+            radio_circle="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e\")",
+            # Checkbox labels (button-like appearance)
+            checkbox_label_background_fill="#C0C0C0",
+            checkbox_label_background_fill_dark="#C0C0C0",
+            checkbox_label_background_fill_hover="#C0C0C0",
+            checkbox_label_background_fill_hover_dark="#C0C0C0",
+            checkbox_label_background_fill_selected="#000080",  # Navy when selected
+            checkbox_label_background_fill_selected_dark="#000080",
+            checkbox_label_border_color="#808080",
+            checkbox_label_border_color_dark="#808080",
+            checkbox_label_border_color_hover="#808080",
+            checkbox_label_border_color_hover_dark="#808080",
+            checkbox_label_border_color_selected="#000080",
+            checkbox_label_border_color_selected_dark="#000080",
+            checkbox_label_border_width="2px",
+            checkbox_label_border_width_dark="2px",
+            checkbox_label_padding="*spacing_xs *spacing_sm",
+            checkbox_label_gap="*spacing_sm",
+            checkbox_label_shadow=WIN95_SHADOW_RAISED,
+            checkbox_label_text_size="*text_md",
+            checkbox_label_text_weight="400",
+            checkbox_label_text_color="#000000",
+            checkbox_label_text_color_dark="#000000",
+            checkbox_label_text_color_selected="#FFFFFF",  # White on navy
+            checkbox_label_text_color_selected_dark="#FFFFFF",
+            # ===== Tables =====
+            table_border_color="#808080",
+            table_border_color_dark="#808080",
+            table_even_background_fill="#FFFFFF",
+            table_even_background_fill_dark="#FFFFFF",
+            table_odd_background_fill="#C0C0C0",
+            table_odd_background_fill_dark="#C0C0C0",
+            table_radius="0px",
+            table_row_focus="#000080",
+            table_row_focus_dark="#000080",
+            table_text_color="#000000",
+            table_text_color_dark="#000000",
+            # ===== Accordion =====
+            accordion_text_color="#000000",
+            accordion_text_color_dark="#000000",
+            # ===== Slider =====
+            slider_color="#000080",  # Navy slider
+            slider_color_dark="#000080",
+            # ===== Loader =====
+            loader_color="#000080",  # Navy loading indicator
+            loader_color_dark="#000080",
+            # ===== Chatbot =====
+            chatbot_text_size="*text_md",
+            # ===== Errors =====
+            error_background_fill="#FFFFFF",
+            error_background_fill_dark="#FFFFFF",
+            error_border_color="#FF0000",  # Red error border
+            error_border_color_dark="#FF0000",
+            error_border_width="2px",
+            error_border_width_dark="2px",
+            error_text_color="#FF0000",  # Red error text
+            error_text_color_dark="#FF0000",
+            error_icon_color="#FF0000",
+            error_icon_color_dark="#FF0000",
+            # ===== Stats =====
+            stat_background_fill="#000080",  # Navy stat bars
+            stat_background_fill_dark="#000080",
+        )