@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/build/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M0 0h50v50H0z" fill="#ff7900"/><g fill="#fff"><path d="M19.612 45.15c-.705.458-1.48.688-2.293.688-1.306 0-2.064-.864-2.064-2.028 0-1.553 1.428-2.38 4.374-2.717v-.388c0-.51-.388-.793-1.094-.793-.705 0-1.287.282-1.693.793L15.608 40c.653-.9 1.64-1.358 2.963-1.358 1.818 0 2.84.794 2.84 2.063v5.045H19.79l-.176-.6zm-2.575-1.464c0 .46.3.9.83.9.58 0 1.128-.247 1.692-.74v-1.64c-1.712.228-2.523.65-2.523 1.48zM22.84 38.995l1.516-.212.16.83c.863-.618 1.533-.953 2.398-.953 1.428 0 2.17.758 2.17 2.257v4.85h-1.835v-4.532c0-.847-.23-1.235-.883-1.235-.547 0-1.094.247-1.71.776v4.99H22.84v-6.77zM41.217 45.89c-2.046 0-3.28-1.322-3.28-3.615 0-2.31 1.234-3.633 3.245-3.633 2.01 0 3.21 1.27 3.21 3.545 0 .123-.018.247-.018.353h-4.64c.02 1.322.566 1.975 1.642 1.975.687 0 1.146-.282 1.57-.9l1.34.74c-.582 1.007-1.64 1.536-3.07 1.536zm1.376-4.532c0-.935-.53-1.48-1.394-1.48-.83 0-1.34.528-1.412 1.48h2.805zM6.155 45.96c-1.816 0-3.44-1.145-3.44-3.667s1.64-3.67 3.44-3.67c1.817 0 3.44 1.148 3.44 3.67 0 2.522-1.623 3.668-3.44 3.668zm0-5.8c-1.358 0-1.622 1.233-1.622 2.115 0 .9.247 2.117 1.622 2.117 1.376 0 1.623-1.235 1.623-2.117 0-.882-.265-2.116-1.623-2.116zM10.847 38.8h1.746v.812c.335-.44 1.146-.97 1.922-.97.07 0 .16 0 .23.018v1.71h-.09c-.793 0-1.674.124-1.94.74v4.622h-1.868v-6.93zM33.563 44.268c1.393-.018 1.5-1.428 1.5-2.346 0-1.093-.53-1.975-1.518-1.975-.653 0-1.393.476-1.393 2.046.017.864.07 2.275 1.41 2.275zm3.28-5.485v6.596c0 1.163-.088 3.068-3.404 3.103-1.377 0-2.63-.546-2.893-1.728l1.8-.282c.07.335.28.687 1.304.687.953 0 1.412-.458 1.412-1.534v-.81l-.018-.02c-.282.513-.74 1.006-1.8 1.006-1.62 0-2.89-1.128-2.89-3.474 0-2.328 1.32-3.633 2.803-3.633 1.393 0 1.905.635 2.028.97h-.017l.158-.83h1.517zM45.097 36.473h-.723v1.993h-.388v-1.993h-.723v-.3h1.816v.3zm2.998 1.993h-.388v-1.923h-.017l-.76 1.923h-.246l-.758-1.923h-.018v1.923h-.388v-2.293h.582l.688 1.746.67-1.747h.582v2.293z"/></g></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "private": false,
   "engines": {
     "node": ">=18.x"
@@ -14,8 +14,9 @@
   ],
   "main": "build/components/index.js",
   "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build && npm run sprite && npx rollup -c",
