@seed-design/css 1.2.9 → 1.2.11

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/all.css CHANGED
@@ -1468,8 +1468,7 @@
1468
1468
  top: 0;
1469
1469
  }
1470
1470
 
1471
- .seed-app-bar__root:before {
1472
- content: "";
1471
+ .seed-app-bar__background {
1473
1472
  pointer-events: none;
1474
1473
  z-index: -1;
1475
1474
  position: absolute;
@@ -1567,269 +1566,7 @@
1567
1566
  padding-right: 16px;
1568
1567
  }
1569
1568
 
1570
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1571
- --seed-enter-translate-x: 100%;
1572
- --seed-enter-translate-y: 0;
1573
- --seed-enter-opacity: 1;
1574
- --seed-enter-scale: 1;
1575
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1576
- transform: translate3d(0, 0, 0);
1577
- }
1578
-
1579
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1580
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
1581
- --seed-exit-translate-x: 100%;
1582
- --seed-exit-translate-y: 0;
1583
- --seed-exit-opacity: 1;
1584
- --seed-exit-scale: 1;
1585
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1586
- }
1587
-
1588
- [data-global-transition-state="enter-done"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:before {
1589
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
1590
- --seed-enter-translate-y: 0;
1591
- --seed-enter-opacity: 1;
1592
- --seed-enter-scale: 1;
1593
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1594
- transform: translate3d(0, 0, 0);
1595
- }
1596
-
1597
- [data-swipe-back-state="swiping"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1598
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
1599
- animation: none;
1600
- }
1601
-
1602
- [data-swipe-back-state="canceling"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1603
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1604
- transform: translate3d(0, 0, 0);
1605
- animation: none !important;
1606
- }
1607
-
1608
- [data-swipe-back-state="completing"] .seed-app-bar__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#):before {
1609
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1610
- transform: translate3d(100%, 0, 0);
1611
- animation: none !important;
1612
- }
1613
-
1614
- [data-global-transition-state="enter-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1615
- --seed-enter-translate-x: 0;
1616
- --seed-enter-translate-y: 0;
1617
- --seed-enter-opacity: 0;
1618
- --seed-enter-scale: 1;
1619
- opacity: 1;
1620
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1621
- }
1622
-
1623
- [data-global-transition-state="exit-active"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1624
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1625
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1626
- --seed-exit-translate-x: 0;
1627
- --seed-exit-translate-y: 0;
1628
- --seed-exit-opacity: 0;
1629
- --seed-exit-scale: 1;
1630
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1631
- }
1632
-
1633
- [data-global-transition-state="enter-done"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1634
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
1635
- --seed-enter-translate-y: 0;
1636
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1637
- --seed-enter-scale: 1;
1638
- opacity: 1;
1639
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1640
- }
1641
-
1642
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1643
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1644
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1645
- animation: none;
1646
- }
1647
-
1648
- [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1649
- opacity: 1;
1650
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1651
- animation: none !important;
1652
- }
1653
-
1654
- [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1655
- opacity: 0;
1656
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1657
- animation: none !important;
1658
- }
1659
-
1660
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1661
- opacity: 1;
1662
- --seed-exit-translate-x: 0;
1663
- --seed-exit-translate-y: 0;
1664
- --seed-exit-opacity: 0;
1665
- --seed-exit-scale: 1;
1666
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1667
- }
1668
-
1669
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1670
- --seed-enter-translate-x: 0;
1671
- --seed-enter-translate-y: 0;
1672
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
1673
- --seed-enter-scale: 1;
1674
- opacity: 1;
1675
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1676
- }
1677
-
1678
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1679
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1680
- --seed-exit-translate-x: 0;
1681
- --seed-exit-translate-y: 0;
1682
- --seed-exit-opacity: 0;
1683
- --seed-exit-scale: 1;
1684
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1685
- }
1686
-
1687
- [data-swipe-back-state="swiping"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1688
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1689
- animation: none;
1690
- }
1691
-
1692
- [data-swipe-back-state="canceling"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1693
- opacity: 0;
1694
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1695
- animation: none !important;
1696
- }
1697
-
1698
- [data-swipe-back-state="completing"] .seed-app-bar__icon--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1699
- opacity: 1;
1700
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1701
- animation: none !important;
1702
- }
1703
-
1704
- [data-global-transition-state="enter-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1705
- --seed-enter-translate-x: 0;
1706
- --seed-enter-translate-y: 0;
1707
- --seed-enter-opacity: 0;
1708
- --seed-enter-scale: 1;
1709
- opacity: 1;
1710
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1711
- }
1712
-
1713
- [data-global-transition-state="exit-active"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1714
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1715
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1716
- --seed-exit-translate-x: 0;
1717
- --seed-exit-translate-y: 0;
1718
- --seed-exit-opacity: 0;
1719
- --seed-exit-scale: 1;
1720
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1721
- }
1722
-
1723
- [data-global-transition-state="enter-done"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1724
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
1725
- --seed-enter-translate-y: 0;
1726
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1727
- --seed-enter-scale: 1;
1728
- opacity: 1;
1729
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1730
- }
1731
-
1732
- [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1733
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1734
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1735
- animation: none;
1736
- }
1737
-
1738
- [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1739
- opacity: 1;
1740
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1741
- animation: none !important;
1742
- }
1743
-
1744
- [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1745
- opacity: 0;
1746
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1747
- animation: none !important;
1748
- }
1749
-
1750
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1751
- opacity: 1;
1752
- --seed-exit-translate-x: 0;
1753
- --seed-exit-translate-y: 0;
1754
- --seed-exit-opacity: 0;
1755
- --seed-exit-scale: 1;
1756
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1757
- }
1758
-
1759
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1760
- --seed-enter-translate-x: 0;
1761
- --seed-enter-translate-y: 0;
1762
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
1763
- --seed-enter-scale: 1;
1764
- opacity: 1;
1765
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1766
- }
1767
-
1768
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1769
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1770
- --seed-exit-translate-x: 0;
1771
- --seed-exit-translate-y: 0;
1772
- --seed-exit-opacity: 0;
1773
- --seed-exit-scale: 1;
1774
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1775
- }
1776
-
1777
- [data-swipe-back-state="swiping"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1778
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1779
- animation: none;
1780
- }
1781
-
1782
- [data-swipe-back-state="canceling"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1783
- opacity: 0;
1784
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1785
- animation: none !important;
1786
- }
1787
-
1788
- [data-swipe-back-state="completing"] .seed-app-bar__custom--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1789
- opacity: 1;
1790
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1791
- animation: none !important;
1792
- }
1793
-
1794
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
1795
- --seed-enter-translate-x: 0;
1796
- --seed-enter-translate-y: 8vh;
1797
- --seed-enter-opacity: 0;
1798
- --seed-enter-scale: 1;
1799
- opacity: 1;
1800
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
1801
- transform: translate3d(0, 0, 0);
1802
- }
1803
-
1804
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
1805
- opacity: 1;
1806
- --seed-exit-translate-x: 0;
1807
- --seed-exit-translate-y: 8vh;
1808
- --seed-exit-opacity: 0;
1809
- --seed-exit-scale: 1;
1810
- animation: .15s linear forwards seed-exit;
1811
- transform: translate3d(0, 0, 0);
1812
- }
1813
-
1814
- [data-global-transition-state="enter-active"] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
1815
- --seed-enter-translate-x: 0;
1816
- --seed-enter-translate-y: 0;
1817
- --seed-enter-opacity: 0;
1818
- --seed-enter-scale: 1;
1819
- opacity: 1;
1820
- animation: .3s ease-out seed-enter;
1821
- }
1822
-
1823
- [data-global-transition-state="exit-active"] .seed-app-bar__root--transitionStyle_fadeIn[data-activity-is-top] {
1824
- opacity: 1;
1825
- --seed-exit-translate-x: 0;
1826
- --seed-exit-translate-y: 0;
1827
- --seed-exit-opacity: 0;
1828
- --seed-exit-scale: 1;
1829
- animation: .15s ease-in forwards seed-exit;
1830
- }
1831
-
1832
- .seed-app-bar__root--tone_layer:before {
1569
+ .seed-app-bar__background--tone_layer {
1833
1570
  background: var(--seed-box-background, var(--seed-color-bg-layer-default));
1834
1571
  }
1835
1572
 
@@ -1845,7 +1582,7 @@
1845
1582
  color: var(--seed-icon-color, var(--seed-color-palette-static-white));
1846
1583
  }
