scss - colors in variables

httpdocs/assets/styles/atoms/_buttons.scss

@@ -39,7 +39,7 @@
 
   &:hover {
     background: linear-gradient(135deg, $color-accent, $color-accent-dark);
-    box-shadow: 0 3px 12px rgba(240, 165, 0, 0.45);
+    box-shadow: 0 3px 12px rgba($color-accent, 0.45);
   }
 }
 
@@ -56,12 +56,12 @@
 }
 
 .btn-ghost {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba($color-white, 0.15);
   color: $color-white;
   border-radius: $radius-sm;
   padding: $space-1 $space-3;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba($color-white, 0.25);
   }
 }

httpdocs/assets/styles/atoms/_inputs.scss

@@ -27,7 +27,7 @@
   &:focus {
     outline: none;
     border-color: $color-primary;
-    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
+    box-shadow: $shadow-focus;
   }
 }
 

httpdocs/assets/styles/atoms/_variables.scss

@@ -27,6 +27,19 @@ $color-day-active-bg:  #1a2a3a;
 $color-day-active-text:#ffffff;
 $color-day-hover:      rgba(255,255,255,0.2);
 
+$color-error:          #c83232;
+
+$color-success:        #2d9e60;
+$color-success-bg:     #e6f5ee;
+
+$color-activate:       #3a9a3a;
+$color-activate-light: #4ab44a;
+
+$color-warning:        #b86200;
+$color-warning-light:  #e8820a;
+
+$color-overlay:        rgba(0, 0, 0, 0.45);
+
 // ─── Typography ──────────────────────────────────────────────────────────────
 $font-family-base:     'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $font-size-xs:         0.7rem;
@@ -62,7 +75,10 @@ $radius-pill: 100px;
 
 // ─── Shadows ─────────────────────────────────────────────────────────────────
 $shadow-card:    0 2px 12px rgba(0, 60, 120, 0.08);
+$shadow-header:  0 2px 16px rgba(0, 50, 120, 0.2);
+$shadow-calendar:0 8px 32px rgba(0, 60, 120, 0.35);
 $shadow-input:   0 1px 3px rgba(0, 40, 80, 0.06) inset;
