@mixin componentLightThemeVars() {
  --anywhere-primary: #{$color-base-blue-500};
  --anywhere-primary-towhite: #{$color-base-blue-100};
  --anywhere-primary-gradient-1: var(--anywhere-primary);
  --anywhere-primary-gradient-2: #{$color-base-blue-300};
  --anywhere-primary-text-color: #ffffff;
  --anywhere-primary-hover: #{$color-base-light-blue-600};

  --anywhere-secondary: #ffffff;
  --anywhere-secondary-gradient-1: var(--anywhere-secondary);
  --anywhere-secondary-gradient-2: #{$color-base-gray-200};
  --anywhere-secondary-text-color: #{$color-base-gray-600};
  --anywhere-secondary-hover: #{$color-base-gray-100};
  --anywhere-secondary-hover-border: #{$color-base-gray-500};

  --anywhere-success: #{$color-base-green-500};
  --anywhere-success-towhite: #{$color-base-green-100};
  --anywhere-success-gradient-1: var(--anywhere-success);
  --anywhere-success-gradient-2: #{$color-base-green-300};
  --anywhere-success-text-color: #ffffff;
  --anywhere-success-hover: #{$color-base-green-400};

  --anywhere-danger: #{$color-base-red-500};
  --anywhere-danger-towhite: #{$color-base-red-100};
  --anywhere-danger-gradient-1: var(--anywhere-danger);
  --anywhere-danger-gradient-2: #{$color-base-red-300};
  --anywhere-danger-text-color: #ffffff;
  --anywhere-danger-hover: #{$color-base-red-400};

  --anywhere-warn: #{$color-base-orange-500};
  --anywhere-warn-towhite: #{$color-base-orange-100};
  --anywhere-warn-gradient-1: var(--anywhere-warn);
  --anywhere-warn-gradient-2: #{$color-base-orange-300};
  --anywhere-warn-text-color: #ffffff;
  --anywhere-warn-hover: #{$color-base-orange-400};

  --anywhere-info: #{$color-base-light-blue-500};
  --anywhere-info-towhite: #{$color-base-light-blue-100};
  --anywhere-info-gradient-1: var(--anywhere-info);
  --anywhere-info-gradient-2: #{$color-base-light-blue-300};
  --anywhere-info-text-color: #ffffff;
  --anywhere-info-hover: #{$color-base-light-blue-400};

  --anywhere-disabled: #{$color-base-gray-200};
  --anywhere-disabled-text-color: #{$color-base-gray-400};
}
