Compoundify the inputs

Author: sandhose

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;
+}

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);
 }

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)",

templates/components/field.html

@@ -21,19 +21,12 @@
 
   {% 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 %}
-
-  <label class="flex flex-col {{ class }}">
-    <div class="mx-2 -mb-3 -mt-2 leading-5 px-1 z-10 self-start bg-white dark:bg-black-900 border-white border-2 dark:border-black-900 rounded-full text-sm {{ text_color }}">{{ label }}</div>
+  <div class="flex flex-col cpd-field {{ class }}">
+    <div class="cpd-label"{% if state.errors is not empty %} data-invalid{% endif %}>{{ label }}</div>
     <input name="{{ name }}"
-      class="z-0 px-3 py-2 bg-white dark:bg-black-900 rounded-lg {{ border_color }} border-2 focus:border-accent focus:ring-0 focus:outline-0"
-      type="{{ type }}" 
+      class="cpd-control"
+      {% if state.errors is not empty %} data-invalid {% endif %}
+      type="{{ type }}"
       inputmode="{{ inputmode }}"
       {% if required %} required {% endif %}
       {% if disabled %} disabled {% endif %}
@@ -45,7 +38,7 @@
     {% if state.errors is not empty %}
       {% for error in state.errors %}
         {% if error.kind != "unspecified" %}
-          <div class="mx-4 text-sm text-alert">
+          <div class="text-sm text-critical">
             {% if error.kind == "required" %}
               This field is required
             {% elif error.kind == "exists" and name == "username" %}
@@ -59,5 +52,5 @@
         {% endif %}
       {% endfor %}
     {% endif %}
-  </label>
+  </div>
 {% endmacro input %}

templates/pages/404.html

@@ -21,7 +21,9 @@
     <div class="w-64 flex flex-col gap-2">
         <h1 class="text-xl font-semibold">Page not found</h1>
         <p>The page you were looking for doesn't exist or has been moved</p>
-        <a class="text-links hover:text-links/70" href="/">Go back to the homepage</a>
+        <div>
+            <a class="cpd-link" data-kind="primary" href="/">Go back to the homepage</a>
+        </div>
 
         <hr />
 

templates/pages/account/emails/add.html

@@ -26,7 +26,7 @@ <h1 class="text-lg text-center font-medium">Add an email address</h1>
 
       {% if form.errors is not empty %}
         {% for error in form.errors %}
-          <div class="text-alert font-medium">
+          <div class="text-critical font-medium">
             {{ errors::form_error_message(error=error) }}
           </div>
         {% endfor %}

templates/pages/account/emails/verify.html

@@ -27,7 +27,7 @@ <h1 class="text-lg text-center font-medium">Email verification</h1>
 
       {% if form.errors is not empty %}
         {% for error in form.errors %}
-          <div class="text-alert font-medium">
+          <div class="text-critical font-medium">
             {{ errors::form_error_message(error=error) }}
           </div>
         {% endfor %}

templates/pages/index.html

@@ -23,7 +23,7 @@
       <h1 class="my-2 text-5xl font-semibold leading-tight">Matrix Authentication Service</h1>
       <p class="text-lg">
         OpenID Connect discovery document:
-        <a class="text-links hover:text-links/70" href="{{ discovery_url }}">{{ discovery_url }}</a>
+        <a class="cpd-link" data-kind="primary" href="{{ discovery_url }}">{{ discovery_url }}</a>
       </p>
     </div>
   </section>

templates/pages/login.html

@@ -34,7 +34,7 @@ <h1 class="text-lg text-center font-medium">Sign in</h1>
 
         {% if form.errors is not empty %}
           {% for error in form.errors %}
-            <div class="text-alert font-medium">
+            <div class="text-critical font-medium">
               {{ errors::form_error_message(error=error) }}
             </div>
           {% endfor %}

templates/pages/register.html

@@ -25,7 +25,7 @@ <h1 class="text-lg text-center font-medium">Create an account</h1>
       </div>
       {% if form.errors is not empty %}
         {% for error in form.errors %}
-          <div class="text-alert font-medium">
+          <div class="text-critical font-medium">
             {{ errors::form_error_message(error=error) }}
           </div>
         {% endfor %}