fix: documentation theme colors (#125)

Author: danielleroux

package.json

@@ -23,9 +23,9 @@
     "@docusaurus/plugin-client-redirects": "^3.7.0",
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
-    "@siemens/ix": "~3.2.0",
+    "@siemens/ix": "0.0.0-pr-2198-20251023082407",
     "@siemens/ix-icons": "^3.0.0",
-    "@siemens/ix-react": "^3.0.0",
+    "@siemens/ix-react": "0.0.0-pr-2198-20251023082407",
     "@stackblitz/sdk": "^1.11.0",
     "prism-react-renderer": "^2.3.0",
     "prismjs": "^1.30.0",

pnpm-lock.yaml

@@ -22,14 +22,14 @@ export function CategoryButton(
 ) {
   return (
     <IxButton
-      ghost
       className={styles.CategoryButton}
       onClick={() => {
         window.location.href = props.link;
       }}
       style={{
         width: props.buttonWidth,
       }}
+      variant="tertiary"
     >
       <div className={styles.CategoryButton__Content}>
         <div className={styles.CategoryButton__Title}>{props.title}</div>

src/components/CategoryButton/index.tsx

@@ -301,7 +301,7 @@ const Icons: React.FC = () => {
               ></IxIcon>
               {iconFilter && (
                 <IxIconButton
-                  ghost
+                  variant="tertiary"
                   oval
                   iconColor="color-soft-text"
                   icon={iconClear}

src/components/IconsPreview/index.tsx

@@ -39,12 +39,12 @@ export default function UXTEndOfService() {
         </span>
       </div>
       <div className={styles.Content}>
-        <IxButton outline onClick={redirectToBlog}>
+        <IxButton variant="secondary" onClick={redirectToBlog}>
           Read more
         </IxButton>
         <IxIconButton
           icon={iconClose}
-          ghost
+          variant="tertiary"
           onClick={closeAnnouncement}
         ></IxIconButton>
       </div>

src/components/theme/UXTEndOfService/index.tsx

@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-@import '@siemens/ix/scss/mixins/input';
+@use '@siemens/ix/scss/mixins/input';
 
-@include label('');
-@include form('');
-@include element-form('');
+@include input.label('');
+@include input.form('');
+@include input.element-form('');

src/scss/components/_input.scss

@@ -44,7 +44,7 @@ body {
   --ifm-navbar-link-hover-color: var(--theme-color-dynamic);
   --ifm-menu-color-active: var(--theme-color-dynamic);
 
-  --ifm-background-color: var(--theme-color-2, red);
+  --ifm-background-color: var(--theme-color-2);
 }
 
 :root {
@@ -80,9 +80,7 @@ p {
   margin-top: 0;
 }
 
-:root[data-ix-theme],
-#__docusaurus.theme-classic-dark,
-#__docusaurus.theme-classic-light {
+[data-ix-theme] {
   --ifm-color-primary: var(--theme-color-dynamic);
   --ifm-code-font-size: 95%;
   --ifm-toc-border-color: var(--theme-color-x-weak-bdr);
@@ -92,24 +90,35 @@ p {
   --ifm-menu-color-active: var(--theme-color-dynamic);
   --ifm-menu-color: var(--theme-color-std-text);
   --ifm-background-color: var(--theme-color-1);
-
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-link-color: var(--theme-color-dynamic);
 }
 
-[data-ix-theme='brand'][data-ix-color-schema='dark'],
-#__docusaurus.theme-classic-dark {
-  --ix-docs-hero-background: var(--ifm-background-color);
-  --ix-docs-hero-tab-active: var(--ifm-background-color);
+[data-ix-theme='classic'][data-ix-color-schema='dark'] {
+  --ix-docs-hero-background: var(--theme-color-1);
+  --ix-docs-hero-tab-active: transparent;
+}
+
+[data-ix-theme='classic'][data-ix-color-schema='light'] {
+  --ix-docs-hero-background: #fff;
+  --ix-docs-hero-tab-active: transparent;
+}
+
+[data-ix-theme='brand'][data-ix-color-schema='dark'] {
+  --ix-docs-hero-background: var(--theme-color-1);
+  --ix-docs-hero-tab-active: var(--theme-color-1);
 }
 
-[data-ix-theme='brand'][data-ix-color-schema='light'],
-#__docusaurus.theme-classic-light {
-  --ix-docs-hero-background: var(--ifm-background-color);
-  --ix-docs-hero-tab-active: var(--ifm-background-color);
+[data-ix-theme='brand'][data-ix-color-schema='light'] {
+  --ix-docs-hero-background: #fff;
+  --ix-docs-hero-tab-active: #fff;
   --ifm-menu-color-active: var(--theme-color-primary);
 }
 
+#__docusaurus {
+  background: var(--ix-docs-hero-background);
+}
+
 .anchor {
   scroll-margin-top: 15rem !important;
 }

src/scss/custom.scss

@@ -11,11 +11,15 @@ export default function SiteMetadataWrapper(props: Props): JSX.Element {
     !context.siteConfig.customFields.withBrandTheme;
 
   useEffect(() => {
-    const initialVariant = document.documentElement.getAttribute('data-theme') || 'dark';
-    
+    const initialVariant =
+      document.documentElement.getAttribute('data-theme') || 'dark';
+
     const theme = isDevelopedWithoutBrandTheme ? 'classic' : 'brand';
     document.documentElement.setAttribute('data-ix-theme', theme);
-    document.documentElement.setAttribute('data-ix-color-schema', initialVariant);
+    document.documentElement.setAttribute(
+      'data-ix-color-schema',
+      initialVariant
+    );
 
     const observer = new MutationObserver(() => {
       const variant = document.documentElement.getAttribute('data-theme');
@@ -27,19 +31,8 @@ export default function SiteMetadataWrapper(props: Props): JSX.Element {
 
       document.documentElement.setAttribute('data-ix-theme', theme);
       document.documentElement.setAttribute('data-ix-color-schema', variant);
-      
-      if (isDevelopedWithoutBrandTheme) {
-        document
-          .getElementById('__docusaurus')
-          .classList.remove('theme-classic-dark');
-        document
-          .getElementById('__docusaurus')
-          .classList.remove('theme-classic-light');
-        document
-          .getElementById('__docusaurus')
-          .classList.add(`theme-classic-${variant}`);
-      }
     });
+
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['data-theme'],