web-antrean/assets/scss/_colors.scss

@use 'sass:map';

$neutral-900: #212121;
$neutral-800: #4D4D4D;
$neutral-700: #717171;
$neutral-600: #89939E;
$neutral-500: #CDD4DC;
$neutral-400: #E1E5EA;
$neutral-300: #F5F7FA;
$neutral-100: #FFFFFF;

$primary-700: #3556AE;
$primary-600: #3A61C9;
$primary-500: #567EE7;
$primary-400: #7898EC;
$primary-300: #9AB2F1;
$primary-200: #BBCBF5;
$primary-100: #DDE5FA;
$primary-50: #EFF3FD;

$secondary-700: #E65A0D;
$secondary-600: #F16F29;
$secondary-500: #FF8441;
$secondary-400: #FF9D67;
$secondary-300: #FFB58D;
$secondary-200: #FFCEB3;
$secondary-100: #FFE6D9;
$secondary-50: #FFF3EC;

$success-700: #008D65;
$success-600: #33A484;
$success-500: #59B59B;
$success-400: #80C6B2;
$success-300: #A6D7C9;
$success-200: #CCE8E0;
$success-100: #E5F4F0;

$danger-700: #D82719;
$danger-600: #DE473B;
$danger-500: #E57269;
$danger-400: #EB938C;
$danger-300: #F1B3AE;
$danger-200: #F7D4D1;
$danger-100: #FBE9E8;

// CSS Variables untuk dynamic theming
:root {
  // Neutral
  --color-neutral-900: #{$neutral-900};
  --color-neutral-800: #{$neutral-800};
  --color-neutral-700: #{$neutral-700};
  --color-neutral-600: #{$neutral-600};
  --color-neutral-500: #{$neutral-500};
  --color-neutral-400: #{$neutral-400};
  --color-neutral-300: #{$neutral-300};
  --color-neutral-100: #{$neutral-100};

  // Primary
  --color-primary-700: #{$primary-700};
  --color-primary-600: #{$primary-600};
  --color-primary-500: #{$primary-500};
  --color-primary-400: #{$primary-400};
  --color-primary-300: #{$primary-300};
  --color-primary-200: #{$primary-200};
  --color-primary-100: #{$primary-100};
  --color-primary-50: #{$primary-50};

  // Secondary
  --color-secondary-700: #{$secondary-700};
  --color-secondary-600: #{$secondary-600};
  --color-secondary-500: #{$secondary-500};
  --color-secondary-400: #{$secondary-400};
  --color-secondary-300: #{$secondary-300};
  --color-secondary-200: #{$secondary-200};
  --color-secondary-100: #{$secondary-100};
  --color-secondary-50: #{$secondary-50};

  // Success
  --color-success-700: #{$success-700};
  --color-success-600: #{$success-600};
  --color-success-500: #{$success-500};
  --color-success-400: #{$success-400};
  --color-success-300: #{$success-300};
  --color-success-200: #{$success-200};
  --color-success-100: #{$success-100};

  // Danger
  --color-danger-700: #{$danger-700};
  --color-danger-600: #{$danger-600};
  --color-danger-500: #{$danger-500};
  --color-danger-400: #{$danger-400};
  --color-danger-300: #{$danger-300};
  --color-danger-200: #{$danger-200};
  --color-danger-100: #{$danger-100};

  // Theme colors (akan di-override oleh theme system)
  --color-primary: #{$primary-500};
  --color-secondary: #{$secondary-500};
  --color-success: #{$success-600};
  --color-danger: #{$danger-600};
  --color-background: #{$neutral-300};
  --color-surface: #{$neutral-100};
  --color-textPrimary: #{$neutral-900};
  --color-textSecondary: #{$neutral-700};
  --color-borderColor: #{$neutral-500};
}

// Dark mode base
.dark {
  --color-background: #1a1a1a;
  --color-surface: #{$neutral-900};
  --color-textPrimary: #{$neutral-100};
  --color-textSecondary: #{$neutral-500};
  --color-borderColor: #{$neutral-800};
}

// Mixin untuk generate color utilities
@mixin color-utilities($prefix, $color) {
  .text-#{$prefix} {
    color: $color;
  }
  
  .bg-#{$prefix} {
    background-color: $color;
  }
  
  .border-#{$prefix} {
    border-color: $color;
  }
}

// Generate color utilities
$colors: (
  'neutral-900': $neutral-900,
  'neutral-800': $neutral-800,
  'neutral-700': $neutral-700,
  'neutral-600': $neutral-600,
  'neutral-500': $neutral-500,
  'neutral-400': $neutral-400,
  'neutral-300': $neutral-300,
  'neutral-100': $neutral-100,
  'primary-700': $primary-700,
  'primary-600': $primary-600,
  'primary-500': $primary-500,
  'primary-400': $primary-400,
  'primary-300': $primary-300,
  'primary-200': $primary-200,
  'primary-100': $primary-100,
  'primary-50': $primary-50,
  'secondary-700': $secondary-700,
  'secondary-600': $secondary-600,
  'secondary-500': $secondary-500,
  'secondary-400': $secondary-400,
  'secondary-300': $secondary-300,
  'secondary-200': $secondary-200,
  'secondary-100': $secondary-100,
  'secondary-50': $secondary-50,
  'success-700': $success-700,
  'success-600': $success-600,
  'success-500': $success-500,
  'success-400': $success-400,
  'success-300': $success-300,
  'success-200': $success-200,
  'success-100': $success-100,
  'danger-700': $danger-700,
  'danger-600': $danger-600,
  'danger-500': $danger-500,
  'danger-400': $danger-400,
  'danger-300': $danger-300,
  'danger-200': $danger-200,
  'danger-100': $danger-100
);

@each $name, $color in $colors {
  @include color-utilities($name, $color);
}

// Shorthand semantic colors
.text-primary { color: $primary-500; }
.text-secondary { color: $secondary-500; }
.text-success { color: $success-600; }
.text-danger { color: $danger-600; }
.text-muted { color: $neutral-600; }

.bg-primary { background-color: $primary-500; }
.bg-secondary { background-color: $secondary-500; }
.bg-success { background-color: $success-600; }
.bg-danger { background-color: $danger-600; }
.bg-light { background-color: $neutral-300; }
.bg-white { background-color: $neutral-100; }