@quilltap/theme-storybook 1.0.53 → 1.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +106 -2
- package/package.json +1 -1
- package/src/css/qt-components.css +133 -2
package/dist/index.css
CHANGED
|
@@ -429,7 +429,7 @@ body {
|
|
|
429
429
|
--qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #9b8ec4 40%);
|
|
430
430
|
--qt-chat-whisper-fg: var(--qt-chat-assistant-fg);
|
|
431
431
|
--qt-chat-whisper-border: #9b8ec4;
|
|
432
|
-
--qt-chat-whisper-label-fg: #
|
|
432
|
+
--qt-chat-whisper-label-fg: #5c447e;
|
|
433
433
|
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
|
|
434
434
|
--qt-chat-silent-fg: var(--qt-chat-assistant-fg);
|
|
435
435
|
--qt-chat-silent-border: #7a9e8e;
|
|
@@ -1452,6 +1452,14 @@ body {
|
|
|
1452
1452
|
.qt-lexical-li {
|
|
1453
1453
|
margin: 0.1em 0;
|
|
1454
1454
|
}
|
|
1455
|
+
.qt-lexical-li-nested {
|
|
1456
|
+
list-style-type: none;
|
|
1457
|
+
margin: 0;
|
|
1458
|
+
}
|
|
1459
|
+
.qt-lexical-li-nested::before,
|
|
1460
|
+
.qt-lexical-li-nested::after {
|
|
1461
|
+
display: none;
|
|
1462
|
+
}
|
|
1455
1463
|
.qt-lexical-checklist {
|
|
1456
1464
|
list-style: none;
|
|
1457
1465
|
padding-left: 0;
|
|
@@ -1509,6 +1517,102 @@ body {
|
|
|
1509
1517
|
-o-tab-size: 2;
|
|
1510
1518
|
tab-size: 2;
|
|
1511
1519
|
}
|
|
1520
|
+
.qt-formatting-toolbar {
|
|
1521
|
+
display: flex;
|
|
1522
|
+
align-items: center;
|
|
1523
|
+
justify-content: center;
|
|
1524
|
+
gap: 0.5rem;
|
|
1525
|
+
padding: 0.375rem 0.5rem;
|
|
1526
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1527
|
+
border-radius: var(--radius-md);
|
|
1528
|
+
margin-bottom: 0.5rem;
|
|
1529
|
+
}
|
|
1530
|
+
.qt-formatting-toolbar-section {
|
|
1531
|
+
display: flex;
|
|
1532
|
+
align-items: center;
|
|
1533
|
+
gap: 0.25rem;
|
|
1534
|
+
}
|
|
1535
|
+
.qt-formatting-toolbar-divider {
|
|
1536
|
+
height: 1.25rem;
|
|
1537
|
+
margin-left: 0.25rem;
|
|
1538
|
+
margin-right: 0.25rem;
|
|
1539
|
+
width: 1px;
|
|
1540
|
+
background: var(--color-border);
|
|
1541
|
+
}
|
|
1542
|
+
.qt-formatting-button {
|
|
1543
|
+
display: inline-flex;
|
|
1544
|
+
align-items: center;
|
|
1545
|
+
justify-content: center;
|
|
1546
|
+
font-size: 0.75rem;
|
|
1547
|
+
font-weight: 500;
|
|
1548
|
+
transition:
|
|
1549
|
+
color 150ms,
|
|
1550
|
+
background-color 150ms,
|
|
1551
|
+
border-color 150ms;
|
|
1552
|
+
min-width: 1.75rem;
|
|
1553
|
+
height: 1.75rem;
|
|
1554
|
+
padding: 0 0.375rem;
|
|
1555
|
+
border-radius: var(--radius-sm);
|
|
1556
|
+
background: var(--qt-content-bg);
|
|
1557
|
+
color: var(--color-foreground);
|
|
1558
|
+
border: 1px solid var(--color-border);
|
|
1559
|
+
cursor: pointer;
|
|
1560
|
+
}
|
|
1561
|
+
.qt-formatting-button:hover:not(:disabled) {
|
|
1562
|
+
background: var(--qt-content-bg-hover);
|
|
1563
|
+
border-color: var(--color-foreground);
|
|
1564
|
+
}
|
|
1565
|
+
.qt-formatting-button:disabled {
|
|
1566
|
+
opacity: 0.5;
|
|
1567
|
+
cursor: not-allowed;
|
|
1568
|
+
}
|
|
1569
|
+
.qt-formatting-button-bold {
|
|
1570
|
+
font-weight: 700;
|
|
1571
|
+
}
|
|
1572
|
+
.qt-formatting-button-italic {
|
|
1573
|
+
font-style: italic;
|
|
1574
|
+
}
|
|
1575
|
+
.qt-formatting-button-h1,
|
|
1576
|
+
.qt-formatting-button-h2,
|
|
1577
|
+
.qt-formatting-button-h3,
|
|
1578
|
+
.qt-formatting-button-h4,
|
|
1579
|
+
.qt-formatting-button-h5,
|
|
1580
|
+
.qt-formatting-button-h6 {
|
|
1581
|
+
font-family: var(--qt-formatting-heading-font, Georgia, "Times New Roman", serif);
|
|
1582
|
+
}
|
|
1583
|
+
.qt-formatting-button-blockquote {
|
|
1584
|
+
font-family: var(--qt-formatting-heading-font, Georgia, "Times New Roman", serif);
|
|
1585
|
+
font-size: 1.25rem;
|
|
1586
|
+
font-weight: 700;
|
|
1587
|
+
line-height: 1;
|
|
1588
|
+
padding-top: 0.35em;
|
|
1589
|
+
padding-bottom: 0;
|
|
1590
|
+
}
|
|
1591
|
+
.qt-formatting-button-code-block {
|
|
1592
|
+
font-family: var(--qt-formatting-code-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
1593
|
+
}
|
|
1594
|
+
.qt-formatting-button-indent,
|
|
1595
|
+
.qt-formatting-button-outdent {
|
|
1596
|
+
font-size: 1.05rem;
|
|
1597
|
+
line-height: 1;
|
|
1598
|
+
}
|
|
1599
|
+
.qt-formatting-button-source {
|
|
1600
|
+
display: flex;
|
|
1601
|
+
align-items: center;
|
|
1602
|
+
justify-content: center;
|
|
1603
|
+
min-width: 1.75rem;
|
|
1604
|
+
height: 1.75rem;
|
|
1605
|
+
padding: 0 0.375rem;
|
|
1606
|
+
}
|
|
1607
|
+
.qt-formatting-button-active {
|
|
1608
|
+
background: var(--color-primary);
|
|
1609
|
+
color: var(--color-primary-foreground);
|
|
1610
|
+
border-color: var(--color-primary);
|
|
1611
|
+
}
|
|
1612
|
+
.qt-formatting-button-active:hover:not(:disabled) {
|
|
1613
|
+
background: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1614
|
+
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1615
|
+
}
|
|
1512
1616
|
.qt-lexical-contenteditable table {
|
|
1513
1617
|
width: 100%;
|
|
1514
1618
|
border-collapse: collapse;
|
|
@@ -2142,7 +2246,7 @@ body {
|
|
|
2142
2246
|
.dark {
|
|
2143
2247
|
--qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
|
|
2144
2248
|
--qt-chat-whisper-border: #6b5b95;
|
|
2145
|
-
--qt-chat-whisper-label-fg: #
|
|
2249
|
+
--qt-chat-whisper-label-fg: #b5a9d1;
|
|
2146
2250
|
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);
|
|
2147
2251
|
--qt-chat-silent-border: #4a7a6a;
|
|
2148
2252
|
--qt-chat-silent-label-fg: #8ab8a4;
|
package/package.json
CHANGED
|
@@ -334,7 +334,9 @@
|
|
|
334
334
|
--qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #9b8ec4 40%);
|
|
335
335
|
--qt-chat-whisper-fg: var(--qt-chat-assistant-fg);
|
|
336
336
|
--qt-chat-whisper-border: #9b8ec4;
|
|
337
|
-
--qt-chat-whisper-
|
|
337
|
+
/* Deep enough to clear WCAG AA (4.5:1) against --qt-chat-whisper-bg at this
|
|
338
|
+
label's 0.75rem size; it also tints .qt-chat-system-bar-whisper. */
|
|
339
|
+
--qt-chat-whisper-label-fg: #5c447e;
|
|
338
340
|
|
|
339
341
|
/* Chat: Silent messages — inner thoughts/actions from characters in silent mode */
|
|
340
342
|
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #7a9e8e 35%);
|
|
@@ -1680,6 +1682,22 @@
|
|
|
1680
1682
|
margin: 0.1em 0;
|
|
1681
1683
|
}
|
|
1682
1684
|
|
|
1685
|
+
/*
|
|
1686
|
+
* Wrapper item for a sub-list. Lexical represents nesting as a list item whose
|
|
1687
|
+
* only child is another list, so this <li> is structure rather than content —
|
|
1688
|
+
* left to itself it draws the parent list's bullet right beside the sub-list's
|
|
1689
|
+
* own first bullet.
|
|
1690
|
+
*/
|
|
1691
|
+
.qt-lexical-li-nested {
|
|
1692
|
+
list-style-type: none;
|
|
1693
|
+
margin: 0;
|
|
1694
|
+
}
|
|
1695
|
+
|
|
1696
|
+
.qt-lexical-li-nested::before,
|
|
1697
|
+
.qt-lexical-li-nested::after {
|
|
1698
|
+
display: none;
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1683
1701
|
/* Checklist items */
|
|
1684
1702
|
.qt-lexical-checklist {
|
|
1685
1703
|
list-style: none;
|
|
@@ -1744,6 +1762,119 @@
|
|
|
1744
1762
|
tab-size: 2;
|
|
1745
1763
|
}
|
|
1746
1764
|
|
|
1765
|
+
/* ==========================================================================
|
|
1766
|
+
FORMATTING TOOLBAR
|
|
1767
|
+
========================================================================== */
|
|
1768
|
+
|
|
1769
|
+
.qt-formatting-toolbar {
|
|
1770
|
+
display: flex;
|
|
1771
|
+
align-items: center;
|
|
1772
|
+
justify-content: center;
|
|
1773
|
+
gap: 0.5rem;
|
|
1774
|
+
padding: 0.375rem 0.5rem;
|
|
1775
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1776
|
+
border-radius: var(--radius-md);
|
|
1777
|
+
margin-bottom: 0.5rem;
|
|
1778
|
+
}
|
|
1779
|
+
|
|
1780
|
+
.qt-formatting-toolbar-section {
|
|
1781
|
+
display: flex;
|
|
1782
|
+
align-items: center;
|
|
1783
|
+
gap: 0.25rem;
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
.qt-formatting-toolbar-divider {
|
|
1787
|
+
height: 1.25rem;
|
|
1788
|
+
margin-left: 0.25rem;
|
|
1789
|
+
margin-right: 0.25rem;
|
|
1790
|
+
width: 1px;
|
|
1791
|
+
background: var(--color-border);
|
|
1792
|
+
}
|
|
1793
|
+
|
|
1794
|
+
.qt-formatting-button {
|
|
1795
|
+
display: inline-flex;
|
|
1796
|
+
align-items: center;
|
|
1797
|
+
justify-content: center;
|
|
1798
|
+
font-size: 0.75rem;
|
|
1799
|
+
font-weight: 500;
|
|
1800
|
+
transition: color 150ms, background-color 150ms, border-color 150ms;
|
|
1801
|
+
min-width: 1.75rem;
|
|
1802
|
+
height: 1.75rem;
|
|
1803
|
+
padding: 0 0.375rem;
|
|
1804
|
+
border-radius: var(--radius-sm);
|
|
1805
|
+
background: var(--qt-content-bg);
|
|
1806
|
+
color: var(--color-foreground);
|
|
1807
|
+
border: 1px solid var(--color-border);
|
|
1808
|
+
cursor: pointer;
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
.qt-formatting-button:hover:not(:disabled) {
|
|
1812
|
+
background: var(--qt-content-bg-hover);
|
|
1813
|
+
border-color: var(--color-foreground);
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.qt-formatting-button:disabled {
|
|
1817
|
+
opacity: 0.5;
|
|
1818
|
+
cursor: not-allowed;
|
|
1819
|
+
}
|
|
1820
|
+
|
|
1821
|
+
.qt-formatting-button-bold {
|
|
1822
|
+
font-weight: 700;
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
.qt-formatting-button-italic {
|
|
1826
|
+
font-style: italic;
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
.qt-formatting-button-h1,
|
|
1830
|
+
.qt-formatting-button-h2,
|
|
1831
|
+
.qt-formatting-button-h3,
|
|
1832
|
+
.qt-formatting-button-h4,
|
|
1833
|
+
.qt-formatting-button-h5,
|
|
1834
|
+
.qt-formatting-button-h6 {
|
|
1835
|
+
font-family: var(--qt-formatting-heading-font, Georgia, 'Times New Roman', serif);
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
.qt-formatting-button-blockquote {
|
|
1839
|
+
font-family: var(--qt-formatting-heading-font, Georgia, 'Times New Roman', serif);
|
|
1840
|
+
font-size: 1.25rem;
|
|
1841
|
+
font-weight: 700;
|
|
1842
|
+
line-height: 1;
|
|
1843
|
+
padding-top: 0.35em;
|
|
1844
|
+
padding-bottom: 0;
|
|
1845
|
+
}
|
|
1846
|
+
|
|
1847
|
+
.qt-formatting-button-code-block {
|
|
1848
|
+
font-family: var(--qt-formatting-code-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
|
1849
|
+
}
|
|
1850
|
+
|
|
1851
|
+
/* List indent / outdent buttons - arrow glyphs sized to match the text labels */
|
|
1852
|
+
.qt-formatting-button-indent,
|
|
1853
|
+
.qt-formatting-button-outdent {
|
|
1854
|
+
font-size: 1.05rem;
|
|
1855
|
+
line-height: 1;
|
|
1856
|
+
}
|
|
1857
|
+
|
|
1858
|
+
.qt-formatting-button-source {
|
|
1859
|
+
display: flex;
|
|
1860
|
+
align-items: center;
|
|
1861
|
+
justify-content: center;
|
|
1862
|
+
min-width: 1.75rem;
|
|
1863
|
+
height: 1.75rem;
|
|
1864
|
+
padding: 0 0.375rem;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
.qt-formatting-button-active {
|
|
1868
|
+
background: var(--color-primary);
|
|
1869
|
+
color: var(--color-primary-foreground);
|
|
1870
|
+
border-color: var(--color-primary);
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
.qt-formatting-button-active:hover:not(:disabled) {
|
|
1874
|
+
background: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1875
|
+
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1747
1878
|
/* Lexical table styling */
|
|
1748
1879
|
.qt-lexical-contenteditable table {
|
|
1749
1880
|
width: 100%;
|
|
@@ -2589,7 +2720,7 @@
|
|
|
2589
2720
|
/* Chat: Whisper messages — dark mode */
|
|
2590
2721
|
--qt-chat-whisper-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 60%, #6b5b95 40%);
|
|
2591
2722
|
--qt-chat-whisper-border: #6b5b95;
|
|
2592
|
-
--qt-chat-whisper-label-fg: #
|
|
2723
|
+
--qt-chat-whisper-label-fg: #b5a9d1;
|
|
2593
2724
|
|
|
2594
2725
|
/* Chat: Silent messages — darker mode variants */
|
|
2595
2726
|
--qt-chat-silent-bg: color-mix(in srgb, var(--qt-chat-assistant-bg) 65%, #4a7a6a 35%);
|