@vector-im/compound-design-tokens 6.9.0 → 6.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/assets/web/css/cpd-common-semantic.css +6 -14
  2. package/assets/web/icons/index.cjs +2 -0
  3. package/assets/web/icons/index.d.ts +2 -0
  4. package/assets/web/icons/index.js +2 -0
  5. package/assets/web/icons/re-order.cjs +19 -0
  6. package/assets/web/icons/re-order.d.ts +11 -0
  7. package/assets/web/icons/re-order.js +19 -0
  8. package/assets/web/icons/section.cjs +19 -0
  9. package/assets/web/icons/section.d.ts +11 -0
  10. package/assets/web/icons/section.js +19 -0
  11. package/assets/web/js/cpdDark.d.ts +2 -8
  12. package/assets/web/js/cpdDark.js +8 -14
  13. package/assets/web/js/cpdDarkHc.d.ts +2 -8
  14. package/assets/web/js/cpdDarkHc.js +8 -14
  15. package/assets/web/js/cpdLight.d.ts +2 -8
  16. package/assets/web/js/cpdLight.js +8 -14
  17. package/assets/web/js/cpdLightHc.d.ts +2 -8
  18. package/assets/web/js/cpdLightHc.js +8 -14
  19. package/icons/$icons.json +8 -0
  20. package/icons/re-order.svg +1 -0
  21. package/icons/section.svg +1 -0
  22. package/package.json +1 -1
package/assets/web/css/cpd-common-semantic.css CHANGED
@@ -79,19 +79,11 @@
79
79
  --cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
80
80
  --cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
81
81
  --cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
82
- --cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
83
- --cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
84
- --cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
85
- --cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
86
- --cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
87
- --cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
88
- --cpd-color-gradient-critical-stop1: var(--cpd-color-alpha-red-500);
89
- --cpd-color-gradient-critical-stop2: var(--cpd-color-alpha-red-400);
90
- --cpd-color-gradient-critical-stop3: var(--cpd-color-alpha-red-300);
91
- --cpd-color-gradient-critical-stop4: var(--cpd-color-alpha-red-200);
92
- --cpd-color-gradient-critical-stop5: var(--cpd-color-alpha-red-100);
93
- --cpd-color-gradient-critical-stop6: var(--cpd-color-transparent);
82
+ --cpd-color-gradient-info-stop2: var(--cpd-color-theme-bg);
83
+ --cpd-color-gradient-critical-stop2: var(--cpd-color-theme-bg);
94
84
  --cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
95
- --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
96
- --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 20%, var(--cpd-color-gradient-critical-stop3) 40%, var(--cpd-color-gradient-critical-stop4) 60%, var(--cpd-color-gradient-critical-stop5) 80%, var(--cpd-color-gradient-critical-stop6) 100%);
85
+ --cpd-color-gradient-info-stop1: var(--cpd-color-bg-info-subtle);
86
+ --cpd-color-gradient-critical-stop1: var(--cpd-color-bg-critical-subtle);
87
+ --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 100%);
88
+ --cpd-color-gradient-critical-linear: linear-gradient(180deg, var(--cpd-color-gradient-critical-stop1) 0%, var(--cpd-color-gradient-critical-stop2) 100%);
97
89
  }
