Use tint/shade to make alert-colors more robust

src/pretix/static/pretixbase/scss/_bootstrap_vars.scss

@@ -122,29 +122,29 @@ $label-warning-bg-hover: var(--pretix-brand-warning-darken-10);
 $label-danger-bg: var(--pretix-brand-danger);
 $label-danger-bg-hover: var(--pretix-brand-danger-darken-10);
 
-$alert-success-bg: var(--pretix-brand-success-lighten-48);
-$alert-success-text: var(--pretix-brand-success-darken-10);
+$alert-success-bg: var(--pretix-brand-success-tint-85);
+$alert-success-text: var(--pretix-brand-success-shade-42);
 $alert-success-border: var(--pretix-brand-success);
 $alert-success-hr: var(--pretix-brand-success-darken-5);
-$alert-success-link: var(--pretix-brand-success-darken-20);
+$alert-success-link: var(--pretix-brand-success-shade-42);
 
-$alert-info-bg: var(--pretix-brand-info-lighten-33);
-$alert-info-text: var(--pretix-brand-info-darken-20);
+$alert-info-bg: var(--pretix-brand-info-tint-85);
+$alert-info-text: var(--pretix-brand-info-shade-42);
 $alert-info-border: var(--pretix-brand-info);
 $alert-info-hr: var(--pretix-brand-info-darken-5);
-$alert-info-link: var(--pretix-brand-info-darken-30);
+$alert-info-link: var(--pretix-brand-info-shade-42);
 
-$alert-warning-bg: var(--pretix-brand-warning-lighten-41);
-$alert-warning-text: var(--pretix-brand-warning-darken-25);
+$alert-warning-bg: var(--pretix-brand-warning-tint-85);
+$alert-warning-text: var(--pretix-brand-warning-shade-42);
 $alert-warning-border: var(--pretix-brand-warning);
 $alert-warning-hr: var(--pretix-brand-warning-darken-5);
-$alert-warning-link: var(--pretix-brand-warning-darken-35);
+$alert-warning-link: var(--pretix-brand-warning-shade-42);
 
-$alert-danger-bg: var(--pretix-brand-danger-lighten-43);
-$alert-danger-text: var(--pretix-brand-danger-darken-5);
+$alert-danger-bg: var(--pretix-brand-danger-tint-85);
+$alert-danger-text: var(--pretix-brand-danger-shade-42);
 $alert-danger-border: var(--pretix-brand-danger);
 $alert-danger-hr: var(--pretix-brand-danger-darken-5);
-$alert-danger-link: var(--pretix-brand-danger-darken-15);
+$alert-danger-link: var(--pretix-brand-danger-shade-42);
 
 $main-box-bg: #FFFFFF;
 
@@ -156,4 +156,4 @@ $slider-secondary-bottom: var(--pretix-brand-primary-lighten-23-saturate-2);
 /* The following vars default to $body-bg in bootstrap, which we don't want */
 $nav-tabs-active-link-hover-bg: #FFFFFF;
 $nav-tabs-justified-active-link-border-color: #FFFFFF;
-$thumbnail-bg: #FFFFFF;
+$thumbnail-bg: #FFFFFF;

src/pretix/static/pretixbase/scss/_theme_variables.scss

@@ -73,7 +73,9 @@ $in-border-radius-small: 2px !default;
   --pretix-brand-success-darken-20: #{darken($in-brand-success, 20%)};
   --pretix-brand-success-darken-30: #{darken($in-brand-success, 30%)};
   --pretix-brand-success-tint-50: #{tint($in-brand-success, 50%)};
+  --pretix-brand-success-tint-85: #{tint($in-brand-success, 85%)};
   --pretix-brand-success-shade-25: #{shade($in-brand-success, 25%)};
+  --pretix-brand-success-shade-42: #{shade($in-brand-success, 42%)};
 
   --pretix-brand-info-lighten-23: #{lighten($in-brand-info, 23%)};
   --pretix-brand-info-lighten-25: #{lighten($in-brand-info, 25%)};
@@ -84,7 +86,9 @@ $in-border-radius-small: 2px !default;
   --pretix-brand-info-darken-17: #{darken($in-brand-info, 17%)};
   --pretix-brand-info-darken-20: #{darken($in-brand-info, 20%)};
   --pretix-brand-info-darken-30: #{darken($in-brand-info, 30%)};
+  --pretix-brand-info-tint-85: #{tint($in-brand-info, 85%)};
   --pretix-brand-info-shade-25: #{shade($in-brand-info, 25%)};
+  --pretix-brand-info-shade-42: #{shade($in-brand-info, 42%)};
 
   --pretix-brand-warning-lighten-12: #{lighten($in-brand-warning, 12%)};
   --pretix-brand-warning-lighten-31: #{lighten($in-brand-warning, 31%)};
@@ -101,7 +105,9 @@ $in-border-radius-small: 2px !default;
   --pretix-brand-warning-darken-30: #{darken($in-brand-warning, 30%)};
   --pretix-brand-warning-darken-35: #{darken($in-brand-warning, 35%)};
   --pretix-brand-warning-tint-50: #{tint($in-brand-warning, 50%)};
+  --pretix-brand-warning-tint-85: #{tint($in-brand-warning, 85%)};
   --pretix-brand-warning-shade-25: #{shade($in-brand-warning, 25%)};
+  --pretix-brand-warning-shade-42: #{shade($in-brand-warning, 42%)};
   --pretix-brand-warning-transparent-60: #{transparentize($in-brand-warning, 0.6)};
 
   --pretix-brand-danger-lighten-5: #{lighten($in-brand-danger, 5%)};
@@ -118,7 +124,9 @@ $in-border-radius-small: 2px !default;
   --pretix-brand-danger-darken-20: #{darken($in-brand-danger, 20%)};
   --pretix-brand-danger-darken-30: #{darken($in-brand-danger, 30%)};
   --pretix-brand-danger-tint-50: #{tint($in-brand-danger, 50%)};
+  --pretix-brand-danger-tint-85: #{tint($in-brand-danger, 85%)};
   --pretix-brand-danger-shade-25: #{shade($in-brand-danger, 25%)};
+  --pretix-brand-danger-shade-42: #{shade($in-brand-danger, 42%)};
 
   --pretix-border-radius-base: #{$in-border-radius-base};
   --pretix-border-radius-large: #{$in-border-radius-large};
@@ -140,4 +148,4 @@ $in-border-radius-small: 2px !default;
       --pretix-body-bg-white-0: 1;
     }
   }
-}
+}