chore: remove ds3 theme & its typographies & colors

apps/app/src/generator/Colors/utils.ts

@@ -25,24 +25,13 @@ const semanticColors = [
   "warning",
   "negative",
   "catastrophic",
-  "sema6",
   "neutral_20",
   "positive_80",
   "positive_120",
   "positive_20",
   "negative_20",
   "negative_120",
   "negative_80",
-  "sema10",
-  "sema11",
-  "sema12",
-  "sema13",
-  "sema14",
-  "sema15",
-  "sema16",
-  "sema17",
-  "sema18",
-  "sema19",
   "warning_20",
   "warning_140",
   "warning_120",

apps/docs/src/components/ThemeSwitcher.tsx

@@ -8,7 +8,6 @@ import { useDocsTheme } from "../hooks/useDocsTheme";
 const themes = [
   { value: "pentahoPlus", label: "Pentaho" },
   { value: "ds5", label: "NEXT v5" },
-  { value: "ds3", label: "NEXT v3" },
 ];
 
 const allowedPaths = [

apps/docs/src/components/code/DocsProvider.tsx

@@ -1,11 +1,6 @@
 import { useId } from "react";
 import { useTheme } from "nextra-theme-docs";
-import {
-  ds3,
-  ds5,
-  HvProvider,
-  pentahoPlus,
-} from "@hitachivantara/uikit-react-core";
+import { ds5, HvProvider, pentahoPlus } from "@hitachivantara/uikit-react-core";
 
 import { useDocsTheme } from "../../hooks/useDocsTheme";
 
@@ -21,7 +16,7 @@ export const DocsProvider = ({
     // ensures docs container styles change according to theme
     <div id={id} className={className} data-pagefind-ignore>
       <HvProvider
-        themes={[pentahoPlus, ds5, ds3]}
+        themes={[pentahoPlus, ds5]}
         theme={docsTheme}
         colorMode={resolvedTheme === "dark" ? "wicked" : "dawn"}
         cssTheme="scoped"

apps/docs/src/components/usage/AlignmentBadge.tsx

@@ -15,7 +15,6 @@ export const AlignmentBadge = ({ component }: AlignmentBadgeProps) => {
   const items = [
     ["Pentaho", values.pentahoPlus || "—"],
     ["NEXT v5", values.ds5 || "—"],
-    ["NEXT v3", values.ds3 || "—"],
   ];
 
   return (

apps/docs/src/components/usage/alignmentData.ts

@@ -1,66 +1,65 @@
 // latest versions
-const ds3 = "3.6.0";
 const ds5 = "5.9.5";
 const pentahoPlus = "0.4.0";
 
 export const alignmentData: Record<
   string,
-  { ds3: string; ds5: string; pentahoPlus: string }
+  { ds5: string; pentahoPlus: string }
 > = {
-  Accordion: { ds3, ds5, pentahoPlus },
-  ActionBar: { ds3, ds5, pentahoPlus },
-  AppSwitcher: { ds3, ds5, pentahoPlus },
-  Avatar: { ds3, ds5, pentahoPlus },
-  AvatarGroup: { ds3, ds5, pentahoPlus },
-  Badge: { ds3, ds5, pentahoPlus },
-  Banner: { ds3, ds5, pentahoPlus },
-  BreadCrumb: { ds3, ds5, pentahoPlus },
-  BulkActions: { ds3, ds5, pentahoPlus },
-  Button: { ds3, ds5, pentahoPlus },
-  Card: { ds3, ds5, pentahoPlus },
-  Carousel: { ds3, ds5, pentahoPlus },
-  Checkbox: { ds3, ds5, pentahoPlus },
-  CheckboxGroup: { ds3, ds5, pentahoPlus },
-  CodeEditor: { ds3, ds5, pentahoPlus },
-  ColorPicker: { ds3, ds5, pentahoPlus },
-  Container: { ds3, ds5, pentahoPlus },
-  DatePicker: { ds3, ds5, pentahoPlus },
-  Dialog: { ds3, ds5, pentahoPlus },
-  DotPagination: { ds3, ds5, pentahoPlus },
-  Drawer: { ds3, ds5, pentahoPlus },
-  Dropdown: { ds3, ds5, pentahoPlus },
-  DropDownMenu: { ds3, ds5, pentahoPlus },
-  EmptyState: { ds3, ds5, pentahoPlus },
-  FileUploader: { ds3, ds5, pentahoPlus },
-  FilterGroup: { ds3, ds5, pentahoPlus },
-  Footer: { ds3, ds5, pentahoPlus },
-  GlobalActions: { ds3, ds5, pentahoPlus },
-  Header: { ds3, ds5, pentahoPlus },
-  Input: { ds3, ds5, pentahoPlus },
-  Loading: { ds3, ds5: "5.9.3", pentahoPlus },
-  MultiButton: { ds3, ds5: "5.9.3", pentahoPlus },
-  NumberInput: { ds3, ds5, pentahoPlus },
-  Pagination: { ds3, ds5: "5.9.3", pentahoPlus },
-  ProgressBar: { ds3, ds5: "5.9.3", pentahoPlus },
-  Radio: { ds3, ds5, pentahoPlus },
-  RadioGroup: { ds3, ds5, pentahoPlus },
-  ScrollToHorizontal: { ds3, ds5, pentahoPlus },
-  ScrollToVertical: { ds3, ds5, pentahoPlus },
-  SearchInput: { ds3, ds5, pentahoPlus },
-  Section: { ds3, ds5, pentahoPlus },
-  Select: { ds3, ds5, pentahoPlus },
-  Skeleton: { ds3, ds5, pentahoPlus },
-  Slider: { ds3, ds5: "5.9.3", pentahoPlus },
-  Snackbar: { ds3, ds5, pentahoPlus },
-  Switch: { ds3, ds5, pentahoPlus },
-  // Table: { ds3, ds5, pentahoPlus },
-  Tabs: { ds3, ds5, pentahoPlus },
-  Tag: { ds3, ds5: "5.9.3", pentahoPlus },
-  TagsInput: { ds3, ds5: "5.9.3", pentahoPlus },
-  TextArea: { ds3, ds5, pentahoPlus },
-  TimePicker: { ds3, ds5, pentahoPlus },
-  ToggleButton: { ds3, ds5, pentahoPlus },
-  Tooltip: { ds3, ds5, pentahoPlus },
-  Typography: { ds3, ds5, pentahoPlus },
-  VerticalNavigation: { ds3, ds5: "5.9.3", pentahoPlus },
+  Accordion: { ds5, pentahoPlus },
+  ActionBar: { ds5, pentahoPlus },
+  AppSwitcher: { ds5, pentahoPlus },
+  Avatar: { ds5, pentahoPlus },
+  AvatarGroup: { ds5, pentahoPlus },
+  Badge: { ds5, pentahoPlus },
+  Banner: { ds5, pentahoPlus },
+  BreadCrumb: { ds5, pentahoPlus },
+  BulkActions: { ds5, pentahoPlus },
+  Button: { ds5, pentahoPlus },
+  Card: { ds5, pentahoPlus },
+  Carousel: { ds5, pentahoPlus },
+  Checkbox: { ds5, pentahoPlus },
+  CheckboxGroup: { ds5, pentahoPlus },
+  CodeEditor: { ds5, pentahoPlus },
+  ColorPicker: { ds5, pentahoPlus },
+  Container: { ds5, pentahoPlus },
+  DatePicker: { ds5, pentahoPlus },
+  Dialog: { ds5, pentahoPlus },
+  DotPagination: { ds5, pentahoPlus },
+  Drawer: { ds5, pentahoPlus },
+  Dropdown: { ds5, pentahoPlus },
+  DropDownMenu: { ds5, pentahoPlus },
+  EmptyState: { ds5, pentahoPlus },
+  FileUploader: { ds5, pentahoPlus },
+  FilterGroup: { ds5, pentahoPlus },
+  Footer: { ds5, pentahoPlus },
+  GlobalActions: { ds5, pentahoPlus },
+  Header: { ds5, pentahoPlus },
+  Input: { ds5, pentahoPlus },
+  Loading: { ds5: "5.9.3", pentahoPlus },
+  MultiButton: { ds5: "5.9.3", pentahoPlus },
+  NumberInput: { ds5, pentahoPlus },
+  Pagination: { ds5: "5.9.3", pentahoPlus },
+  ProgressBar: { ds5: "5.9.3", pentahoPlus },
+  Radio: { ds5, pentahoPlus },
+  RadioGroup: { ds5, pentahoPlus },
+  ScrollToHorizontal: { ds5, pentahoPlus },
+  ScrollToVertical: { ds5, pentahoPlus },
+  SearchInput: { ds5, pentahoPlus },
+  Section: { ds5, pentahoPlus },
+  Select: { ds5, pentahoPlus },
+  Skeleton: { ds5, pentahoPlus },
+  Slider: { ds5: "5.9.3", pentahoPlus },
+  Snackbar: { ds5, pentahoPlus },
+  Switch: { ds5, pentahoPlus },
+  // Table: {  ds5, pentahoPlus },
+  Tabs: { ds5, pentahoPlus },
+  Tag: { ds5: "5.9.3", pentahoPlus },
+  TagsInput: { ds5: "5.9.3", pentahoPlus },
+  TextArea: { ds5, pentahoPlus },
+  TimePicker: { ds5, pentahoPlus },
+  ToggleButton: { ds5, pentahoPlus },
+  Tooltip: { ds5, pentahoPlus },
+  Typography: { ds5, pentahoPlus },
+  VerticalNavigation: { ds5: "5.9.3", pentahoPlus },
 };

apps/docs/src/content/app-shell/configuration.mdx

@@ -298,7 +298,7 @@ This property defines the theme of the _Product_, and it supports both the base
 
 The config object for it has the following options:
 
-- `themes`: Array of available themes. Can be one of the built-in UI Kit themes (`"ds3"`, `"ds5"`, `"pentahoPlus"`), or a custom theme identified by the module.
+- `themes`: Array of available themes. Can be one of the built-in UI Kit themes (`"ds5"`, `"pentahoPlus"`), or a custom theme identified by the module.
 - `theme`: The active theme. It is the name defined in the theme definition, not the module name. Defaults to the first theme in the themes array.
 - `colorMode`: The color mode of the theme. Defaults to the default color mode of the theme. UI Kit base themes support "dawn" and "wicked" color modes (defaulting to "dawn"). Custom themes define their own color modes.
 

apps/docs/src/content/docs/theming.mdx

@@ -10,7 +10,7 @@ The **theme** object serves as the **UI Kit** foundation, defining all styling s
 
 **UI Kit** includes three default themes, each available in two color modes: **dawn** (light) and **wicked** (dark):
 
-- **ds3** and **ds5** — aligned with the [Next Design System](https://designsystem.hitachi.com)
+- **ds5** — aligned with the [Next Design System](https://designsystem.hitachi.com)
 - **pentahoPlus** — aligned with the Pentaho Design System
 
 Use the `HvProvider` to configure the active theme and color mode:

packages/app-shell-ui/src/pages/ErrorPage/ErrorPage.tsx

@@ -36,7 +36,7 @@ const ErrorPage = ({
     >
       <StyledTitleWrapper>
         {code && <HvTypography variant="title1">{code}</HvTypography>}
-        <HvTypography variant={isCompactMode ? "xsTitle" : "display"}>
+        <HvTypography variant={isCompactMode ? "title3" : "display"}>
           {title}
         </HvTypography>
       </StyledTitleWrapper>

packages/core/src/Carousel/Carousel.styles.ts

@@ -48,7 +48,7 @@ export const { staticClasses, useClasses } = createClasses("HvCarousel", {
     justifyContent: "flex-end",
     right: 0,
 
-    position: "relative",
+    position: "absolute",
   },
   closeButton: {},
 

packages/core/src/Carousel/Carousel.tsx

@@ -10,7 +10,6 @@ import useCarousel from "embla-carousel-react";
 import {
   clamp,
   useDefaultProps,
-  useTheme,
   type ExtractNames,
 } from "@hitachivantara/uikit-react-utils";
 
@@ -111,15 +110,13 @@ export const HvCarousel = forwardRef<
     onFullscreen,
     ...others
   } = useDefaultProps("HvCarousel", props);
-  const { activeTheme } = useTheme();
-  const { classes, css, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProps);
   const thumbnailsRef = useRef<HTMLDivElement>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
-  const isDs3 = activeTheme?.base === "ds3";
-  const actionsPosition = isDs3 ? "header" : "controls";
-  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
+  const actionsPosition = "controls";
+  const controlsPosition = controlsPositionProp ?? "top";
   const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
 
   const [containerRef, controller] = useCarousel({
@@ -196,14 +193,7 @@ export const HvCarousel = forwardRef<
   const showDots = showDotsProp ?? numSlides <= 5;
 
   const actions = (
-    <div
-      className={cx(
-        classes.actions,
-        actionsPosition === "header"
-          ? css({ position: "relative", top: -40, height: 0 })
-          : css({ position: "absolute" }),
-      )}
-    >
+    <div className={classes.actions}>
       {actionsProp}
       {showFullscreen && (
         <HvIconButton
@@ -261,8 +251,6 @@ export const HvCarousel = forwardRef<
           {title}
         </HvTypography>
       )}
-
-      {actionsPosition === "header" && actions}
       {thumbnailsPosition === "top" && thumbnails}
       {controlsPosition === "top" && controls}
       <div

packages/core/src/DatePicker/DatePicker.stories.tsx

@@ -284,7 +284,7 @@ export const Test: StoryObj<HvDatePickerProps> = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole("button", { name: /october/i }));
   },
-  ...setupChromatic(["DS3 dawn", "DS5 dawn", "Pentaho dawn"], 5000),
+  ...setupChromatic(["DS5 dawn", "Pentaho dawn"], 5000),
   render: (args, context: any) => {
     const value = new Date("2023-01-01");
     return (

packages/core/src/Dialog/Dialog.stories.tsx

@@ -51,7 +51,7 @@ export const SemanticVariants: StoryObj<HvDialogProps> = {
           "The `HvDialog` component can receive a `variant` prop to set the status of the dialog. `HvDialogTitle` also accepts a `variant` prop that changes the icon. Alternatively, the `customIcon` prop allows for any custom icon",
       },
     },
-    ...setupChromatic(["DS3 dawn", "DS5 dawn", "Pentaho dawn"]),
+    ...setupChromatic(["DS5 dawn", "Pentaho dawn"]),
   },
   decorators: [
     (Story) => (

packages/core/src/FilterGroup/FilterGroup.stories.tsx

@@ -74,7 +74,7 @@ const filters: HvFilterGroupProps["filters"] = [
 
 export const Main: StoryObj<HvFilterGroupProps> = {
   parameters: {
-    ...setupChromatic(["DS3 dawn", "DS5 dawn", "Pentaho dawn"]),
+    ...setupChromatic(["DS5 dawn", "Pentaho dawn"]),
   },
   // For visual testing and a11y
   play: async ({ canvasElement }) => {

packages/core/src/Table/stories/Table.stories.tsx

@@ -116,8 +116,6 @@ export const TableRenderers: StoryObj = {
 export const Test: StoryObj = {
   parameters: {
     ...setupChromatic([
-      "DS3 dawn",
-      "DS3 wicked",
       "DS5 dawn",
       "DS5 wicked",
       "Pentaho dawn",

packages/core/src/TimePicker/TimePicker.stories.tsx

@@ -74,7 +74,7 @@ export const Variants: StoryObj<HvTimePickerProps> = {
           "Time Pickers in their various form state variants. `defaultValue` is used to configure the _uncontrolled_ initial value.",
       },
     },
-    ...setupChromatic(["DS3 dawn", "DS5 dawn", "Pentaho dawn"]),
+    ...setupChromatic(["DS5 dawn", "Pentaho dawn"]),
   },
   // For a11y
   play: async ({ canvasElement }) => {

packages/core/src/Typography/Typography.stories.tsx

@@ -1,9 +1,19 @@
 import type { StoryObj } from "@storybook/react-vite";
-import {
-  HvTypography,
-  HvTypographyProps,
-  typographyVariants,
-} from "@hitachivantara/uikit-react-core";
+
+import { HvTypography, HvTypographyProps } from "./Typography";
+
+const typographyVariants = [
+  "display",
+  "title1",
+  "title2",
+  "title3",
+  "title4",
+  "body",
+  "label",
+  "captionLabel",
+  "caption1",
+  "caption2",
+] satisfies HvTypographyProps["variant"][];
 
 export default {
   title: "Components/Typography",

packages/core/src/Typography/Typography.styles.ts

@@ -19,43 +19,4 @@ export const { useClasses, staticClasses } = createClasses("HvTypography", {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
   },
-  // variants
-  display: {},
-  title1: {},
-  title2: {},
-  title3: {},
-  title4: {},
-  body: {},
-  label: {},
-  captionLabel: {},
-  caption1: {},
-  caption2: {},
-  // legacy variants
-  // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants
-  "5xlTitle": {},
-  "4xlTitle": {},
-  // @ts-ignore non-existent variant
-  "3xlTitle": {},
-  xxlTitle: {},
-  xlTitle: {},
-  lTitle: {},
-  mTitle: {},
-  sTitle: {},
-  xsTitle: {},
-  xxsTitle: {},
-  sectionTitle: {
-    textTransform: "uppercase",
-  },
-  highlightText: {},
-  normalText: {},
-  placeholderText: {},
-  link: {
-    cursor: "pointer",
-    textDecoration: "underline",
-  },
-  disabledText: {},
-  selectedNavText: {},
-  vizText: {},
-  vizTextDisabled: {},
-  xsInlineLink: {},
 });