Skip to content
This repository has been archived by the owner on Sep 10, 2024. It is now read-only.

Commit

Permalink
Upgrade compound and fix bad focus rings on inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandhose
sandhose committed Feb 8, 2024
1 parent bc77d93 commit 54039c0
Show file tree
Hide file tree
Showing 14 changed files with 729 additions and 379 deletions.
18 changes: 9 additions & 9 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.1.0",
"@vector-im/compound-web": "^3.1.1",
"classnames": "^2.5.1",
"date-fns": "^3.3.1",
"graphql": "^16.8.1",
Expand Down
102 changes: 78 additions & 24 deletions frontend/src/styles/cpd-button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

/**
Expand All @@ -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);
}

/**
Expand All @@ -64,43 +75,91 @@
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);
background: var(--cpd-color-bg-subtle-secondary);
}
}

.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"] {
Expand All @@ -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);
}
2 changes: 1 addition & 1 deletion frontend/src/styles/cpd-form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
15 changes: 10 additions & 5 deletions frontend/src/styles/cpd-mfa-control.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 */
Expand All @@ -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);
Expand All @@ -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;
}
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/styles/cpd-text-control.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
13 changes: 10 additions & 3 deletions templates/components/back_to_client.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,18 @@
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 %}
Expand Down
Loading

0 comments on commit 54039c0

Please sign in to comment.