package/assets/web/icons/index.cjs CHANGED
@@ -147,6 +147,7 @@ module.exports = {
147
147
  QrCodeIcon: require("./qr-code.cjs"),
148
148
  QuoteIcon: require("./quote.cjs"),
149
149
  RaisedHandSolidIcon: require("./raised-hand-solid.cjs"),
150
+ ReOrderIcon: require("./re-order.cjs"),
150
151
  ReactionAddIcon: require("./reaction-add.cjs"),
151
152
  ReactionSolidIcon: require("./reaction-solid.cjs"),
152
153
  ReactionIcon: require("./reaction.cjs"),
@@ -156,6 +157,7 @@ module.exports = {
156
157
  RotateLeftIcon: require("./rotate-left.cjs"),
157
158
  RotateRightIcon: require("./rotate-right.cjs"),
158
159
  SearchIcon: require("./search.cjs"),
160
+ SectionIcon: require("./section.cjs"),
159
161
  SendSolidIcon: require("./send-solid.cjs"),
160
162
  SendIcon: require("./send.cjs"),
161
163
  SettingsSolidIcon: require("./settings-solid.cjs"),
package/assets/web/icons/index.d.ts CHANGED
@@ -146,6 +146,7 @@ export { default as PublicIcon } from "./public.js";
146
146
  export { default as QrCodeIcon } from "./qr-code.js";
147
147
  export { default as QuoteIcon } from "./quote.js";
148
148
  export { default as RaisedHandSolidIcon } from "./raised-hand-solid.js";
149
+ export { default as ReOrderIcon } from "./re-order.js";
149
150
  export { default as ReactionAddIcon } from "./reaction-add.js";
150
151
  export { default as ReactionSolidIcon } from "./reaction-solid.js";
151
152
  export { default as ReactionIcon } from "./reaction.js";
@@ -155,6 +156,7 @@ export { default as RoomIcon } from "./room.js";
155
156
  export { default as RotateLeftIcon } from "./rotate-left.js";
156
157
  export { default as RotateRightIcon } from "./rotate-right.js";
157
158
  export { default as SearchIcon } from "./search.js";
159
+ export { default as SectionIcon } from "./section.js";
158
160
  export { default as SendSolidIcon } from "./send-solid.js";
159
161
  export { default as SendIcon } from "./send.js";
160
162
  export { default as SettingsSolidIcon } from "./settings-solid.js";
package/assets/web/icons/index.js CHANGED
@@ -146,6 +146,7 @@ export { default as PublicIcon } from "./public.js";
146
146
  export { default as QrCodeIcon } from "./qr-code.js";
147
147
  export { default as QuoteIcon } from "./quote.js";
148
148
  export { default as RaisedHandSolidIcon } from "./raised-hand-solid.js";
149
+ export { default as ReOrderIcon } from "./re-order.js";
149
150
  export { default as ReactionAddIcon } from "./reaction-add.js";
150
151
  export { default as ReactionSolidIcon } from "./reaction-solid.js";
151
152
  export { default as ReactionIcon } from "./reaction.js";
@@ -155,6 +156,7 @@ export { default as RoomIcon } from "./room.js";
155
156
  export { default as RotateLeftIcon } from "./rotate-left.js";
156
157
  export { default as RotateRightIcon } from "./rotate-right.js";
157
158
  export { default as SearchIcon } from "./search.js";
159
+ export { default as SectionIcon } from "./section.js";
158
160
  export { default as SendSolidIcon } from "./send-solid.js";
159
161
  export { default as SendIcon } from "./send.js";
160
162
  export { default as SettingsSolidIcon } from "./settings-solid.js";
package/assets/web/icons/re-order.cjs ADDED
@@ -0,0 +1,19 @@
1
+ var _reactJsxRuntime = require("react/jsx-runtime");
2
+ var React = require("react");
3
+ function ReOrderIcon(props, ref) {
4
+ return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "currentColor",
9
+ viewBox: "0 0 24 24",
10
+ ref: ref,
11
+ ...props,
12
+ children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
13
+ d: "M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
14
+ })
15
+ });
16
+ }
17
+ ;
18
+ ReOrderIcon.displayName = "ReOrderIcon";
19
+ module.exports = React.forwardRef(ReOrderIcon);
package/assets/web/icons/re-order.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+
3
+ /**
4
+ * re-order.svg
5
+ */
6
+ declare const ReOrderIcon: React.ForwardRefExoticComponent<
7
+ Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
8
+ React.RefAttributes<SVGSVGElement>
9
+ >;
10
+
11
+ export default ReOrderIcon;
package/assets/web/icons/re-order.js ADDED
@@ -0,0 +1,19 @@
1
+ import { forwardRef } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ function ReOrderIcon(props, ref) {
4
+ return /*#__PURE__*/_jsx("svg", {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "currentColor",
9
+ viewBox: "0 0 24 24",
10
+ ref: ref,
11
+ ...props,
12
+ children: /*#__PURE__*/_jsx("path", {
13
+ d: "M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
14
+ })
15
+ });
16
+ }
17
+ ;
18
+ ReOrderIcon.displayName = "ReOrderIcon";
19
+ export default forwardRef(ReOrderIcon);
package/assets/web/icons/section.cjs ADDED
@@ -0,0 +1,19 @@
1
+ var _reactJsxRuntime = require("react/jsx-runtime");
2
+ var React = require("react");
3
+ function SectionIcon(props, ref) {
4
+ return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "currentColor",
9
+ viewBox: "0 0 24 24",
10
+ ref: ref,
11
+ ...props,
12
+ children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
13
+ d: "M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"
14
+ })
15
+ });
16
+ }
17
+ ;
18
+ SectionIcon.displayName = "SectionIcon";
19
+ module.exports = React.forwardRef(SectionIcon);
package/assets/web/icons/section.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+
3
+ /**
4
+ * section.svg
5
+ */
6
+ declare const SectionIcon: React.ForwardRefExoticComponent<
7
+ Omit<React.SVGProps<SVGSVGElement>, "ref" | "children"> &
8
+ React.RefAttributes<SVGSVGElement>
9
+ >;
10
+
11
+ export default SectionIcon;
package/assets/web/icons/section.js ADDED
@@ -0,0 +1,19 @@
1
+ import { forwardRef } from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ function SectionIcon(props, ref) {
4
+ return /*#__PURE__*/_jsx("svg", {
5
+ xmlns: "http://www.w3.org/2000/svg",
6
+ width: "1em",
7
+ height: "1em",
8
+ fill: "currentColor",
9
+ viewBox: "0 0 24 24",
10
+ ref: ref,
11
+ ...props,
12
+ children: /*#__PURE__*/_jsx("path", {
13
+ d: "M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"
14
+ })
15
+ });
16
+ }
17
+ ;
18
+ SectionIcon.displayName = "SectionIcon";
19
+ export default forwardRef(SectionIcon);
package/assets/web/js/cpdDark.d.ts CHANGED
@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
276
276
  export const cpdIconPresenceStrikethrough8X8: string;
