@dialpad/dialtone 9.178.0 → 9.179.0

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.
Files changed (7) hide show
  1. package/dist/css/dialtone-default-theme.css +107 -82
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone.css +107 -82
  4. package/dist/css/dialtone.min.css +1 -1
  5. package/dist/css/tokens-docs.json +1 -1
  6. package/dist/tokens/doc.json +119153 -119153
  7. package/package.json +2 -2
package/dist/css/dialtone-default-theme.css CHANGED
@@ -1731,17 +1731,17 @@ template {
1731
1731
  user-select: none;
1732
1732
  fill: currentColor;
1733
1733
  }
1734
- .d-btn:hover:not([disabled]),
1735
- .d-btn--md:hover:not([disabled]) {
1734
+ .d-btn:hover:not(:disabled, .d-btn--disabled),
1735
+ .d-btn--md:hover:not(:disabled, .d-btn--disabled) {
1736
1736
  --button-color-text: var(--dt-action-color-foreground-base-hover);
1737
1737
  --button-color-background: var(--dt-action-color-background-base-hover);
1738
1738
  }
1739
- .d-btn:active:not([disabled]),
1740
- .d-btn--md:active:not([disabled]),
1741
- .d-btn.d-btn--active:not([disabled]),
1742
- .d-btn--md.d-btn--active:not([disabled]),
1743
- .d-btn.d-btn--active:active:not([disabled]),
1744
- .d-btn--md.d-btn--active:active:not([disabled]) {
1739
+ .d-btn:active:not(:disabled, .d-btn--disabled),
1740
+ .d-btn--md:active:not(:disabled, .d-btn--disabled),
1741
+ .d-btn.d-btn--active:not(:disabled, .d-btn--disabled),
1742
+ .d-btn--md.d-btn--active:not(:disabled, .d-btn--disabled),
1743
+ .d-btn.d-btn--active:active:not(:disabled, .d-btn--disabled),
1744
+ .d-btn--md.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1745
1745
  --button-color-text: var(--dt-action-color-foreground-base-active);
1746
1746
  --button-color-background: var(--dt-action-color-background-base-active);
1747
1747
  }
@@ -1750,14 +1750,35 @@ template {
1750
1750
  outline: none;
1751
1751
  box-shadow: var(--dt-shadow-focus);
1752
1752
  }
1753
- .d-btn[disabled],
1754
- .d-btn--md[disabled] {
1755
- --button-color-border: transparent !important;
1756
- --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
1757
- --button-color-background: var(--dt-action-color-background-disabled-default) !important;
1753
+ .d-btn--disabled,
1754
+ .d-btn--md--disabled,
1755
+ .d-btn:disabled,
1756
+ .d-btn--md:disabled {
1757
+ --chroma-adjust-text: 0.08;
1758
+ --chroma-adjust-background: 0.08;
1759
+ --chroma-adjust-border: 0.08;
1760
+ --opacity-adjust-text: 65%;
1761
+ --opacity-adjust-background: 65%;
1762
+ --opacity-adjust-border: 40%;
1763
+ color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
1764
+ background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
1765
+ border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
1758
1766
  cursor: not-allowed;
1759
1767
  transition: none;
1760
1768
  }
1769
+ .d-btn--disabled.d-btn--primary,
1770
+ .d-btn--md--disabled.d-btn--primary,
1771
+ .d-btn:disabled.d-btn--primary,
1772
+ .d-btn--md:disabled.d-btn--primary {
1773
+ --opacity-adjust-text: 80%;
1774
+ }
1775
+ .d-btn--disabled.d-btn--muted,
1776
+ .d-btn--md--disabled.d-btn--muted,
1777
+ .d-btn:disabled.d-btn--muted,
1778
+ .d-btn--md:disabled.d-btn--muted {
1779
+ --opacity-adjust-text: 50%;
1780
+ --opacity-adjust-border: 50%;
1781
+ }
1761
1782
  .d-btn--unstyled {
1762
1783
  /* stylelint-disable */
1763
1784
  all: unset;
@@ -1829,13 +1850,13 @@ template {
1829
1850
  --button-color-text: var(--dt-action-color-foreground-muted-default);
1830
1851
  --button-border-radius: var(--dt-size-radius-circle);
1831
1852
  }
1832
- .d-btn--circle:hover:not([disabled]) {
1853
+ .d-btn--circle:hover:not(:disabled, .d-btn--disabled) {
1833
1854
  --button-color-text: var(--dt-action-color-foreground-muted-hover);
1834
1855
  --button-color-background: var(--dt-action-color-background-muted-hover);
1835
1856
  }
1836
- .d-btn--circle:active:not([disabled]),
1837
- .d-btn--circle.d-btn--active:not([disabled]),
1838
- .d-btn--circle.d-btn--active:active:not([disabled]) {
1857
+ .d-btn--circle:active:not(:disabled, .d-btn--disabled),
1858
+ .d-btn--circle.d-btn--active:not(:disabled, .d-btn--disabled),
1859
+ .d-btn--circle.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1839
1860
  --button-color-text: var(--dt-action-color-foreground-muted-active);
1840
1861
  --button-color-background: var(--dt-action-color-background-muted-active);
1841
1862
  }
@@ -1875,26 +1896,26 @@ template {
1875
1896
  --button-color-text: var(--dt-action-color-foreground-base-primary-default);
1876
1897
  --button-color-background: var(--dt-action-color-background-base-primary-default);
1877
1898
  }
1878
- .d-btn--primary:hover:not([disabled]) {
1899
+ .d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
1879
1900
  --button-color-text: var(--dt-action-color-foreground-base-primary-default);
1880
1901
  --button-color-background: var(--dt-action-color-background-base-primary-hover);
1881
1902
  }
1882
- .d-btn--primary:active:not([disabled]),
1883
- .d-btn--primary.d-btn--active:not([disabled]),
1884
- .d-btn--primary.d-btn--active:active:not([disabled]) {
1903
+ .d-btn--primary:active:not(:disabled, .d-btn--disabled),
1904
+ .d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
1905
+ .d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1885
1906
  --button-color-text: var(--dt-action-color-foreground-base-primary-default);
1886
1907
  --button-color-background: var(--dt-action-color-background-base-primary-active);
1887
1908
  }
1888
1909
  .d-btn--muted {
1889
1910
  --button-color-text: var(--dt-action-color-foreground-muted-default);
1890
1911
  }
1891
- .d-btn--muted:hover:not([disabled]) {
1912
+ .d-btn--muted:hover:not(:disabled, .d-btn--disabled) {
1892
1913
  --button-color-text: var(--dt-action-color-foreground-muted-hover);
1893
1914
  --button-color-background: var(--dt-action-color-background-muted-hover);
1894
1915
  }
1895
- .d-btn--muted:active:not([disabled]),
1896
- .d-btn--muted.d-btn--active:not([disabled]),
1897
- .d-btn--muted.d-btn--active:active:not([disabled]) {
1916
+ .d-btn--muted:active:not(:disabled, .d-btn--disabled),
1917
+ .d-btn--muted.d-btn--active:not(:disabled, .d-btn--disabled),
1918
+ .d-btn--muted.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1898
1919
  --button-color-text: var(--dt-action-color-foreground-muted-active);
1899
1920
  --button-color-background: var(--dt-action-color-background-muted-active);
1900
1921
  }
@@ -1905,13 +1926,13 @@ template {
1905
1926
  --button-color-text: var(--dt-action-color-foreground-critical-default);
1906
1927
  --button-color-background: var(--dt-action-color-background-critical-default);
1907
1928
  }
1908
- .d-btn--danger:hover:not([disabled]) {
1929
+ .d-btn--danger:hover:not(:disabled, .d-btn--disabled) {
1909
1930
  --button-color-text: var(--dt-action-color-foreground-critical-hover);
1910
1931
  --button-color-background: var(--dt-action-color-background-critical-hover);
1911
1932
  }
1912
- .d-btn--danger:active:not([disabled]),
1913
- .d-btn--danger.d-btn--active:not([disabled]),
1914
- .d-btn--danger.d-btn--active:active:not([disabled]) {
1933
+ .d-btn--danger:active:not(:disabled, .d-btn--disabled),
1934
+ .d-btn--danger.d-btn--active:not(:disabled, .d-btn--disabled),
1935
+ .d-btn--danger.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1915
1936
  --button-color-text: var(--dt-action-color-foreground-critical-active);
1916
1937
  --button-color-background: var(--dt-action-color-background-critical-active);
1917
1938
  }
@@ -1922,13 +1943,13 @@ template {
1922
1943
  --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1923
1944
  --button-color-background: var(--dt-action-color-background-critical-primary-default);
1924
1945
  }
1925
- .d-btn--danger.d-btn--primary:hover:not([disabled]) {
1946
+ .d-btn--danger.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
1926
1947
  --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1927
1948
  --button-color-background: var(--dt-action-color-background-critical-primary-hover);
1928
1949
  }
1929
- .d-btn--danger.d-btn--primary:active:not([disabled]),
1930
- .d-btn--danger.d-btn--primary.d-btn--active:not([disabled]),
1931
- .d-btn--danger.d-btn--primary.d-btn--active:active:not([disabled]) {
1950
+ .d-btn--danger.d-btn--primary:active:not(:disabled, .d-btn--disabled),
1951
+ .d-btn--danger.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
1952
+ .d-btn--danger.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1932
1953
  --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1933
1954
  --button-color-background: var(--dt-action-color-background-critical-primary-active);
1934
1955
  }
@@ -1936,13 +1957,13 @@ template {
1936
1957
  --button-color-text: var(--dt-action-color-foreground-positive-default);
1937
1958
  --button-color-background: var(--dt-action-color-background-positive-default);
1938
1959
  }
1939
- .d-btn--positive:hover:not([disabled]) {
1960
+ .d-btn--positive:hover:not(:disabled, .d-btn--disabled) {
1940
1961
  --button-color-text: var(--dt-action-color-foreground-positive-hover);
1941
1962
  --button-color-background: var(--dt-action-color-background-positive-hover);
1942
1963
  }
1943
- .d-btn--positive:active:not([disabled]),
1944
- .d-btn--positive.d-btn--active:not([disabled]),
1945
- .d-btn--positive.d-btn--active:active:not([disabled]) {
1964
+ .d-btn--positive:active:not(:disabled, .d-btn--disabled),
1965
+ .d-btn--positive.d-btn--active:not(:disabled, .d-btn--disabled),
1966
+ .d-btn--positive.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1946
1967
  --button-color-text: var(--dt-action-color-foreground-positive-active);
1947
1968
  --button-color-background: var(--dt-action-color-background-positive-active);
1948
1969
  }
@@ -1953,13 +1974,13 @@ template {
1953
1974
  --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
1954
1975
  --button-color-background: var(--dt-action-color-background-positive-primary-default);
1955
1976
  }
1956
- .d-btn--positive.d-btn--primary:hover:not([disabled]) {
1977
+ .d-btn--positive.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
1957
1978
  --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
1958
1979
  --button-color-background: var(--dt-action-color-background-positive-primary-hover);
1959
1980
  }
1960
- .d-btn--positive.d-btn--primary:active:not([disabled]),
1961
- .d-btn--positive.d-btn--primary.d-btn--active:not([disabled]),
1962
- .d-btn--positive.d-btn--primary.d-btn--active:active:not([disabled]) {
1981
+ .d-btn--positive.d-btn--primary:active:not(:disabled, .d-btn--disabled),
1982
+ .d-btn--positive.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
1983
+ .d-btn--positive.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1963
1984
  --button-color-text: var(--dt-action-color-foreground-positive-primary-default);
1964
1985
  --button-color-background: var(--dt-action-color-background-positive-primary-active);
1965
1986
  }
@@ -1967,13 +1988,13 @@ template {
1967
1988
  --button-color-text: var(--dt-action-color-foreground-inverted-default);
1968
1989
  --button-color-background: var(--dt-action-color-background-inverted-default);
1969
1990
  }
1970
- .d-btn--inverted:hover:not([disabled]) {
1991
+ .d-btn--inverted:hover:not(:disabled, .d-btn--disabled) {
1971
1992
  --button-color-text: var(--dt-action-color-foreground-inverted-hover);
1972
1993
  --button-color-background: var(--dt-action-color-background-inverted-hover);
1973
1994
  }
1974
- .d-btn--inverted:active:not([disabled]),
1975
- .d-btn--inverted.d-btn--active:not([disabled]),
1976
- .d-btn--inverted.d-btn--active:active:not([disabled]) {
1995
+ .d-btn--inverted:active:not(:disabled, .d-btn--disabled),
1996
+ .d-btn--inverted.d-btn--active:not(:disabled, .d-btn--disabled),
1997
+ .d-btn--inverted.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1977
1998
  --button-color-text: var(--dt-action-color-foreground-inverted-active);
1978
1999
  --button-color-background: var(--dt-action-color-background-inverted-active);
1979
2000
  }
@@ -1984,13 +2005,13 @@ template {
1984
2005
  --button-color-text: var(--dt-action-color-foreground-inverted-primary-default);
1985
2006
  --button-color-background: var(--dt-action-color-background-inverted-primary-default);
1986
2007
  }
1987
- .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
2008
+ .d-btn--inverted.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
1988
2009
  --button-color-text: var(--dt-action-color-foreground-inverted-primary-hover);
1989
2010
  --button-color-background: var(--dt-action-color-background-inverted-primary-hover);
1990
2011
  }
1991
- .d-btn--inverted.d-btn--primary:active:not([disabled]),
1992
- .d-btn--inverted.d-btn--primary.d-btn--active:not([disabled]),
1993
- .d-btn--inverted.d-btn--primary.d-btn--active:active:not([disabled]) {
2012
+ .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled),
2013
+ .d-btn--inverted.d-btn--primary.d-btn--active:not(:disabled, .d-btn--disabled),
2014
+ .d-btn--inverted.d-btn--primary.d-btn--active:active:not(:disabled, .d-btn--disabled) {
1994
2015
  --button-color-text: var(--dt-action-color-foreground-inverted-primary-active);
1995
2016
  --button-color-background: var(--dt-action-color-background-inverted-primary-active);
1996
2017
  }
@@ -2046,28 +2067,20 @@ template {
2046
2067
  .d-btn--loading > :where(.d-btn__loader) {
2047
2068
  position: absolute;
2048
2069
  }
2049
- .d-btn--disabled {
2050
- --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
2051
- --button-color-background: var(--dt-action-color-background-disabled-default) !important;
2052
- --button-color-border: transparent !important;
2053
- cursor: not-allowed;
2054
- transition: none;
2055
- pointer-events: none;
2056
- }
2057
2070
  .d-btn--brand {
2058
2071
  --button-color-text: var(--dt-color-neutral-white);
2059
2072
  --button-color-background: hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l));
2060
2073
  display: flex;
2061
2074
  }
2062
- .d-btn--brand:hover:not([disabled]),
2063
- .d-btn--brand:active:not([disabled]) {
2075
+ .d-btn--brand:hover:not(:disabled, .d-btn--disabled),
2076
+ .d-btn--brand:active:not(:disabled, .d-btn--disabled) {
2064
2077
  --button-color-text: hsl(var(--dt-color-neutral-white-hsl) / 90%);
2065
2078
  --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 2.5%) calc(var(--brand-color-l) - 5%));
2066
2079
  }
2067
2080
  .d-btn--brand:focus-visible {
2068
2081
  box-shadow: 0 0 0 var(--dt-space-100) var(--dt-color-neutral-white), 0 0 0 0.25em hsl(var(--brand-color-h) var(--brand-color-s) var(--brand-color-l) / 90%);
2069
2082
  }
2070
- .d-btn--brand:active:not([disabled]) {
2083
+ .d-btn--brand:active:not(:disabled, .d-btn--disabled) {
2071
2084
  --button-color-background: hsl(var(--brand-color-h) calc(var(--brand-color-s) + 5%) calc(var(--brand-color-l) - 10%));
2072
2085
  }
2073
2086
  .d-btn--brand .d-btn__icon {
@@ -2349,13 +2362,13 @@ template {
2349
2362
  padding: calc(var(--dt-space-200) + var(--dt-space-100));
2350
2363
  border-width: 0;
2351
2364
  }
2352
- .d-chip__close:hover:not([disabled]) {
2365
+ .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
2353
2366
  --button-color-text: var(--dt-action-color-foreground-base-hover);
2354
2367
  --button-color-background: var(--dt-action-color-background-base-hover);
2355
2368
  }
2356
- .d-chip__close:active:not([disabled]),
2357
- .d-chip__close.d-btn--active:not([disabled]),
2358
- .d-chip__close.d-btn--active:active:not([disabled]) {
2369
+ .d-chip__close:active:not(:disabled, .d-btn--disabled),
2370
+ .d-chip__close.d-btn--active:not(:disabled, .d-btn--disabled),
2371
+ .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
2359
2372
  --button-color-text: var(--dt-action-color-foreground-base-active);
2360
2373
  --button-color-background: var(--dt-action-color-background-base-active);
2361
2374
  }
@@ -2363,20 +2376,36 @@ template {
2363
2376
  outline: none;
2364
2377
  box-shadow: var(--dt-shadow-focus);
2365
2378
  }
2366
- .d-chip__close[disabled] {
2367
- --button-color-border: transparent !important;
2368
- --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
2369
- --button-color-background: var(--dt-action-color-background-disabled-default) !important;
2379
+ .d-chip__close--disabled,
2380
+ .d-chip__close:disabled {
2381
+ --chroma-adjust-text: 0.08;
2382
+ --chroma-adjust-background: 0.08;
2383
+ --chroma-adjust-border: 0.08;
2384
+ --opacity-adjust-text: 65%;
2385
+ --opacity-adjust-background: 65%;
2386
+ --opacity-adjust-border: 40%;
2387
+ color: color-mix(in oklch, oklch(from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h) var(--opacity-adjust-text), transparent);
2388
+ background-color: color-mix(in oklch, oklch(from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h) var(--opacity-adjust-background), transparent);
2389
+ border-color: color-mix(in oklch, oklch(from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h) var(--opacity-adjust-border), transparent);
2370
2390
  cursor: not-allowed;
2371
2391
  transition: none;
2372
2392
  }
2373
- .d-chip__close:hover:not([disabled]) {
2393
+ .d-chip__close--disabled.d-btn--primary,
2394
+ .d-chip__close:disabled.d-btn--primary {
2395
+ --opacity-adjust-text: 80%;
2396
+ }
2397
+ .d-chip__close--disabled.d-btn--muted,
2398
+ .d-chip__close:disabled.d-btn--muted {
2399
+ --opacity-adjust-text: 50%;
2400
+ --opacity-adjust-border: 50%;
2401
+ }
2402
+ .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
2374
2403
  --button-color-text: var(--dt-action-color-foreground-muted-hover);
2375
2404
  --button-color-background: var(--dt-action-color-background-muted-hover);
2376
2405
  }
2377
- .d-chip__close:active:not([disabled]),
2378
- .d-chip__close.d-btn--active:not([disabled]),
2379
- .d-chip__close.d-btn--active:active:not([disabled]) {
2406
+ .d-chip__close:active:not(:disabled, .d-btn--disabled),
2407
+ .d-chip__close.d-btn--active:not(:disabled, .d-btn--disabled),
2408
+ .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
2380
2409
  --button-color-text: var(--dt-action-color-foreground-muted-active);
2381
2410
  --button-color-background: var(--dt-action-color-background-muted-active);
2382
2411
  }
@@ -2415,12 +2444,12 @@ template {
2415
2444
  height: 2.8rem;
2416
2445
  content: '';
2417
2446
  }
2418
- .d-chip__close:hover:not([disabled]) {
2447
+ .d-chip__close:hover:not(:disabled, .d-btn--disabled) {
2419
2448
  --button-color-background: var(--dt-action-color-background-muted-hover);
2420
2449
  }
2421
- .d-chip__close:active:not([disabled]),
2422
- .d-chip__close.d-btn--active:not([disabled]),
2423
- .d-chip__close.d-btn--active:active:not([disabled]) {
2450
+ .d-chip__close:active:not(:disabled, .d-btn--disabled),
2451
+ .d-chip__close.d-btn--active:not(:disabled, .d-btn--disabled),
2452
+ .d-chip__close.d-btn--active:active:not(:disabled, .d-btn--disabled) {
2424
2453
  --button-color-background: var(--dt-action-color-background-muted-active);
2425
2454
  }
2426
2455
  .d-chip__icon {
@@ -4177,10 +4206,6 @@ legend .d-label--md {
4177
4206
  padding-right: var(--dt-space-400);
4178
4207
  padding-left: var(--dt-space-400);
4179
4208
  }
4180
- .d-pagination__button:disabled {
4181
- color: var(--dt-color-foreground-secondary-inverted);
4182
- background-color: var(--dt-color-neutral-transparent);
4183
- }
4184
4209
  .d-pagination__separator {
4185
4210
  align-self: flex-end;
4186
4211
  }
@@ -10229,10 +10254,10 @@ ul {
10229
10254
  .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary {
10230
10255
  --button-color-text: var(--dt-shell-mention-color-surface-primary);
10231
10256
  }
10232
- .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
10257
+ .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
10233
10258
  --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, var(--dt-color-surface-primary) 100%);
10234
10259
  }
10235
- .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not([disabled]) {
10260
+ .d-recipe-leftbar-row .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled) {
10236
10261
  --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, var(--dt-color-surface-primary) 100%);
10237
10262
  }
10238
10263
  .d-recipe-leftbar-row .d-fc-success {