@vector-im/compound-design-tokens 4.0.0 → 4.0.2

package/assets/web/css/cpd-common-semantic.css

@@ -15,6 +15,8 @@
   --cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
   --cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
   --cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
+  --cpd-color-text-badge-accent: var(--cpd-color-green-1100);
+  --cpd-color-text-badge-info: var(--cpd-color-blue-1100);
   --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
   --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
   --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
@@ -41,6 +43,8 @@
   --cpd-color-bg-accent-rest: var(--cpd-color-green-900);
   --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
   --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
+  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
+  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
   --cpd-color-border-disabled: var(--cpd-color-gray-500);
   --cpd-color-border-focused: var(--cpd-color-blue-900);
   --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);

package/assets/web/icons/guest.cjs

@@ -0,0 +1,21 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function GuestIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "M1.304 12.617a1.04 1.04 0 0 1 0-1.47l6.844-6.843a1.04 1.04 0 0 1 1.47 0l1.343 1.344-5.5 5.5a1.04 1.04 0 0 0 0 1.47l5.5 5.5-1.344 1.343a1.04 1.04 0 0 1-1.47 0zm6.235-1.47a1.04 1.04 0 0 0 0 1.47l6.844 6.844a1.04 1.04 0 0 0 1.47 0l6.843-6.843a1.04 1.04 0 0 0 0-1.47l-6.844-6.844a1.04 1.04 0 0 0-1.47 0z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+GuestIcon.displayName = "GuestIcon";
+module.exports = React.forwardRef(GuestIcon);

package/assets/web/icons/guest.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * guest.svg
+ */
+declare const GuestIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default GuestIcon;

package/assets/web/icons/guest.js

@@ -0,0 +1,21 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GuestIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M1.304 12.617a1.04 1.04 0 0 1 0-1.47l6.844-6.843a1.04 1.04 0 0 1 1.47 0l1.343 1.344-5.5 5.5a1.04 1.04 0 0 0 0 1.47l5.5 5.5-1.344 1.343a1.04 1.04 0 0 1-1.47 0zm6.235-1.47a1.04 1.04 0 0 0 0 1.47l6.844 6.844a1.04 1.04 0 0 0 1.47 0l6.843-6.843a1.04 1.04 0 0 0 0-1.47l-6.844-6.844a1.04 1.04 0 0 0-1.47 0z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+GuestIcon.displayName = "GuestIcon";
+export default forwardRef(GuestIcon);

package/assets/web/icons/index.cjs

@@ -64,6 +64,7 @@ module.exports = {
   ForwardIcon: require("./forward.cjs"),
   GridIcon: require("./grid.cjs"),
   GroupIcon: require("./group.cjs"),
+  GuestIcon: require("./guest.cjs"),
   HeadphonesOffSolidIcon: require("./headphones-off-solid.cjs"),
   HeadphonesSolidIcon: require("./headphones-solid.cjs"),
   HelpSolidIcon: require("./help-solid.cjs"),
@@ -193,5 +194,7 @@ module.exports = {
   VolumeOnIcon: require("./volume-on.cjs"),
   WarningIcon: require("./warning.cjs"),
   WebBrowserIcon: require("./web-browser.cjs"),
-  WindowsIcon: require("./windows.cjs")
+  WindowsIcon: require("./windows.cjs"),
+  WorkspaceSolidIcon: require("./workspace-solid.cjs"),
+  WorkspaceIcon: require("./workspace.cjs")
 };

package/assets/web/icons/index.d.ts

@@ -63,6 +63,7 @@ export { default as FilterIcon } from "./filter.js";
 export { default as ForwardIcon } from "./forward.js";
 export { default as GridIcon } from "./grid.js";
 export { default as GroupIcon } from "./group.js";
+export { default as GuestIcon } from "./guest.js";
 export { default as HeadphonesOffSolidIcon } from "./headphones-off-solid.js";
 export { default as HeadphonesSolidIcon } from "./headphones-solid.js";
 export { default as HelpSolidIcon } from "./help-solid.js";
@@ -192,4 +193,6 @@ export { default as VolumeOnSolidIcon } from "./volume-on-solid.js";
 export { default as VolumeOnIcon } from "./volume-on.js";
 export { default as WarningIcon } from "./warning.js";
 export { default as WebBrowserIcon } from "./web-browser.js";
-export { default as WindowsIcon } from "./windows.js";
+export { default as WindowsIcon } from "./windows.js";
+export { default as WorkspaceSolidIcon } from "./workspace-solid.js";
+export { default as WorkspaceIcon } from "./workspace.js";

package/assets/web/icons/index.js

@@ -63,6 +63,7 @@ export { default as FilterIcon } from "./filter.js";
 export { default as ForwardIcon } from "./forward.js";
 export { default as GridIcon } from "./grid.js";
 export { default as GroupIcon } from "./group.js";
+export { default as GuestIcon } from "./guest.js";
 export { default as HeadphonesOffSolidIcon } from "./headphones-off-solid.js";
 export { default as HeadphonesSolidIcon } from "./headphones-solid.js";
 export { default as HelpSolidIcon } from "./help-solid.js";
@@ -192,4 +193,6 @@ export { default as VolumeOnSolidIcon } from "./volume-on-solid.js";
 export { default as VolumeOnIcon } from "./volume-on.js";
 export { default as WarningIcon } from "./warning.js";
 export { default as WebBrowserIcon } from "./web-browser.js";
-export { default as WindowsIcon } from "./windows.js";
+export { default as WindowsIcon } from "./windows.js";
+export { default as WorkspaceSolidIcon } from "./workspace-solid.js";
+export { default as WorkspaceIcon } from "./workspace.js";

package/assets/web/icons/workspace-solid.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function WorkspaceSolidIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M3.175 19.825Q4.35 21 6 21t2.825-1.175T10 17t-1.175-2.825T6 13t-2.825 1.175T2 17t1.175 2.825m12 0Q16.35 21 18 21t2.825-1.175T22 17t-1.175-2.825T18 13t-2.825 1.175T14 17t1.175 2.825m-6-10Q10.35 11 12 11t2.825-1.175T16 7t-1.175-2.825T12 3 9.175 4.175 8 7t1.175 2.825"
+    })
+  });
+}
+;
+WorkspaceSolidIcon.displayName = "WorkspaceSolidIcon";
+module.exports = React.forwardRef(WorkspaceSolidIcon);