277
277
  export const cpdIconError: string;
278
278
  export const cpdIconDialPad: string;
279
+ export const cpdIconReOrder: string;
279
280
  export const cpdIconSpace: string;
280
281
  export const cpdIconSpaceSolid: string;
281
282
  export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
299
300
  export const cpdIconStopSolid: string;
300
301
  export const cpdIconStop: string;
301
302
  export const cpdIconTheme: string;
303
+ export const cpdIconSection: string;
302
304
  export const cpdColorThemeBg: string;
303
305
  export const cpdColorGray100: string;
304
306
  export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
697
699
  export const cpdColorGradientSubtleLinear: string;
698
700
  export const cpdColorGradientInfoStop1: string;
699
701
  export const cpdColorGradientInfoStop2: string;
700
- export const cpdColorGradientInfoStop3: string;
701
- export const cpdColorGradientInfoStop4: string;
702
- export const cpdColorGradientInfoStop5: string;
703
- export const cpdColorGradientInfoStop6: string;
704
702
  export const cpdColorGradientInfoLinear: string;
705
703
  export const cpdColorGradientCriticalStop1: string;
706
704
  export const cpdColorGradientCriticalStop2: string;
707
- export const cpdColorGradientCriticalStop3: string;
708
- export const cpdColorGradientCriticalStop4: string;
709
- export const cpdColorGradientCriticalStop5: string;
710
- export const cpdColorGradientCriticalStop6: string;
711
705
  export const cpdColorGradientCriticalLinear: string;
712
706
  export const cpdColorGradientActionStop1: string;
713
707
  export const cpdColorGradientActionStop2: string;
package/assets/web/js/cpdDark.js CHANGED
@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
301
301
  "icons/presence-strikethrough-8x8.svg";
302
302
  export const cpdIconError = "icons/error.svg";
303
303
  export const cpdIconDialPad = "icons/dial-pad.svg";
304
+ export const cpdIconReOrder = "icons/re-order.svg";
304
305
  export const cpdIconSpace = "icons/space.svg";
305
306
  export const cpdIconSpaceSolid = "icons/space-solid.svg";
306
307
  export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
327
328
  export const cpdIconStopSolid = "icons/stop-solid.svg";
328
329
  export const cpdIconStop = "icons/stop.svg";
329
330
  export const cpdIconTheme = "icons/theme.svg";
331
+ export const cpdIconSection = "icons/section.svg";
330
332
  export const cpdColorThemeBg = "#101317";
331
333
  export const cpdColorGray100 = "#14171b";
332
334
  export const cpdColorGray200 = "#181a1f";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsl(144, 100%, 6%, 1)";
724
726
  export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
725
727
  export const cpdColorGradientSubtleLinear =
726
728
  "linear-gradient(180deg, hsl(160, 100%, 12%, 1) 0%, hsl(155, 100%, 9%, 1) 20%, hsl(151, 100%, 7%, 1) 40%, hsl(147, 100%, 6%, 1) 60%, hsl(144, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
