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

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

@@ -28,6 +28,21 @@
           display: block;
         }
       }
+
+      // In light theme, explicitly show light and hide dark
+      .is-light & {
+        &--light {
+          display: block;
+        }
+
+        &--dark {
+          display: none;
+        }
+      }
+    }
+
+    &--with-text-end {
+      margin-inline-end: convert.to-rem(5px);
     }
   }
 

package/src/components/Icon/tests/Pictogram.unit.test.js

@@ -117,4 +117,42 @@ describe("Pictogram component", () => {
       expect(getByTestId("test-pictogram")).toHaveClass("custom-class");
     });
   });
+
+  describe("theme switching", () => {
+    it("shows light version by default", () => {
+      const { container } = render(<Pictogram name="pictogram-skylink" />);
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+      // Note: CSS display logic is tested via CSS rules, not inline styles
+    });
+
+    it("renders correctly within is-light context", () => {
+      const { container } = render(
+        <div className="is-light">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+
+    it("renders correctly within is-dark context", () => {
+      const { container } = render(
+        <div className="is-dark">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+  });
 });

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

@@ -1,13 +1,13 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 @use "../../../styles/typography/mixins" as typoMixins;
-@use './config';
+@use "./config";
 
 @mixin base() {
   @include typoMixins.list-unstyled;
   @include typoMixins.text-readable;
 
-  margin: 0 0 space.get() 0;
+  margin: 0 0 space.get("large") 0;
   padding: 0;
   font-weight: bold;
 }
@@ -15,7 +15,7 @@
 @mixin item($spacing: config.$spacing) {
   display: flex;
   flex-flow: row;
-  margin-bottom: space.get('small');
+  margin-bottom: space.get("small");
 }
 
 @mixin icon($spacing: config.$spacing) {

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

@@ -1,4 +1,4 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 @mixin base() {
   display: inline-block;
@@ -8,5 +8,5 @@
 }
 
 @mixin spacing() {
-  margin-bottom: space.get('medium');
+  margin-bottom: space.get("large");
 }

package/src/components/Link/Link.tsx

@@ -12,20 +12,20 @@ export interface LinkProps {
   className?: string;
   /** link content */
   children?: React.ReactNode;
-  /** color scheme for link: dark (white text) or light (black text) */
-  colorScheme?: "dark" | "light";
   /** whether the link should be underlined */
   isUnderline?: boolean;
   /** whether the link should have normal font weight */
   isNormal?: boolean;
+  /** when true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
+  noAccent?: boolean;
 }
 
 export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   className,
   children,
-  colorScheme,
   isUnderline,
   isNormal,
+  noAccent,
   tag = "a",
   href,
   ...other
@@ -33,10 +33,9 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
   const classes = cx(
     CLASS_ROOT,
     {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
       underline: isUnderline,
       normal: isNormal,
+      "no-accent": noAccent,
     },
     className,
   );

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

@@ -4,9 +4,9 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
-  color: var(--color-text-default);
+  text-underline-offset: 0.1em;
+  color: inherit;
   background: none;
-  text-decoration: none;
   cursor: pointer;
 }
 
@@ -14,7 +14,13 @@
   p &,
   li &,
   dt &,
-  dd & {
+  dd &,
+  h1 &,
+  h2 &,
+  h3 &,
+  h4 &,
+  h5 &,
+  h6 & {
     font-weight: inherit;
   }
 }

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

@@ -4,6 +4,7 @@
   a:not(
     .link,
     .btn,
+    .mm-link,
     .megamenu-link,
     .list__control,
     .tab-list__tab,
@@ -15,14 +16,15 @@
     .osk-footer a,
     .mm-header a,
     .megamenu-header a,
-    .tag
+    .tag,
+    small a
   ),
   .link {
     @include mixins.base();
     @include mixins.base-inherit();
 
     &:hover {
-      color: var(--color-fill-tertiary);
+      color: var(--color-text-accent);
       text-decoration: underline;
     }
     &:focus {

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

@@ -50,15 +50,9 @@ describe("Link Conformance Tests", () => {
       );
       expect(container).toHTMLValidate();
     });
-    it("is valid HTML with colorScheme variants and underline", () => {
+    it("is valid HTML with underline", () => {
       const { container } = render(
         <>
-          <Link href="#" colorScheme="dark">
-            Dark link
-          </Link>
-          <Link href="#" colorScheme="light">
-            Light link
-          </Link>
           <Link href="#" isUnderline>
             Underlined link
           </Link>
@@ -125,21 +119,6 @@ describe("Link Conformance Tests", () => {
       expect(results).toHaveNoViolations();
     });
 
-    it("has no accessibility violations for inverse links", async () => {
-      const { container } = render(
-        <div>
-          <Link href="#" isInverse>
-            Inverse link
-          </Link>
-          <Link href="#" color="orange" isInverse>
-            Orange inverse link
-          </Link>
-        </div>,
-      );
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
     it("has no accessibility violations for links with custom attributes", async () => {
       const { container } = render(
         <div>
@@ -212,11 +191,11 @@ describe("Link Conformance Tests", () => {
   describe("Cross-browser Compatibility", () => {
     it("renders consistently across different prop combinations", () => {
       const testCases = [
-        { href: "/", color: "default", isInverse: false },
-        { href: "/", color: "orange", isInverse: true },
-        { href: "/", color: "black", isInverse: false },
-        { tag: "button", type: "button", color: "default", isInverse: false },
-        { tag: "button", type: "button", color: "orange", isInverse: true },
+        { href: "/", color: "default" },
+        { href: "/", color: "orange" },
+        { href: "/", color: "black" },
+        { tag: "button", type: "button", color: "default" },
+        { tag: "button", type: "button", color: "orange" },
       ];
 
       testCases.forEach((props, index) => {

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

@@ -8,9 +8,6 @@ Unit tests for the Link component:
 - Color Variants:
   - Applies correct class for each color variant (default, orange, black).
   - Combines color with inverse class when both are set.
-- Inverse Styling:
-  - Applies inverse class when isInverse is true.
-  - Does not apply inverse class when isInverse is false.
 - Props Forwarding:
   - Forwards additional HTML attributes (target, rel, aria-label, etc.).
   - Forwards event handlers (onClick, onMouseEnter, etc.).
@@ -103,26 +100,6 @@ describe("Link Component", () => {
   });
 
   describe("Color Scheme", () => {
-    it("applies is-dark class for colorScheme dark", () => {
-      render(
-        <Link href="/" colorScheme="dark" data-testid="link">
-          Dark link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-dark");
-    });
-
-    it("applies is-light class for colorScheme light", () => {
-      render(
-        <Link href="/" colorScheme="light" data-testid="link">
-          Light link
-        </Link>,
-      );
-      const link = screen.getByTestId("link");
-      expect(link).toHaveClass("is-light");
-    });
-
     it("applies underline class when isUnderline is true", () => {
       render(
         <Link href="/" isUnderline data-testid="link">
@@ -222,13 +199,7 @@ describe("Link Component", () => {
 
     it("handles null and undefined props gracefully", () => {
       render(
-        <Link
-          href="/"
-          data-testid="link"
-          color={null}
-          isInverse={undefined}
-          className={null}
-        >
+        <Link href="/" data-testid="link" color={null} className={null}>
           Test
         </Link>,
       );

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

@@ -1,38 +1,38 @@
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
 
 $spacing: (
-  'default': space.get(),
-  'small': space.get('small'),
+  "default": space.get(),
+  "small": space.get("small"),
 );
 
 $enclosed-spacing: space.get();
 
-$border: 2px solid;
+$border: 1px solid;
 
 $color-palette: (
   default: (
     background-color: var(--color-background-primary),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 
   gray: (
     background-color: var(--color-surface-subtle),
-    border-color: var(--color-border-subtle),
+    border-color: var(--color-border-strong),
   ),
 );
 
 $control-states: (
-  'default': (
+  "default": (
     font-weight: bold,
     color: var(--color-text-primary),
   ),
-  'hover': (
+  "hover": (
     color: var(--color-surface-secondary),
     text-decoration: none,
   ),
-  'focus': (
+  "focus": (
     outline: base.$focus-outline,
-  )
+  ),
 );

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

@@ -1,13 +1,13 @@
 @use "sass:map";
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
 
 @mixin list-base($border: config.$border) {
   @include typoMixins.list-unstyled;
 
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 
   > * {
     border-top: $border;
@@ -52,6 +52,13 @@
 @mixin enclosed-item($spacing: config.$enclosed-spacing) {
   padding-left: $spacing;
   padding-right: $spacing;
+
+  &:first-child {
+    border-top-width: 0;
+  }
+  &:last-child {
+    border-bottom-width: 0;
+  }
 }
 
 @mixin control($config: config.$control-states) {
@@ -60,18 +67,18 @@
   width: 100%;
   text-align: left;
 
-  @include generate.css-map($config, 'default');
+  @include generate.css-map($config, "default");
 
   &:hover {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &:focus {
-    @include generate.css-map($config, 'hover');
+    @include generate.css-map($config, "hover");
   }
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: 0;

package/src/components/Loader/Loader.tsx

@@ -44,16 +44,8 @@ const Loader: React.FC<LoaderProps> = ({
 
   return (
     <div className={classes} {...other}>
-      <div
-        className={cx(`${CLASS_ROOT}__body`, {
-          [`${CLASS_ROOT}__body--inverse`]: colour !== "default",
-        })}
-      >
-        <div
-          className={cx(`${CLASS_ROOT}__line`, {
-            [`${CLASS_ROOT}__line--inverse`]: colour !== "default",
-          })}
-        />
+      <div className={`${CLASS_ROOT}__body`}>
+        <div className={`${CLASS_ROOT}__line`} />
       </div>
       {messages && (
         <div

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

@@ -30,7 +30,7 @@
 @mixin body-base {
   flex: 0 0 auto;
   overflow: hidden;
-  background-color: var(--color-icon-brand);
+  background-color: var(--color-surface-secondary);
 }
 
 @mixin size($size: default) {

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

@@ -12,8 +12,9 @@
         @include mixins.size(large);
       }
 
-      &--inverse,
-      .bg-orange & {
+      .bg-orange &,
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.color-inverse();
       }
     }
@@ -21,8 +22,9 @@
     &__line {
       @include mixins.line-base;
 
-      &--inverse,
-      .bg-orange & {
+      .bg-orange &,
+      .surface-secondary &,
+      .surface-tertiary & {
         @include mixins.line-color-inverse();
       }
     }

package/src/components/Megamenu/Megamenu.static.ts

@@ -287,8 +287,10 @@ export default class Megamenu {
     if (topElement) {
       if (window.scrollY > 15) {
         topElement.classList.add("is-hidden");
+        this.element.classList.add("top-hidden");
       } else {
         topElement.classList.remove("is-hidden");
+        this.element.classList.remove("top-hidden");
       }
     }
   }