BREAKING: remove supp & sema tokens

Author: zettca

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/content/components/avatar.mdx

@@ -55,8 +55,8 @@ Avatars containing simple characters can be created by passing a string as child
 ```tsx live
 <div className="flex gap-xs">
   <HvAvatar>BM</HvAvatar>
-  <HvAvatar backgroundColor="sema19">W</HvAvatar>
-  <HvAvatar backgroundColor="sema6">CS</HvAvatar>
+  <HvAvatar backgroundColor="cat3">W</HvAvatar>
+  <HvAvatar backgroundColor="cat4">CS</HvAvatar>
 </div>
 ```
 
@@ -103,7 +103,7 @@ You can configure the `size` and `variant` of an avatar. When using an icon, set
 <div className="flex gap-xs">
   <HvAvatar size="xs" />
   <HvAvatar size="xs" variant="square" />
-  <HvAvatar backgroundColor="sema6" size="sm">
+  <HvAvatar backgroundColor="cat4" size="sm">
     NA
   </HvAvatar>
   <HvAvatar size="lg" backgroundColor="warning">
@@ -175,7 +175,7 @@ An avatar should be interacted with by wrapping it in an interactable element, s
     radius="base"
     className="size-fit!"
   >
-    <HvAvatar backgroundColor="sema19" size="md" badge="negative">
+    <HvAvatar backgroundColor="info" size="md" badge="negative">
       BM
     </HvAvatar>
   </HvButton>
@@ -186,7 +186,7 @@ An avatar should be interacted with by wrapping it in an interactable element, s
     className="size-fit!"
   >
     <HvAvatar
-      backgroundColor="sema19"
+      backgroundColor="info"
       size="md"
       variant="square"
       badge="negative"

packages/core/src/Avatar/Avatar.stories.tsx