727
- export const cpdColorGradientInfoStop1 = "hsla(221, 100%, 37%, 0.63)";
728
- export const cpdColorGradientInfoStop2 = "hsl(224, 100%, 22%, 1)";
729
- export const cpdColorGradientInfoStop3 = "hsl(229, 100%, 20%, 1)";
730
- export const cpdColorGradientInfoStop4 = "hsl(234, 100%, 18%, 1)";
731
- export const cpdColorGradientInfoStop5 = "hsl(237, 100%, 18%, 1)";
732
- export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
729
+ export const cpdColorGradientInfoStop1 = "#00095d";
730
+ export const cpdColorGradientInfoStop2 = "#101317";
733
731
  export const cpdColorGradientInfoLinear =
734
- "linear-gradient(180deg, hsla(221, 100%, 37%, 0.63) 0%, hsl(224, 100%, 22%, 1) 20%, hsl(229, 100%, 20%, 1) 40%, hsl(234, 100%, 18%, 1) 60%, hsl(237, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
735
- export const cpdColorGradientCriticalStop1 = "hsl(0, 100%, 22%, 1)";
736
- export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 18%, 1)";
737
- export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 14%, 1)";
738
- export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 12%, 1)";
739
- export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 11%, 1)";
740
- export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
732
+ "linear-gradient(180deg, #00095d 0%, #101317 100%)";
733
+ export const cpdColorGradientCriticalStop1 = "#3e0000";
734
+ export const cpdColorGradientCriticalStop2 = "#101317";
741
735
  export const cpdColorGradientCriticalLinear =
742
- "linear-gradient(180deg, hsl(0, 100%, 22%, 1) 0%, hsl(0, 100%, 18%, 1) 20%, hsl(0, 100%, 14%, 1) 40%, hsl(0, 100%, 12%, 1) 60%, hsl(0, 100%, 11%, 1) 80%, rgba(0,0,0,0) 100%)";
736
+ "linear-gradient(180deg, #3e0000 0%, #101317 100%)";
743
737
  export const cpdColorGradientActionStop1 = "#1fc090";
744
738
  export const cpdColorGradientActionStop2 = "#129a78";
745
739
  export const cpdColorGradientActionStop3 = "#005a43";
package/assets/web/js/cpdDarkHc.d.ts CHANGED
@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
276
276
  export const cpdIconPresenceStrikethrough8X8: string;
277
277
  export const cpdIconError: string;
278
278
  export const cpdIconDialPad: string;
279
+ export const cpdIconReOrder: string;
279
280
  export const cpdIconSpace: string;
280
281
  export const cpdIconSpaceSolid: string;
281
282
  export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
299
300
  export const cpdIconStopSolid: string;
300
301
  export const cpdIconStop: string;
301
302
  export const cpdIconTheme: string;
303
+ export const cpdIconSection: string;
302
304
  export const cpdColorThemeBg: string;
303
305
  export const cpdColorGray100: string;
304
306
  export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
697
699
  export const cpdColorGradientSubtleLinear: string;
698
700
  export const cpdColorGradientInfoStop1: string;
699
701
  export const cpdColorGradientInfoStop2: string;
700
- export const cpdColorGradientInfoStop3: string;
701
- export const cpdColorGradientInfoStop4: string;
702
- export const cpdColorGradientInfoStop5: string;
703
- export const cpdColorGradientInfoStop6: string;
704
702
  export const cpdColorGradientInfoLinear: string;
705
703
  export const cpdColorGradientCriticalStop1: string;
706
704
  export const cpdColorGradientCriticalStop2: string;
707
- export const cpdColorGradientCriticalStop3: string;
708
- export const cpdColorGradientCriticalStop4: string;
709
- export const cpdColorGradientCriticalStop5: string;
710
- export const cpdColorGradientCriticalStop6: string;
711
705
  export const cpdColorGradientCriticalLinear: string;
712
706
  export const cpdColorGradientActionStop1: string;
713
707
  export const cpdColorGradientActionStop2: string;
package/assets/web/js/cpdDarkHc.js CHANGED
@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
301
301
  "icons/presence-strikethrough-8x8.svg";
302
302
  export const cpdIconError = "icons/error.svg";
303
303
  export const cpdIconDialPad = "icons/dial-pad.svg";
304
+ export const cpdIconReOrder = "icons/re-order.svg";
304
305
  export const cpdIconSpace = "icons/space.svg";
305
306
  export const cpdIconSpaceSolid = "icons/space-solid.svg";
306
307
  export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
327
328
  export const cpdIconStopSolid = "icons/stop-solid.svg";
328
329
  export const cpdIconStop = "icons/stop.svg";
