wilson/language-learning-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: [frontend] color -> colour

Browse source
This commit is contained in:
wilson 2026-05-04 08:00:59 +01:00
parent bcc12e3fad
commit 568b907013
5 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/lib/components/TopNav.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { resolve } from '$app/paths';
import { page } from '$app/state'; import { page } from '$app/state';
interface Props { interface Props {
@ -12,7 +13,7 @@
<header class="topnav" role="banner"> <header class="topnav" role="banner">
<div class="topnav-inner"> <div class="topnav-inner">
<a href="/app" class="wordmark" aria-label="Home"> <a href={resolve('/app')} class="wordmark" aria-label="Home">
<span class="wordmark-text">Language Learning App</span> <span class="wordmark-text">Language Learning App</span>
</a> </a>
@ -20,7 +21,17 @@
<ul class="nav-links" role="list"> <ul class="nav-links" role="list">
<li> <li>
<a <a
href="/app/articles" href={resolve('/app/adventures')}
class="nav-link"
class:is-active={isActive('/app/adventures')}
aria-current={isActive('/app/adventures') ? 'page' : undefined}
>
Adventures
</a>
</li>
<li>
<a
href={resolve('/app/articles')}
class="nav-link" class="nav-link"
class:is-active={isActive('/app/articles')} class:is-active={isActive('/app/articles')}
aria-current={isActive('/app/articles') ? 'page' : undefined} aria-current={isActive('/app/articles') ? 'page' : undefined}
@ -73,7 +84,7 @@
background-color: var(--glass-bg); background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
} }
.topnav-inner { .topnav-inner {

12
frontend/src/routes/+page.svelte
View file

@ -130,7 +130,7 @@
background-color: var(--glass-bg); background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: 0 1px 0 color-mix(in srgb, var(--color-outline-variant) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--colour-outline-variant) 35%, transparent);
} }
.sitenav-inner { .sitenav-inner {
@ -187,7 +187,7 @@
/* ---------- Left margin ---------- */ /* ---------- Left margin ---------- */
.left-margin { .left-margin {
border-right: 1px solid var(--color-outline-variant); border-right: 1px solid var(--colour-outline-variant);
padding: var(--space-12) var(--space-5) var(--space-8); padding: var(--space-12) var(--space-5) var(--space-8);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -288,7 +288,7 @@
.divider { .divider {
border: none; border: none;
border-top: 1px solid var(--color-outline-variant); border-top: 1px solid var(--colour-outline-variant);
margin: 0; margin: 0;
} }
@ -325,7 +325,7 @@
/* ---------- Right rail ---------- */ /* ---------- Right rail ---------- */
.right-rail { .right-rail {
border-left: 1px dashed var(--color-outline-variant); border-left: 1px dashed var(--colour-outline-variant);
padding: var(--space-12) var(--space-4); padding: var(--space-12) var(--space-4);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -338,7 +338,7 @@
font-weight: var(--weight-medium); font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider); letter-spacing: var(--tracking-wider);
text-transform: uppercase; text-transform: uppercase;
color: var(--color-outline); color: var(--colour-outline);
writing-mode: vertical-rl; writing-mode: vertical-rl;
transform: rotate(180deg); transform: rotate(180deg);
white-space: nowrap; white-space: nowrap;
@ -364,7 +364,7 @@
.left-margin { .left-margin {
border-right: none; border-right: none;
border-bottom: 1px solid var(--color-outline-variant); border-bottom: 1px solid var(--colour-outline-variant);
padding: var(--space-6) var(--space-6) var(--space-5); padding: var(--space-6) var(--space-6) var(--space-5);
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;

10
frontend/src/routes/app/+page.svelte
View file

@ -87,7 +87,7 @@
/* ---------- Left margin ---------- */ /* ---------- Left margin ---------- */
.left-margin { .left-margin {
border-right: 1px solid var(--color-outline-variant); border-right: 1px solid var(--colour-outline-variant);
padding: var(--space-12) var(--space-5) var(--space-8); padding: var(--space-12) var(--space-5) var(--space-8);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -188,7 +188,7 @@
.divider { .divider {
border: none; border: none;
border-top: 1px solid var(--color-outline-variant); border-top: 1px solid var(--colour-outline-variant);
margin: 0; margin: 0;
} }
@ -249,7 +249,7 @@
/* ---------- Right rail ---------- */ /* ---------- Right rail ---------- */
.right-rail { .right-rail {
border-left: 1px dashed var(--color-outline-variant); border-left: 1px dashed var(--colour-outline-variant);
padding: var(--space-12) var(--space-4); padding: var(--space-12) var(--space-4);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -262,7 +262,7 @@
font-weight: var(--weight-medium); font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider); letter-spacing: var(--tracking-wider);
text-transform: uppercase; text-transform: uppercase;
color: var(--color-outline); color: var(--colour-outline);
writing-mode: vertical-rl; writing-mode: vertical-rl;
transform: rotate(180deg); transform: rotate(180deg);
white-space: nowrap; white-space: nowrap;
@ -288,7 +288,7 @@
.left-margin { .left-margin {
border-right: none; border-right: none;
border-bottom: 1px solid var(--color-outline-variant); border-bottom: 1px solid var(--colour-outline-variant);
padding: var(--space-6) var(--space-6) var(--space-5); padding: var(--space-6) var(--space-6) var(--space-5);
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;

2
frontend/src/routes/app/jobs/[job_id]/+page.svelte
View file

@ -171,7 +171,7 @@
.spinner { .spinner {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
border: 2px solid var(--color-outline-variant); border: 2px solid var(--colour-outline-variant);
border-top-color: var(--color-primary); border-top-color: var(--color-primary);
border-radius: 50%; border-radius: 50%;
animation: spin 0.9s linear infinite; animation: spin 0.9s linear infinite;

2
frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
View file

@ -59,7 +59,7 @@
flex-direction: column; flex-direction: column;
gap: var(--space-3); gap: var(--space-3);
padding-top: var(--space-4); padding-top: var(--space-4);
border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent); border-top: 1px solid color-mix(in srgb, var(--colour-outline-variant) 30%, transparent);
} }
.section-title { .section-title {