@quilltap/theme-storybook 1.0.54 → 1.0.56
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 +145 -0
- package/package.json +1 -1
- package/src/css/qt-components.css +185 -0
package/dist/index.css
CHANGED
|
@@ -550,6 +550,10 @@ body {
|
|
|
550
550
|
--qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
|
|
551
551
|
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
552
552
|
--qt-spinner-indicator: var(--color-primary);
|
|
553
|
+
--qt-progress-track: var(--color-muted);
|
|
554
|
+
--qt-progress-indicator: var(--color-primary);
|
|
555
|
+
--qt-progress-indicator-success: var(--color-success);
|
|
556
|
+
--qt-progress-indicator-danger: var(--color-destructive);
|
|
553
557
|
--qt-favorite-color: hsl(45 96% 58%);
|
|
554
558
|
--qt-toggle-knob-bg: white;
|
|
555
559
|
--qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
|
@@ -1452,6 +1456,14 @@ body {
|
|
|
1452
1456
|
.qt-lexical-li {
|
|
1453
1457
|
margin: 0.1em 0;
|
|
1454
1458
|
}
|
|
1459
|
+
.qt-lexical-li-nested {
|
|
1460
|
+
list-style-type: none;
|
|
1461
|
+
margin: 0;
|
|
1462
|
+
}
|
|
1463
|
+
.qt-lexical-li-nested::before,
|
|
1464
|
+
.qt-lexical-li-nested::after {
|
|
1465
|
+
display: none;
|
|
1466
|
+
}
|
|
1455
1467
|
.qt-lexical-checklist {
|
|
1456
1468
|
list-style: none;
|
|
1457
1469
|
padding-left: 0;
|
|
@@ -1509,6 +1521,102 @@ body {
|
|
|
1509
1521
|
-o-tab-size: 2;
|
|
1510
1522
|
tab-size: 2;
|
|
1511
1523
|
}
|
|
1524
|
+
.qt-formatting-toolbar {
|
|
1525
|
+
display: flex;
|
|
1526
|
+
align-items: center;
|
|
1527
|
+
justify-content: center;
|
|
1528
|
+
gap: 0.5rem;
|
|
1529
|
+
padding: 0.375rem 0.5rem;
|
|
1530
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1531
|
+
border-radius: var(--radius-md);
|
|
1532
|
+
margin-bottom: 0.5rem;
|
|
1533
|
+
}
|
|
1534
|
+
.qt-formatting-toolbar-section {
|
|
1535
|
+
display: flex;
|
|
1536
|
+
align-items: center;
|
|
1537
|
+
gap: 0.25rem;
|
|
1538
|
+
}
|
|
1539
|
+
.qt-formatting-toolbar-divider {
|
|
1540
|
+
height: 1.25rem;
|
|
1541
|
+
margin-left: 0.25rem;
|
|
1542
|
+
margin-right: 0.25rem;
|
|
1543
|
+
width: 1px;
|
|
1544
|
+
background: var(--color-border);
|
|
1545
|
+
}
|
|
1546
|
+
.qt-formatting-button {
|
|
1547
|
+
display: inline-flex;
|
|
1548
|
+
align-items: center;
|
|
1549
|
+
justify-content: center;
|
|
1550
|
+
font-size: 0.75rem;
|
|
1551
|
+
font-weight: 500;
|
|
1552
|
+
transition:
|
|
1553
|
+
color 150ms,
|
|
1554
|
+
background-color 150ms,
|
|
1555
|
+
border-color 150ms;
|
|
1556
|
+
min-width: 1.75rem;
|
|
1557
|
+
height: 1.75rem;
|
|
1558
|
+
padding: 0 0.375rem;
|
|
1559
|
+
border-radius: var(--radius-sm);
|
|
1560
|
+
background: var(--qt-content-bg);
|
|
1561
|
+
color: var(--color-foreground);
|
|
1562
|
+
border: 1px solid var(--color-border);
|
|
1563
|
+
cursor: pointer;
|
|
1564
|
+
}
|
|
1565
|
+
.qt-formatting-button:hover:not(:disabled) {
|
|
1566
|
+
background: var(--qt-content-bg-hover);
|
|
1567
|
+
border-color: var(--color-foreground);
|
|
1568
|
+
}
|
|
1569
|
+
.qt-formatting-button:disabled {
|
|
1570
|
+
opacity: 0.5;
|
|
1571
|
+
cursor: not-allowed;
|
|
1572
|
+
}
|
|
1573
|
+
.qt-formatting-button-bold {
|
|
1574
|
+
font-weight: 700;
|
|
1575
|
+
}
|
|
1576
|
+
.qt-formatting-button-italic {
|
|
1577
|
+
font-style: italic;
|
|
1578
|
+
}
|
|
1579
|
+
.qt-formatting-button-h1,
|
|
1580
|
+
.qt-formatting-button-h2,
|
|
1581
|
+
.qt-formatting-button-h3,
|
|
1582
|
+
.qt-formatting-button-h4,
|
|
1583
|
+
.qt-formatting-button-h5,
|
|
1584
|
+
.qt-formatting-button-h6 {
|
|
1585
|
+
font-family: var(--qt-formatting-heading-font, Georgia, "Times New Roman", serif);
|
|
1586
|
+
}
|
|
1587
|
+
.qt-formatting-button-blockquote {
|
|
1588
|
+
font-family: var(--qt-formatting-heading-font, Georgia, "Times New Roman", serif);
|
|
1589
|
+
font-size: 1.25rem;
|
|
1590
|
+
font-weight: 700;
|
|
1591
|
+
line-height: 1;
|
|
1592
|
+
padding-top: 0.35em;
|
|
1593
|
+
padding-bottom: 0;
|
|
1594
|
+
}
|
|
1595
|
+
.qt-formatting-button-code-block {
|
|
1596
|
+
font-family: var(--qt-formatting-code-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
1597
|
+
}
|
|
1598
|
+
.qt-formatting-button-indent,
|
|
1599
|
+
.qt-formatting-button-outdent {
|
|
1600
|
+
font-size: 1.05rem;
|
|
1601
|
+
line-height: 1;
|
|
1602
|
+
}
|
|
1603
|
+
.qt-formatting-button-source {
|
|
1604
|
+
display: flex;
|
|
1605
|
+
align-items: center;
|
|
1606
|
+
justify-content: center;
|
|
1607
|
+
min-width: 1.75rem;
|
|
1608
|
+
height: 1.75rem;
|
|
1609
|
+
padding: 0 0.375rem;
|
|
1610
|
+
}
|
|
1611
|
+
.qt-formatting-button-active {
|
|
1612
|
+
background: var(--color-primary);
|
|
1613
|
+
color: var(--color-primary-foreground);
|
|
1614
|
+
border-color: var(--color-primary);
|
|
1615
|
+
}
|
|
1616
|
+
.qt-formatting-button-active:hover:not(:disabled) {
|
|
1617
|
+
background: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1618
|
+
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1619
|
+
}
|
|
1512
1620
|
.qt-lexical-contenteditable table {
|
|
1513
1621
|
width: 100%;
|
|
1514
1622
|
border-collapse: collapse;
|
|
@@ -1741,6 +1849,43 @@ body {
|
|
|
1741
1849
|
border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
|
|
1742
1850
|
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
1743
1851
|
}
|
|
1852
|
+
.qt-progress {
|
|
1853
|
+
background-color: var(--qt-progress-track, var(--color-muted));
|
|
1854
|
+
border-radius: 9999px;
|
|
1855
|
+
overflow: hidden;
|
|
1856
|
+
height: 0.5rem;
|
|
1857
|
+
}
|
|
1858
|
+
.qt-progress-sm {
|
|
1859
|
+
height: 0.375rem;
|
|
1860
|
+
}
|
|
1861
|
+
.qt-progress-fill {
|
|
1862
|
+
height: 100%;
|
|
1863
|
+
border-radius: 9999px;
|
|
1864
|
+
background-color: var(--qt-progress-indicator, var(--color-primary));
|
|
1865
|
+
transition: width 500ms ease-out;
|
|
1866
|
+
}
|
|
1867
|
+
.qt-progress-fill-success {
|
|
1868
|
+
background-color: var(--qt-progress-indicator-success, var(--color-success));
|
|
1869
|
+
}
|
|
1870
|
+
.qt-progress-fill-danger {
|
|
1871
|
+
background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
|
|
1872
|
+
}
|
|
1873
|
+
.qt-progress-fill-idle {
|
|
1874
|
+
background-color: transparent;
|
|
1875
|
+
}
|
|
1876
|
+
.qt-progress-indeterminate {
|
|
1877
|
+
width: 40% !important;
|
|
1878
|
+
transition: none;
|
|
1879
|
+
animation: qt-progress-slide 1.4s ease-in-out infinite;
|
|
1880
|
+
}
|
|
1881
|
+
@keyframes qt-progress-slide {
|
|
1882
|
+
0% {
|
|
1883
|
+
transform: translateX(-100%);
|
|
1884
|
+
}
|
|
1885
|
+
100% {
|
|
1886
|
+
transform: translateX(250%);
|
|
1887
|
+
}
|
|
1888
|
+
}
|
|
1744
1889
|
.qt-text-favorite {
|
|
1745
1890
|
color: var(--qt-favorite-color, hsl(45 96% 58%));
|
|
1746
1891
|
}
|
package/package.json
CHANGED
|
@@ -494,6 +494,12 @@
|
|
|
494
494
|
--qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
|
|
495
495
|
--qt-spinner-indicator: var(--color-primary);
|
|
496
496
|
|
|
497
|
+
/* Progress bar variables — every bar-shaped construct in the app */
|
|
498
|
+
--qt-progress-track: var(--color-muted);
|
|
499
|
+
--qt-progress-indicator: var(--color-primary);
|
|
500
|
+
--qt-progress-indicator-success: var(--color-success);
|
|
501
|
+
--qt-progress-indicator-danger: var(--color-destructive);
|
|
502
|
+
|
|
497
503
|
/* Favorite star color */
|
|
498
504
|
--qt-favorite-color: hsl(45 96% 58%);
|
|
499
505
|
|
|
@@ -1682,6 +1688,22 @@
|
|
|
1682
1688
|
margin: 0.1em 0;
|
|
1683
1689
|
}
|
|
1684
1690
|
|
|
1691
|
+
/*
|
|
1692
|
+
* Wrapper item for a sub-list. Lexical represents nesting as a list item whose
|
|
1693
|
+
* only child is another list, so this <li> is structure rather than content —
|
|
1694
|
+
* left to itself it draws the parent list's bullet right beside the sub-list's
|
|
1695
|
+
* own first bullet.
|
|
1696
|
+
*/
|
|
1697
|
+
.qt-lexical-li-nested {
|
|
1698
|
+
list-style-type: none;
|
|
1699
|
+
margin: 0;
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
.qt-lexical-li-nested::before,
|
|
1703
|
+
.qt-lexical-li-nested::after {
|
|
1704
|
+
display: none;
|
|
1705
|
+
}
|
|
1706
|
+
|
|
1685
1707
|
/* Checklist items */
|
|
1686
1708
|
.qt-lexical-checklist {
|
|
1687
1709
|
list-style: none;
|
|
@@ -1746,6 +1768,119 @@
|
|
|
1746
1768
|
tab-size: 2;
|
|
1747
1769
|
}
|
|
1748
1770
|
|
|
1771
|
+
/* ==========================================================================
|
|
1772
|
+
FORMATTING TOOLBAR
|
|
1773
|
+
========================================================================== */
|
|
1774
|
+
|
|
1775
|
+
.qt-formatting-toolbar {
|
|
1776
|
+
display: flex;
|
|
1777
|
+
align-items: center;
|
|
1778
|
+
justify-content: center;
|
|
1779
|
+
gap: 0.5rem;
|
|
1780
|
+
padding: 0.375rem 0.5rem;
|
|
1781
|
+
background: color-mix(in srgb, var(--color-muted) 50%, transparent);
|
|
1782
|
+
border-radius: var(--radius-md);
|
|
1783
|
+
margin-bottom: 0.5rem;
|
|
1784
|
+
}
|
|
1785
|
+
|
|
1786
|
+
.qt-formatting-toolbar-section {
|
|
1787
|
+
display: flex;
|
|
1788
|
+
align-items: center;
|
|
1789
|
+
gap: 0.25rem;
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
.qt-formatting-toolbar-divider {
|
|
1793
|
+
height: 1.25rem;
|
|
1794
|
+
margin-left: 0.25rem;
|
|
1795
|
+
margin-right: 0.25rem;
|
|
1796
|
+
width: 1px;
|
|
1797
|
+
background: var(--color-border);
|
|
1798
|
+
}
|
|
1799
|
+
|
|
1800
|
+
.qt-formatting-button {
|
|
1801
|
+
display: inline-flex;
|
|
1802
|
+
align-items: center;
|
|
1803
|
+
justify-content: center;
|
|
1804
|
+
font-size: 0.75rem;
|
|
1805
|
+
font-weight: 500;
|
|
1806
|
+
transition: color 150ms, background-color 150ms, border-color 150ms;
|
|
1807
|
+
min-width: 1.75rem;
|
|
1808
|
+
height: 1.75rem;
|
|
1809
|
+
padding: 0 0.375rem;
|
|
1810
|
+
border-radius: var(--radius-sm);
|
|
1811
|
+
background: var(--qt-content-bg);
|
|
1812
|
+
color: var(--color-foreground);
|
|
1813
|
+
border: 1px solid var(--color-border);
|
|
1814
|
+
cursor: pointer;
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1817
|
+
.qt-formatting-button:hover:not(:disabled) {
|
|
1818
|
+
background: var(--qt-content-bg-hover);
|
|
1819
|
+
border-color: var(--color-foreground);
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
.qt-formatting-button:disabled {
|
|
1823
|
+
opacity: 0.5;
|
|
1824
|
+
cursor: not-allowed;
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
.qt-formatting-button-bold {
|
|
1828
|
+
font-weight: 700;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
.qt-formatting-button-italic {
|
|
1832
|
+
font-style: italic;
|
|
1833
|
+
}
|
|
1834
|
+
|
|
1835
|
+
.qt-formatting-button-h1,
|
|
1836
|
+
.qt-formatting-button-h2,
|
|
1837
|
+
.qt-formatting-button-h3,
|
|
1838
|
+
.qt-formatting-button-h4,
|
|
1839
|
+
.qt-formatting-button-h5,
|
|
1840
|
+
.qt-formatting-button-h6 {
|
|
1841
|
+
font-family: var(--qt-formatting-heading-font, Georgia, 'Times New Roman', serif);
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
.qt-formatting-button-blockquote {
|
|
1845
|
+
font-family: var(--qt-formatting-heading-font, Georgia, 'Times New Roman', serif);
|
|
1846
|
+
font-size: 1.25rem;
|
|
1847
|
+
font-weight: 700;
|
|
1848
|
+
line-height: 1;
|
|
1849
|
+
padding-top: 0.35em;
|
|
1850
|
+
padding-bottom: 0;
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.qt-formatting-button-code-block {
|
|
1854
|
+
font-family: var(--qt-formatting-code-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
/* List indent / outdent buttons - arrow glyphs sized to match the text labels */
|
|
1858
|
+
.qt-formatting-button-indent,
|
|
1859
|
+
.qt-formatting-button-outdent {
|
|
1860
|
+
font-size: 1.05rem;
|
|
1861
|
+
line-height: 1;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.qt-formatting-button-source {
|
|
1865
|
+
display: flex;
|
|
1866
|
+
align-items: center;
|
|
1867
|
+
justify-content: center;
|
|
1868
|
+
min-width: 1.75rem;
|
|
1869
|
+
height: 1.75rem;
|
|
1870
|
+
padding: 0 0.375rem;
|
|
1871
|
+
}
|
|
1872
|
+
|
|
1873
|
+
.qt-formatting-button-active {
|
|
1874
|
+
background: var(--color-primary);
|
|
1875
|
+
color: var(--color-primary-foreground);
|
|
1876
|
+
border-color: var(--color-primary);
|
|
1877
|
+
}
|
|
1878
|
+
|
|
1879
|
+
.qt-formatting-button-active:hover:not(:disabled) {
|
|
1880
|
+
background: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1881
|
+
border-color: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1882
|
+
}
|
|
1883
|
+
|
|
1749
1884
|
/* Lexical table styling */
|
|
1750
1885
|
.qt-lexical-contenteditable table {
|
|
1751
1886
|
width: 100%;
|
|
@@ -2081,6 +2216,56 @@
|
|
|
2081
2216
|
border-right-color: var(--qt-spinner-indicator, var(--color-primary));
|
|
2082
2217
|
}
|
|
2083
2218
|
|
|
2219
|
+
/* ==========================================================================
|
|
2220
|
+
PROGRESS BAR UTILITIES
|
|
2221
|
+
Multi-phase task progress and static value meters.
|
|
2222
|
+
========================================================================== */
|
|
2223
|
+
|
|
2224
|
+
.qt-progress {
|
|
2225
|
+
background-color: var(--qt-progress-track, var(--color-muted));
|
|
2226
|
+
border-radius: 9999px;
|
|
2227
|
+
overflow: hidden;
|
|
2228
|
+
height: 0.5rem;
|
|
2229
|
+
}
|
|
2230
|
+
|
|
2231
|
+
.qt-progress-sm {
|
|
2232
|
+
height: 0.375rem;
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
.qt-progress-fill {
|
|
2236
|
+
height: 100%;
|
|
2237
|
+
border-radius: 9999px;
|
|
2238
|
+
background-color: var(--qt-progress-indicator, var(--color-primary));
|
|
2239
|
+
transition: width 500ms ease-out;
|
|
2240
|
+
}
|
|
2241
|
+
|
|
2242
|
+
.qt-progress-fill-success {
|
|
2243
|
+
background-color: var(--qt-progress-indicator-success, var(--color-success));
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
.qt-progress-fill-danger {
|
|
2247
|
+
background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
.qt-progress-fill-idle {
|
|
2251
|
+
background-color: transparent;
|
|
2252
|
+
}
|
|
2253
|
+
|
|
2254
|
+
.qt-progress-indeterminate {
|
|
2255
|
+
width: 40% !important;
|
|
2256
|
+
transition: none;
|
|
2257
|
+
animation: qt-progress-slide 1.4s ease-in-out infinite;
|
|
2258
|
+
}
|
|
2259
|
+
|
|
2260
|
+
@keyframes qt-progress-slide {
|
|
2261
|
+
0% {
|
|
2262
|
+
transform: translateX(-100%);
|
|
2263
|
+
}
|
|
2264
|
+
100% {
|
|
2265
|
+
transform: translateX(250%);
|
|
2266
|
+
}
|
|
2267
|
+
}
|
|
2268
|
+
|
|
2084
2269
|
/* ==========================================================================
|
|
2085
2270
|
FAVORITE / TOGGLE / WARNING BOX UTILITIES
|
|
2086
2271
|
========================================================================== */
|