xuyue/teaching-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add radius/spacing design tokens and apply across styles

Browse Source
This commit is contained in:
yuetsh
2026-06-16 22:15:09 -06:00
parent be8fe206bf
commit e3a21a46b5
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/LoginPage.vue
View File

@@ -80,7 +80,7 @@ async function handleSubmit(): Promise<void> {
gap: 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
border-radius: var(--radius-lg);
box-shadow: 0 4px 18px rgba(32, 42, 51, 0.12);
padding: 24px;
}
@@ -95,7 +95,7 @@ async function handleSubmit(): Promise<void> {
.field {
display: flex;
flex-direction: column;
gap: 6px;
gap: var(--space-2);
}
.field label {

50
src/style.css
View File

@@ -11,6 +11,16 @@
--muted: #68747f;
--paper-width: 210mm;
--paper-min-height: 297mm;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-pill: 999px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
}
* {
@@ -69,7 +79,7 @@ input {
.ui-button {
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
border-radius: var(--radius-md);
padding: 6px 14px;
color: var(--green-700);
cursor: pointer;
@@ -111,7 +121,7 @@ input {
.ui-field,
.ui-select {
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--radius-md);
padding: 8px 12px;
background: #fff;
color: #202a33;
@@ -142,7 +152,7 @@ input {
.ui-table th,
.ui-table td {
text-align: left;
padding: 8px 10px;
padding: var(--space-2) var(--space-2);
border-bottom: 1px solid var(--line);
}
@@ -183,7 +193,7 @@ input {
.workspace-toolbar button {
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
border-radius: var(--radius-md);
padding: 6px 14px;
color: var(--green-700);
cursor: pointer;
@@ -285,7 +295,7 @@ input {
flex: 0 0 auto;
background: #e67e22;
color: #fff;
border-radius: 999px;
border-radius: var(--radius-pill);
font-size: 12px;
line-height: 1.6;
min-width: 1.6em;
@@ -406,7 +416,7 @@ table {
.objective-row {
display: flex;
align-items: baseline;
gap: 6px;
gap: var(--space-2);
}
.objective-label {
@@ -427,7 +437,7 @@ table {
.process-step-actions button {
border: 1px solid var(--line);
background: #fff;
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 2px 6px;
font-size: 12px;
cursor: pointer;
@@ -443,7 +453,7 @@ table {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
white-space: pre-wrap;
border: 1px solid var(--line);
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 8px;
min-height: 6em;
}
@@ -453,7 +463,7 @@ table {
padding: 8px 12px;
border: 1px solid #e6c98b;
background: #fbf3e1;
border-radius: 4px;
border-radius: var(--radius-sm);
color: #8a6116;
font-size: 13px;
}
@@ -469,7 +479,7 @@ table {
display: block;
width: 100%;
border: 1px solid transparent;
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 2px 4px;
background: transparent;
resize: none;
@@ -504,7 +514,7 @@ table {
.markdown-preview {
min-height: 1.6em;
padding: 2px 4px;
border-radius: 4px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: text;
}
@@ -529,7 +539,7 @@ table {
display: block;
width: 100%;
border: 1px solid var(--green-600);
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 2px 4px;
background: #fff;
resize: none;
@@ -548,7 +558,7 @@ table {
max-width: 480px;
min-height: 200px;
border: 2px dashed var(--line);
border-radius: 12px;
border-radius: var(--radius-xl);
background: #fff;
color: var(--muted);
text-align: center;
@@ -566,7 +576,7 @@ table {
min-height: 0;
margin: 0;
padding: 6px 14px;
border-radius: 6px;
border-radius: var(--radius-md);
}
.upload-dropzone-input {
@@ -600,7 +610,7 @@ table {
.dialog {
background: #fff;
border-radius: 8px;
border-radius: var(--radius-lg);
padding: 24px;
max-width: 420px;
box-shadow: 0 12px 32px rgba(32, 42, 51, 0.25);
@@ -622,7 +632,7 @@ table {
.dialog-actions button {
border: 1px solid var(--line);
background: #fff;
border-radius: 6px;
border-radius: var(--radius-md);
padding: 6px 14px;
cursor: pointer;
}
@@ -645,7 +655,7 @@ table {
.app-notice button {
border: 1px solid currentcolor;
background: none;
border-radius: 4px;
border-radius: var(--radius-sm);
padding: 2px 8px;
cursor: pointer;
color: inherit;
@@ -694,7 +704,7 @@ table {
.dialog input {
flex: 1 1 auto;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--radius-md);
padding: 8px 12px;
width: 100%;
}
@@ -715,7 +725,7 @@ table {
padding: 12px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
border-radius: var(--radius-lg);
}
.book-list-name {
@@ -738,7 +748,7 @@ table {
display: block;
width: 100%;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--radius-md);
padding: 8px 12px;
resize: vertical;
margin-top: 8px;