@orangesk/orange-design-system 2.0.0-beta.19 → 2.0.0-beta.20

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

@@ -106,6 +106,7 @@
     &-header {
       display: flex;
       justify-content: space-between;
+      align-items: flex-start;
 
       > img {
         @include mixins.modal-product-image;

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

@@ -53,28 +53,6 @@ describe("rendering Modal", () => {
       expect(child[0]).toHaveClass("modal__header");
     });
   });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal id="modal-dark" data-testid="modal-dark" colorScheme="dark" />
-        </div>,
-      );
-      expect(getByTestId("modal-dark")).toHaveClass("is-dark");
-    });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <div id="root">
-          <Modal
-            id="modal-light"
-            data-testid="modal-light"
-            colorScheme="light"
-          />
-        </div>,
-      );
-      expect(getByTestId("modal-light")).toHaveClass("is-light");
-    });
-  });
   describe("disableHeaderSpacing prop", () => {
     it("should have modal__header--no-spacing class when disableHeaderSpacing is true", () => {
       const { getByTestId } = render(

package/src/components/Pagination/Pagination.tsx

@@ -19,8 +19,6 @@ interface PaginationItemProps {
 interface PaginationProps {
   /** Collapsed version */
   isCompact?: boolean;
-  /** Dark theme */
-  colorScheme?: "light" | "dark";
   /** All pagination items - buttons & numbers */
   items: PaginationItemProps[];
   /** Accessibility label */
@@ -37,18 +35,10 @@ export const Pagination: React.FC<PaginationProps> = ({
   className,
   label,
   isCompact,
-  colorScheme,
   items,
   ...other
 }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const activeIndex = useMemo(
     () => items.findIndex(({ isActive }) => isActive),

package/src/components/Pill/Pill.tsx

@@ -22,7 +22,6 @@ interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   children?: ReactNode;
   color?: PillColor;
   size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
-  colorScheme?: "light" | "dark";
 }
 
 const Pill: React.FC<PillProps> = ({
@@ -30,15 +29,12 @@ const Pill: React.FC<PillProps> = ({
   children,
   size,
   color,
-  colorScheme,
   ...other
 }) => (
   <span
     className={cx(
       CLASS_ROOT,
       {
-        "is-light": colorScheme === "light",
-        "is-dark": colorScheme === "dark",
         [CLASS_ROOT + "--" + size]: size,
       },
       color,

package/src/components/Pill/tests/Pill.conformance.test.js

@@ -33,10 +33,6 @@ const example = (
       <Pill size="xlarge">XL</Pill>
       <Pill size="xxlarge">XXL</Pill>
     </p>
-    <p>
-      <Pill colorScheme="light">Light</Pill>
-      <Pill colorScheme="dark">Dark</Pill>
-    </p>
   </>
 );
 

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

@@ -140,24 +140,6 @@ describe("rendering Pill", () => {
       });
     });
 
-    it("has is-light class when colorScheme is light", () => {
-      const { getByTestId } = render(
-        <Pill colorScheme="light" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-    });
-
-    it("has is-dark class when colorScheme is dark", () => {
-      const { getByTestId } = render(
-        <Pill colorScheme="dark" data-testid="test-id">
-          pill
-        </Pill>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-    });
-
     it("passes other props", () => {
       const { getByTestId } = render(<Pill data-testid="test">Pill</Pill>);
       expect(getByTestId("test")).toBeInTheDocument();

package/src/components/Progress/Progress.tsx

@@ -12,7 +12,6 @@ export interface ProgressProps {
   width?: number;
   className?: string;
   children?: React.ReactNode;
-  colorMode?: "light" | "dark";
 }
 
 const defaultProps = {
@@ -27,21 +26,10 @@ export const Progress: React.FC<ProgressProps> = ({
   value,
   width,
   className,
-  colorMode,
   ...other
 }) => {
   return (
-    <div
-      className={cx(
-        CLASS_ROOT,
-        {
-          "is-dark": colorMode === "dark",
-          "is-light": colorMode === "light",
-        },
-        className,
-      )}
-      {...other}
-    >
+    <div className={cx(CLASS_ROOT, className)} {...other}>
       <div className={`${CLASS_ROOT}__label`}>{label}</div>
       <div className={`${CLASS_ROOT}__bar`}>
         <div

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

@@ -1,8 +1,8 @@
 @use "sass:map";
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/typography/config' as typography;
-@use './config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/config" as typography;
+@use "./config";
 
 @mixin base {
   @include generate.css-map(config.$layout);
@@ -10,20 +10,22 @@
 
 @mixin bar {
   position: relative;
-  margin-bottom: space.get('xsmall');
+  margin-bottom: space.get("xsmall");
 
   @include generate.css-map(config.$bar);
 }
 
 @mixin label {
-  margin-bottom: space.get('xsmall');
+  margin-bottom: space.get("xsmall");
   font-weight: bold;
 }
 
 @mixin value {
   font-weight: bold;
 
-  @include generate.css-map(typography.$body-text, 'small');
+  @include generate.css-map(
+    map.get(map.get(typography.$body-text, "small"), "default")
+  );
 }
 
 @mixin indicator {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -4,7 +4,6 @@ import { Grid, GridCol } from "../Grid";
 import { Image } from "../Image";
 
 interface PromoBannerProps {
-  colorScheme?: "light" | "dark";
   className?: string;
   image?: string;
   alignImage?: "bottom" | "top";
@@ -20,7 +19,6 @@ interface PromoBannerProps {
 const CLASS_ROOT = "promo-banner";
 export const PromoBanner = ({
   image,
-  colorScheme,
   className,
   alignImage,
   bleedImage,
@@ -30,14 +28,7 @@ export const PromoBanner = ({
   variant,
   imageFullWidth,
 }: PromoBannerProps) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-light": colorScheme === "light",
-      "is-dark": colorScheme === "dark",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
   return (
     <Grid columnGapSize="large" className={classes}>
       {variant === "reverse" && image && (

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

@@ -29,9 +29,6 @@
   text-align: end;
   align-self: center;
 
-  padding-top: space.get("xlarge");
-  padding-bottom: space.get("xlarge");
-
   @include breakpoint.get("md", "down") {
     text-align: center;
     padding-top: 0;

package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js

@@ -71,7 +71,6 @@ describe("PromoBanner Component Conformance Tests", () => {
     it("is valid HTML with all props", () => {
       const { container } = render(
         <PromoBanner
-          colorScheme="dark"
           className="test-class"
           image="https://example.com/test.jpg"
           alignImage="top"
@@ -204,7 +203,6 @@ describe("PromoBanner Component Conformance Tests", () => {
     it("is accessible with all props", async () => {
       const { container } = render(
         <PromoBanner
-          colorScheme="dark"
           image="https://example.com/test.jpg"
           alignImage="top"
           bleedImage
@@ -341,22 +339,6 @@ describe("PromoBanner Component Conformance Tests", () => {
       expect(item).toHaveClass("promo-banner__item");
     });
 
-    it("applies color scheme classes correctly", () => {
-      const { container: lightContainer } = render(
-        <PromoBanner colorScheme="light">Light Content</PromoBanner>,
-      );
-      const { container: darkContainer } = render(
-        <PromoBanner colorScheme="dark">Dark Content</PromoBanner>,
-      );
-
-      expect(lightContainer.querySelector(".promo-banner")).toHaveClass(
-        "is-light",
-      );
-      expect(darkContainer.querySelector(".promo-banner")).toHaveClass(
-        "is-dark",
-      );
-    });
-
     it("applies variant classes correctly", () => {
       const { container: horizontalContainer } = render(
         <PromoBanner>Horizontal Content</PromoBanner>,
@@ -587,18 +569,6 @@ describe("PromoBanner Component Conformance Tests", () => {
       expect(banner).toBeInTheDocument();
     });
 
-    it("handles invalid colorScheme prop gracefully", () => {
-      const { container } = render(
-        <PromoBanner colorScheme="invalid-scheme" data-testid="test-banner">
-          Content
-        </PromoBanner>,
-      );
-      const banner = container.querySelector(".promo-banner");
-      expect(banner).toHaveClass("promo-banner");
-      expect(banner).not.toHaveClass("is-light");
-      expect(banner).not.toHaveClass("is-dark");
-    });
-
     it("handles invalid alignImage prop gracefully", () => {
       const { container } = render(
         <PromoBanner image="test.jpg" alignImage="invalid">

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

@@ -99,27 +99,6 @@ describe("PromoBanner", () => {
         });
       });
 
-      describe("colorScheme", () => {
-        it("applies light color scheme", () => {
-          render(<PromoBanner colorScheme="light" />);
-          const banner = document.querySelector(".promo-banner");
-          expect(banner).toHaveClass("is-light");
-        });
-
-        it("applies dark color scheme", () => {
-          render(<PromoBanner colorScheme="dark" />);
-          const banner = document.querySelector(".promo-banner");
-          expect(banner).toHaveClass("is-dark");
-        });
-
-        it("does not apply color scheme class when not specified", () => {
-          render(<PromoBanner />);
-          const banner = document.querySelector(".promo-banner");
-          expect(banner).not.toHaveClass("is-light");
-          expect(banner).not.toHaveClass("is-dark");
-        });
-      });
-
       describe("itemClassName", () => {
         it("applies custom itemClassName to content column", () => {
           render(
@@ -448,7 +427,6 @@ describe("PromoBanner", () => {
         render(
           <PromoBanner
             variant="vertical"
-            colorScheme="dark"
             className="custom-banner"
             itemClassName="custom-item"
             image="test.jpg"
@@ -462,7 +440,7 @@ describe("PromoBanner", () => {
         const item = document.querySelector(".promo-banner__item");
         const imageContainer = document.querySelector(".promo-banner__image");
 
-        expect(banner).toHaveClass("promo-banner", "is-dark", "custom-banner");
+        expect(banner).toHaveClass("promo-banner", "custom-banner");
         expect(item).toHaveClass(
           "promo-banner__item",
           "align-items-center",
@@ -521,16 +499,6 @@ describe("PromoBanner", () => {
         expect(screen.queryByRole("img")).not.toBeInTheDocument();
       });
 
-      it("handles invalid colorScheme gracefully", () => {
-        const { container } = render(
-          <PromoBanner colorScheme="invalid">Content</PromoBanner>,
-        );
-        const banner = container.querySelector(".promo-banner");
-        expect(banner).toHaveClass("promo-banner");
-        expect(banner).not.toHaveClass("is-light");
-        expect(banner).not.toHaveClass("is-dark");
-      });
-
       it("handles invalid alignImage gracefully", () => {
         render(
           <PromoBanner image="test.jpg" alignImage="invalid">

package/src/components/PromotionCard/PromotionCard.tsx

@@ -1,27 +1,25 @@
 import React from "react";
 import cx from "classnames";
 
-import { Card } from "../Card";
+import { Card, CardColor } from "../Card";
 
 import { CLASS_ROOT } from "./constants";
 
 export interface PromotionCardProps {
-  /** Inverse colors */
-  colorScheme?: "light" | "dark";
   className?: string;
   children?: React.ReactNode;
+  color?: CardColor;
   [key: string]: any;
 }
 
 export const PromotionCard: React.FC<PromotionCardProps> = ({
-  colorScheme = "light",
   className,
   children,
+  color = "background-primary",
   ...other
 }) => {
   const classes = cx(CLASS_ROOT, className);
-  const color =
-    colorScheme === "dark" ? "background-contrast" : "background-primary";
+
   return (
     <Card className={classes} color={color} {...other}>
       {children}

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

@@ -82,6 +82,7 @@
   font-size: convert.to-rem(24px);
   line-height: convert.to-rem(math.round(24px * 1.1));
   max-width: convert.to-rem(580px);
+  font-weight: 700;
 
   @include breakpoint.get("md") {
     display: inline-block;

package/src/components/PromotionCard/tests/PromotionCard.conformance.test.js

@@ -63,7 +63,7 @@ describe("PromotionCard Component Conformance Tests", () => {
     it("is valid HTML with all props", () => {
       const { container } = render(
         <PromotionCard
-          colorScheme="dark"
+          color="background-contrast"
           className="test-class"
           data-testid="test-promotion-card"
         >
@@ -110,7 +110,7 @@ describe("PromotionCard Component Conformance Tests", () => {
 
     it("is accessible with light color scheme", async () => {
       const { container } = render(
-        <PromotionCard colorScheme="light">
+        <PromotionCard color="background-primary">
           <h1>Light Theme Promotion</h1>
           <p>This is a light themed promotion card.</p>
         </PromotionCard>,
@@ -120,7 +120,7 @@ describe("PromotionCard Component Conformance Tests", () => {
 
     it("is accessible with dark color scheme", async () => {
       const { container } = render(
-        <PromotionCard colorScheme="dark">
+        <PromotionCard color="background-contrast">
           <h1>Dark Theme Promotion</h1>
           <p>This is a dark themed promotion card with proper contrast.</p>
         </PromotionCard>,
@@ -130,7 +130,7 @@ describe("PromotionCard Component Conformance Tests", () => {
 
     it("is accessible with complex content", async () => {
       const { container } = render(
-        <PromotionCard colorScheme="light">
+        <PromotionCard color="background-primary">
           <header>
             <h1>Promotion Title</h1>
             <nav aria-label="Promotion navigation">
@@ -220,13 +220,10 @@ describe("PromotionCard Component Conformance Tests", () => {
     });
 
     it("applies color scheme classes correctly", () => {
-      const colorSchemes = ["light", "dark"];
-      colorSchemes.forEach((colorScheme) => {
+      const colors = ["background-primary", "background-contrast"];
+      colors.forEach((color) => {
         const { container } = render(
-          <PromotionCard
-            colorScheme={colorScheme}
-            data-testid="test-promotion-card"
-          />,
+          <PromotionCard color={color} data-testid="test-promotion-card" />,
         );
         const card = container.querySelector(
           '[data-testid="test-promotion-card"]',
@@ -234,7 +231,7 @@ describe("PromotionCard Component Conformance Tests", () => {
 
         expect(card).toHaveClass("promotion-card");
 
-        if (colorScheme === "light") {
+        if (color === "background-primary") {
           expect(card).not.toHaveClass("background-primary");
           expect(card).not.toHaveClass("background-contrast");
           expect(card).not.toHaveClass("text-inverse");
@@ -247,7 +244,10 @@ describe("PromotionCard Component Conformance Tests", () => {
 
     it("applies dark color scheme with text-inverse correctly", () => {
       const { container } = render(
-        <PromotionCard colorScheme="dark" data-testid="test-promotion-card" />,
+        <PromotionCard
+          color="background-contrast"
+          data-testid="test-promotion-card"
+        />,
       );
       const card = container.querySelector(
         '[data-testid="test-promotion-card"]',
@@ -260,7 +260,7 @@ describe("PromotionCard Component Conformance Tests", () => {
     it("combines multiple props correctly", () => {
       const { container } = render(
         <PromotionCard
-          colorScheme="dark"
+          color="background-contrast"
           className="custom-class"
           data-testid="test-promotion-card"
         />,
@@ -436,10 +436,10 @@ describe("PromotionCard Component Conformance Tests", () => {
       expect(screen.getByText(/Promo 3/)).toBeInTheDocument();
     });
 
-    it("handles invalid colorScheme prop gracefully", () => {
+    it("handles invalid color prop gracefully", () => {
       const { container } = render(
         <PromotionCard
-          colorScheme="invalid-scheme"
+          color="invalid-color"
           data-testid="test-promotion-card"
         />,
       );
@@ -447,9 +447,8 @@ describe("PromotionCard Component Conformance Tests", () => {
         '[data-testid="test-promotion-card"]',
       );
       expect(card).toHaveClass("promotion-card");
-      // Should fallback to light behavior
-      expect(card).not.toHaveClass("background-primary");
-      expect(card).not.toHaveClass("background-contrast");
+      // Should render with custom color if provided
+      expect(card).toHaveClass("invalid-color");
     });
   });
 
@@ -522,7 +521,7 @@ describe("PromotionCard Component Conformance Tests", () => {
       const handleSubmit = jest.fn((e) => e.preventDefault());
 
       render(
-        <PromotionCard colorScheme="dark">
+        <PromotionCard color="background-contrast">
           <form onSubmit={handleSubmit}>
             <h2>Special Promotion</h2>
             <label htmlFor="email">Email</label>

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

@@ -90,7 +90,6 @@ describe("PromotionCard Component Unit Tests", () => {
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"
-          colorScheme="dark"
           className="custom-class"
         />,
       );
@@ -151,69 +150,6 @@ describe("PromotionCard Component Unit Tests", () => {
     });
   });
 
-  describe("Color Scheme Prop Behavior", () => {
-    it("applies background-primary color for light colorScheme (default)", () => {
-      const { getByTestId } = render(
-        <PromotionCard data-testid="test-promotion-card" colorScheme="light" />,
-      );
-      const card = getByTestId("test-promotion-card");
-
-      expect(card).toHaveClass("promotion-card");
-      // background-primary is the default and should not add a color class
-      expect(card).not.toHaveClass("background-primary");
-      expect(card).not.toHaveClass("background-contrast");
-      expect(card).not.toHaveClass("text-inverse");
-    });
-
-    it("applies background-contrast color and text-inverse for dark colorScheme", () => {
-      const { getByTestId } = render(
-        <PromotionCard data-testid="test-promotion-card" colorScheme="dark" />,
-      );
-      const card = getByTestId("test-promotion-card");
-
-      expect(card).toHaveClass("promotion-card");
-      expect(card).toHaveClass("background-contrast");
-      expect(card).toHaveClass("text-inverse");
-    });
-
-    it("uses light colorScheme by default when no colorScheme is provided", () => {
-      const { getByTestId } = render(
-        <PromotionCard data-testid="test-promotion-card" />,
-      );
-      const card = getByTestId("test-promotion-card");
-
-      expect(card).toHaveClass("promotion-card");
-      expect(card).not.toHaveClass("background-primary");
-      expect(card).not.toHaveClass("background-contrast");
-      expect(card).not.toHaveClass("text-inverse");
-    });
-
-    it("handles all colorScheme variants correctly", () => {
-      const colorSchemes = ["light", "dark"];
-
-      colorSchemes.forEach((colorScheme, index) => {
-        const { getByTestId } = render(
-          <PromotionCard
-            data-testid={`test-promotion-card-${index}`}
-            colorScheme={colorScheme}
-          />,
-        );
-        const card = getByTestId(`test-promotion-card-${index}`);
-
-        expect(card).toHaveClass("promotion-card");
-
-        if (colorScheme === "light") {
-          expect(card).not.toHaveClass("background-primary");
-          expect(card).not.toHaveClass("background-contrast");
-          expect(card).not.toHaveClass("text-inverse");
-        } else {
-          expect(card).toHaveClass("background-contrast");
-          expect(card).toHaveClass("text-inverse");
-        }
-      });
-    });
-  });
-
   describe("Content Rendering", () => {
     it("renders text children correctly through Card", () => {
       render(
@@ -318,11 +254,11 @@ describe("PromotionCard Component Unit Tests", () => {
   });
 
   describe("Props Combinations", () => {
-    it("combines colorScheme and className correctly", () => {
+    it("combines color and className correctly", () => {
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"
-          colorScheme="dark"
+          color="background-contrast"
           className="custom-class"
         />,
       );
@@ -338,7 +274,7 @@ describe("PromotionCard Component Unit Tests", () => {
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"
-          colorScheme="light"
+          color="background-primary"
           className="custom-class"
           id="promotion-id"
         >
@@ -417,19 +353,18 @@ describe("PromotionCard Component Unit Tests", () => {
   });
 
   describe("Edge Cases & Error Handling", () => {
-    it("handles invalid colorScheme prop gracefully", () => {
+    it("handles invalid color prop gracefully", () => {
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"
-          colorScheme="invalid-scheme"
+          color="invalid-color"
         />,
       );
       const card = getByTestId("test-promotion-card");
 
       expect(card).toHaveClass("promotion-card");
-      // Should fallback to light behavior (background-primary)
-      expect(card).not.toHaveClass("background-primary");
-      expect(card).not.toHaveClass("background-contrast");
+      // Should still render with the color class provided
+      expect(card).toHaveClass("invalid-color");
     });
 
     it("handles boolean children", () => {
@@ -465,7 +400,10 @@ describe("PromotionCard Component Unit Tests", () => {
   describe("Card Integration", () => {
     it("properly integrates with Card component", () => {
       const { getByTestId } = render(
-        <PromotionCard data-testid="test-promotion-card" colorScheme="dark">
+        <PromotionCard
+          data-testid="test-promotion-card"
+          color="background-contrast"
+        >
           <div>Card content</div>
         </PromotionCard>,
       );
@@ -484,7 +422,7 @@ describe("PromotionCard Component Unit Tests", () => {
       const { getByTestId } = render(
         <PromotionCard
           data-testid="test-promotion-card"
-          colorScheme="light"
+          color="background-primary"
           noBorder={true}
         >
           <div>Card content</div>