@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0-beta.9

package/src/styles/utilities/color.scss

@@ -1,39 +1,94 @@
 @use "../tokens/color";
-
-// TODO premyslieť, či je potrebné tieto farby nahradiť tokenmi, alebo hardcodovat aby neboli nepredvidatelne
+@use "sass:map";
 
 @layer utilities {
+  // Background utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "background-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Surface utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "surface-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Fill utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "fill-") == 1 {
+      .#{$name} {
+        background-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Border utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "border-") == 1 {
+      .#{$name} {
+        border-color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Text color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "text-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Icon color utilities
+  @each $name, $value in color.$colors-light {
+    @if str-index($name, "icon-") == 1 {
+      .#{$name} {
+        color: var(--color-#{$name}) !important;
+      }
+    }
+  }
+
+  // Legacy classes - DEPRECATED (add deprecation warnings)
   .color-black {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-default instead of .color-black";
     color: color.$black !important;
   }
 
   .color-orange {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-accent instead of .color-orange";
     color: var(--color-text-accent) !important;
   }
 
   .color-gray {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-secondary instead of .color-gray";
     color: color.$gray-800 !important;
   }
 
   .color-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .text-inverse instead of .color-white";
     color: color.$white !important;
   }
 
   .color-blue {
+    @warn "Deprecated: Use .icon-information instead of .color-blue";
     color: var(--color-icon-information) !important;
   }
 
   .color-danger {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .icon-negative instead of .color-danger";
     color: var(--color-icon-negative) !important;
   }
 
   .bg-white {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .background-primary instead of .bg-white";
     background-color: color.$white !important;
     color: var(--color-text-default);
 
@@ -44,10 +99,9 @@
   }
 
   .bg-black {
-    // TODO: replace with new token when available
-    // background-color: color.$black !important;
+    @warn "Deprecated: Use .background-contrast instead of .bg-black";
     background-color: #141414 !important;
-    color: var(--color-text-default);
+    color: var(--color-text-inverse);
 
     .color-gray,
     &.color-gray {
@@ -61,83 +115,92 @@
   }
 
   .bg-orange {
+    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
     background-color: var(--color-surface-secondary) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-orange-dark {
+    @warn "Deprecated: Use .surface-tertiary instead of .bg-orange-dark";
     background-color: var(--color-surface-tertiary) !important;
     color: var(--color-text-inverse) !important;
   }
 
   .bg-gray {
+    @warn "Deprecated: Use .surface-subtle instead of .bg-gray";
     background-color: var(--color-surface-subtle) !important;
   }
 
   .bg-gray-lighter {
+    @warn "Deprecated: Use .background-secondary instead of .bg-gray-lighter";
     background-color: var(--color-background-secondary) !important;
   }
 
   .bg-blue {
+    @warn "Deprecated: Use .fill-accent1 instead of .bg-blue";
     background-color: var(--color-fill-accent1) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-green {
+    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
     background-color: var(--color-fill-accent2) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-pink {
+    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
     background-color: var(--color-fill-accent3) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-violet {
+    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
     background-color: var(--color-fill-accent4) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow {
+    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
     background-color: var(--color-fill-accent5) !important;
-    // TODO: replace with new token when available
     color: color.$black !important;
   }
 
   .bg-yellow-lighter {
-    // TODO: replace with new token when available
+    @warn "Deprecated: This class will be removed in future versions";
     background-color: color.$yellow-lighter !important;
     color: color.$black !important;
   }
 
   .bg-red {
-    // TODO: replace with new token when available
+    @warn "Deprecated: Use .fill-negative instead of .bg-red";
     background-color: color.$red !important;
     color: color.$black !important;
   }
 
   .bg-accent {
+    @warn "Deprecated: Use .background-accent instead of .bg-accent";
     background-color: var(--color-background-accent) !important;
     color: var(--color-text-default) !important;
   }
 
   .bg-accent1-blog {
+    @warn "Deprecated: Use .background-accent1-blog instead of .bg-accent1-blog";
     background-color: var(--color-background-accent1-blog) !important;
     color: var(--color-text-default) !important;
   }
 
   .bg-accent2-blog {
+    @warn "Deprecated: Use .background-accent2-blog instead of .bg-accent2-blog";
     background-color: var(--color-background-accent2-blog) !important;
     color: var(--color-text-default) !important;
   }
 
+  // Legacy selection styles
   .bg-orange,
-  .bg-orange-dark {
+  .bg-orange-dark,
+  .surface-secondary,
+  .surface-tertiary {
     &::selection {
       background-color: var(--color-background-contrast);
       color: var(--color-text-inverse);
@@ -148,7 +211,14 @@
     color: var(--color-text-default);
   }
 
+  // Legacy classes - continued
   .bg-none {
+    @warn "Deprecated: Use .background-none instead of .bg-none";
+    background: none !important;
+  }
+
+  // Utility for removing background
+  .background-none {
     background: none !important;
   }
 }