tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
434 lines (374 loc) • 15.8 kB
CSS
:root {
/* Fonts - GitHub uses system fonts with -apple-system */
--themeDefaultFontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--themeControlFontFamily: var(--themeDefaultFontFamily);
--themeLabelFontFamily: var(--themeDefaultFontFamily);
--themeMonospaceFont: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
--themeSystemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
--textFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
--labelFont: normal normal 600 12px/1.333333 var(--themeLabelFontFamily);
/* GitHub Dark Color Palette */
--githubCanvas: #0d1117;
--githubCanvasDefault: #0d1117;
--githubCanvasSubtle: #161b22;
--githubCanvasInset: #010409;
--githubCanvasOverlay: #161b22;
/* Foreground colors */
--githubFgDefault: #c9d1d9;
--githubFgMuted: #8b949e;
--githubFgSubtle: #6e7681;
--githubFgOnEmphasis: #ffffff;
/* Border colors */
--githubBorderDefault: #30363d;
--githubBorderMuted: #21262d;
--githubBorderSubtle: rgba(240, 246, 252, 0.1);
/* Accent colors */
--githubAccentFg: #58a6ff;
--githubAccentEmphasis: #1f6feb;
--githubAccentMuted: rgba(56, 139, 253, 0.4);
--githubAccentSubtle: rgba(56, 139, 253, 0.15);
/* Success colors */
--githubSuccessFg: #3fb950;
--githubSuccessEmphasis: #238636;
--githubSuccessSubtle: rgba(63, 185, 80, 0.15);
/* Attention/Warning colors */
--githubAttentionFg: #d29922;
--githubAttentionEmphasis: #9e6a03;
--githubAttentionSubtle: rgba(187, 128, 9, 0.15);
/* Danger/Error colors */
--githubDangerFg: #f85149;
--githubDangerEmphasis: #da3633;
--githubDangerSubtle: rgba(248, 81, 73, 0.15);
/* Neutral colors */
--githubNeutralEmphasis: #6e7681;
--githubNeutralMuted: rgba(110, 118, 129, 0.4);
--githubNeutralSubtle: rgba(110, 118, 129, 0.1);
/* Special colors */
--githubDoneFg: #a371f7;
--githubDoneEmphasis: #8957e5;
--githubSponsorsFg: #db61a2;
--githubSponsorsEmphasis: #bf4b8a;
/* Core Colors */
--textColor: var(--githubFgDefault);
--accentColor: var(--githubAccentFg);
--cautionColor: var(--githubDangerFg);
accent-color: var(--accentColor);
/* Background Colors */
--windowBackgroundColor: var(--githubCanvasDefault);
--backgroundSecondary: var(--githubCanvasSubtle);
--backgroundTertiary: var(--githubCanvasInset);
--backgroundHover: rgba(177, 186, 196, 0.12);
--backgroundActive: rgba(177, 186, 196, 0.2);
/* No backdrop filters for GitHub style */
--backgroundBackdropFilter: none;
--windowBackdropFilter: none;
/* Window Shadow */
--windowBoxShadow: 0 0 0 1px var(--githubBorderDefault);
/* Scrollbar Colors */
--scrollBarBackgroundColor: transparent;
--scrollBarThumbColor: rgba(110, 118, 129, 0.4);
--activeScrollBarThumbColor: rgba(110, 118, 129, 0.7);
/* Text Colors */
--labelColor: var(--githubFgDefault);
--secondaryLabelColor: var(--githubFgMuted);
--tertiaryLabelColor: var(--githubFgSubtle);
--quaternaryLabelColor: var(--githubNeutralEmphasis);
--placeholderTextColor: var(--githubFgSubtle);
--selectedTextColor: var(--githubFgOnEmphasis);
--textBackgroundColor: var(--windowBackgroundColor);
--selectedTextBackgroundColor: var(--githubAccentEmphasis);
--keyboardFocusIndicatorColor: var(--githubAccentMuted);
--unemphasizedSelectedTextColor: var(--githubFgDefault);
--unemphasizedSelectedTextBackgroundColor: var(--githubNeutralSubtle);
--linkColor: var(--githubAccentFg);
--separatorColor: var(--githubBorderDefault);
--selectedContentBackgroundColor: var(--githubAccentEmphasis);
--unemphasizedSelectedContentBackgroundColor: var(--githubNeutralSubtle);
--selectedMenuItemTextColor: var(--githubFgOnEmphasis);
--gridColor: var(--githubBorderDefault);
--headerTextColor: var(--githubFgDefault);
/* Control Colors */
--controlAccentColor: var(--githubAccentFg);
--controlColor: var(--githubCanvasSubtle);
--controlTextColor: var(--githubFgDefault);
--disabledControlTextColor: var(--githubFgSubtle);
--selectedControlColor: var(--githubAccentSubtle);
--selectedControlTextColor: var(--githubFgDefault);
--alternateSelectedControlTextColor: var(--githubFgOnEmphasis);
--scrubberTexturedBackgroundColor: var(--githubCanvasSubtle);
--windowFrameTextColor: var(--githubFgDefault);
--underPageBackgroundColor: var(--githubCanvasInset);
--findHighlightColor: #ffd33d;
--highlightColor: var(--githubFgOnEmphasis);
--shadowColor: rgba(0, 0, 0, 1);
/* System Colors */
--systemBrownColor: #bb8009;
--systemGrayColor: var(--githubFgSubtle);
--systemGreenColor: var(--githubSuccessFg);
--systemIndigoColor: var(--githubDoneFg);
--systemOrangeColor: var(--githubAttentionFg);
--systemPinkColor: var(--githubSponsorsFg);
--systemPurpleColor: var(--githubDoneFg);
--systemRedColor: var(--githubDangerFg);
--systemTealColor: #79c0ff;
--systemYellowColor: #ffd33d;
--systemBlueColor: var(--githubAccentFg);
/* Table */
--tableBackgroundColor: var(--githubCanvasDefault);
--tableBorderColor: var(--githubBorderDefault);
--tableHeaderTextColor: var(--githubFgDefault);
--tableHeaderBackgroundColor: var(--githubCanvasSubtle);
--tableHeaderBorderColor: var(--githubBorderDefault);
--tableRowTextColor: var(--githubFgDefault);
--tableRowBackgroundColor: var(--githubCanvasDefault);
--tableRowBorderColor: var(--githubBorderMuted);
--tableRowAlternateTextColor: var(--githubFgDefault);
--tableRowAlternateBackgroundColor: var(--githubCanvasSubtle);
--tableRowAlternateBorderColor: var(--githubBorderMuted);
/* Dialog */
--dialogBackground: var(--githubCanvasOverlay);
--dialogBoxShadow: 0 8px 24px rgba(1, 4, 9, 0.85);
/* Control */
--controlBoxShadow: 0 0 0 1px var(--githubBorderDefault);
--controlFocusBoxShadow: 0 0 0 3px var(--githubAccentMuted);
--controlTextFont: normal normal 500 14px/20px var(--themeControlFontFamily);
--controlBorderRadius: 6px;
--controlPadding: 5px 16px;
--controlTextLetterSpacing: normal;
--controlTextColor: var(--githubFgDefault);
--controlBackground: var(--githubCanvasSubtle);
--controlBorder: 1px solid var(--githubBorderDefault);
--controlHoverBackground: var(--githubCanvasSubtle);
--controlHoverBorder: 1px solid var(--githubFgMuted);
--controlActiveBackground: var(--githubCanvasInset);
/* Button Primary */
--controlBoxShadow--primary: 0 0 0 1px rgba(27, 31, 36, 0.15);
--controlBackground--primary: var(--githubSuccessEmphasis);
--controlBorder--primary: 1px solid rgba(240, 246, 252, 0.1);
--controlTextColor--primary: var(--githubFgOnEmphasis);
--controlHoverTextColor--primary: var(--githubFgOnEmphasis);
--controlHoverBackground--primary: #2ea043;
--controlFocusBackground--primary: var(--githubSuccessEmphasis);
--controlFocusTextColor--primary: var(--githubFgOnEmphasis);
/* Button Secondary */
--controlBoxShadow--secondary: 0 0 0 1px var(--githubBorderDefault);
--controlBackground--secondary: var(--githubCanvasSubtle);
--controlBorder--secondary: 1px solid var(--githubBorderDefault);
--controlTextColor--secondary: var(--githubFgDefault);
--controlHoverBackground--secondary: var(--githubCanvasSubtle);
--controlHoverBorder--secondary: 1px solid var(--githubFgMuted);
--controlHoverTextColor--secondary: var(--githubFgDefault);
/* Button Danger */
--controlBoxShadow--danger: 0 0 0 1px rgba(27, 31, 36, 0.15);
--controlBackground--danger: var(--githubDangerEmphasis);
--controlBorder--danger: 1px solid rgba(240, 246, 252, 0.1);
--controlTextColor--danger: var(--githubFgOnEmphasis);
--controlHoverBackground--danger: #bd2c2c;
/* Input */
--inputPadding: 5px 12px;
--inputBoxShadow: inset 0 1px 0 rgba(1, 4, 9, 0.2);
--inputBorder: 1px solid var(--githubBorderDefault);
--inputBorderRadius: 6px;
--inputFont: normal normal 400 14px/20px var(--themeControlFontFamily);
--inputBackground: var(--githubCanvasInset);
--inputFocusBorder: 1px solid var(--githubAccentFg);
--inputFocusBoxShadow: 0 0 0 3px var(--githubAccentMuted);
--inputHoverBorder: 1px solid var(--githubBorderDefault);
/* Select Box */
--selectBoxSplitButtonWidth: 28px;
--selectBoxSplitButtonBorderColor: transparent;
--selectBoxSplitButtonBorderWidth: 0;
/* Checkbox */
--checkboxSize: 16px;
--checkboxBorderRadius: 3px;
/* Toolbar */
--barItemsFontFamily: var(--themeLabelFontFamily);
--barItemsTextColor: var(--githubFgDefault);
--barItemsLabelTextColor: var(--githubFgMuted);
--barItemsDisabledLabelTextColor: var(--githubFgSubtle);
--barItemsDisabledLabelBackgroundColor: var(--githubNeutralSubtle);
--barItemsBorderRadius: 6px;
--barItemsControlMarkerBorderRadius: 3px;
--barItemsControlPlaceholderTextColor: var(--githubFgSubtle);
--barItemsControlMarkerBackgroundColor: var(--githubCanvasSubtle);
--barItemsControlsBorder: 1px solid var(--githubBorderDefault);
--barItemsSegmentControlBackground: var(--githubCanvasSubtle);
--barItemsHoverSegmentControlBackground: var(--githubCanvasSubtle);
--barItemsActiveSegmentControlBackground: var(--githubCanvasInset);
--segmentControlBackgroundColor: var(--githubCanvasDefault);
/* Sidebar */
--sidebarBackground: var(--githubCanvasSubtle);
--sidebarListItemFont: normal normal 400 14px/1.5 var(--themeDefaultFontFamily);
--sidebarListItemBorderRadius: 6px;
--selectedSidebarListItemBackground: var(--githubAccentSubtle);
--selectedSidebarListItemTextColor: var(--githubAccentFg);
--selectedSidebarListItemMarker: 2px solid var(--githubAccentEmphasis);
--sidebarListItemDetailsBackground: var(--githubCanvasOverlay);
--sidebarListItemTextColor: var(--githubFgDefault);
--sidebarListItemHoverBackground: var(--githubNeutralSubtle);
--sidebarListItemIconSize: 16px;
--sidebarListItemChildrenPadding: 0 0 0 20px;
--sidebarSectionTitleColor: var(--githubFgMuted);
--sidebarSectionTitlePadding: 16px 16px 8px 16px;
--sidebarListItemPadding: 6px 16px;
/* Sidebar Section Title - GitHub Style */
--sidebarSectionTitleFont: var(--labelFont);
--sidebarSectionTitleLetterSpacing: 0.04em;
--sidebarSectionTitleMargin: 16px 0 8px 0;
--sidebarSectionTitleBackground: transparent;
--sidebarSectionTitleBorderRadius: 0;
--sidebarSectionTitleTextTransform: uppercase;
/* App Layout */
--appMainToolbarFloatingBackground: #d1d9e0;
--appMainToolbarHeight: 48px;
/* Tab Bar */
--tabBarBackground: var(--githubCanvasSubtle);
--tabBarBoxShadow: inset 0 -1px 0 0 var(--githubBorderDefault);
--tabItemHeight: 40px;
--tabItemTextColor: var(--githubFgMuted);
--tabItemBoxShadow: none;
--tabItemIconSize: 16px;
--tabItemFont: normal normal 400 14px/1.5 var(--themeLabelFontFamily);
--tabBarLayout: start;
--tabItemBackground-selected: transparent;
--tabItemBoxShadow-selected: inset 0 -2px 0 0 var(--githubAccentEmphasis);
--tabItemTextColor-selected: var(--githubFgDefault);
--tabItemFont-selected: var(--tabItemFont);
/* Scrolled State */
--scrolledAppMainToolbarBoxShadow: 0 1px 0 0 var(--githubBorderDefault);
/* Segment Control */
--segmentControlPadding: 2px;
--segmentControlSegmentPadding: 4px 12px;
--segmentControlBoxShadow: none;
--segmentControlBackground: rgba(110, 118, 129, 0.1);
--segmentControlBorderRadius: 6px;
--segmentControlIndicatorBoxShadow: none;
--segmentControlIndicatorBackground: var(--githubCanvasSubtle);
--segmentControlIndicatorBorder: 1px solid var(--githubBorderDefault);
/* Card */
--cardBackground: var(--githubCanvasSubtle);
--cardBorder: 1px solid var(--githubBorderDefault);
--cardBorderRadius: 6px;
--cardBoxShadow: none;
--cardPadding: 16px;
/* Popover */
--popoverBackground: var(--githubCanvasOverlay);
--popoverBorder: 1px solid var(--githubBorderDefault);
--popoverBorderRadius: 12px;
--popoverBoxShadow: 0 8px 24px rgba(1, 4, 9, 0.85);
/* Code colors (for syntax highlighting feel) */
--codeKeyword: #ff7b72;
--codeFunction: #d2a8ff;
--codeVariable: #79c0ff;
--codeString: #a5d6ff;
--codeComment: var(--githubFgSubtle);
--codeNumber: #79c0ff;
/* Header */
--headerBackground: var(--githubCanvasSubtle);
--headerBorder: 1px solid var(--githubBorderDefault);
/* Hover states */
--hoverBackground: rgba(177, 186, 196, 0.12);
--activeBackground: rgba(177, 186, 196, 0.2);
}
/* Light mode support (GitHub also has a light theme) */
@media (prefers-color-scheme: light) {
:root {
/* GitHub Light Color Palette */
--githubCanvas: #ffffff;
--githubCanvasDefault: #ffffff;
--githubCanvasSubtle: #f6f8fa;
--githubCanvasInset: #f6f8fa;
--githubCanvasOverlay: #ffffff;
/* Foreground colors */
--githubFgDefault: #24292f;
--githubFgMuted: #57606a;
--githubFgSubtle: #6e7781;
--githubFgOnEmphasis: #ffffff;
/* Border colors */
--githubBorderDefault: #d0d7de;
--githubBorderMuted: #d8dee4;
--githubBorderSubtle: rgba(27, 31, 36, 0.15);
/* Accent colors */
--githubAccentFg: #0969da;
--githubAccentEmphasis: #0969da;
--githubAccentMuted: rgba(84, 174, 255, 0.4);
--githubAccentSubtle: #ddf4ff;
/* Success colors */
--githubSuccessFg: #1a7f37;
--githubSuccessEmphasis: #2da44e;
--githubSuccessSubtle: #dafbe1;
/* Attention/Warning colors */
--githubAttentionFg: #9a6700;
--githubAttentionEmphasis: #bf8700;
--githubAttentionSubtle: #fff8c5;
/* Danger/Error colors */
--githubDangerFg: #cf222e;
--githubDangerEmphasis: #cf222e;
--githubDangerSubtle: #ffebe9;
/* Neutral colors */
--githubNeutralEmphasis: #6e7781;
--githubNeutralMuted: rgba(175, 184, 193, 0.2);
--githubNeutralSubtle: rgba(234, 238, 242, 0.5);
/* Special colors */
--githubDoneFg: #8250df;
--githubDoneEmphasis: #8250df;
--githubSponsorsFg: #bf3989;
--githubSponsorsEmphasis: #bf3989;
/* Adjustments for light mode */
--windowBoxShadow: 0 0 0 1px var(--githubBorderDefault);
--scrollBarThumbColor: rgba(110, 118, 129, 0.4);
--activeScrollBarThumbColor: rgba(110, 118, 129, 0.7);
--backgroundHover: rgba(208, 215, 222, 0.32);
--backgroundActive: rgba(208, 215, 222, 0.48);
/* Input adjustments */
--inputBackground: var(--githubCanvasDefault);
--inputBoxShadow: inset 0 1px 0 rgba(208, 215, 222, 0.2);
/* Control adjustments */
--controlBackground: var(--githubCanvasDefault);
--controlHoverBackground: var(--githubCanvasSubtle);
--controlActiveBackground: var(--githubCanvasSubtle);
/* Dialog */
--dialogBoxShadow: 0 8px 24px rgba(140, 149, 159, 0.2);
/* Popover */
--popoverBoxShadow: 0 8px 24px rgba(140, 149, 159, 0.2);
}
}
/* Scrollbar Styling */
body ::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
body ::-webkit-scrollbar-corner {
background: transparent;
user-select: none;
}
body ::-webkit-scrollbar-thumb {
background: var(--scrollBarThumbColor);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
body ::-webkit-scrollbar-track {
background: transparent;
}
body ::-webkit-scrollbar-thumb:hover {
background: var(--activeScrollBarThumbColor);
background-clip: padding-box;
}
/* High Contrast Support */
@media (prefers-contrast: high) {
:root {
--githubBorderDefault: #7d8590;
--controlBorder: 1px solid currentColor;
--inputBorder: 1px solid currentColor;
--controlFocusBoxShadow: 0 0 0 3px var(--githubAccentFg);
--inputFocusBoxShadow: 0 0 0 3px var(--githubAccentFg);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
:root {
--animationDuration: 0ms;
}
}