triafly-ui-kit 1.0.42 → 1.0.45

package/dist/components/Ui/ModalWindow/ModalWindow.stories.js

@@ -0,0 +1,89 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { ModalWindow as r } from "./ModalWindow.js";
+import { IconCheck as t } from "../Icons/Icons.js";
+const u = {
+  title: "UIKit/ModalWindow",
+  component: r,
+  tags: ["autodocs"]
+}, l = () => {
+  const [n, e] = d(!1);
+  return /* @__PURE__ */ i("div", { style: { padding: "20px" }, children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        onClick: () => e(!0),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer"
+        },
+        children: "Open Modal"
+      }
+    ),
+    /* @__PURE__ */ o(r, { isOpen: n, onClose: () => e(!1), title: "Basic Modal Window", children: /* @__PURE__ */ i("div", { style: { padding: "20px" }, children: [
+      /* @__PURE__ */ o("p", { children: "This is a simple modal content" }),
+      /* @__PURE__ */ o(
+        "button",
+        {
+          onClick: () => e(!1),
+          style: {
+            padding: "6px 12px",
+            backgroundColor: "#6c757d",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer"
+          },
+          children: "Close"
+        }
+      )
+    ] }) })
+  ] });
+}, s = () => {
+  const [n, e] = d(!1);
+  return /* @__PURE__ */ i("div", { style: { padding: "20px" }, children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        onClick: () => e(!0),
+        style: {
+          padding: "8px 16px",
+          backgroundColor: "#007bff",
+          color: "white",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer"
+        },
+        children: "Open Modal with Icon"
+      }
+    ),
+    /* @__PURE__ */ o(
+      r,
+      {
+        isOpen: n,
+        onClose: () => e(!1),
+        title: "Modal with Icon",
+        iconHeader: {
+          view: !0,
+          status: "info",
+          icon: t,
+          size: 24
+        },
+        children: /* @__PURE__ */ o("div", { style: { padding: "20px" }, children: /* @__PURE__ */ o("p", { children: "This modal has an icon in the header" }) })
+      }
+    )
+  ] });
+}, x = {
+  render: () => /* @__PURE__ */ o(l, {})
+}, f = {
+  render: () => /* @__PURE__ */ o(s, {})
+};
+export {
+  x as Basic,
+  f as WithIcon,
+  u as default
+};

package/dist/components/Ui/Table/Table.js

@@ -1,100 +1,100 @@
 import { jsx as n, jsxs as g } from "react/jsx-runtime";
-import Z, { forwardRef as K, useState as M, useMemo as ee, useCallback as k, useEffect as te } from "react";
-import o from "../../../_virtual/index.js";
+import Z, { forwardRef as K, useState as j, useMemo as ee, useCallback as k, useEffect as te } from "react";
+import i from "../../../_virtual/index.js";
 import '../../../assets/src/components/Ui/Table/Table.css';/* empty css                                          */
-import { IconCaretDown as j, IconCaretUp as ne } from "../Icons/Icons.js";
-import { MemoizedRow as z } from "./MemoizedRow/MemoizedRow.js";
+import { IconCaretDown as z, IconCaretUp as ne } from "../Icons/Icons.js";
+import { MemoizedRow as C } from "./MemoizedRow/MemoizedRow.js";
 import { Loader as ae } from "../Loader/Loader.js";
 import { TableSkeletonRow as re } from "./TableSkeletonRow/TableSkeletonRow.js";
