labels
@@ -57,83 +39,6 @@ const sections = [
),
},
- {
- title: "Opinionated theme",
- content: (
- <>
-
- As explained on the{" "}
- Themes
- {" "}
- page, you can apply the opinionated theming strategy to customize the components.
-
-
- Remember that you can use the{" "}
- opinionated theme generator
- {" "}
- to help you create themes.
-
- ),
- }}
- closable={false}
- />
-
- Below is an example of customizing the colours of a DxcAccordion and a DxcTextInput:
-
-
- We create a customTheme object with as many components as we want and their respective values.
- Then we pass this object to the Halstack Provider, which wraps our components, through its theme{" "}
- property.
-
-
- ),
- },
- {
- title: "Advanced theme",
- content: (
- <>
-
- Advanced theming is the option to choose when further customization is required. To find out which use cases
- are valid for this strategy, you can refer to the{" "}
- Themes
- {" "}
- page.
-
-
- Remember that you can use the{" "}
- advanced theme generator
- {" "}
- to help you create themes.
-
- ),
- }}
- closable={false}
- />
-
-
- In the example above we have customized some of the DxcAccordion tokens. As you can see, it is
- not necessary to pass all the tokens of the component, only those that you want to change their value with
- respect to the default theme.
-
-
- ),
- },
{
title: "Localization",
content: (
diff --git a/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts b/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts
deleted file mode 100644
index 49a7702ba3..0000000000
--- a/apps/website/screens/utilities/halstack-provider/examples/advancedTheme.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { HalstackProvider, DxcTextInput, DxcInset, DxcAccordion } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const advancedTheme = {
- accordion: {
- backgroundColor: "#e8dee3",
- hoverBackgroundColor: "#e4c7d6",
- arrowColor: "#ffffff",
- disabledArrowColor: "#999999",
- assistiveTextFontSize: "1rem",
- assistiveTextFontColor: "#40182d",
- },
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- HalstackProvider,
- DxcTextInput,
- DxcInset,
- DxcAccordion,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/utilities/halstack-provider/examples/opinionatedTheme.ts b/apps/website/screens/utilities/halstack-provider/examples/opinionatedTheme.ts
deleted file mode 100644
index b7ecfba184..0000000000
--- a/apps/website/screens/utilities/halstack-provider/examples/opinionatedTheme.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { HalstackProvider, DxcTextInput, DxcInset, DxcAccordion } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const customTheme = {
- "accordion": {
- "accentColor": "#8e1e1e",
- "titleFontColor": "#8e1e1e",
- "subLabelFontColor": "#cd848d",
- "assistiveTextFontColor": "#cd848d"
- },
- textInput: {
- fontColor: "#8e1e1e",
- },
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- HalstackProvider,
- DxcTextInput,
- DxcInset,
- DxcAccordion,
-};
-
-export default { code, scope };
From 76f19d93732d29dfa3aca953ccbcc3b325ddbd7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Thu, 13 Mar 2025 14:53:18 +0100
Subject: [PATCH 03/11] More color updates to the internal components of the
site
---
.../screens/common/ComponentHeading.tsx | 6 +-
apps/website/screens/common/DocFooter.tsx | 24 +-
apps/website/screens/common/Figure.tsx | 26 +-
apps/website/screens/common/Image.tsx | 5 +-
apps/website/screens/common/JsonContainer.tsx | 24 -
apps/website/screens/common/MainContent.tsx | 6 +-
apps/website/screens/common/PageHeading.tsx | 9 +-
apps/website/screens/common/Placeholder.tsx | 20 +-
.../screens/common/QuickNavContainer.tsx | 37 +-
.../common/QuickNavContainerLayout.tsx | 6 +-
.../website/screens/common/TabsPageLayout.tsx | 11 +-
.../screens/common/componentsList.json | 4 +-
.../screens/common/sidenav/SidenavLogo.tsx | 40 +-
.../screens/common/themes/advanced-theme.json | 1293 -----------------
.../common/themes/opinionated-theme.json | 150 --
15 files changed, 73 insertions(+), 1588 deletions(-)
delete mode 100644 apps/website/screens/common/JsonContainer.tsx
delete mode 100644 apps/website/screens/common/themes/advanced-theme.json
delete mode 100644 apps/website/screens/common/themes/opinionated-theme.json
diff --git a/apps/website/screens/common/ComponentHeading.tsx b/apps/website/screens/common/ComponentHeading.tsx
index 9d744a659a..9485c4c5a5 100644
--- a/apps/website/screens/common/ComponentHeading.tsx
+++ b/apps/website/screens/common/ComponentHeading.tsx
@@ -1,9 +1,5 @@
import { DxcHeading } from "@dxc-technology/halstack-react";
-type ComponentHeadingProps = {
- name: string;
-};
-
-const ComponentHeading = ({ name }: ComponentHeadingProps) =>
@@ -40,12 +39,12 @@ const editIcon = (
);
-const DocFooter = ({ githubLink }: { githubLink: string }) => {
+export default function DocFooter({ githubLink }: { githubLink: string }) {
const { pathname } = useRouter();
const { previousLink, nextLink } = getNavigationLinks(pathname);
return (
-
+
@@ -59,7 +58,7 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => {
Report an issue on GitHub
-
{previousLink && (
@@ -85,17 +84,6 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => {
-
+
);
-};
-
-const DocFooterContainer = styled.div`
- max-width: 800px;
-`;
-
-const Separator = styled.div`
- height: 1px;
- background-color: #999999;
-`;
-
-export default DocFooter;
+}
diff --git a/apps/website/screens/common/Figure.tsx b/apps/website/screens/common/Figure.tsx
index f81e71878c..657ede0595 100644
--- a/apps/website/screens/common/Figure.tsx
+++ b/apps/website/screens/common/Figure.tsx
@@ -2,28 +2,22 @@ import styled from "styled-components";
import { DxcFlex } from "@dxc-technology/halstack-react";
import { ReactNode } from "react";
-type DocImageProps = {
- children: ReactNode;
- caption: string | ReactNode;
-};
-const Figure = ({ caption, children }: DocImageProps) => {
- return (
-
-
- {children}
- {caption}
-
-
- );
-};
-
const StyledFigure = styled.figure`
margin: 0;
padding: 0;
`;
const StyledFigcaption = styled.figcaption`
- font-size: 0.875rem;
+ font-size: var(--typography-label-m);
`;
+const Figure = ({ caption, children }: { caption: string | ReactNode; children: ReactNode }) => (
+
+
+ {children}
+ {caption}
+
+
+);
+
export default Figure;
diff --git a/apps/website/screens/common/Image.tsx b/apps/website/screens/common/Image.tsx
index 35df5c099f..801824305f 100644
--- a/apps/website/screens/common/Image.tsx
+++ b/apps/website/screens/common/Image.tsx
@@ -1,8 +1,7 @@
import NextImage from "next/image";
-const customLoader = ({ src }: { src: string }) => {
- return process.env.NODE_ENV === "production" ? src.replace("//", "/") : src;
-};
+const customLoader = ({ src }: { src: string }) =>
+ process.env.NODE_ENV === "production" ? src.replace("//", "/") : src;
type ImageProps = {
src: any;
diff --git a/apps/website/screens/common/JsonContainer.tsx b/apps/website/screens/common/JsonContainer.tsx
deleted file mode 100644
index cf92760699..0000000000
--- a/apps/website/screens/common/JsonContainer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-const StyledPreview = styled.div`
- background-color: #ffffff;
- background-image: linear-gradient(45deg, #f9f9fa 25%, transparent 25%),
- linear-gradient(135deg, #f9f9fa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f9f9fa 75%),
- linear-gradient(135deg, transparent 75%, #f9f9fa 75%);
- background-size: 20px 20px;
- background-position:
- 0px 0px,
- 10px 0px,
- 10px -10px,
- 0px 10px;
- border: 1px solid #707070;
- border-radius: 0.25rem;
- margin-bottom: 0.5rem;
- overflow: auto;
- height: 350px;
- > div {
- min-width: min-content;
- }
-`;
-
-export default StyledPreview;
diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx
index 28d4203dca..2a0981169b 100644
--- a/apps/website/screens/common/MainContent.tsx
+++ b/apps/website/screens/common/MainContent.tsx
@@ -20,7 +20,7 @@ const pathVersion =
? 0
: parseInt(process.env.NEXT_PUBLIC_SITE_VERSION.split(".")[0]!, 10);
-const MainContent = ({ children }: { children: ReactNode }) => {
+export default function MainContent({ children }: { children: ReactNode }) {
const toast = useToast();
const [latestRelease, setLatestRelease] = useState(null);
@@ -56,6 +56,4 @@ const MainContent = ({ children }: { children: ReactNode }) => {
}, [latestRelease, toast]);
return {children} ;
-};
-
-export default MainContent;
+}
diff --git a/apps/website/screens/common/PageHeading.tsx b/apps/website/screens/common/PageHeading.tsx
index 5303b64e6e..b601637a33 100644
--- a/apps/website/screens/common/PageHeading.tsx
+++ b/apps/website/screens/common/PageHeading.tsx
@@ -1,12 +1,5 @@
import { ReactNode } from "react";
-import styled from "styled-components";
-const PageHeading = ({ children }: { children: ReactNode }) => {
- return {children} ;
-};
-
-const PageHeadingContainer = styled.div`
- max-width: 800px;
-`;
+const PageHeading = ({ children }: { children: ReactNode }) => {children}
;
export default PageHeading;
diff --git a/apps/website/screens/common/Placeholder.tsx b/apps/website/screens/common/Placeholder.tsx
index aabcc8b6db..baa70aacd3 100644
--- a/apps/website/screens/common/Placeholder.tsx
+++ b/apps/website/screens/common/Placeholder.tsx
@@ -5,20 +5,18 @@ import styled from "styled-components";
* Bleed, Flex, Grid and Inset
*/
const Placeholder = styled.div<{ color?: string; width?: string; height?: string }>`
+ background-color: ${({ color }) => color ?? "var(--color-bg-primary-light)"};
+ border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-light);
+ border-radius: var(--border-radius-m);
box-sizing: border-box;
+ color: var(--color-fg-primary-strong);
+ font-family: var(--typography-font-family);
+ font-size: var(--typography-label-xl);
+ font-weight: var(--typography-label-semibold);
+ ${({ height }) => height && `height: ${height}`};
+ padding: var(--spacing-padding-m);
text-align: center;
${({ width }) => width && `width: ${width}`};
- ${({ height }) => height && `height: ${height}`};
- padding: 1rem;
- border: 1px solid #a46ede;
- border-radius: 0.5rem;
- background-color: ${({ color }) => color ?? "#e5d5f6"};
- font-family:
- Open Sans,
- sans-serif;
- font-size: 1.125rem;
- font-weight: bold;
- color: #7d2fd0;
`;
export default Placeholder;
diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx
index 1a7e1f3f82..5e62e6175a 100644
--- a/apps/website/screens/common/QuickNavContainer.tsx
+++ b/apps/website/screens/common/QuickNavContainer.tsx
@@ -29,24 +29,6 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
return linksList;
};
-const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
-
-
- {sections.map((section) => (
-
- ))}
-
-
-
-
-);
const MainContainer = styled.div`
display: grid;
@@ -76,4 +58,23 @@ const QuickNavContainer = styled.div`
}
`;
+const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes) => (
+
+
+ {sections.map((section) => (
+
+ ))}
+
+
+
+
+);
+
export default DxcQuickNavContainer;
diff --git a/apps/website/screens/common/QuickNavContainerLayout.tsx b/apps/website/screens/common/QuickNavContainerLayout.tsx
index c07dd5626a..4fd251bc38 100644
--- a/apps/website/screens/common/QuickNavContainerLayout.tsx
+++ b/apps/website/screens/common/QuickNavContainerLayout.tsx
@@ -1,9 +1,5 @@
import { ReactNode } from "react";
-type QuickNavContainerLayoutProps = {
- children: ReactNode;
-};
-
-const QuickNavContainerLayout = ({ children }: QuickNavContainerLayoutProps) => <>{children};
+const QuickNavContainerLayout = ({ children }: { children: ReactNode }) => <>{children};
export default QuickNavContainerLayout;
diff --git a/apps/website/screens/common/TabsPageLayout.tsx b/apps/website/screens/common/TabsPageLayout.tsx
index bf8c9ce3f6..5fa48e9092 100644
--- a/apps/website/screens/common/TabsPageLayout.tsx
+++ b/apps/website/screens/common/TabsPageLayout.tsx
@@ -2,13 +2,8 @@ import { useRouter } from "next/router";
import { DxcNavTabs } from "@dxc-technology/halstack-react";
import Link from "next/link";
-type TabsPageLayoutProps = {
- tabs: { label: string; path: string }[];
-};
-
-const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
+export default function TabsPageLayout({ tabs }: { tabs: { label: string; path: string }[] }) {
const router = useRouter();
-
return (
{tabs.map((tab, index) => (
@@ -18,6 +13,4 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
))}
);
-};
-
-export default TabsPageLayout;
+}
diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json
index a1cd04831b..4d2b36ab4f 100644
--- a/apps/website/screens/common/componentsList.json
+++ b/apps/website/screens/common/componentsList.json
@@ -1,6 +1,6 @@
[
{ "label": "Accordion", "path": "/components/accordion", "status": "stable" },
- { "label": "Alert", "path": "/components/alert", "status": "new" },
+ { "label": "Alert", "path": "/components/alert", "status": "stable" },
{
"label": "Application layout",
"path": "/components/application-layout",
@@ -114,7 +114,7 @@
"status": "stable"
},
{ "label": "Textarea", "path": "/components/textarea", "status": "stable" },
- { "label": "Toast", "path": "/components/toast", "status": "new" },
+ { "label": "Toast", "path": "/components/toast", "status": "stable" },
{
"label": "Toggle group",
"path": "/components/toggle-group",
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
index c41a6197ed..b071c9c10c 100644
--- a/apps/website/screens/common/sidenav/SidenavLogo.tsx
+++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -3,9 +3,24 @@ import Image from "@/common/Image";
import halstackLogo from "@/common/images/halstack_logo.svg";
import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-type SidenavLogoProps = { subtitle?: string };
+const LogoContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: var(--spacing-padding-none) var(--spacing-padding-l);
+`;
-const SidenavLogo = ({ subtitle = "Design System" }: SidenavLogoProps): JSX.Element => {
+const Title = styled.div`
+ color: var(--color-fg-primary-strong);
+ font-size: var(--typography-title-l);
+`;
+
+const Subtitle = styled.div`
+ color: var(--color-fg-neutral-strongest);
+ font-size: var(--typography-title-m);
+ margin-left: var(--spacing-padding-s);
+`;
+
+export default function SidenavLogo({ subtitle = "Design System" }: { subtitle?: string }) {
const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION;
const isDev = process.env.NODE_ENV === "development";
@@ -25,23 +40,4 @@ const SidenavLogo = ({ subtitle = "Design System" }: SidenavLogoProps): JSX.Elem
/>
);
-};
-
-const LogoContainer = styled.div`
- margin: 0 24px;
- display: flex;
- flex-direction: column;
-`;
-
-const Title = styled.div`
- font-size: 1.3rem;
- color: #5f249f;
-`;
-
-const Subtitle = styled.div`
- font-size: 1rem;
- color: #4d4d4d;
- margin-left: 0.8rem;
-`;
-
-export default SidenavLogo;
+}
diff --git a/apps/website/screens/common/themes/advanced-theme.json b/apps/website/screens/common/themes/advanced-theme.json
deleted file mode 100644
index e489c9afaf..0000000000
--- a/apps/website/screens/common/themes/advanced-theme.json
+++ /dev/null
@@ -1,1293 +0,0 @@
-{
- "accordion": {
- "backgroundColor": "#ffffff",
- "hoverBackgroundColor": "#f2eafa",
- "focusBackgroundColor": "transparent",
- "activeBackgroundColor": "#f2eafa",
- "arrowColor": "#5f249f",
- "disabledArrowColor": "#999999",
- "subLabelFontFamily": "Open Sans, sans-serif",
- "subLabelFontSize": "0.75rem",
- "subLabelFontWeight": "400",
- "subLabelFontStyle": "normal",
- "subLabelFontColor": "#666666",
- "disabledSubLabelFontColor": "#999999",
- "assistiveTextFontFamily": "Open Sans, sans-serif",
- "assistiveTextFontSize": "0.75rem",
- "assistiveTextFontWeight": "400",
- "assistiveTextFontStyle": "normal",
- "assistiveTextFontColor": "#666666",
- "disabledAssistiveTextFontColor": "#999999",
- "titleLabelFontFamily": "Open Sans, sans-serif",
- "titleLabelFontSize": "1rem",
- "titleLabelFontWeight": "400",
- "titleLabelFontStyle": "normal",
- "titleLabelFontColor": "#333333",
- "disabledTitleLabelFontColor": "#999999",
- "focusBorderColor": "#0095ff",
- "focusBorderStyle": "solid",
- "focusBorderThickness": "2px",
- "borderRadius": "4px",
- "boxShadowOffsetX": "0px",
- "boxShadowOffsetY": "12px",
- "boxShadowBlur": "12px",
- "boxShadowSpread": "0px",
- "boxShadowColor": "#0000001a",
- "iconColor": "#5f249f",
- "disabledIconColor": "#999999",
- "iconSize": "24px",
- "accordionSeparatorBorderColor": "#e6e6e6",
- "accordionSeparatorBorderThickness": "1px",
- "accordionSeparatorBorderStyle": "solid"
- },
- "alert": {
- "overlayColor": "#000000b3",
- "modalPaddingTop": "1.5rem",
- "modalPaddingRight": "1.5rem",
- "modalPaddingBottom": "1.5rem",
- "modalPaddingLeft": "1.5rem",
- "paddingTop": "0.5rem",
- "paddingRight": "0.75rem",
- "paddingBottom": "0.5rem",
- "paddingLeft": "0.75rem",
- "borderRadius": "0.25rem",
- "boxShadowOffsetX": "1px",
- "boxShadowOffsetY": "4px",
- "boxShadowBlur": "6px",
- "boxShadowSpreadRadius": "0px",
- "boxShadowColor": "",
- "modalBackgroundColor": "#ffffff",
- "infoBackgroundColor": "#e6f4ff",
- "successBackgroundColor": "#eafaef",
- "warningBackgroundColor": "#fef9e6",
- "errorBackgroundColor": "#ffe6e9",
- "iconPaddingRight": "0.5rem",
- "infoIconColor": "#0086e6",
- "successIconColor": "#24a148",
- "warningIconColor": "#c59f07",
- "errorIconColor": "#d0011b",
- "iconSize": "24px",
- "titleFontFamily": "Open Sans, sans-serif",
- "titleFontColor": "#333333",
- "titleFontSize": "0.875rem",
- "modalTitleFontSize": "1.5rem",
- "titleFontStyle": "normal",
- "titleFontWeight": "bold",
- "titlePaddingRight": "0.25rem",
- "messageFontFamily": "Open Sans, sans-serif",
- "messageFontColor": "#333333",
- "messageFontSize": "0.875rem",
- "messageFontStyle": "normal",
- "messageFontWeight": "400",
- "messagePaddingLeft": "0.25rem",
- "messagePaddingRight": "0.75rem",
- "navigationTextFontFamily": "Open Sans, sans-serif",
- "navigationTextFontSize": "0.75rem",
- "navigationTextFontStyle": "normal",
- "navigationTextFontWeight": "400",
- "navigationTextFontColor": "#000000"
- },
- "bulletedList": {
- "fontColor": "#000000",
- "bulletIconHeight": "1.5rem",
- "bulletIconWidth": "1.5rem",
- "bulletHeight": "5px",
- "bulletWidth": "5px",
- "bulletMarginRight": "0.5rem"
- },
- "button": {
- "labelFontLineHeight": "1.5em",
- "labelLetterSpacing": "0.025em",
- "paddingSmallTop": "0rem",
- "paddingSmallLeft": "0.5rem",
- "paddingSmallBottom": "0rem",
- "paddingSmallRight": "0.5rem",
- "paddingSmallOnlyIconTop": "0rem",
- "paddingSmallOnlyIconLeft": "0.25rem",
- "paddingSmallOnlyIconBottom": "0rem",
- "paddingSmallOnlyIconRight": "0.25rem",
- "paddingMediumTop": "0rem",
- "paddingMediumLeft": "0.5rem",
- "paddingMediumBottom": "0rem",
- "paddingMediumRight": "0.5rem",
- "paddingMediumOnlyIconTop": "0rem",
- "paddingMediumOnlyIconLeft": "0.5rem",
- "paddingMediumOnlyIconBottom": "0rem",
- "paddingMediumOnlyIconRight": "0.5rem",
- "paddingLargeTop": "0rem",
- "paddingLargeLeft": "1rem",
- "paddingLargeBottom": "0rem",
- "paddingLargeRight": "1rem",
- "paddingLargeOnlyIconTop": "0rem",
- "paddingLargeOnlyIconLeft": "0.5rem",
- "paddingLargeOnlyIconBottom": "0rem",
- "paddingLargeOnlyIconRight": "0.5rem",
- "focusBorderColor": "#33aaff",
- "primaryDefaultBackgroundColor": "#5f249f",
- "primaryErrorBackgroundColor": "#d0011b",
- "primaryWarningBackgroundColor": "#c26c0a",
- "primarySuccessBackgroundColor": "#24a148",
- "primaryInfoBackgroundColor": "#0086e6",
- "primaryDefaultFontColor": "#ffffff",
- "primaryErrorFontColor": "#ffffff",
- "primaryWarningFontColor": "#ffffff",
- "primarySuccessFontColor": "#ffffff",
- "primaryInfoFontColor": "#ffffff",
- "primaryHoverDefaultBackgroundColor": "#4b1c7d",
- "primaryHoverErrorBackgroundColor": "#980115",
- "primaryHoverWarningBackgroundColor": "#915108",
- "primaryHoverSuccessBackgroundColor": "#1c7d38",
- "primaryHoverInfoBackgroundColor": "#0067b3",
- "primaryActiveDefaultBackgroundColor": "#321353",
- "primaryActiveErrorBackgroundColor": "#65010e",
- "primaryActiveWarningBackgroundColor": "#613605",
- "primaryActiveSuccessBackgroundColor": "#135325",
- "primaryActiveInfoBackgroundColor": "#003c66",
- "primaryDisabledDefaultBackgroundColor": "#f2eafa",
- "primaryDisabledErrorBackgroundColor": "#ffe6e9",
- "primaryDisabledWarningBackgroundColor": "#fef3e7",
- "primaryDisabledSuccessBackgroundColor": "#eafaef",
- "primaryDisabledInfoBackgroundColor": "#e6f4ff",
- "primaryDisabledDefaultFontColor": "#cbacec",
- "primaryDisabledErrorFontColor": "#fe9aa7",
- "primaryDisabledWarningFontColor": "#facf9e",
- "primaryDisabledSuccessFontColor": "#acecbe",
- "primaryDisabledInfoFontColor": "#99d5ff",
- "primaryBorderThickness": "0px",
- "primaryBorderStyle": "none",
- "primaryBorderRadius": "0.25rem",
- "primaryFontFamily": "Open Sans, sans-serif",
- "primarySmallFontSize": "0.875rem",
- "primaryMediumFontSize": "0.875rem",
- "primaryLargeFontSize": "1rem",
- "primaryFontWeight": "600",
- "secondaryDefaultBackgroundColor": "transparent",
- "secondaryErrorBackgroundColor": "transparent",
- "secondaryWarningBackgroundColor": "transparent",
- "secondarySuccessBackgroundColor": "transparent",
- "secondaryInfoBackgroundColor": "transparent",
- "secondaryDefaultFontColor": "#5f249f",
- "secondaryErrorFontColor": "#d0011b",
- "secondaryWarningFontColor": "#c26c0a",
- "secondarySuccessFontColor": "#24a148",
- "secondaryInfoFontColor": "#0086e6",
- "secondaryDefaultBorderColor": "#5f249f",
- "secondaryErrorBorderColor": "#d0011b",
- "secondaryWarningBorderColor": "#c26c0a",
- "secondarySuccessBorderColor": "#24a148",
- "secondaryInfoBorderColor": "#0086e6",
- "secondaryHoverDefaultBackgroundColor": "#5f249f",
- "secondaryHoverErrorBackgroundColor": "#d0011b",
- "secondaryHoverWarningBackgroundColor": "#c26c0a",
- "secondaryHoverSuccessBackgroundColor": "#24a148",
- "secondaryHoverInfoBackgroundColor": "#0086e6",
- "secondaryHoverDefaultFontColor": "#ffffff",
- "secondaryHoverErrorFontColor": "#ffffff",
- "secondaryHoverWarningFontColor": "#ffffff",
- "secondaryHoverSuccessFontColor": "#ffffff",
- "secondaryHoverInfoFontColor": "#ffffff",
- "secondaryActiveDefaultBackgroundColor": "#4b1c7d",
- "secondaryActiveErrorBackgroundColor": "#980115",
- "secondaryActiveWarningBackgroundColor": "#915108",
- "secondaryActiveSuccessBackgroundColor": "#1c7d38",
- "secondaryActiveInfoBackgroundColor": "#0067b3",
- "secondaryDisabledDefaultBackgroundColor": "transparent",
- "secondaryDisabledErrorBackgroundColor": "transparent",
- "secondaryDisabledWarningBackgroundColor": "transparent",
- "secondaryDisabledSuccessBackgroundColor": "transparent",
- "secondaryDisabledInfoBackgroundColor": "transparent",
- "secondaryDisabledDefaultFontColor": "#cbacec",
- "secondaryDisabledErrorFontColor": "#fe9aa7",
- "secondaryDisabledWarningFontColor": "#facf9e",
- "secondaryDisabledSuccessFontColor": "#acecbe",
- "secondaryDisabledInfoFontColor": "#99d5ff",
- "secondaryDisabledDefaultBorderColor": "#cbacec",
- "secondaryDisabledErrorBorderColor": "#fe9aa7",
- "secondaryDisabledWarningBorderColor": "#facf9e",
- "secondaryDisabledSuccessBorderColor": "#acecbe",
- "secondaryDisabledInfoBorderColor": "#99d5ff",
- "secondaryBorderThickness": "1px",
- "secondaryBorderStyle": "solid",
- "secondaryBorderRadius": "0.25rem",
- "secondaryFontFamily": "Open Sans, sans-serif",
- "secondarySmallFontSize": "0.875rem",
- "secondaryMediumFontSize": "0.875rem",
- "secondaryLargeFontSize": "1rem",
- "secondaryFontWeight": "600",
- "tertiaryDefaultBackgroundColor": "transparent",
- "tertiaryErrorBackgroundColor": "transparent",
- "tertiaryWarningBackgroundColor": "transparent",
- "tertiarySuccessBackgroundColor": "transparent",
- "tertiaryInfoBackgroundColor": "transparent",
- "tertiaryDefaultFontColor": "#5f249f",
- "tertiaryErrorFontColor": "#d0011b",
- "tertiaryWarningFontColor": "#c26c0a",
- "tertiarySuccessFontColor": "#24a148",
- "tertiaryInfoFontColor": "#0086e6",
- "tertiaryHoverDefaultBackgroundColor": "#f2eafa",
- "tertiaryHoverErrorBackgroundColor": "#ffe6e9",
- "tertiaryHoverWarningBackgroundColor": "#fef3e7",
- "tertiaryHoverSuccessBackgroundColor": "#eafaef",
- "tertiaryHoverInfoBackgroundColor": "#e6f4ff",
- "tertiaryActiveDefaultBackgroundColor": "#e5d5f6",
- "tertiaryActiveErrorBackgroundColor": "#ffccd3",
- "tertiaryActiveWarningBackgroundColor": "#fce7cf",
- "tertiaryActiveSuccessBackgroundColor": "#d5f6df",
- "tertiaryActiveInfoBackgroundColor": "#cceaff",
- "tertiaryDisabledDefaultBackgroundColor": "transparent",
- "tertiaryDisabledErrorBackgroundColor": "transparent",
- "tertiaryDisabledWarningBackgroundColor": "transparent",
- "tertiaryDisabledSuccessBackgroundColor": "transparent",
- "tertiaryDisabledInfoBackgroundColor": "transparent",
- "tertiaryDisabledDefaultFontColor": "#cbacec",
- "tertiaryDisabledErrorFontColor": "#fe9aa7",
- "tertiaryDisabledWarningFontColor": "#facf9e",
- "tertiaryDisabledSuccessFontColor": "#acecbe",
- "tertiaryDisabledInfoFontColor": "#99d5ff",
- "tertiaryBorderThickness": "0px",
- "tertiaryBorderStyle": "none",
- "tertiaryBorderRadius": "0.25rem",
- "tertiaryFontFamily": "Open Sans, sans-serif",
- "tertiarySmallFontSize": "0.875rem",
- "tertiaryMediumFontSize": "0.875rem",
- "tertiaryLargeFontSize": "1rem",
- "tertiaryFontWeight": "600"
- },
- "card": {
- "height": "220px",
- "width": "400px"
- },
- "checkbox": {
- "backgroundColorChecked": "#0067b3",
- "hoverBackgroundColorChecked": "#003c66",
- "disabledBackgroundColorChecked": "#999999",
- "readOnlyBackgroundColorChecked": "#999999",
- "hoverReadOnlyBackgroundColorChecked": "#808080",
- "borderColor": "#0067b3",
- "hoverBorderColor": "#003c66",
- "disabledBorderColor": "#999999",
- "readOnlyBorderColor": "#999999",
- "hoverReadOnlyBorderColor": "#808080",
- "checkColor": "#ffffff",
- "disabledCheckColor": "#ffffff",
- "readOnlyCheckColor": "#ffffff",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": "400",
- "fontColor": "#000000",
- "disabledFontColor": "#999999",
- "focusColor": "#0095ff",
- "checkLabelSpacing": "0.5rem"
- },
- "chip": {
- "backgroundColor": "#e6e6e6",
- "disabledBackgroundColor": "#f2f2f2",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
- "fontStyle": "normal",
- "fontWeight": "400",
- "fontColor": "#000000",
- "disabledFontColor": "#999999",
- "borderColor": "transparent",
- "borderRadius": "80px",
- "borderThickness": "0px",
- "borderStyle": "solid",
- "contentPaddingLeft": "1rem",
- "contentPaddingRight": "1rem",
- "contentPaddingTop": "0rem",
- "contentPaddingBottom": "0rem",
- "iconSize": "24px",
- "iconSpacing": "0.5rem",
- "iconColor": "#4d4d4d",
- "hoverIconColor": "#333333",
- "activeIconColor": "#000000",
- "disabledIconColor": "#999999",
- "focusColor": "#0095ff",
- "focusBorderStyle": "solid",
- "focusBorderThickness": "2px",
- "focusBorderRadius": "0.25rem"
- },
- "contextualMenu": {
- "fontFamily": "Open Sans, sans-serif",
- "backgroundColor": "#ffffff",
- "borderColor": "#e6e6e6",
- "menuItemFontColor": "#333333",
- "menuItemFontSize": "0.875rem",
- "menuItemFontStyle": "normal",
- "menuItemFontWeight": "400",
- "menuItemLineHeight": "24px",
- "hoverMenuItemBackgroundColor": "#f2f2f2",
- "activeMenuItemBackgroundColor": "#f2f2f2",
- "selectedMenuItemBackgroundColor": "#f2eafa",
- "hoverSelectedMenuItemBackgroundColor": "#e5d5f6",
- "activeSelectedMenuItemBackgroundColor": "#e5d5f6",
- "selectedMenuItemFontWeight": "600",
- "sectionTitleFontColor": "#333333",
- "sectionTitleFontSize": "1rem",
- "sectionTitleFontStyle": "normal",
- "sectionTitleFontWeight": "600",
- "sectionTitleLineHeight": "24px",
- "iconColor": "#333333",
- "iconSize": "16px"
- },
- "dataGrid": {
- "rowSeparatorThickness": "1px",
- "rowSeparatorStyle": "solid",
- "rowSeparatorColor": "#cccccc",
- "dataBackgroundColor": "#ffffff",
- "dataFontFamily": "Open Sans, sans-serif",
- "dataFontSize": "0.875rem",
- "dataFontStyle": "normal",
- "dataFontWeight": "400",
- "dataFontColor": "#000000",
- "dataFontTextTransform": "none",
- "dataPaddingRight": "0.5rem",
- "dataPaddingLeft": "0.5rem",
- "dataRowHeight": "36",
- "dataTextLineHeight": "normal",
- "headerBackgroundColor": "#5f249f",
- "headerBorderRadius": "4px",
- "headerFontFamily": "Open Sans, sans-serif",
- "headerFontSize": "0.875rem",
- "headerFontStyle": "normal",
- "headerFontWeight": "bold",
- "headerFontColor": "#ffffff",
- "headerFontTextTransform": "none",
- "headerPaddingRight": "0.5rem",
- "headerPaddingLeft": "0.5rem",
- "headerRowHeight": "36",
- "headerTextLineHeight": "normal",
- "headerCheckboxBackgroundColorChecked": "#ffffff",
- "headerCheckboxHoverBackgroundColorChecked": "#e6e6e6",
- "headerCheckboxBorderColor": "#ffffff",
- "headerCheckboxHoverBorderColor": "#ffffff",
- "headerCheckboxCheckColor": "#5f249f",
- "summaryRowHeight": "36",
- "focusColor": "#0095ff",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#cccccc"
- },
- "dateInput": {
- "pickerBackgroundColor": "#ffffff",
- "pickerFontColor": "#000000",
- "pickerBorderColor": "#bfbfbf",
- "pickerSelectedBackgroundColor": "#5f249f",
- "pickerSelectedFontColor": "#ffffff",
- "pickerHoverBackgroundColor": "#e5d5f6",
- "pickerHoverFontColor": "#000000",
- "pickerActiveBackgroundColor": "#4b1c7d",
- "pickerActiveFontColor": "#ffffff",
- "pickerNonCurrentMonthFontColor": "#999999",
- "pickerCurrentDateBorderColor": "#cbacec",
- "pickerCurrentDateFontColor": "#000000",
- "pickerCurrentYearFontColor": "#5f249f",
- "pickerHeaderBackgroundColor": "transparent",
- "pickerHeaderFontColor": "#000000",
- "pickerHeaderHoverBackgroundColor": "#e5d5f6",
- "pickerHeaderHoverFontColor": "#000000",
- "pickerHeaderActiveBackgroundColor": "#4b1c7d",
- "pickerHeaderActiveFontColor": "#ffffff",
- "pickerFocusColor": "#0095ff",
- "pickerBorderWidth": "1px",
- "pickerBorderStyle": "solid",
- "pickerFocusWidth": "2px",
- "pickerCurrentDateBorderWidth": "1px",
- "pickerFontFamily": "Open Sans, sans-serif",
- "pickerFontSize": "0.875rem",
- "pickerFontWeight": "400",
- "pickerInteractedYearFontSize": "1.5rem",
- "pickerHeaderFontSize": "0.875rem"
- },
- "dialog": {
- "overlayColor": "#000000b3",
- "backgroundColor": "#ffffff",
- "closeIconBackgroundColor": "transparent",
- "closeIconColor": "#000000",
- "boxShadowOffsetX": "0px",
- "boxShadowOffsetY": "1px",
- "boxShadowBlur": "3px",
- "boxShadowColor": "#00000033"
- },
- "dropdown": {
- "buttonBackgroundColor": "#ffffff",
- "hoverButtonBackgroundColor": "#f2f2f2",
- "activeButtonBackgroundColor": "#cccccc",
- "buttonFontFamily": "Open Sans, sans-serif",
- "buttonFontSize": "1rem",
- "buttonFontStyle": "normal",
- "buttonFontWeight": "400",
- "buttonFontColor": "#000000",
- "buttonIconSize": "20px",
- "buttonIconSpacing": "10px",
- "buttonIconColor": "#000000",
- "buttonPaddingTop": "0rem",
- "buttonPaddingBottom": "0rem",
- "buttonPaddingLeft": "1rem",
- "buttonPaddingRight": "1rem",
- "buttonHeight": "40px",
- "buttonBorderRadius": "4px",
- "buttonBorderStyle": "none",
- "buttonBorderThickness": "0px",
- "buttonBorderColor": "transparent",
- "disabledColor": "#999999",
- "disabledButtonBackgroundColor": "transparent",
- "disabledButtonBorderColor": "transparent",
- "optionBackgroundColor": "#ffffff",
- "hoverOptionBackgroundColor": "#f2f2f2",
- "activeOptionBackgroundColor": "#cccccc",
- "optionFontFamily": "Open Sans, sans-serif",
- "optionFontSize": "1rem",
- "optionFontStyle": "normal",
- "optionFontWeight": "400",
- "optionFontColor": "#000000",
- "optionIconSize": "20px",
- "optionIconSpacing": "10px",
- "optionIconColor": "#000000",
- "optionPaddingTop": "6px",
- "optionPaddingBottom": "6px",
- "optionPaddingLeft": "1rem",
- "optionPaddingRight": "1rem",
- "caretIconSize": "24px",
- "caretIconColor": "#000000",
- "caretIconSpacing": "0.75rem",
- "borderRadius": "4px",
- "borderStyle": "none",
- "borderThickness": "0px",
- "borderColor": "transparent",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#cccccc",
- "focusColor": "#0095ff"
- },
- "fileInput": {
- "dropBorderColor": "#000000",
- "fileItemBorderColor": "#cccccc",
- "fileNameFontColor": "#000000",
- "labelFontColor": "#000000",
- "helperTextFontColor": "#000000",
- "dropLabelFontColor": "#000000",
- "disabledLabelFontColor": "#999999",
- "disabledHelperTextFontColor": "#999999",
- "disabledDropLabelFontColor": "#999999",
- "focusDropBorderColor": "#0095ff",
- "disabledDropBorderColor": "#999999",
- "dragoverDropBackgroundColor": "#f5fbff",
- "errorFileItemBorderColor": "#d0011b",
- "errorFileItemBackgroundColor": "#fff5f6",
- "errorFilePreviewBackgroundColor": "#ffccd3",
- "errorFileItemIconColor": "#d0011b",
- "fileItemIconBackgroundColor": "#f2f2f2",
- "deleteFileItemColor": "#000000",
- "errorMessageFontColor": "#d0011b",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "0.875rem",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "fileItemFontFamily": "Open Sans, sans-serif",
- "fileItemFontSize": "0.875rem",
- "fileItemFontWeight": "400",
- "fileItemLineHeight": "1.5em",
- "helperTextFontFamily": "Open Sans, sans-serif",
- "helperTextFontSize": "0.75rem",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "dropLabelFontFamily": "Open Sans, sans-serif",
- "dropLabelFontSize": "1rem",
- "dropLabelFontWeight": "400",
- "errorMessageFontFamily": "Open Sans, sans-serif",
- "errorMessageFontSize": "0.75rem",
- "errorMessageFontWeight": "400",
- "errorMessageLineHeight": "1.5em",
- "dropBorderThickness": "1px",
- "dropBorderStyle": "dashed",
- "dropBorderRadius": "0.375rem",
- "fileItemBorderThickness": "1px",
- "fileItemBorderStyle": "solid",
- "fileItemBorderRadius": "0.25rem",
- "hoverDeleteFileItemBackgroundColor": "#0000000d",
- "activeDeleteFileItemBackgroundColor": "#00000033",
- "focusDeleteFileItemBorderColor": "#0095ff",
- "filePreviewBackgroundColor": "#f2f2f2",
- "filePreviewIconColor": "#808080",
- "errorFilePreviewIconColor": "#d0011b"
- },
- "footer": {
- "height": "124px",
- "backgroundColor": "#000000",
- "bottomLinksDividerColor": "#0095ff",
- "bottomLinksDividerThickness": "1px",
- "bottomLinksDividerStyle": "solid",
- "bottomLinksDividerSpacing": "0.5rem",
- "bottomLinksFontFamily": "Open Sans, sans-serif",
- "bottomLinksFontSize": "0.75rem",
- "bottomLinksFontStyle": "normal",
- "bottomLinksFontWeight": "400",
- "bottomLinksFontColor": "#ffffff",
- "bottomLinksTextDecoration": "none",
- "copyrightFontFamily": "Open Sans, sans-serif",
- "copyrightFontSize": "0.75rem",
- "copyrightFontStyle": "normal",
- "copyrightFontWeight": "400",
- "copyrightFontColor": "#ffffff",
- "logo": "",
- "logoHeight": "32px",
- "logoWidth": "auto",
- "socialLinksSize": "24px",
- "socialLinksGutter": "1rem",
- "socialLinksColor": "#ffffff"
- },
- "header": {
- "backgroundColor": "#ffffff",
- "hamburgerFocusColor": "#0095ff",
- "hamburgerFontFamily": "Open Sans, sans-serif",
- "hamburgerFontStyle": "normal",
- "hamburgerFontColor": "#000000",
- "hamburgerFontSize": "10px",
- "hamburgerFontWeight": "600",
- "hamburgerTextTransform": "uppercase",
- "hamburgerIconColor": "#000000",
- "hamburgerHoverColor": "#e6e6e6",
- "logo": "",
- "logoResponsive": "",
- "logoHeight": "40px",
- "logoWidth": "auto",
- "menuBackgroundColor": "#ffffff",
- "menuZindex": "2000",
- "menuTabletWidth": "60vw",
- "menuMobileWidth": "100vw",
- "minHeight": "64px",
- "overlayColor": "#000000b3",
- "overlayOpacity": "0.7",
- "overlayZindex": "1600",
- "paddingTop": "0rem",
- "paddingBottom": "0rem",
- "paddingRight": "1.5rem",
- "paddingLeft": "1.5rem",
- "underlinedColor": "#000000",
- "underlinedThickness": "2px",
- "underlinedStyle": "solid",
- "contentColor": "#000000"
- },
- "heading": {
- "level1FontColor": "inherit",
- "level1FontFamily": "Open Sans, sans-serif",
- "level1FontSize": "2.5rem",
- "level1FontStyle": "normal",
- "level1FontWeight": "600",
- "level1LineHeight": "1.365em",
- "level1LetterSpacing": "-0.025em",
- "level2FontColor": "inherit",
- "level2FontFamily": "Open Sans, sans-serif",
- "level2FontSize": "1.5rem",
- "level2FontStyle": "normal",
- "level2FontWeight": "600",
- "level2LineHeight": "1.5em",
- "level2LetterSpacing": "0em",
- "level3FontColor": "inherit",
- "level3FontFamily": "Open Sans, sans-serif",
- "level3FontSize": "1.25rem",
- "level3FontStyle": "normal",
- "level3FontWeight": "600",
- "level3LineHeight": "1.365em",
- "level3LetterSpacing": "0.025em",
- "level4FontColor": "inherit",
- "level4FontFamily": "Open Sans, sans-serif",
- "level4FontSize": "1rem",
- "level4FontStyle": "normal",
- "level4FontWeight": "600",
- "level4LineHeight": "1.5em",
- "level4LetterSpacing": "0em",
- "level5FontColor": "inherit",
- "level5FontFamily": "Open Sans, sans-serif",
- "level5FontSize": "0.875rem",
- "level5FontStyle": "normal",
- "level5FontWeight": "600",
- "level5LineHeight": "1.5em",
- "level5LetterSpacing": "0.025em"
- },
- "image": {
- "captionFontColor": "#333333",
- "captionFontFamily": "Open Sans, sans-serif",
- "captionFontSize": "0.875rem",
- "captionFontStyle": "normal",
- "captionFontWeight": "400",
- "captionLineHeight": "1.5em"
- },
- "link": {
- "fontColor": "#0067b3",
- "fontFamily": "inherit",
- "fontSize": "inherit",
- "fontStyle": "normal",
- "fontWeight": "400",
- "iconSize": "16px",
- "iconSpacing": "0.25rem",
- "underlineSpacing": "0rem",
- "underlineStyle": "solid",
- "underlineThickness": "1px",
- "disabledFontColor": "#999999",
- "hoverFontColor": "#0067b3",
- "hoverUnderlineColor": "#0067b3",
- "visitedFontColor": "#5f249f",
- "visitedUnderlineColor": "#5f249f",
- "activeFontColor": "#000000",
- "activeUnderlineColor": "#000000",
- "focusColor": "#0095ff"
- },
- "navTabs": {
- "selectedBackgroundColor": "#ffffff",
- "unselectedBackgroundColor": "#ffffff",
- "hoverBackgroundColor": "#f2f2f2",
- "pressedBackgroundColor": "#e6e6e6",
- "selectedFontColor": "#666666",
- "unselectedFontColor": "#666666",
- "disabledFontColor": "#999999",
- "focusOutline": "#0095ff",
- "selectedUnderlineColor": "#5f249f",
- "dividerColor": "#bfbfbf",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
- "fontStyle": "normal",
- "fontWeight": "400",
- "selectedIconColor": "#666666",
- "unselectedIconColor": "#666666",
- "disabledIconColor": "#999999"
- },
- "paginator": {
- "backgroundColor": "#f2f2f2",
- "fontColor": "#000000",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
- "fontStyle": "normal",
- "fontWeight": "400",
- "fontTextTransform": "none",
- "verticalPadding": "0.75rem",
- "horizontalPadding": "2rem",
- "marginRight": "2.5rem",
- "marginLeft": "20px",
- "itemsPerPageSelectorMarginLeft": "0rem",
- "itemsPerPageSelectorMarginRight": "0.5rem",
- "pageSelectorMarginRight": "30px",
- "pageSelectorMarginLeft": "0rem",
- "totalItemsContainerMarginRight": "2.5rem",
- "totalItemsContainerMarginLeft": "0rem"
- },
- "paragraph": {
- "display": "block",
- "fontColor": "#000000",
- "fontSize": "1rem",
- "fontWeight": "400"
- },
- "progressBar": {
- "trackLineColor": "#5f249f",
- "totalLineColor": "#e6e6e6",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "0.75rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "400",
- "labelFontColor": "#000000",
- "labelFontTextTransform": "uppercase",
- "valueFontFamily": "Open Sans, sans-serif",
- "valueFontSize": "0.75rem",
- "valueFontStyle": "normal",
- "valueFontWeight": "400",
- "valueFontColor": "#000000",
- "valueFontTextTransform": "uppercase",
- "helperTextFontColor": "#000000",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextFontFamily": "Open Sans, sans-serif",
- "thickness": "9px",
- "borderRadius": "5px",
- "overlayColor": "#000000b3",
- "overlayFontColor": "#ffffff"
- },
- "quickNav": {
- "fontColor": "#666666",
- "hoverFontColor": "#7d2fd0",
- "dividerBorderColor": "#bfbfbf",
- "focusBorderColor": "#0095ff",
- "focusBorderStyle": "solid",
- "focusBorderThickness": "2px",
- "focusBorderRadius": "2px",
- "paddingTop": "0.5rem",
- "paddingBottom": "0.5rem",
- "paddingLeft": "1rem",
- "paddingRight": "1rem",
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "0.875rem",
- "fontStyle": "normal",
- "fontWeight": "400"
- },
- "radioGroup": {
- "fontFamily": "Open Sans, sans-serif",
- "radioInputColor": "#0086e6",
- "hoverRadioInputColor": "#0067b3",
- "focusBorderColor": "#0095ff",
- "activeRadioInputColor": "#003c66",
- "errorRadioInputColor": "#d0011b",
- "hoverErrorRadioInputColor": "#980115",
- "activeErrorRadioInputColor": "#65010e",
- "readOnlyRadioInputColor": "#999999",
- "hoverReadOnlyRadioInputColor": "#808080",
- "activeReadOnlyRadioInputColor": "#666666",
- "disabledRadioInputColor": "#999999",
- "disabledLabelFontColor": "#999999",
- "disabledHelperTextFontColor": "#999999",
- "disabledRadioInputLabelFontColor": "#999999",
- "errorMessageColor": "#d0011b",
- "labelFontColor": "#000000",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "optionalLabelFontWeight": "400",
- "helperTextFontColor": "#000000",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "radioInputLabelFontColor": "#000000",
- "radioInputLabelFontSize": "0.875rem",
- "radioInputLabelFontStyle": "normal",
- "radioInputLabelFontWeight": "400",
- "radioInputLabelLineHeight": "1.715em",
- "groupLabelMargin": "0.5rem",
- "radioInputLabelMargin": "0.5rem",
- "groupVerticalGutter": "0.25rem",
- "groupHorizontalGutter": "2rem"
- },
- "select": {
- "fontFamily": "Open Sans, sans-serif",
- "disabledColor": "#999999",
- "enabledInputBorderColor": "#000000",
- "hoverInputBorderColor": "#a46ede",
- "focusInputBorderColor": "#0095ff",
- "errorInputBorderColor": "#d0011b",
- "hoverInputErrorBorderColor": "#fe0123",
- "disabledInputBorderColor": "#999999",
- "disabledInputBackgroundColor": "#f2f2f2",
- "inputMarginTop": "0.25rem",
- "inputMarginBottom": "0.25rem",
- "errorMessageColor": "#d0011b",
- "errorIconColor": "#d0011b",
- "labelFontColor": "#000000",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "optionalLabelFontWeight": "400",
- "helperTextFontColor": "#000000",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "placeholderFontColor": "#000000b3",
- "valueFontColor": "#000000",
- "valueFontSize": "1rem",
- "valueFontStyle": "normal",
- "valueFontWeight": "400",
- "actionIconColor": "#000000",
- "hoverActionIconColor": "#000000",
- "activeActionIconColor": "#000000",
- "actionBackgroundColor": "transparent",
- "hoverActionBackgroundColor": "#f2f2f2",
- "activeActionBackgroundColor": "#cccccc",
- "listOptionFontColor": "#000000",
- "listOptionFontSize": "0.875rem",
- "listOptionFontStyle": "normal",
- "listOptionFontWeight": "400",
- "listOptionIconColor": "#000000",
- "listOptionDividerColor": "#e6e6e6",
- "listGroupLabelFontWeight": "600",
- "focusListOptionBorderColor": "#0095ff",
- "systemMessageFontColor": "#666666",
- "collapseIndicatorColor": "#000000",
- "listDialogBackgroundColor": "#ffffff",
- "listDialogBorderColor": "#bfbfbf",
- "selectedListOptionBackgroundColor": "#e6f4ff",
- "selectedHoverListOptionBackgroundColor": "#cceaff",
- "selectedActiveListOptionBackgroundColor": "#99d5ff",
- "selectedListOptionIconColor": "#003c66",
- "unselectedHoverListOptionBackgroundColor": "#f2f2f2",
- "unselectedActiveListOptionBackgroundColor": "#e6e6e6",
- "selectionIndicatorFontColor": "#000000",
- "selectionIndicatorFontSize": "0.75rem",
- "selectionIndicatorFontStyle": "400",
- "selectionIndicatorFontWeight": "normal",
- "selectionIndicatorBorderColor": "#bfbfbf",
- "selectionIndicatorBackgroundColor": "#fafafa",
- "enabledSelectionIndicatorActionBackgroundColor": "transparent",
- "enabledSelectionIndicatorActionIconColor": "#000000",
- "hoverSelectionIndicatorActionBackgroundColor": "#f2f2f2",
- "hoverSelectionIndicatorActionIconColor": "#000000",
- "activeSelectionIndicatorActionBackgroundColor": "#cccccc",
- "activeSelectionIndicatorActionIconColor": "#000000"
- },
- "sidenav": {
- "backgroundColor": "#f2f2f2",
- "titleFontFamily": "Open Sans, sans-serif",
- "titleFontSize": "1.25rem",
- "titleFontStyle": "normal",
- "titleFontWeight": "600",
- "titleFontColor": "#4d4d4d",
- "titleFontTextTransform": "none",
- "titleFontLetterSpacing": "0em",
- "groupTitleFontFamily": "Open Sans, sans-serif",
- "groupTitleFontSize": "0.875rem",
- "groupTitleFontStyle": "normal",
- "groupTitleFontWeight": "600",
- "groupTitleFontColor": "#000000",
- "groupTitleHoverBackgroundColor": "#e6e6e6",
- "groupTitleActiveBackgroundColor": "#4d4d4d",
- "groupTitleSelectedFontColor": "#ffffff",
- "groupTitleSelectedBackgroundColor": "#4d4d4d",
- "groupTitleSelectedHoverFontColor": "#ffffff",
- "groupTitleSelectedHoverBackgroundColor": "#333333",
- "groupTitleFontTextTransform": "uppercase",
- "groupTitleFontLetterSpacing": "0.05em",
- "linkFontFamily": "Open Sans, sans-serif",
- "linkFontSize": "0.875rem",
- "linkFontStyle": "normal",
- "linkFontWeight": "400",
- "linkFontColor": "#4d4d4d",
- "linkHoverBackgroundColor": "#e6e6e6",
- "linkSelectedFontColor": "#ffffff",
- "linkSelectedBackgroundColor": "#4d4d4d",
- "linkSelectedHoverFontColor": "#ffffff",
- "linkSelectedHoverBackgroundColor": "#333333",
- "linkFontTextTransform": "none",
- "linkFontLetterSpacing": "0.025em",
- "linkTextDecoration": "none",
- "linkMarginTop": "0.25rem",
- "linkMarginBottom": "0.25rem",
- "linkMarginRight": "1rem",
- "linkMarginLeft": "1rem",
- "linkFocusColor": "#0095ff",
- "scrollBarThumbColor": "#0000001a",
- "scrollBarTrackColor": "transparent"
- },
- "slider": {
- "fontFamily": "Open Sans, sans-serif",
- "limitValuesFontColor": "#000000",
- "limitValuesFontSize": "1rem",
- "limitValuesFontStyle": "normal",
- "limitValuesFontWeight": "400",
- "limitValuesFontLetterSpacing": "0em",
- "disabledLimitValuesFontColor": "#999999",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "helperTextFontFamily": "Open Sans, sans-serif",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "fontColor": "#000000",
- "labelFontColor": "#000000",
- "helperTextFontColor": "#000000",
- "disabledLabelFontColor": "#999999",
- "disabledHelperTextFontColor": "#999999",
- "thumbHeight": "12px",
- "thumbWidth": "12px",
- "hoverThumbHeight": "14px",
- "hoverThumbWidth": "14px",
- "thumbVerticalPosition": "12px",
- "hoverThumbVerticalPosition": "11px",
- "thumbBackgroundColor": "#0067b3",
- "hoverThumbScale": "1.166666",
- "hoverThumbBackgroundColor": "#003c66",
- "activeThumbScale": "1.166666",
- "activeThumbBackgroundColor": "#003c66",
- "focusThumbBackgroundColor": "#0067b3",
- "tickHeight": "4px",
- "tickWidth": "4px",
- "tickVerticalPosition": "11px",
- "tickBackgroundColor": "#0067b3",
- "trackLineThickness": "2px",
- "trackLineVerticalPosition": "50%",
- "trackLineColor": "#0067b3",
- "totalLineThickness": "2px",
- "totalLineVerticalPosition": "50%",
- "totalLineColor": "#0000001a",
- "disabledThumbVerticalPosition": "10px",
- "disabledThumbBackgroundColor": "#999999",
- "disabledTickVerticalPosition": "11px",
- "disabledTickBackgroundColor": "#999999",
- "disabledTrackLineColor": "#999999",
- "disabledTotalLineColor": "#f2f2f2",
- "focusColor": "#0095ff",
- "floorLabelMarginRight": "1rem",
- "ceilLabelMarginLeft": "1rem",
- "inputMarginLeft": "2rem"
- },
- "spinner": {
- "trackCircleColor": "#5f249f",
- "trackCircleColorOverlay": "#a46ede",
- "totalCircleColor": "#ffffff",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "400",
- "labelFontColor": "#000000",
- "labelTextAlign": "center",
- "progressValueFontFamily": "Open Sans, sans-serif",
- "progressValueFontSize": "0.875rem",
- "progressValueFontStyle": "normal",
- "progressValueFontWeight": "bold",
- "progressValueFontColor": "inherit",
- "progressValueTextAlign": "center",
- "overlayBackgroundColor": "#000000",
- "overlayOpacity": "0.8",
- "overlayLabelFontFamily": "Open Sans, sans-serif",
- "overlayLabelFontSize": "0.875rem",
- "overlayLabelFontStyle": "normal",
- "overlayLabelFontWeight": "400",
- "overlayLabelFontColor": "#ffffff",
- "overlayLabelTextAlign": "center",
- "overlayProgressValueFontFamily": "Open Sans, sans-serif",
- "overlayProgressValueFontSize": "0.875rem",
- "overlayProgressValueFontStyle": "normal",
- "overlayProgressValueFontWeight": "bold",
- "overlayProgressValueFontColor": "#ffffff",
- "overlayProgressValueTextAlign": "center"
- },
- "switch": {
- "checkedTrackBackgroundColor": "#5f249f",
- "checkedThumbBackgroundColor": "#ffffff",
- "uncheckedTrackBackgroundColor": "#bfbfbf",
- "uncheckedThumbBackgroundColor": "#ffffff",
- "disabledCheckedTrackBackgroundColor": "#f2eafa",
- "disabledCheckedThumbBackgroundColor": "#ffffff",
- "disabledUncheckedTrackBackgroundColor": "#f2f2f2",
- "disabledUncheckedThumbBackgroundColor": "#ffffff",
- "disabledLabelFontColor": "#999999",
- "disabledLabelFontStyle": "normal",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "1rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "400",
- "labelFontColor": "#000000",
- "thumbFocusColor": "#0095ff",
- "thumbHeight": "24px",
- "thumbWidth": "24px",
- "thumbShift": "1.25rem",
- "trackHeight": "12px",
- "trackWidth": "36px",
- "spaceBetweenLabelSwitch": "0.5rem"
- },
- "table": {
- "rowSeparatorThickness": "1px",
- "rowSeparatorStyle": "solid",
- "rowSeparatorColor": "#cccccc",
- "dataBackgroundColor": "#ffffff",
- "dataFontFamily": "Open Sans, sans-serif",
- "dataFontSize": "0.875rem",
- "dataFontStyle": "normal",
- "dataFontWeight": "400",
- "dataFontColor": "#000000",
- "dataFontTextTransform": "none",
- "dataPaddingTop": "1rem",
- "dataPaddingBottom": "1rem",
- "dataPaddingRight": "20px",
- "dataPaddingLeft": "20px",
- "dataPaddingTopReduced": "0.5rem",
- "dataPaddingBottomReduced": "0.5rem",
- "dataPaddingRightReduced": "1rem",
- "dataPaddingLeftReduced": "1rem",
- "dataTextAlign": "left",
- "dataTextLineHeight": "normal",
- "firstChildPaddingLeft": "1.5rem",
- "lastChildPaddingRight": "1.5rem",
- "firstChildPaddingLeftReduced": "20px",
- "lastChildPaddingRightReduced": "20px",
- "headerBackgroundColor": "#5f249f",
- "headerBorderRadius": "4px",
- "headerFontFamily": "Open Sans, sans-serif",
- "headerFontSize": "0.875rem",
- "headerFontStyle": "normal",
- "headerFontWeight": "400",
- "headerFontColor": "#ffffff",
- "headerFontTextTransform": "none",
- "headerPaddingTop": "1rem",
- "headerPaddingBottom": "1rem",
- "headerPaddingRight": "20px",
- "headerPaddingLeft": "20px",
- "headerPaddingTopReduced": "0.5rem",
- "headerPaddingBottomReduced": "0.5rem",
- "headerPaddingRightReduced": "1rem",
- "headerPaddingLeftReduced": "1rem",
- "headerTextAlign": "left",
- "headerTextLineHeight": "normal",
- "scrollBarThumbColor": "#666666",
- "scrollBarTrackColor": "#cccccc",
- "sortIconColor": "#ffffff",
- "actionIconColor": "#5f249f",
- "disabledActionIconColor": "#999999",
- "hoverActionIconColor": "#5f249f",
- "focusActionIconColor": "#5f249f",
- "activeActionIconColor": "#5f249f",
- "actionBackgroundColor": "transparent",
- "disabledActionBackgroundColor": "transparent",
- "hoverActionBackgroundColor": "#f2f2f2",
- "focusActionBorderColor": "#0095ff",
- "activeActionBackgroundColor": "#cccccc"
- },
- "tabs": {
- "fontFamily": "Open Sans, sans-serif",
- "fontSize": "1rem",
- "fontStyle": "normal",
- "fontWeight": "600",
- "fontTextTransform": "none",
- "selectedBackgroundColor": "#ffffff",
- "selectedFontColor": "#5f249f",
- "selectedIconColor": "#5f249f",
- "selectedUnderlineColor": "#5f249f",
- "selectedUnderlineThickness": "2px",
- "unselectedBackgroundColor": "#ffffff",
- "unselectedFontColor": "#666666",
- "unselectedIconColor": "#666666",
- "disabledFontColor": "#999999",
- "disabledIconColor": "#999999",
- "disabledFontStyle": "normal",
- "hoverBackgroundColor": "#f2eafa",
- "pressedBackgroundColor": "#e5d5f6",
- "pressedFontWeight": "600",
- "dividerColor": "#bfbfbf",
- "dividerThickness": "1px",
- "focusOutline": "#5f249f",
- "scrollButtonsWidth": "48px"
- },
- "tag": {
- "fontFamily": "Open Sans, sans-serif",
- "fontColor": "#000000",
- "fontSize": "0.875rem",
- "fontStyle": "normal",
- "fontWeight": "400",
- "labelPaddingTop": "0rem",
- "labelPaddingBottom": "0rem",
- "labelPaddingLeft": "1rem",
- "labelPaddingRight": "1rem",
- "height": "40px",
- "iconColor": "#ffffff",
- "iconSectionWidth": "40px",
- "iconHeight": "24px",
- "iconWidth": "auto",
- "focusColor": "#0095ff"
- },
- "textarea": {
- "fontFamily": "Open Sans, sans-serif",
- "enabledBorderColor": "#000000",
- "hoverBorderColor": "#a46ede",
- "focusBorderColor": "#0095ff",
- "disabledBorderColor": "#999999",
- "disabledContainerFillColor": "#f2f2f2",
- "readOnlyBorderColor": "#999999",
- "hoverReadOnlyBorderColor": "#808080",
- "errorBorderColor": "#d0011b",
- "hoverErrorBorderColor": "#fe0123",
- "inputMarginTop": "0.25rem",
- "inputMarginBottom": "0.25rem",
- "errorMessageColor": "#d0011b",
- "labelFontColor": "#000000",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "disabledLabelFontColor": "#999999",
- "optionalLabelFontWeight": "400",
- "helperTextFontColor": "#000000",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "disabledHelperTextFontColor": "#999999",
- "placeholderFontColor": "#000000b3",
- "disabledPlaceholderFontColor": "#999999",
- "valueFontColor": "#000000",
- "valueFontSize": "1rem",
- "valueFontStyle": "normal",
- "valueFontWeight": "400",
- "disabledValueFontColor": "#999999"
- },
- "textInput": {
- "fontFamily": "Open Sans, sans-serif",
- "enabledBorderColor": "#000000",
- "hoverBorderColor": "#a46ede",
- "focusBorderColor": "#0095ff",
- "disabledBorderColor": "#999999",
- "disabledContainerFillColor": "#f2f2f2",
- "readOnlyBorderColor": "#999999",
- "hoverReadOnlyBorderColor": "#808080",
- "errorBorderColor": "#d0011b",
- "hoverErrorBorderColor": "#fe0123",
- "inputMarginTop": "0.25rem",
- "inputMarginBottom": "0.25rem",
- "errorMessageColor": "#d0011b",
- "errorIconColor": "#d0011b",
- "labelFontColor": "#000000",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "disabledLabelFontColor": "#999999",
- "optionalLabelFontWeight": "400",
- "helperTextFontColor": "#000000",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "disabledHelperTextFontColor": "#999999",
- "prefixColor": "#666666",
- "prefixDividerBorderWidth": "1px",
- "prefixDividerBorderStyle": "solid",
- "prefixDividerPaddingRight": "0.5rem",
- "suffixColor": "#666666",
- "suffixDividerBorderStyle": "solid",
- "suffixDividerBorderWidth": "1px",
- "suffixDividerPaddingLeft": "0.5rem",
- "disabledPrefixColor": "#bfbfbf",
- "disabledSuffixColor": "#bfbfbf",
- "placeholderFontColor": "#000000b3",
- "disabledPlaceholderFontColor": "#999999",
- "valueFontColor": "#000000",
- "valueFontSize": "1rem",
- "valueFontStyle": "normal",
- "valueFontWeight": "400",
- "disabledValueFontColor": "#999999",
- "actionIconColor": "#000000",
- "disabledActionIconColor": "#999999",
- "hoverActionIconColor": "#000000",
- "focusActionIconColor": "#000000",
- "activeActionIconColor": "#000000",
- "actionBackgroundColor": "transparent",
- "disabledActionBackgroundColor": "transparent",
- "hoverActionBackgroundColor": "#f2f2f2",
- "focusActionBorderColor": "#0095ff",
- "activeActionBackgroundColor": "#cccccc",
- "listDialogBackgroundColor": "#ffffff",
- "listDialogBorderColor": "#bfbfbf",
- "listOptionDividerColor": "#e6e6e6",
- "listOptionFontColor": "#000000",
- "listOptionFontSize": "0.875rem",
- "listOptionFontStyle": "normal",
- "listOptionFontWeight": "400",
- "systemMessageFontColor": "#666666",
- "errorListDialogFontColor": "#000000",
- "errorListDialogBackgroundColor": "#fff5f6",
- "errorListDialogBorderColor": "#d0011b",
- "hoverListOptionBackgroundColor": "#f2f2f2",
- "activeListOptionBackgroundColor": "#e6e6e6",
- "focusListOptionBorderColor": "#0095ff"
- },
- "toggleGroup": {
- "containerBackgroundColor": "#fafafa",
- "containerBorderColor": "#999999",
- "labelFontColor": "#000000",
- "disabledLabelFontColor": "#999999",
- "helperTextFontColor": "#000000",
- "disabledHelperTextFontColor": "#999999",
- "unselectedBackgroundColor": "#e6e6e6",
- "unselectedHoverBackgroundColor": "#cccccc",
- "unselectedActiveBackgroundColor": "#5f249f",
- "unselectedDisabledBackgroundColor": "#f2f2f2",
- "unselectedFontColor": "#000000",
- "unselectedDisabledFontColor": "#999999",
- "selectedBackgroundColor": "#5f249f",
- "selectedHoverBackgroundColor": "#4b1c7d",
- "selectedActiveBackgroundColor": "#321353",
- "selectedDisabledBackgroundColor": "#f2eafa",
- "selectedFontColor": "#ffffff",
- "selectedDisabledFontColor": "#cbacec",
- "focusColor": "#0095ff",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontSize": "0.875rem",
- "labelFontStyle": "normal",
- "labelFontWeight": "600",
- "labelLineHeight": "1.715em",
- "helperTextFontFamily": "Open Sans, sans-serif",
- "helperTextFontSize": "0.75rem",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextLineHeight": "1.5em",
- "optionLabelFontFamily": "Open Sans, sans-serif",
- "optionLabelFontSize": "1rem",
- "optionLabelFontStyle": "normal",
- "optionLabelFontWeight": "400",
- "iconPaddingRight": "0.5rem",
- "iconPaddingLeft": "0.5rem",
- "labelPaddingLeft": "1.5rem",
- "labelPaddingRight": "1.5rem",
- "iconMarginRight": "0.5rem",
- "containerMarginTop": "0.25rem",
- "optionBorderThickness": "0px",
- "optionBorderStyle": "none",
- "optionBorderRadius": "0.25rem",
- "containerBorderThickness": "1px",
- "containerBorderStyle": "solid",
- "containerBorderRadius": "0.375rem",
- "optionFocusBorderThickness": "2px"
- },
- "wizard": {
- "visitedStepFontColor": "#000000",
- "visitedStepBackgroundColor": "#ffffff",
- "visitedStepBorderColor": "#000000",
- "unvisitedStepFontColor": "#666666",
- "unvisitedLabelFontColor": "#666666",
- "unvisitedHelperTextFontColor": "#666666",
- "unvisitedStepBackgroundColor": "transparent",
- "unvisitedStepBorderColor": "#666666",
- "selectedStepFontColor": "#ffffff",
- "selectedStepBackgroundColor": "#5f249f",
- "selectedStepBorderColor": "#5f249f",
- "selectedLabelFontColor": "#000000",
- "selectedHelperTextFontColor": "#000000",
- "selectedStepWidth": "32px",
- "selectedStepHeight": "32px",
- "selectedStepBorderThickness": "2px",
- "selectedStepBorderStyle": "solid",
- "selectedStepBorderRadius": "45px",
- "stepFontSize": "1rem",
- "stepFontFamily": "Open Sans, sans-serif",
- "stepFontStyle": "normal",
- "stepFontWeight": "400",
- "stepFontTracking": "0.05em",
- "stepIconSize": "20px",
- "stepWidth": "32px",
- "stepHeight": "32px",
- "stepBorderThickness": "2px",
- "stepBorderStyle": "solid",
- "stepBorderRadius": "45px",
- "visitedLabelFontColor": "#000000",
- "labelFontSize": "1rem",
- "labelFontFamily": "Open Sans, sans-serif",
- "labelFontStyle": "normal",
- "labelFontWeight": "400",
- "labelFontTracking": "0em",
- "labelFontTextTransform": "none",
- "labelTextAlign": "left",
- "helperTextFontSize": "0.875rem",
- "helperTextFontFamily": "Open Sans, sans-serif",
- "helperTextFontStyle": "normal",
- "helperTextFontWeight": "400",
- "helperTextFontTracking": "0em",
- "helperTextFontTextTransform": "none",
- "visitedHelperTextFontColor": "#000000",
- "helperTextTextAlign": "left",
- "disabledStepBackgroundColor": "#f2f2f2",
- "disabledStepFontColor": "#999999",
- "disabledLabelFontColor": "#999999",
- "disabledHelperTextFontColor": "#999999",
- "disabledStepBorderColor": "#f2f2f2",
- "disabledStepWidth": "32px",
- "disabledStepHeight": "32px",
- "disabledStepBorderThickness": "2px",
- "disabledStepBorderStyle": "solid",
- "disabledStepBorderRadius": "45px",
- "separatorBorderThickness": "1px",
- "separatorBorderStyle": "solid",
- "separatorColor": "#666666",
- "focusColor": "#0095ff"
- }
-}
diff --git a/apps/website/screens/common/themes/opinionated-theme.json b/apps/website/screens/common/themes/opinionated-theme.json
deleted file mode 100644
index 70f544101f..0000000000
--- a/apps/website/screens/common/themes/opinionated-theme.json
+++ /dev/null
@@ -1,150 +0,0 @@
-{
- "accordion": {
- "accentColor": "#5f249f",
- "titleFontColor": "#333333",
- "subLabelFontColor": "#666666",
- "assistiveTextFontColor": "#666666"
- },
- "button": {
- "baseColor": "#5f249f",
- "primaryFontColor": "#ffffff",
- "secondaryHoverFontColor": "#ffffff"
- },
- "checkbox": {
- "baseColor": "#0067b3",
- "checkColor": "#ffffff",
- "fontColor": "#000000"
- },
- "chip": {
- "baseColor": "#e6e6e6",
- "fontColor": "#000000",
- "iconColor": "#4d4d4d"
- },
- "contextualMenu": {
- "accentColor": "#f2eafa",
- "baseColor": "#ffffff",
- "fontColor": "#333333",
- "iconColor": "#333333"
- },
- "dataGrid": {
- "baseColor": "#5f249f",
- "headerFontColor": "#ffffff",
- "cellFontColor": "#000000"
- },
- "dateInput": {
- "baseColor": "#5f249f",
- "selectedFontColor": "#ffffff"
- },
- "dialog": {
- "baseColor": "#ffffff",
- "closeIconColor": "#000000",
- "overlayColor": "#000000b3"
- },
- "dropdown": {
- "baseColor": "#ffffff",
- "fontColor": "#000000",
- "optionFontColor": "#000000"
- },
- "fileInput": {
- "fontColor": "#000000"
- },
- "footer": {
- "baseColor": "#000000",
- "fontColor": "#ffffff",
- "accentColor": "#0095ff",
- "logo": "/dxc_footer_logo.svg"
- },
- "header": {
- "baseColor": "#ffffff",
- "accentColor": "#000000",
- "fontColor": "#000000",
- "menuBaseColor": "#ffffff",
- "hamburgerColor": "#000000",
- "logo": "/dxc_header_logo.svg",
- "logoResponsive": "/dxc_header_logo.svg",
- "contentColor": "#000000",
- "overlayColor": "#000000b3"
- },
- "link": {
- "baseColor": "#5f249f"
- },
- "navTabs": {
- "baseColor": "#666666",
- "accentColor": "#5f249f"
- },
- "paginator": {
- "baseColor": "#f2f2f2",
- "fontColor": "#000000"
- },
- "progressBar": {
- "accentColor": "#5f249f",
- "baseColor": "#e6e6e6",
- "fontColor": "#000000",
- "overlayColor": "#000000b3",
- "overlayFontColor": "#ffffff"
- },
- "quickNav": {
- "fontColor": "#666666",
- "accentColor": "#9a6bb2"
- },
- "radioGroup": {
- "baseColor": "#0086e6",
- "fontColor": "#000000"
- },
- "select": {
- "selectedOptionBackgroundColor": "#e6f4ff",
- "fontColor": "#000000",
- "optionFontColor": "#000000",
- "hoverBorderColor": "#a46ede"
- },
- "sidenav": {
- "baseColor": "#f2f2f2"
- },
- "slider": {
- "baseColor": "#0067b3",
- "fontColor": "#000000",
- "totalLineColor": "#e6e6e6"
- },
- "spinner": {
- "accentColor": "#5f249f",
- "baseColor": "#ffffff",
- "fontColor": "#000000",
- "overlayColor": "#a46ede",
- "overlayFontColor": "#ffffff"
- },
- "switch": {
- "checkedBaseColor": "#5f249f",
- "fontColor": "#000000"
- },
- "table": {
- "baseColor": "#5f249f",
- "headerFontColor": "#ffffff",
- "cellFontColor": "#000000"
- },
- "tabs": {
- "baseColor": "#5f249f"
- },
- "tag": {
- "fontColor": "#000000",
- "iconColor": "#ffffff"
- },
- "textarea": {
- "fontColor": "#000000",
- "hoverBorderColor": "#a46ede"
- },
- "textInput": {
- "fontColor": "#000000",
- "hoverBorderColor": "#a46ede"
- },
- "toggleGroup": {
- "selectedBaseColor": "#5f249f",
- "selectedFontColor": "#ffffff",
- "unselectedBaseColor": "#e6e6e6",
- "unselectedFontColor": "#000000"
- },
- "wizard": {
- "baseColor": "#5f249f",
- "fontColor": "#000000",
- "selectedStepFontColor": "#ffffff"
- }
-}
From cb0db729d060b50200a154ddd49784364ea2221e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Mon, 31 Mar 2025 12:03:14 +0200
Subject: [PATCH 04/11] Introduction page updates
---
.../screens/overview/introduction/IntroductionPage.tsx | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/apps/website/screens/overview/introduction/IntroductionPage.tsx b/apps/website/screens/overview/introduction/IntroductionPage.tsx
index 10b688a328..dc4531860b 100644
--- a/apps/website/screens/overview/introduction/IntroductionPage.tsx
+++ b/apps/website/screens/overview/introduction/IntroductionPage.tsx
@@ -9,8 +9,8 @@ const sections = [
title: "What Halstack is",
content: (
- Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing
- all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences
+ Halstack is an open source Design System built and maintained by DXC Technology with the purpose of providing
+ all the necessary tools for designing and implementing accessible, intuitive and consistent user experiences
with Figma, UXPin and React.
),
@@ -19,7 +19,7 @@ const sections = [
title: "A tool for designers",
content: (
- Halstack's first goal is to provide Product Designers with pre-created designs for the most common use-cases
+ Halstack's first goal is to provide product designers with pre-created designs for the most common use-cases
they will face during the product design stage. Using Halstack, they don't need to reinvent the wheel
looking for a solution to these mundane problems, and can focus on adding business value. Also, by
centralizing these efforts in a Design System team, we can pay the right amount of attention to aspects as
@@ -66,7 +66,7 @@ const sections = [
<>
All the opinions provided by Halstack Design System always remain within the boundaries of the generalist
- UI/UX Design domain. Halstack will not get into business-specific elements even if they are reusable. For
+ UI/UX design domain. Halstack will not get into business-specific elements even if they are reusable. For
example, Halstack might provide guidelines on using forms within the context of digital applications.
Still, it doesn't get into the specifics of designing a form for an insurance quote application.
@@ -87,7 +87,7 @@ const sections = [
title: "A replacement for the Product Design stage",
content: (
- Halstack should always be considered as assistance to the Product Design process, but never as a
+ Halstack should always be considered as assistance to the product design process, but never as a
replacement. Product Designers are still a fundamental piece of this process since they will need to add the
business context, validate the patterns contemplated by the Design System, and contribute back to the design
system when necessary.
From 13b52efb97b834cd25d45b02054e78f8ede33c35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
<44321109+GomezIvann@users.noreply.github.com>
Date: Tue, 15 Apr 2025 13:36:01 +0200
Subject: [PATCH 05/11] Site updates
---
apps/website/screens/common/Code.tsx | 12 ++---
apps/website/screens/common/CodeBlock.tsx | 2 +-
apps/website/screens/common/DocFooter.tsx | 54 +++--------------------
apps/website/screens/common/Figure.tsx | 3 +-
apps/website/screens/common/Image.tsx | 1 +
apps/website/screens/common/pagesList.ts | 4 +-
packages/lib/src/image/Image.tsx | 6 +--
7 files changed, 22 insertions(+), 60 deletions(-)
diff --git a/apps/website/screens/common/Code.tsx b/apps/website/screens/common/Code.tsx
index c676180d7b..dc0ff59b98 100644
--- a/apps/website/screens/common/Code.tsx
+++ b/apps/website/screens/common/Code.tsx
@@ -13,10 +13,15 @@ export default styled.code`
font-size: inherit;
`;
+export const TableCode = styled.code`
+ ${codeStyles}
+ font-size: var(--typography-label-s);
+`;
+
const ExtendedCodeContainer = styled.div`
${codeStyles}
white-space: pre;
- font-size: 0.75rem;
+ font-size: var(--typography-label-s);
`;
export const ExtendedTableCode = ({ children }: { children: ReactNode }) => (
@@ -24,8 +29,3 @@ export const ExtendedTableCode = ({ children }: { children: ReactNode }) => (
{children}
);
-
-export const TableCode = styled.code`
- ${codeStyles}
- font-size: 0.75rem;
-`;
diff --git a/apps/website/screens/common/CodeBlock.tsx b/apps/website/screens/common/CodeBlock.tsx
index 15f07ba661..34a35c84b5 100644
--- a/apps/website/screens/common/CodeBlock.tsx
+++ b/apps/website/screens/common/CodeBlock.tsx
@@ -46,7 +46,7 @@ export default function CodeBlock({ children }: { children: ReactNode }) {
{children}
{copyActionIsVisible && (
-
+
-
-
-
-
-);
-
-const reportIssueIcon = (
-
-
-);
-
-const editIcon = (
-
-
-);
-
export default function DocFooter({ githubLink }: { githubLink: string }) {
const { pathname } = useRouter();
- const { previousLink, nextLink } = getNavigationLinks(pathname);
+ const { nextLink, previousLink } = getNavigationLinks(pathname);
return (
-
+
Edit this page on GitHub
-
+
Report an issue on GitHub
-
+
{previousLink && (
<>
Previous
{previousLink.label}
+ {previousLink.label}
)}
-
+
{nextLink && (
<>
Next
+
{nextLink.label}
diff --git a/apps/website/screens/common/Figure.tsx b/apps/website/screens/common/Figure.tsx
index 657ede0595..d2851fda5b 100644
--- a/apps/website/screens/common/Figure.tsx
+++ b/apps/website/screens/common/Figure.tsx
@@ -4,11 +4,12 @@ import { ReactNode } from "react";
const StyledFigure = styled.figure`
margin: 0;
- padding: 0;
+ padding: var(--spacing-padding-none);
`;
const StyledFigcaption = styled.figcaption`
font-size: var(--typography-label-m);
+ color: var(--color-fg-neutral-dark);
`;
const Figure = ({ caption, children }: { caption: string | ReactNode; children: ReactNode }) => (
diff --git a/apps/website/screens/common/Image.tsx b/apps/website/screens/common/Image.tsx
index 801824305f..b450a25d33 100644
--- a/apps/website/screens/common/Image.tsx
+++ b/apps/website/screens/common/Image.tsx
@@ -9,6 +9,7 @@ type ImageProps = {
width?: number;
height?: number;
};
+
export default function Image(props: ImageProps) {
return (
{
const links = LinksSections.flatMap((section) => section.links);
const currentLinkIndex = getCurrentLinkIndex(links, currentPath);
return currentLinkIndex === -1 ? {} : {
- previousLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
- nextLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
+ nextLink: currentLinkIndex + 1 < links.length ? links[currentLinkIndex + 1] : undefined,
+ previousLink: currentLinkIndex - 1 >= 0 ? links[currentLinkIndex - 1] : undefined,
};
};
diff --git a/packages/lib/src/image/Image.tsx b/packages/lib/src/image/Image.tsx
index 05e8e92ec9..558cf12e16 100644
--- a/packages/lib/src/image/Image.tsx
+++ b/packages/lib/src/image/Image.tsx
@@ -8,7 +8,7 @@ const Figure = styled.figure`
gap: var(--spacing-gap-s);
width: fit-content;
margin: 0;
- padding: 0;
+ padding: var(--spacing-padding-none);
`;
const CaptionContainer = styled.figcaption`
@@ -47,11 +47,11 @@ export default function DxcImage({
-
+
{children}
{caption}
diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx
index 8c760adc3f..e065d9f5ca 100644
--- a/apps/website/screens/common/QuickNavContainer.tsx
+++ b/apps/website/screens/common/QuickNavContainer.tsx
@@ -59,7 +59,7 @@ const QuickNavContainer = styled.div`
const DxcQuickNavContainer = ({ sections, startHeadingLevel = 1, title = "On this page" }: QuickNavContainerTypes) => (
-
+
{sections.map((section) => (
(
-
+const Section = ({ content, level = 1, navSubtitle, subSections, title }: SectionType) => (
+
{title}
@@ -21,12 +24,12 @@ const Section = ({ title, level = 1, subSections, content, navSubtitle }: Sectio
{subSections?.map((subSection) => (
))}
diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx
index 4c5f46e993..1feb71138a 100644
--- a/apps/website/screens/common/example/Example.tsx
+++ b/apps/website/screens/common/example/Example.tsx
@@ -48,7 +48,7 @@ type ExamplePropTypes = {
};
};
-const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
+export default function Example({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) {
const toast = useToast();
const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
const [liveCode, setLiveCode] = useState(example.code);
@@ -69,7 +69,7 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
};
return (
-
+
{actionsVisible && (
-
- {isCodeVisible &&
+ {isCodeVisible &&
);
-};
-
-export default Example;
+}
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
index b071c9c10c..1727c46887 100644
--- a/apps/website/screens/common/sidenav/SidenavLogo.tsx
+++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -27,15 +27,15 @@ export default function SidenavLogo({ subtitle = "Design System" }: { subtitle?:
return (
-
-
+ Halstack
{subtitle}
diff --git a/apps/website/screens/components/accordion/AccordionPageLayout.tsx b/apps/website/screens/components/accordion/AccordionPageLayout.tsx
index 9cb36985ef..5cc740be54 100644
--- a/apps/website/screens/components/accordion/AccordionPageLayout.tsx
+++ b/apps/website/screens/components/accordion/AccordionPageLayout.tsx
@@ -11,7 +11,7 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -128,7 +128,7 @@ const sections = [
-
+
@@ -141,7 +141,7 @@ const sections = [
-
+
@@ -179,7 +179,7 @@ const sections = [
-
+
@@ -192,7 +192,7 @@ const sections = [
-
+
@@ -205,7 +205,7 @@ const sections = [
-
+
@@ -265,15 +265,13 @@ const sections = [
},
];
-const AccordionUsagePage = () => {
- return (
-
-
-
-
- );
-};
+const AccordionCodePage = () => (
+
+
+
+
+);
-export default AccordionUsagePage;
+export default AccordionCodePage;
diff --git a/apps/website/screens/components/accordion/code/examples/accordions.ts b/apps/website/screens/components/accordion/code/examples/accordions.ts
index 1e63a60206..92816711ef 100644
--- a/apps/website/screens/components/accordion/code/examples/accordions.ts
+++ b/apps/website/screens/components/accordion/code/examples/accordions.ts
@@ -10,7 +10,7 @@ const code = `() => {
badge={{ position: "before", element:
+
Person information
@@ -20,7 +20,7 @@ const code = `() => {
badge={{ position: "before", element:
+
Person creation information
@@ -30,7 +30,7 @@ const code = `() => {
statusLight={
+
Interactions information
@@ -40,7 +40,7 @@ const code = `() => {
icon="delete"
badge={{ position: "before", element:
+
Deletion information
diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts
index 7e0668bd36..a08e0549b3 100644
--- a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts
+++ b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts
@@ -10,7 +10,7 @@ const code = `() => {
badge={{ position: "before", element:
+
To edit your profile you need to go to Settings and click on Profile.
diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.ts b/apps/website/screens/components/accordion/code/examples/basicUsage.ts
index d0d34468aa..7ed3119ada 100644
--- a/apps/website/screens/components/accordion/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/accordion/code/examples/basicUsage.ts
@@ -6,7 +6,7 @@ const code = `() => {
-
+
To edit your profile you need to go to Settings and click on Profile.
diff --git a/apps/website/screens/components/accordion/code/examples/controlled.ts b/apps/website/screens/components/accordion/code/examples/controlled.ts
index 67fffb686b..18ce7fc85b 100644
--- a/apps/website/screens/components/accordion/code/examples/controlled.ts
+++ b/apps/website/screens/components/accordion/code/examples/controlled.ts
@@ -14,7 +14,7 @@ const code = `() => {
-
+
To edit your profile you need to go to Settings and click on Profile.
diff --git a/apps/website/screens/components/accordion/code/examples/icons.ts b/apps/website/screens/components/accordion/code/examples/icons.ts
index 75a85109df..97942141e2 100644
--- a/apps/website/screens/components/accordion/code/examples/icons.ts
+++ b/apps/website/screens/components/accordion/code/examples/icons.ts
@@ -7,7 +7,7 @@ const code = `() => {
-
+
To edit your profile you need to go to Settings and click on
Profile.
diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts b/apps/website/screens/components/accordion/code/examples/uncontrolled.ts
index c9b9fc4928..5b781856d7 100644
--- a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts
+++ b/apps/website/screens/components/accordion/code/examples/uncontrolled.ts
@@ -6,7 +6,7 @@ const code = `() => {
-
+
To edit your profile you need to go to Settings and click on Profile.
diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
index 6a7f8ea18a..12b7e2bed1 100644
--- a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
+++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
@@ -38,8 +38,8 @@ const sections = [
section. It helps users understand what type of information they can expect to find inside.
- Chevron icon (Expand/collapse) : A visual indicator of the accordion's current state
- (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the
+ Chevron icon (Expand/collapse) : A visual indicator of the accordion's current
+ state (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the
accordion intuitively.
@@ -305,15 +305,13 @@ const sections = [
},
];
-const AccordionOverviewPage = () => {
- return (
-
-
-
-
- );
-};
+const AccordionOverviewPage = () => (
+
+
+
+
+);
export default AccordionOverviewPage;
diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.ts b/apps/website/screens/components/accordion/overview/examples/basicExample.ts
index 0d726ff8d8..0af79a5e9e 100644
--- a/apps/website/screens/components/accordion/overview/examples/basicExample.ts
+++ b/apps/website/screens/components/accordion/overview/examples/basicExample.ts
@@ -4,11 +4,11 @@ import { useState } from "react";
const code = `() => {
return (
-
+
-
+
Details
@@ -19,7 +19,7 @@ const code = `() => {
icon="filled_mail"
subLabel="Jan, 09 2025"
>
-
+
Details
@@ -30,7 +30,7 @@ const code = `() => {
statusLight={
+
Details
@@ -41,7 +41,7 @@ const code = `() => {
label="Assure Claims"
statusLight={
+
Details
@@ -52,7 +52,7 @@ const code = `() => {
label="Life Policy"
subLabel="Ref - 1236554546"
>
-
+
Details
@@ -64,7 +64,7 @@ const code = `() => {
statusLight={
+
Details
diff --git a/apps/website/screens/components/accordion/overview/examples/nestedExample.ts b/apps/website/screens/components/accordion/overview/examples/nestedExample.ts
index 17ab246ea1..8a216b11ea 100644
--- a/apps/website/screens/components/accordion/overview/examples/nestedExample.ts
+++ b/apps/website/screens/components/accordion/overview/examples/nestedExample.ts
@@ -8,12 +8,12 @@ const code = `() => {
-
+
-
+
Details
diff --git a/apps/website/screens/components/alert/AlertPageLayout.tsx b/apps/website/screens/components/alert/AlertPageLayout.tsx
index 12bfe4ac93..f2c5e4ce03 100644
--- a/apps/website/screens/components/alert/AlertPageLayout.tsx
+++ b/apps/website/screens/components/alert/AlertPageLayout.tsx
@@ -11,7 +11,7 @@ const AlertPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/alert/code/examples/semantic.ts b/apps/website/screens/components/alert/code/examples/semantic.ts
index d64d4b4d48..805b7fc4dd 100644
--- a/apps/website/screens/components/alert/code/examples/semantic.ts
+++ b/apps/website/screens/components/alert/code/examples/semantic.ts
@@ -3,7 +3,7 @@ import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
+
-
+
{
return (
-
+
{
return (
-
+
setLoadDialog(1)} />
setLoadDialog(2)} />
setLoadDialog(3)} />
setLoadDialog(4)} />
{loadDialog !== 0 && (
-
+
{loadDialog === 1 && (
{
return (
-
+
{} }}
diff --git a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
index c420de33c3..ce513fb142 100644
--- a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
+++ b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
@@ -15,7 +15,7 @@ const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) =>
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/badge/BadgePageLayout.tsx b/apps/website/screens/components/badge/BadgePageLayout.tsx
index 37f2ab7aeb..ee3760247e 100644
--- a/apps/website/screens/components/badge/BadgePageLayout.tsx
+++ b/apps/website/screens/components/badge/BadgePageLayout.tsx
@@ -11,7 +11,7 @@ const BadgePageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
-
+
-
+
-
+
diff --git a/apps/website/screens/components/bleed/BleedPageLayout.tsx b/apps/website/screens/components/bleed/BleedPageLayout.tsx
index 9df070342c..e9b9cc295c 100644
--- a/apps/website/screens/components/bleed/BleedPageLayout.tsx
+++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx
@@ -11,7 +11,7 @@ const BleedPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/bleed/code/examples/customSides.ts b/apps/website/screens/components/bleed/code/examples/customSides.ts
index 2f79aeba95..8d51480313 100644
--- a/apps/website/screens/components/bleed/code/examples/customSides.ts
+++ b/apps/website/screens/components/bleed/code/examples/customSides.ts
@@ -6,7 +6,12 @@ const code = `() => {
+
+
-
+
diff --git a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
index bf5a3a8704..3d45cd86f3 100644
--- a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
+++ b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
@@ -14,7 +14,7 @@ const BulletedListPageHeading = ({ children }: { children: ReactNode }) => {
},
];
return (
-
+
-
+
@@ -85,7 +85,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/button/ButtonPageLayout.tsx b/apps/website/screens/components/button/ButtonPageLayout.tsx
index 2f3b8b0c50..b7289c1c77 100644
--- a/apps/website/screens/components/button/ButtonPageLayout.tsx
+++ b/apps/website/screens/components/button/ButtonPageLayout.tsx
@@ -11,7 +11,7 @@ const ButtonPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/button/code/examples/semantic.ts b/apps/website/screens/components/button/code/examples/semantic.ts
index 16ab6332e7..fe7d716aa2 100644
--- a/apps/website/screens/components/button/code/examples/semantic.ts
+++ b/apps/website/screens/components/button/code/examples/semantic.ts
@@ -3,7 +3,7 @@ import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
+
-
-
+
+
-
+
-
+
-
+
+
- Personal information
+
+ Personal information
+
);
diff --git a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
index af9d9ad8c5..2d0eab8e61 100644
--- a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
+++ b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
@@ -11,7 +11,7 @@ const CheckboxPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
+
-
+
diff --git a/apps/website/screens/components/chip/overview/examples/categorization.ts b/apps/website/screens/components/chip/overview/examples/categorization.ts
index d2dd832054..a86a150878 100644
--- a/apps/website/screens/components/chip/overview/examples/categorization.ts
+++ b/apps/website/screens/components/chip/overview/examples/categorization.ts
@@ -3,7 +3,7 @@ import { DxcChip, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
+
{}} />
{}} />
{}} />
diff --git a/apps/website/screens/components/chip/overview/examples/filter.ts b/apps/website/screens/components/chip/overview/examples/filter.ts
index 39fd2e7951..8f080fc665 100644
--- a/apps/website/screens/components/chip/overview/examples/filter.ts
+++ b/apps/website/screens/components/chip/overview/examples/filter.ts
@@ -13,8 +13,8 @@ const roles = ["Admin", "Security Analyst", "Auditor", "Read-Only User"];
};
return (
-
-
+ >
+
+
+
{selectedRoles.map((role) => (
{
];
return (
-
+
border
-
+
{borderTypeString}
being BorderProperties an object with the following properties:
diff --git a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
index 7932b3d2ff..296a6033b5 100644
--- a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
+++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
@@ -38,7 +38,7 @@ const sections = [
MDN web docs: CSS box model
-
+
{
];
return (
-
+
-
+
- (Item | GroupItem)[] | Section[]
+ (Item | GroupItem)[] | Section[]
being an Item an object with the following properties:
diff --git a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
index 119c920258..7eadec7ab6 100644
--- a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
+++ b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
@@ -12,7 +12,7 @@ const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/data-grid/usage/examples/filterable.ts b/apps/website/screens/components/data-grid/usage/examples/filterable.ts
index c9c1f1c19a..ed35dbd8ae 100644
--- a/apps/website/screens/components/data-grid/usage/examples/filterable.ts
+++ b/apps/website/screens/components/data-grid/usage/examples/filterable.ts
@@ -64,7 +64,7 @@ const code = `() => {
return (
-
+
{
];
return (
-
+
+
-
+
diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts b/apps/website/screens/components/dialog/code/examples/backgroundClick.ts
index c3cc1e3e18..da31c74a16 100644
--- a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts
+++ b/apps/website/screens/components/dialog/code/examples/backgroundClick.ts
@@ -12,7 +12,7 @@ const code = `() => {
-
+
Please enter your personal information.
diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.ts b/apps/website/screens/components/dialog/code/examples/basicUsage.ts
index 60ea21c3bc..81532cb33a 100644
--- a/apps/website/screens/components/dialog/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/dialog/code/examples/basicUsage.ts
@@ -12,7 +12,7 @@ const code = `() => {
-
+
Please enter your personal information.
diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.ts
index 8f42983e2d..06acaca22d 100644
--- a/apps/website/screens/components/dialog/code/examples/withContent.ts
+++ b/apps/website/screens/components/dialog/code/examples/withContent.ts
@@ -19,7 +19,7 @@ const code = `() => {
-
+
@@ -29,7 +29,7 @@ const code = `() => {
-
+
diff --git a/apps/website/screens/components/divider/DividerPageLayout.tsx b/apps/website/screens/components/divider/DividerPageLayout.tsx
index e1138eee11..95385b986b 100644
--- a/apps/website/screens/components/divider/DividerPageLayout.tsx
+++ b/apps/website/screens/components/divider/DividerPageLayout.tsx
@@ -11,7 +11,7 @@ const DividerPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
Lorem i psum dolor sit amet, consectetur adipiscing elit.
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
diff --git a/apps/website/screens/components/divider/code/examples/vertical.ts b/apps/website/screens/components/divider/code/examples/vertical.ts
index 01b9b806c2..0d77877076 100644
--- a/apps/website/screens/components/divider/code/examples/vertical.ts
+++ b/apps/website/screens/components/divider/code/examples/vertical.ts
@@ -2,7 +2,7 @@ import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/hal
const code = `() => {
return (
-
+
Lorem i psum dolor sit amet, consectetur adipiscing elit.
Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
diff --git a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
index 1fb0d5236c..9ad66d0e0a 100644
--- a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
+++ b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
@@ -11,7 +11,7 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -117,7 +117,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/file-input/FileInputPageLayout.tsx b/apps/website/screens/components/file-input/FileInputPageLayout.tsx
index 01012df243..8be932f0e6 100644
--- a/apps/website/screens/components/file-input/FileInputPageLayout.tsx
+++ b/apps/website/screens/components/file-input/FileInputPageLayout.tsx
@@ -15,7 +15,7 @@ const FileInputPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -165,7 +165,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/flex/FlexPageLayout.tsx b/apps/website/screens/components/flex/FlexPageLayout.tsx
index 115d1feb3b..315742fa11 100644
--- a/apps/website/screens/components/flex/FlexPageLayout.tsx
+++ b/apps/website/screens/components/flex/FlexPageLayout.tsx
@@ -11,7 +11,7 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts b/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts
index 9ff679dcca..1041d217db 100644
--- a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts
+++ b/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts
@@ -4,7 +4,7 @@ import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
3
diff --git a/apps/website/screens/components/footer/FooterPageLayout.tsx b/apps/website/screens/components/footer/FooterPageLayout.tsx
index dc32eaa4ad..2842415b0e 100644
--- a/apps/website/screens/components/footer/FooterPageLayout.tsx
+++ b/apps/website/screens/components/footer/FooterPageLayout.tsx
@@ -13,7 +13,7 @@ const FooterPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx b/apps/website/screens/components/footer/usage/FooterUsagePage.tsx
index 74682d2d96..7489d0b0aa 100644
--- a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx
+++ b/apps/website/screens/components/footer/usage/FooterUsagePage.tsx
@@ -37,13 +37,13 @@ const sections = [
contemplated in the following list:
-
+
Plain text or content
Informational purpose text
-
+
Menu links
Global navigation
@@ -51,7 +51,7 @@ const sections = [
Useful links or resources
-
+
Forms
Select language
@@ -59,7 +59,7 @@ const sections = [
Provide email adress / Subscribe
-
+
Actions
Ask for help / Support
diff --git a/apps/website/screens/components/grid/GridPageLayout.tsx b/apps/website/screens/components/grid/GridPageLayout.tsx
index 3733d96a3c..36876265a8 100644
--- a/apps/website/screens/components/grid/GridPageLayout.tsx
+++ b/apps/website/screens/components/grid/GridPageLayout.tsx
@@ -11,7 +11,7 @@ const GridPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -279,7 +279,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/header/HeaderPageLayout.tsx b/apps/website/screens/components/header/HeaderPageLayout.tsx
index e4e463d0df..2d0cf4f522 100644
--- a/apps/website/screens/components/header/HeaderPageLayout.tsx
+++ b/apps/website/screens/components/header/HeaderPageLayout.tsx
@@ -13,7 +13,7 @@ const HeaderPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
+
-
+
diff --git a/apps/website/screens/components/image/ImagePageLayout.tsx b/apps/website/screens/components/image/ImagePageLayout.tsx
index 3de90020ef..057bcb54e8 100644
--- a/apps/website/screens/components/image/ImagePageLayout.tsx
+++ b/apps/website/screens/components/image/ImagePageLayout.tsx
@@ -11,7 +11,7 @@ const ImagePageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -138,7 +138,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/inset/InsetPageLayout.tsx b/apps/website/screens/components/inset/InsetPageLayout.tsx
index 53e6d8f296..9a2e5ea3cb 100644
--- a/apps/website/screens/components/inset/InsetPageLayout.tsx
+++ b/apps/website/screens/components/inset/InsetPageLayout.tsx
@@ -11,7 +11,7 @@ const InsetPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/link/LinkPageLayout.tsx b/apps/website/screens/components/link/LinkPageLayout.tsx
index d2d2573222..83ed456665 100644
--- a/apps/website/screens/components/link/LinkPageLayout.tsx
+++ b/apps/website/screens/components/link/LinkPageLayout.tsx
@@ -11,7 +11,7 @@ const LinkPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/link/code/examples/icons.ts b/apps/website/screens/components/link/code/examples/icons.ts
index db9540937c..17e2b798aa 100644
--- a/apps/website/screens/components/link/code/examples/icons.ts
+++ b/apps/website/screens/components/link/code/examples/icons.ts
@@ -16,7 +16,7 @@ const code = `() => {
return (
-
+
This is a text with a Link with icon.
diff --git a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx
index 16077c5cd3..be248942ea 100644
--- a/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx
+++ b/apps/website/screens/components/nav-tabs/NavTabsPageLayout.tsx
@@ -11,7 +11,7 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
@@ -95,7 +95,7 @@ const sections = [
-
+
diff --git a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
index dabcadd6b2..b166a694c2 100644
--- a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
+++ b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
@@ -15,7 +15,7 @@ const NumberInputPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
index 9d06a6cfb3..8c8320c4b1 100644
--- a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
+++ b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
@@ -11,7 +11,7 @@ const PaginatorPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+ >
+
+ >
diff --git a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
index 65063328ca..a09291d316 100644
--- a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
+++ b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
@@ -12,7 +12,7 @@ const ParagraphPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
-
+
diff --git a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
index 897ee7b293..3c591827d3 100644
--- a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
+++ b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
@@ -3,7 +3,7 @@ import { DxcParagraph, DxcInset, DxcTypography, DxcFlex } from "@dxc-technology/
const code = `() => {
return (
-
+
Lorem ipsum dolor sit amet,{" "}
diff --git a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
index 8a3c6208e9..a88aa3b24b 100644
--- a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
+++ b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
@@ -15,7 +15,7 @@ const PasswordInputPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
+
diff --git a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
index 82aacea0db..49886de2d6 100644
--- a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
+++ b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
@@ -11,7 +11,7 @@ const ProgressBarPageHeading = ({ children }: { children: ReactNode }) => {
];
return (
-
+
+
-
+
diff --git a/apps/website/screens/components/quick-nav/code/examples/withContent.ts b/apps/website/screens/components/quick-nav/code/examples/withContent.ts
index 5ab83c25a0..9e3c25d07a 100644
--- a/apps/website/screens/components/quick-nav/code/examples/withContent.ts
+++ b/apps/website/screens/components/quick-nav/code/examples/withContent.ts
@@ -17,10 +17,10 @@ const code = `() => {