diff --git a/apps/website/global-styles.css b/apps/website/global-styles.css index 50e5f48eeb..5514bb80ee 100644 --- a/apps/website/global-styles.css +++ b/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; } diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 2f3ff87952..7b483ef335 100644 --- a/apps/website/pages/_app.tsx +++ b/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; diff --git a/apps/website/public/favicon.ico b/apps/website/public/favicon.ico deleted file mode 100644 index 718d6fea48..0000000000 Binary files a/apps/website/public/favicon.ico and /dev/null differ diff --git a/apps/website/public/vercel.svg b/apps/website/public/vercel.svg deleted file mode 100644 index fbf0e25a65..0000000000 --- a/apps/website/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/apps/website/screens/components/button/code/examples/basicUsage.ts b/apps/website/screens/components/button/code/examples/basicUsage.ts index ca89f4dcb2..b2a7315231 100644 --- a/apps/website/screens/components/button/code/examples/basicUsage.ts +++ b/apps/website/screens/components/button/code/examples/basicUsage.ts @@ -1,9 +1,14 @@ -import { DxcButton, DxcInset } from "@dxc-technology/halstack-react"; +import { DxcButton, DxcInset, HalstackThemeProvider } from "@dxc-technology/halstack-react"; const code = `() => { return ( - + + + + + + ); }`; @@ -11,6 +16,7 @@ const code = `() => { const scope = { DxcButton, DxcInset, + HalstackThemeProvider }; export default { code, scope }; diff --git a/package-lock.json b/package-lock.json index 6a0d9fd620..c7325e125f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@dxc-technology/halstack-react": "*", "@radix-ui/react-popover": "^1.0.7", "cross-env": "^7.0.3", - "next": "14.2.15", + "next": "14.2.21", "raw-loader": "^4.0.2", "react": "^18", "react-color": "^2.19.3", @@ -3717,9 +3717,10 @@ } }, "node_modules/@next/env": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.15.tgz", - "integrity": "sha512-S1qaj25Wru2dUpcIZMjxeMVSwkt8BK4dmWHHiBuRstcIyOsMapqT4A4jSB6onvqeygkSSmOkyny9VVx8JIGamQ==" + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.21.tgz", + "integrity": "sha512-lXcwcJd5oR01tggjWJ6SrNNYFGuOOMB9c251wUNkjCpkoXOPkDeF/15c3mnVlBqrW4JJXb2kVxDFhC4GduJt2A==", + "license": "MIT" }, "node_modules/@next/eslint-plugin-next": { "version": "14.2.4", @@ -3781,12 +3782,13 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.15.tgz", - "integrity": "sha512-Rvh7KU9hOUBnZ9TJ28n2Oa7dD9cvDBKua9IKx7cfQQ0GoYUwg9ig31O2oMwH3wm+pE3IkAQ67ZobPfEgurPZIA==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.21.tgz", + "integrity": "sha512-HwEjcKsXtvszXz5q5Z7wCtrHeTTDSTgAbocz45PHMUjU3fBYInfvhR+ZhavDRUYLonm53aHZbB09QtJVJj8T7g==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "darwin" @@ -3796,12 +3798,13 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.15.tgz", - "integrity": "sha512-5TGyjFcf8ampZP3e+FyCax5zFVHi+Oe7sZyaKOngsqyaNEpOgkKB3sqmymkZfowy3ufGA/tUgDPPxpQx931lHg==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.21.tgz", + "integrity": "sha512-TSAA2ROgNzm4FhKbTbyJOBrsREOMVdDIltZ6aZiKvCi/v0UwFmwigBGeqXDA97TFMpR3LNNpw52CbVelkoQBxA==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "darwin" @@ -3811,12 +3814,13 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.15.tgz", - "integrity": "sha512-3Bwv4oc08ONiQ3FiOLKT72Q+ndEMyLNsc/D3qnLMbtUYTQAmkx9E/JRu0DBpHxNddBmNT5hxz1mYBphJ3mfrrw==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.21.tgz", + "integrity": "sha512-0Dqjn0pEUz3JG+AImpnMMW/m8hRtl1GQCNbO66V1yp6RswSTiKmnHf3pTX6xMdJYSemf3O4Q9ykiL0jymu0TuA==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -3826,12 +3830,13 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.15.tgz", - "integrity": "sha512-k5xf/tg1FBv/M4CMd8S+JL3uV9BnnRmoe7F+GWC3DxkTCD9aewFRH1s5rJ1zkzDa+Do4zyN8qD0N8c84Hu96FQ==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.21.tgz", + "integrity": "sha512-Ggfw5qnMXldscVntwnjfaQs5GbBbjioV4B4loP+bjqNEb42fzZlAaK+ldL0jm2CTJga9LynBMhekNfV8W4+HBw==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -3841,12 +3846,13 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.15.tgz", - "integrity": "sha512-kE6q38hbrRbKEkkVn62reLXhThLRh6/TvgSP56GkFNhU22TbIrQDEMrO7j0IcQHcew2wfykq8lZyHFabz0oBrA==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.21.tgz", + "integrity": "sha512-uokj0lubN1WoSa5KKdThVPRffGyiWlm/vCc/cMkWOQHw69Qt0X1o3b2PyLLx8ANqlefILZh1EdfLRz9gVpG6tg==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -3856,12 +3862,13 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.15.tgz", - "integrity": "sha512-PZ5YE9ouy/IdO7QVJeIcyLn/Rc4ml9M2G4y3kCM9MNf1YKvFY4heg3pVa/jQbMro+tP6yc4G2o9LjAz1zxD7tQ==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.21.tgz", + "integrity": "sha512-iAEBPzWNbciah4+0yI4s7Pce6BIoxTQ0AGCkxn/UBuzJFkYyJt71MadYQkjPqCQCJAFQ26sYh7MOKdU+VQFgPg==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -3871,12 +3878,13 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.15.tgz", - "integrity": "sha512-2raR16703kBvYEQD9HNLyb0/394yfqzmIeyp2nDzcPV4yPjqNUG3ohX6jX00WryXz6s1FXpVhsCo3i+g4RUX+g==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.21.tgz", + "integrity": "sha512-plykgB3vL2hB4Z32W3ktsfqyuyGAPxqwiyrAi2Mr8LlEUhNn9VgkiAl5hODSBpzIfWweX3er1f5uNpGDygfQVQ==", "cpu": [ "arm64" ], + "license": "MIT", "optional": true, "os": [ "win32" @@ -3886,12 +3894,13 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.15.tgz", - "integrity": "sha512-fyTE8cklgkyR1p03kJa5zXEaZ9El+kDNM5A+66+8evQS5e/6v0Gk28LqA0Jet8gKSOyP+OTm/tJHzMlGdQerdQ==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.21.tgz", + "integrity": "sha512-w5bacz4Vxqrh06BjWgua3Yf7EMDb8iMcVhNrNx8KnJXt8t+Uu0Zg4JHLDL/T7DkTCEEfKXO/Er1fcfWxn2xfPA==", "cpu": [ "ia32" ], + "license": "MIT", "optional": true, "os": [ "win32" @@ -3901,12 +3910,13 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.15.tgz", - "integrity": "sha512-SzqGbsLsP9OwKNUG9nekShTwhj6JSB9ZLMWQ8g1gG6hdE5gQLncbnbymrwy2yVmH9nikSLYRYxYMFu78Ggp7/g==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.21.tgz", + "integrity": "sha512-sT6+llIkzpsexGYZq8cjjthRyRGe5cJVhqh12FmlbxHqna6zsDDK8UNaV7g41T6atFHCJUPeLb3uyAwrBwy0NA==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "win32" @@ -14304,11 +14314,12 @@ "peer": true }, "node_modules/next": { - "version": "14.2.15", - "resolved": "https://registry.npmjs.org/next/-/next-14.2.15.tgz", - "integrity": "sha512-h9ctmOokpoDphRvMGnwOJAedT6zKhwqyZML9mDtspgf4Rh3Pn7UTYKqePNoDvhsWBAO5GoPNYshnAUGIazVGmw==", + "version": "14.2.21", + "resolved": "https://registry.npmjs.org/next/-/next-14.2.21.tgz", + "integrity": "sha512-rZmLwucLHr3/zfDMYbJXbw0ZeoBpirxkXuvsJbk7UPorvPYZhP7vq7aHbKnU7dQNCYIimRrbB2pp3xmf+wsYUg==", + "license": "MIT", "dependencies": { - "@next/env": "14.2.15", + "@next/env": "14.2.21", "@swc/helpers": "0.5.5", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", @@ -14323,15 +14334,15 @@ "node": ">=18.17.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "14.2.15", - "@next/swc-darwin-x64": "14.2.15", - "@next/swc-linux-arm64-gnu": "14.2.15", - "@next/swc-linux-arm64-musl": "14.2.15", - "@next/swc-linux-x64-gnu": "14.2.15", - "@next/swc-linux-x64-musl": "14.2.15", - "@next/swc-win32-arm64-msvc": "14.2.15", - "@next/swc-win32-ia32-msvc": "14.2.15", - "@next/swc-win32-x64-msvc": "14.2.15" + "@next/swc-darwin-arm64": "14.2.21", + "@next/swc-darwin-x64": "14.2.21", + "@next/swc-linux-arm64-gnu": "14.2.21", + "@next/swc-linux-arm64-musl": "14.2.21", + "@next/swc-linux-x64-gnu": "14.2.21", + "@next/swc-linux-x64-musl": "14.2.21", + "@next/swc-win32-arm64-msvc": "14.2.21", + "@next/swc-win32-ia32-msvc": "14.2.21", + "@next/swc-win32-x64-msvc": "14.2.21" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", diff --git a/packages/lib/src/HalstackThemeContext.tsx b/packages/lib/src/HalstackThemeContext.tsx new file mode 100644 index 0000000000..6b1e719c97 --- /dev/null +++ b/packages/lib/src/HalstackThemeContext.tsx @@ -0,0 +1,6 @@ +import { createContext } from "react"; + +const HalstackThemeContext = createContext(undefined); + +export default HalstackThemeContext; +export const HalstackThemeProvider = HalstackThemeContext.Provider; diff --git a/packages/lib/src/button/Button.tsx b/packages/lib/src/button/Button.tsx index c9a40f280f..cba9cc2e9d 100644 --- a/packages/lib/src/button/Button.tsx +++ b/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 (