@quilltap/theme-storybook 1.0.54 → 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 +104 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +129 -0
package/dist/index.css
CHANGED
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1682,6 +1682,22 @@
|
|
|
1682
1682
|
margin: 0.1em 0;
|
|
1683
1683
|
}
|
|
1684
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
|
+
|
|
1685
1701
|
/* Checklist items */
|
|
1686
1702
|
.qt-lexical-checklist {
|
|
1687
1703
|
list-style: none;
|
|
@@ -1746,6 +1762,119 @@
|
|
|
1746
1762
|
tab-size: 2;
|
|
1747
1763
|
}
|
|
1748
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
|
+
|
|
1749
1878
|
/* Lexical table styling */
|
|
1750
1879
|
.qt-lexical-contenteditable table {
|
|
1751
1880
|
width: 100%;
|