329
330
  export const cpdIconTheme = "icons/theme.svg";
331
+ export const cpdIconSection = "icons/section.svg";
330
332
  export const cpdColorThemeBg = "#101317";
331
333
  export const cpdColorGray100 = "#181a1f";
332
334
  export const cpdColorGray200 = "#1d1f24";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsl(147, 100%, 6%, 1)";
724
726
  export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
725
727
  export const cpdColorGradientSubtleLinear =
726
728
  "linear-gradient(180deg, hsl(162, 100%, 14%, 1) 0%, hsl(158, 100%, 11%, 1) 20%, hsl(155, 100%, 9%, 1) 40%, hsl(151, 100%, 7%, 1) 60%, hsl(147, 100%, 6%, 1) 80%, rgba(0,0,0,0) 100%)";
727
- export const cpdColorGradientInfoStop1 = "hsla(219, 99%, 50%, 0.53)";
728
- export const cpdColorGradientInfoStop2 = "hsla(222, 100%, 28%, 0.82)";
729
- export const cpdColorGradientInfoStop3 = "hsl(224, 100%, 22%, 1)";
730
- export const cpdColorGradientInfoStop4 = "hsl(229, 100%, 20%, 1)";
731
- export const cpdColorGradientInfoStop5 = "hsl(234, 100%, 18%, 1)";
732
- export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
729
+ export const cpdColorGradientInfoStop1 = "#001264";
730
+ export const cpdColorGradientInfoStop2 = "#101317";
733
731
  export const cpdColorGradientInfoLinear =
734
- "linear-gradient(180deg, hsla(219, 99%, 50%, 0.53) 0%, hsla(222, 100%, 28%, 0.82) 20%, hsl(224, 100%, 22%, 1) 40%, hsl(229, 100%, 20%, 1) 60%, hsl(234, 100%, 18%, 1) 80%, rgba(0,0,0,0) 100%)";
735
- export const cpdColorGradientCriticalStop1 = "hsl(356, 100%, 26%, 1)";
736
- export const cpdColorGradientCriticalStop2 = "hsl(0, 100%, 20%, 1)";
737
- export const cpdColorGradientCriticalStop3 = "hsl(0, 100%, 18%, 1)";
738
- export const cpdColorGradientCriticalStop4 = "hsl(0, 100%, 14%, 1)";
739
- export const cpdColorGradientCriticalStop5 = "hsl(0, 100%, 12%, 1)";
740
- export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
732
+ "linear-gradient(180deg, #001264 0%, #101317 100%)";
733
+ export const cpdColorGradientCriticalStop1 = "#470000";
734
+ export const cpdColorGradientCriticalStop2 = "#101317";
741
735
  export const cpdColorGradientCriticalLinear =
742
- "linear-gradient(180deg, hsl(356, 100%, 26%, 1) 0%, hsl(0, 100%, 20%, 1) 20%, hsl(0, 100%, 18%, 1) 40%, hsl(0, 100%, 14%, 1) 60%, hsl(0, 100%, 12%, 1) 80%, rgba(0,0,0,0) 100%)";
736
+ "linear-gradient(180deg, #470000 0%, #101317 100%)";
743
737
  export const cpdColorGradientActionStop1 = "#8fddbc";
744
738
  export const cpdColorGradientActionStop2 = "#37c998";
745
739
  export const cpdColorGradientActionStop3 = "#00745c";
package/assets/web/js/cpdLight.d.ts CHANGED
@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
276
276
  export const cpdIconPresenceStrikethrough8X8: string;
277
277
  export const cpdIconError: string;
278
278
  export const cpdIconDialPad: string;
279
+ export const cpdIconReOrder: string;
279
280
  export const cpdIconSpace: string;
280
281
  export const cpdIconSpaceSolid: string;
281
282
  export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
299
300
  export const cpdIconStopSolid: string;
300
301
  export const cpdIconStop: string;
301
302
  export const cpdIconTheme: string;
303
+ export const cpdIconSection: string;
302
304
  export const cpdColorThemeBg: string;
303
305
  export const cpdColorGray100: string;
304
306
  export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
697
699
  export const cpdColorGradientSubtleLinear: string;
698
700
  export const cpdColorGradientInfoStop1: string;
699
701
  export const cpdColorGradientInfoStop2: string;
700
- export const cpdColorGradientInfoStop3: string;
701
- export const cpdColorGradientInfoStop4: string;
702
- export const cpdColorGradientInfoStop5: string;
703
- export const cpdColorGradientInfoStop6: string;
704
702
  export const cpdColorGradientInfoLinear: string;