package/assets/web/icons/workspace-solid.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * workspace-solid.svg
+ */
+declare const WorkspaceSolidIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default WorkspaceSolidIcon;

package/assets/web/icons/workspace-solid.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function WorkspaceSolidIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M3.175 19.825Q4.35 21 6 21t2.825-1.175T10 17t-1.175-2.825T6 13t-2.825 1.175T2 17t1.175 2.825m12 0Q16.35 21 18 21t2.825-1.175T22 17t-1.175-2.825T18 13t-2.825 1.175T14 17t1.175 2.825m-6-10Q10.35 11 12 11t2.825-1.175T16 7t-1.175-2.825T12 3 9.175 4.175 8 7t1.175 2.825"
+    })
+  });
+}
+;
+WorkspaceSolidIcon.displayName = "WorkspaceSolidIcon";
+export default forwardRef(WorkspaceSolidIcon);

package/assets/web/icons/workspace.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+function WorkspaceIcon(props, ref) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
+    })
+  });
+}
+;
+WorkspaceIcon.displayName = "WorkspaceIcon";
+module.exports = React.forwardRef(WorkspaceIcon);

package/assets/web/icons/workspace.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+
+/**
+ * workspace.svg
+ */
+declare const WorkspaceIcon: React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export default WorkspaceIcon;

package/assets/web/icons/workspace.js

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function WorkspaceIcon(props, ref) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
+    })
+  });
+}
+;
+WorkspaceIcon.displayName = "WorkspaceIcon";
+export default forwardRef(WorkspaceIcon);

package/assets/web/js/cpdDark.d.ts

@@ -272,6 +272,9 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconWorkspace: string;
+export const cpdIconWorkspaceSolid: string;
+export const cpdIconGuest: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -597,6 +600,8 @@ export const cpdColorTextDecorative3: string;
 export const cpdColorTextDecorative4: string;
 export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
+export const cpdColorTextBadgeAccent: string;
+export const cpdColorTextBadgeInfo: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
 export const cpdColorBgCanvasDefault: string;
@@ -624,6 +629,8 @@ export const cpdColorBgDecorative6: string;
 export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
+export const cpdColorBgBadgeAccent: string;
+export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;

package/assets/web/js/cpdDark.js

@@ -297,6 +297,9 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconWorkspace = "icons/workspace.svg";
+export const cpdIconWorkspaceSolid = "icons/workspace-solid.svg";
+export const cpdIconGuest = "icons/guest.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#14171b";
 export const cpdColorGray200 = "#181a1f";
@@ -622,6 +625,8 @@ export const cpdColorTextDecorative3 = "#d991de";
 export const cpdColorTextDecorative4 = "#ad9cfe";
 export const cpdColorTextDecorative5 = "#fe84a2";
 export const cpdColorTextDecorative6 = "#f6913d";
+export const cpdColorTextBadgeAccent = "#1fc090";
+export const cpdColorTextBadgeInfo = "#7aacf4";
 export const cpdColorBgSubtlePrimary = "#26282d";
 export const cpdColorBgSubtleSecondary = "#1d1f24";
 export const cpdColorBgCanvasDefault = "#101317";
