tanuki-ui
Version:
HTML-first React component library with semantic elements, multi-OS themes, and production-ready visual node editor
777 lines (694 loc) • 28.6 kB
CSS
/**
* iOS 17+ Design System for Tanuki UI
* Implements Apple's latest Human Interface Guidelines with authentic iOS styling
* Supports both light and dark modes with dynamic color system
*/
:root {
/* iOS Typography System */
--themeDefaultFontFamily: -apple-system, "SF Pro Display", "SF Pro Text", "SF Pro Icons", BlinkMacSystemFont, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
--themeControlFontFamily: var(--themeDefaultFontFamily);
--themeLabelFontFamily: var(--themeDefaultFontFamily);
--themeMonospacedFont: "SF Mono", "Monaco", "Menlo", "Courier New", monospace;
--themeSystemFont: var(--themeDefaultFontFamily);
/* iOS Font Weights */
--fontWeightUltraLight: 100;
--fontWeightThin: 200;
--fontWeightLight: 300;
--fontWeightRegular: 400;
--fontWeightMedium: 500;
--fontWeightSemibold: 600;
--fontWeightBold: 700;
--fontWeightHeavy: 800;
--fontWeightBlack: 900;
/* iOS Dynamic Type Scale */
--textFont: normal normal var(--fontWeightRegular) 17px/1.294118 var(--themeDefaultFontFamily);
--titleFont: normal normal var(--fontWeightSemibold) 28px/1.285714 var(--themeDefaultFontFamily);
--title2Font: normal normal var(--fontWeightRegular) 22px/1.272727 var(--themeDefaultFontFamily);
--title3Font: normal normal var(--fontWeightRegular) 20px/1.25 var(--themeDefaultFontFamily);
--headlineFont: normal normal var(--fontWeightSemibold) 17px/1.294118 var(--themeDefaultFontFamily);
--bodyFont: normal normal var(--fontWeightRegular) 17px/1.294118 var(--themeDefaultFontFamily);
--calloutFont: normal normal var(--fontWeightRegular) 16px/1.3125 var(--themeDefaultFontFamily);
--subheadlineFont: normal normal var(--fontWeightRegular) 15px/1.333333 var(--themeDefaultFontFamily);
--footnoteFont: normal normal var(--fontWeightRegular) 13px/1.384615 var(--themeDefaultFontFamily);
--caption1Font: normal normal var(--fontWeightRegular) 12px/1.333333 var(--themeDefaultFontFamily);
--caption2Font: normal normal var(--fontWeightRegular) 11px/1.363636 var(--themeDefaultFontFamily);
--labelFont: var(--bodyFont);
--controlTextFont: var(--bodyFont);
/* iOS System Colors - Light Mode */
--textColor: rgba(0, 0, 0, 1);
--labelColor: rgba(0, 0, 0, 1);
--secondaryLabelColor: rgba(60, 60, 67, 0.6);
--tertiaryLabelColor: rgba(60, 60, 67, 0.3);
--quaternaryLabelColor: rgba(60, 60, 67, 0.18);
--placeholderTextColor: rgba(60, 60, 67, 0.3);
--linkColor: rgba(0, 122, 255, 1);
--separatorColor: rgba(60, 60, 67, 0.29);
--opaqueSeparatorColor: rgba(198, 198, 200, 1);
/* iOS Accent Colors */
--accentColor: rgba(0, 122, 255, 1); /* iOS Blue */
--systemBlueColor: rgba(0, 122, 255, 1);
--systemGreenColor: rgba(52, 199, 89, 1);
--systemIndigoColor: rgba(88, 86, 214, 1);
--systemOrangeColor: rgba(255, 149, 0, 1);
--systemPinkColor: rgba(255, 45, 85, 1);
--systemPurpleColor: rgba(175, 82, 222, 1);
--systemRedColor: rgba(255, 59, 48, 1);
--systemTealColor: rgba(90, 200, 250, 1);
--systemYellowColor: rgba(255, 204, 0, 1);
--systemBrownColor: rgba(162, 132, 94, 1);
--systemMintColor: rgba(0, 199, 190, 1);
--systemCyanColor: rgba(50, 173, 230, 1);
/* iOS Gray Scale */
--systemGrayColor: rgba(142, 142, 147, 1);
--systemGray2Color: rgba(174, 174, 178, 1);
--systemGray3Color: rgba(199, 199, 204, 1);
--systemGray4Color: rgba(209, 209, 214, 1);
--systemGray5Color: rgba(229, 229, 234, 1);
--systemGray6Color: rgba(242, 242, 247, 1);
/* iOS Background Colors */
--windowBackgroundColor: rgba(255, 255, 255, 1);
--systemBackgroundColor: rgba(255, 255, 255, 1);
--secondarySystemBackgroundColor: rgba(242, 242, 247, 1);
--tertiarySystemBackgroundColor: rgba(255, 255, 255, 1);
--systemGroupedBackgroundColor: rgba(242, 242, 247, 1);
--secondarySystemGroupedBackgroundColor: rgba(255, 255, 255, 1);
--tertiarySystemGroupedBackgroundColor: rgba(242, 242, 247, 1);
/* iOS Fill Colors */
--systemFillColor: rgba(120, 120, 128, 0.2);
--secondarySystemFillColor: rgba(120, 120, 128, 0.16);
--tertiarySystemFillColor: rgba(118, 118, 128, 0.12);
--quaternarySystemFillColor: rgba(116, 116, 128, 0.08);
/* Selection Colors */
--selectedTextColor: rgba(255, 255, 255, 1);
--selectedTextBackgroundColor: var(--accentColor);
--selectedContentBackgroundColor: rgba(0, 122, 255, 0.15);
--unemphasizedSelectedTextColor: rgba(0, 0, 0, 1);
--unemphasizedSelectedTextBackgroundColor: rgba(0, 0, 0, 0.15);
--selectedMenuItemTextColor: rgba(255, 255, 255, 1);
/* Focus Indicators */
--keyboardFocusIndicatorColor: var(--accentColor);
--focusRingWidth: 3px;
--focusRingOffset: 2px;
--focusRingOpacity: 0.5;
/* iOS Material Effects */
--materialThick: blur(30px) saturate(180%);
--materialRegular: blur(20px) saturate(180%);
--materialThin: blur(10px) saturate(180%);
--materialUltraThin: blur(6px) saturate(180%);
--backgroundBackdropFilter: none;
--windowBackdropFilter: none;
/* iOS Elevation System */
--windowLevelElevation: 24;
--dialogLevelElevation: 24;
--popupLevelElevation: 16;
--tooltipLevelElevation: 8;
--cardLevelElevation: 2;
--controlsLevelElevation: 1;
--layerLevelElevation: 0;
/* iOS Shadows */
--shadowOpacity: 0.15;
--shadowRadius: 10;
--shadowOffset: 0 3px;
/* Semantic Aliases */
--cautionColor: var(--systemRedColor);
--dangerColor: var(--systemRedColor);
--warningColor: var(--systemOrangeColor);
--successColor: var(--systemGreenColor);
--infoColor: var(--systemBlueColor);
/* Animation Properties */
--animationDuration: 250ms;
--animationEasing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--springAnimation: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Layout Metrics */
--statusBarHeight: 44px;
--navigationBarHeight: 44px;
--tabBarHeight: 49px;
--toolbarHeight: 44px;
--searchBarHeight: 36px;
--appMainToolbarHeight: var(--navigationBarHeight);
--contentInset: 16px;
--contentInsetCompact: 8px;
--interItemSpacing: 8px;
--sectionSpacing: 20px;
--cornerRadius: 10px;
--cornerRadiusLarge: 13px;
--cornerRadiusSmall: 6px;
/* Safe Area Support */
--safeAreaInsetTop: env(safe-area-inset-top, 0);
--safeAreaInsetRight: env(safe-area-inset-right, 0);
--safeAreaInsetBottom: env(safe-area-inset-bottom, 0);
--safeAreaInsetLeft: env(safe-area-inset-left, 0);
--headerHeight: calc(var(--navigationBarHeight) + var(--safeAreaInsetTop));
--footerHeight: calc(var(--tabBarHeight) + var(--safeAreaInsetBottom));
--fullScreenHeight: calc(100vh - var(--safeAreaInsetTop) - var(--safeAreaInsetBottom));
}
/* iOS Controls */
:root {
/* Control Base Properties */
--controlHeight: 44px;
--controlHeightLarge: 50px;
--controlHeightSmall: 34px;
--controlMinWidth: 44px;
--controlBorderRadius: var(--cornerRadius);
--controlBorderRadiusPill: 100px;
--controlPadding: 0 16px;
--controlPaddingCompact: 0 12px;
--controlTextLetterSpacing: -0.01em;
--controlTransition: all var(--animationDuration) var(--animationEasing);
/* Default Control (Secondary Style) */
--controlBackground: var(--systemGray5Color);
--controlTextColor: var(--labelColor);
--controlBorder: none;
--controlBoxShadow: none;
--controlHoverBackground: var(--systemGray4Color);
--controlActiveBackground: var(--systemGray3Color);
--controlDisabledBackground: var(--quaternarySystemFillColor);
--disabledControlTextColor: var(--tertiaryLabelColor);
--controlFocusBoxShadow: 0 0 0 var(--focusRingWidth) rgba(0, 122, 255, var(--focusRingOpacity));
/* Primary Control (Filled Blue) */
--controlBackground--primary: var(--accentColor);
--controlTextColor--primary: rgba(255, 255, 255, 1);
--controlBorder--primary: none;
--controlBoxShadow--primary: none;
--controlHoverBackground--primary: rgba(0, 112, 233, 1);
--controlActiveBackground--primary: rgba(0, 100, 210, 1);
--controlFocusBackground--primary: var(--controlHoverBackground--primary);
--controlDisabledBackground--primary: var(--quaternarySystemFillColor);
/* Secondary Control (Tinted) */
--controlBackground--secondary: rgba(0, 122, 255, 0.15);
--controlTextColor--secondary: var(--accentColor);
--controlBorder--secondary: none;
--controlBoxShadow--secondary: none;
--controlHoverBackground--secondary: rgba(0, 122, 255, 0.20);
--controlActiveBackground--secondary: rgba(0, 122, 255, 0.25);
--controlFocusBackground--secondary: var(--controlHoverBackground--secondary);
/* CTA Control (Prominent) */
--controlBackground--cta: var(--accentColor);
--controlTextColor--cta: rgba(255, 255, 255, 1);
--controlBorder--cta: none;
--controlBoxShadow--cta: 0 2px 8px rgba(0, 122, 255, 0.3);
--controlHoverBackground--cta: rgba(0, 112, 233, 1);
--controlActiveBackground--cta: rgba(0, 100, 210, 1);
/* Destructive Control */
--controlBackground--destructive: var(--systemRedColor);
--controlTextColor--destructive: rgba(255, 255, 255, 1);
--controlHoverBackground--destructive: rgba(235, 45, 39, 1);
--controlActiveBackground--destructive: rgba(215, 35, 33, 1);
/* Plain Control (Borderless) */
--controlBackground--plain: transparent;
--controlTextColor--plain: var(--accentColor);
--controlBorder--plain: none;
--controlHoverBackground--plain: var(--quaternarySystemFillColor);
--controlActiveBackground--plain: var(--tertiarySystemFillColor);
}
/* iOS Input Fields */
:root {
--inputHeight: 44px;
--inputPadding: 11px 16px;
--inputFont: var(--textFont);
--inputBorder: 0.5px solid var(--separatorColor);
--inputBorderRadius: var(--cornerRadius);
--inputBackground: var(--secondarySystemBackgroundColor);
--inputBoxShadow: none;
--inputPlaceholderColor: var(--placeholderTextColor);
--inputFocusBorder: 0.5px solid var(--accentColor);
--inputFocusBoxShadow: 0 0 0 var(--focusRingWidth) rgba(0, 122, 255, var(--focusRingOpacity));
--inputHoverBorder: 0.5px solid var(--systemGray3Color);
--inputDisabledBackground: var(--quaternarySystemFillColor);
--inputDisabledBorder: 0.5px solid var(--quaternarySystemFillColor);
/* Search Input */
--searchInputHeight: var(--searchBarHeight);
--searchInputPadding: 7px 8px 7px 30px;
--searchInputBorderRadius: 10px;
--searchInputBackground: rgba(118, 118, 128, 0.12);
--searchInputIcon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z' fill='%238E8E93'/%3E%3C/svg%3E");
}
/* iOS Form Controls */
:root {
/* Checkbox */
--checkboxSize: 22px;
--checkboxBorderRadius: 6px;
--checkboxBorder: 1.5px solid var(--systemGray3Color);
--checkboxBackground: transparent;
--checkboxCheckedBackground: var(--accentColor);
--checkboxCheckedBorder: 1.5px solid var(--accentColor);
--checkboxCheckmark: url("data:image/svg+xml,%3Csvg width='14' height='11' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5L5 9L13 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
/* Radio */
--radioSize: 22px;
--radioBorder: 1.5px solid var(--systemGray3Color);
--radioBackground: transparent;
--radioCheckedBackground: var(--accentColor);
--radioCheckedBorder: 1.5px solid var(--accentColor);
--radioDotSize: 8px;
/* Switch */
--switchWidth: 51px;
--switchHeight: 31px;
--switchBorderRadius: 15.5px;
--switchBackground: var(--systemGray5Color);
--switchCheckedBackground: var(--systemGreenColor);
--switchThumbSize: 27px;
--switchThumbBackground: rgba(255, 255, 255, 1);
--switchThumbShadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
/* Slider */
--sliderTrackHeight: 4px;
--sliderTrackBackground: var(--systemGray5Color);
--sliderTrackFillBackground: var(--accentColor);
--sliderThumbSize: 28px;
--sliderThumbBackground: rgba(255, 255, 255, 1);
--sliderThumbShadow: 0 3px 7px rgba(0, 0, 0, 0.15), 0 0.5px 0.5px rgba(0, 0, 0, 0.12);
/* Select/Dropdown */
--selectBoxHeight: var(--inputHeight);
--selectBoxPadding: 11px 36px 11px 16px;
--selectBoxBorder: var(--inputBorder);
--selectBoxBorderRadius: var(--inputBorderRadius);
--selectBoxBackground: var(--inputBackground);
--selectBoxArrowSize: 12px;
--selectBoxArrowColor: var(--secondaryLabelColor);
--selectDropdownBackground: rgba(246, 246, 246, 0.92);
--selectDropdownBackdropFilter: var(--materialRegular);
--selectDropdownBorderRadius: var(--cornerRadiusLarge);
--selectDropdownShadow: 0 10px 40px rgba(0, 0, 0, 0.19), 0 2px 12px rgba(0, 0, 0, 0.12);
}
/* iOS Navigation Components */
:root {
/* Navigation Bar */
--navBarBackground: rgba(249, 249, 249, 0.94);
--navBarBackdropFilter: var(--materialRegular);
--navBarBorder: 0.5px solid var(--separatorColor);
--navBarTitleFont: var(--headlineFont);
--navBarButtonFont: var(--bodyFont);
--navBarButtonColor: var(--accentColor);
/* Tab Bar */
--tabBarBackground: rgba(249, 249, 249, 0.94);
--tabBarBackdropFilter: var(--materialRegular);
--tabBarBorder: 0.5px solid var(--separatorColor);
--tabBarBoxShadow: none;
--tabItemHeight: var(--tabBarHeight);
--tabItemPadding: 0;
--tabItemIconSize: 24px;
--tabItemFont: var(--caption1Font);
--tabItemTextColor: var(--secondaryLabelColor);
--tabItemBackground: transparent;
--tabItemActiveBackground: transparent;
--tabItemTextColor-selected: var(--accentColor);
--tabItemBackground-selected: transparent;
/* Toolbar */
--toolbarBackground: rgba(249, 249, 249, 0.94);
--toolbarBackdropFilter: var(--materialRegular);
--toolbarBorder: 0.5px solid var(--separatorColor);
--toolbarItemColor: var(--accentColor);
--toolbarItemFont: var(--bodyFont);
/* Segmented Control */
--segmentControlHeight: 32px;
--segmentControlPadding: 2px;
--segmentControlBackground: rgba(118, 118, 128, 0.12);
--segmentControlBorderRadius: 9px;
--segmentControlSegmentPadding: 0 16px;
--segmentControlSegmentBackground: transparent;
--segmentControlSegmentSelectedBackground: rgba(255, 255, 255, 1);
--segmentControlSegmentSelectedShadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
--segmentControlSegmentFont: var(--footnoteFont);
--segmentControlSegmentColor: var(--labelColor);
--segmentControlBackdropFilter: none;
}
/* iOS Cards and Lists */
:root {
/* List/Table Styles */
--tableBackgroundColor: var(--systemBackgroundColor);
--tableGroupedBackgroundColor: var(--systemGroupedBackgroundColor);
--tableCellBackground: var(--secondarySystemGroupedBackgroundColor);
--tableCellPadding: 11px 16px;
--tableCellMinHeight: 44px;
--tableCellBorder: 0.5px solid var(--separatorColor);
--tableCellSelectedBackground: var(--selectedContentBackgroundColor);
--tableHeaderBackground: var(--systemGroupedBackgroundColor);
--tableHeaderFont: var(--footnoteFont);
--tableHeaderTextColor: var(--secondaryLabelColor);
--tableHeaderPadding: 6px 16px;
--tableFooterFont: var(--footnoteFont);
--tableFooterTextColor: var(--secondaryLabelColor);
--tableFooterPadding: 6px 16px;
--tableAccessoryColor: var(--tertiaryLabelColor);
/* Card Styles */
--cardBackground: var(--secondarySystemGroupedBackgroundColor);
--cardBorderRadius: var(--cornerRadius);
--cardBorder: none;
--cardBoxShadow: 0 2px 8px rgba(0, 0, 0, 0.04);
--cardPadding: 16px;
--cardHeaderFont: var(--headlineFont);
--cardBodyFont: var(--bodyFont);
--cardHoverTransform: scale(0.98);
--cardActiveTransform: scale(0.95);
--cardTransition: transform var(--animationDuration) var(--animationEasing);
}
/* iOS Dialogs and Popovers */
:root {
/* Alert/Dialog */
--dialogBackground: rgba(255, 255, 255, 0.95);
--dialogBackdropFilter: var(--materialThick);
--dialogBorderRadius: var(--cornerRadiusLarge);
--dialogBoxShadow: 0 10px 50px rgba(0, 0, 0, 0.25), 0 2px 12px rgba(0, 0, 0, 0.12);
--dialogPadding: 20px;
--dialogTitleFont: var(--headlineFont);
--dialogBodyFont: var(--footnoteFont);
--dialogBackdrop: rgba(0, 0, 0, 0.4);
--dialogMaxWidth: 270px;
--dialogButtonSeparator: 0.5px solid var(--separatorColor);
/* Action Sheet */
--actionSheetBackground: rgba(255, 255, 255, 0.95);
--actionSheetBackdropFilter: var(--materialThick);
--actionSheetBorderRadius: var(--cornerRadiusLarge);
--actionSheetItemHeight: 57px;
--actionSheetItemFont: var(--title3Font);
--actionSheetItemColor: var(--accentColor);
--actionSheetDestructiveColor: var(--systemRedColor);
--actionSheetCancelFont: var(--fontWeightSemibold) 20px/1.25 var(--themeDefaultFontFamily);
/* Popover */
--popoverBackground: rgba(255, 255, 255, 0.95);
--popoverBackdropFilter: var(--materialRegular);
--popoverBorderRadius: var(--cornerRadiusLarge);
--popoverBoxShadow: 0 10px 40px rgba(0, 0, 0, 0.19), 0 2px 12px rgba(0, 0, 0, 0.12);
--popoverArrowSize: 13px;
--popoverMinWidth: 200px;
/* Context Menu */
--contextualMenuBackground: rgba(255, 255, 255, 0.95);
--contextualMenuBackdropFilter: var(--materialRegular);
--contextualMenuBorderRadius: var(--cornerRadiusLarge);
--contextualMenuBoxShadow: 0 10px 40px rgba(0, 0, 0, 0.19), 0 2px 12px rgba(0, 0, 0, 0.12);
--contextualMenuPadding: 4px 0;
--contextualMenuItemHeight: 44px;
--contextualMenuItemPadding: 0 16px;
--contextualMenuItemFont: var(--bodyFont);
--contextualMenuItemHoverBackground: var(--quaternarySystemFillColor);
--contextualMenuSeparatorColor: var(--separatorColor);
--contextualMenuIconSize: 20px;
--contextualMenuIconColor: var(--secondaryLabelColor);
}
/* iOS Activity Indicators */
:root {
/* Progress Bar */
--progressHeight: 4px;
--progressBorderRadius: 2px;
--progressBackground: var(--quaternarySystemFillColor);
--progressForeground: var(--accentColor);
/* Activity Indicator */
--activityIndicatorSize: 20px;
--activityIndicatorColor: var(--secondaryLabelColor);
/* Page Control */
--pageControlDotSize: 7px;
--pageControlDotSpacing: 9px;
--pageControlDotColor: rgba(0, 0, 0, 0.2);
--pageControlDotActiveColor: var(--labelColor);
}
/* iOS Sidebar/Source List */
:root {
--sidebarBackground: var(--secondarySystemBackgroundColor);
--sidebarWidth: 320px;
--sidebarItemHeight: 44px;
--sidebarItemPadding: 0 16px;
--sidebarItemFont: var(--bodyFont);
--sidebarItemTextColor: var(--labelColor);
--sidebarItemIconSize: 20px;
--sidebarItemIconColor: var(--secondaryLabelColor);
--sidebarItemHoverBackground: var(--quaternarySystemFillColor);
--sidebarItemActiveBackground: var(--tertiarySystemFillColor);
--selectedSidebarListItemBackground: var(--selectedContentBackgroundColor);
--selectedSidebarListItemTextColor: var(--labelColor);
--sidebarSectionHeaderFont: var(--footnoteFont);
--sidebarSectionHeaderColor: var(--secondaryLabelColor);
--sidebarSectionHeaderPadding: 8px 16px 4px;
/* Sidebar Section Title - iOS Style */
--sidebarSectionTitleFont: var(--footnoteFont);
--sidebarSectionTitleLetterSpacing: 0;
--sidebarSectionTitleMargin: 20px 0 4px 0;
--sidebarSectionTitlePadding: 0 16px;
--sidebarSectionTitleColor: var(--secondaryLabelColor);
--sidebarSectionTitleBackground: transparent;
--sidebarSectionTitleBorderRadius: 0;
--sidebarSectionTitleTextTransform: uppercase;
}
/* iOS Window Chrome */
:root {
--windowBorderRadius: 0;
--windowBoxShadow: none;
--windowBackdropFilter: none;
--windowPadding: 0;
--windowHeaderHeight: var(--navigationBarHeight);
--windowFooterHeight: var(--tabBarHeight);
--windowResizeHandleSize: 0;
--windowTitleFont: var(--headlineFont);
--windowTitleColor: var(--labelColor);
}
/* iOS Animations and Transitions */
:root {
--transitionDefault: all var(--animationDuration) var(--animationEasing);
--transitionFast: all 150ms var(--animationEasing);
--transitionSlow: all 350ms var(--animationEasing);
--transitionSpring: all 500ms var(--springAnimation);
}
/* iOS Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
/* Dark Mode Text Colors */
--textColor: rgba(255, 255, 255, 1);
--labelColor: rgba(255, 255, 255, 1);
--secondaryLabelColor: rgba(235, 235, 245, 0.6);
--tertiaryLabelColor: rgba(235, 235, 245, 0.3);
--quaternaryLabelColor: rgba(235, 235, 245, 0.18);
--placeholderTextColor: rgba(235, 235, 245, 0.3);
--separatorColor: rgba(84, 84, 88, 0.6);
--opaqueSeparatorColor: rgba(56, 56, 58, 1);
/* Dark Mode Backgrounds */
--windowBackgroundColor: rgba(0, 0, 0, 1);
--systemBackgroundColor: rgba(0, 0, 0, 1);
--secondarySystemBackgroundColor: rgba(28, 28, 30, 1);
--tertiarySystemBackgroundColor: rgba(44, 44, 46, 1);
--systemGroupedBackgroundColor: rgba(0, 0, 0, 1);
--secondarySystemGroupedBackgroundColor: rgba(28, 28, 30, 1);
--tertiarySystemGroupedBackgroundColor: rgba(44, 44, 46, 1);
/* Dark Mode Fills */
--systemFillColor: rgba(120, 120, 128, 0.36);
--secondarySystemFillColor: rgba(120, 120, 128, 0.32);
--tertiarySystemFillColor: rgba(118, 118, 128, 0.24);
--quaternarySystemFillColor: rgba(118, 118, 128, 0.18);
/* Dark Mode Controls */
--controlBackground: rgba(72, 72, 74, 1);
--controlHoverBackground: rgba(84, 84, 86, 1);
--controlActiveBackground: rgba(99, 99, 102, 1);
/* Dark Mode Inputs */
--inputBackground: rgba(44, 44, 46, 1);
--inputBorder: 0.5px solid rgba(84, 84, 88, 0.6);
/* Dark Mode Cards */
--cardBackground: rgba(28, 28, 30, 1);
--cardBoxShadow: 0 2px 8px rgba(0, 0, 0, 0.3);
/* Dark Mode Navigation */
--navBarBackground: rgba(28, 28, 30, 0.94);
--tabBarBackground: rgba(28, 28, 30, 0.94);
--toolbarBackground: rgba(28, 28, 30, 0.94);
/* Dark Mode Dialogs */
--dialogBackground: rgba(44, 44, 46, 0.95);
--dialogBackdrop: rgba(0, 0, 0, 0.6);
--actionSheetBackground: rgba(44, 44, 46, 0.95);
--popoverBackground: rgba(44, 44, 46, 0.95);
--contextualMenuBackground: rgba(44, 44, 46, 0.95);
/* Dark Mode Tables */
--tableBackgroundColor: var(--systemBackgroundColor);
--tableCellBackground: rgba(28, 28, 30, 1);
--tableGroupedBackgroundColor: var(--systemBackgroundColor);
/* Dark Mode Sidebar */
--sidebarBackground: rgba(28, 28, 30, 1);
/* Dark Mode Misc */
--searchInputBackground: rgba(118, 118, 128, 0.24);
--segmentControlBackground: rgba(118, 118, 128, 0.24);
--segmentControlSegmentSelectedBackground: rgba(72, 72, 74, 1);
--switchBackground: rgba(99, 99, 102, 1);
--checkboxBorder: 1.5px solid rgba(142, 142, 147, 1);
--radioBorder: 1.5px solid rgba(142, 142, 147, 1);
--sliderTrackBackground: rgba(56, 56, 58, 1);
--progressBackground: rgba(56, 56, 58, 1);
--pageControlDotColor: rgba(255, 255, 255, 0.2);
--pageControlDotActiveColor: rgba(255, 255, 255, 1);
}
}
/* iOS High Contrast Mode */
@media (prefers-contrast: high) {
:root {
--focusRingWidth: 4px;
--focusRingOpacity: 1;
--controlBorder: 1px solid currentColor;
--inputBorder: 1px solid currentColor;
--checkboxBorder: 2px solid currentColor;
--radioBorder: 2px solid currentColor;
}
}
/* iOS Reduced Motion */
@media (prefers-reduced-motion: reduce) {
:root {
--animationDuration: 0ms;
--transitionDefault: none;
--transitionFast: none;
--transitionSlow: none;
--transitionSpring: none;
--cardHoverTransform: none;
--cardActiveTransform: none;
}
}
/* iOS-Specific Component Enhancements */
/* iOS Button Styles */
:root {
--buttonTransform: scale(0.95);
--buttonActiveOpacity: 0.6;
--buttonTapHighlight: rgba(0, 0, 0, 0);
}
/* iOS List Hover Effects */
:root {
--listItemHoverBackground: var(--quaternarySystemFillColor);
--listItemActiveBackground: var(--tertiarySystemFillColor);
--listItemTransition: background-color 150ms ease;
}
/* iOS Modal Presentation */
:root {
--modalSlideDistance: 100%;
--modalScaleDown: 0.93;
--modalBorderRadius: var(--cornerRadiusLarge);
--modalShadow: 0 10px 50px rgba(0, 0, 0, 0.25);
}
/* iOS Notification Badge */
:root {
--badgeMinWidth: 20px;
--badgeHeight: 20px;
--badgePadding: 0 6px;
--badgeBackground: var(--systemRedColor);
--badgeTextColor: rgba(255, 255, 255, 1);
--badgeFont: var(--fontWeightMedium) 13px/1 var(--themeDefaultFontFamily);
--badgeBorderRadius: 10px;
}
/* iOS Loading States */
:root {
--loadingSpinnerSize: 20px;
--loadingSpinnerBorderWidth: 2px;
--loadingSpinnerColor: var(--secondaryLabelColor);
--loadingSpinnerTrackColor: var(--quaternarySystemFillColor);
--loadingSpinnerDuration: 0.8s;
}
/* iOS Accessibility */
:root {
--voiceOverFocusRing: 0 0 0 4px var(--accentColor);
--reducedTransparencyBackground: rgba(255, 255, 255, 1);
--increasedContrastBorder: 1px solid var(--labelColor);
}
/* iOS Gesture Hints */
:root {
--gestureIndicatorHeight: 5px;
--gestureIndicatorWidth: 134px;
--gestureIndicatorBackground: var(--labelColor);
--gestureIndicatorBorderRadius: 2.5px;
--gestureIndicatorOpacity: 0.2;
}
/* iOS Dynamic Island Support */
:root {
--dynamicIslandHeight: 37px;
--dynamicIslandExpandedHeight: 120px;
--dynamicIslandPadding: 16px;
--dynamicIslandBackground: rgba(0, 0, 0, 1);
--dynamicIslandBorderRadius: 20px;
}
/* iOS SF Symbols Integration */
:root {
--symbolRenderingMode: monochrome;
--symbolWeight: medium;
--symbolScale: medium;
--symbolHierarchical: true;
}
/* iOS Vibrancy Effects */
:root {
--vibrancyLight: rgba(255, 255, 255, 0.5);
--vibrancyDark: rgba(0, 0, 0, 0.5);
--vibrancyExtraLight: rgba(255, 255, 255, 0.7);
--vibrancyUltraDark: rgba(0, 0, 0, 0.7);
}
/* iOS Sheet Presentation */
:root {
--sheetCornerRadius: 10px;
--sheetGrabberWidth: 36px;
--sheetGrabberHeight: 5px;
--sheetGrabberBackground: var(--tertiaryLabelColor);
--sheetDetentMedium: 50vh;
--sheetDetentLarge: 90vh;
}
/* iOS Keyboard Appearance */
:root {
--keyboardAppearance: light;
--keyboardReturnKeyType: default;
--keyboardToolbarHeight: 44px;
--keyboardToolbarBackground: var(--secondarySystemBackgroundColor);
}
/* iOS Date/Time Picker */
:root {
--datePickerHeight: 216px;
--datePickerWheelBackground: var(--secondarySystemGroupedBackgroundColor);
--datePickerSelectionBackground: var(--tertiarySystemFillColor);
--datePickerTextColor: var(--labelColor);
--datePickerSelectedTextColor: var(--labelColor);
}
/* iOS Alert Dialog Specific */
:root {
--alertTitleFont: var(--headlineFont);
--alertMessageFont: var(--footnoteFont);
--alertButtonHeight: 44px;
--alertButtonSeparator: 0.5px solid var(--separatorColor);
--alertPreferredActionColor: var(--accentColor);
--alertDestructiveActionColor: var(--systemRedColor);
}
/* iOS Pull to Refresh */
:root {
--pullToRefreshHeight: 60px;
--pullToRefreshThreshold: 80px;
--pullToRefreshSpinnerSize: 20px;
--pullToRefreshTextFont: var(--footnoteFont);
--pullToRefreshTextColor: var(--secondaryLabelColor);
}
/* iOS App Icon Styles */
:root {
--appIconSize: 60px;
--appIconBorderRadius: 13.5px;
--appIconShadow: 0 2px 4px rgba(0, 0, 0, 0.2);
--appIconNotificationBadgeSize: 20px;
--appIconNotificationBadgeOffset: -5px;
}
/* iOS Widget Styles */
:root {
--widgetSmallSize: 155px;
--widgetMediumWidth: 329px;
--widgetMediumHeight: 155px;
--widgetLargeSize: 329px;
--widgetCornerRadius: 22px;
--widgetPadding: 16px;
--widgetBackground: var(--secondarySystemGroupedBackgroundColor);
}
/* iOS Spotlight Search */
:root {
--spotlightBackground: rgba(255, 255, 255, 0.9);
--spotlightBackdropFilter: var(--materialThick);
--spotlightInputHeight: 36px;
--spotlightResultHeight: 60px;
--spotlightResultSeparator: 0.5px solid var(--separatorColor);
}
/* iOS Floating Action Button */
:root {
--fabSize: 56px;
--fabMiniSize: 40px;
--fabBackground: var(--accentColor);
--fabTextColor: rgba(255, 255, 255, 1);
--fabShadow: 0 4px 12px rgba(0, 122, 255, 0.4);
--fabHoverTransform: scale(1.05);
--fabActiveTransform: scale(0.95);
}
/* iOS Privacy Indicators */
:root {
--privacyIndicatorSize: 6px;
--privacyIndicatorMicrophoneColor: var(--systemOrangeColor);
--privacyIndicatorCameraColor: var(--systemGreenColor);
--privacyIndicatorLocationColor: var(--systemBlueColor);
--privacyIndicatorScreenRecordingColor: var(--systemRedColor);
}