@vector-im/compound-design-tokens 4.0.4 → 5.0.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.
- package/assets/web/css/cpd-common-semantic.css +18 -1
- package/assets/web/css/cpd-theme-dark-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-dark-base.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-base.css +1 -0
- package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-dark-hc-semantic.css +5 -0
- package/assets/web/css/cpd-theme-dark-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-dark-semantic.css +5 -0
- package/assets/web/css/cpd-theme-light-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-light-base.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-base-mq.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-base.css +1 -0
- package/assets/web/css/cpd-theme-light-hc-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-light-hc-semantic.css +5 -0
- package/assets/web/css/cpd-theme-light-semantic-mq.css +5 -0
- package/assets/web/css/cpd-theme-light-semantic.css +5 -0
- package/assets/web/icons/guest.cjs +6 -6
- package/assets/web/icons/guest.js +7 -7
- package/assets/web/icons/index.cjs +1 -0
- package/assets/web/icons/index.d.ts +1 -0
- package/assets/web/icons/index.js +1 -0
- package/assets/web/icons/shield.cjs +21 -0
- package/assets/web/icons/shield.d.ts +11 -0
- package/assets/web/icons/shield.js +21 -0
- package/assets/web/js/cpdDark.d.ts +24 -0
- package/assets/web/js/cpdDark.js +28 -1
- package/assets/web/js/cpdDarkHc.d.ts +24 -0
- package/assets/web/js/cpdDarkHc.js +28 -1
- package/assets/web/js/cpdLight.d.ts +24 -0
- package/assets/web/js/cpdLight.js +28 -1
- package/assets/web/js/cpdLightHc.d.ts +24 -0
- package/assets/web/js/cpdLightHc.js +28 -1
- package/icons/$icons.json +4 -0
- package/icons/guest.svg +1 -1
- package/icons/shield.svg +1 -0
- package/package.json +13 -5
|
@@ -43,8 +43,10 @@
|
|
|
43
43
|
--cpd-color-bg-accent-rest: var(--cpd-color-green-900);
|
|
44
44
|
--cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
|
|
45
45
|
--cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
|
|
46
|
+
--cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
|
|
46
47
|
--cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-300);
|
|
47
48
|
--cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-300);
|
|
49
|
+
--cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-300);
|
|
48
50
|
--cpd-color-border-disabled: var(--cpd-color-gray-500);
|
|
49
51
|
--cpd-color-border-focused: var(--cpd-color-blue-900);
|
|
50
52
|
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
|
|
@@ -54,7 +56,8 @@
|
|
|
54
56
|
--cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
|
|
55
57
|
--cpd-color-border-critical-subtle: var(--cpd-color-red-500);
|
|
56
58
|
--cpd-color-border-success-subtle: var(--cpd-color-green-500);
|
|
57
|
-
--cpd-color-border-info-subtle: var(--cpd-color-blue-
|
|
59
|
+
--cpd-color-border-info-subtle: var(--cpd-color-blue-700);
|
|
60
|
+
--cpd-color-border-accent-subtle: var(--cpd-color-green-700);
|
|
58
61
|
--cpd-color-icon-primary: var(--cpd-color-gray-1400);
|
|
59
62
|
--cpd-color-icon-secondary: var(--cpd-color-gray-900);
|
|
60
63
|
--cpd-color-icon-tertiary: var(--cpd-color-gray-800);
|
|
@@ -70,4 +73,18 @@
|
|
|
70
73
|
--cpd-color-icon-success-primary: var(--cpd-color-green-900);
|
|
71
74
|
--cpd-color-icon-info-primary: var(--cpd-color-blue-900);
|
|
72
75
|
--cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
|
|
76
|
+
--cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
|
|
77
|
+
--cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
|
|
78
|
+
--cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);
|
|
79
|
+
--cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
|
|
80
|
+
--cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
|
|
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-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%);
|
|
89
|
+
--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%);
|
|
73
90
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-dark-hc.cpd-theme-dark-hc {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-dark.cpd-theme-dark {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-light-hc.cpd-theme-light-hc {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
.cpd-theme-light.cpd-theme-light {
|
|
2
2
|
--cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
|
|
3
3
|
--cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
|
|
4
|
+
--cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
|
|
5
|
+
--cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
|
|
6
|
+
--cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
|
|
7
|
+
--cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
|
|
8
|
+
--cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
|
|
4
9
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var _reactJsxRuntime = require("react/jsx-runtime");
|
|
2
2
|
var React = require("react");
|
|
3
3
|
function GuestIcon(props, ref) {
|
|
4
|
-
return /*#__PURE__*/_reactJsxRuntime.
|
|
4
|
+
return /*#__PURE__*/_reactJsxRuntime.jsxs("svg", {
|
|
5
5
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6
6
|
width: "1em",
|
|
7
7
|
height: "1em",
|
|
@@ -9,11 +9,11 @@ function GuestIcon(props, ref) {
|
|
|
9
9
|
viewBox: "0 0 24 24",
|
|
10
10
|
ref: ref,
|
|
11
11
|
...props,
|
|
12
|
-
children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
})
|
|
12
|
+
children: [/*#__PURE__*/_reactJsxRuntime.jsx("path", {
|
|
13
|
+
d: "M8.148 4.304a1.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 0l-6.843-6.843a1.04 1.04 0 0 1 0-1.47z"
|
|
14
|
+
}), /*#__PURE__*/_reactJsxRuntime.jsx("path", {
|
|
15
|
+
d: "M14.383 4.304a1.04 1.04 0 0 1 1.469 0l6.844 6.844a1.04 1.04 0 0 1 0 1.47l-6.844 6.843a1.04 1.04 0 0 1-1.469 0L7.54 12.618a1.04 1.04 0 0 1 0-1.47z"
|
|
16
|
+
})]
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { forwardRef } from "react";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
function GuestIcon(props, ref) {
|
|
4
|
-
return /*#__PURE__*/
|
|
4
|
+
return /*#__PURE__*/_jsxs("svg", {
|
|
5
5
|
xmlns: "http://www.w3.org/2000/svg",
|
|
6
6
|
width: "1em",
|
|
7
7
|
height: "1em",
|
|
@@ -9,11 +9,11 @@ function GuestIcon(props, ref) {
|
|
|
9
9
|
viewBox: "0 0 24 24",
|
|
10
10
|
ref: ref,
|
|
11
11
|
...props,
|
|
12
|
-
children: /*#__PURE__*/_jsx("path", {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
})
|
|
12
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
13
|
+
d: "M8.148 4.304a1.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 0l-6.843-6.843a1.04 1.04 0 0 1 0-1.47z"
|
|
14
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
15
|
+
d: "M14.383 4.304a1.04 1.04 0 0 1 1.469 0l6.844 6.844a1.04 1.04 0 0 1 0 1.47l-6.844 6.843a1.04 1.04 0 0 1-1.469 0L7.54 12.618a1.04 1.04 0 0 1 0-1.47z"
|
|
16
|
+
})]
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
19
|
;
|
|
@@ -155,6 +155,7 @@ module.exports = {
|
|
|
155
155
|
ShareScreenSolidIcon: require("./share-screen-solid.cjs"),
|
|
156
156
|
ShareScreenIcon: require("./share-screen.cjs"),
|
|
157
157
|
ShareIcon: require("./share.cjs"),
|
|
158
|
+
ShieldIcon: require("./shield.cjs"),
|
|
158
159
|
SidebarIcon: require("./sidebar.cjs"),
|
|
159
160
|
SignOutIcon: require("./sign-out.cjs"),
|
|
160
161
|
SpinnerIcon: require("./spinner.cjs"),
|
|
@@ -154,6 +154,7 @@ export { default as ShareIosIcon } from "./share-ios.js";
|
|
|
154
154
|
export { default as ShareScreenSolidIcon } from "./share-screen-solid.js";
|
|
155
155
|
export { default as ShareScreenIcon } from "./share-screen.js";
|
|
156
156
|
export { default as ShareIcon } from "./share.js";
|
|
157
|
+
export { default as ShieldIcon } from "./shield.js";
|
|
157
158
|
export { default as SidebarIcon } from "./sidebar.js";
|
|
158
159
|
export { default as SignOutIcon } from "./sign-out.js";
|
|
159
160
|
export { default as SpinnerIcon } from "./spinner.js";
|
|
@@ -154,6 +154,7 @@ export { default as ShareIosIcon } from "./share-ios.js";
|
|
|
154
154
|
export { default as ShareScreenSolidIcon } from "./share-screen-solid.js";
|
|
155
155
|
export { default as ShareScreenIcon } from "./share-screen.js";
|
|
156
156
|
export { default as ShareIcon } from "./share.js";
|
|
157
|
+
export { default as ShieldIcon } from "./shield.js";
|
|
157
158
|
export { default as SidebarIcon } from "./sidebar.js";
|
|
158
159
|
export { default as SignOutIcon } from "./sign-out.js";
|
|
159
160
|
export { default as SpinnerIcon } from "./spinner.js";
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
var _reactJsxRuntime = require("react/jsx-runtime");
|
|
2
|
+
var React = require("react");
|
|
3
|
+
function ShieldIcon(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
|
+
fillRule: "evenodd",
|
|
14
|
+
d: "M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414",
|
|
15
|
+
clipRule: "evenodd"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
;
|
|
20
|
+
ShieldIcon.displayName = "ShieldIcon";
|
|
21
|
+
module.exports = React.forwardRef(ShieldIcon);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { forwardRef } from "react";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
function ShieldIcon(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
|
+
fillRule: "evenodd",
|
|
14
|
+
d: "M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414",
|
|
15
|
+
clipRule: "evenodd"
|
|
16
|
+
})
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
;
|
|
20
|
+
ShieldIcon.displayName = "ShieldIcon";
|
|
21
|
+
export default forwardRef(ShieldIcon);
|
|
@@ -245,6 +245,7 @@ export const cpdIconCopy: string;
|
|
|
245
245
|
export const cpdIconHistory: string;
|
|
246
246
|
export const cpdIconDocument: string;
|
|
247
247
|
export const cpdIconAdmin: string;
|
|
248
|
+
export const cpdIconShield: string;
|
|
248
249
|
export const cpdIconHost: string;
|
|
249
250
|
export const cpdIconCompany: string;
|
|
250
251
|
export const cpdIconDarkMode: string;
|
|
@@ -585,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
585
586
|
export const cpdColorAlphaPink1200: string;
|
|
586
587
|
export const cpdColorAlphaPink1300: string;
|
|
587
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
588
590
|
export const cpdColorTextPrimary: string;
|
|
589
591
|
export const cpdColorTextSecondary: string;
|
|
590
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -630,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
630
632
|
export const cpdColorBgAccentRest: string;
|
|
631
633
|
export const cpdColorBgAccentHovered: string;
|
|
632
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
633
636
|
export const cpdColorBgBadgeAccent: string;
|
|
634
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
635
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
636
640
|
export const cpdColorBorderDisabled: string;
|
|
637
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -643,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
643
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
644
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
645
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
646
651
|
export const cpdColorIconPrimary: string;
|
|
647
652
|
export const cpdColorIconSecondary: string;
|
|
648
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -658,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
658
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
659
664
|
export const cpdColorIconInfoPrimary: string;
|
|
660
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
package/assets/web/js/cpdDark.js
CHANGED
|
@@ -269,6 +269,7 @@ export const cpdIconCopy = "icons/copy.svg";
|
|
|
269
269
|
export const cpdIconHistory = "icons/history.svg";
|
|
270
270
|
export const cpdIconDocument = "icons/document.svg";
|
|
271
271
|
export const cpdIconAdmin = "icons/admin.svg";
|
|
272
|
+
export const cpdIconShield = "icons/shield.svg";
|
|
272
273
|
export const cpdIconHost = "icons/host.svg";
|
|
273
274
|
export const cpdIconCompany = "icons/company.svg";
|
|
274
275
|
export const cpdIconDarkMode = "icons/dark-mode.svg";
|
|
@@ -610,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(345, 98%, 76%, 1)";
|
|
|
610
611
|
export const cpdColorAlphaPink1200 = "hsl(346, 100%, 84%, 1)";
|
|
611
612
|
export const cpdColorAlphaPink1300 = "hsl(347, 100%, 91%, 1)";
|
|
612
613
|
export const cpdColorAlphaPink1400 = "hsl(347, 100%, 96%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
613
615
|
export const cpdColorTextPrimary = "#ebeef2";
|
|
614
616
|
export const cpdColorTextSecondary = "#808994";
|
|
615
617
|
export const cpdColorTextDisabled = "#656c76";
|
|
@@ -655,8 +657,10 @@ export const cpdColorBgDecorative6 = "#470000";
|
|
|
655
657
|
export const cpdColorBgAccentRest = "#129a78";
|
|
656
658
|
export const cpdColorBgAccentHovered = "#17ac84";
|
|
657
659
|
export const cpdColorBgAccentPressed = "#1fc090";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsl(151, 100%, 7%, 1)";
|
|
658
661
|
export const cpdColorBgBadgeAccent = "hsl(151, 100%, 7%, 1)";
|
|
659
662
|
export const cpdColorBgBadgeInfo = "hsl(229, 100%, 20%, 1)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(280, 41%, 90%, 0.06)";
|
|
660
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
661
665
|
export const cpdColorBorderDisabled = "#323539";
|
|
662
666
|
export const cpdColorBorderFocused = "#4187eb";
|
|
@@ -667,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#fd3e3c";
|
|
|
667
671
|
export const cpdColorBorderCriticalHovered = "#ff665d";
|
|
668
672
|
export const cpdColorBorderCriticalSubtle = "#710000";
|
|
669
673
|
export const cpdColorBorderSuccessSubtle = "#003d29";
|
|
670
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#0b49ab";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#005a43";
|
|
671
676
|
export const cpdColorIconPrimary = "#ebeef2";
|
|
672
677
|
export const cpdColorIconSecondary = "#808994";
|
|
673
678
|
export const cpdColorIconTertiary = "#656c76";
|
|
@@ -683,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#fd3e3c";
|
|
|
683
688
|
export const cpdColorIconSuccessPrimary = "#129a78";
|
|
684
689
|
export const cpdColorIconInfoPrimary = "#4187eb";
|
|
685
690
|
export const cpdColorIconOnSolidPrimary = "#101317";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsl(160, 100%, 12%, 1)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsl(155, 100%, 9%, 1)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsl(151, 100%, 7%, 1)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsl(147, 100%, 6%, 1)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsl(144, 100%, 6%, 1)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"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%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(221, 100%, 37%, 0.63)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsl(224, 100%, 22%, 1)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsl(229, 100%, 20%, 1)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsl(234, 100%, 18%, 1)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsl(237, 100%, 18%, 1)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"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%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#1fc090";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#129a78";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#005a43";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#003d29";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #1fc090 0%, #129a78 33%, #005a43 66%, #003d29 100%)";
|
|
@@ -245,6 +245,7 @@ export const cpdIconCopy: string;
|
|
|
245
245
|
export const cpdIconHistory: string;
|
|
246
246
|
export const cpdIconDocument: string;
|
|
247
247
|
export const cpdIconAdmin: string;
|
|
248
|
+
export const cpdIconShield: string;
|
|
248
249
|
export const cpdIconHost: string;
|
|
249
250
|
export const cpdIconCompany: string;
|
|
250
251
|
export const cpdIconDarkMode: string;
|
|
@@ -585,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
585
586
|
export const cpdColorAlphaPink1200: string;
|
|
586
587
|
export const cpdColorAlphaPink1300: string;
|
|
587
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
588
590
|
export const cpdColorTextPrimary: string;
|
|
589
591
|
export const cpdColorTextSecondary: string;
|
|
590
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -630,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
630
632
|
export const cpdColorBgAccentRest: string;
|
|
631
633
|
export const cpdColorBgAccentHovered: string;
|
|
632
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
633
636
|
export const cpdColorBgBadgeAccent: string;
|
|
634
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
635
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
636
640
|
export const cpdColorBorderDisabled: string;
|
|
637
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -643,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
643
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
644
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
645
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
646
651
|
export const cpdColorIconPrimary: string;
|
|
647
652
|
export const cpdColorIconSecondary: string;
|
|
648
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -658,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
658
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
659
664
|
export const cpdColorIconInfoPrimary: string;
|
|
660
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -269,6 +269,7 @@ export const cpdIconCopy = "icons/copy.svg";
|
|
|
269
269
|
export const cpdIconHistory = "icons/history.svg";
|
|
270
270
|
export const cpdIconDocument = "icons/document.svg";
|
|
271
271
|
export const cpdIconAdmin = "icons/admin.svg";
|
|
272
|
+
export const cpdIconShield = "icons/shield.svg";
|
|
272
273
|
export const cpdIconHost = "icons/host.svg";
|
|
273
274
|
export const cpdIconCompany = "icons/company.svg";
|
|
274
275
|
export const cpdIconDarkMode = "icons/dark-mode.svg";
|
|
@@ -610,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(347, 100%, 87%, 1)";
|
|
|
610
611
|
export const cpdColorAlphaPink1200 = "hsl(347, 100%, 90%, 1)";
|
|
611
612
|
export const cpdColorAlphaPink1300 = "hsl(347, 100%, 96%, 1)";
|
|
612
613
|
export const cpdColorAlphaPink1400 = "hsl(347, 100%, 97%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
613
615
|
export const cpdColorTextPrimary = "#f2f5f7";
|
|
614
616
|
export const cpdColorTextSecondary = "#acb4bd";
|
|
615
617
|
export const cpdColorTextDisabled = "#79818d";
|
|
@@ -655,8 +657,10 @@ export const cpdColorBgDecorative6 = "#580000";
|
|
|
655
657
|
export const cpdColorBgAccentRest = "#37c998";
|
|
656
658
|
export const cpdColorBgAccentHovered = "#61d2a6";
|
|
657
659
|
export const cpdColorBgAccentPressed = "#8fddbc";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsl(155, 100%, 9%, 1)";
|
|
658
661
|
export const cpdColorBgBadgeAccent = "hsl(155, 100%, 9%, 1)";
|
|
659
662
|
export const cpdColorBgBadgeInfo = "hsl(224, 100%, 22%, 1)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(270, 37%, 93%, 0.1)";
|
|
660
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
661
665
|
export const cpdColorBorderDisabled = "#3c3f44";
|
|
662
666
|
export const cpdColorBorderFocused = "#89b5f6";
|
|
@@ -667,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#ff968c";
|
|
|
667
671
|
export const cpdColorBorderCriticalHovered = "#ffa79d";
|
|
668
672
|
export const cpdColorBorderCriticalSubtle = "#830009";
|
|
669
673
|
export const cpdColorBorderSuccessSubtle = "#004832";
|
|
670
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#0e61d1";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#00745c";
|
|
671
676
|
export const cpdColorIconPrimary = "#f2f5f7";
|
|
672
677
|
export const cpdColorIconSecondary = "#acb4bd";
|
|
673
678
|
export const cpdColorIconTertiary = "#79818d";
|
|
@@ -683,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#ff968c";
|
|
|
683
688
|
export const cpdColorIconSuccessPrimary = "#37c998";
|
|
684
689
|
export const cpdColorIconInfoPrimary = "#89b5f6";
|
|
685
690
|
export const cpdColorIconOnSolidPrimary = "#101317";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsl(162, 100%, 14%, 1)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsl(158, 100%, 11%, 1)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsl(155, 100%, 9%, 1)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsl(151, 100%, 7%, 1)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsl(147, 100%, 6%, 1)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"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%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(219, 99%, 50%, 0.53)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(222, 100%, 28%, 0.82)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsl(224, 100%, 22%, 1)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsl(229, 100%, 20%, 1)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsl(234, 100%, 18%, 1)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"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%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#8fddbc";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#37c998";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#00745c";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#004832";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #8fddbc 0%, #37c998 33%, #00745c 66%, #004832 100%)";
|
|
@@ -245,6 +245,7 @@ export const cpdIconCopy: string;
|
|
|
245
245
|
export const cpdIconHistory: string;
|
|
246
246
|
export const cpdIconDocument: string;
|
|
247
247
|
export const cpdIconAdmin: string;
|
|
248
|
+
export const cpdIconShield: string;
|
|
248
249
|
export const cpdIconHost: string;
|
|
249
250
|
export const cpdIconCompany: string;
|
|
250
251
|
export const cpdIconDarkMode: string;
|
|
@@ -585,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
585
586
|
export const cpdColorAlphaPink1200: string;
|
|
586
587
|
export const cpdColorAlphaPink1300: string;
|
|
587
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
588
590
|
export const cpdColorTextPrimary: string;
|
|
589
591
|
export const cpdColorTextSecondary: string;
|
|
590
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -630,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
630
632
|
export const cpdColorBgAccentRest: string;
|
|
631
633
|
export const cpdColorBgAccentHovered: string;
|
|
632
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
633
636
|
export const cpdColorBgBadgeAccent: string;
|
|
634
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
635
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
636
640
|
export const cpdColorBorderDisabled: string;
|
|
637
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -643,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
643
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
644
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
645
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
646
651
|
export const cpdColorIconPrimary: string;
|
|
647
652
|
export const cpdColorIconSecondary: string;
|
|
648
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -658,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
658
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
659
664
|
export const cpdColorIconInfoPrimary: string;
|
|
660
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -269,6 +269,7 @@ export const cpdIconCopy = "icons/copy.svg";
|
|
|
269
269
|
export const cpdIconHistory = "icons/history.svg";
|
|
270
270
|
export const cpdIconDocument = "icons/document.svg";
|
|
271
271
|
export const cpdIconAdmin = "icons/admin.svg";
|
|
272
|
+
export const cpdIconShield = "icons/shield.svg";
|
|
272
273
|
export const cpdIconHost = "icons/host.svg";
|
|
273
274
|
export const cpdIconCompany = "icons/company.svg";
|
|
274
275
|
export const cpdIconDarkMode = "icons/dark-mode.svg";
|
|
@@ -610,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsla(331, 100%, 31%, 0.97)";
|
|
|
610
611
|
export const cpdColorAlphaPink1200 = "hsla(330, 98%, 24%, 0.98)";
|
|
611
612
|
export const cpdColorAlphaPink1300 = "hsl(333, 100%, 19%, 1)";
|
|
612
613
|
export const cpdColorAlphaPink1400 = "hsl(339, 100%, 13%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
613
615
|
export const cpdColorTextPrimary = "#1b1d22";
|
|
614
616
|
export const cpdColorTextSecondary = "#656d77";
|
|
615
617
|
export const cpdColorTextDisabled = "#818a95";
|
|
@@ -655,8 +657,10 @@ export const cpdColorBgDecorative6 = "#ffefe4";
|
|
|
655
657
|
export const cpdColorBgAccentRest = "#007a61";
|
|
656
658
|
export const cpdColorBgAccentHovered = "#006b52";
|
|
657
659
|
export const cpdColorBgAccentPressed = "#005c45";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsla(150, 100%, 36%, 0.11)";
|
|
658
661
|
export const cpdColorBgBadgeAccent = "hsla(150, 100%, 36%, 0.11)";
|
|
659
662
|
export const cpdColorBgBadgeInfo = "hsla(215, 100%, 52%, 0.09)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(216, 89%, 18%, 0.06)";
|
|
660
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#f0f2f5";
|
|
661
665
|
export const cpdColorBorderDisabled = "#cdd3da";
|
|
662
666
|
export const cpdColorBorderFocused = "#0467dd";
|
|
@@ -667,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#d51928";
|
|
|
667
671
|
export const cpdColorBorderCriticalHovered = "#bc0f22";
|
|
668
672
|
export const cpdColorBorderCriticalSubtle = "#ffc5bc";
|
|
669
673
|
export const cpdColorBorderSuccessSubtle = "#98e1c1";
|
|
670
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#7eaff6";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#0bc491";
|
|
671
676
|
export const cpdColorIconPrimary = "#1b1d22";
|
|
672
677
|
export const cpdColorIconSecondary = "#656d77";
|
|
673
678
|
export const cpdColorIconTertiary = "#818a95";
|
|
@@ -683,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#d51928";
|
|
|
683
688
|
export const cpdColorIconSuccessPrimary = "#007a61";
|
|
684
689
|
export const cpdColorIconInfoPrimary = "#0467dd";
|
|
685
690
|
export const cpdColorIconOnSolidPrimary = "#ffffff";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsla(154, 96%, 37%, 0.41)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsla(151, 93%, 37%, 0.23)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsla(150, 100%, 36%, 0.11)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsla(150, 79%, 41%, 0.06)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsla(156, 79%, 41%, 0.03)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"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%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(215, 93%, 50%, 0.28)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(216, 95%, 51%, 0.16)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsla(215, 100%, 52%, 0.09)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsla(218, 100%, 57%, 0.05)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsla(210, 100%, 61%, 0.03)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"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%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#98e1c1";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#0bc491";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#007a61";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#005c45";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #98e1c1 0%, #0bc491 33%, #007a61 66%, #005c45 100%)";
|
|
@@ -245,6 +245,7 @@ export const cpdIconCopy: string;
|
|
|
245
245
|
export const cpdIconHistory: string;
|
|
246
246
|
export const cpdIconDocument: string;
|
|
247
247
|
export const cpdIconAdmin: string;
|
|
248
|
+
export const cpdIconShield: string;
|
|
248
249
|
export const cpdIconHost: string;
|
|
249
250
|
export const cpdIconCompany: string;
|
|
250
251
|
export const cpdIconDarkMode: string;
|
|
@@ -585,6 +586,7 @@ export const cpdColorAlphaPink1100: string;
|
|
|
585
586
|
export const cpdColorAlphaPink1200: string;
|
|
586
587
|
export const cpdColorAlphaPink1300: string;
|
|
587
588
|
export const cpdColorAlphaPink1400: string;
|
|
589
|
+
export const cpdColorTransparent: string;
|
|
588
590
|
export const cpdColorTextPrimary: string;
|
|
589
591
|
export const cpdColorTextSecondary: string;
|
|
590
592
|
export const cpdColorTextDisabled: string;
|
|
@@ -630,8 +632,10 @@ export const cpdColorBgDecorative6: string;
|
|
|
630
632
|
export const cpdColorBgAccentRest: string;
|
|
631
633
|
export const cpdColorBgAccentHovered: string;
|
|
632
634
|
export const cpdColorBgAccentPressed: string;
|
|
635
|
+
export const cpdColorBgAccentSelected: string;
|
|
633
636
|
export const cpdColorBgBadgeAccent: string;
|
|
634
637
|
export const cpdColorBgBadgeInfo: string;
|
|
638
|
+
export const cpdColorBgBadgeDefault: string;
|
|
635
639
|
export const cpdColorBgSubtleSecondaryLevel0: string;
|
|
636
640
|
export const cpdColorBorderDisabled: string;
|
|
637
641
|
export const cpdColorBorderFocused: string;
|
|
@@ -643,6 +647,7 @@ export const cpdColorBorderCriticalHovered: string;
|
|
|
643
647
|
export const cpdColorBorderCriticalSubtle: string;
|
|
644
648
|
export const cpdColorBorderSuccessSubtle: string;
|
|
645
649
|
export const cpdColorBorderInfoSubtle: string;
|
|
650
|
+
export const cpdColorBorderAccentSubtle: string;
|
|
646
651
|
export const cpdColorIconPrimary: string;
|
|
647
652
|
export const cpdColorIconSecondary: string;
|
|
648
653
|
export const cpdColorIconTertiary: string;
|
|
@@ -658,3 +663,22 @@ export const cpdColorIconCriticalPrimary: string;
|
|
|
658
663
|
export const cpdColorIconSuccessPrimary: string;
|
|
659
664
|
export const cpdColorIconInfoPrimary: string;
|
|
660
665
|
export const cpdColorIconOnSolidPrimary: string;
|
|
666
|
+
export const cpdColorGradientSubtleStop1: string;
|
|
667
|
+
export const cpdColorGradientSubtleStop2: string;
|
|
668
|
+
export const cpdColorGradientSubtleStop3: string;
|
|
669
|
+
export const cpdColorGradientSubtleStop4: string;
|
|
670
|
+
export const cpdColorGradientSubtleStop5: string;
|
|
671
|
+
export const cpdColorGradientSubtleStop6: string;
|
|
672
|
+
export const cpdColorGradientSubtleLinear: string;
|
|
673
|
+
export const cpdColorGradientInfoStop1: string;
|
|
674
|
+
export const cpdColorGradientInfoStop2: string;
|
|
675
|
+
export const cpdColorGradientInfoStop3: string;
|
|
676
|
+
export const cpdColorGradientInfoStop4: string;
|
|
677
|
+
export const cpdColorGradientInfoStop5: string;
|
|
678
|
+
export const cpdColorGradientInfoStop6: string;
|
|
679
|
+
export const cpdColorGradientInfoLinear: string;
|
|
680
|
+
export const cpdColorGradientActionStop1: string;
|
|
681
|
+
export const cpdColorGradientActionStop2: string;
|
|
682
|
+
export const cpdColorGradientActionStop3: string;
|
|
683
|
+
export const cpdColorGradientActionStop4: string;
|
|
684
|
+
export const cpdColorGradientActionLinear: string;
|
|
@@ -269,6 +269,7 @@ export const cpdIconCopy = "icons/copy.svg";
|
|
|
269
269
|
export const cpdIconHistory = "icons/history.svg";
|
|
270
270
|
export const cpdIconDocument = "icons/document.svg";
|
|
271
271
|
export const cpdIconAdmin = "icons/admin.svg";
|
|
272
|
+
export const cpdIconShield = "icons/shield.svg";
|
|
272
273
|
export const cpdIconHost = "icons/host.svg";
|
|
273
274
|
export const cpdIconCompany = "icons/company.svg";
|
|
274
275
|
export const cpdIconDarkMode = "icons/dark-mode.svg";
|
|
@@ -610,6 +611,7 @@ export const cpdColorAlphaPink1100 = "hsl(329, 100%, 22%, 1)";
|
|
|
610
611
|
export const cpdColorAlphaPink1200 = "hsl(332, 100%, 20%, 1)";
|
|
611
612
|
export const cpdColorAlphaPink1300 = "hsl(337, 100%, 15%, 1)";
|
|
612
613
|
export const cpdColorAlphaPink1400 = "hsl(341, 100%, 13%, 1)";
|
|
614
|
+
export const cpdColorTransparent = "rgba(0,0,0,0)";
|
|
613
615
|
export const cpdColorTextPrimary = "#1a1c21";
|
|
614
616
|
export const cpdColorTextSecondary = "#474a51";
|
|
615
617
|
export const cpdColorTextDisabled = "#6c737e";
|
|
@@ -655,8 +657,10 @@ export const cpdColorBgDecorative6 = "#ffdfc8";
|
|
|
655
657
|
export const cpdColorBgAccentRest = "#00553d";
|
|
656
658
|
export const cpdColorBgAccentHovered = "#004d36";
|
|
657
659
|
export const cpdColorBgAccentPressed = "#00402b";
|
|
660
|
+
export const cpdColorBgAccentSelected = "hsla(151, 93%, 37%, 0.23)";
|
|
658
661
|
export const cpdColorBgBadgeAccent = "hsla(151, 93%, 37%, 0.23)";
|
|
659
662
|
export const cpdColorBgBadgeInfo = "hsla(216, 95%, 51%, 0.16)";
|
|
663
|
+
export const cpdColorBgBadgeDefault = "hsla(213, 90%, 20%, 0.12)";
|
|
660
664
|
export const cpdColorBgSubtleSecondaryLevel0 = "#e1e6ec";
|
|
661
665
|
export const cpdColorBorderDisabled = "#bdc4cc";
|
|
662
666
|
export const cpdColorBorderFocused = "#0543a7";
|
|
@@ -667,7 +671,8 @@ export const cpdColorBorderCriticalPrimary = "#99001a";
|
|
|
667
671
|
export const cpdColorBorderCriticalHovered = "#8b000c";
|
|
668
672
|
export const cpdColorBorderCriticalSubtle = "#ffafa5";
|
|
669
673
|
export const cpdColorBorderSuccessSubtle = "#71d7ae";
|
|
670
|
-
export const cpdColorBorderInfoSubtle = "#
|
|
674
|
+
export const cpdColorBorderInfoSubtle = "#4a8ef0";
|
|
675
|
+
export const cpdColorBorderAccentSubtle = "#00a27c";
|
|
671
676
|
export const cpdColorIconPrimary = "#1a1c21";
|
|
672
677
|
export const cpdColorIconSecondary = "#474a51";
|
|
673
678
|
export const cpdColorIconTertiary = "#6c737e";
|
|
@@ -683,3 +688,25 @@ export const cpdColorIconCriticalPrimary = "#99001a";
|
|
|
683
688
|
export const cpdColorIconSuccessPrimary = "#00553d";
|
|
684
689
|
export const cpdColorIconInfoPrimary = "#0543a7";
|
|
685
690
|
export const cpdColorIconOnSolidPrimary = "#ffffff";
|
|
691
|
+
export const cpdColorGradientSubtleStop1 = "hsla(156, 99%, 36%, 0.56)";
|
|
692
|
+
export const cpdColorGradientSubtleStop2 = "hsla(153, 95%, 37%, 0.32)";
|
|
693
|
+
export const cpdColorGradientSubtleStop3 = "hsla(151, 93%, 37%, 0.23)";
|
|
694
|
+
export const cpdColorGradientSubtleStop4 = "hsla(150, 100%, 36%, 0.11)";
|
|
695
|
+
export const cpdColorGradientSubtleStop5 = "hsla(150, 79%, 41%, 0.06)";
|
|
696
|
+
export const cpdColorGradientSubtleStop6 = "rgba(0,0,0,0)";
|
|
697
|
+
export const cpdColorGradientSubtleLinear =
|
|
698
|
+
"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%)";
|
|
699
|
+
export const cpdColorGradientInfoStop1 = "hsla(216, 95%, 48%, 0.37)";
|
|
700
|
+
export const cpdColorGradientInfoStop2 = "hsla(216, 96%, 49%, 0.22)";
|
|
701
|
+
export const cpdColorGradientInfoStop3 = "hsla(216, 95%, 51%, 0.16)";
|
|
702
|
+
export const cpdColorGradientInfoStop4 = "hsla(215, 100%, 52%, 0.09)";
|
|
703
|
+
export const cpdColorGradientInfoStop5 = "hsla(218, 100%, 57%, 0.05)";
|
|
704
|
+
export const cpdColorGradientInfoStop6 = "rgba(0,0,0,0)";
|
|
705
|
+
export const cpdColorGradientInfoLinear =
|
|
706
|
+
"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%)";
|
|
707
|
+
export const cpdColorGradientActionStop1 = "#71d7ae";
|
|
708
|
+
export const cpdColorGradientActionStop2 = "#00a27c";
|
|
709
|
+
export const cpdColorGradientActionStop3 = "#00553d";
|
|
710
|
+
export const cpdColorGradientActionStop4 = "#00402b";
|
|
711
|
+
export const cpdColorGradientActionLinear =
|
|
712
|
+
"linear-gradient(180deg, #71d7ae 0%, #00a27c 33%, #00553d 66%, #00402b 100%)";
|
package/icons/$icons.json
CHANGED
package/icons/guest.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8.148 4.304a1.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 0l-6.843-6.843a1.04 1.04 0 0 1 0-1.47z"/><path d="M14.383 4.304a1.04 1.04 0 0 1 1.469 0l6.844 6.844a1.04 1.04 0 0 1 0 1.47l-6.844 6.843a1.04 1.04 0 0 1-1.469 0L7.54 12.618a1.04 1.04 0 0 1 0-1.47z"/></svg>
|
package/icons/shield.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 fill-rule="evenodd" d="M11.106 2.447a2 2 0 0 1 1.789 0l6 3A2 2 0 0 1 20 7.237V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.743 4 12V7.236a2 2 0 0 1 1.105-1.789zm4.601 6.846a1 1 0 0 0-1.414 0L11 12.586l-1.293-1.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0 0-1.414" clip-rule="evenodd"/></svg>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vector-im/compound-design-tokens",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "Compound design tokens",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"scripts": {
|
|
@@ -12,8 +12,16 @@
|
|
|
12
12
|
"check": "yarn exec biome -- check",
|
|
13
13
|
"types": "yarn exec tsc -- --noEmit"
|
|
14
14
|
},
|
|
15
|
-
"keywords": [
|
|
16
|
-
|
|
15
|
+
"keywords": [
|
|
16
|
+
"compound",
|
|
17
|
+
"design tokens",
|
|
18
|
+
"style dictionary",
|
|
19
|
+
"css"
|
|
20
|
+
],
|
|
21
|
+
"files": [
|
|
22
|
+
"./assets/web/**/*",
|
|
23
|
+
"./icons/**/*"
|
|
24
|
+
],
|
|
17
25
|
"main": "assets/web/js/index.js",
|
|
18
26
|
"type": "module",
|
|
19
27
|
"exports": {
|
|
@@ -49,7 +57,7 @@
|
|
|
49
57
|
"@babel/generator": "^7.24.7",
|
|
50
58
|
"@babel/plugin-transform-react-jsx": "^7.24.7",
|
|
51
59
|
"@babel/types": "^7.24.7",
|
|
52
|
-
"@biomejs/biome": "^
|
|
60
|
+
"@biomejs/biome": "^2.0.0",
|
|
53
61
|
"@capsizecss/core": "^4.1.2",
|
|
54
62
|
"@capsizecss/metrics": "^3.3.0",
|
|
55
63
|
"@svgr/core": "^8.1.0",
|
|
@@ -65,7 +73,7 @@
|
|
|
65
73
|
"prettier": "^3.3.3",
|
|
66
74
|
"style-dictionary": "^5.0.0",
|
|
67
75
|
"svg2vectordrawable": "^2.9.1",
|
|
68
|
-
"svgo": "^
|
|
76
|
+
"svgo": "^4.0.0",
|
|
69
77
|
"tsx": "^4.15.6",
|
|
70
78
|
"typescript": "^5.4.5",
|
|
71
79
|
"undici": "^7.2.0",
|