@orangesk/orange-design-system 2.0.0-beta.10 → 2.0.0-beta.11

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

@@ -7,11 +7,10 @@
   width: 100%;
   margin-bottom: space.get();
   color: var(--color-text-default);
-  background-color: var(--color-background-primary);
 }
 
 @mixin cells {
-  padding: space.get("small") space.get("small") space.get("small") 0;
+  padding: space.get("medium");
   vertical-align: middle;
   font-size: inherit;
   line-height: inherit;
@@ -20,7 +19,7 @@
 @mixin header-cells {
   vertical-align: bottom;
   text-align: left;
-  border-bottom: config.$fat-border-size solid var(--color-border-strong);
+  border-bottom: config.$fat-border-size solid var(--color-border-contrast);
   font-weight: 700;
 }
 
@@ -38,7 +37,7 @@
 }
 
 @mixin rows-first-cell {
-  padding-left: space.get("small");
+  padding-left: 0;
 }
 
 @mixin body-sibling {

package/src/components/Tile/CHANGELOG.md

@@ -2,11 +2,25 @@
 
 ## [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 (including `black`)
+    - New color options using global utility classes
     - Background image and icon support
     - Alignment options with `hAlign` and `vAlign` props
     - Block link and action variants

package/src/components/Tile/Tile.tsx

@@ -5,7 +5,12 @@ import { Image } from "../Image";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
 
-export type TileColor = "default" | "white";
+export const tileColors = [
+  "surface-primary",
+  "surface-subtle",
+  "surface-contrast",
+] as const;
+export type TileColor = (typeof tileColors)[number];
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";
 
@@ -35,7 +40,7 @@ const Tile: React.FC<TileProps> = ({
   backgroundImage,
   vAlign,
   hAlign,
-  color = "default",
+  color,
   space,
   ...other
 }) => {
@@ -43,7 +48,10 @@ const Tile: React.FC<TileProps> = ({
     CLASS_ROOT,
     {
       [`${CLASS_ROOT}--${variant}`]: variant,
-      [`tile--${color}`]: color !== "default",
+      ...(color && color !== "surface-contrast" ? { [color]: true } : {}),
+      ...(color === "surface-contrast"
+        ? { [`${color} text-inverse`]: true }
+        : {}),
     },
     className,
   );

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

@@ -1,17 +1,6 @@
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 
-$colors: (
-  default: (
-    background-color: transparent,
-    color: var(--color-text-default),
-  ),
-  white: (
-    background-color: var(--color-surface-primary),
-    color: var(--color-text-default),
-  ),
-);
-
 $spacing: (
   xs: convert.to-rem(15px),
   md: space.get("large"),

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

@@ -1,5 +1,3 @@
-@use "../../../styles/tools/generate";
-@use "./config";
 @use "./mixins";
 
 @layer components {
@@ -10,8 +8,6 @@
       @include mixins.tile-image-aspect;
     }
 
-    @include generate.variants(config.$colors);
-
     &::after {
       content: "";
       position: absolute;

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

@@ -87,11 +87,18 @@ describe("rendering Tile", () => {
       expect(container.querySelector("img")).toHaveClass("tile__bg");
       expect(container.querySelector("img")).toHaveClass("test-class");
     });
-    it("has class tile--black when color is set to black", () => {
+    it("has surface class when color prop is set", () => {
       const { getByTestId } = render(
-        <Tile data-testid="test-id" color="black" />,
+        <Tile data-testid="test-id" color="surface-secondary" />,
       );
-      expect(getByTestId("test-id")).toHaveClass("tile--black");
+      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(

package/src/styles/base/globals.scss

@@ -4,6 +4,8 @@
 
 // Consider to add more conditions for light and dark themes
 :root,
+:host,
+:host(.is-light),
 .is-light,
 .bg-white,
 #root.is-light,
@@ -16,6 +18,7 @@
   color: var(--color-text-default);
 }
 
+:host(.is-dark),
 .is-dark,
 .bg-black,
 #root.is-dark,
@@ -28,13 +31,15 @@
   color: var(--color-text-default);
 }
 
-:root {
+:root,
+:host {
   --extra-scroll-margin: 0;
   --header-height: 80px;
 }
 
 @media screen and (min-width: 992px) {
-  :root {
+  :root,
+  :host {
     --header-height: 120px;
   }
 }

package/src/styles/typography/mixins.scss

@@ -188,3 +188,21 @@
     }
   }
 }
+
+@mixin description-list() {
+  @include text-readable;
+  @include generate.responsive-css-map(config.$body-text);
+  padding-left: 0;
+
+  dt {
+    font-weight: 700;
+  }
+  dd {
+    margin-left: 0;
+    margin-bottom: convert.to-rem(20px);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/src/styles/typography/style.scss

@@ -16,11 +16,14 @@
 @include readability();
 
 ol,
-ul,
-dl {
+ul {
   @include list-base();
 }
 
+dl {
+  @include description-list();
+}
+
 ul {
   @include ul-list-base();
 }
@@ -56,4 +59,4 @@ ul {
 
 .list--marker-orange {
   @include list-marker-orange();
-}
+}

package/src/styles/utilities/text.scss

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