@@ -65,13 +65,13 @@ export const Actions: StoryObj<HvAvatarProps> = {
           <HvAvatar size="md" />
         </HvButton>
         <HvButton icon aria-label="Business Manager">
-          <HvAvatar backgroundColor="sema19" size="md" badge="negative">
+          <HvAvatar backgroundColor="info" size="md" badge="negative">
             BM
           </HvAvatar>
         </HvButton>
         <HvButton icon aria-label="Business Manager" radius="none">
           <HvAvatar
-            backgroundColor="sema19"
+            backgroundColor="info"
             size="md"
             variant="square"
             badge="negative"
@@ -106,7 +106,7 @@ export const Test: StoryObj = {
     <div className="flex items-center gap-xs flex-wrap">
       <HvAvatar size="xs" />
       <HvAvatar size="xs" variant="square" />
-      <HvAvatar backgroundColor="sema6" size="sm">
+      <HvAvatar backgroundColor="cat4" size="sm">
         NA
       </HvAvatar>
       <HvAvatar size="lg" backgroundColor="warning">

packages/core/src/Card/Card.tsx

@@ -21,9 +21,9 @@ export interface HvCardProps extends HvBaseProps {
   /** Whether the card is currently selected. */
   selected?: boolean;
   /** The background color of the card. */
-  bgcolor?: "sema0" | HvColorAny;
+  bgcolor?: HvColorAny;
   /** The border color at the top of the card. */
-  statusColor?: "sema0" | HvColorAny;
+  statusColor?: HvColorAny;
   /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvCardClasses;
 }
@@ -44,16 +44,13 @@ export const HvCard = forwardRef<
     icon,
     selectable,
     selected,
-    statusColor = "sema0",
+    statusColor,
     bgcolor,
     ...others
   } = useDefaultProps("HvCard", props);
   const { classes, cx } = useClasses(classesProp);
 
-  const barColor =
-    (statusColor !== "sema0" && statusColor) ||
-    (selected && "text") ||
-    undefined;
+  const barColor = statusColor || (selected && "text") || undefined;
 
   return (
     <div

packages/core/src/Stack/Stack.stories.tsx

@@ -181,11 +181,7 @@ export const WithNavigation: StoryObj<HvStackProps> = {
             <div style={{ flex: 1 }} />
           </HvActionBar>
         </HvCard>
-        <HvCard
-          bgcolor="bgContainer"
-          statusColor="sema15"
-          style={{ width: 275 }}
-        >
+        <HvCard bgcolor="bgContainer" statusColor="info" style={{ width: 275 }}>
           <HvCardHeader title="Card 3" icon={<Tool />} />
           <HvCardContent>
             <div style={{ marginTop: "20px" }}>

packages/core/src/index.ts

@@ -10,7 +10,6 @@ export type {
   HvAtmosphereColor,
   HvBaseColor,
   HvSemanticColor,
-  HvSupportColor,
   HvCategoricalColor,
   HvColor,
   HvColorAny,
@@ -140,7 +139,6 @@ export * from "./providers/Provider";
 export * from "./providers/ThemeProvider";
 
 export * from "./types/generic";
-export * from "./types/tokens";
 
 export * from "./utils/browser";
 export * from "./utils/focusableElementFinder";

packages/core/src/themes/pentahoPlus.ts

@@ -624,7 +624,7 @@ export const pentahoPlus = mergeTheme(pentahoPlusBase, {
           outlineColor: theme.colors.borderSubtle,
           "--rb": theme.radii.large,
           // default non-semantic card
-          "&[data-color=sema0]": {
+          "&:not(:has([data-color]))": {
             overflow: "hidden",
             height: "fit-content",
             "--rt": theme.radii.large,

packages/core/src/types/tokens.ts

@@ -203,18 +203,9 @@ const categorical = {
   cat28: "#D8265D",
 };
 
-const support = {
-  supp1: "#0F8B8D",
-  supp2: "#734B6D",
-  supp3: "#4E7599",
-  supp4: "#C19C31",
-  supp5: "#546B6B",
-};
-
 const common = {
   ...base,
   ...categorical,
-  ...support,
 };
 
 // #region Light palette
@@ -247,20 +238,9 @@ const semanticLight = {
   negative_80: "#ED4747",
   negative_120: "#B41B3A",
   catastrophic: "#930A80",
-  sema6: "#AA00FF",
   neutral_20: "#D8E6F1",
   positive_20: "#D7E6CF",
   negative_20: "#F4D3D4",
-  sema10: "#CE703D",
-  sema11: "#D36041",
-  sema12: "#CF4E38",
-  sema13: "#CB3B30",
-  sema14: "#BA2626",
-  sema15: "#6589CB",
-  sema16: "#4D8AC0",
-  sema17: "#3388B1",
-  sema18: "#1A85A1",
-  sema19: "#00838F",
   warning_20: "#FBF2D8",
 };
 
@@ -366,20 +346,9 @@ const semanticDark = {
   negative_80: "#EC3D57",
   negative_120: "#D92750",
   catastrophic: "#9A76E7",
-  sema6: "#928FFF",
   neutral_20: "#D8E6F1",
   positive_20: "#D7E6CF",
   negative_20: "#F4D3D4",
-  sema10: "#F4CAB0",
-  sema11: "#F1B7A0",
-  sema12: "#EEA291",
-  sema13: "#E98B82",
-  sema14: "#E57373",
-  sema15: "#80DEEA",
-  sema16: "#4DD0E1",
-  sema17: "#26C6DA",
-  sema18: "#00ACC1",
-  sema19: "#00A0B7",
   warning_20: "#FBF2D8",
 };
 
@@ -484,7 +453,6 @@ export type HvAccentColor = keyof typeof accentLight;
 export type HvAtmosphereColor = keyof typeof atmosphereLight;
 export type HvBaseColor = keyof typeof base;
 export type HvSemanticColor = keyof typeof semanticLight;
-export type HvSupportColor = keyof typeof support;
 export type HvCategoricalColor = keyof typeof categorical;
 
 /** A type with all the accepted colors from the color palette */