Tune Studio display tokens for rails, radius, and amber CTA.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+39
-1
@@ -19,6 +19,7 @@
|
||||
--card-pad: 0.75rem;
|
||||
--display-type-title: 1.75rem;
|
||||
--display-type-body: 0.875rem;
|
||||
--display-viewer-radius: 0.75rem;
|
||||
}
|
||||
|
||||
[data-display='studio'] {
|
||||
@@ -27,6 +28,31 @@
|
||||
--card-pad: 1rem;
|
||||
--display-type-title: 1.875rem;
|
||||
--display-type-body: 0.9375rem;
|
||||
--display-viewer-radius: 8px;
|
||||
}
|
||||
|
||||
[data-display] .display-title {
|
||||
font-size: var(--display-type-title);
|
||||
}
|
||||
|
||||
[data-display] .display-body {
|
||||
font-size: var(--display-type-body);
|
||||
}
|
||||
|
||||
[data-display] .display-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--chrome-gap);
|
||||
}
|
||||
|
||||
[data-display] .display-card {
|
||||
border-radius: var(--display-radius);
|
||||
border: 1px solid var(--display-border);
|
||||
padding: var(--card-pad);
|
||||
}
|
||||
|
||||
[data-display] .display-viewer {
|
||||
border-radius: var(--display-viewer-radius);
|
||||
}
|
||||
|
||||
[data-display] .display-rail {
|
||||
@@ -42,6 +68,8 @@
|
||||
border: 1px solid var(--display-border);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: var(--display-type-body);
|
||||
color: var(--display-fg);
|
||||
background: transparent;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
@@ -68,8 +96,14 @@
|
||||
padding: 0.625rem 1.25rem;
|
||||
}
|
||||
|
||||
[data-display='classic'] .display-rail__seg {
|
||||
min-height: 2.25rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-display] .display-cta {
|
||||
border-radius: calc(var(--display-radius) + 4px);
|
||||
border-radius: var(--display-radius);
|
||||
background: var(--display-amber);
|
||||
color: var(--display-amber-fg);
|
||||
font-weight: 600;
|
||||
@@ -78,3 +112,7 @@
|
||||
[data-display] .display-cta:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--display-focus);
|
||||
}
|
||||
|
||||
[data-display] .display-control {
|
||||
border-radius: var(--display-radius);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user