Upgrade compound and fix bad focus rings on inputs

This commit is contained in:
Quentin Gliech
2024-02-08 16:52:28 +01:00
parent d45fbb96cc
commit dea6b040bf
23 changed files with 782 additions and 493 deletions

View File

@@ -18,8 +18,8 @@
"@urql/exchange-graphcache": "^6.4.1",
"@urql/exchange-refocus": "^1.0.2",
"@urql/exchange-request-policy": "^1.0.2",
"@vector-im/compound-design-tokens": "^0.0.7",
"@vector-im/compound-web": "^3.0.1",
"@vector-im/compound-design-tokens": "1.0.0",
"@vector-im/compound-web": "^3.1.1",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
"graphql": "^16.8.1",
@@ -9332,17 +9332,17 @@
}
},
"node_modules/@vector-im/compound-design-tokens": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-0.0.7.tgz",
"integrity": "sha512-RCQc6qr+s8cp4xKbNi/I3OL43uPCH+N4L9vYf0r+qwRy4WCKdI4QL0TBTV4bOo8hF49z8e+BgU5ZIu5TVQXNMQ==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@vector-im/compound-design-tokens/-/compound-design-tokens-1.0.0.tgz",
"integrity": "sha512-/hKAxE/WsmnNZamlSmLoFeAhNDhRpFdJYuY8NrPLaS/dKS/QRnty6UYzs9yWOVNFeiBfkNsrb7wYIFMrYWSRJw==",
"dependencies": {
"svg2vectordrawable": "^2.9.1"
}
},
"node_modules/@vector-im/compound-web": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-3.0.1.tgz",
"integrity": "sha512-QqejUl6o+0HE/mrN2xI54KKIPWPHbfoC8+JfYstLJpatr0G496FnWUJgglfb7a33ekkmctP1Een1bwuG8yZAvQ==",
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@vector-im/compound-web/-/compound-web-3.1.1.tgz",
"integrity": "sha512-s+YQsMi5DotbHy47zP9Mrz19a4Vb0HF76JoHAita7QJkSqx+w/p1NECH4WTUnklbe8W3T5kVwSuwEx9eV8c2ZA==",
"dependencies": {
"@radix-ui/react-context-menu": "^2.1.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -9359,7 +9359,7 @@
"@fontsource/inter": "^5",
"@types/react": "*",
"@types/react-dom": "*",
"@vector-im/compound-design-tokens": ">=0.0.6 <0.1.0",
"@vector-im/compound-design-tokens": ">=1.0.0 <2.0.0",
"react": "^17 || ^18",
"react-dom": "^17 || ^18"
},

View File

@@ -26,8 +26,8 @@
"@urql/exchange-graphcache": "^6.4.1",
"@urql/exchange-refocus": "^1.0.2",
"@urql/exchange-request-policy": "^1.0.2",
"@vector-im/compound-design-tokens": "^0.0.7",
"@vector-im/compound-web": "^3.0.1",
"@vector-im/compound-design-tokens": "1.0.0",
"@vector-im/compound-web": "^3.1.1",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
"graphql": "^16.8.1",

View File

@@ -5,15 +5,14 @@ exports[`<DeviceTypeIcon /> > renders Web device type 1`] = `
<svg
aria-label="Web"
class="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
fill="currentColor"
d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
/>
</svg>
</div>
@@ -24,15 +23,14 @@ exports[`<DeviceTypeIcon /> > renders desktop device type 1`] = `
<svg
aria-label="Desktop"
class="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 18C3.45 18 2.97917 17.8042 2.5875 17.4125C2.19583 17.0208 2 16.55 2 16V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H4ZM4 16H20V5H4V16ZM2 21C1.71667 21 1.47917 20.9042 1.2875 20.7125C1.09583 20.5208 1 20.2833 1 20C1 19.7167 1.09583 19.4792 1.2875 19.2875C1.47917 19.0958 1.71667 19 2 19H22C22.2833 19 22.5208 19.0958 22.7125 19.2875C22.9042 19.4792 23 19.7167 23 20C23 20.2833 22.9042 20.5208 22.7125 20.7125C22.5208 20.9042 22.2833 21 22 21H2Z"
fill="currentColor"
d="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
/>
</svg>
</div>
@@ -43,15 +41,14 @@ exports[`<DeviceTypeIcon /> > renders mobile device type 1`] = `
<svg
aria-label="Mobile"
class="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V3C5 2.45 5.19583 1.97917 5.5875 1.5875C5.97917 1.19583 6.45 1 7 1H17C17.55 1 18.0208 1.19583 18.4125 1.5875C18.8042 1.97917 19 2.45 19 3V21C19 21.55 18.8042 22.0208 18.4125 22.4125C18.0208 22.8042 17.55 23 17 23H7ZM7 18H17V6H7V18Z"
fill="currentColor"
d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"
/>
</svg>
</div>
@@ -62,23 +59,17 @@ exports[`<DeviceTypeIcon /> > renders unknown device type 1`] = `
<svg
aria-label="Unknown device type"
class="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
</div>