1847
1584
 
1848
- .seed-app-bar__root--divider_true:before {
1585
+ .seed-app-bar__background--divider_true {
1849
1586
  box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
1850
1587
  }
1851
1588
 
@@ -1860,21 +1597,21 @@
1860
1597
  }
1861
1598
 
1862
1599
  .seed-app-bar-main__title--layout_titleOnly {
1863
- font-size: var(--seed-font-size-t6-static);
1600
+ font-size: clamp(calc(var(--seed-font-size-t6-static) * 1), var(--seed-font-size-t6), calc(var(--seed-font-size-t6-static) * 1.2));
1864
1601
  font-weight: var(--seed-font-weight-bold);
1865
- line-height: var(--seed-line-height-t6-static);
1602
+ line-height: clamp(calc(var(--seed-line-height-t6-static) * 1), var(--seed-line-height-t6), calc(var(--seed-line-height-t6-static) * 1.2));
1866
1603
  }
1867
1604
 
1868
1605
  .seed-app-bar-main__title--layout_withSubtitle {
1869
- font-size: var(--seed-font-size-t5-static);
1606
+ font-size: clamp(calc(var(--seed-font-size-t5-static) * 1), var(--seed-font-size-t5), calc(var(--seed-font-size-t5-static) * 1.2));
1870
1607
  font-weight: var(--seed-font-weight-bold);
1871
- line-height: var(--seed-line-height-t5-static);
1608
+ line-height: clamp(calc(var(--seed-line-height-t5-static) * 1), var(--seed-line-height-t5), calc(var(--seed-line-height-t5-static) * 1.2));
1872
1609
  }
