@orangesk/orange-design-system 2.0.0-beta.47 → 2.0.0-beta.49

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

@@ -1,81 +1,91 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/convert";
-@use "./config";
 
 @mixin tile-base {
   display: flex;
   position: relative;
   overflow: hidden;
   width: 100%;
-  border-radius: convert.to-rem(10px);
-  border: 1px solid var(--color-border-strong);
+  border-radius: convert.to-rem(5px);
+  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-fill-primary);
+  color: var(--color-text-default);
   word-break: break-word;
 }
 
-@mixin tile-image-aspect {
-  aspect-ratio: 310 / 466 !important;
-}
-
 @mixin tile-body {
   flex: 1;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  gap: space.get("medium");
+  padding: space.get("medium");
   z-index: 1;
+
   *:last-child {
     margin-bottom: 0;
   }
-  @each $breakpoint, $space in config.$spacing {
-    @include breakpoint.get($breakpoint) {
-      padding: $space;
-    }
+
+  > .icon,
+  > svg {
+    width: convert.to-rem(24px);
+    height: convert.to-rem(24px);
   }
-}
 
-@mixin tile-body-space-small {
-  padding: space.get("medium");
-}
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("large");
 
-@mixin tile-bg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  object-fit: cover;
-  object-position: center center;
-  height: 100%;
-  margin-bottom: 0 !important;
+    > .icon,
+    > svg {
+      width: convert.to-rem(32px);
+      height: convert.to-rem(32px);
+    }
+  }
 }
 
-@mixin tile-image-gradient {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
-  color: #fff;
-}
+@mixin tile-body-compact {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: space.get("xsmall");
+  padding: convert.to-rem(15px);
+  flex-shrink: 0;
+  text-wrap: nowrap;
 
-@mixin tile-image-gradient-end {
-  background: linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 0.75) 40%,
-    rgba(0, 0, 0, 0) 70%
-  );
+  @include breakpoint.get("md") {
+    flex-direction: column;
+    padding: space.get("medium");
+  }
 }
 
 @mixin tile-action {
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  order: 1;
+  justify-content: space-between;
+  gap: convert.to-rem(15px);
+  padding: space.get("large") space.get("medium");
+
+  @include breakpoint.get("sm") {
+    gap: space.get("medium");
+    padding: space.get("large");
+  }
+}
+
+@mixin tile-action-shell {
+  background-color: transparent;
+  color: var(--color-text-inverse);
+  border-color: var(--color-border-strong);
 }
 
 @mixin tile-action-icon {
-  order: 2;
-  margin-left: space.get("small");
   flex-shrink: 0;
+  width: convert.to-rem(24px);
+  height: convert.to-rem(24px);
+
+  @include breakpoint.get("sm") {
+    width: convert.to-rem(32px);
+    height: convert.to-rem(32px);
+  }
 }

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

