New tokens arquitecture POC

apps/website/global-styles.css

@@ -12,12 +12,23 @@
 
 body {
   margin: 0;
-  font-family: Open Sans, sans-serif;
+  font-family:
+    Open Sans,
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.theme-1 {
+  --color-purple-700: #fabada;
+  --color-absolutes-hal-white: #f5f5f5;
+}
+
+.theme-2 {
+  --color-purple-700: #575757;
+  --color-absolutes-hal-white: #f5f5f5;
 }

apps/website/pages/_app.tsx

@@ -1,15 +1,26 @@
+import "../global-styles.css";
+
 import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue, HalstackProvider } from "@dxc-technology/halstack-react";
+import {
+  DxcApplicationLayout,
+  DxcTextInput,
+  DxcToastsQueue,
+  HalstackProvider,
+  setCustomTheme,
+} from "@dxc-technology/halstack-react";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
 import { LinksSectionDetails, LinksSections, themeGeneratorLinks } from "@/common/pagesList";
 import Link from "next/link";
 import StatusBadge from "@/common/StatusBadge";
-import "../global-styles.css";
+
+setCustomTheme({
+  "--color-purple-700": "#5f249f",
+});
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (_page: ReactElement) => ReactNode;

apps/website/screens/components/button/code/examples/basicUsage.ts

@@ -1,16 +1,22 @@
-import { DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+import { DxcButton, DxcInset, HalstackThemeProvider } from "@dxc-technology/halstack-react";
 
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcButton label="Submit" />
+      <HalstackThemeProvider value="theme-1">
+        <DxcButton label="Button 1" />
+      </HalstackThemeProvider>
+      <HalstackThemeProvider value="theme-2">
+        <DxcButton label="Button 2" margin={{ left: "small" }} />
+      </HalstackThemeProvider>
     </DxcInset>
   );
 }`;
 
 const scope = {
   DxcButton,
   DxcInset,
+  HalstackThemeProvider
 };
 
 export default { code, scope };

packages/lib/src/HalstackThemeContext.tsx

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+const HalstackThemeContext = createContext<string | undefined>(undefined);
+
+export default HalstackThemeContext;
+export const HalstackThemeProvider = HalstackThemeContext.Provider;

packages/lib/src/button/Button.tsx

@@ -6,6 +6,7 @@ import type ButtonPropsType from "./types";
 import DxcIcon from "../icon/Icon";
 import { Tooltip } from "../tooltip/Tooltip";
 import HalstackContext from "../HalstackContext";
+import HalstackThemeContext from "../HalstackThemeContext";
 
 const DxcButton = ({
   label = "",
@@ -22,12 +23,14 @@ const DxcButton = ({
   tabIndex = 0,
 }: ButtonPropsType): JSX.Element => {
   const colorsTheme = useContext(HalstackContext);
+  const themeClass = useContext(HalstackThemeContext);
 
   return (
     <ThemeProvider theme={colorsTheme.button}>
       <Tooltip label={title}>
         <Button
           aria-label={title}
+          className={themeClass}
           disabled={disabled}
           onClick={() => {
             onClick();
@@ -118,7 +121,7 @@ const getButtonStyles = (
     case "primary":
       switch (semantic) {
         case "default":
-          enabled = `background-color: ${theme.primaryDefaultBackgroundColor};
+          enabled = `background-color: var(--color-purple-700);
           color: ${theme.primaryDefaultFontColor};`;
           hover = `background-color: ${theme.primaryHoverDefaultBackgroundColor};`;
           active = `background-color: ${theme.primaryActiveDefaultBackgroundColor};
@@ -486,6 +489,7 @@ const LabelContainer = styled.span`
   overflow: hidden;
   text-transform: none;
   white-space: nowrap;
+  color: var(--color-absolutes-hal-white);
 `;
 
 const IconContainer = styled.div<{

packages/lib/src/common/theme.ts

@@ -0,0 +1,23 @@
+/**
+ * Set a custom theme for the Halstack components by overriding our CSS variables or by linking a custom CSS file.
+ * @param theme A record of CSS variables or a string with the URL of a CSS file path.
+ */
+export default function setCustomTheme(theme: Record<string, string> | string) {
+  if (typeof window !== "undefined") {
+    if (typeof theme === "object") {
+      const style = document.createElement("style");
+      let css = ":root {";
+      for (const [key, value] of Object.entries(theme)) {
+        css += `${key}: ${value};`;
+      }
+      css += "}";
+      style.innerHTML = css;
+      document.head.appendChild(style);
+    } else if (typeof theme === "string") {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = theme;
+      document.head.appendChild(link);
+    }
+  }
+};

packages/lib/src/index.ts

@@ -1,4 +1,5 @@
-import "./fonts.css";
+import "./styles/tokens.css";
+import "./styles/fonts.css";
 
 export { default as DxcAccordion } from "./accordion/Accordion";
 export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup";
@@ -51,4 +52,6 @@ export { default as DxcTooltip } from "./tooltip/Tooltip";
 export { default as DxcTypography } from "./typography/Typography";
 export { default as DxcWizard } from "./wizard/Wizard";
 export { default as HalstackContext, HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
+export { HalstackThemeProvider } from "./HalstackThemeContext";
 export { default as useToast } from "./toast/useToast";
+export { default as setCustomTheme } from "./common/theme";