letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Compoundify the inputs

Browse Source
This commit is contained in:
Quentin Gliech
2023-09-01 15:17:28 +02:00
parent 2bbd0d2292
commit 92528f361e
10 changed files with 99 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/src/styles/cpd-form.css Normal file
View File

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

2
frontend/src/templates.css
View File

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

5
frontend/tailwind.config.cjs
View File

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

21
templates/components/field.html
View File

@@ -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 %}
<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 @@ limitations under the License.
{% 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 @@ limitations under the License.
{% endif %}
{% endfor %}
{% endif %}
</label>
</div>
{% endmacro input %}

4
templates/pages/404.html
View File

@@ -21,7 +21,9 @@ limitations under the License.
<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 />

2
templates/pages/account/emails/add.html
View File

@@ -26,7 +26,7 @@ limitations under the License.
{% 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 %}

2
templates/pages/account/emails/verify.html
View File

@@ -27,7 +27,7 @@ limitations under the License.
{% 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 %}

2
templates/pages/index.html
View File

@@ -23,7 +23,7 @@ limitations under the License.
<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>

2
templates/pages/login.html
View File

@@ -34,7 +34,7 @@ limitations under the License.
{% 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 %}

2
templates/pages/register.html
View File

@@ -25,7 +25,7 @@ limitations under the License.
</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 %}