705
703
  export const cpdColorGradientCriticalStop1: string;
706
704
  export const cpdColorGradientCriticalStop2: string;
707
- export const cpdColorGradientCriticalStop3: string;
708
- export const cpdColorGradientCriticalStop4: string;
709
- export const cpdColorGradientCriticalStop5: string;
710
- export const cpdColorGradientCriticalStop6: string;
711
705
  export const cpdColorGradientCriticalLinear: string;
712
706
  export const cpdColorGradientActionStop1: string;
713
707
  export const cpdColorGradientActionStop2: string;
package/assets/web/js/cpdLight.js CHANGED
@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
301
301
  "icons/presence-strikethrough-8x8.svg";
302
302
  export const cpdIconError = "icons/error.svg";
303
303
  export const cpdIconDialPad = "icons/dial-pad.svg";
304
+ export const cpdIconReOrder = "icons/re-order.svg";
304
305
  export const cpdIconSpace = "icons/space.svg";
305
306
  export const cpdIconSpaceSolid = "icons/space-solid.svg";
306
307
  export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
327
328
  export const cpdIconStopSolid = "icons/stop-solid.svg";
328
329
  export const cpdIconStop = "icons/stop.svg";
329
330
  export const cpdIconTheme = "icons/theme.svg";
331
+ export const cpdIconSection = "icons/section.svg";
330
332
  export const cpdColorThemeBg = "#ffffff";
331
333
  export const cpdColorGray100 = "#fbfcfd";
332
334
  export const cpdColorGray200 = "#f7f9fa";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsla(156, 79%, 41%, 0.03)";
724
726
  export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
725
727
  export const cpdColorGradientSubtleLinear =
726
728
  "linear-gradient(180deg, hsla(154, 96%, 37%, 0.41) 0%, hsla(151, 93%, 37%, 0.23) 20%, hsla(150, 100%, 36%, 0.11) 40%, hsla(150, 79%, 41%, 0.06) 60%, hsla(156, 79%, 41%, 0.03) 80%, rgba(0,0,0,0) 100%)";
727
- export const cpdColorGradientInfoStop1 = "hsla(215, 93%, 50%, 0.28)";
728
- export const cpdColorGradientInfoStop2 = "hsla(216, 95%, 51%, 0.16)";
729
- export const cpdColorGradientInfoStop3 = "hsla(215, 100%, 52%, 0.09)";
730
- export const cpdColorGradientInfoStop4 = "hsla(218, 100%, 57%, 0.05)";
731
- export const cpdColorGradientInfoStop5 = "hsla(210, 100%, 61%, 0.03)";
732
- export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
729
+ export const cpdColorGradientInfoStop1 = "#f4f8ff";
730
+ export const cpdColorGradientInfoStop2 = "#ffffff";
733
731
  export const cpdColorGradientInfoLinear =
734
- "linear-gradient(180deg, hsla(215, 93%, 50%, 0.28) 0%, hsla(216, 95%, 51%, 0.16) 20%, hsla(215, 100%, 52%, 0.09) 40%, hsla(218, 100%, 57%, 0.05) 60%, hsla(210, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
735
- export const cpdColorGradientCriticalStop1 = "hsla(8, 100%, 51%, 0.27)";
736
- export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 52%, 0.15)";
737
- export const cpdColorGradientCriticalStop3 = "hsla(9, 100%, 54%, 0.08)";
738
- export const cpdColorGradientCriticalStop4 = "hsla(7, 100%, 56%, 0.04)";
739
- export const cpdColorGradientCriticalStop5 = "hsla(10, 100%, 61%, 0.03)";
740
- export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
732
+ "linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%)";
733
+ export const cpdColorGradientCriticalStop1 = "#fff7f6";
734
+ export const cpdColorGradientCriticalStop2 = "#ffffff";
741
735
  export const cpdColorGradientCriticalLinear =
742
- "linear-gradient(180deg, hsla(8, 100%, 51%, 0.27) 0%, hsla(8, 100%, 52%, 0.15) 20%, hsla(9, 100%, 54%, 0.08) 40%, hsla(7, 100%, 56%, 0.04) 60%, hsla(10, 100%, 61%, 0.03) 80%, rgba(0,0,0,0) 100%)";
736
+ "linear-gradient(180deg, #fff7f6 0%, #ffffff 100%)";
743
737
  export const cpdColorGradientActionStop1 = "#98e1c1";