+$shadow-focus:   0 0 0 3px rgba(#4a90d9, 0.15);
 $shadow-button:  0 2px 8px rgba(240, 165, 0, 0.35);
 
 // ─── Transitions ─────────────────────────────────────────────────────────────

httpdocs/assets/styles/components/_account.scss

@@ -16,7 +16,7 @@
   align-items: center;
   justify-content: space-between;
   gap: $space-6;
-  box-shadow: 0 2px 16px rgba(0, 50, 120, 0.2);
+  box-shadow: $shadow-header;
 }
 
 .account-header__title {
@@ -28,7 +28,7 @@
 // ─── Tab-Navigation (Pill im Header) ─────────────────────────────────────────
 .account-tabs {
   display: flex;
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba($color-white, 0.18);
   border-radius: $radius-pill;
   padding: 3px;
   gap: $space-1;
@@ -42,7 +42,7 @@
   padding: $space-2 $space-5;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  color: rgba(255, 255, 255, 0.8);
+  color: rgba($color-white, 0.8);
   text-decoration: none;
   border-radius: $radius-pill;
   transition: background $transition-fast, color $transition-fast;
@@ -50,7 +50,7 @@
 
   &:hover:not(.account-tab--active) {
     color: $color-white;
-    background: rgba(255, 255, 255, 0.12);
+    background: rgba($color-white, 0.12);
   }
 
   &--active {
@@ -161,5 +161,5 @@
     transform: translateY(0);
   }
 
-  &--error { background: #c83232; }
+  &--error { background: $color-error; }
 }

httpdocs/assets/styles/components/_crud.scss

@@ -102,7 +102,7 @@
   svg { width: 14px; height: 14px; pointer-events: none; }
 
   &--edit:hover  { background: rgba($color-primary, 0.1); color: $color-primary; }
-  &--delete:hover{ background: rgba(200, 50, 50, 0.1); color: #c83232; }
+  &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   @media (hover: none) { opacity: 1; }
 }
@@ -168,7 +168,7 @@
 }
 
 .crud-row__btn--restore {
-  &:hover { background: rgba(74, 180, 74, 0.12); color: #3a9a3a; }
+  &:hover { background: rgba($color-activate-light, 0.12); color: $color-activate; }
 }
 
 // ─── Gruppen-Header (z.B. Verrechenbar / Nicht-verrechenbar) ──────────────────

httpdocs/assets/styles/components/_entry-list.scss

@@ -148,7 +148,7 @@
   svg { width: 14px; height: 14px; pointer-events: none; }
 
   &--edit:hover  { background: rgba($color-primary, 0.1); color: $color-primary; }
-  &--delete:hover{ background: rgba(200, 50, 50, 0.1); color: #c83232; }
+  &--delete:hover{ background: rgba($color-error, 0.1); color: $color-error; }
 
   // immer sichtbar auf Touch-Geräten
   @media (hover: none) { opacity: 1; }

httpdocs/assets/styles/components/_login.scss

@@ -28,10 +28,10 @@
 }
 
 .login-card__error {
-  background: rgba(200, 50, 50, 0.08);
-  border: 1px solid rgba(200, 50, 50, 0.25);
+  background: rgba($color-error, 0.08);
+  border: 1px solid rgba($color-error, 0.25);
   border-radius: $radius-sm;
-  color: #c83232;
+  color: $color-error;
   font-size: $font-size-sm;
   padding: $space-3 $space-4;
   margin-bottom: $space-6;

httpdocs/assets/styles/components/_main-nav.scss

@@ -2,7 +2,7 @@
 
 // ─── Dunkle Top-Navigation ────────────────────────────────────────────────────
 .main-nav {
-  background: #1a2a3a;
+  background: $color-text-dark;
   display: flex;
   align-items: stretch;
   justify-content: space-between;
@@ -27,7 +27,7 @@
   padding: 0 $space-4;
   font-size: $font-size-sm;
   font-weight: $font-weight-medium;
-  color: rgba(255, 255, 255, 0.65);
+  color: rgba($color-white, 0.65);
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition: color $transition-fast, border-color $transition-fast;

httpdocs/assets/styles/components/_month-calendar.scss

@@ -9,7 +9,7 @@
   background: linear-gradient(160deg, $color-primary-light, $color-primary-dark);
   border-radius: $radius-xl;
   padding: $space-4;
-  box-shadow: 0 8px 32px rgba(0, 60, 120, 0.35);
+  box-shadow: $shadow-calendar;
   z-index: 200;
   transform-origin: top right;
   transition:
@@ -56,7 +56,7 @@
   cursor: pointer;
   transition: background $transition-fast;
 
-  &:hover { background: rgba(255, 255, 255, 0.2); }
+  &:hover { background: rgba($color-white, 0.2); }
 
   svg { width: 8px; height: 14px; }
 }
@@ -81,7 +81,7 @@
     text-align: center;
     font-size: $font-size-xs;
     font-weight: $font-weight-bold;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba($color-white, 0.6);
     padding: $space-1 0;
     text-transform: uppercase;
     letter-spacing: 0.04em;
@@ -109,12 +109,12 @@
   user-select: none;
 
   &:hover:not(&--other) {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba($color-white, 0.2);
   }
 
   // Tage aus Vor-/Nachmonat
   &--other {
-    color: rgba(255, 255, 255, 0.35);
+    color: rgba($color-white, 0.35);
     cursor: default;
   }
 
@@ -125,13 +125,13 @@
     color: $color-text-dark;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.9);
+      background: rgba($color-white, 0.9);
     }
   }
 
   // Ausgewählter Tag
   &--active:not(&--today) {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba($color-white, 0.25);
     font-weight: $font-weight-bold;
   }
 }

httpdocs/assets/styles/components/_register.scss

