yss-project/src/app/shared/styles/_ios-theme.scss

// ==========================================================================
// iOS Design Theme - Variables
// ==========================================================================
//
// Purpose:
// --------
// This file establishes a design system based on Apple's Human Interface Guidelines (HIG).
// It provides a comprehensive set of SCSS variables for colors, typography, spacing,
// and other properties to ensure a consistent and native iOS look and feel across
// the application.
//
// Sections:
// ---------
// 1.  **System Colors**: Standard iOS system colors for backgrounds, text, and UI elements.
// 2.  **UI Colors**: Colors for specific UI components like buttons, switches, and notifications.
// 3.  **Typography**: Font families, sizes, and weights for different text styles.
// 4.  **Spacing & Layout**: Standardized spacing units for margins, padding, and grid systems.
// 5.  **Effects & Materials**: Variables for shadows, blurs, and other visual effects.
// 6.  **Component-Specific**: Variables tailored for specific components like lists, forms, etc.
//
// ==========================================================================

// --------------------------------------------------------------------------
// 1. System Colors
//    - Based on Apple's Human Interface Guidelines (HIG) color palette.
//    - Includes light and dark mode variants.
// --------------------------------------------------------------------------

// Light Mode System Colors
$ios-color-system-blue-light: #007AFF;
$ios-color-system-green-light: #34C759;
$ios-color-system-indigo-light: #5856D6;
$ios-color-system-orange-light: #FF9500;
$ios-color-system-pink-light: #FF2D55;
$ios-color-system-purple-light: #AF52DE;
$ios-color-system-red-light: #FF3B30;
$ios-color-system-teal-light: #5AC8FA;
$ios-color-system-yellow-light: #FFCC00;

// Light Mode Grays
$ios-color-system-gray-1-light: #8E8E93;
$ios-color-system-gray-2-light: #AEAEB2;
$ios-color-system-gray-3-light: #C7C7CC;
$ios-color-system-gray-4-light: #D1D1D6;
$ios-color-system-gray-5-light: #E5E5EA;
$ios-color-system-gray-6-light: #F2F2F7;

// Light Mode UI Elements
$ios-color-label-light: #000000;
$ios-color-secondary-label-light: rgba(60, 60, 67, 0.6);
$ios-color-tertiary-label-light: rgba(60, 60, 67, 0.3);
$ios-color-quaternary-label-light: rgba(60, 60, 67, 0.18);

$ios-color-system-background-light: #FFFFFF;
$ios-color-secondary-system-background-light: #F2F2F7;
$ios-color-tertiary-system-background-light: #FFFFFF;

$ios-color-separator-light: rgba(60, 60, 67, 0.29);
$ios-color-opaque-separator-light: #C6C6C8;

// Dark Mode will be defined here if needed in the future

// --------------------------------------------------------------------------
// 2. UI Colors
//    - Colors for specific UI components.
// --------------------------------------------------------------------------
$ios-primary: $ios-color-system-blue-light;
$ios-color-link: $ios-color-system-blue-light;
$ios-color-button-primary-background: $ios-color-system-blue-light;
$ios-card-background: $ios-color-system-background-light;
$ios-background: $ios-color-system-background-light;
$ios-background-secondary: $ios-color-secondary-system-background-light;
$ios-background-tertiary: $ios-color-tertiary-system-background-light;
$ios-border: $ios-color-separator-light;

// Text Colors
$ios-text-primary: $ios-color-label-light;
$ios-text-secondary: $ios-color-secondary-label-light;
$ios-text-tertiary: $ios-color-tertiary-label-light;

// Semantic Colors
$ios-success: $ios-color-system-green-light;
$ios-warning: $ios-color-system-orange-light;
$ios-error: $ios-color-system-red-light;
$ios-danger: $ios-color-system-red-light;
$ios-info: $ios-color-system-teal-light;

// --------------------------------------------------------------------------
// 3. Typography
//    - Font families, sizes, and weights based on SF Pro.
// --------------------------------------------------------------------------
$ios-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

// Dynamic Type Sizes (Large is default)
$ios-font-size-large-title: 34px;
$ios-font-size-title-1: 28px;
$ios-font-size-title-2: 22px;
$ios-font-size-title-3: 20px;
$ios-font-size-headline: 17px;
$ios-font-size-body: 17px;
$ios-font-size-callout: 16px;
$ios-font-size-subhead: 15px;
$ios-font-size-footnote: 13px;
$ios-font-size-caption-1: 12px;
$ios-font-size-caption-2: 11px;

// Custom sizes
$ios-font-size-xl: 24px;
$ios-font-size-lg: 18px;
$ios-font-size-md: 16px;
$ios-font-size-sm: 14px;
$ios-font-size-xs: 12px;
$ios-font-size-base: $ios-font-size-md;

// Font Weights
$ios-font-weight-regular: 400;
$ios-font-weight-medium: 500;
$ios-font-weight-semibold: 600;
$ios-font-weight-bold: 700;

// --------------------------------------------------------------------------
// 4. Spacing & Layout
//    - Standardized spacing units for consistent layout.
// --------------------------------------------------------------------------
$ios-spacing-base-unit: 8px;
$ios-spacing-xxs: $ios-spacing-base-unit * 0.25; // 2px
$ios-spacing-xs: $ios-spacing-base-unit * 0.5;   // 4px
$ios-spacing-sm: $ios-spacing-base-unit;         // 8px
$ios-spacing-md: $ios-spacing-base-unit * 2;     // 16px
$ios-spacing-lg: $ios-spacing-base-unit * 3;     // 24px
$ios-spacing-xl: $ios-spacing-base-unit * 4;     // 32px
$ios-spacing-xxl: $ios-spacing-base-unit * 6;    // 48px

// --------------------------------------------------------------------------
// 5. Effects & Materials
//    - Shadows, corner radii, and other visual effects.
// --------------------------------------------------------------------------
$ios-corner-radius-sm: 6px;
$ios-corner-radius-md: 10px;
$ios-corner-radius-lg: 14px;
$ios-corner-radius-xl: 20px;
$ios-corner-radius-continuous: 9999px;

$ios-radius-sm: $ios-corner-radius-sm;
$ios-radius-md: $ios-corner-radius-md;
$ios-radius-lg: $ios-corner-radius-lg;
$ios-radius-xl: $ios-corner-radius-xl;
$ios-radius-full: $ios-corner-radius-continuous;

$ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$ios-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
$ios-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
$ios-shadow-standard: 0 3px 8px rgba(0, 0, 0, 0.12);
$ios-shadow-strong: 0 6px 16px rgba(0, 0, 0, 0.15);
$ios-shadow-card: $ios-shadow-standard;
$ios-shadow-lg: $ios-shadow-strong;

// --------------------------------------------------------------------------
// 6. Component-Specific Variables
// --------------------------------------------------------------------------

$ios-list-item-height: 44px;
$ios-form-input-height: 44px;
$ios-navbar-height: 44px;
$ios-tabbar-height: 50px;

// Transitions
$ios-transition-duration: 0.3s;
$ios-transition-timing-function: ease-in-out;
$ios-feedback-tap: transform 0.1s ease-out;