744
738
  export const cpdColorGradientActionStop2 = "#0bc491";
745
739
  export const cpdColorGradientActionStop3 = "#007a61";
package/assets/web/js/cpdLightHc.d.ts CHANGED
@@ -276,6 +276,7 @@ export const cpdIconPresenceOutline8X8: string;
276
276
  export const cpdIconPresenceStrikethrough8X8: string;
277
277
  export const cpdIconError: string;
278
278
  export const cpdIconDialPad: string;
279
+ export const cpdIconReOrder: string;
279
280
  export const cpdIconSpace: string;
280
281
  export const cpdIconSpaceSolid: string;
281
282
  export const cpdIconGuest: string;
@@ -299,6 +300,7 @@ export const cpdIconVoiceCallOutgoingSolid: string;
299
300
  export const cpdIconStopSolid: string;
300
301
  export const cpdIconStop: string;
301
302
  export const cpdIconTheme: string;
303
+ export const cpdIconSection: string;
302
304
  export const cpdColorThemeBg: string;
303
305
  export const cpdColorGray100: string;
304
306
  export const cpdColorGray200: string;
@@ -697,17 +699,9 @@ export const cpdColorGradientSubtleStop6: string;
697
699
  export const cpdColorGradientSubtleLinear: string;
698
700
  export const cpdColorGradientInfoStop1: string;
699
701
  export const cpdColorGradientInfoStop2: string;
700
- export const cpdColorGradientInfoStop3: string;
701
- export const cpdColorGradientInfoStop4: string;
702
- export const cpdColorGradientInfoStop5: string;
703
- export const cpdColorGradientInfoStop6: string;
704
702
  export const cpdColorGradientInfoLinear: string;
705
703
  export const cpdColorGradientCriticalStop1: string;
706
704
  export const cpdColorGradientCriticalStop2: string;
707
- export const cpdColorGradientCriticalStop3: string;
708
- export const cpdColorGradientCriticalStop4: string;
709
- export const cpdColorGradientCriticalStop5: string;
710
- export const cpdColorGradientCriticalStop6: string;
711
705
  export const cpdColorGradientCriticalLinear: string;
712
706
  export const cpdColorGradientActionStop1: string;
713
707
  export const cpdColorGradientActionStop2: string;
package/assets/web/js/cpdLightHc.js CHANGED
@@ -301,6 +301,7 @@ export const cpdIconPresenceStrikethrough8X8 =
301
301
  "icons/presence-strikethrough-8x8.svg";
302
302
  export const cpdIconError = "icons/error.svg";
303
303
  export const cpdIconDialPad = "icons/dial-pad.svg";
304
+ export const cpdIconReOrder = "icons/re-order.svg";
304
305
  export const cpdIconSpace = "icons/space.svg";
305
306
  export const cpdIconSpaceSolid = "icons/space-solid.svg";
306
307
  export const cpdIconGuest = "icons/guest.svg";
@@ -327,6 +328,7 @@ export const cpdIconVoiceCallOutgoingSolid =
327
328
  export const cpdIconStopSolid = "icons/stop-solid.svg";
328
329
  export const cpdIconStop = "icons/stop.svg";
329
330
  export const cpdIconTheme = "icons/theme.svg";
331
+ export const cpdIconSection = "icons/section.svg";
330
332
  export const cpdColorThemeBg = "#ffffff";
331
333
  export const cpdColorGray100 = "#f7f9fa";
332
334
  export const cpdColorGray200 = "#f0f2f5";
@@ -724,22 +726,14 @@ export const cpdColorGradientSubtleStop5 = "hsla(150, 79%, 41%, 0.06)";
724
726
  export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
725
727
  export const cpdColorGradientSubtleLinear =
726
728
  "linear-gradient(180deg, hsla(156, 99%, 36%, 0.56) 0%, hsla(153, 95%, 37%, 0.32) 20%, hsla(151, 93%, 37%, 0.23) 40%, hsla(150, 100%, 36%, 0.11) 60%, hsla(150, 79%, 41%, 0.06) 80%, rgba(0,0,0,0) 100%)";
