This commit is contained in:
Abdul Wahab
2026-09-01 10:02:39 +05:00
parent e9f36ad9d8
commit 83b4fbcb5d
2 changed files with 18 additions and 17 deletions
+9 -9
View File
@@ -197,32 +197,32 @@ const roles = [
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="restrained" checked />
<span class="picker-strategy-copy">
<strong>Restrained</strong>
<span>Mostly neutral. The primary appears in a few deliberate places.</span>
<span class="picker-strategy-title">Restrained</span>
<span class="picker-strategy-desc">Mostly neutral. The primary appears in a few deliberate places.</span>
</span>
</label>
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="committed" />
<span class="picker-strategy-copy">
<strong>Committed</strong>
<span>One strong color does real work across the page.</span>
<span class="picker-strategy-title">Committed</span>
<span class="picker-strategy-desc">One strong color does real work across the page.</span>
</span>
</label>
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="full-palette" />
<span class="picker-strategy-copy">
<strong>Full palette</strong>
<span>All four colors on duty, each with a clear job.</span>
<span class="picker-strategy-title">Full palette</span>
<span class="picker-strategy-desc">All four colors on duty, each with a clear job.</span>
</span>
</label>
<label class="picker-strategy-option">
<input type="radio" name="color-strategy" value="drenched" />
<span class="picker-strategy-copy">
<strong>Drenched</strong>
<span>The page itself is the color. Everything else sits on top.</span>
<span class="picker-strategy-title">Drenched</span>
<span class="picker-strategy-desc">The page itself is the color. Everything else sits on top.</span>
</span>
</label>
</fieldset>
@@ -386,7 +386,7 @@ const roles = [
<label class="picker-strategy-option picker-type-option">
<input type="radio" name="font-pair" />
<span class="picker-type-copy">
<strong class="picker-type-sample-heading" data-pair-heading></strong>
<span class="picker-type-sample-heading" data-pair-heading></span>
<span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
</span>
</label>
+9 -8
View File
@@ -1136,16 +1136,16 @@ html.light .ks-button.ks-button-ghost:hover {
gap: 6px;
}
.picker-strategy-copy strong {
.picker-strategy-title {
color: var(--ks-champagne);
font-family: var(--ks-font-display);
font-size: 1.22rem;
font-weight: 500;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
}
.picker-strategy-copy span {
.picker-strategy-desc {
color: var(--ks-text-muted);
font-size: 0.88rem;
line-height: 1.5;
@@ -1155,7 +1155,7 @@ html.light .ks-button.ks-button-ghost:hover {
background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
}
.picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
.picker-strategy-option:has(input:checked) .picker-strategy-title {
color: var(--ks-link-on-paper);
}
@@ -1182,7 +1182,7 @@ html.light .ks-button.ks-button-ghost:hover {
background: color-mix(in oklab, var(--ks-patina-deep) 9%, var(--ks-lacquer-raised));
}
.picker-strategy-choices .picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
.picker-strategy-choices .picker-strategy-option:has(input:checked) .picker-strategy-title {
color: var(--ks-link-on-paper);
}
@@ -1190,14 +1190,15 @@ html.light .ks-button.ks-button-ghost:hover {
gap: 6px;
}
.picker-strategy-choices .picker-strategy-copy strong {
.picker-strategy-choices .picker-strategy-title {
font-family: var(--ks-font);
font-size: 24px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.015em;
}
.picker-strategy-choices .picker-strategy-copy span {
.picker-strategy-choices .picker-strategy-desc {
font-size: 16px;
line-height: 1.55;
max-width: 34ch;
@@ -1974,7 +1975,7 @@ html.light .ks-button.ks-button-ghost:hover {
color: var(--ks-champagne);
font-family: var(--pair-heading, var(--ks-font-display));
font-size: 24px;
font-weight: var(--pair-heading-weight);
font-weight: var(--pair-heading-weight, 400);
line-height: 1.1;
letter-spacing: -0.015em;
}