From 92528f361e2a64bf681299deb044197062805554 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Fri, 1 Sep 2023 15:17:28 +0200 Subject: [PATCH] Compoundify the inputs --- frontend/src/styles/cpd-form.css | 82 ++++++++++++++++++++++ frontend/src/templates.css | 2 + frontend/tailwind.config.cjs | 5 -- templates/components/field.html | 21 ++---- templates/pages/404.html | 4 +- templates/pages/account/emails/add.html | 2 +- templates/pages/account/emails/verify.html | 2 +- templates/pages/index.html | 2 +- templates/pages/login.html | 2 +- templates/pages/register.html | 2 +- 10 files changed, 99 insertions(+), 25 deletions(-) create mode 100644 frontend/src/styles/cpd-form.css diff --git a/frontend/src/styles/cpd-form.css b/frontend/src/styles/cpd-form.css new file mode 100644 index 000000000..fcf763e50 --- /dev/null +++ b/frontend/src/styles/cpd-form.css @@ -0,0 +1,82 @@ +/* Copyright 2023 The Matrix.org Foundation C.I.C. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * FIELD: Wrapper around label, control and message + */ + +.cpd-field { + display: flex; + flex-direction: column; +} + +/** + * LABEL + */ + +.cpd-label { + font-weight: var(--cpd-font-weight-medium); +} + +.cpd-label[for] { + cursor: pointer; +} + +.cpd-label[data-invalid] { + color: var(--cpd-color-text-critical-primary); +} + +/* Currently working everywhere but on Firefox (only behind a labs flag) +https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */ +.cpd-label:has(~ .cpd-control[disabled]) { + color: var(--cpd-color-text-disabled); + cursor: not-allowed; +} + +/** + * CONTROL + */ + +.cpd-control { + border: 1px solid var(--cpd-color-border-interactive-primary); + background: var(--cpd-color-bg-canvas-default); + border-radius: 0.5rem; + padding: var(--cpd-space-3x) var(--cpd-space-4x); + box-sizing: border-box; +} + +.cpd-control:hover, +input:hover ~ .cpd-control { + border-color: var(--cpd-color-border-interactive-hovered); +} + +.cpd-control:focus, +input:focus ~ .cpd-control { + outline: 2px solid var(--cpd-color-border-focused); + border-color: transparent; +} + +.cpd-control[data-invalid], +input[data-invalid] ~ .cpd-control { + border-color: var(--cpd-color-text-critical-primary); +} + +.cpd-control:disabled, +input:disabled ~ .cpd-control { + background: var(--cpd-color-bg-canvas-disabled); + border-color: var(--cpd-color-border-disabled); + color: var(--cpd-color-text-disabled); + cursor: not-allowed; +} diff --git a/frontend/src/templates.css b/frontend/src/templates.css index 843d66a26..fc4571ce2 100644 --- a/frontend/src/templates.css +++ b/frontend/src/templates.css @@ -20,6 +20,7 @@ @import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css"; @import "@vector-im/compound-web/dist/style.css"; @import "./styles/cpd-button.css"; +@import "./styles/cpd-form.css"; @import "./styles/cpd-link.css"; @config "../tailwind.templates.config.cjs"; @@ -35,4 +36,5 @@ body { font: var(--cpd-font-body-md-regular); background: var(--cpd-color-bg-canvas-default); color: var(--cpd-color-text-primary); + letter-spacing: var(--cpd-font-letter-spacing-body-md); } diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index 29d7dae08..21ab1c7b5 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -25,7 +25,6 @@ module.exports = { white: "#FFFFFF", secondary: "var(--cpd-color-text-secondary)", critical: "var(--cpd-color-text-critical-primary)", - accent: "#0DBD8B", alert: "#FF5B55", links: "#0086E6", "grey-25": "#F4F6FA", @@ -37,10 +36,6 @@ module.exports = { "grey-300": "#8E99A4", "grey-400": "#6F7882", "grey-450": "#394049", - "black-800": "#15191E", - "black-900": "#17191C", - "black-950": "#21262C", - ice: "#F4F9FD", }, fontWeight: { semibold: "var(--cpd-font-weight-semibold)", diff --git a/templates/components/field.html b/templates/components/field.html index 1aec8a832..f5eac7fd6 100644 --- a/templates/components/field.html +++ b/templates/components/field.html @@ -21,19 +21,12 @@ limitations under the License. {% set state = form_state.fields[name] | default(value=dict(errors=[], value="")) %} - {% if state.errors is not empty %} - {% set border_color = "border-alert" %} - {% set text_color = "text-alert" %} - {% else %} - {% set border_color = "border-grey-50 dark:border-grey-450" %} - {% set text_color = "text-black-800 dark:text-grey-300" %} - {% endif %} - -