@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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/mixins.scss

@@ -9,6 +9,7 @@
   overflow: hidden;
   width: 100%;
   border-radius: convert.to-rem(10px);
+  word-break: break-word;
 }
 
 @mixin tile-image-aspect {

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;
@@ -19,7 +15,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border: 1px solid var(--color-border-subtle);
+      border: 1px solid var(--color-border-strong);
       border-radius: inherit;
       pointer-events: none;
     }

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/components/Tooltip/InfoTooltip.tsx

@@ -26,11 +26,7 @@ const InfoTooltip: React.FC<InfoTooltipProps> = ({
     )}
     {...other}
   >
-    <Icon
-      name="assistance"
-      color="info"
-      className={cx(`${CLASS_ROOT}__icon`, className)}
-    />
+    <Icon name="assistance" className={cx(`${CLASS_ROOT}__icon`, className)} />
     <span className="sr-only">Info</span>
   </Tooltip>
 );

package/src/components/Tooltip/Tooltip.tsx

@@ -42,7 +42,6 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLElement> {
   /** Additional CSS classes */
   className?: string;
   children?: React.ReactNode;
-  colorScheme?: "dark" | "light"; // Optional color scheme prop
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
@@ -53,18 +52,10 @@ const Tooltip: React.FC<TooltipProps> = ({
   className,
   renderTrigger,
   children,
-  colorScheme,
   ...other
 }) => {
   const currentId = useHydrationSafeId(id);
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
   const Tag = tag;
 
   const [dialogRef] = useStatic(TooltipStatic as any, {

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

@@ -34,7 +34,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "no-inline-style": "off", "attribute-boolean-style": "off" },
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

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

@@ -294,33 +294,4 @@ describe("rendering Tooltip", () => {
       expect(getByTestId("test-id").hidden).toBe(true);
     });
   });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="dark" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="light" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-    });
-    it("should not have is-dark or is-light class by default", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
-    });
-  });
 });

package/src/components/index.ts

@@ -1,6 +1,6 @@
-import "../styles/before-components.scss";
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
+import { AnchorNavigation } from "./AnchorNavigation";
 import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
@@ -20,6 +20,7 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Carousel } from "./Carousel";
+import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
@@ -33,7 +34,6 @@ import {
 } from "./Dropdown";
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
-import { Footer } from "./Footer";
 import { Card, CardSection, CardProductHeader } from "./Card";
 import { Icon, Pictogram } from "./Icon";
 import { Gauge } from "./Gauge";
@@ -47,6 +47,7 @@ import {
   ModalCloseButton,
   ModalTitle,
   ModalProductHeader,
+  ModalProductFooter,
 } from "./Modal";
 import { Section } from "./Section";
 import { Sticker } from "./Sticker";
@@ -86,16 +87,17 @@ import { Tab, TabPanel, Tabs } from "./Tabs";
 import { Table } from "./Table";
 import { Tile } from "./Tile";
 import { Tooltip, InfoTooltip } from "./Tooltip";
-import "../styles/after-components.scss";
 import { Cover } from "./Cover";
 import { Testimonial } from "./Testimonial";
 import { Hero } from "./Hero";
 import { IconList, Item } from "./IconList";