-const C = {
-  asc: /* @__PURE__ */ n(j, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+const L = {
+  asc: /* @__PURE__ */ n(z, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
   desc: /* @__PURE__ */ n(ne, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
-  default: /* @__PURE__ */ n(j, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+  default: /* @__PURE__ */ n(z, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
 }, se = ({
-  columns: f,
-  dataSource: m,
-  rowKey: i,
-  tableClassName: L,
-  theadClassName: $,
-  trTheadClassNames: O,
-  thTheadClassNames: U,
-  tbodyClassName: q,
-  wrapperClassName: F,
+  columns: m,
+  dataSource: l,
+  rowKey: f,
+  tableClassName: $,
+  theadClassName: O,
+  trTheadClassNames: U,
+  thTheadClassNames: q,
+  tbodyClassName: F,
+  wrapperClassName: G,
   borderBottom: y = !1,
-  stickyHeader: G = !1,
+  stickyHeader: H = !1,
   stickyLeft: b = !1,
   bordered: p = !1,
   rowClassName: x,
-  defaultSort: H,
-  onClickTr: _,
-  onClickTrHeader: J,
+  defaultSort: J,
+  onClickTr: d,
+  onClickTrHeader: P,
   loading: R = !1,
-  hasMore: P = !1,
-  loadingIndicator: Q,
+  hasMore: Q = !1,
+  loadingIndicator: S,
   loaderRef: B,
   externalSorting: D = !1,
   entities: c,
   sortedIds: u
 }, V) => {
-  const T = Z.useRef(null), l = !!c && !!u, [A, W] = M(m || []), [s, S] = M(
-    H || null
+  const T = Z.useRef(null), o = !!c && !!u, [A, W] = j(l || []), [s, E] = j(
+    J || null
   ), N = ee(() => {
-    if (!l)
-      return D ? m : A;
-  }, [l, m, A, D]), E = k(
+    if (!o)
+      return D ? l : A;
+  }, [o, l, A, D]), I = k(
     (e, t) => {
-      if (l) {
-        S({ key: e, order: t });
+      if (o) {
+        E({ key: e, order: t });
         return;
       }
-      W((d) => [...d].sort((h, I) => {
-        const r = h[e], a = I[e];
+      W((_) => [..._].sort((h, M) => {
+        const r = h[e], a = M[e];
         return typeof r == "string" && typeof a == "string" ? t === "asc" ? r.localeCompare(a) : a.localeCompare(r) : typeof r == "number" && typeof a == "number" ? t === "asc" ? r - a : a - r : r instanceof Date && a instanceof Date ? t === "asc" ? r.getTime() - a.getTime() : a.getTime() - r.getTime() : 0;
-      })), S({ key: e, order: t });
+      })), E({ key: e, order: t });
     },
-    [l]
+    [o]
   ), v = k(
-    (e) => typeof i == "function" ? i(e) : String(e[i]),
-    [i]
+    (e) => typeof f == "function" ? f(e) : String(e[f]),
+    [f]
   ), X = k(
     (e) => {
-      const d = (s == null ? void 0 : s.key) === e && s.order === "asc" ? "desc" : "asc";
-      E(e, d);
+      const _ = (s == null ? void 0 : s.key) === e && s.order === "asc" ? "desc" : "asc";
+      I(e, _);
     },
-    [s, E]
+    [s, I]
   );
   return te(() => {
     const e = T.current;
     if (!e) return;
-    const t = (d) => {
-      const w = d.target, h = w.closest("tr");
+    const t = (_) => {
+      const w = _.target, h = w.closest("tr");
       if (!h || w.closest("[data-no-bubble]")) return;
       const r = h.dataset.id;
-      if (!(!r || !_))
-        if (l && c) {
+      if (!(!r || !d))
+        if (o && c) {
           const a = c[r];
-          a && _(a);
+          a && d(a);
         } else {
-          const a = m.find((Y) => v(Y) === r);
-          a && _(a);
+          const a = l == null ? void 0 : l.find((Y) => v(Y) === r);
+          a && d(a);
         }
     };
     return e.addEventListener("click", t), () => e.removeEventListener("click", t);
-  }, [m, _, v, l, c]), /* @__PURE__ */ n("div", { className: o("table-component", F), children: /* @__PURE__ */ n(
+  }, [l, d, v, o, c]), /* @__PURE__ */ n("div", { className: i("table-component", G), children: /* @__PURE__ */ n(
     "div",
     {
-      className: o(
+      className: i(
         "table-component__wrapper",
         {
           bordered: p,
           borderBottom: y
         },
-        L
+        $
       ),
       children: /* @__PURE__ */ g(
         "table",
         {
-          className: o("table-component__wrapper__table", {
+          className: i("table-component__wrapper__table", {
             bordered: p,
             borderBottom: y
           }),
@@ -103,31 +103,31 @@ const C = {
             /* @__PURE__ */ n(
               "thead",
               {
-                className: o(
+                className: i(
                   "table-component__wrapper__table__thead",
                   {
-                    stickyHeader: G
+                    stickyHeader: H
                   },
-                  $
+                  O
                 ),
                 children: /* @__PURE__ */ n(
                   "tr",
                   {
-                    className: o(
+                    className: i(
                       "table-component__wrapper__table__thead__tr",
-                      O
+                      U
                     ),
-                    onClick: J,
-                    children: f.map((e, t) => /* @__PURE__ */ n(
+                    onClick: P,
+                    children: m.map((e, t) => /* @__PURE__ */ n(
                       "th",
                       {
-                        className: o(
+                        className: i(
                           "table-component__wrapper__table__thead__th",
                           {
                             bordered: p,
                             stickyLeft: b && t === 0
                           },
-                          U
+                          q
                         ),
                         style: {
                           ...e.width ? { width: e.width } : {},
@@ -136,7 +136,7 @@ const C = {
                         onClick: () => e.sorted && X(e.key),
                         children: /* @__PURE__ */ g("div", { className: "th-content", children: [
                           e.title,
-                          e.sorted && /* @__PURE__ */ n("span", { className: "sort-icon", children: (s == null ? void 0 : s.key) === e.key ? C[s.order] : C.default })
+                          e.sorted && /* @__PURE__ */ n("span", { className: "sort-icon", children: (s == null ? void 0 : s.key) === e.key ? L[s.order] : L.default })
                         ] })
                       },
                       `${e.key}-${t}`
@@ -149,16 +149,16 @@ const C = {
               "tbody",
               {
                 ref: T,
-                className: o("table-component__wrapper__table__tbody", q),
+                className: i("table-component__wrapper__table__tbody", F),
                 children: [
-                  l && u ? u.map((e) => {
+                  o && u ? u.map((e) => {
                     const t = c == null ? void 0 : c[e];
                     return t ? /* @__PURE__ */ n(
-                      z,
+                      C,
                       {
                         record: t,
-                        columns: f,
-                        rowKey: i,
+                        columns: m,
+                        rowKey: f,
                         rowClassName: x,
                         index: u.indexOf(e),
                         stickyLeft: b,
@@ -168,11 +168,11 @@ const C = {
                       e
                     ) : null;
                   }) : N == null ? void 0 : N.map((e, t) => /* @__PURE__ */ n(
-                    z,
+                    C,
                     {
                       record: e,
-                      columns: f,
-                      rowKey: i,
+                      columns: m,
+                      rowKey: f,
                       rowClassName: x,
                       index: t,
                       stickyLeft: b,
@@ -181,7 +181,7 @@ const C = {
                     v(e)
                   )),
                   R ? /* @__PURE__ */ n("div", { className: "loading_table_init", children: /* @__PURE__ */ n(ae, { className: "centered" }) }) : null,
-                  !R && P && B && /* @__PURE__ */ n("tr", { ref: B, children: /* @__PURE__ */ n("td", { colSpan: f.length, children: Q || /* @__PURE__ */ n(re, { colSpan: f.length }) }) })
+                  !R && Q && B && /* @__PURE__ */ n("tr", { ref: B, children: /* @__PURE__ */ n("td", { colSpan: m.length, children: S || /* @__PURE__ */ n(re, { colSpan: m.length }) }) })
                 ]
               }
             )
@@ -190,7 +190,7 @@ const C = {
       )
     }
   ) });
-}, _e = K(se);
+}, de = K(se);
 export {
-  _e as Table
+  de as Table
 };

package/dist/main.d.ts

@@ -1155,7 +1155,7 @@ export declare const Table: <T extends object>(props: TablesProps<T> & {
 
 declare type TablesProps<T extends object = Record<string, unknown>> = {
     columns: Column<T>[];
-    dataSource: T[];
+    dataSource?: T[];
     rowKey: keyof T | ((record: T) => string);
     tableClassName?: string;
     trTheadClassNames?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triafly-ui-kit",
-  "version": "1.0.42",
+  "version": "1.0.45",
   "description": "UI Kit from Triafly",
   "main": "./dist/main.js",
   "module": "./dist/main.js",

package/dist/styles/_mixins.scss

@@ -1,22 +0,0 @@
-@mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
-    background-color: $bg-color;
-    padding: $padding;
-    border-radius: 16px;
-  }
-  
-  @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
-    background-color: transparent !important;
-    border: 1px solid $borderColor;
-    color: $textColor;
-    &[disabled] {
-        pointer-events: none;
-    }
-    &:hover {
-        background-color: transparent;
-        box-shadow: inset 0 0 0 1px $borderColor;
-    }
-  
-    svg * {
-        fill: $textColor;
-    }
-  }

package/dist/styles/fix.scss

@@ -1,4 +0,0 @@
-// Скрываем браузерный крестик в полях поиска
-input[type="search"]::-webkit-search-cancel-button {
-    display: none;
-}

package/dist/styles/main.scss

@@ -1,27 +0,0 @@
-@import "./reset.scss";
-@import "./variables.scss";
-@import "./fix.scss";
-@import './_mixins.scss';
-@import './typography.scss';
-
-// Пока не трогать, тестовая подсветка блоков
-// html {
-//     border: 4px solid red;
-//     padding: 1px;
-// }
-
-// body {
-//     border: 2px dashed;
-//     margin: 1px;
-// }
-
-// div {
-//     border: 1px dotted;
-//     margin: 1px;
-// }
-
-
-//layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
-.page-content {
-    border-radius: 16px;
-}

package/dist/styles/reset.scss

@@ -1,106 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-  
-    /*color: #1a2026;*/
-  }
-  
-  *,
-  *::before,
-  *::after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  
-  :focus,
-  :active {
-    outline: none;
-  }
-  
-  nav,
-  footer,
-  header,
-  aside {
-    display: block;
-  }
-  
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-  
-    font-size: 100%;
-    font-size: 14px;
-    line-height: 1;
-    -ms-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-  }
-  
-  input,
-  button,
-  textarea {
-    font-family: inherit;
-  }
-  
-  input::-ms-clear {
-    display: none;
-  }
-  
-  button {
-    cursor: pointer;
-  }
-  
-  button::-moz-focus-inner {
-    padding: 0;
-  
-    border: 0;
-  }
-  
-  a,
-  a:visited {
-    text-decoration: none;
-  }
-  
-  a:focus,
-  a:active {
-    outline: none;
-  }
-  
-  a:hover {
-    text-decoration: none;
-  }
-  
-  ul li {
-    list-style: none;
-  }
-  
-  img {
-    vertical-align: top;
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 400;
-  }
-  
-  #root {
-    background-color: var(--color-bg-island-default);
-  }
-  
-  .page-wrapper {
-    width: 100%;
-    max-width: 1920px;
-    min-height: 100vh;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-bg-island-default);
-  }

package/dist/styles/typography.scss

@@ -1,106 +0,0 @@
-$font-path: '../assets/fonts' !default; // Для работы внутри Storybook
-// Переопределяется в основном проекте через:
-// $font-path: '~triafly-ui-kit/assets/fonts';
-
-//Подключение шрифтов
-@font-face {
-  font-family: "Roboto Slab";
-  src: url("#{$font-path}/RobotoSlab-SemiBold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Regular.ttf") format("truetype");
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Semibold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Bold.ttf") format("truetype");
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Fira Code";
-  src: url("#{$font-path}/FiraCode-Regular.ttf") format("truetype");
-  font-weight: 400;
-}
-
-//Глобальные свойства шрифтов
-* {
-  font-family: "Manrope", sans-serif;
-  font-size: 14px;
-  line-height: 1.2em;
-  letter-spacing: 0.02em;
-  font-weight: 400;
-  color: var(--color-text-primary-default);
-}
-
-//Заголовки
-
-//NOTE:
-//по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
-//AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
-//как это принято общей практикой вёрстки,
-//а для указания размеров и начертания использовать миксин.
-//В противном случае основными хедерами будут h4-h8 + варнинги JSX
-
-//Дефолтные значения font-size и font-weight = 14 и 400
-//При необходимости кастомизации текста в компоненте импортируется данные миксины
-//с указанием необходимых значений согласно макету
-//TODO: подготовить переменные для стандартизаии размеров
-
-//Акцидентная гарнитура для заголовков
-@mixin accidental($size, $margin) {
-  font-family: "Roboto Slab", sans-serif;
-  font-size: $size;
-  margin: 0 0 $margin 0;
-}
-
-//Гротескная гарнитура для заголовков и регулярного текста
-@mixin grotesque($size, $weight) {
-  font-size: $size;
-  font-weight: $weight;
-}
-
-//сброс дефолтных отступов в заголовках
-@for $i from 1 through 6 {
-  h#{$i} {
-    margin: 0;
-  }
-}
-
-//Ссылки
-a {
-  color: var(--color-text-brand-default);
-  text-decoration: none;
-  &:hover {
-    color: var(--color-text-brand-hover);
-  }
-  &[href=""] {
-    //стили неактивной ссылки
-    opacity: 40%;
-    cursor: default;
-    pointer-events: none;
-    //не совсем понятно зачем она нам
-    //+ линтер неадекватно реагирует на пустой href
-    //добавить .disabled с JS-логикой?
-  }
-}
-
-//Параграфы
-
-//TODO: недостаточно кейсов в моках, запросить для уточнения
-p {
-  // font-size: 12px;
-  &:not(:last-child) {
-    margin: 0 0 8px 0;
-  }
-}

package/dist/styles/variables.scss

@@ -1,277 +0,0 @@
-:root {
-    /* Font */
-    --3afly-fonts-body: 'Manrope', sans-serif;
-    --3afly-fonts-heading: 'Roboto Slab', sans-serif;
-
-    //temp
-    --light-brand-50: #C2D0FF;
-    --dark-brand-50: #C2D0FF;
-
-    /* Primitives */
-    --dark-brand-20: #153398;
-    --dark-brand-50: #1E46CD;
-    --dark-brand-100: #5076FF;
-    --dark-brand-200: #7C98FF;
-    --dark-brand-300: #A7BBFF;
-
-    --light-brand-20: #EEF2FF;
-    --light-brand-50: #C2D0FF;
-    --light-brand-100: #2454FF;
-    --light-brand-200: #1A3AB2;
-    --light-brand-300: #0E2266;
-
-    /* Primitives - Base */
-    --base-dark: #121212;
-    --base-light: #FFFFFF;
-
-    /* Primitives - Neutral */
-    --dark-neutral-0: #121212;
-    --dark-neutral-20: #292929;
-    --dark-neutral-50: #333333;
-    --dark-neutral-100: #4D4D4D;
-    --dark-neutral-200: #6E6E6E;
-    --dark-neutral-300: #FFFFFF;
-
-    --light-neutral-0: #FFFFFF;
-    --light-neutral-20: #F6F7F8;
-    --light-neutral-50: #F1F2F4;
-    --light-neutral-100: #D2D5DA;
-    --light-neutral-200: #A5A8AC;
-    --light-neutral-300: #121212;
-
-    /* Primitives - Status */
-    --dark-green-50: #044329;
-    --dark-green-100: #12A26C;
-    --dark-green-200: #CEF8E0;
-    --dark-orange-50: #662500;
-    --dark-orange-100: #E16D00;
-    --dark-orange-200: #FFECCC;
-    --dark-red-50: #7B0000;
-    --dark-red-100: #F65843;
-    --dark-red-200: #FFEBE7;
-
-    --light-green-50: #CEF8E0;
-    --light-green-100: #15A46E;
-    --light-green-200: #06603B;
-    --light-orange-50: #FFECCC;
-    --light-orange-100: #E46F00;
-    --light-orange-200: #9E3900;
-    --light-red-50: #FFEBE7;
-    --light-red-100: #F75C46;
-    --light-red-200: #9E0000;
-
-    /* Shadows & Effects */
-    --color-fader: #12121220;
-}
-
-/* Primitives - Test Client */
-    html[data-client="test"] {
-        --light-brand-20: #F3E8FF;
-        --light-brand-50: #D8B4FE;
-        --light-brand-100: #A855F7;
-        --light-brand-200: #7E22CE;
-        --light-brand-300: #4C1D95;
-        
-        --dark-brand-20: #5B21B6;
-        --dark-brand-50: #7C3AED;
-        --dark-brand-100: #A78BFA;
-        --dark-brand-200: #C4B5FD;
-        --dark-brand-300: #DDD6FE;
-    }
-
-html[data-theme="light"] {
-    /* Light Theme */
-
-    --default-font-color: var(--base-dark);
-
-    /* Light Theme - Background */
-    --color-bg-brand-default: var(--light-brand-100);
-    --color-bg-brand-hover: var(--light-brand-200);
-    --color-bg-brand-selected: var(--light-brand-300);
-    --color-bg-brand-lightest-default: var(--light-brand-20);
-    --color-bg-brand-light-default: var(--light-brand-50);
-    --color-bg-error-default: var(--light-red-100);
-    --color-bg-error-hover: var(--light-red-200);
-    --color-bg-innerisland-default: var(--light-neutral-20);
-    --color-bg-island-default: var(--base-light);
-    --color-bg-island-disabled: var(--light-neutral-50);
-    --color-bg-island-inversed: var(--base-dark);
-    --color-bg-island-selected: var(--light-neutral-50);
-    --color-bg-page-primary-default: var(--light-neutral-50);
-    --color-bg-page-secondary-default: var(--light-neutral-0);
-    --color-bg-neutral-basic-default: var(--light-neutral-0);
-    --color-bg-neutral-lightest-default: var(--light-neutral-20);
-    --color-bg-neutral-light-default: var(--light-neutral-50);
-    --color-bg-neutral-medium-default: var(--light-neutral-100);
-    --color-bg-neutral-basic-inversed: var(--light-neutral-300);
-
-    /* Light Theme - Border */
-    --color-border-brand-default: var(--light-brand-100);
-    --color-border-error-default: var(--light-red-100);
-    --color-border-primary-default: var(--light-neutral-100);
-    --color-border-primary-hover: var(--base-dark);
-    --color-border-secondary-default: var(--light-neutral-200);
-    --color-border-secondary-hover: var(--base-dark);
-    --color-border-success-default: var(--light-green-100);
-
-    /* Light Theme - Chart */
-    --color-chart-critical: var(--light-red-100);
-    --color-chart-low: var(--light-green-100);
-    --color-chart-medium: var(--light-orange-100);
-
-    /* Light Theme - Effects */
-    --effect-shadow-drop: #12121214;
-    --effect-shadow-L: #12121208;
-    --effect-shadow-XL: #12121215;
-
-    /* Light Theme - Icon */
-    --color-icon-brand-default: var(--light-brand-100);
-    --color-icon-brand-hover: var(--light-brand-200);
-    --color-icon-error-default: var(--light-red-100);
-    --color-icon-error-hover: var(--light-red-200);
-    --color-icon-primary-default: var(--base-dark);
-    --color-icon-primary-inversed: var(--base-light);
-    --color-icon-secondary-default: var(--light-neutral-200);
-    --color-icon-secondary-hover: var(--base-dark);
-    --color-icon-success-default: var(--light-green-100);
-
-    /* Light Theme - SideMenu */
-    --color-sidemenu-bg-default: var(--base-light);
-    --color-sidemenu-bg-hover: var(--light-neutral-50);
-    --color-sidemenu-bg-selected: var(--light-brand-100);
-    --color-sidemenu-icon-default: var(--base-dark);
-    --color-sidemenu-icon-selected: var(--light-color-static);
-    --color-sidemenu-plus_button_bg-selected-hover: var(--light-brand-200);
-    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);
-    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
-    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
-    --color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);
-    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);
-    --color-sidemenu-text-default: var(--base-dark);
-    --color-sidemenu-text-selected: var(--light-color-static);
-
-    /* Light Theme - Static */
-    --dark-color-static: var(--base-dark);
-    --dark-color-static-brand: var(--dark-brand-100);
-    --light-color-static: var(--base-light);
-    --light-color-static-brand: var(--light-brand-100);
-
-    /* Light Theme - Status */
-    --color-status-error-background: var(--light-red-50);
-    --color-status-error-foreground: var(--light-red-100);
-    --color-status-success-background: var(--light-green-50);
-    --color-status-success-foreground: var(--light-green-100);
-    --color-status-warning-background: var(--light-orange-50);
-    --color-status-warning-foreground: var(--light-orange-100);
-
-    /* Light Theme - Text */
-    --color-text-brand-default: var(--light-brand-100);
-    --color-text-brand-hover: var(--light-brand-200);
-    --color-text-error-default: var(--light-red-100);
-    --color-text-primary-default: var(--base-dark);
-    --color-text-primary-inversed: var(--light-neutral-0);
-    --color-text-secondary-default: var(--light-neutral-200);
-    --color-text-success-default: var(--light-green-100);
-    --color-text-tertiary-default: var(--light-neutral-100);
-
-    /* Light Theme - Buttons */
-    --color-button-brandlight-filled-hover: var(--light-brand-50);
-}
-
-html[data-theme="dark"] {
-    /* Dark Theme */
-
-    --default-font-color: var(--base-light);
-    
-    /* Dark Theme - Background */
-    --color-bg-brand-default: var(--dark-brand-100);
-    --color-bg-brand-hover: var(--dark-brand-200);
-    --color-bg-brand-selected: var(--dark-brand-300);
-    --color-bg-brand-light-default: var(--dark-brand-50);
-    --color-bg-error-default: var(--dark-red-100);
-    --color-bg-error-hover: var(--dark-red-50);
-    --color-bg-innerisland-default: var(--dark-neutral-20);
-    --color-bg-island-default: var(--base-dark);
-    --color-bg-island-disabled: var(--dark-neutral-50);
-    --color-bg-island-inversed: var(--base-light);
-    --color-bg-island-selected: var(--dark-neutral-50);
-    --color-bg-page-default: var(--dark-neutral-50);
-    --color-bg-page-secondary-default: var(--dark-neutral-0);
-    --color-bg-page-secondary-default: var(--dark-neutral-0);
-    --color-bg-neutral-basic-default: var(--dark-neutral-20);
-    --color-bg-neutral-lightest-default: var(--dark-neutral-20);
-    --color-bg-neutral-light-default: var(--dark-neutral-50);
-    --color-bg-neutral-medium-default: var(--dark-neutral-100);
-    --color-bg-neutral-basic-inversed: var(--dark-neutral-300);
-
-    /* Dark Theme - Border */
-    --color-border-brand-default: var(--dark-brand-100);
-    --color-border-error-default: var(--dark-red-100);
-    --color-border-primary-default: var(--dark-neutral-100);
-    --color-border-primary-hover: var(--base-light);
-    --color-border-secondary-default: var(--dark-neutral-200);
-    --color-border-secondary-hover: var(--base-light);
-    --color-border-success-default: var(--dark-green-100);
-
-    /* Dark Theme - Chart */
-    --color-chart-critical: var(--dark-red-100);
-    --color-chart-low: var(--dark-green-100);
-    --color-chart-medium: var(--dark-orange-100);
-
-    /* Dark Theme - Effects */
-    --effect-shadow-drop: #12121299;
-
-    /* Dark Theme - Icon */
-    --color-icon-brand-default: var(--dark-brand-100);
-    --color-icon-brand-hover: var(--dark-brand-200); 
-    --color-icon-error-default: var(--dark-red-100);
-    --color-icon-error-hover: var(--dark-red-200);
-    --color-icon-primary-default: var(--base-light);
-    --color-icon-primary-inversed: var(--base-dark); 
-    --color-icon-secondary-default: var(--dark-neutral-200); 
-    --color-icon-secondary-hover: var(--base-light);
-    --color-icon-success-default: var(--dark-green-100);
-
-    /* Dark Theme - SideMenu */
-    --color-sidemenu-bg-default: var(--base-dark);
-    --color-sidemenu-bg-hover: var(--dark-neutral-50);
-    --color-sidemenu-bg-selected: var(--dark-brand-100);
-    --color-sidemenu-icon-default: var(--base-light);
-    --color-sidemenu-icon-selected: var(--light-color-static);
-    --color-sidemenu-plus_button_bg-selected-hover: var(--dark-brand-200);
-    --color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);
-    --color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);
-    --color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);
-    --color-sidemenu-plus_button_icon-unselected-default: var(--base-light);
-    --color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);
-    --color-sidemenu-text-default: var(--base-light);
-    --color-sidemenu-text-selected: var(--light-color-static);
-
-    /* Dark Theme - Static */
-    --dark-color-static: var(--base-dark);
-    --dark-color-static-brand: var(--dark-brand-100);
-    --light-color-static: var(--base-light);
-    --light-color-static-brand: var(--light-brand-100);
-
-    /* Dark Theme - Status */
-    --color-status-error-background: var(--dark-red-50);
-    --color-status-error-foreground: var(--dark-red-100);
-    --color-status-success-background: var(--dark-green-50);
-    --color-status-success-foreground: var(--dark-green-100);
-    --color-status-warning-background: var(--dark-orange-50);
-    --color-status-warning-foreground: var(--dark-orange-100);
-
-    /* Dark Theme - Text */
-    --color-text-brand-default: var(--dark-brand-100);
-    --color-text-brand-hover: var(--dark-brand-200);
-    --color-text-error-default: var(--dark-red-100);
-    --color-text-primary-default: var(--base-light);
-    --color-text-primary-inversed: var(--dark-neutral-0);
-    --color-text-secondary-default: var(--dark-neutral-200);
-    --color-text-success-default: var(--dark-green-100);
-    --color-text-tertiary-default: var(--dark-neutral-100);
-
-    /* Dark Theme - Buttons */
-    --color-button-brandlight-filled-hover: var(--dark-brand-50);
-}
-