@floegence/floe-webapp-core 0.78.0 → 0.78.1
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/components/ui/Button.js +3 -3
- package/dist/components/ui/Dropdown.js +5 -5
- package/dist/components/ui/Input.js +36 -36
- package/dist/primitives.css +22 -0
- package/dist/styles/tokens.d.ts +12 -0
- package/dist/styles/tokens.js +6 -0
- package/dist/styles.css +1 -1
- package/dist/ui.css +27 -25
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -1870,27 +1870,27 @@
|
|
|
1870
1870
|
background: var(--background); color: var(--foreground);
|
|
1871
1871
|
}
|
|
1872
1872
|
.floe-settings-layout__sidebar {
|
|
1873
|
-
width:
|
|
1873
|
+
width: 220px; flex-shrink: 0; min-height: 0; overflow: hidden;
|
|
1874
1874
|
border-inline-end: 1px solid var(--border);
|
|
1875
1875
|
background: var(--sidebar); color: var(--sidebar-foreground);
|
|
1876
1876
|
}
|
|
1877
1877
|
.floe-settings-layout__content { position: relative; flex: 1; min-width: 0; overflow: hidden; container: floe-settings / inline-size; }
|
|
1878
1878
|
.floe-settings-layout__mobile { display: none; }
|
|
1879
|
-
.floe-settings-page { max-width: 980px; margin-inline: auto; padding:
|
|
1879
|
+
.floe-settings-page { max-width: 980px; margin-inline: auto; padding: 24px 24px 48px; }
|
|
1880
1880
|
.floe-settings-navigation { display: flex; flex-direction: column; height: 100%; min-height: 0; }
|
|
1881
|
-
.floe-settings-navigation__search { padding:
|
|
1881
|
+
.floe-settings-navigation__search { padding: 12px 12px 8px; }
|
|
1882
1882
|
.floe-settings-navigation__groups { overflow-y: auto; padding: 0 10px 20px; }
|
|
1883
1883
|
.floe-settings-navigation__group + .floe-settings-navigation__group { margin-top: 7px; }
|
|
1884
|
-
.floe-settings-navigation__label { padding:
|
|
1884
|
+
.floe-settings-navigation__label { padding: 12px 10px 4px; font-size: var(--floe-type-caption); font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--muted-foreground); }
|
|
1885
1885
|
.floe-settings-navigation__item {
|
|
1886
|
-
position: relative; display: flex; align-items: center; gap:
|
|
1887
|
-
padding:
|
|
1888
|
-
font-size:
|
|
1886
|
+
position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: var(--floe-row-height);
|
|
1887
|
+
padding: 5px 10px; border: 1px solid transparent; border-radius: 7px; text-align: start;
|
|
1888
|
+
font-size: var(--floe-type-control); line-height: var(--floe-line-control); cursor: pointer; color: inherit;
|
|
1889
1889
|
}
|
|
1890
1890
|
.floe-settings-navigation__item > span { min-width: 0; overflow-wrap: anywhere; }
|
|
1891
1891
|
.floe-settings-navigation__item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
|
|
1892
1892
|
.floe-settings-navigation__item[aria-current='page'] {
|
|
1893
|
-
background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight:
|
|
1893
|
+
background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500;
|
|
1894
1894
|
}
|
|
1895
1895
|
.floe-settings-navigation__item[aria-current='page']::before {
|
|
1896
1896
|
content: ''; position: absolute; inset-inline-start: 0; inset-block: 9px;
|
|
@@ -1898,54 +1898,56 @@
|
|
|
1898
1898
|
}
|
|
1899
1899
|
.floe-settings-navigation__item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
|
|
1900
1900
|
.floe-settings-navigation__icon { width: 15px; height: 15px; flex-shrink: 0; }
|
|
1901
|
-
.floe-settings-section + .floe-settings-section { margin-top:
|
|
1902
|
-
.floe-settings-section__header { display: flex; align-items: start; justify-content: space-between; gap:
|
|
1901
|
+
.floe-settings-section + .floe-settings-section { margin-top: 24px; }
|
|
1902
|
+
.floe-settings-section__header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
|
1903
1903
|
.floe-settings-section__heading { min-width: 0; }
|
|
1904
1904
|
.floe-settings-section__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
|
|
1905
|
-
.floe-settings-section h2 { font-size:
|
|
1906
|
-
.floe-settings-section h1 { font-size:
|
|
1907
|
-
.floe-settings-section__heading > p { margin-top:
|
|
1908
|
-
.floe-settings-section[data-settings-variant='page'] > .floe-settings-section__header { margin-bottom:
|
|
1905
|
+
.floe-settings-section h2 { font-size: var(--floe-type-body); line-height: var(--floe-line-control); font-weight: 500; }
|
|
1906
|
+
.floe-settings-section h1 { font-size: var(--floe-type-heading); line-height: 24px; font-weight: 500; }
|
|
1907
|
+
.floe-settings-section__heading > p { margin-top: 4px; font-size: var(--floe-type-supporting); line-height: 18px; color: var(--muted-foreground); max-width: 640px; overflow-wrap: anywhere; }
|
|
1908
|
+
.floe-settings-section[data-settings-variant='page'] > .floe-settings-section__header { margin-bottom: 16px; }
|
|
1909
1909
|
.floe-settings-section__actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; padding-top: 3px; }
|
|
1910
|
-
.floe-settings-section__body { display: flex; flex-direction: column; gap:
|
|
1910
|
+
.floe-settings-section__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
|
|
1911
1911
|
.floe-settings-list, .floe-setting-row {
|
|
1912
1912
|
border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--card-foreground);
|
|
1913
1913
|
}
|
|
1914
1914
|
.floe-settings-list { overflow: hidden; }
|
|
1915
|
-
.floe-setting-row { padding:
|
|
1915
|
+
.floe-setting-row { padding: 12px; min-width: 0; }
|
|
1916
1916
|
.floe-settings-list > .floe-setting-row { border: 0; border-radius: 0; background: transparent; }
|
|
1917
1917
|
.floe-settings-list > .floe-setting-row + .floe-setting-row { border-top: 1px solid var(--border); }
|
|
1918
|
-
.floe-setting-row__main { display: flex; align-items: center; justify-content: space-between; gap:
|
|
1918
|
+
.floe-setting-row__main { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
|
|
1919
1919
|
.floe-setting-row__label { display: flex; align-items: start; gap: 12px; min-width: 0; flex: 1; }
|
|
1920
1920
|
.floe-setting-row__label > div { min-width: 0; }
|
|
1921
|
-
.floe-setting-row__title { font-size:
|
|
1922
|
-
.floe-setting-row__label p { margin-top:
|
|
1921
|
+
.floe-setting-row__title { font-size: var(--floe-type-control); font-weight: 500; line-height: var(--floe-line-control); overflow-wrap: anywhere; }
|
|
1922
|
+
.floe-setting-row__label p { margin-top: 2px; font-size: var(--floe-type-supporting); line-height: 18px; color: var(--muted-foreground); overflow-wrap: anywhere; }
|
|
1923
1923
|
.floe-setting-row__icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; color: var(--muted-foreground); }
|
|
1924
1924
|
.floe-setting-row__control { display: flex; align-items: center; justify-content: end; gap: 8px; max-width: 50%; min-width: 0; }
|
|
1925
|
-
.floe-setting-row__body { margin-top:
|
|
1925
|
+
.floe-setting-row__body { margin-top: 12px; min-width: 0; }
|
|
1926
1926
|
.floe-setting-row[data-tone='info'] { --floe-settings-tone: var(--info); }
|
|
1927
1927
|
.floe-setting-row[data-tone='success'] { --floe-settings-tone: var(--success); }
|
|
1928
1928
|
.floe-setting-row[data-tone='warning'] { --floe-settings-tone: var(--warning); }
|
|
1929
1929
|
.floe-setting-row[data-tone='danger'] { --floe-settings-tone: var(--error); }
|
|
1930
1930
|
.floe-setting-row:not([data-tone='default']) { background: color-mix(in srgb, var(--floe-settings-tone) 6%, var(--card)); }
|
|
1931
1931
|
@container floe-settings (max-width: 600px) {
|
|
1932
|
-
.floe-settings-page { padding:
|
|
1932
|
+
.floe-settings-page { padding: 16px 16px 32px; }
|
|
1933
1933
|
.floe-settings-section__header { flex-direction: column; }
|
|
1934
|
-
.floe-
|
|
1935
|
-
.floe-setting-row__main { align-items: stretch; flex-direction: column; gap: 14px; }
|
|
1934
|
+
.floe-setting-row__main { align-items: stretch; flex-direction: column; gap: 12px; }
|
|
1936
1935
|
.floe-setting-row__control { justify-content: start; max-width: 100%; }
|
|
1937
1936
|
}
|
|
1938
1937
|
@media (max-width: 767px) {
|
|
1939
1938
|
.floe-settings-layout { flex-direction: column; }
|
|
1940
1939
|
.floe-settings-layout__sidebar { display: none; }
|
|
1941
1940
|
.floe-settings-layout__mobile { display: block; padding: 10px 16px; border-bottom: 1px solid var(--border); }
|
|
1942
|
-
.floe-settings-page { padding:
|
|
1941
|
+
.floe-settings-page { padding: 16px 16px 32px; }
|
|
1943
1942
|
.floe-settings-section__header { flex-direction: column; }
|
|
1944
|
-
.floe-setting-row__main { align-items: stretch; flex-direction: column; gap:
|
|
1943
|
+
.floe-setting-row__main { align-items: stretch; flex-direction: column; gap: 12px; }
|
|
1945
1944
|
.floe-setting-row__control { justify-content: start; max-width: 100%; }
|
|
1946
1945
|
}
|
|
1947
1946
|
@media (forced-colors: active) {
|
|
1948
1947
|
.floe-settings-navigation__item[aria-current='page'] { border-color: Highlight; }
|
|
1949
1948
|
.floe-settings-list, .floe-setting-row { border-color: CanvasText; }
|
|
1950
1949
|
}
|
|
1950
|
+
@media (pointer: coarse) {
|
|
1951
|
+
.floe-settings-navigation__item { min-height: 44px; }
|
|
1952
|
+
}
|
|
1951
1953
|
}
|