1873
1610
 
1874
1611
  .seed-app-bar-main__subtitle--layout_withSubtitle {
1875
- font-size: var(--seed-font-size-t2-static);
1612
+ font-size: clamp(calc(var(--seed-font-size-t2-static) * 1), var(--seed-font-size-t2), calc(var(--seed-font-size-t2-static) * 1.2));
1876
1613
  font-weight: var(--seed-font-weight-regular);
1877
- line-height: var(--seed-line-height-t2-static);
1614
+ line-height: clamp(calc(var(--seed-line-height-t2-static) * 1), var(--seed-line-height-t2), calc(var(--seed-line-height-t2-static) * 1.2));
1878
1615
  }
1879
1616
 
1880
1617
  .seed-app-bar-main__root--theme_cupertino {
@@ -1901,106 +1638,6 @@
1901
1638
  display: flex;
1902
1639
  }
1903
1640
 
1904
- [data-global-transition-state="enter-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1905
- --seed-enter-translate-x: 25%;
1906
- --seed-enter-translate-y: 0;
1907
- --seed-enter-opacity: 0;
1908
- --seed-enter-scale: 1;
1909
- opacity: 1;
1910
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1911
- transform: translate3d(0, 0, 0);
1912
- }
1913
-
1914
- [data-global-transition-state="exit-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1915
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1916
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1917
- --seed-exit-translate-x: 25%;
1918
- --seed-exit-translate-y: 0;
1919
- --seed-exit-opacity: 0;
1920
- --seed-exit-scale: 1;
1921
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1922
- }
1923
-
1924
- [data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
1925
- --seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
1926
- --seed-enter-translate-y: 0;
1927
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1928
- --seed-enter-scale: 1;
1929
- opacity: 1;
1930
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1931
- transform: translate3d(0, 0, 0);
1932
- }
1933
-
1934
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1935
- transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
1936
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
1937
- animation: none;
1938
- }
1939
-
1940
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1941
- opacity: 1;
1942
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1943
- transform: translate3d(0, 0, 0);
1944
- animation: none !important;
1945
- }
1946
-
1947
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
1948
- opacity: 0;
1949
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1950
- transform: translate3d(25%, 0, 0);
1951
- animation: none !important;
1952
- }
1953
-
1954
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1955
- opacity: 1;
1956
- --seed-exit-translate-x: -25%;
1957
- --seed-exit-translate-y: 0;
1958
- --seed-exit-opacity: 0;
1959
- --seed-exit-scale: 1;
1960
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1961
- transform: translate3d(0, 0, 0);
1962
- }
1963
-
1964
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1965
- --seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .15);
1966
- --seed-enter-translate-y: 0;
1967
- --seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
1968
- --seed-enter-scale: 1;
1969
- opacity: 1;
1970
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
1971
- transform: translate3d(0, 0, 0);
1972
- }
1973
-
1974
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
1975
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
1976
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1977
- --seed-exit-translate-x: -25%;
1978
- --seed-exit-translate-y: 0;
1979
- --seed-exit-opacity: 0;
1980
- --seed-exit-scale: 1;
1981
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
1982
- }
1983
-
1984
- [data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1985
- transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
1986
- opacity: calc(var(--swipe-back-displacement-ratio, 0));
1987
- animation: none;
1988
- }
1989
-
1990
- [data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1991
- opacity: 0;
1992
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
1993
- transform: translate3d(-25%, 0, 0);
1994
- animation: none !important;
1995
- }
1996
-
1997
- [data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
1998
- opacity: 1;
1999
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2000
- transform: translate3d(0, 0, 0);
2001
- animation: none !important;
2002
- }
2003
-
2004
1641
  .seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