@@ -649,6 +654,8 @@ export const cpdColorBgDecorative6 = "#470000";
 export const cpdColorBgAccentRest = "#129a78";
 export const cpdColorBgAccentHovered = "#17ac84";
 export const cpdColorBgAccentPressed = "#1fc090";
+export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)";
+export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)";
 export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
 export const cpdColorBorderDisabled = "#323539";
 export const cpdColorBorderFocused = "#4187eb";

package/assets/web/js/cpdDarkHc.d.ts

@@ -272,6 +272,9 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconWorkspace: string;
+export const cpdIconWorkspaceSolid: string;
+export const cpdIconGuest: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -597,6 +600,8 @@ export const cpdColorTextDecorative3: string;
 export const cpdColorTextDecorative4: string;
 export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
+export const cpdColorTextBadgeAccent: string;
+export const cpdColorTextBadgeInfo: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
 export const cpdColorBgCanvasDefault: string;
@@ -624,6 +629,8 @@ export const cpdColorBgDecorative6: string;
 export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
+export const cpdColorBgBadgeAccent: string;
+export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;

package/assets/web/js/cpdDarkHc.js

@@ -297,6 +297,9 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconWorkspace = "icons/workspace.svg";
+export const cpdIconWorkspaceSolid = "icons/workspace-solid.svg";
+export const cpdIconGuest = "icons/guest.svg";
 export const cpdColorThemeBg = "#101317";
 export const cpdColorGray100 = "#181a1f";
 export const cpdColorGray200 = "#1d1f24";
@@ -622,6 +625,8 @@ export const cpdColorTextDecorative3 = "#eac0ed";
 export const cpdColorTextDecorative4 = "#cec7ff";
 export const cpdColorTextDecorative5 = "#ffbbca";
 export const cpdColorTextDecorative6 = "#fdc197";
+export const cpdColorTextBadgeAccent = "#8fddbc";
+export const cpdColorTextBadgeInfo = "#b2cffa";
 export const cpdColorBgSubtlePrimary = "#2b2e33";
 export const cpdColorBgSubtleSecondary = "#26282d";
 export const cpdColorBgCanvasDefault = "#101317";
@@ -649,6 +654,8 @@ export const cpdColorBgDecorative6 = "#580000";
 export const cpdColorBgAccentRest = "#37c998";
 export const cpdColorBgAccentHovered = "#61d2a6";
 export const cpdColorBgAccentPressed = "#8fddbc";
+export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)";
+export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)";
 export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
 export const cpdColorBorderDisabled = "#3c3f44";
 export const cpdColorBorderFocused = "#89b5f6";

package/assets/web/js/cpdLight.d.ts

@@ -272,6 +272,9 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconWorkspace: string;
+export const cpdIconWorkspaceSolid: string;
+export const cpdIconGuest: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -597,6 +600,8 @@ export const cpdColorTextDecorative3: string;
 export const cpdColorTextDecorative4: string;
 export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
+export const cpdColorTextBadgeAccent: string;
+export const cpdColorTextBadgeInfo: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
 export const cpdColorBgCanvasDefault: string;
@@ -624,6 +629,8 @@ export const cpdColorBgDecorative6: string;
 export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
+export const cpdColorBgBadgeAccent: string;
+export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;

package/assets/web/js/cpdLight.js

@@ -297,6 +297,9 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconWorkspace = "icons/workspace.svg";
+export const cpdIconWorkspaceSolid = "icons/workspace-solid.svg";
+export const cpdIconGuest = "icons/guest.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#fbfcfd";
 export const cpdColorGray200 = "#f7f9fa";
@@ -622,6 +625,8 @@ export const cpdColorTextDecorative3 = "#822198";
 export const cpdColorTextDecorative4 = "#5d26cd";
 export const cpdColorTextDecorative5 = "#9f0850";
 export const cpdColorTextDecorative6 = "#9b2200";
+export const cpdColorTextBadgeAccent = "#005c45";
+export const cpdColorTextBadgeInfo = "#064ab1";
 export const cpdColorBgSubtlePrimary = "#e1e6ec";
 export const cpdColorBgSubtleSecondary = "#f0f2f5";
 export const cpdColorBgCanvasDefault = "#ffffff";
@@ -649,6 +654,8 @@ export const cpdColorBgDecorative6 = "#ffefe4";
 export const cpdColorBgAccentRest = "#007a61";
 export const cpdColorBgAccentHovered = "#006b52";
 export const cpdColorBgAccentPressed = "#005c45";
+export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)";
+export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)";
 export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
 export const cpdColorBorderDisabled = "#cdd3da";
 export const cpdColorBorderFocused = "#0467dd";

package/assets/web/js/cpdLightHc.d.ts

@@ -272,6 +272,9 @@ export const cpdIconPresenceOutline8X8: string;
 export const cpdIconPresenceStrikethrough8X8: string;
 export const cpdIconError: string;
 export const cpdIconDialPad: string;
