@orangesk/orange-design-system 2.0.0-beta.46 → 2.0.0-beta.48

package/src/styles/utilities/color.scss

@@ -56,149 +56,6 @@
     }
   }
 
-  // Legacy classes - DEPRECATED (add deprecation warnings)
-  .color-black {
-    @warn "Deprecated: Use .text-default instead of .color-black";
-    color: color.$black !important;
-  }
-
-  .color-orange {
-    @warn "Deprecated: Use .text-accent instead of .color-orange";
-    color: var(--color-text-accent) !important;
-  }
-
-  .color-gray {
-    @warn "Deprecated: Use .text-secondary instead of .color-gray";
-    color: color.$gray-800 !important;
-  }
-
-  .color-white {
-    @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 {
-    @warn "Deprecated: Use .icon-negative instead of .color-danger";
-    color: var(--color-icon-negative) !important;
-  }
-
-  .bg-white {
-    @warn "Deprecated: Use .background-primary instead of .bg-white";
-    background-color: color.$white !important;
-    color: var(--color-text-default);
-
-    .color-blue,
-    &.color-blue {
-      color: var(--color-icon-information) !important; // enforce blue color
-    }
-  }
-
-  .bg-black {
-    @warn "Deprecated: Use .background-contrast instead of .bg-black";
-    background-color: #141414 !important;
-    color: var(--color-text-inverse);
-
-    .color-gray,
-    &.color-gray {
-      color: color.$gray-500 !important; // enforce brighter gray
-    }
-
-    .color-blue,
-    &.color-blue {
-      color: color.$blue !important; // enforce blue color
-    }
-  }
-
-  .bg-orange {
-    @warn "Deprecated: Use .surface-secondary instead of .bg-orange";
-    background-color: var(--color-surface-secondary) !important;
-    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;
-    color: color.$black !important;
-  }
-
-  .bg-green {
-    @warn "Deprecated: Use .fill-accent2 instead of .bg-green";
-    background-color: var(--color-fill-accent2) !important;
-    color: color.$black !important;
-  }
-
-  .bg-pink {
-    @warn "Deprecated: Use .fill-accent3 instead of .bg-pink";
-    background-color: var(--color-fill-accent3) !important;
-    color: color.$black !important;
-  }
-
-  .bg-violet {
-    @warn "Deprecated: Use .fill-accent4 instead of .bg-violet";
-    background-color: var(--color-fill-accent4) !important;
-    color: color.$black !important;
-  }
-
-  .bg-yellow {
-    @warn "Deprecated: Use .fill-accent5 instead of .bg-yellow";
-    background-color: var(--color-fill-accent5) !important;
-    color: color.$black !important;
-  }
-
-  .bg-yellow-lighter {
-    @warn "Deprecated: This class will be removed in future versions";
-    background-color: color.$yellow-lighter !important;
-    color: color.$black !important;
-  }
-
-  .bg-red {
-    @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,
   .surface-secondary,
   .surface-tertiary {
     &::selection {
@@ -207,16 +64,6 @@
     }
   }
 
-  .color-gray::selection {
-    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;

package/src/styles/utilities/horizontal-scroll.scss

@@ -15,14 +15,16 @@
 
     @supports selector(::-webkit-scrollbar) {
       &::-webkit-scrollbar {
-        height: convert.to-rem(6px);
+        height: convert.to-rem(8px);
         appearance: none;
-        background-color: var(--color-surface-moderate);
+        background-color: transparent;
         border-radius: 99px;
       }
 
       &::-webkit-scrollbar-track {
+        border: convert.to-rem(1px) solid transparent;
         background-color: var(--color-surface-moderate);
+        background-clip: content-box;
         border-radius: 99px;
       }
 
@@ -30,12 +32,15 @@
         opacity: 1;
         background-color: var(--color-fill-contrast);
         border-radius: 99px;
+        border: convert.to-rem(1px) solid transparent;
+        background-clip: content-box;
       }
 
       &:hover::-webkit-scrollbar-thumb,
       &:active::-webkit-scrollbar-thumb,
       &::-webkit-scrollbar-thumb:hover,
       &::-webkit-scrollbar-thumb:active {
+        border-width: 0;
         background-color: var(--color-fill-secondary) !important;
       }
     }

package/src/styles/utilities/text.scss

@@ -29,7 +29,6 @@
 
   .underline {
     text-decoration: underline !important;
-    text-underline-offset: 0.1em !important;
   }
 
   .no-underline {

package/src/components/Tile/CHANGELOG.md

@@ -1,28 +0,0 @@
-# Changelog for Tile Component
-
-## [Unreleased]
-
-### Breaking Changes
-
-- **Refactored color prop**: The `color` prop now uses global utility classes instead of component-specific color modifiers:
-  - Old: `color="white"` applied `.tile--white` class with custom CSS
-  - New: Uses global classes like `surface-primary`, `surface-secondary`, `background-contrast`, etc.
-  - Removed `"default"` and `"white"` color options
-  - Added support for: `"surface-primary"`, `"surface-secondary"`, `"surface-tertiary"`, `"surface-subtle"`, `"surface-moderate"`, `"surface-contrast"`, `"background-primary"`, `"background-secondary"`, `"background-contrast"`, `"background-accent"`
-
-### Migration Guide
-
-- Replace `color="white"` with `color="surface-primary"`
-- Replace any custom styling that relied on `.tile--white` with global surface utility classes
-- The new color system provides consistent styling across all components in the design system
-
-### Changed
-
-- Update `Tile` component documentation and usage examples:
-  - Expanded usage examples in `Tile.mdx` and `/app/components/tile/page.mdx` to demonstrate:
-    - New color options using global utility classes
-    - Background image and icon support
-    - Alignment options with `hAlign` and `vAlign` props
-    - Block link and action variants
-  - Improved documentation for accessibility and prop usage.
-  - Added more realistic content and layout examples for `Tile` in various color and background scenarios.

package/src/components/Tile/styles/config.scss

@@ -1,7 +0,0 @@
-@use "../../../styles/tokens/space";
-@use "../../../styles/tools/convert";
-
-$spacing: (
-  xs: convert.to-rem(15px),
-  md: space.get("large"),
-);