View File

@@ -19,15 +19,14 @@ exports[`<SelectableSession /> > renders an unselected session 1`] = `
<svg
aria-hidden="true"
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.54991 17.5749C9.41658 17.5749 9.29158 17.5541 9.17491 17.5124C9.05824 17.4707 8.94991 17.3999 8.84991 17.2999L4.54991 12.9999C4.36658 12.8166 4.27908 12.5791 4.28741 12.2874C4.29574 11.9957 4.39158 11.7582 4.57491 11.5749C4.75824 11.3916 4.99158 11.2999 5.27491 11.2999C5.55824 11.2999 5.79158 11.3916 5.97491 11.5749L9.54991 15.1499L18.0249 6.6749C18.2082 6.49157 18.4457 6.3999 18.7374 6.3999C19.0291 6.3999 19.2666 6.49157 19.4499 6.6749C19.6332 6.85824 19.7249 7.09574 19.7249 7.3874C19.7249 7.67907 19.6332 7.91657 19.4499 8.0999L10.2499 17.2999C10.1499 17.3999 10.0416 17.4707 9.92491 17.5124C9.80824 17.5541 9.68324 17.5749 9.54991 17.5749Z"
fill="currentColor"
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.712-.275s.53.092.713.275c.183.183.275.42.275.712s-.092.53-.275.713l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
/>
</svg>
</div>

View File

@@ -7,23 +7,17 @@ exports[`<Session /> > renders a finished session 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div
@@ -67,23 +61,17 @@ exports[`<Session /> > renders an active session 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div
@@ -116,23 +104,17 @@ exports[`<Session /> > renders ip address 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div
@@ -191,23 +173,17 @@ exports[`<Session /> > uses client name when truthy 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div
@@ -272,23 +248,17 @@ exports[`<Session /> > uses session name when truthy 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div

View File

@@ -21,15 +21,14 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
>
<svg
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
/>
</svg>
</div>
@@ -226,15 +225,14 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
>
<svg
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
/>
</svg>
</div>

View File

@@ -21,15 +21,14 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
>
<svg
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
/>
</svg>
</div>

View File

@@ -18,15 +18,14 @@ exports[`<SessionHeader /> > renders a session header 1`] = `
>
<svg
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
fill="currentColor"
d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
/>
</svg>
</div>

View File

@@ -9,15 +9,14 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
<svg
aria-hidden="true"
class="_icon_1bz08_57"
fill="none"
fill="currentColor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
fill="currentColor"
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
/>
</svg>
<div
@@ -58,15 +57,14 @@ exports[`<UnverifiedEmailAlert /> > renders a warning when there are unverified
>
<svg
class="cpd-icon"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
fill="currentColor"
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
/>
</svg>
</div>

View File

@@ -7,23 +7,17 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div
@@ -88,23 +82,17 @@ exports[`<CompatSession /> > renders an active session 1`] = `
<svg
aria-label="Unknown device type"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19Z"
fill="currentColor"
d="M5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
/>
<path
d="M11 10C11 9.44772 11.4477 9 12 9C12.5523 9 13 9.44772 13 10C13 10.3772 12.7915 10.7072 12.4788 10.8784C12.1685 11.0482 11.8204 11.2907 11.5387 11.6191C11.2528 11.9526 11 12.4196 11 13C11 13.5523 11.4477 14 12 14C12.5502 14 12.9966 13.5556 13 13.0062C13.0038 12.9954 13.017 12.9676 13.0569 12.9211C13.1336 12.8316 13.265 12.7281 13.4392 12.6327C14.3671 12.1247 15 11.137 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.5523 9.44772 11 10 11C10.5523 11 11 10.5523 11 10ZM12.9986 13.0115V13.0115C12.9986 13.0115 12.9992 13.0101 12.9996 13.0074L12.9986 13.0115Z"
fill="currentColor"
/>
<path
d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
fill="currentColor"
d="M11 10a1 1 0 1 1 1.479.878c-.31.17-.659.413-.94.741-.286.334-.539.8-.539 1.381a1 1 0 0 0 2 .006.3.3 0 0 1 .057-.085 1.39 1.39 0 0 1 .382-.288A3 3 0 1 0 9 10a1 1 0 1 0 2 0Zm1.999 3.011v-.004.005ZM12 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
/>
</svg>
<div

View File

@@ -7,15 +7,14 @@ exports[`<OAuth2Session /> > renders a finished session 1`] = `
<svg
aria-label="Web"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
fill="currentColor"
d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
/>
</svg>
<div
@@ -80,15 +79,14 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
<svg
aria-label="Web"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18Z"
fill="currentColor"
d="M4 20c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 18V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 4 4h16c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v12c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 20H4Zm0-2h16V8H4v10Z"
/>
</svg>
<div
@@ -162,15 +160,14 @@ exports[`<OAuth2Session /> > renders correct icon for a native session 1`] = `
<svg
aria-label="Mobile"
className="_icon_e677aa"
fill="none"
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 23C6.45 23 5.97917 22.8042 5.5875 22.4125C5.19583 22.0208 5 21.55 5 21V3C5 2.45 5.19583 1.97917 5.5875 1.5875C5.97917 1.19583 6.45 1 7 1H17C17.55 1 18.0208 1.19583 18.4125 1.5875C18.8042 1.97917 19 2.45 19 3V21C19 21.55 18.8042 22.0208 18.4125 22.4125C18.0208 22.8042 17.55 23 17 23H7ZM7 18H17V6H7V18Z"
fill="currentColor"
d="M7 23c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 5 21V3c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 1h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v18c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 17 23H7Zm0-5h10V6H7v12Z"
/>
</svg>
<div

View File

@@ -23,11 +23,22 @@
gap: var(--cpd-space-2x);
box-sizing: border-box;
font: var(--cpd-font-body-md-semibold);
transition-duration: 0.1s;
transition-property: color, background-color, border-color;
}
.cpd-button > svg {
transition: color 0.1s;
}
.cpd-button[disabled] {
cursor: not-allowed;
pointer-events: all !important;
color: var(--cpd-color-text-disabled) !important;
}
.cpd-button[disabled] > svg {
color: var(--cpd-color-icon-disabled) !important;
}
/**
@@ -46,12 +57,12 @@
.cpd-button[data-size="sm"] {
padding-block: var(--cpd-space-1x);
padding-inline: var(--cpd-space-6x);
padding-inline: var(--cpd-space-5x);
min-block-size: var(--cpd-space-9x);
}
.cpd-button[data-size="sm"].has-icon {
padding-inline-start: var(--cpd-space-5x);
padding-inline-start: var(--cpd-space-4x);
}
/**
@@ -64,27 +75,52 @@
border-width: 0;
}
.cpd-button[data-kind="primary"] > svg {
color: var(--cpd-color-icon-on-solid-primary);
}
@media (hover) {
.cpd-button[data-kind="primary"]:hover {
background: var(--cpd-color-bg-action-primary-hovered);
}
}
.cpd-button[data-kind="primary"]:active {
.cpd-button[data-kind="primary"]:active,
.cpd-button[data-kind="primary"][aria-expanded="true"] {
background: var(--cpd-color-bg-action-primary-pressed);
}
.cpd-button[data-kind="primary"][disabled] {
color: var(--cpd-color-text-disabled);
background: var(--cpd-color-bg-subtle-primary);
/* !important to override destructive background */
background: var(--cpd-color-bg-subtle-primary) !important;
}
.cpd-button[data-kind="primary"].destructive {
background: var(--cpd-color-bg-critical-primary);
}
@media (hover) {
.cpd-button[data-kind="primary"].destructive:hover {
background: var(--cpd-color-bg-critical-hovered);
}
}
.cpd-button[data-kind="primary"].destructive:active,
.cpd-button[data-kind="primary"].destructive[aria-expanded="true"] {
/* TODO: We're waiting for this value to be formalized as a semantic token */
background: var(--cpd-color-red-1100);
}
.cpd-button[data-kind="secondary"] {
border: 1px solid var(--cpd-color-border-interactive-primary);
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
background: var(--cpd-color-bg-canvas-default);
}
.button[data-kind="secondary"] > svg {
color: var(--cpd-color-icon-primary);
}
@media (hover) {
.cpd-button[data-kind="secondary"]:hover {
border-color: var(--cpd-color-border-interactive-hovered);
@@ -92,15 +128,38 @@
}
}
.cpd-button[data-kind="secondary"]:active {
.cpd-button[data-kind="secondary"]:active,
.cpd-button[data-kind="secondary"][aria-expanded="true"] {
border-color: var(--cpd-color-border-interactive-hovered);
background: var(--cpd-color-bg-subtle-primary);
}
.cpd-button[data-kind="secondary"][disabled] {
border-color: var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-disabled);
background: var(--cpd-color-bg-subtle-secondary);
/* !important to override destructive values */
border-color: var(--cpd-color-border-interactive-secondary) !important;
background: var(--cpd-color-bg-subtle-secondary) !important;
}
.cpd-button[data-kind="secondary"].destructive {
border-color: var(--cpd-color-border-critical-subtle);
color: var(--cpd-color-text-critical-primary);
}
.cpd-button[data-kind="secondary"].destructive > svg {
color: var(--cpd-color-icon-critical-primary);
}
@media (hover) {
.cpd-button[data-kind="secondary"].destructive:hover {
border-color: var(--cpd-color-border-critical-hovered);
background: var(--cpd-color-bg-critical-subtle);
}
}
.cpd-button[data-kind="secondary"].destructive:active,
.cpd-button[data-kind="secondary"].destructive[aria-expanded="true"] {
border-color: var(--cpd-color-border-critical-hovered);
background: var(--cpd-color-bg-critical-subtle-hovered);
}
.cpd-button[data-kind="tertiary"] {
@@ -116,34 +175,29 @@
}
}
.cpd-button[data-kind="tertiary"]:active {
.cpd-button[data-kind="tertiary"]:active,
.cpd-button[data-kind="tertiary"][aria-expanded="true"] {
background: var(--cpd-color-bg-subtle-primary);
}
.cpd-button[data-kind="tertiary"][disabled] {
color: var(--cpd-color-text-disabled);
/* !important to override destructive background */
background: transparent !important;
}
.cpd-button[data-kind="destructive"] {
border: 1px solid var(--cpd-color-border-critical-primary);
.cpd-button[data-kind="tertiary"].destructive {
color: var(--cpd-color-text-critical-primary);
background: var(--cpd-color-bg-canvas-default);
}
@media (hover) {
.cpd-button[data-kind="destructive"]:hover {
border-color: var(--cpd-color-border-critical-hovered);
.cpd-button[data-kind="tertiary"].destructive:hover {
background: var(--cpd-color-bg-critical-subtle);
}
}
.cpd-button[data-kind="destructive"]:active {
border-color: var(--cpd-color-border-critical-hovered);
.cpd-button[data-kind="tertiary"].destructive:active,
.cpd-button[data-kind="tertiary"].destructive[aria-expanded="true"] {
background: var(--cpd-color-bg-critical-subtle-hovered);
}
.cpd-button[data-kind="destructive"][disabled] {
border-color: var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-disabled);
background: var(--cpd-color-bg-subtle-secondary);
}

View File

@@ -36,7 +36,7 @@
.cpd-form-inline-field {
display: flex;
flex-direction: row;
gap: var(--cpd-space-3x);
gap: var(--cpd-space-5x);
}
.cpd-form-inline-field-body {

View File

@@ -52,6 +52,11 @@
margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
}
.cpd-mfa-control:focus-visible {
/* This is set to auto by tailwind, we need to reset this */
outline: none;
}
.cpd-mfa-digit {
box-sizing: border-box;
inline-size: var(--cpd-space-10x);
@@ -63,7 +68,7 @@
}
@media (hover) {
.cpd-mfa-control:hover ~ .cpd-mfa-digit {
.cpd-mfa-control:hover~.cpd-mfa-digit {
border-color: var(--cpd-color-border-interactive-hovered);
/** TODO: have the shadow in the design tokens */
@@ -76,7 +81,7 @@
cursor: not-allowed;
}
.cpd-mfa-control:disabled ~ .cpd-mfa-digit {
.cpd-mfa-control:disabled~.cpd-mfa-digit {
box-shadow: none;
background: var(--cpd-color-bg-canvas-disabled);
border-color: var(--cpd-color-border-disabled);
@@ -86,17 +91,17 @@
color: var(--cpd-color-text-secondary);
}
.cpd-mfa-control[readonly] ~ .cpd-mfa-digit {
.cpd-mfa-control[readonly]~.cpd-mfa-digit {
box-shadow: none;
background: var(--cpd-color-bg-subtle-secondary);
border-color: var(--cpd-color-bg-subtle-secondary);
}
.cpd-mfa-control[data-invalid] ~ .cpd-mfa-digit {
.cpd-mfa-control[data-invalid]~.cpd-mfa-digit {
border-color: var(--cpd-color-text-critical-primary);
}
.cpd-mfa-control:focus ~ .cpd-mfa-digit:not([data-filled]) {
.cpd-mfa-control:focus~.cpd-mfa-digit:not([data-filled]) {
outline: 2px solid var(--cpd-color-border-focused);
border-color: transparent;
}

View File

@@ -34,7 +34,9 @@
border-color: var(--cpd-color-border-interactive-hovered);
}
.cpd-text-control:focus {
.cpd-text-control:focus,
/* This is set to auto by tailwind, we need to reset this */
.cpd-text-control:focus-visible {
outline: 2px solid var(--cpd-color-border-focused);
border-color: transparent;
}

View File

@@ -14,11 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
#}
{% macro link(text, uri, mode, params, type="button", kind="primary") %}
{% macro link(text, uri, mode, params, type="button", kind="primary", destructive=False) %}
{% if type == "button" %}
{% set class = "cpd-button" %}
{% if destructive %}
{% set class = "cpd-button destructive" %}
{% else %}
{% set class = "cpd-button" %}
{% endif %}
{% elif type == "link" %}
{% set class = "cpd-link" %}
{% set class = "cpd-link" %}
{% if destructive %}
{% set kind = "critical" %}
{% endif %}
{% else %}
{{ throw(message="Invalid type") }}
{% endif %}

File diff suppressed because it is too large Load Diff

View File

@@ -23,7 +23,7 @@ limitations under the License.
{% if as_link %}
<button class="cpd-link flex-1" data-kind="critical" type="submit">{{ text }}</button>
{% else %}
<button class="cpd-button flex-1" data-kind="destructive" data-size="lg" type="submit">{{ text }}</button>
<button class="cpd-button destructive flex-1" data-kind="secondary" data-size="lg" type="submit">{{ text }}</button>
{% endif %}
</form>
{% endmacro %}

View File

@@ -90,7 +90,7 @@ limitations under the License.
<button type="submit" name="action" value="consent" class="cpd-button" data-kind="primary" data-size="lg">
{{ _("action.continue") }}
</button>
<button type="submit" name="action" value="reject" class="cpd-button" data-kind="destructive" data-size="lg">
<button type="submit" name="action" value="reject" class="cpd-button destructive" data-kind="secondary" data-size="lg">
{{ _("action.cancel") }}
</button>
</form>

View File

@@ -98,7 +98,8 @@ limitations under the License.
{% if next and next.kind == "continue_authorization_grant" %}
{{ back_to_client.link(
text=_("action.cancel"),
kind="destructive",
kind="secondary",
destructive=True,
uri=next.grant.redirect_uri,
mode=next.grant.response_mode,
params=dict(error="access_denied", state=next.grant.state)

View File

@@ -50,7 +50,7 @@ limitations under the License.
{% if grant.grant_type == "authorization_code" %}
{{ back_to_client.link(
text=_("action.cancel"),
kind="destructive",
destructive=True,
uri=grant.redirect_uri,
mode=grant.response_mode,
params=dict(error="access_denied", state=grant.state)

View File

@@ -43,7 +43,7 @@ limitations under the License.
{% if next and next.kind == "continue_authorization_grant" %}
{{ back_to_client.link(
text="Cancel",
kind="destructive",
destructive=True,
uri=next.grant.redirect_uri,
mode=next.grant.response_mode,
params=dict(error="access_denied", state=next.grant.state)

View File

@@ -75,7 +75,7 @@ limitations under the License.
{% if next and next.kind == "continue_authorization_grant" %}
{{ back_to_client.link(
text=_("action.cancel"),
kind="destructive",
destructive=True,
uri=next.grant.redirect_uri,
mode=next.grant.response_mode,
params=dict(error="access_denied", state=next.grant.state)