@@ -53,10 +53,10 @@
 // ─── Errors ───────────────────────────────────────────────────────────────────
 .register-errors {
   &:not(:empty) {
-    background: rgba(200, 50, 50, 0.07);
-    border: 1px solid rgba(200, 50, 50, 0.25);
+    background: rgba($color-error, 0.07);
+    border: 1px solid rgba($color-error, 0.25);
     border-radius: $radius-sm;
-    color: #c83232;
+    color: $color-error;
     font-size: $font-size-sm;
     padding: $space-3 $space-4;
     margin-bottom: $space-6;
@@ -157,8 +157,8 @@
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: #e6f5ee;
-  color: #2d9e60;
+  background: $color-success-bg;
+  color: $color-success;
   font-size: 1.6rem;
   font-weight: $font-weight-bold;
   display: flex;
@@ -167,8 +167,8 @@
   margin: 0 auto $space-6;
 
   &--error {
-    background: rgba(200, 50, 50, 0.08);
-    color: #c83232;
+    background: rgba($color-error, 0.08);
+    color: $color-error;
   }
 }
 

httpdocs/assets/styles/components/_team.scss

@@ -10,8 +10,8 @@
   margin-left: $space-2;
 
   &--pending {
-    background: rgba(232, 130, 10, 0.12);
-    color: #b86200;
+    background: rgba($color-warning-light, 0.12);
+    color: $color-warning;
   }
 }
 
@@ -19,7 +19,7 @@
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.45);
+  background: $color-overlay;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -105,10 +105,10 @@
 .form-errors {
   margin: 0 $space-6;
   padding: $space-3 $space-4;
-  background: rgba(200, 50, 50, 0.08);
+  background: rgba($color-error, 0.08);
   border-radius: $radius-md;
-  border: 1px solid rgba(200, 50, 50, 0.2);
-  color: #c83232;
+  border: 1px solid rgba($color-error, 0.2);
+  color: $color-error;
   font-size: $font-size-sm;
 
   &[hidden] { display: none !important; }

httpdocs/assets/styles/components/_week-nav.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   gap: $space-1;
-  background: rgba(255, 255, 255, 0.18);
+  background: rgba($color-white, 0.18);
   border-radius: $radius-pill;
   padding: $space-1 $space-2;
   backdrop-filter: blur(6px);
@@ -28,7 +28,7 @@
   flex-shrink: 0;
   transition: background $transition-fast;
 
-  &:hover { background: rgba(255, 255, 255, 0.2); }
+  &:hover { background: rgba($color-white, 0.2); }
 
   svg { width: 8px; height: 14px; }
 }
@@ -68,7 +68,7 @@
   user-select: none;
 
   &:hover:not(.week-nav__day--active) {
-    background: rgba(255, 255, 255, 0.15);
+    background: rgba($color-white, 0.15);
   }
 
   &--active {
@@ -95,7 +95,7 @@
 
 .week-nav__day-date {
   font-size: $font-size-xs;
-  color: rgba(255, 255, 255, 0.78);
+  color: rgba($color-white, 0.78);
   line-height: 1.3;
 }
 
@@ -107,7 +107,7 @@
   width: 34px;
   height: 34px;
   border-radius: $radius-md;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba($color-white, 0.2);
   color: $color-white;
   cursor: pointer;
   border: none;
@@ -118,5 +118,5 @@
   svg { width: 16px; height: 16px; pointer-events: none; }
 
   &:hover,
-  &--active { background: rgba(255, 255, 255, 0.35); }
+  &--active { background: rgba($color-white, 0.35); }
 }

httpdocs/assets/styles/sections/_timetracking.scss

@@ -20,7 +20,7 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  box-shadow: 0 2px 16px rgba(0, 50, 120, 0.2);
+  box-shadow: $shadow-header;
 }
 
 .tt-header__meta {
@@ -37,7 +37,7 @@
 .tt-header__kw {
   font-size: $font-size-sm;
   font-weight: $font-weight-bold;
-  color: rgba(255, 255, 255, 0.75);
+  color: rgba($color-white, 0.75);
   line-height: 1.3;
 }