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

50
src/style.css
View File

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