117 lines
2.9 KiB
SCSS
117 lines
2.9 KiB
SCSS
// ============================================
|
|
// BILLIT - McMaster-Carr Inspired Design System
|
|
// Industrial, Dense, Functional, No Roundedness
|
|
// ============================================
|
|
|
|
// Colors - Industrial palette
|
|
$color-black: #000000;
|
|
$color-white: #ffffff;
|
|
$color-gray-50: #fafafa;
|
|
$color-gray-100: #f5f5f5;
|
|
$color-gray-200: #eeeeee;
|
|
$color-gray-300: #e0e0e0;
|
|
$color-gray-400: #bdbdbd;
|
|
$color-gray-500: #9e9e9e;
|
|
$color-gray-600: #757575;
|
|
$color-gray-700: #616161;
|
|
$color-gray-800: #424242;
|
|
$color-gray-900: #212121;
|
|
|
|
// Primary - Industrial orange (McMaster signature)
|
|
$color-primary: #e65100;
|
|
$color-primary-dark: #bf360c;
|
|
$color-primary-light: #ff6d00;
|
|
|
|
// Accent - Deep blue for links/actions
|
|
$color-accent: #0d47a1;
|
|
$color-accent-dark: #002171;
|
|
$color-accent-light: #1565c0;
|
|
|
|
// Status colors
|
|
$color-success: #2e7d32;
|
|
$color-warning: #f57c00;
|
|
$color-error: #c62828;
|
|
$color-info: #1565c0;
|
|
|
|
// Typography
|
|
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
$font-family-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;
|
|
|
|
$font-size-xs: 0.6875rem; // 11px
|
|
$font-size-sm: 0.75rem; // 12px
|
|
$font-size-base: 0.8125rem; // 13px
|
|
$font-size-md: 0.875rem; // 14px
|
|
$font-size-lg: 1rem; // 16px
|
|
$font-size-xl: 1.125rem; // 18px
|
|
$font-size-2xl: 1.25rem; // 20px
|
|
$font-size-3xl: 1.5rem; // 24px
|
|
|
|
$font-weight-normal: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
$line-height-tight: 1.2;
|
|
$line-height-base: 1.4;
|
|
$line-height-loose: 1.6;
|
|
|
|
// Spacing - Dense, compact
|
|
$spacing-0: 0;
|
|
$spacing-1: 0.125rem; // 2px
|
|
$spacing-2: 0.25rem; // 4px
|
|
$spacing-3: 0.375rem; // 6px
|
|
$spacing-4: 0.5rem; // 8px
|
|
$spacing-5: 0.625rem; // 10px
|
|
$spacing-6: 0.75rem; // 12px
|
|
$spacing-8: 1rem; // 16px
|
|
$spacing-10: 1.25rem; // 20px
|
|
$spacing-12: 1.5rem; // 24px
|
|
$spacing-16: 2rem; // 32px
|
|
$spacing-20: 2.5rem; // 40px
|
|
|
|
// Borders - Sharp, no radius
|
|
$border-width: 1px;
|
|
$border-width-2: 2px;
|
|
$border-color: $color-gray-300;
|
|
$border-color-dark: $color-gray-400;
|
|
$border-radius: 0; // NO ROUNDEDNESS
|
|
|
|
// Shadows - Minimal
|
|
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
$shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
$shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
|
|
// Transitions
|
|
$transition-fast: 0.1s ease;
|
|
$transition-base: 0.15s ease;
|
|
$transition-slow: 0.25s ease;
|
|
|
|
// Layout
|
|
$max-width-sm: 640px;
|
|
$max-width-md: 768px;
|
|
$max-width-lg: 1024px;
|
|
$max-width-xl: 1280px;
|
|
$max-width-2xl: 1536px;
|
|
|
|
// Header
|
|
$header-height: 40px;
|
|
$header-bg: $color-black;
|
|
$header-text: $color-white;
|
|
|
|
// Table
|
|
$table-header-bg: $color-gray-100;
|
|
$table-border: $color-gray-300;
|
|
$table-row-hover: $color-gray-50;
|
|
$table-cell-padding: $spacing-3 $spacing-4;
|
|
|
|
// Form inputs
|
|
$input-height: 28px;
|
|
$input-padding: $spacing-2 $spacing-4;
|
|
$input-border: $border-color;
|
|
$input-focus-border: $color-accent;
|
|
$input-bg: $color-white;
|
|
|
|
// Buttons
|
|
$btn-height: 28px;
|
|
$btn-padding: $spacing-2 $spacing-6;
|