727
- export const cpdColorGradientInfoStop1 = "hsla(216, 95%, 48%, 0.37)";
728
- export const cpdColorGradientInfoStop2 = "hsla(216, 96%, 49%, 0.22)";
729
- export const cpdColorGradientInfoStop3 = "hsla(216, 95%, 51%, 0.16)";
730
- export const cpdColorGradientInfoStop4 = "hsla(215, 100%, 52%, 0.09)";
731
- export const cpdColorGradientInfoStop5 = "hsla(218, 100%, 57%, 0.05)";
732
- export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
729
+ export const cpdColorGradientInfoStop1 = "#e9f2ff";
730
+ export const cpdColorGradientInfoStop2 = "#ffffff";
733
731
  export const cpdColorGradientInfoLinear =
734
- "linear-gradient(180deg, hsla(216, 95%, 48%, 0.37) 0%, hsla(216, 96%, 49%, 0.22) 20%, hsla(216, 95%, 51%, 0.16) 40%, hsla(215, 100%, 52%, 0.09) 60%, hsla(218, 100%, 57%, 0.05) 80%, rgba(0,0,0,0) 100%)";
735
- export const cpdColorGradientCriticalStop1 = "hsla(7, 100%, 51%, 0.36)";
736
- export const cpdColorGradientCriticalStop2 = "hsla(8, 100%, 51%, 0.21)";
737
- export const cpdColorGradientCriticalStop3 = "hsla(8, 100%, 52%, 0.15)";
738
- export const cpdColorGradientCriticalStop4 = "hsla(9, 100%, 54%, 0.08)";
739
- export const cpdColorGradientCriticalStop5 = "hsla(7, 100%, 56%, 0.04)";
740
- export const cpdColorGradientCriticalStop6 = "rgba(0,0,0,0)";
732
+ "linear-gradient(180deg, #e9f2ff 0%, #ffffff 100%)";
733
+ export const cpdColorGradientCriticalStop1 = "#ffefec";
734
+ export const cpdColorGradientCriticalStop2 = "#ffffff";
741
735
  export const cpdColorGradientCriticalLinear =
742
- "linear-gradient(180deg, hsla(7, 100%, 51%, 0.36) 0%, hsla(8, 100%, 51%, 0.21) 20%, hsla(8, 100%, 52%, 0.15) 40%, hsla(9, 100%, 54%, 0.08) 60%, hsla(7, 100%, 56%, 0.04) 80%, rgba(0,0,0,0) 100%)";
736
+ "linear-gradient(180deg, #ffefec 0%, #ffffff 100%)";
743
737
  export const cpdColorGradientActionStop1 = "#71d7ae";
744
738
  export const cpdColorGradientActionStop2 = "#00a27c";
745
739
  export const cpdColorGradientActionStop3 = "#00553d";
package/icons/$icons.json CHANGED
@@ -796,6 +796,10 @@
796
796
  "value": "icons/dial-pad.svg",
797
797
  "type": "icon"
798
798
  },
799
+ "re-order": {
800
+ "value": "icons/re-order.svg",
801
+ "type": "icon"
802
+ },
799
803
  "space": {
800
804
  "value": "icons/space.svg",
801
805
  "type": "icon"
@@ -887,6 +891,10 @@
887
891
  "theme": {
888
892
  "value": "icons/theme.svg",
889
893
  "type": "icon"
894
+ },
895
+ "section": {
896
+ "value": "icons/section.svg",
897
+ "type": "icon"
890
898
  }
891
899
  }
892
900
  }
package/icons/re-order.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M9 4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"/></svg>
package/icons/section.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M16 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 8q0 .424.287.713Q15.576 9 16 9t.712-.287A.97.97 0 0 0 17 8a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 7m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 12q0 .424.287.713.288.287.713.287.424 0 .712-.287A.97.97 0 0 0 17 12a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 11m0 4a.97.97 0 0 0-.713.287A.97.97 0 0 0 15 16q0 .424.287.712.288.288.713.288.424 0 .712-.288A.97.97 0 0 0 17 16a.97.97 0 0 0-.288-.713A.97.97 0 0 0 16 15m-4-8H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 8q0 .424.287.713Q7.576 9 8 9h4q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 12q0 .424.287.713Q7.576 13 8 13h4q.424 0 .713-.287A.97.97 0 0 0 13 12a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11m0 4H8a.97.97 0 0 0-.713.287A.97.97 0 0 0 7 16q0 .424.287.712Q7.576 17 8 17h4q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15m7-12q.824 0 1.413.587Q21 4.176 21 5v14q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3zm0 2H5v14h14z"/></svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vector-im/compound-design-tokens",
3
- "version": "6.9.0",
3
+ "version": "6.10.0",
4
4
  "description": "Compound design tokens",
5
5
  "sideEffects": false,
6
6
  "scripts": {