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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.19",
+  "version": "2.0.0-beta.20",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -35,7 +35,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.0.1",
+    "@next/mdx": "16.0.3",
     "@orangesk/accessible-autocomplete": "^3.1.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -44,11 +44,11 @@
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.52",
     "dompurify": "^3.3.0",
-    "html-react-parser": "^5.2.8",
+    "html-react-parser": "^5.2.10",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
     "minisearch": "7.2.0",
-    "next": "16.0.1",
+    "next": "16.0.3",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "pretty": "^2.0.0",
@@ -85,31 +85,31 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.10.0",
+    "@types/node": "^24.10.1",
     "@types/pretty": "^2.0.3",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
     "babel-jest": "30.2.0",
     "eslint": "latest",
-    "eslint-config-next": "16.0.1",
+    "eslint-config-next": "16.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.3.0",
     "fs-extra": "^11.3.2",
-    "glob": "^11.0.3",
-    "html-validate": "10.3.0",
+    "glob": "13.0.0",
+    "html-validate": "10.4.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "30.2.0",
     "jest-axe": "10.0.0",
     "jest-snapshot": "^30.2.0",
-    "lint-staged": "16.2.6",
+    "lint-staged": "16.2.7",
     "prettier": "^3.6.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.93.3",
+    "sass": "^1.94.2",
     "svg-sprite": "^2.0.4",
-    "typescript": "5.9.3"
+    "typescript": "^5.9.3"
   }
 }

package/src/assets/icons/quote.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path d="M33.8776 61.8775H15V43C15 39.5986 15.3402 36.424 16.0205 33.4762C16.8141 30.415 17.9479 27.7506 19.4218 25.483C21.0091 23.2154 22.9933 21.4014 25.3742 20.0408C27.7552 18.6803 30.5329 18 33.7075 18V26.5034C31.78 26.5034 30.1928 27.0136 28.9456 28.034C27.6984 28.941 26.678 30.1882 25.8844 31.7755C25.0907 33.3628 24.5238 35.1769 24.1837 37.2177C23.957 39.1451 23.8436 41.0725 23.8436 43H33.8776V61.8775ZM65 61.8775H46.1225V43C46.1225 39.5986 46.4626 36.424 47.1429 33.4762C47.9365 30.415 49.0703 27.7506 50.5442 25.483C52.1315 23.2154 54.1157 21.4014 56.4966 20.0408C58.8776 18.6803 61.6554 18 64.83 18V26.5034C62.9025 26.5034 61.3152 27.0136 60.068 28.034C58.8208 28.941 57.8004 30.1882 57.0068 31.7755C56.2131 33.3628 55.6462 35.1769 55.3061 37.2177C55.0794 39.1451 54.966 41.0725 54.966 43H65V61.8775Z" fill="currentColor"/>
+</svg>

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

@@ -45,6 +45,7 @@
   margin-bottom: 0;
   width: 100%;
   max-width: none;