2005
1642
  color: var(--seed-color-fg-neutral);
2006
1643
  }
@@ -2084,143 +1721,11 @@
2084
1721
  transform: translate3d(0, 0, 0);
2085
1722
  }
2086
1723
 
2087
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2088
- --seed-enter-translate-x: 100%;
2089
- --seed-enter-translate-y: 0;
2090
- --seed-enter-opacity: 1;
2091
- --seed-enter-scale: 1;
2092
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
2093
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2094
- }
2095
-
2096
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2097
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
2098
- --seed-exit-translate-x: 100%;
2099
- --seed-exit-translate-y: 0;
2100
- --seed-exit-opacity: 1;
2101
- --seed-exit-scale: 1;
2102
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2103
- }
2104
-
2105
- [data-global-transition-state="enter-done"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2106
- --seed-enter-translate-x: var(--swipe-back-displacement, 0);
2107
- --seed-enter-translate-y: 0;
2108
- --seed-enter-opacity: 1;
2109
- --seed-enter-scale: 1;
2110
- transform: translate3d(var(--swipe-back-target, var(--swipe-back-displacement, 0)), 0, 0);
2111
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2112
- }
2113
-
2114
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2115
- transform: translate3d(var(--swipe-back-displacement, 0), 0, 0);
2116
- animation: none;
2117
- }
2118
-
2119
- [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2120
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2121
- transform: translate3d(0, 0, 0);
2122
- animation: none !important;
2123
- }
2124
-
2125
- [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2126
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2127
- transform: translate3d(100%, 0, 0);
2128
- animation: none !important;
2129
- }
2130
-
2131
- [data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2132
- --seed-exit-translate-x: -30%;
2133
- --seed-exit-translate-y: 0;
2134
- --seed-exit-opacity: 1;
2135
- --seed-exit-scale: 1;
2136
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2137
- transform: translate3d(0, 0, 0);
2138
- }
2139
-
2140
- [data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2141
- --seed-enter-translate-x: calc(-30% + var(--swipe-back-displacement, 0) * .3);
2142
- --seed-enter-translate-y: 0;
2143
- --seed-enter-opacity: 1;
2144
- --seed-enter-scale: 1;
2145
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2146
- transform: translate3d(0, 0, 0);
2147
- }
2148
-
2149
- [data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
2150
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
2151
- --seed-exit-translate-x: -30%;
2152
- --seed-exit-translate-y: 0;
2153
- --seed-exit-opacity: 1;
2154
- --seed-exit-scale: 1;
2155
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2156
- }
2157
-
2158
- [data-swipe-back-state="swiping"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2159
- transform: translate3d(calc(-30% + var(--swipe-back-displacement, 0) * .3), 0, 0);
2160
- animation: none;
2161
- }
2162
-
2163
- [data-swipe-back-state="canceling"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2164
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2165
- transform: translate3d(-30%, 0, 0);
2166
- animation: none !important;
2167
- }
2168
-
2169
- [data-swipe-back-state="completing"] .seed-app-screen__layer--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
2170
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2171
- transform: translate3d(0, 0, 0);
2172
- animation: none !important;
2173
- }
2174
-
2175
1724
  .seed-app-screen__dim--transitionStyle_slideFromRightIOS {
2176
1725
  background: var(--seed-color-bg-overlay);
2177
1726
  height: 100%;
2178
1727
  }
2179
1728
 
2180
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2181
- --seed-enter-translate-x: 0;
2182
- --seed-enter-translate-y: 0;
2183
- --seed-enter-opacity: 0;
2184
- --seed-enter-scale: 1;
2185
- opacity: 1;
2186
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2187
- }
2188
-
2189
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2190
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2191
- --seed-exit-translate-x: 0;
2192
- --seed-exit-translate-y: 0;
2193
- --seed-exit-opacity: 0;
2194
- --seed-exit-scale: 1;
2195
- animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
2196
- }
2197
-
2198
- [data-global-transition-state="enter-done"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top] {
2199
- --seed-enter-translate-x: 0;
2200
- --seed-enter-translate-y: 0;
2201
- --seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2202
- --seed-enter-scale: 1;
2203
- opacity: 1;
2204
- animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
2205
- }
2206
-
2207
- [data-swipe-back-state="swiping"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2208
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2209
- animation: none;
2210
- }
2211
-
2212
- [data-swipe-back-state="canceling"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2213
- opacity: calc(1 - var(--swipe-back-displacement-ratio, 0));
2214
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2215
- animation: none !important;
2216
- }
2217
-
2218
- [data-swipe-back-state="completing"] .seed-app-screen__dim--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
2219
- opacity: 0;
2220
- transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
2221
- animation: none !important;
2222
- }
2223
-
2224
1729
  .seed-app-screen__root--transitionStyle_fadeFromBottomAndroid {
2225
1730
  --z-index-dim: calc(var(--z-index-base) + 0);
2226
1731
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -2233,50 +1738,10 @@
2233
1738
  height: 160px;
2234
1739
  }