+    "dev": "next dev",
+    "build": "next build && npm run sprite",
+    "build:bundle": "npx rollup -c",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -25,23 +26,36 @@
     "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"
   },
   "dependencies": {
+    "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.3.4",
+    "@next/mdx": "^15.4.6",
+    "@orangesk/accessible-autocomplete": "^3.1.2",
+    "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
     "a11y-dialog": "^8.1.4",
     "classnames": "^2.5.1",
-    "diff2html": "^3.4.51",
-    "next": "15.3.4",
+    "daypickr": "^0.3.4",
+    "diff2html": "^3.4.52",
+    "dompurify": "^3.2.6",
+    "jest-environment-jsdom": "^30.0.5",
+    "next": "15.4.6",
     "normalize.css": "^8.0.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "nouislider": "^15.8.1",
+    "pretty": "^2.0.0",
+    "prism-react-renderer": "^2.4.1",
+    "query-string": "^9.2.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-element-to-jsx-string": "^17.0.1",
+    "swiper": "^11.2.10",
     "tabbable": "^6.2.0",
+    "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/eslintrc": "3.3.1",
@@ -49,32 +63,35 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.3",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^20",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "babel-jest": "^29.7.0",
+    "@types/node": "^24.2.1",
+    "@types/pretty": "^2.0.3",
+    "@types/react": "19.1.10",
+    "@types/react-dom": "19.1.7",
+    "@types/wnumb": "^1.2.3",
+    "babel-jest": "30.0.5",
     "eslint": "latest",
-    "eslint-config-next": "^15.3.4",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-next": "^15.4.6",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "fs-extra": "^11.3.0",
+    "fs-extra": "^11.3.1",
     "glob": "^11.0.3",
-    "html-validate": "^7.18.1",
+    "html-validate": "10.0.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-image-snapshot": "^6.5.1",
-    "lint-staged": "^15.5.2",
-    "prettier": "^3.5.3",
+    "jest": "30.0.5",
+    "jest-axe": "10.0.0",
+    "jest-snapshot": "^30.0.5",
+    "lint-staged": "16.1.5",
+    "prettier": "^3.6.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "svg-sprite": "^2.0.4",
-    "typescript": "5.8.3"
+    "typescript": "5.9.2"
   }
 }

package/src/components/Accordion/Accordion.mdx

@@ -11,8 +11,8 @@ import Bar, { BarItem } from '../Bar';
 import Icon from '../Icon';
 import Card, { CardSection } from '../Card';
 