+  font-weight: 700;
 }
 
 @mixin header-size($size, $config: config.$spacing) {
@@ -79,6 +80,7 @@
 }
 
 @mixin body {
+  margin-top: space.get();
   margin-bottom: space.get("large");
 
   p:last-child {

package/src/components/Alert/Alert.tsx

@@ -27,8 +27,6 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Type of alert, sets icon and color */
   type?: AlertType;
   className?: string;
-  /** Sets Alert to use specific color scheme */
-  colorScheme?: "dark" | "light";
 }
 
 const CLASS_ROOT = "alert";
@@ -42,7 +40,6 @@ const Alert: React.FC<AlertProps> = ({
   headingLevel = 3,
   actionButtons,
   isFullWidth,
-  colorScheme,
   onClose,
   ...other
 }) => {
@@ -52,8 +49,6 @@ const Alert: React.FC<AlertProps> = ({
     {
       [`${CLASS_ROOT}--${type}`]: type,
       [`${CLASS_ROOT}--full-width`]: isFullWidth,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
     },
     className,
   );
@@ -69,7 +64,6 @@ const Alert: React.FC<AlertProps> = ({
         headingLevel,
         actionButtons,
         isFullWidth,
-        colorScheme,
         onClose,
         ...other,
       })) ||

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

@@ -46,7 +46,9 @@
   margin-top: convert.to-rem(2px);
 
   p {
-    @include generate.css-map(typography.$body-text, "small");
+    @include generate.css-map(
+      sass-map.get(sass-map.get(typography.$body-text, "small"), "default")
+    );
   }
 
   > :last-child {

package/src/components/Alert/tests/Alert.test.js

@@ -86,20 +86,6 @@ describe("rendering", () => {
   });
 
   describe("palette and theme logic", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <Alert data-testid="test" colorScheme="dark" />,
-      );
-      expect(getByTestId("test")).toHaveClass("is-dark");
-    });
-
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <Alert data-testid="test" colorScheme="light" />,
-      );
-      expect(getByTestId("test")).toHaveClass("is-light");
-    });
-
     it("should inherit color variables from parent theme", () => {
       const { getByTestId } = render(
         <div className="is-dark">

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -16,7 +16,6 @@ interface AnchorNavigationItem {
 interface AnchorNavigationProps {
   items: AnchorNavigationItem[];
   className?: string;
-  colorScheme?: "light" | "dark";
   children?: React.ReactNode;
 }
 
@@ -25,18 +24,10 @@ const CLASS_ROOT = "anchor-navigation";
 const AnchorNavigation = ({
   items,
   className,
-  colorScheme,
   children,
   ...other
 }: AnchorNavigationProps) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      "is-light": colorScheme === "light",
-      "is-dark": colorScheme === "dark",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   const [anchorNavRef] = useStatic(AnchorNavigationStatic);
 

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

@@ -15,17 +15,9 @@ const example = (
     {/* Basic usage */}
     <AnchorNavigation items={basicItems} aria-label="Basic navigation" />
 
-    {/* With color scheme */}
-    <AnchorNavigation
-      items={basicItems}
-      colorScheme="light"
-      aria-label="Light navigation"
-    />
-
     {/* With additional content */}
     <AnchorNavigation
       items={basicItems}
-      colorScheme="dark"
       aria-label="Dark navigation with content"
     >
       <div className="bold">
@@ -45,7 +37,6 @@ const example = (
         { label: "Examples", href: "#examples" },
         { label: "Support", href: "#support" },
       ]}
-      colorScheme="light"
       aria-label="Extended navigation"
     />
   </div>

package/src/components/BlockAction/BlockAction.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from "react";
+import cx from "classnames";
 
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Provider } from "./Context";
@@ -7,15 +8,21 @@ export interface BlockActionProps {
   /** 1 and only one single element */
   children: ReactElement;
   className?: string;
+  /** Add border on hover */
+  hasBorderOnHover?: boolean;
   [key: string]: any;
 }
 
 const BlockAction: React.FC<BlockActionProps> = (props) => {
+  const { hasBorderOnHover, className, ...restProps } = props;
+
   return (
-    <Provider>
+    <Provider hasBorderOnHover={hasBorderOnHover}>
       <CloneElementWithClassName
-        {...props}
-        className="block-action"
+        {...restProps}
+        className={cx("block-action", className, {
+          "block-action--border-on-hover": hasBorderOnHover,
+        })}
         data-block-action
       />
     </Provider>

package/src/components/BlockAction/Context.tsx

@@ -7,6 +7,7 @@ interface ContextType {
   isActive: boolean;
   setIsActive: Dispatch<SetStateAction<boolean>>;
   setIsIndicating: Dispatch<SetStateAction<boolean>>;
+  hasBorderOnHover?: boolean;
 }
 
 export const Context = React.createContext<ContextType>({
@@ -14,10 +15,12 @@ export const Context = React.createContext<ContextType>({
   isActive: false,
   setIsActive: () => {},
   setIsIndicating: () => {},
+  hasBorderOnHover: undefined,
 });
 
 interface ProviderProps {
   children: ReactNode;
+  hasBorderOnHover?: boolean;
 }
 
 export const Provider: React.FC<ProviderProps> = (props) => {
@@ -31,6 +34,7 @@ export const Provider: React.FC<ProviderProps> = (props) => {
         setIsIndicating,
         isActive,
         setIsActive,
+        hasBorderOnHover: props.hasBorderOnHover,
       }}
     >
       {props.children}

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

@@ -25,3 +25,9 @@
 @mixin indicator($bg-color: "default", $config: config.$indicator-colors) {
   color: map.get($config, $bg-color);
 }
+
+@mixin border {
+  &::after {
+    border: 2px solid var(--color-border-accent);
+  }
+}

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

@@ -31,5 +31,10 @@
         @include mixins.indicator("orange-dark");
       }
     }
+
+    &--border-on-hover:has(.block-action__control:hover),
+    &--border-on-hover:has(.block-action__control:focus) {
+      @include mixins.border;
+    }
   }
 }

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -26,22 +26,31 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
 }) => {
   const itemClasses = cx(ITEM_CLASS_ROOT, className);
 
-  // Ak je URL, všetky props idú na <a>, inak na <li>
+  // If current page, don't render as anchor even if URL is provided
+  if (isCurrent) {
+    return (
+      <li
+        className={itemClasses}
+        {...(isCurrent ? { "aria-current": "page" } : {})}
+        {...other}
+      >
+        {text}
+      </li>
+    );
+  }
+
+  // If URL provided and not current, render as anchor
   if (url) {
     return (
       <li className={itemClasses}>
-        <a
-          href={url}
-          className={LINK_CLASS_ROOT}
-          {...(isCurrent ? { "aria-current": "page" } : {})}
-          {...other}
-        >
+        <a href={url} className={LINK_CLASS_ROOT} {...other}>
           {text}
         </a>
       </li>
     );
   }
 
+  // No URL, no current status - just text
   return (
     <li className={itemClasses} {...other}>
       {text}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,8 +12,6 @@ interface BreadcrumbItemData {
 interface BreadcrumbsProps {
   /** Additional CSS classes */
   className?: string;
-  /** Use white breadcrumbs on dark background */
-  colorScheme?: "dark" | "light";
   /** Breadcrumb items */
   items: BreadcrumbItemData[];
   /** Navigation label */
@@ -28,18 +26,12 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
   className,
   label,
   items,
-  colorScheme,
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className, {
-    "is-dark": colorScheme === "dark",
-    "is-light": colorScheme === "light",
-  });
+  const classes = cx(CLASS_ROOT, className);
 
-  // Nájdeme index posledného prvku s URL
-  const lastUrlIndex = [...items].reverse().findIndex((item) => !!item.url);
-  const lastAnchorIndex =
-    lastUrlIndex === -1 ? -1 : items.length - 1 - lastUrlIndex;
+  // Mark the last item as current
+  const lastIndex = items.length - 1;
 
   return (
     <nav aria-label={label} className={classes} {...other}>
@@ -48,7 +40,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
           <BreadcrumbItem
             {...item}
             key={item.text}
-            isCurrent={!!item.url && index === lastAnchorIndex}
+            isCurrent={index === lastIndex}
           />
         ))}
       </ol>

package/src/components/Breadcrumbs/tests/BreadcrumbItem.unit.test.js

@@ -85,13 +85,13 @@ describe("rendering BreadcrumbItem", () => {
       expect(anchor).toHaveAttribute("href", "/test-url");
     });
 
-    it("anchor element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
+    it("li element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
       const { container } = render(
         <BreadcrumbItem text="test" url="/test" isCurrent />,
       );
-      expect(container.querySelector("a").getAttribute("aria-current")).toBe(
-        "page",
-      );
+      const li = container.querySelector("li");
+      expect(li).toHaveAttribute("aria-current", "page");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("does not render anchor when isCurrent is true but no URL provided", () => {
@@ -192,12 +192,14 @@ describe("rendering BreadcrumbItem", () => {
       expect(li).toContainElement(anchor);
     });
 
-    it("aria-current is only applied when both URL and isCurrent are provided", () => {
+    it("aria-current is only applied when isCurrent is true", () => {
       const { container } = render(
         <BreadcrumbItem text="test" url="/test" isCurrent />,
       );
+      const li = container.querySelector("li");
       const anchor = container.querySelector("a");
-      expect(anchor).toHaveAttribute("aria-current", "page");
+      expect(li).toHaveAttribute("aria-current", "page");
+      expect(anchor).not.toBeInTheDocument();
     });
 
     it("aria-current is not applied when isCurrent is false", () => {
@@ -205,13 +207,17 @@ describe("rendering BreadcrumbItem", () => {
         <BreadcrumbItem text="test" url="/test" isCurrent={false} />,
       );
       const anchor = container.querySelector("a");
-      expect(anchor).not.toHaveAttribute("aria-current");
+      const li = container.querySelector("li");
+      expect(anchor).toBeInTheDocument();
+      expect(li).not.toHaveAttribute("aria-current");
     });
 
-    it("aria-current is not applied when no URL is provided", () => {
+    it("aria-current is applied to li when isCurrent is true and no URL is provided", () => {
       const { container } = render(<BreadcrumbItem text="test" isCurrent />);
       const anchor = container.querySelector("a");
+      const li = container.querySelector("li");
       expect(anchor).not.toBeInTheDocument();
+      expect(li).toHaveAttribute("aria-current", "page");
     });
   });
 

package/src/components/Breadcrumbs/tests/Breadcrumbs.integration.test.js

@@ -25,15 +25,12 @@ describe("Breadcrumbs Integration Tests", () => {
       const anchors = container.querySelectorAll("a");
 
       expect(listItems).toHaveLength(6);
-      expect(anchors).toHaveLength(5); // Last item has no URL
+      expect(anchors).toHaveLength(5); // Last item is not an anchor (current page)
 
-      // Last anchor should have aria-current
-      expect(anchors[anchors.length - 1]).toHaveAttribute(
-        "aria-current",
-        "page",
-      );
-      // Last item should be plain text
-      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
+      // Last item should have aria-current and be plain text
+      const lastItem = listItems[listItems.length - 1];
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).toBeNull();
     });
 
     it("handles e-commerce navigation correctly", () => {
@@ -72,16 +69,11 @@ describe("Breadcrumbs Integration Tests", () => {
       ];
 
       const { container } = render(
-        <Breadcrumbs
-          items={multilingualNav}
-          label="Navigation"
-          colorScheme="dark"
-        />,
+        <Breadcrumbs items={multilingualNav} label="Navigation" />,
       );
 
       const nav = container.querySelector("nav");
       expect(nav).toHaveClass("osk-breadcrumbs");
-      expect(nav).toHaveClass("is-dark");
       expect(nav).toHaveAttribute("aria-label", "Navigation");
 
       const listItems = container.querySelectorAll("li");
@@ -105,6 +97,7 @@ describe("Breadcrumbs Integration Tests", () => {
 
       const nav = container.querySelector("nav");
       const ol = container.querySelector("ol");
+      const listItems = container.querySelectorAll("li");
       const anchors = container.querySelectorAll("a");
 
       // Check navigation structure
@@ -113,17 +106,16 @@ describe("Breadcrumbs Integration Tests", () => {
       expect(ol).toHaveClass("osk-breadcrumbs__container");
 
       // Check anchor accessibility
-      anchors.forEach((anchor, index) => {
+      anchors.forEach((anchor) => {
         expect(anchor).toHaveAttribute("href");
         expect(anchor).toHaveClass("osk-breadcrumbs__link");
-
-        // Last anchor should have aria-current
-        if (index === anchors.length - 1) {
-          expect(anchor).toHaveAttribute("aria-current", "page");
-        } else {
-          expect(anchor).not.toHaveAttribute("aria-current");
-        }
+        expect(anchor).not.toHaveAttribute("aria-current");
       });
+
+      // Last item should have aria-current on li, not anchor
+      const lastItem = listItems[listItems.length - 1];
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).toBeNull();
     });
 
     it("provides proper keyboard navigation support", () => {
@@ -145,21 +137,6 @@ describe("Breadcrumbs Integration Tests", () => {
   });
 
   describe("styling integration", () => {
-    it("applies dark mode styling correctly", () => {
-      const items = [
-        { url: "/home", text: "Domov" },
-        { text: "Aktuálna stránka" },
-      ];
-
-      const { container } = render(
-        <Breadcrumbs items={items} colorScheme="dark" />,
-      );
-
-      const nav = container.querySelector("nav");
-      expect(nav).toHaveClass("osk-breadcrumbs");
-      expect(nav).toHaveClass("is-dark");
-    });
-
     it("combines custom classes with default classes", () => {
       const items = [{ text: "Test" }];
 

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

@@ -73,16 +73,6 @@ describe("rendering Breadcrumbs", () => {
       );
     });
 
-    it('has class osk-breadcrumbs--dark when colorScheme="dark" is passed', () => {
-      const { container } = render(
-        <Breadcrumbs items={[]} colorScheme="dark" />,
-      );
-      expect(container.getElementsByClassName("osk-breadcrumbs").length).toBe(
-        1,
-      );
-      expect(container.getElementsByClassName("is-dark").length).toBe(1);
-    });
-
     it("combines multiple CSS classes correctly", () => {
       const { getByTestId } = render(
         <Breadcrumbs
@@ -104,12 +94,16 @@ describe("rendering Breadcrumbs", () => {
 
     itemsArr.map(({ url, text }, index) => {
       it(`renders BreadcrumbItem with text ${text} ${
-        url ? "inside anchor element with url " + url : ""
+        url && index !== itemsArr.length - 1
+          ? "inside anchor element with url " + url
+          : ""
       }`, () => {
         const { container } = render(<Breadcrumbs items={itemsArr} />);
         const listElements = container.querySelectorAll("li");
         expect(listElements[index].textContent).toBe(text);
-        if (url) {
+
+        // Only non-last items with URL should have anchors
+        if (url && index !== itemsArr.length - 1) {
           expect(listElements[index].children[0].getAttribute("href")).toBe(
             url,
           );
@@ -117,18 +111,18 @@ describe("rendering Breadcrumbs", () => {
       });
     });
 
-    it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
+    it("last item does not render as anchor element", () => {
       const items = [
         { url: "/test1", text: "test1-text" },
         { url: "/test2", text: "test2-text" },
         { url: "/test3", text: "test3-text" },
       ];
       const { container } = render(<Breadcrumbs items={items} />);
-      const anchors = container.querySelectorAll("a");
-      expect(anchors[anchors.length - 1]).toHaveAttribute(
-        "aria-current",
-        "page",
-      );
+      const listItems = container.querySelectorAll("li");
+      const lastItem = listItems[listItems.length - 1];
+
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("marks last item as current page even without URL", () => {
@@ -167,6 +161,7 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={complexItemsArr} />);
       const anchors = container.querySelectorAll("a");
 
+      // Only non-last items should have anchors (last item is current page, plain text)
       anchors.forEach((anchor) => {
         expect(anchor).toHaveClass("osk-breadcrumbs__link");
       });
@@ -187,7 +182,7 @@ describe("rendering Breadcrumbs", () => {
       expect(nav).toContainElement(ol);
     });
 
-    it('last item has aria-current="page" when it has URL', () => {
+    it('last item has aria-current="page" and is not an anchor', () => {
       const itemsWithLastUrl = [
         { url: "/home", text: "Domov" },
         { url: "/current", text: "Aktuálna stránka" },
@@ -196,9 +191,9 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={itemsWithLastUrl} />);
       const listElements = container.querySelectorAll("li");
       const lastItem = listElements[listElements.length - 1];
-      const lastAnchor = lastItem.querySelector("a");
 
-      expect(lastAnchor).toHaveAttribute("aria-current", "page");
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("last item without URL is still marked as current", () => {
@@ -229,8 +224,9 @@ describe("rendering Breadcrumbs", () => {
       const anchor = container.querySelector("a");
 
       expect(listItems).toHaveLength(1);
-      expect(anchor).toHaveAttribute("href", "/home");
-      expect(anchor).toHaveAttribute("aria-current", "page");
+      // Single item is the last (current) item, so no anchor
+      expect(anchor).not.toBeInTheDocument();
+      expect(listItems[0]).toHaveAttribute("aria-current", "page");
     });
 
     it("handles items with special characters in text", () => {

package/src/components/Button/Button.tsx

@@ -10,7 +10,6 @@ interface CommonProps {
   isActive?: boolean;
   isDefault?: boolean;
   isDisabled?: boolean;
-  colorScheme?: "dark" | "light";
   isSquare?: boolean;
   size?: ButtonSize;
   type?: ButtonType;
@@ -47,7 +46,6 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
     href,
     isActive,
     isDisabled,
-    colorScheme,
     size,
     isSquare,
     type,
@@ -62,8 +60,6 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--${type}`]: type,
       [`${CLASS_ROOT}--preserve-width`]: props.preserveWidth,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
       "is-active": isActive,
     },
     className,