diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 88f65862e..a05b8d7ae 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -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"
},
diff --git a/frontend/package.json b/frontend/package.json
index bba942321..52dc5ae7d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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",
diff --git a/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
index 6e9b9b748..64083f069 100644
--- a/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/DeviceTypeIcon.test.tsx.snap
@@ -5,15 +5,14 @@ exports[` > renders Web device type 1`] = `
@@ -24,15 +23,14 @@ exports[` > renders desktop device type 1`] = `
@@ -43,15 +41,14 @@ exports[` > renders mobile device type 1`] = `
@@ -62,23 +59,17 @@ exports[` > renders unknown device type 1`] = `
diff --git a/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap b/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap
index f142e7cc2..fe2bc6dd2 100644
--- a/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap
@@ -19,15 +19,14 @@ exports[` > renders an unselected session 1`] = `
diff --git a/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap b/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
index 2e6978fc4..7da7ab3d5 100644
--- a/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
+++ b/frontend/src/components/Session/__snapshots__/Session.test.tsx.snap
@@ -7,23 +7,17 @@ exports[` > renders a finished session 1`] = `
> renders an active session 1`] = `
> renders ip address 1`] = `
> uses client name when truthy 1`] = `
> uses session name when truthy 1`] = `
> renders a compatability session details 1`] = `
>
@@ -226,15 +225,14 @@ exports[` > renders a compatability session without an ssoL
>
diff --git a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
index 3ef249f01..f5e70446c 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
@@ -21,15 +21,14 @@ exports[` > renders session details 1`] = `
>
diff --git a/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
index e0df190f7..3d24ef729 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap
@@ -18,15 +18,14 @@ exports[` > renders a session header 1`] = `
>
diff --git a/frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap b/frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap
index a71929189..b915ed74a 100644
--- a/frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap
+++ b/frontend/src/components/UnverifiedEmailAlert/__snapshots__/UnverifiedEmailAlert.test.tsx.snap
@@ -9,15 +9,14 @@ exports[` > renders a warning when there are unverified
> renders a warning when there are unverified
>
diff --git a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
index 443c54261..7c3672207 100644
--- a/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
+++ b/frontend/src/components/__snapshots__/CompatSession.test.tsx.snap
@@ -7,23 +7,17 @@ exports[` > renders a finished session 1`] = `
> renders an active session 1`] = `
> renders a finished session 1`] = `
> renders an active session 1`] = `
> renders correct icon for a native session 1`] = `
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);
-}
diff --git a/frontend/src/styles/cpd-form.css b/frontend/src/styles/cpd-form.css
index 3485abb06..6cac867d9 100644
--- a/frontend/src/styles/cpd-form.css
+++ b/frontend/src/styles/cpd-form.css
@@ -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 {
diff --git a/frontend/src/styles/cpd-mfa-control.css b/frontend/src/styles/cpd-mfa-control.css
index c842236a6..990345374 100644
--- a/frontend/src/styles/cpd-mfa-control.css
+++ b/frontend/src/styles/cpd-mfa-control.css
@@ -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;
}
diff --git a/frontend/src/styles/cpd-text-control.css b/frontend/src/styles/cpd-text-control.css
index b8ea2b474..b60836de7 100644
--- a/frontend/src/styles/cpd-text-control.css
+++ b/frontend/src/styles/cpd-text-control.css
@@ -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;
}
diff --git a/templates/components/back_to_client.html b/templates/components/back_to_client.html
index 3f4780b2e..fa355d5fe 100644
--- a/templates/components/back_to_client.html
+++ b/templates/components/back_to_client.html
@@ -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 %}
diff --git a/templates/components/icon.html b/templates/components/icon.html
index 6f8002d79..8f7b1a128 100644
--- a/templates/components/icon.html
+++ b/templates/components/icon.html
@@ -30,758 +30,1039 @@ done
#}
+{% macro admin() %}
+
+{% endmacro %}
+
+{% macro arrow_down() %}
+
+{% endmacro %}
+
{% macro arrow_left() %}
-