-import Accordion from './Accordion';
-import AccordionItem from './AccordionItem';
+import { Accordion } from './Accordion';
+import { AccordionItem } from './AccordionItem';
 
 export const AccordionHeader = ({ title, currentId, isActive }) => (
   <BlockAction>

package/src/components/Accordion/Accordion.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import React, { useEffect, useRef, ReactNode } from 'react';
-import cx from 'classnames';
+import React, { ReactNode } from "react";
+import cx from "classnames";
 
-import AccordionStatic from './Accordion.static';
-import HeadingContext from './HeadingContext';
+import AccordionStatic from "./Accordion.static";
+import HeadingContext from "./HeadingContext";
+import { useStatic } from "@/utils/hooks";
 
-const CLASS_ROOT = 'accordion';
+const CLASS_ROOT = "accordion";
 
 interface AccordionProps {
   /** Heading level from 1 to 6 */
@@ -14,7 +15,7 @@ interface AccordionProps {
   /** Accordion is enclosed in another component */
   isEnclosed?: boolean;
   /** Adjustable spacing */
-  size?: 'large';
+  size?: "large";
   /** Additional CSS classes */
   className?: string;
   /** Accordion content */
@@ -31,7 +32,7 @@ const Accordion: React.FC<AccordionProps> = ({
   isEnclosed,
   ...other
 }) => {
-  const accordionRef = useRef<HTMLUListElement>(null);
+  const [accordionRef] = useStatic(AccordionStatic);
 
   const classes = cx(
     CLASS_ROOT,
@@ -39,24 +40,15 @@ const Accordion: React.FC<AccordionProps> = ({
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--enclosed`]: isEnclosed,
     },
-    className
+    className,
   );
 
-  useEffect(() => {
-    if (accordionRef.current) {
-      const accordion = new AccordionStatic(accordionRef.current);
-      return () => {
-        accordion.destroy();
-      };
-    }
-  }, []);
-
   return (
     <HeadingContext.Provider value={headingLevel}>
       <ul
-        data-accordion
         className={classes}
         ref={accordionRef}
+        data-accordion="true"
         {...other}
       >
         {children}
@@ -65,6 +57,6 @@ const Accordion: React.FC<AccordionProps> = ({
   );
 };
 
-Accordion.displayName = 'Accordion';
+Accordion.displayName = "Accordion";
 
-export default Accordion;
+export { Accordion };

package/src/components/Accordion/AccordionItem.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import React, { ReactNode } from 'react';
-import cx from 'classnames';
+import React, { ReactNode } from "react";
+import cx from "classnames";
 
-import generateId from '../../utils/generateId';
+import generateId from "../../utils/generateId";
 
-import AccordionHeader from './AccordionHeader';
+import AccordionHeader from "./AccordionHeader";
 
-const CLASS_ROOT = 'accordion__item';
+const CLASS_ROOT = "accordion__item";
 
-interface AccordionItemProps {
+export interface AccordionItemProps {
   /** Accordion item id (automatically generated by default)  */
   id?: string;
   /** Open state indication */
@@ -50,27 +50,17 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
           {...other}
         />
       )}
-      {isActive ? (
-        <div
-          id={`${currentId}-section`}
-          aria-labelledby={currentId}
-          className={cx('accordion__body', { 'is-active': isActive })}
-        >
-          {children}
-        </div>
-      ) : (
-        <div
-          id={`${currentId}-section`}
-          aria-labelledby={currentId}
-          className={cx('accordion__body', { 'is-active': isActive })}
-          hidden
-        >
-          {children}
-        </div>
-      )}
+      <div
+        id={`${currentId}-section`}
+        aria-labelledby={currentId}
+        className={cx("accordion__body", { "is-active": isActive })}
+        {...(isActive ? {} : { hidden: true })}
+      >
+        {children}
+      </div>
     </li>
   );
 };
 
-AccordionItem.displayName = 'AccordionItem';
-export default AccordionItem;
+AccordionItem.displayName = "AccordionItem";
+export { AccordionItem };

package/src/components/Accordion/index.ts

@@ -1,4 +1,4 @@
-import './styles/style.scss';
+import "./styles/style.scss";
 
-export { default } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
+export { Accordion } from "./Accordion";
+export { AccordionItem } from "./AccordionItem";

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

@@ -1,13 +1,13 @@
 @use "sass:map";
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/breakpoint';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use '../../../styles/typography/mixins' as typoMixins;
-@use './config';
-@use 'sass:math';
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/typography/mixins" as typoMixins;
+@use "./config";
+@use "sass:math";
 
 @mixin base {
   @include typoMixins.list-unstyled;
@@ -20,10 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-top: 2px solid color.$gray-300;
+  border-top: 1px solid var(--color-border-strong);
 
   &:last-child {
-    border-bottom: 2px solid color.$gray-300;
+    border-bottom: 1px solid var(--color-border-strong);
   }
 
   ul {

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

@@ -1,47 +1,49 @@
-@use '../../../styles/tools/generate';
-@use './config';
-@use './mixins';
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
 
-.accordion {
-  $this: &;
-  @include mixins.base();
+@layer components {
+  .accordion {
+    $this: &;
+    @include mixins.base();
 
-  &__item {
-    @include mixins.item();
+    &__item {
+      @include mixins.item();
 
-    #{$this}--enclosed & {
-      @include mixins.enclosed-item();
+      #{$this}--enclosed & {
+        @include mixins.enclosed-item();
+      }
     }
-  }
 
-  &__header {
-    @include mixins.header();
-  }
+    &__header {
+      @include mixins.header();
+    }
 
-  @each $size, $value in config.$spacing {
-    &#{generate.variant-name($size)} &__header {
-      @include mixins.header-size($size);
+    @each $size, $value in config.$spacing {
+      &#{generate.variant-name($size)} &__header {
+        @include mixins.header-size($size);
+      }
     }
-  }
 
-  &__button {
-    @include mixins.button-base();
-  }
+    &__button {
+      @include mixins.button-base();
+    }
 
-  &__title {
-    @include mixins.title();
-  }
+    &__title {
+      @include mixins.title();
+    }
 
-  &__body {
-    @include mixins.body();
-  }
+    &__body {
+      @include mixins.body();
+    }
 
-  &__icon {
-    @include mixins.icon();
+    &__icon {
+      @include mixins.icon();
 
-    [aria-expanded="true"] > &,
-    &.is-active {
-      @include mixins.icon-active();
+      [aria-expanded="true"] > &,
+      &.is-active {
+        @include mixins.icon-active();
+      }
     }
   }
 }

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

@@ -1,8 +1,8 @@
 import { render, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import AccordionItem from "../AccordionItem";
-import Accordion from "../Accordion";
+import { AccordionItem } from "../AccordionItem";
+import { Accordion } from "../Accordion";
 import AccordionHeader from "../AccordionHeader";
 import HeadingContext from "../HeadingContext";
 import testData from "./data";

package/src/components/Accordion/tests/{data.js → data.ts}

@@ -1,18 +1,20 @@
-export default [
+const data = [
   {
-    title: 'Sed posuere consectetur est at lobortis.',
+    title: "Sed posuere consectetur est at lobortis.",
     children:
-      'Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+      "Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
   },
   {
-    title: 'Donec sed odio dui.',
+    title: "Donec sed odio dui.",
     children:
-      'Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.',
+      "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.",
   },
   {
     title:
-      'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+      "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.",
     children:
-      'Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.',
+      "Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.",
   },
 ];
+
+export default data;

package/src/components/Alert/Alert.tsx

@@ -18,8 +18,6 @@ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   headingLevel?: number;
   /** Sets Alert to full width */
   isFullWidth?: boolean;
-  /** Sets Alert to use inverse color scheme */
-  isInverse?: boolean;
   /** Callback function when close button is clicked */
   onClose?: () => void;
   /** Custom title renderer. Passes props as function parameter. */
@@ -29,6 +27,8 @@ 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 +42,7 @@ const Alert: React.FC<AlertProps> = ({
   headingLevel = 3,
   actionButtons,
   isFullWidth,
-  isInverse,
+  colorScheme,
   onClose,
   ...other
 }) => {
@@ -52,7 +52,8 @@ const Alert: React.FC<AlertProps> = ({
     {
       [`${CLASS_ROOT}--${type}`]: type,
       [`${CLASS_ROOT}--full-width`]: isFullWidth,
-      [`${CLASS_ROOT}--inverse`]: isInverse,
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
     },
     className,
   );
@@ -68,7 +69,7 @@ const Alert: React.FC<AlertProps> = ({
         headingLevel,
         actionButtons,
         isFullWidth,
-        isInverse,
+        colorScheme,
         onClose,
         ...other,
       })) ||

package/src/components/Alert/CHANGELOG.md

@@ -31,3 +31,36 @@
 - Enhanced component API by providing a clear way to handle dismissal of alerts
 - Follows the principle of "If it's not clickable, don't make it look clickable"
 - Maintains backward compatibility with existing implementations
+
+## July 11, 2025
+
+### Changed
+
+- Refactored color palette logic: Alert now uses CSS variables for all color styling, inheriting from global theme or local modifier.
+- Moved color variant logic into `mixins.alert-variants` for better modularity and maintainability.
+- Improved support for dark mode via global `.is-dark` parent class and `colorScheme` prop.
+- Updated tests to cover palette switching behavior.
+
+### Benefits
+
+- More flexible theming: Alerts can be light or dark regardless of parent theme.
+- Cleaner, more maintainable codebase with modular SCSS mixins.
+- Improved test coverage for new palette features.
+
+## July 16, 2025
+
+### Changed
+
+- Removed `isInverse` and `isLight` props from the `Alert` component.
+- Removed `--inverse` and `--light` modifier classes.
+- Added `colorScheme` prop to the `Alert` component to support palette overrides.
+  - `colorScheme`: Accepts `'light'` or `'dark'` to force palette regardless of parent theme.
+- Updated modifier classes: `is-light` and `is-dark` are now applied based on `colorScheme` prop.
+- Updated tests to cover new `colorScheme` prop and palette switching behavior.
+- Updated global styles to handle light and dark theme CSS variables at the root and via `.is-light`/`.is-dark` classes.
+
+### Benefits
+
+- More flexible theming: Alerts can be light or dark regardless of parent theme using a single prop.
+- Cleaner, more maintainable codebase with modular SCSS and simplified API.
+- Improved test coverage for new palette features.

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

@@ -2,57 +2,19 @@
 @use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 @use "sass:math";
-@use "sass:map" as sass-map;
 
 $base: (
   max-width: convert.to-rem(590px),
   margin-bottom: space.get(),
   padding: space.get("medium"),
-  background: sass-map.get(color.$colors-light, fill-information),
-  border: 1px solid sass-map.get(color.$colors-light, border-information),
+  background: var(--color-fill-information),
+  border: 1px solid var(--color-border-information),
   border-radius: convert.to-rem(5px),
 );
 
-$colors-light: (
-  success: (
-    border-color: sass-map.get(color.$colors-light, border-positive),
-    background-color: sass-map.get(color.$colors-light, fill-positive),
-  ),
-  info: (
-    border-color: sass-map.get(color.$colors-light, border-information),
-    background-color: sass-map.get(color.$colors-light, fill-information),
-  ),
-  warning: (
-    border-color: sass-map.get(color.$colors-light, border-warning),
-    background-color: sass-map.get(color.$colors-light, fill-warning),
-  ),
-  danger: (
-    border-color: sass-map.get(color.$colors-light, border-negative),
-    background-color: sass-map.get(color.$colors-light, fill-negative),
-  ),
-);
-
-$colors-dark: (
-  success: (
-    border-color: sass-map.get(color.$colors-dark, border-positive),
-    background-color: sass-map.get(color.$colors-dark, fill-positive),
-  ),
-  info: (
-    border-color: sass-map.get(color.$colors-dark, border-information),
-    background-color: sass-map.get(color.$colors-dark, fill-information),
-  ),
-  warning: (
-    border-color: sass-map.get(color.$colors-dark, border-warning),
-    background-color: sass-map.get(color.$colors-dark, fill-warning),
-  ),
-  danger: (
-    border-color: sass-map.get(color.$colors-dark, border-negative),
-    background-color: sass-map.get(color.$colors-dark, fill-negative),
-  ),
-);
-
 $title: (
-  font-size: convert.to-rem(18px),
-  line-height: math.div(20, 18),
-  margin-bottom: space.get("small"),
+  font-size: convert.to-rem(18px) "!important",
+  line-height: math.div(20, 18) "!important",
+  margin-bottom: space.get("small") "!important",
+  font-weight: 700 "!important",
 );

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

@@ -1,5 +1,6 @@
 @use "./../../../styles/tokens/space";
 @use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/color";
 @use "./../../../styles/tools/generate";
 @use "./../../../styles/tools/convert";
 @use "./../../../styles/typography/config" as typography;
@@ -12,15 +13,26 @@
   @include generate.css-map($config);
 }
 
-@mixin alert-color($color-config, $is-inverse: false) {
-  $type-config: if(
-    $is-inverse,
-    sass-map.get(config.$colors-dark, $color-config),
-    sass-map.get(config.$colors-light, $color-config)
-  );
+@mixin alert-variants() {
+  border-color: var(--color-border-information);
+  background-color: var(--color-fill-information);
 
-  border-color: map-get($type-config, border-color);
-  background-color: map-get($type-config, background-color);
+  &--success {
+    border-color: var(--color-border-positive);
+    background-color: var(--color-fill-positive);
+  }
+  &--info {
+    border-color: var(--color-border-information);
+    background-color: var(--color-fill-information);
+  }
+  &--warning {
+    border-color: var(--color-border-warning);
+    background-color: var(--color-fill-warning);
+  }
+  &--danger {
+    border-color: var(--color-border-negative);
+    background-color: var(--color-fill-negative);
+  }
 }
 
 @mixin alert-icon {