+export const cpdIconWorkspace: string;
+export const cpdIconWorkspaceSolid: string;
+export const cpdIconGuest: string;
 export const cpdColorThemeBg: string;
 export const cpdColorGray100: string;
 export const cpdColorGray200: string;
@@ -597,6 +600,8 @@ export const cpdColorTextDecorative3: string;
 export const cpdColorTextDecorative4: string;
 export const cpdColorTextDecorative5: string;
 export const cpdColorTextDecorative6: string;
+export const cpdColorTextBadgeAccent: string;
+export const cpdColorTextBadgeInfo: string;
 export const cpdColorBgSubtlePrimary: string;
 export const cpdColorBgSubtleSecondary: string;
 export const cpdColorBgCanvasDefault: string;
@@ -624,6 +629,8 @@ export const cpdColorBgDecorative6: string;
 export const cpdColorBgAccentRest: string;
 export const cpdColorBgAccentHovered: string;
 export const cpdColorBgAccentPressed: string;
+export const cpdColorBgBadgeAccent: string;
+export const cpdColorBgBadgeInfo: string;
 export const cpdColorBgSubtleSecondaryLevel0: string;
 export const cpdColorBorderDisabled: string;
 export const cpdColorBorderFocused: string;

package/assets/web/js/cpdLightHc.js

@@ -297,6 +297,9 @@ export const cpdIconPresenceStrikethrough8X8 =
   "icons/presence-strikethrough-8x8.svg";
 export const cpdIconError = "icons/error.svg";
 export const cpdIconDialPad = "icons/dial-pad.svg";
+export const cpdIconWorkspace = "icons/workspace.svg";
+export const cpdIconWorkspaceSolid = "icons/workspace-solid.svg";
+export const cpdIconGuest = "icons/guest.svg";
 export const cpdColorThemeBg = "#ffffff";
 export const cpdColorGray100 = "#f7f9fa";
 export const cpdColorGray200 = "#f0f2f5";
@@ -622,6 +625,8 @@ export const cpdColorTextDecorative3 = "#5c0f76";
 export const cpdColorTextDecorative4 = "#4200a6";
 export const cpdColorTextDecorative5 = "#72003a";
 export const cpdColorTextDecorative6 = "#770000";
+export const cpdColorTextBadgeAccent = "#00402b";
+export const cpdColorTextBadgeInfo = "#043088";
 export const cpdColorBgSubtlePrimary = "#d7dce3";
 export const cpdColorBgSubtleSecondary = "#e1e6ec";
 export const cpdColorBgCanvasDefault = "#ffffff";
@@ -649,6 +654,8 @@ export const cpdColorBgDecorative6 = "#ffdfc8";
 export const cpdColorBgAccentRest = "#00553d";
 export const cpdColorBgAccentHovered = "#004d36";
 export const cpdColorBgAccentPressed = "#00402b";
+export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
+export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
 export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
 export const cpdColorBorderDisabled = "#bdc4cc";
 export const cpdColorBorderFocused = "#0543a7";

package/icons/$icons.json

@@ -779,6 +779,18 @@
     "dial-pad": {
       "value": "icons/dial-pad.svg",
       "type": "icon"
+    },
+    "workspace": {
+      "value": "icons/workspace.svg",
+      "type": "icon"
+    },
+    "workspace-solid": {
+      "value": "icons/workspace-solid.svg",
+      "type": "icon"
+    },
+    "guest": {
+      "value": "icons/guest.svg",
+      "type": "icon"
     }
   }
 }

package/icons/guest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M1.304 12.617a1.04 1.04 0 0 1 0-1.47l6.844-6.843a1.04 1.04 0 0 1 1.47 0l1.343 1.344-5.5 5.5a1.04 1.04 0 0 0 0 1.47l5.5 5.5-1.344 1.343a1.04 1.04 0 0 1-1.47 0zm6.235-1.47a1.04 1.04 0 0 0 0 1.47l6.844 6.844a1.04 1.04 0 0 0 1.47 0l6.843-6.843a1.04 1.04 0 0 0 0-1.47l-6.844-6.844a1.04 1.04 0 0 0-1.47 0z" clip-rule="evenodd"/></svg>

package/icons/workspace-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M3.175 19.825Q4.35 21 6 21t2.825-1.175T10 17t-1.175-2.825T6 13t-2.825 1.175T2 17t1.175 2.825m12 0Q16.35 21 18 21t2.825-1.175T22 17t-1.175-2.825T18 13t-2.825 1.175T14 17t1.175 2.825m-6-10Q10.35 11 12 11t2.825-1.175T16 7t-1.175-2.825T12 3 9.175 4.175 8 7t1.175 2.825"/></svg>

package/icons/workspace.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-design-tokens",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Compound design tokens",
   "sideEffects": false,
   "scripts": {