# thinkrank/1.0.0/src/shared/styles/_variables.scss

ThinkRank AI SEO – AI SEO Plugin for WordPress: Schema, XML Sitemaps, Meta Tags, Search Console & Local SEO, version 1.0.0. 229 lines.

- Page: https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/shared/styles/_variables.scss
- Raw: https://pluginprobe.com/plugins/thinkrank/1.0.0/raw/src/shared/styles/_variables.scss
- Modified: 2025-08-10T07:57:44+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/thinkrank/1.0.0/code/src/shared/styles/_variables.scss#L10-L20`.

```scss
/**
 * Shared SCSS Variables
 * 
 * Design tokens and SCSS variables shared across admin and metabox components
 * 
 * @package ThinkRank
 * @since 1.0.0
 */

// Color Palette (matching original admin variables)
$primary-blue: #2563eb;
$primary-blue-dark: #1d4ed8;
$primary-blue-light: #3b82f6;

$success-green: #22c55e;
$success-green-dark: #16a34a;
$success-green-light: #34d399;

$warning-orange: #f59e0b;
$warning-orange-dark: #d97706;
$warning-orange-light: #fbbf24;

$error-red: #ef4444;
$error-red-dark: #dc2626;
$error-red-light: #f87171;

$purple: #8b5cf6;
$purple-dark: #7c3aed;
$purple-light: #a78bfa;

// Neutral Colors
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

$white: #ffffff;
$black: #000000;

// Provider Colors
$openai-green: #10a37f;
$openai-green-dark: #0d8f6f;
$claude-orange: #d97757;
$claude-orange-dark: #c96643;

// Background Colors
$bg-primary: $white;
$bg-secondary: $gray-50;
$bg-tertiary: $gray-100;

// Text Colors
$text-primary: $gray-900;
$text-secondary: $gray-700;
$text-tertiary: $gray-500;
$text-muted: $gray-400;

// Border Colors
$border-light: $gray-200;
$border-medium: $gray-300;
$border-dark: $gray-400;

// Legacy ThinkRank variables for compatibility
$thinkrank-primary: $primary-blue;
$thinkrank-secondary: $primary-blue-dark;
$thinkrank-success: $success-green;
$thinkrank-warning: $warning-orange;
$thinkrank-error: $error-red;
$thinkrank-text-primary: $text-primary;
$thinkrank-text-secondary: $text-secondary;
$thinkrank-text-light: $text-tertiary;
$thinkrank-border: $border-medium;
$thinkrank-border-light: $border-light;
$thinkrank-bg: $bg-secondary;
$thinkrank-white: $white;
$thinkrank-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
$thinkrank-radius: 4px;
$thinkrank-spacing: 16px;

// Typography Scale
$font-size-xs: 0.75rem;
$font-size-sm: 0.875rem;
$font-size-base: 1rem;
$font-size-lg: 1.125rem;
$font-size-xl: 1.25rem;
$font-size-2xl: 1.5rem;
$font-size-3xl: 1.875rem;

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

// Line Heights
$line-height-tight: 1.25;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// Spacing Scale (matching original admin variables)
$spacing-xs: 0.25rem;   // 4px
$spacing-sm: 0.5rem;    // 8px
$spacing-md: 0.75rem;   // 12px
$spacing-lg: 1rem;      // 16px
$spacing-xl: 1.25rem;   // 20px
$spacing-2xl: 1.5rem;   // 24px
$spacing-3xl: 2rem;     // 32px
$spacing-4xl: 2.5rem;   // 40px
$spacing-5xl: 3rem;     // 48px

// Legacy spacing variables
$spacing-1: 0.25rem;
$spacing-2: 0.5rem;
$spacing-3: 0.75rem;
$spacing-4: 1rem;
$spacing-5: 1.25rem;
$spacing-6: 1.5rem;
$spacing-8: 2rem;
$spacing-10: 2.5rem;
$spacing-12: 3rem;
$spacing-16: 4rem;
$spacing-20: 5rem;
$spacing-24: 6rem;

// Spacing Scale Map (for utility generation)
$spacing-scale: (
  'xs': $spacing-xs,
  'sm': $spacing-sm,
  'md': $spacing-md,
  'lg': $spacing-lg,
  'xl': $spacing-xl,
  '2xl': $spacing-2xl,
  '3xl': $spacing-3xl,
  '4xl': $spacing-4xl,
  '5xl': $spacing-5xl,
  '0': 0,
  '1': $spacing-1,
  '2': $spacing-2,
  '3': $spacing-3,
  '4': $spacing-4,
  '5': $spacing-5,
  '6': $spacing-6,
  '8': $spacing-8,
  '10': $spacing-10,
  '12': $spacing-12,
  '16': $spacing-16,
  '20': $spacing-20,
  '24': $spacing-24
);

// Border Radius (matching original admin variables)
$radius-sm: 0.25rem;    // 4px
$radius-md: 0.375rem;   // 6px
$radius-lg: 0.5rem;     // 8px
$radius-xl: 0.75rem;    // 12px
$radius-2xl: 1rem;      // 16px
$radius-3xl: 1.5rem;    // 24px
$radius-full: 9999px;

// Shadows (matching original admin variables)
$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// Transitions (matching original admin variables)
$transition-fast: 0.15s ease;
$transition-normal: 0.2s ease;
$transition-slow: 0.3s ease;

// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

// Z-index Scale
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-popover: 1060;
$z-tooltip: 1070;

// Animation Durations
$duration-fast: 0.15s;
$duration-normal: 0.2s;
$duration-slow: 0.3s;

// Easing Functions
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in: cubic-bezier(0.4, 0, 1, 1);

// Component Specific Variables (matching original admin variables)

// Buttons
$button-height-sm: 2rem;
$button-height-md: 2.5rem;
$button-height-lg: 3rem;

$button-padding-sm: $spacing-sm $spacing-md;
$button-padding-md: $spacing-md $spacing-lg;
$button-padding-lg: $spacing-lg $spacing-xl;

// Cards
$card-padding: $spacing-2xl;
$card-border-radius: $radius-xl;
$card-shadow: $shadow-md;

// Forms
$input-height: 2.75rem;
$input-padding: $spacing-md $spacing-lg;
$input-border-radius: $radius-md;

// Dashboard
$dashboard-card-min-height: 140px;
$dashboard-gap: $spacing-2xl;
$dashboard-icon-size: 3rem;

```