@@ -4,33 +4,21 @@
   .tile {
     @include mixins.tile-base;
 
-    &--image {
-      @include mixins.tile-image-aspect;
-    }
-
     &__body {
       @include mixins.tile-body;
     }
 
-    &__body--space-small {
-      @include mixins.tile-body-space-small;
-    }
-
-    &__bg {
-      @include mixins.tile-bg;
-    }
-
-    &--image .tile__body {
-      @include mixins.tile-image-gradient;
-      &.justify-content-end {
-        @include mixins.tile-image-gradient-end;
-      }
+    &--compact .tile__body {
+      @include mixins.tile-body-compact;
     }
 
     &--action {
+      @include mixins.tile-action-shell;
+
       .tile__body {
         @include mixins.tile-action;
       }
+
       .icon {
         @include mixins.tile-action-icon;
       }

package/src/components/Tile/tests/Tile.unit.test.jsx

@@ -8,6 +8,7 @@ describe("rendering Tile", () => {
       const { getByTestId } = render(<Tile data-testid="test-id" />);
       expect(getByTestId("test-id").tagName).toBe("DIV");
       expect(getByTestId("test-id")).toHaveClass("tile");
+      expect(getByTestId("test-id")).not.toHaveClass("surface-primary");
     });
     it("renders child div with class tile__body", () => {
       const { getByTestId } = render(<Tile data-testid="test-id" />);
@@ -28,78 +29,6 @@ describe("rendering Tile", () => {
       expect(getByTestId("test-id")).toHaveClass("tile");
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-    it("renders Image when backgroundImage is object of Image props and src is string", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("img")).toBeInTheDocument();
-      // The Image component may add the 'img' class, but always has 'tile__bg'
-      expect(container.querySelector("img")).toHaveClass("tile__bg");
-    });
-    it("renders image inside picture when backgroundImage is object of Image props and src is object", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: { default: "./test.png" }, alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("picture")).toBeInTheDocument();
-      const img = container.querySelector("picture").querySelector("img");
-      expect(img).toBeInTheDocument();
-      // Update: Only check for class if it exists, otherwise check for no class
-      // If the implementation no longer adds 'tile__bg', this should pass
-      expect(img.className === "" || img.className === undefined).toBe(true);
-    });
-    it("background image has src set to backgroundImage.src", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(new URL(container.querySelector("img").src).pathname).toBe(
-        "/test.png",
-      );
-    });
-    it("background image has alt set to backgroundImage.alt", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{ src: "./test.png", alt: "test" }}
-        />,
-      );
-      expect(container.querySelector("img").alt).toBe("test");
-    });
-    it("background image has additional class when backgroundImage.className is set", () => {
-      const { container } = render(
-        <Tile
-          data-testid="test-id"
-          backgroundImage={{
-            src: "./test.png",
-            alt: "test",
-            className: "test-class",
-          }}
-        />,
-      );
-      expect(container.querySelector("img")).toHaveClass("tile__bg");
-      expect(container.querySelector("img")).toHaveClass("test-class");
-    });
-    it("has surface class when color prop is set", () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" color="surface-secondary" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("surface-secondary");
-    });
-    it("applies surface-contrast and text-inverse classes when color is surface-contrast", () => {
-      const { getByTestId } = render(
-        <Tile data-testid="test-id" color="surface-contrast" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("surface-contrast");
-      expect(getByTestId("test-id")).toHaveClass("text-inverse");
-    });
     it("applies hAlign and vAlign classes to body", () => {
       const { getByTestId } = render(
         <Tile data-testid="test-id" hAlign="center" vAlign="space-between" />,
@@ -108,26 +37,28 @@ describe("rendering Tile", () => {
       expect(body).toHaveClass("align-items-center");
       expect(body).toHaveClass("justify-content-space-between");
     });
-    it("applies space class to body when space prop is set", () => {
+    it("applies compact wrapper class when variant is compact", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" space="small" />,
+        <Tile data-testid="test-id" variant="compact" />,
       );
+      expect(getByTestId("test-id")).toHaveClass("tile--compact");
       const body = getByTestId("test-id").querySelector(".tile__body");
-      expect(body).toHaveClass("tile__body--space-small");
+      expect(body).not.toHaveClass("tile__body--compact");
     });
     it("applies variant class to wrapper when variant is set", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" variant="image" />,
+        <Tile data-testid="test-id" variant="action" />,
       );
-      expect(getByTestId("test-id")).toHaveClass("tile--image");
+      expect(getByTestId("test-id")).toHaveClass("tile--action");
     });
     it("renders Icon when variant is 'action'", () => {
       const { getByTestId } = render(
         <Tile data-testid="test-id" variant="action" />,
       );
-      // The Icon should be rendered as the first child of .tile__body
       const body = getByTestId("test-id").querySelector(".tile__body");
       expect(body.querySelector("svg")).toBeInTheDocument();
+      expect(body.lastElementChild.tagName).toBe("svg");
+      expect(body).not.toHaveClass("tile__body--action");
     });
   });
 });

package/src/styles/tokens/color-vars.scss

@@ -7,7 +7,6 @@
 :host,
 :host(.is-light),
 .is-light,
-.bg-white,
 #root.is-light,
 #root-modals.is-light,
 #root-tooltips.is-light,
@@ -24,7 +23,6 @@
 // Dark theme CSS variables
 :host(.is-dark),
 .is-dark,
-.bg-black,
 #root.is-dark,
 #root-modals.is-dark,
 #root-tooltips.is-dark,

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/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"),
-);