+import { SocialButton } from "./SocialButton";
 
 export {
   Accordion,
   AccordionItem,
   Alert,
+  AnchorNavigation,
   Autocomplete,
   Bar,
   BarBreak,
@@ -115,6 +117,8 @@ export {
   CardProductHeader,
   CardSection,
   Carousel,
+  CarouselHero,
+  CarouselHeroItem,
   CarouselPromotions,
   CartTable,
   Checkbox,
@@ -132,7 +136,6 @@ export {
   Field,
   Fieldset,
   File,
-  Footer,
   Gauge,
   Grid,
   GridCol,
@@ -155,6 +158,7 @@ export {
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductFooter,
   ModalProductHeader,
   ModalTitle,
   Pagination,
@@ -173,6 +177,7 @@ export {
   Select,
   Skeleton,
   SkipLink,
+  SocialButton,
   Stepbar,
   Sticker,
   Tab,

package/src/styles/base/globals-forms.scss

@@ -1,3 +1,5 @@
+@use "../tokens/color";
+
 button,
 input,
 optgroup,
@@ -13,3 +15,9 @@ fieldset {
   padding: 0;
   border: 0;
 }
+
+::placeholder {
+  color: color.$gray-700;
+  font-weight: normal;
+  opacity: 1;
+}

package/src/styles/base/globals.scss

@@ -1,35 +1,30 @@
 @use "../tokens/base";
 @use "../tokens/space";
-@use "../tokens/color";
+@use "../tokens/color-vars";
 
-// Consider to add more conditions for light and dark themes
 :root,
-.is-light,
-.bg-white,
-#root.is-light,
-#root-modals.is-light,
-#root-tooltips.is-light,
-#root-dropdowns.is-light {
-  @each $name, $value in color.$colors-light {
-    --color-#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
+:host {
+  --extra-scroll-margin: 0;
+  --header-height: 80px;
 }
 
-.is-dark,
-.bg-black,
-#root.is-dark,
-#root-modals.is-dark,
-#root-tooltips.is-dark,
-#root-dropdowns.is-dark {
-  @each $name, $value in color.$colors-dark {
-    --color-#{$name}: #{$value};
+@media screen and (min-width: 992px) {
+  :root,
+  :host {
+    --header-height: 120px;
   }
-  color: var(--color-text-default);
+}
+
+:target {
+  scroll-margin-top: calc(
+    var(--header-height) + var(--extra-scroll-margin) - 1px
+  );
 }
 
 html {
   font-size: base.$font-size;
+  scroll-padding-top: unset;
+  overflow-x: hidden;
 }
 
 html,
@@ -138,7 +133,7 @@ table {
 }
 
 blockquote {
-  margin: 0 0 space.get("medium") 0;
+  margin: 0 0 space.get("large") 0;
 }
 
 th {
@@ -154,3 +149,12 @@ button[aria-expanded="true"] .expand-icon {
 [hidden] {
   display: none !important;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}

package/src/styles/base/styleguide.scss

@@ -1,11 +1,11 @@
-@use '../tokens/color';
-@use '../tokens/space';
-@use '../tools/convert';
-@use '../tools/text';
-@use '../tools/generate';
-@use '../tools/layout';
-@use '../typography/config' as typographyConfig;
-@use 'sass:map' as sassmap;
+@use "../tokens/color";
+@use "../tokens/space";
+@use "../tools/convert";
+@use "../tools/text";
+@use "../tools/generate";
+@use "../tools/layout";
+@use "../typography/config" as typographyConfig;
+@use "sass:map" as sassmap;
 
 main {
   min-height: 100vh;
@@ -13,9 +13,9 @@ main {
 }
 
 .l-debug {
-  padding: space.get('small');
-  background-color: color.$gray-300;
-  border: 1px solid color.$gray-400;
+  padding: space.get("small");
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-strong);
 
   @include layout.reset-last-child-margin-bottom;
 }
@@ -29,7 +29,8 @@ main {
 }
 
 .code-wrapper {
-  border: 1px solid color.$gray-400;
+  border: 1px solid var(--color-border-strong);
+  margin-bottom: 30px;
 
   pre {
     margin-bottom: 0 !important;
@@ -57,17 +58,17 @@ main {
     width: convert.to-rem(220px);
     min-height: convert.to-rem(40px);
     margin-bottom: space.get();
-    margin-right: space.get('xsmall');
+    margin-right: space.get("xsmall");
     overflow-wrap: anywhere;
 
     .icon {
       cursor: pointer;
       flex-shrink: 0;
-      margin-right: space.get('small');
+      margin-right: space.get("small");
     }
 
     .icon:hover {
-      color: color.$orange;
+      color: var(--color-text-accent);
     }
   }
 }
@@ -122,7 +123,9 @@ main > div {
   }
 
   > h4 {
-    @include generate.css-map(typographyConfig.$body-text, 'large');
+    @include generate.responsive-css-map(
+      sassmap.get(typographyConfig.$body-text, "large")
+    );
   }
 }
 
@@ -130,5 +133,7 @@ main > div {
 main > div > h1 + p,
 main > div > h1 + p + p,
 main > div > h1 + p + p + p {
-  @include generate.css-map(typographyConfig.$body-text, 'large');
+  @include generate.responsive-css-map(
+    sassmap.get(typographyConfig.$body-text, "large")
+  );
 }

package/src/styles/export/base.js

@@ -8,7 +8,7 @@ export const exports = {
   "background": "var(--color-background-primary)",
   "text-color": "var(--color-text-default)",
   "focus-outline": "2px solid var(--color-border-contrast)",
-  "selection-background": "rgba(241, 110, 0, 0.9)"
+  "selection-background": "rgba(241, 94, 0, 0.9)"
 };
 
 export default exports;

package/src/styles/export/color.js

@@ -2,26 +2,108 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "orange": "#f16e00",
-  "orange-dark": "#f16e00",
-  "black": "#000000",
-  "white": "#ffffff",
-  "blue": "#4bb4e6",
-  "green": "#50be87",
-  "pink": "#ffb4e6",
-  "violet": "#a885d8",
-  "yellow": "#ffd200",
-  "gray-300": "#eeeeee",
-  "gray-400": "#ddd",
-  "gray-500": "#dddddd",
-  "gray-600": "#999",
-  "gray-700": "#666",
-  "gray-800": "#595959",
-  "gray-900": "#333",
-  "success": "rgba(34, 135, 34, 0.0784313725)",
-  "danger": "rgba(205, 60, 20, 0.0784313725)",
-  "info": "rgba(65, 112, 216, 0.0784313725)",
-  "warning": "rgba(255, 204, 0, 0.0784313725)"
+  "light-background-primary": "#ffffff",
+  "light-background-secondary": "#f4f4f4",
+  "light-background-contrast": "#141414",
+  "light-background-accent": "#fff6ed",
+  "light-background-accent1-blog": "#fff6cc",
+  "light-background-accent2-blog": "#eee7f7",
+  "light-surface-primary": "#ffffff",
+  "light-surface-secondary": "#ff7900",
+  "light-surface-tertiary": "#f15e00",
+  "light-surface-subtle": "#eeeeee",
+  "light-surface-moderate": "#dddddd",
+  "light-surface-contrast": "#141414",
+  "light-surface-accent": "#fff6ed",
+  "light-fill-primary": "#ffffff",
+  "light-fill-secondary": "#ff7900",
+  "light-fill-tertiary": "#f15e00",
+  "light-fill-subtle": "#eeeeee",
+  "light-fill-moderate": "#dddddd",
+  "light-fill-disabled": "#cccccc",
+  "light-fill-contrast": "#000000",
+  "light-fill-accent1": "#4bb4e6",
+  "light-fill-accent2": "#50be87",
+  "light-fill-accent3": "#ffb4e6",
+  "light-fill-accent4": "#a885d8",
+  "light-fill-accent5": "#ffd200",
+  "light-fill-information": "rgba(65, 112, 216, 0.0784313725)",
+  "light-fill-positive": "rgba(34, 135, 34, 0.0784313725)",
+  "light-fill-warning": "rgba(255, 204, 0, 0.0784313725)",
+  "light-fill-negative": "rgba(205, 60, 20, 0.0784313725)",
+  "light-border-subtle": "#dddddd",
+  "light-border-strong": "#cccccc",
+  "light-border-contrast": "#000000",
+  "light-border-accent": "#f15e00",
+  "light-border-information": "#4170d8",
+  "light-border-positive": "#228722",
+  "light-border-warning": "#ffcc00",
+  "light-border-negative": "#cd3c14",
+  "light-icon-default": "#000000",
+  "light-icon-inverse": "#ffffff",
+  "light-icon-brand": "#f15e00",
+  "light-icon-accent": "#ffc48f",
+  "light-icon-disabled": "#cccccc",
+  "light-icon-information": "#4170d8",
+  "light-icon-positive": "#228722",
+  "light-icon-warning": "#ffcc00",
+  "light-icon-negative": "#cd3c14",
+  "light-text-default": "#000000",
+  "light-text-secondary": "#666666",
+  "light-text-disabled": "#cccccc",
+  "light-text-inverse": "#ffffff",
+  "light-text-accent": "#f15e00",
+  "dark-background-primary": "#141414",
+  "dark-background-secondary": "#333333",
+  "dark-background-contrast": "#ffffff",
+  "dark-background-accent": "#2b1a10",
+  "dark-background-accent1-blog": "#62342d",
+  "dark-background-accent2-blog": "#2b1a10",
+  "dark-surface-primary": "#141414",
+  "dark-surface-secondary": "#ff7900",
+  "dark-surface-tertiary": "#f15e00",
+  "dark-surface-subtle": "#333333",
+  "dark-surface-moderate": "#595959",
+  "dark-surface-contrast": "#ffffff",
+  "dark-surface-accent": "#2b1a10",
+  "dark-fill-primary": "#000000",
+  "dark-fill-secondary": "#ff7900",
+  "dark-fill-tertiary": "#f15e00",
+  "dark-fill-subtle": "#333333",
+  "dark-fill-moderate": "#595959",
+  "dark-fill-disabled": "#666666",
+  "dark-fill-contrast": "#ffffff",
+  "dark-fill-accent1": "#4bb4e6",
+  "dark-fill-accent2": "#50be87",
+  "dark-fill-accent3": "#ffb4e6",
+  "dark-fill-accent4": "#a885d8",
+  "dark-fill-accent5": "#ffd200",
+  "dark-fill-information": "rgba(65, 112, 216, 0.2)",
+  "dark-fill-positive": "rgba(34, 135, 34, 0.2)",
+  "dark-fill-warning": "rgba(255, 204, 0, 0.2)",
+  "dark-fill-negative": "rgba(205, 60, 20, 0.2)",
+  "dark-border-subtle": "#333333",
+  "dark-border-strong": "#666666",
+  "dark-border-contrast": "#ffffff",
+  "dark-border-accent": "#ff7900",
+  "dark-border-information": "#6699ff",
+  "dark-border-positive": "#66cc66",
+  "dark-border-warning": "#ffcc00",
+  "dark-border-negative": "#ff4d4d",
+  "dark-icon-default": "#ffffff",
+  "dark-icon-inverse": "#000000",
+  "dark-icon-brand": "#ff7900",
+  "dark-icon-accent": "#da8436",
+  "dark-icon-disabled": "#666666",
+  "dark-icon-information": "#6699ff",
+  "dark-icon-positive": "#66cc66",
+  "dark-icon-warning": "#ffcc00",
+  "dark-icon-negative": "#ff4d4d",
+  "dark-text-default": "#ffffff",
+  "dark-text-secondary": "#cccccc",
+  "dark-text-disabled": "#666666",
+  "dark-text-inverse": "#000000",
+  "dark-text-accent": "#ff7900"
 };
 
 export default exports;

package/src/styles/export/color.scss

@@ -1,24 +1,14 @@
+@use "sass:map";
 @use "../tokens/color" as color;
 
 :export {
-  orange: color.$orange;
-  orange-dark: color.$orange-dark;
-  black: color.$black;
-  white: color.$white;
-  blue: color.$blue;
-  green: color.$green;
-  pink: color.$pink;
-  violet: color.$violet;
-  yellow: color.$yellow;
-  gray-300: color.$gray-300;
-  gray-400: color.$gray-400;
-  gray-500: color.$gray-500;
-  gray-600: color.$gray-600;
-  gray-700: color.$gray-700;
-  gray-800: color.$gray-800;
-  gray-900: color.$gray-900;
-  success: color.$success;
-  danger: color.$danger;
-  info: color.$info;
-  warning: color.$warning;
+  // Export semantic color tokens from light theme
+  @each $name, $value in color.$colors-light {
+    light-#{$name}: #{$value};
+  }
+
+  // Export semantic color tokens from dark theme
+  @each $name, $value in color.$colors-dark {
+    dark-#{$name}: #{$value};
+  }
 }

package/src/styles/shame.scss

@@ -4,6 +4,7 @@
 * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
 **/
   .osk-footer-menu,
+  .mm-header ul,
   .megamenu-header ul {
     max-width: none;
     margin-top: 0;