From ab12e8813c4cd1422bed90129bd6b15df2c69148 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 28 Jan 2025 11:01:27 +0100
Subject: [PATCH 1/4] fix(utils/sui-theme): fix color input schema

---
 package-lock.json                             | 28 +++++++++----------
 .../src/components/atom/input/_settings.scss  |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 00010af33..fd79d13f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6408,9 +6408,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.5.tgz",
-      "integrity": "sha512-GLZPrd9ckqEBFMcVM/qRFAP0Hg3qiVEojgEFsx/N/zKXsBzbGF6z5FBDpZ0+Xhp1xr+qRZYjfGr1cWHB9oFHSA==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz",
+      "integrity": "sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==",
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -6505,9 +6505,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "22.10.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
-      "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
+      "version": "22.12.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz",
+      "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==",
       "dependencies": {
         "undici-types": "~6.20.0"
       }
@@ -8826,12 +8826,12 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
       "engines": {
-        "node": ">=18"
+        "node": ">= 0.6"
       }
     },
     "node_modules/cookie-signature": {
@@ -9848,16 +9848,16 @@
       }
     },
     "node_modules/engine.io": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.3.tgz",
-      "integrity": "sha512-2hkLItQMBkoYSagneiisupWGvsQlWXqzhSMvsjaM8GYbnfUsX7tzYQq9QARnate5LRedVTX+MbkSZAANAr3NtQ==",
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+      "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
       "dev": true,
       "dependencies": {
         "@types/cors": "^2.8.12",
         "@types/node": ">=10.0.0",
         "accepts": "~1.3.4",
         "base64id": "2.0.0",
-        "cookie": "~1.0.2",
+        "cookie": "~0.7.2",
         "cors": "~2.8.5",
         "debug": "~4.3.1",
         "engine.io-parser": "~5.2.1",
diff --git a/utils/sui-theme/src/components/atom/input/_settings.scss b/utils/sui-theme/src/components/atom/input/_settings.scss
index 58c472490..b47e5293a 100644
--- a/utils/sui-theme/src/components/atom/input/_settings.scss
+++ b/utils/sui-theme/src/components/atom/input/_settings.scss
@@ -7,7 +7,7 @@ $bd-atom-input: $bdw-s solid $c-primary !default;
 $bd-atom-input-focus: $bd-atom-input !default;
 $fz-atom-input: $fz-base !default;
 $bgc-atom-input: $c-white !default;
-$c-atom-input: initial !default;
+$c-atom-input: var(--c-base-inverse, initial) !default;
 $bd-atom-input-base: $bdw-s solid $c-gray-light !default;
 
 $bd-molecule-autosuggest-focus: $bd-atom-input !default;

From f64a53af17d2267cc8fbf609e801363498269050 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 28 Jan 2025 11:01:45 +0100
Subject: [PATCH 2/4] fix(components/atom/textarea): collor schema

---
 components/atom/textarea/src/styles/settings.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/atom/textarea/src/styles/settings.scss b/components/atom/textarea/src/styles/settings.scss
index 6fec34de5..5f2257249 100644
--- a/components/atom/textarea/src/styles/settings.scss
+++ b/components/atom/textarea/src/styles/settings.scss
@@ -13,9 +13,9 @@ $bgc-atom-textarea--disabled: $c-gray-lightest !default;
 $bd-atom-textarea: $bdw-s solid $c-gray-light !default;
 $bdrs-atom-textarea: 0 !default;
 $bd-atom-textarea--disabled: $bdw-s solid initial !default;
-$c-atom-textarea: initial !default;
+$c-atom-textarea: var(--c-base-inverse, initial) !default;
 $c-atom-textarea--disabled: $c-gray-light !default;
-$c-atom-textarea-placeholder: initial !default;
+$c-atom-textarea-placeholder: color-mix(in srgb, var(--c-base-inverse, initial) 80%, transparent) !default;
 $w-atom-textarea: 100% !default;
 $rsz-atom-textarea: auto !default;
 

From 45614b398787722c833921a28a4db90464a7bcb1 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 28 Jan 2025 11:45:19 +0100
Subject: [PATCH 3/4] docs(components/molecule/inputField): modify demo wrapper

---
 components/molecule/inputField/demo/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/molecule/inputField/demo/index.js b/components/molecule/inputField/demo/index.js
index 0e076d6a2..093f1e804 100644
--- a/components/molecule/inputField/demo/index.js
+++ b/components/molecule/inputField/demo/index.js
@@ -12,7 +12,7 @@ const darkBackground = {
 const MoleculeInputFieldWithState = withStateValue(MoleculeInputField)
 
 const Demo = () => (
-  <main>
+  <div className="sui-StudioPreview">
     <H1>Input Field</H1>
     <Paragraph>
       The InputField component is an Input component wrapped with a Field. It adds some more functionalities to a basic
@@ -35,7 +35,7 @@ const Demo = () => (
     <WithoutLabel />
     <br />
     <WithContrastLabel />
-  </main>
+  </div>
 )
 
 export default Demo

From 6e49b388b8ae9028fb44193c6043a3ac66803db4 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 28 Jan 2025 11:45:49 +0100
Subject: [PATCH 4/4] docs(components/molecule/pagination): use the
 documentation library

---
 components/molecule/pagination/demo/index.js | 69 ++++++++++----------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/components/molecule/pagination/demo/index.js b/components/molecule/pagination/demo/index.js
index 6f58a0a74..757473886 100644
--- a/components/molecule/pagination/demo/index.js
+++ b/components/molecule/pagination/demo/index.js
@@ -1,9 +1,10 @@
 /* eslint-disable react/prop-types, no-unused-vars, no-console */
 
-import MoleculePagination from 'components/molecule/pagination/src/index.js'
+import {H1, H2, H3, H4, Paragraph} from '@s-ui/documentation-library'
 
 import LayoutMediaQuery from '@s-ui/react-layout-media-query'
 
+import MoleculePagination from '../src/index.js'
 import DynamicMoleculePagination from './DynamicMoleculePagination/index.js'
 import {nextButtonIcon, prevButtonIcon} from './Icons/index.js'
 
@@ -40,18 +41,16 @@ const Demo = () => {
   return (
     <div className="sui-StudioPreview">
       <div className="sui-StudioPreview-content sui-StudioDemo-preview">
-        <h1>Pagination</h1>
-        <h2>Size</h2>
+        <H1>Pagination</H1>
+        <H2>Size</H2>
         <div className={CLASS_DEMO_SECTION}>
-          <h3>Small</h3>
+          <H3>Small</H3>
           <MoleculePagination totalPages={25} page={17} size="small" />
-          <h3>Large</h3>
+          <H3>Large</H3>
           <MoleculePagination totalPages={25} page={17} />
         </div>
 
-        <h2>
-          Responsive <code>w/ LayoutMediaQuery</code>
-        </h2>
+        <H2>Responsive with LayoutMediaQuery</H2>
         <div className={CLASS_DEMO_SECTION_RESPONSIVE}>
           <LayoutMediaQuery>
             {({S, M}) =>
@@ -64,43 +63,43 @@ const Demo = () => {
           </LayoutMediaQuery>
         </div>
 
-        <h2>Dynamic</h2>
+        <H2>Dynamic</H2>
         <div className={CLASS_DEMO_SECTION}>
-          <h3>Extended Version</h3>
+          <H3>Extended Version</H3>
           <DynamicMoleculePagination totalPages={25} page={17} />
-          <h3>Extended Version (hide Disabled)</h3>
+          <H3>Extended Version (hide Disabled)</H3>
           <DynamicMoleculePagination totalPages={25} page={17} hideDisabled />
           <h3>
             Extended Version <code>showPages=7</code>
           </h3>
           <DynamicMoleculePagination totalPages={25} page={17} showPages={7} />
-          <h3>
+          <H3>
             Extended Version <code>showEdges</code>
-          </h3>
+          </H3>
           <DynamicMoleculePagination totalPages={25} page={17} showPages={7} showEdges />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h3>Compressed Version</h3>
+          <H3>Compressed Version</H3>
           <DynamicMoleculePagination totalPages={25} page={17} compressed />
         </div>
 
-        <h2>Static</h2>
-        <h3>Extended Version</h3>
+        <H2>Static</H2>
+        <H3>Extended Version</H3>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Basic</h4>
-          <p>
+          <H4>Basic</H4>
+          <Paragraph>
             <code>totalPages=25 page=7</code>
-          </p>
+          </Paragraph>
           <MoleculePagination totalPages={25} page={7} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
           <h4>Basic with links and linkFactory</h4>
-          <p>
+          <Paragraph>
             <code>
               totalPages=25 page=7 linkFactory urlPattern="
               {`/?page=%{pageNumber}`}" renderLinks
             </code>
-          </p>
+          </Paragraph>
           <MoleculePagination
             totalPages={25}
             page={7}
@@ -110,42 +109,42 @@ const Demo = () => {
           />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>w/ Next</h4>
-          <p>
+          <H4>w/ Next</H4>
+          <Paragraph>
             <code>totalPages=25 page=7</code>
-          </p>
+          </Paragraph>
           <MoleculePagination totalPages={25} page={7} {...Icons} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>w/ Prev & Next</h4>
+          <H4>w/ Prev & Next</H4>
           <p>
             <code>totalPages=25 page=17</code>
           </p>
           <MoleculePagination totalPages={25} page={17} {...Icons} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>w/ Prev</h4>
+          <H4>w/ Prev</H4>
           <p>
             <code>totalPages=25 page=27</code>
           </p>
           <MoleculePagination totalPages={25} page={27} {...Icons} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>No Arrows</h4>
+          <H4>No Arrows</H4>
           <p>
             <code>totalPages=25 page=7</code>
           </p>
           <MoleculePagination totalPages={25} page={17} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Different Texts</h4>
+          <H4>Different Texts</H4>
           <p>
             <code>totalPages=25 page=7</code>
           </p>
           <MoleculePagination totalPages={25} page={17} {...Icons} {...Texts} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Out of range current page</h4>
+          <H4>Out of range current page</H4>
           <p>
             <code>totalPages=25 page=-2</code>
           </p>
@@ -159,7 +158,7 @@ const Demo = () => {
           <MoleculePagination totalPages={25} page={2} hideDisabled {...Icons} {...Texts} {...OnClicks} />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Show edges</h4>
+          <H4>Show edges</H4>
           <p>
             <code>totalPages=25 page=15 showEdges</code>
           </p>
@@ -175,14 +174,14 @@ const Demo = () => {
           <MoleculePagination totalPages={25} page={1} {...Icons} {...OnClicks} compressed />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>w/ Prev & Next</h4>
+          <H4>w/ Prev & Next</H4>
           <p>
             <code>totalPages=25 page=17</code>
           </p>
           <MoleculePagination totalPages={25} page={17} {...Icons} {...OnClicks} compressed />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Out of range current page</h4>
+          <H4>Out of range current page</H4>
           <p>
             <code>totalPages=25 page=27</code>
           </p>
@@ -196,21 +195,21 @@ const Demo = () => {
           <MoleculePagination totalPages={25} page={17} {...OnClicks} compressed />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Different Texts</h4>
+          <H4>Different Texts</H4>
           <p>
             <code>totalPages=25 page=17</code>
           </p>
           <MoleculePagination totalPages={25} page={17} {...Icons} {...Texts} {...OnClicks} compressed />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Hide Disabled</h4>
+          <H4>Hide Disabled</H4>
           <p>
             <code>totalPages=25 page=1</code>
           </p>
           <MoleculePagination totalPages={25} page={1} {...Icons} {...Texts} {...OnClicks} compressed hideDisabled />
         </div>
         <div className={CLASS_DEMO_SECTION}>
-          <h4>Change Navigation Buttons</h4>
+          <H4>Change Navigation Buttons</H4>
           <p>
             <code>totalPages=25 page=1</code>
           </p>