2235
1740
 
2236
- [data-global-transition-state="enter-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2237
- --seed-enter-translate-x: 0;
2238
- --seed-enter-translate-y: 0;
2239
- --seed-enter-opacity: 0;
2240
- --seed-enter-scale: 1;
2241
- opacity: 1;
2242
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
2243
- transform: translate3d(0, -8vh, 0);
2244
- }
2245
-
2246
- [data-global-transition-state="exit-active"] .seed-app-screen__dim--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2247
- opacity: 1;
2248
- --seed-exit-translate-x: 0;
2249
- --seed-exit-translate-y: 0;
2250
- --seed-exit-opacity: 0;
2251
- --seed-exit-scale: 1;
2252
- animation: .15s linear forwards seed-exit;
2253
- transform: translate3d(0, -8vh, 0);
2254
- }
2255
-
2256
1741
  .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid {
2257
1742
  transform: translate3d(0, 0, 0);
2258
1743
  }
2259
1744
 
2260
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2261
- --seed-enter-translate-x: 0;
2262
- --seed-enter-translate-y: 8vh;
2263
- --seed-enter-opacity: 0;
2264
- --seed-enter-scale: 1;
2265
- opacity: 1;
2266
- animation: .3s cubic-bezier(.23, .1, .32, 1) seed-enter;
2267
- transform: translate3d(0, 0, 0);
2268
- }
2269
-
2270
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeFromBottomAndroid[data-activity-is-top] {
2271
- opacity: 1;
2272
- --seed-exit-translate-x: 0;
2273
- --seed-exit-translate-y: 8vh;
2274
- --seed-exit-opacity: 0;
2275
- --seed-exit-scale: 1;
2276
- animation: .15s linear forwards seed-exit;
2277
- transform: translate3d(0, 0, 0);
2278
- }
2279
-
2280
1745
  .seed-app-screen__root--transitionStyle_fadeIn {
2281
1746
  --z-index-dim: calc(var(--z-index-base) + 0);
2282
1747
  --z-index-layer: calc(var(--z-index-base) + 3);
@@ -2288,24 +1753,6 @@
2288
1753
  display: none;
2289
1754
  }
2290
1755
 
2291
- [data-global-transition-state="enter-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
2292
- --seed-enter-translate-x: 0;
2293
- --seed-enter-translate-y: 0;
2294
- --seed-enter-opacity: 0;
2295
- --seed-enter-scale: 1;
2296
- opacity: 1;
2297
- animation: .3s ease-out seed-enter;
2298
- }
2299
-
2300
- [data-global-transition-state="exit-active"] .seed-app-screen__layer--transitionStyle_fadeIn[data-activity-is-top] {
2301
- opacity: 1;
2302
- --seed-exit-translate-x: 0;
2303
- --seed-exit-translate-y: 0;
2304
- --seed-exit-opacity: 0;
2305
- --seed-exit-scale: 1;
2306
- animation: .15s ease-in forwards seed-exit;
2307
- }
2308
-
2309
1756
  .seed-app-screen__layer--layerOffsetTop_safeArea {
2310
1757
  padding-top: var(--seed-safe-area-top);
2311
1758
  }
@@ -6204,11 +5651,12 @@
6204
5651
 
6205
5652
  .seed-notification-badge--size_large {
6206
5653
  border-radius: var(--seed-radius-full);
5654
+ min-width: 18px;
6207
5655
  min-height: 18px;
6208
5656
  padding-left: var(--seed-dimension-x1);
6209
5657
  padding-right: var(--seed-dimension-x1);
6210
- font-size: var(--seed-font-size-t1);
6211
- line-height: var(--seed-line-height-t1);
5658
+ font-size: var(--seed-font-size-t1-static);
5659
+ line-height: var(--seed-line-height-t1-static);
6212
5660
  font-weight: var(--seed-font-weight-bold);
6213
5661
  padding-top: 0;
6214
5662
  padding-bottom: 0;