@usevyre/react 1.2.0 → 1.3.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.
- package/dist/components/Layout/Layout.d.ts +184 -0
- package/dist/components/Sidebar/Sidebar.d.ts +10 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.js +1660 -1462
- package/dist/styles/components.css +316 -59
- package/package.json +1 -1
|
@@ -1136,7 +1136,7 @@
|
|
|
1136
1136
|
max-width: 20rem;
|
|
1137
1137
|
background: var(--vyre-color-semantic-surface-overlay);
|
|
1138
1138
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1139
|
-
border-radius: var(--vyre-radius-lg);
|
|
1139
|
+
border-radius: var(--vyre-border-radius-lg);
|
|
1140
1140
|
box-shadow: var(--vyre-shadow-lg);
|
|
1141
1141
|
padding: var(--vyre-spacing-3);
|
|
1142
1142
|
color: var(--vyre-color-semantic-text-primary);
|
|
@@ -1169,7 +1169,7 @@
|
|
|
1169
1169
|
min-width: 10rem;
|
|
1170
1170
|
background: var(--vyre-color-semantic-surface-overlay);
|
|
1171
1171
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1172
|
-
border-radius: var(--vyre-radius-md);
|
|
1172
|
+
border-radius: var(--vyre-border-radius-md);
|
|
1173
1173
|
box-shadow: var(--vyre-shadow-lg);
|
|
1174
1174
|
padding: var(--vyre-spacing-1) 0;
|
|
1175
1175
|
animation: vyre-dropdown-in var(--vyre-transition-duration-fast) var(--vyre-transition-easing-out) forwards;
|
|
@@ -1287,7 +1287,7 @@
|
|
|
1287
1287
|
align-items: flex-start;
|
|
1288
1288
|
gap: var(--vyre-spacing-3);
|
|
1289
1289
|
padding: var(--vyre-spacing-3) var(--vyre-spacing-4);
|
|
1290
|
-
border-radius: var(--vyre-radius-md);
|
|
1290
|
+
border-radius: var(--vyre-border-radius-md);
|
|
1291
1291
|
border-width: 1px;
|
|
1292
1292
|
border-style: solid;
|
|
1293
1293
|
font-size: var(--vyre-typography-font-size-sm);
|
|
@@ -1345,7 +1345,7 @@
|
|
|
1345
1345
|
flex-shrink: 0;
|
|
1346
1346
|
background: none;
|
|
1347
1347
|
border: none;
|
|
1348
|
-
border-radius: var(--vyre-radius-sm);
|
|
1348
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
1349
1349
|
color: var(--vyre-color-semantic-text-muted);
|
|
1350
1350
|
cursor: pointer;
|
|
1351
1351
|
padding: 2px;
|
|
@@ -1385,7 +1385,7 @@
|
|
|
1385
1385
|
max-width: 26rem;
|
|
1386
1386
|
background: var(--vyre-color-semantic-surface-overlay);
|
|
1387
1387
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1388
|
-
border-radius: var(--vyre-radius-xl);
|
|
1388
|
+
border-radius: var(--vyre-border-radius-xl);
|
|
1389
1389
|
box-shadow: var(--vyre-shadow-xl);
|
|
1390
1390
|
padding: var(--vyre-spacing-6);
|
|
1391
1391
|
animation: vyre-alert-dialog-in var(--vyre-transition-duration-normal) var(--vyre-transition-easing-spring);
|
|
@@ -1571,7 +1571,7 @@
|
|
|
1571
1571
|
width: 1.875rem;
|
|
1572
1572
|
height: 1.875rem;
|
|
1573
1573
|
border: none;
|
|
1574
|
-
border-radius: var(--vyre-radius-md);
|
|
1574
|
+
border-radius: var(--vyre-border-radius-md);
|
|
1575
1575
|
background: none;
|
|
1576
1576
|
color: var(--vyre-color-semantic-text-secondary);
|
|
1577
1577
|
cursor: pointer;
|
|
@@ -1601,7 +1601,7 @@
|
|
|
1601
1601
|
gap: 1px;
|
|
1602
1602
|
background: var(--vyre-color-semantic-surface-raised);
|
|
1603
1603
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1604
|
-
border-radius: var(--vyre-radius-lg);
|
|
1604
|
+
border-radius: var(--vyre-border-radius-lg);
|
|
1605
1605
|
}
|
|
1606
1606
|
.vyre-pagination__btn {
|
|
1607
1607
|
display: inline-flex;
|
|
@@ -1611,7 +1611,7 @@
|
|
|
1611
1611
|
height: 1.75rem;
|
|
1612
1612
|
padding: 0 var(--vyre-spacing-1);
|
|
1613
1613
|
border: none;
|
|
1614
|
-
border-radius: calc(var(--vyre-radius-lg) - 3px);
|
|
1614
|
+
border-radius: calc(var(--vyre-border-radius-lg) - 3px);
|
|
1615
1615
|
background: none;
|
|
1616
1616
|
color: var(--vyre-color-semantic-text-secondary);
|
|
1617
1617
|
font-size: var(--vyre-typography-font-size-sm);
|
|
@@ -1777,7 +1777,7 @@
|
|
|
1777
1777
|
.vyre-command {
|
|
1778
1778
|
background: var(--vyre-color-semantic-surface);
|
|
1779
1779
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1780
|
-
border-radius: var(--vyre-radius-xl);
|
|
1780
|
+
border-radius: var(--vyre-border-radius-xl);
|
|
1781
1781
|
overflow: hidden;
|
|
1782
1782
|
display: flex;
|
|
1783
1783
|
flex-direction: column;
|
|
@@ -1822,7 +1822,7 @@
|
|
|
1822
1822
|
justify-content: center;
|
|
1823
1823
|
width: 1.25rem;
|
|
1824
1824
|
height: 1.25rem;
|
|
1825
|
-
border-radius: var(--vyre-radius-sm);
|
|
1825
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
1826
1826
|
border: none;
|
|
1827
1827
|
background: none;
|
|
1828
1828
|
color: var(--vyre-color-semantic-text-muted);
|
|
@@ -1873,7 +1873,7 @@
|
|
|
1873
1873
|
gap: var(--vyre-spacing-2);
|
|
1874
1874
|
padding: var(--vyre-spacing-2) var(--vyre-spacing-3);
|
|
1875
1875
|
margin: 1px var(--vyre-spacing-2);
|
|
1876
|
-
border-radius: var(--vyre-radius-md);
|
|
1876
|
+
border-radius: var(--vyre-border-radius-md);
|
|
1877
1877
|
font-size: var(--vyre-typography-font-size-sm);
|
|
1878
1878
|
color: var(--vyre-color-semantic-text-primary);
|
|
1879
1879
|
cursor: pointer;
|
|
@@ -1911,7 +1911,7 @@
|
|
|
1911
1911
|
color: var(--vyre-color-semantic-text-muted);
|
|
1912
1912
|
background: var(--vyre-color-semantic-surface-raised);
|
|
1913
1913
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1914
|
-
border-radius: var(--vyre-radius-sm);
|
|
1914
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
1915
1915
|
padding: 1px 5px;
|
|
1916
1916
|
flex-shrink: 0;
|
|
1917
1917
|
}
|
|
@@ -1931,7 +1931,7 @@
|
|
|
1931
1931
|
padding: var(--vyre-spacing-3);
|
|
1932
1932
|
background: var(--vyre-color-semantic-surface-raised);
|
|
1933
1933
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
1934
|
-
border-radius: var(--vyre-radius-lg);
|
|
1934
|
+
border-radius: var(--vyre-border-radius-lg);
|
|
1935
1935
|
width: 280px;
|
|
1936
1936
|
user-select: none;
|
|
1937
1937
|
}
|
|
@@ -1954,14 +1954,14 @@
|
|
|
1954
1954
|
border: none;
|
|
1955
1955
|
cursor: pointer;
|
|
1956
1956
|
padding: var(--vyre-spacing-1) var(--vyre-spacing-2);
|
|
1957
|
-
border-radius: var(--vyre-radius-sm);
|
|
1957
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
1958
1958
|
font-size: var(--vyre-typography-font-size-sm);
|
|
1959
1959
|
font-weight: 600;
|
|
1960
|
-
color: var(--vyre-color-semantic-text);
|
|
1960
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
1961
1961
|
transition: background 120ms;
|
|
1962
1962
|
}
|
|
1963
1963
|
.vyre-calendar__header-btn:hover {
|
|
1964
|
-
background: var(--vyre-color-semantic-surface-
|
|
1964
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
1965
1965
|
}
|
|
1966
1966
|
.vyre-calendar__nav {
|
|
1967
1967
|
display: flex;
|
|
@@ -1971,15 +1971,15 @@
|
|
|
1971
1971
|
height: 28px;
|
|
1972
1972
|
border: none;
|
|
1973
1973
|
background: none;
|
|
1974
|
-
border-radius: var(--vyre-radius-sm);
|
|
1974
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
1975
1975
|
cursor: pointer;
|
|
1976
1976
|
color: var(--vyre-color-semantic-text-muted);
|
|
1977
1977
|
transition: background 120ms, color 120ms;
|
|
1978
1978
|
flex-shrink: 0;
|
|
1979
1979
|
}
|
|
1980
1980
|
.vyre-calendar__nav:hover {
|
|
1981
|
-
background: var(--vyre-color-semantic-surface-
|
|
1982
|
-
color: var(--vyre-color-semantic-text);
|
|
1981
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
1982
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
1983
1983
|
}
|
|
1984
1984
|
|
|
1985
1985
|
/* Day grid */
|
|
@@ -2002,15 +2002,15 @@
|
|
|
2002
2002
|
justify-content: center;
|
|
2003
2003
|
border: none;
|
|
2004
2004
|
background: none;
|
|
2005
|
-
border-radius: var(--vyre-radius-sm);
|
|
2005
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2006
2006
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2007
|
-
color: var(--vyre-color-semantic-text);
|
|
2007
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2008
2008
|
cursor: pointer;
|
|
2009
2009
|
transition: background 100ms, color 100ms;
|
|
2010
2010
|
position: relative;
|
|
2011
2011
|
}
|
|
2012
2012
|
.vyre-calendar__day:hover:not(:disabled) {
|
|
2013
|
-
background: var(--vyre-color-semantic-surface-
|
|
2013
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2014
2014
|
}
|
|
2015
2015
|
.vyre-calendar__day--today {
|
|
2016
2016
|
font-weight: 700;
|
|
@@ -2031,7 +2031,7 @@
|
|
|
2031
2031
|
background: var(--vyre-color-semantic-accent) !important;
|
|
2032
2032
|
color: var(--vyre-color-semantic-accent-foreground) !important;
|
|
2033
2033
|
font-weight: 600;
|
|
2034
|
-
border-radius: var(--vyre-radius-sm);
|
|
2034
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2035
2035
|
}
|
|
2036
2036
|
.vyre-calendar__day--selected.vyre-calendar__day--today::after {
|
|
2037
2037
|
background: var(--vyre-color-semantic-accent-foreground);
|
|
@@ -2043,12 +2043,12 @@
|
|
|
2043
2043
|
.vyre-calendar__day--range-start {
|
|
2044
2044
|
background: var(--vyre-color-semantic-accent) !important;
|
|
2045
2045
|
color: var(--vyre-color-semantic-accent-foreground) !important;
|
|
2046
|
-
border-radius: var(--vyre-radius-sm) 0 0 var(--vyre-radius-sm);
|
|
2046
|
+
border-radius: var(--vyre-border-radius-sm) 0 0 var(--vyre-border-radius-sm);
|
|
2047
2047
|
}
|
|
2048
2048
|
.vyre-calendar__day--range-end {
|
|
2049
2049
|
background: var(--vyre-color-semantic-accent) !important;
|
|
2050
2050
|
color: var(--vyre-color-semantic-accent-foreground) !important;
|
|
2051
|
-
border-radius: 0 var(--vyre-radius-sm) var(--vyre-radius-sm) 0;
|
|
2051
|
+
border-radius: 0 var(--vyre-border-radius-sm) var(--vyre-border-radius-sm) 0;
|
|
2052
2052
|
}
|
|
2053
2053
|
.vyre-calendar__day--disabled {
|
|
2054
2054
|
color: var(--vyre-color-semantic-text-muted);
|
|
@@ -2066,15 +2066,15 @@
|
|
|
2066
2066
|
padding: var(--vyre-spacing-2);
|
|
2067
2067
|
border: none;
|
|
2068
2068
|
background: none;
|
|
2069
|
-
border-radius: var(--vyre-radius-sm);
|
|
2069
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2070
2070
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2071
|
-
color: var(--vyre-color-semantic-text);
|
|
2071
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2072
2072
|
cursor: pointer;
|
|
2073
2073
|
transition: background 100ms;
|
|
2074
2074
|
text-align: center;
|
|
2075
2075
|
}
|
|
2076
2076
|
.vyre-calendar__month-cell:hover {
|
|
2077
|
-
background: var(--vyre-color-semantic-surface-
|
|
2077
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2078
2078
|
}
|
|
2079
2079
|
.vyre-calendar__month-cell--active {
|
|
2080
2080
|
background: var(--vyre-color-semantic-accent);
|
|
@@ -2092,15 +2092,15 @@
|
|
|
2092
2092
|
padding: var(--vyre-spacing-2);
|
|
2093
2093
|
border: none;
|
|
2094
2094
|
background: none;
|
|
2095
|
-
border-radius: var(--vyre-radius-sm);
|
|
2095
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2096
2096
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2097
|
-
color: var(--vyre-color-semantic-text);
|
|
2097
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2098
2098
|
cursor: pointer;
|
|
2099
2099
|
transition: background 100ms;
|
|
2100
2100
|
text-align: center;
|
|
2101
2101
|
}
|
|
2102
2102
|
.vyre-calendar__year-cell:hover {
|
|
2103
|
-
background: var(--vyre-color-semantic-surface-
|
|
2103
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2104
2104
|
}
|
|
2105
2105
|
.vyre-calendar__year-cell--active {
|
|
2106
2106
|
background: var(--vyre-color-semantic-accent);
|
|
@@ -2121,9 +2121,9 @@
|
|
|
2121
2121
|
width: 44px;
|
|
2122
2122
|
padding: var(--vyre-spacing-1) var(--vyre-spacing-2);
|
|
2123
2123
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
2124
|
-
border-radius: var(--vyre-radius-sm);
|
|
2124
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2125
2125
|
background: var(--vyre-color-semantic-surface);
|
|
2126
|
-
color: var(--vyre-color-semantic-text);
|
|
2126
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2127
2127
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2128
2128
|
text-align: center;
|
|
2129
2129
|
-moz-appearance: textfield;
|
|
@@ -2153,8 +2153,8 @@
|
|
|
2153
2153
|
padding: var(--vyre-spacing-2) var(--vyre-spacing-3);
|
|
2154
2154
|
background: var(--vyre-color-semantic-surface);
|
|
2155
2155
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
2156
|
-
border-radius: var(--vyre-radius-md);
|
|
2157
|
-
color: var(--vyre-color-semantic-text);
|
|
2156
|
+
border-radius: var(--vyre-border-radius-md);
|
|
2157
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2158
2158
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2159
2159
|
cursor: pointer;
|
|
2160
2160
|
min-width: 200px;
|
|
@@ -2187,11 +2187,11 @@
|
|
|
2187
2187
|
cursor: pointer;
|
|
2188
2188
|
color: var(--vyre-color-semantic-text-muted);
|
|
2189
2189
|
padding: 2px;
|
|
2190
|
-
border-radius: var(--vyre-radius-sm);
|
|
2190
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2191
2191
|
flex-shrink: 0;
|
|
2192
2192
|
}
|
|
2193
2193
|
.vyre-datepicker__clear:hover {
|
|
2194
|
-
color: var(--vyre-color-semantic-text);
|
|
2194
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2195
2195
|
}
|
|
2196
2196
|
|
|
2197
2197
|
/* DatePicker popover */
|
|
@@ -2199,7 +2199,7 @@
|
|
|
2199
2199
|
position: absolute;
|
|
2200
2200
|
z-index: 1060;
|
|
2201
2201
|
box-shadow: var(--vyre-shadow-lg);
|
|
2202
|
-
border-radius: var(--vyre-radius-lg);
|
|
2202
|
+
border-radius: var(--vyre-border-radius-lg);
|
|
2203
2203
|
animation: vyre-fade-in 120ms ease;
|
|
2204
2204
|
}
|
|
2205
2205
|
|
|
@@ -2209,7 +2209,7 @@
|
|
|
2209
2209
|
font-family: var(--vyre-typography-font-family-body);
|
|
2210
2210
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2211
2211
|
line-height: var(--vyre-typography-line-height-normal);
|
|
2212
|
-
color: var(--vyre-color-semantic-text);
|
|
2212
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2213
2213
|
margin: 0;
|
|
2214
2214
|
}
|
|
2215
2215
|
.vyre-text--xs { font-size: var(--vyre-typography-font-size-xs); }
|
|
@@ -2217,7 +2217,7 @@
|
|
|
2217
2217
|
.vyre-text--lg { font-size: var(--vyre-typography-font-size-lg); }
|
|
2218
2218
|
.vyre-text--xl { font-size: var(--vyre-typography-font-size-xl); }
|
|
2219
2219
|
|
|
2220
|
-
.vyre-text--normal { font-weight: var(--vyre-typography-font-weight-
|
|
2220
|
+
.vyre-text--normal { font-weight: var(--vyre-typography-font-weight-regular); }
|
|
2221
2221
|
.vyre-text--medium { font-weight: var(--vyre-typography-font-weight-medium); }
|
|
2222
2222
|
.vyre-text--semibold { font-weight: var(--vyre-typography-font-weight-semibold); }
|
|
2223
2223
|
.vyre-text--bold { font-weight: var(--vyre-typography-font-weight-bold); }
|
|
@@ -2242,7 +2242,7 @@
|
|
|
2242
2242
|
font-family: var(--vyre-typography-font-family-body);
|
|
2243
2243
|
font-weight: var(--vyre-typography-font-weight-bold);
|
|
2244
2244
|
line-height: var(--vyre-typography-line-height-tight);
|
|
2245
|
-
color: var(--vyre-color-semantic-text);
|
|
2245
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2246
2246
|
margin: 0;
|
|
2247
2247
|
}
|
|
2248
2248
|
.vyre-heading--xs { font-size: var(--vyre-typography-font-size-sm); }
|
|
@@ -2253,7 +2253,7 @@
|
|
|
2253
2253
|
.vyre-heading--2xl { font-size: var(--vyre-typography-font-size-3xl); }
|
|
2254
2254
|
.vyre-heading--3xl { font-size: var(--vyre-typography-font-size-4xl); }
|
|
2255
2255
|
|
|
2256
|
-
.vyre-heading--normal { font-weight: var(--vyre-typography-font-weight-
|
|
2256
|
+
.vyre-heading--normal { font-weight: var(--vyre-typography-font-weight-regular); }
|
|
2257
2257
|
.vyre-heading--medium { font-weight: var(--vyre-typography-font-weight-medium); }
|
|
2258
2258
|
.vyre-heading--semibold { font-weight: var(--vyre-typography-font-weight-semibold); }
|
|
2259
2259
|
|
|
@@ -2270,21 +2270,21 @@
|
|
|
2270
2270
|
font-size: 0.875em;
|
|
2271
2271
|
background: var(--vyre-color-semantic-surface-raised);
|
|
2272
2272
|
border: 1px solid var(--vyre-color-semantic-border-subtle);
|
|
2273
|
-
border-radius: var(--vyre-radius-sm);
|
|
2273
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2274
2274
|
padding: 1px 6px;
|
|
2275
|
-
color: var(--vyre-color-semantic-text);
|
|
2275
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2276
2276
|
}
|
|
2277
2277
|
.vyre-code-block {
|
|
2278
2278
|
font-family: var(--vyre-typography-font-family-mono);
|
|
2279
2279
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2280
2280
|
background: var(--vyre-color-semantic-surface-raised);
|
|
2281
2281
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
2282
|
-
border-radius: var(--vyre-radius-md);
|
|
2282
|
+
border-radius: var(--vyre-border-radius-md);
|
|
2283
2283
|
padding: var(--vyre-spacing-4);
|
|
2284
2284
|
overflow-x: auto;
|
|
2285
2285
|
margin: 0;
|
|
2286
2286
|
line-height: var(--vyre-typography-line-height-relaxed);
|
|
2287
|
-
color: var(--vyre-color-semantic-text);
|
|
2287
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2288
2288
|
}
|
|
2289
2289
|
.vyre-code-block code {
|
|
2290
2290
|
background: none;
|
|
@@ -2302,7 +2302,7 @@
|
|
|
2302
2302
|
font-style: italic;
|
|
2303
2303
|
line-height: var(--vyre-typography-line-height-relaxed);
|
|
2304
2304
|
background: color-mix(in srgb, var(--vyre-color-semantic-accent) 6%, transparent);
|
|
2305
|
-
border-radius: 0 var(--vyre-radius-sm) var(--vyre-radius-sm) 0;
|
|
2305
|
+
border-radius: 0 var(--vyre-border-radius-sm) var(--vyre-border-radius-sm) 0;
|
|
2306
2306
|
}
|
|
2307
2307
|
|
|
2308
2308
|
/* ── Sidebar ────────────────────────────────────────────────── */
|
|
@@ -2311,7 +2311,10 @@
|
|
|
2311
2311
|
display: flex;
|
|
2312
2312
|
flex-direction: column;
|
|
2313
2313
|
width: 240px;
|
|
2314
|
-
height:
|
|
2314
|
+
/* No explicit height: as a flex child of .vyre-app-layout (which is
|
|
2315
|
+
min-height: 100vh) it stretches to the layout height automatically,
|
|
2316
|
+
so __content (flex: 1) pushes __footer to the bottom. */
|
|
2317
|
+
align-self: stretch;
|
|
2315
2318
|
background: var(--vyre-color-semantic-surface);
|
|
2316
2319
|
border-right: 1px solid var(--vyre-color-semantic-border-subtle);
|
|
2317
2320
|
padding: var(--vyre-spacing-4) 0;
|
|
@@ -2322,7 +2325,7 @@
|
|
|
2322
2325
|
}
|
|
2323
2326
|
.vyre-sidebar--floating {
|
|
2324
2327
|
border: 1px solid var(--vyre-color-semantic-border);
|
|
2325
|
-
border-radius: var(--vyre-radius-lg);
|
|
2328
|
+
border-radius: var(--vyre-border-radius-lg);
|
|
2326
2329
|
box-shadow: var(--vyre-shadow-md);
|
|
2327
2330
|
min-height: auto;
|
|
2328
2331
|
}
|
|
@@ -2344,7 +2347,7 @@
|
|
|
2344
2347
|
.vyre-sidebar__title {
|
|
2345
2348
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2346
2349
|
font-weight: var(--vyre-typography-font-weight-semibold);
|
|
2347
|
-
color: var(--vyre-color-semantic-text);
|
|
2350
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2348
2351
|
overflow: hidden;
|
|
2349
2352
|
text-overflow: ellipsis;
|
|
2350
2353
|
white-space: nowrap;
|
|
@@ -2352,6 +2355,19 @@
|
|
|
2352
2355
|
}
|
|
2353
2356
|
.vyre-sidebar--collapsed .vyre-sidebar__title { display: none; }
|
|
2354
2357
|
|
|
2358
|
+
/* Collapsed: center the logo / footer content and trim padding so
|
|
2359
|
+
nothing overflows the 56px rail. */
|
|
2360
|
+
.vyre-sidebar--collapsed .vyre-sidebar__header {
|
|
2361
|
+
justify-content: center;
|
|
2362
|
+
padding-left: 0;
|
|
2363
|
+
padding-right: 0;
|
|
2364
|
+
}
|
|
2365
|
+
.vyre-sidebar--collapsed .vyre-sidebar__footer {
|
|
2366
|
+
padding-left: 0;
|
|
2367
|
+
padding-right: 0;
|
|
2368
|
+
text-align: center;
|
|
2369
|
+
}
|
|
2370
|
+
|
|
2355
2371
|
.vyre-sidebar__content {
|
|
2356
2372
|
flex: 1;
|
|
2357
2373
|
overflow-y: auto;
|
|
@@ -2384,7 +2400,7 @@
|
|
|
2384
2400
|
align-items: center;
|
|
2385
2401
|
gap: var(--vyre-spacing-2);
|
|
2386
2402
|
padding: var(--vyre-spacing-2) var(--vyre-spacing-2);
|
|
2387
|
-
border-radius: var(--vyre-radius-md);
|
|
2403
|
+
border-radius: var(--vyre-border-radius-md);
|
|
2388
2404
|
font-size: var(--vyre-typography-font-size-sm);
|
|
2389
2405
|
color: var(--vyre-color-semantic-text-muted);
|
|
2390
2406
|
cursor: pointer;
|
|
@@ -2397,8 +2413,8 @@
|
|
|
2397
2413
|
position: relative;
|
|
2398
2414
|
}
|
|
2399
2415
|
.vyre-sidebar__item:hover {
|
|
2400
|
-
background: var(--vyre-color-semantic-surface-
|
|
2401
|
-
color: var(--vyre-color-semantic-text);
|
|
2416
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2417
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2402
2418
|
}
|
|
2403
2419
|
.vyre-sidebar__item--active {
|
|
2404
2420
|
background: color-mix(in srgb, var(--vyre-color-semantic-accent) 12%, transparent);
|
|
@@ -2449,15 +2465,15 @@
|
|
|
2449
2465
|
height: 28px;
|
|
2450
2466
|
border: none;
|
|
2451
2467
|
background: none;
|
|
2452
|
-
border-radius: var(--vyre-radius-sm);
|
|
2468
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2453
2469
|
cursor: pointer;
|
|
2454
2470
|
color: var(--vyre-color-semantic-text-muted);
|
|
2455
2471
|
transition: background 120ms, color 120ms;
|
|
2456
2472
|
flex-shrink: 0;
|
|
2457
2473
|
}
|
|
2458
2474
|
.vyre-sidebar__toggle:hover {
|
|
2459
|
-
background: var(--vyre-color-semantic-surface-
|
|
2460
|
-
color: var(--vyre-color-semantic-text);
|
|
2475
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2476
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2461
2477
|
}
|
|
2462
2478
|
|
|
2463
2479
|
.vyre-app-layout {
|
|
@@ -2493,15 +2509,15 @@
|
|
|
2493
2509
|
height: 32px;
|
|
2494
2510
|
border: none;
|
|
2495
2511
|
background: none;
|
|
2496
|
-
border-radius: var(--vyre-radius-sm);
|
|
2512
|
+
border-radius: var(--vyre-border-radius-sm);
|
|
2497
2513
|
cursor: pointer;
|
|
2498
2514
|
color: var(--vyre-color-semantic-text-muted);
|
|
2499
2515
|
transition: background 120ms, color 120ms;
|
|
2500
2516
|
flex-shrink: 0;
|
|
2501
2517
|
}
|
|
2502
2518
|
.vyre-sidebar-trigger:hover {
|
|
2503
|
-
background: var(--vyre-color-semantic-surface-
|
|
2504
|
-
color: var(--vyre-color-semantic-text);
|
|
2519
|
+
background: var(--vyre-color-semantic-surface-raised);
|
|
2520
|
+
color: var(--vyre-color-semantic-text-primary);
|
|
2505
2521
|
}
|
|
2506
2522
|
|
|
2507
2523
|
.vyre-page-content {
|
|
@@ -3861,3 +3877,244 @@
|
|
|
3861
3877
|
font-size: var(--vyre-typography-font-size-xs);
|
|
3862
3878
|
white-space: pre-wrap;
|
|
3863
3879
|
}
|
|
3880
|
+
|
|
3881
|
+
/* ── Layout primitives: Stack / Grid / GridItem / Box ───────── */
|
|
3882
|
+
/* Use these instead of inline flex/grid styles. All spacing is */
|
|
3883
|
+
/* token-locked so AI never emits a raw px/rem value. */
|
|
3884
|
+
|
|
3885
|
+
/* Token name → spacing value resolver. Set --vyre-sp-* then read */
|
|
3886
|
+
/* var(--vyre-sp-<slot>) where a token-driven length is needed. */
|
|
3887
|
+
.vyre-stack, .vyre-grid, .vyre-box {
|
|
3888
|
+
--vyre-sp-none: var(--vyre-spacing-0);
|
|
3889
|
+
--vyre-sp-xs: var(--vyre-spacing-2);
|
|
3890
|
+
--vyre-sp-sm: var(--vyre-spacing-3);
|
|
3891
|
+
--vyre-sp-md: var(--vyre-spacing-4);
|
|
3892
|
+
--vyre-sp-lg: var(--vyre-spacing-6);
|
|
3893
|
+
--vyre-sp-xl: var(--vyre-spacing-8);
|
|
3894
|
+
--vyre-sp-2xl: var(--vyre-spacing-12);
|
|
3895
|
+
}
|
|
3896
|
+
|
|
3897
|
+
/* Stack */
|
|
3898
|
+
.vyre-stack { display: flex; min-width: 0; }
|
|
3899
|
+
.vyre-stack[data-inline] { display: inline-flex; }
|
|
3900
|
+
.vyre-stack[data-direction="row"] { flex-direction: row; }
|
|
3901
|
+
.vyre-stack[data-direction="column"] { flex-direction: column; }
|
|
3902
|
+
.vyre-stack[data-direction="row-reverse"] { flex-direction: row-reverse; }
|
|
3903
|
+
.vyre-stack[data-direction="column-reverse"] { flex-direction: column-reverse; }
|
|
3904
|
+
.vyre-stack[data-wrap="nowrap"] { flex-wrap: nowrap; }
|
|
3905
|
+
.vyre-stack[data-wrap="wrap"] { flex-wrap: wrap; }
|
|
3906
|
+
.vyre-stack[data-wrap="wrap-reverse"] { flex-wrap: wrap-reverse; }
|
|
3907
|
+
|
|
3908
|
+
.vyre-stack[data-align="start"] { align-items: flex-start; }
|
|
3909
|
+
.vyre-stack[data-align="center"] { align-items: center; }
|
|
3910
|
+
.vyre-stack[data-align="end"] { align-items: flex-end; }
|
|
3911
|
+
.vyre-stack[data-align="stretch"] { align-items: stretch; }
|
|
3912
|
+
.vyre-stack[data-align="baseline"] { align-items: baseline; }
|
|
3913
|
+
|
|
3914
|
+
.vyre-stack[data-justify="start"] { justify-content: flex-start; }
|
|
3915
|
+
.vyre-stack[data-justify="center"] { justify-content: center; }
|
|
3916
|
+
.vyre-stack[data-justify="end"] { justify-content: flex-end; }
|
|
3917
|
+
.vyre-stack[data-justify="between"] { justify-content: space-between; }
|
|
3918
|
+
.vyre-stack[data-justify="around"] { justify-content: space-around; }
|
|
3919
|
+
.vyre-stack[data-justify="evenly"] { justify-content: space-evenly; }
|
|
3920
|
+
|
|
3921
|
+
.vyre-stack[data-align-content="start"] { align-content: flex-start; }
|
|
3922
|
+
.vyre-stack[data-align-content="center"] { align-content: center; }
|
|
3923
|
+
.vyre-stack[data-align-content="end"] { align-content: flex-end; }
|
|
3924
|
+
.vyre-stack[data-align-content="stretch"] { align-content: stretch; }
|
|
3925
|
+
.vyre-stack[data-align-content="between"] { align-content: space-between; }
|
|
3926
|
+
.vyre-stack[data-align-content="around"] { align-content: space-around; }
|
|
3927
|
+
.vyre-stack[data-align-content="evenly"] { align-content: space-evenly; }
|
|
3928
|
+
|
|
3929
|
+
.vyre-stack[data-align-self="auto"] { align-self: auto; }
|
|
3930
|
+
.vyre-stack[data-align-self="start"] { align-self: flex-start; }
|
|
3931
|
+
.vyre-stack[data-align-self="center"] { align-self: center; }
|
|
3932
|
+
.vyre-stack[data-align-self="end"] { align-self: flex-end; }
|
|
3933
|
+
.vyre-stack[data-align-self="stretch"] { align-self: stretch; }
|
|
3934
|
+
.vyre-stack[data-align-self="baseline"] { align-self: baseline; }
|
|
3935
|
+
|
|
3936
|
+
/* grow/shrink set inline (flexGrow/flexShrink); basis via resolved var */
|
|
3937
|
+
.vyre-stack[style*="--vyre-stack-basis"] { flex-basis: var(--vyre-stack-basis); }
|
|
3938
|
+
|
|
3939
|
+
/* Grid */
|
|
3940
|
+
.vyre-grid {
|
|
3941
|
+
display: grid;
|
|
3942
|
+
min-width: 0;
|
|
3943
|
+
grid-template-columns: repeat(var(--vyre-grid-columns, 1), minmax(0, 1fr));
|
|
3944
|
+
}
|
|
3945
|
+
.vyre-grid[data-columns="auto-fit"] {
|
|
3946
|
+
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
|
|
3947
|
+
}
|
|
3948
|
+
.vyre-grid[data-rows] {
|
|
3949
|
+
grid-template-rows: repeat(var(--vyre-grid-rows, 1), minmax(0, 1fr));
|
|
3950
|
+
}
|
|
3951
|
+
.vyre-grid[data-flow="row"] { grid-auto-flow: row; }
|
|
3952
|
+
.vyre-grid[data-flow="column"] { grid-auto-flow: column; }
|
|
3953
|
+
.vyre-grid[data-flow="dense"] { grid-auto-flow: dense; }
|
|
3954
|
+
.vyre-grid[data-flow="row-dense"] { grid-auto-flow: row dense; }
|
|
3955
|
+
.vyre-grid[data-flow="column-dense"] { grid-auto-flow: column dense; }
|
|
3956
|
+
.vyre-grid[data-align="start"] { align-items: start; }
|
|
3957
|
+
.vyre-grid[data-align="center"] { align-items: center; }
|
|
3958
|
+
.vyre-grid[data-align="end"] { align-items: end; }
|
|
3959
|
+
.vyre-grid[data-align="stretch"] { align-items: stretch; }
|
|
3960
|
+
.vyre-grid[data-justify="start"] { justify-items: start; }
|
|
3961
|
+
.vyre-grid[data-justify="center"] { justify-items: center; }
|
|
3962
|
+
.vyre-grid[data-justify="end"] { justify-items: end; }
|
|
3963
|
+
.vyre-grid[data-justify="stretch"] { justify-items: stretch; }
|
|
3964
|
+
|
|
3965
|
+
/* GridItem placement */
|
|
3966
|
+
.vyre-grid-item[data-col-span] { grid-column: span var(--vyre-grid-item-col-span) / span var(--vyre-grid-item-col-span); }
|
|
3967
|
+
.vyre-grid-item[data-row-span] { grid-row: span var(--vyre-grid-item-row-span) / span var(--vyre-grid-item-row-span); }
|
|
3968
|
+
.vyre-grid-item[data-col-start] { grid-column-start: var(--vyre-grid-item-col-start); }
|
|
3969
|
+
.vyre-grid-item[data-row-start] { grid-row-start: var(--vyre-grid-item-row-start); }
|
|
3970
|
+
|
|
3971
|
+
/* Box */
|
|
3972
|
+
.vyre-box { display: block; }
|
|
3973
|
+
|
|
3974
|
+
/* Shared gap scale (Stack + Grid). Per-axis overrides shorthand. */
|
|
3975
|
+
.vyre-stack[data-gap="none"], .vyre-grid[data-gap="none"] { gap: var(--vyre-sp-none); }
|
|
3976
|
+
.vyre-stack[data-gap="xs"], .vyre-grid[data-gap="xs"] { gap: var(--vyre-sp-xs); }
|
|
3977
|
+
.vyre-stack[data-gap="sm"], .vyre-grid[data-gap="sm"] { gap: var(--vyre-sp-sm); }
|
|
3978
|
+
.vyre-stack[data-gap="md"], .vyre-grid[data-gap="md"] { gap: var(--vyre-sp-md); }
|
|
3979
|
+
.vyre-stack[data-gap="lg"], .vyre-grid[data-gap="lg"] { gap: var(--vyre-sp-lg); }
|
|
3980
|
+
.vyre-stack[data-gap="xl"], .vyre-grid[data-gap="xl"] { gap: var(--vyre-sp-xl); }
|
|
3981
|
+
.vyre-stack[data-gap="2xl"], .vyre-grid[data-gap="2xl"] { gap: var(--vyre-sp-2xl); }
|
|
3982
|
+
|
|
3983
|
+
.vyre-stack[data-row-gap="none"], .vyre-grid[data-row-gap="none"] { row-gap: var(--vyre-sp-none); }
|
|
3984
|
+
.vyre-stack[data-row-gap="xs"], .vyre-grid[data-row-gap="xs"] { row-gap: var(--vyre-sp-xs); }
|
|
3985
|
+
.vyre-stack[data-row-gap="sm"], .vyre-grid[data-row-gap="sm"] { row-gap: var(--vyre-sp-sm); }
|
|
3986
|
+
.vyre-stack[data-row-gap="md"], .vyre-grid[data-row-gap="md"] { row-gap: var(--vyre-sp-md); }
|
|
3987
|
+
.vyre-stack[data-row-gap="lg"], .vyre-grid[data-row-gap="lg"] { row-gap: var(--vyre-sp-lg); }
|
|
3988
|
+
.vyre-stack[data-row-gap="xl"], .vyre-grid[data-row-gap="xl"] { row-gap: var(--vyre-sp-xl); }
|
|
3989
|
+
.vyre-stack[data-row-gap="2xl"], .vyre-grid[data-row-gap="2xl"] { row-gap: var(--vyre-sp-2xl); }
|
|
3990
|
+
|
|
3991
|
+
.vyre-stack[data-column-gap="none"], .vyre-grid[data-column-gap="none"] { column-gap: var(--vyre-sp-none); }
|
|
3992
|
+
.vyre-stack[data-column-gap="xs"], .vyre-grid[data-column-gap="xs"] { column-gap: var(--vyre-sp-xs); }
|
|
3993
|
+
.vyre-stack[data-column-gap="sm"], .vyre-grid[data-column-gap="sm"] { column-gap: var(--vyre-sp-sm); }
|
|
3994
|
+
.vyre-stack[data-column-gap="md"], .vyre-grid[data-column-gap="md"] { column-gap: var(--vyre-sp-md); }
|
|
3995
|
+
.vyre-stack[data-column-gap="lg"], .vyre-grid[data-column-gap="lg"] { column-gap: var(--vyre-sp-lg); }
|
|
3996
|
+
.vyre-stack[data-column-gap="xl"], .vyre-grid[data-column-gap="xl"] { column-gap: var(--vyre-sp-xl); }
|
|
3997
|
+
.vyre-stack[data-column-gap="2xl"], .vyre-grid[data-column-gap="2xl"] { column-gap: var(--vyre-sp-2xl); }
|
|
3998
|
+
|
|
3999
|
+
/* Box spacing — shorthand, then axis, then per-side (cascade by source order) */
|
|
4000
|
+
.vyre-box[data-p="none"] { padding: var(--vyre-sp-none); }
|
|
4001
|
+
.vyre-box[data-p="xs"] { padding: var(--vyre-sp-xs); }
|
|
4002
|
+
.vyre-box[data-p="sm"] { padding: var(--vyre-sp-sm); }
|
|
4003
|
+
.vyre-box[data-p="md"] { padding: var(--vyre-sp-md); }
|
|
4004
|
+
.vyre-box[data-p="lg"] { padding: var(--vyre-sp-lg); }
|
|
4005
|
+
.vyre-box[data-p="xl"] { padding: var(--vyre-sp-xl); }
|
|
4006
|
+
.vyre-box[data-p="2xl"] { padding: var(--vyre-sp-2xl); }
|
|
4007
|
+
.vyre-box[data-px="none"] { padding-left: var(--vyre-sp-none); padding-right: var(--vyre-sp-none); }
|
|
4008
|
+
.vyre-box[data-px="xs"] { padding-left: var(--vyre-sp-xs); padding-right: var(--vyre-sp-xs); }
|
|
4009
|
+
.vyre-box[data-px="sm"] { padding-left: var(--vyre-sp-sm); padding-right: var(--vyre-sp-sm); }
|
|
4010
|
+
.vyre-box[data-px="md"] { padding-left: var(--vyre-sp-md); padding-right: var(--vyre-sp-md); }
|
|
4011
|
+
.vyre-box[data-px="lg"] { padding-left: var(--vyre-sp-lg); padding-right: var(--vyre-sp-lg); }
|
|
4012
|
+
.vyre-box[data-px="xl"] { padding-left: var(--vyre-sp-xl); padding-right: var(--vyre-sp-xl); }
|
|
4013
|
+
.vyre-box[data-px="2xl"] { padding-left: var(--vyre-sp-2xl); padding-right: var(--vyre-sp-2xl); }
|
|
4014
|
+
.vyre-box[data-py="none"] { padding-top: var(--vyre-sp-none); padding-bottom: var(--vyre-sp-none); }
|
|
4015
|
+
.vyre-box[data-py="xs"] { padding-top: var(--vyre-sp-xs); padding-bottom: var(--vyre-sp-xs); }
|
|
4016
|
+
.vyre-box[data-py="sm"] { padding-top: var(--vyre-sp-sm); padding-bottom: var(--vyre-sp-sm); }
|
|
4017
|
+
.vyre-box[data-py="md"] { padding-top: var(--vyre-sp-md); padding-bottom: var(--vyre-sp-md); }
|
|
4018
|
+
.vyre-box[data-py="lg"] { padding-top: var(--vyre-sp-lg); padding-bottom: var(--vyre-sp-lg); }
|
|
4019
|
+
.vyre-box[data-py="xl"] { padding-top: var(--vyre-sp-xl); padding-bottom: var(--vyre-sp-xl); }
|
|
4020
|
+
.vyre-box[data-py="2xl"] { padding-top: var(--vyre-sp-2xl); padding-bottom: var(--vyre-sp-2xl); }
|
|
4021
|
+
.vyre-box[data-pt="none"] { padding-top: var(--vyre-sp-none); }
|
|
4022
|
+
.vyre-box[data-pt="xs"] { padding-top: var(--vyre-sp-xs); }
|
|
4023
|
+
.vyre-box[data-pt="sm"] { padding-top: var(--vyre-sp-sm); }
|
|
4024
|
+
.vyre-box[data-pt="md"] { padding-top: var(--vyre-sp-md); }
|
|
4025
|
+
.vyre-box[data-pt="lg"] { padding-top: var(--vyre-sp-lg); }
|
|
4026
|
+
.vyre-box[data-pt="xl"] { padding-top: var(--vyre-sp-xl); }
|
|
4027
|
+
.vyre-box[data-pt="2xl"] { padding-top: var(--vyre-sp-2xl); }
|
|
4028
|
+
.vyre-box[data-pr="none"] { padding-right: var(--vyre-sp-none); }
|
|
4029
|
+
.vyre-box[data-pr="xs"] { padding-right: var(--vyre-sp-xs); }
|
|
4030
|
+
.vyre-box[data-pr="sm"] { padding-right: var(--vyre-sp-sm); }
|
|
4031
|
+
.vyre-box[data-pr="md"] { padding-right: var(--vyre-sp-md); }
|
|
4032
|
+
.vyre-box[data-pr="lg"] { padding-right: var(--vyre-sp-lg); }
|
|
4033
|
+
.vyre-box[data-pr="xl"] { padding-right: var(--vyre-sp-xl); }
|
|
4034
|
+
.vyre-box[data-pr="2xl"] { padding-right: var(--vyre-sp-2xl); }
|
|
4035
|
+
.vyre-box[data-pb="none"] { padding-bottom: var(--vyre-sp-none); }
|
|
4036
|
+
.vyre-box[data-pb="xs"] { padding-bottom: var(--vyre-sp-xs); }
|
|
4037
|
+
.vyre-box[data-pb="sm"] { padding-bottom: var(--vyre-sp-sm); }
|
|
4038
|
+
.vyre-box[data-pb="md"] { padding-bottom: var(--vyre-sp-md); }
|
|
4039
|
+
.vyre-box[data-pb="lg"] { padding-bottom: var(--vyre-sp-lg); }
|
|
4040
|
+
.vyre-box[data-pb="xl"] { padding-bottom: var(--vyre-sp-xl); }
|
|
4041
|
+
.vyre-box[data-pb="2xl"] { padding-bottom: var(--vyre-sp-2xl); }
|
|
4042
|
+
.vyre-box[data-pl="none"] { padding-left: var(--vyre-sp-none); }
|
|
4043
|
+
.vyre-box[data-pl="xs"] { padding-left: var(--vyre-sp-xs); }
|
|
4044
|
+
.vyre-box[data-pl="sm"] { padding-left: var(--vyre-sp-sm); }
|
|
4045
|
+
.vyre-box[data-pl="md"] { padding-left: var(--vyre-sp-md); }
|
|
4046
|
+
.vyre-box[data-pl="lg"] { padding-left: var(--vyre-sp-lg); }
|
|
4047
|
+
.vyre-box[data-pl="xl"] { padding-left: var(--vyre-sp-xl); }
|
|
4048
|
+
.vyre-box[data-pl="2xl"] { padding-left: var(--vyre-sp-2xl); }
|
|
4049
|
+
.vyre-box[data-m="none"] { margin: var(--vyre-sp-none); }
|
|
4050
|
+
.vyre-box[data-m="xs"] { margin: var(--vyre-sp-xs); }
|
|
4051
|
+
.vyre-box[data-m="sm"] { margin: var(--vyre-sp-sm); }
|
|
4052
|
+
.vyre-box[data-m="md"] { margin: var(--vyre-sp-md); }
|
|
4053
|
+
.vyre-box[data-m="lg"] { margin: var(--vyre-sp-lg); }
|
|
4054
|
+
.vyre-box[data-m="xl"] { margin: var(--vyre-sp-xl); }
|
|
4055
|
+
.vyre-box[data-m="2xl"] { margin: var(--vyre-sp-2xl); }
|
|
4056
|
+
.vyre-box[data-mx="none"] { margin-left: var(--vyre-sp-none); margin-right: var(--vyre-sp-none); }
|
|
4057
|
+
.vyre-box[data-mx="xs"] { margin-left: var(--vyre-sp-xs); margin-right: var(--vyre-sp-xs); }
|
|
4058
|
+
.vyre-box[data-mx="sm"] { margin-left: var(--vyre-sp-sm); margin-right: var(--vyre-sp-sm); }
|
|
4059
|
+
.vyre-box[data-mx="md"] { margin-left: var(--vyre-sp-md); margin-right: var(--vyre-sp-md); }
|
|
4060
|
+
.vyre-box[data-mx="lg"] { margin-left: var(--vyre-sp-lg); margin-right: var(--vyre-sp-lg); }
|
|
4061
|
+
.vyre-box[data-mx="xl"] { margin-left: var(--vyre-sp-xl); margin-right: var(--vyre-sp-xl); }
|
|
4062
|
+
.vyre-box[data-mx="2xl"] { margin-left: var(--vyre-sp-2xl); margin-right: var(--vyre-sp-2xl); }
|
|
4063
|
+
.vyre-box[data-my="none"] { margin-top: var(--vyre-sp-none); margin-bottom: var(--vyre-sp-none); }
|
|
4064
|
+
.vyre-box[data-my="xs"] { margin-top: var(--vyre-sp-xs); margin-bottom: var(--vyre-sp-xs); }
|
|
4065
|
+
.vyre-box[data-my="sm"] { margin-top: var(--vyre-sp-sm); margin-bottom: var(--vyre-sp-sm); }
|
|
4066
|
+
.vyre-box[data-my="md"] { margin-top: var(--vyre-sp-md); margin-bottom: var(--vyre-sp-md); }
|
|
4067
|
+
.vyre-box[data-my="lg"] { margin-top: var(--vyre-sp-lg); margin-bottom: var(--vyre-sp-lg); }
|
|
4068
|
+
.vyre-box[data-my="xl"] { margin-top: var(--vyre-sp-xl); margin-bottom: var(--vyre-sp-xl); }
|
|
4069
|
+
.vyre-box[data-my="2xl"] { margin-top: var(--vyre-sp-2xl); margin-bottom: var(--vyre-sp-2xl); }
|
|
4070
|
+
.vyre-box[data-mt="none"] { margin-top: var(--vyre-sp-none); }
|
|
4071
|
+
.vyre-box[data-mt="xs"] { margin-top: var(--vyre-sp-xs); }
|
|
4072
|
+
.vyre-box[data-mt="sm"] { margin-top: var(--vyre-sp-sm); }
|
|
4073
|
+
.vyre-box[data-mt="md"] { margin-top: var(--vyre-sp-md); }
|
|
4074
|
+
.vyre-box[data-mt="lg"] { margin-top: var(--vyre-sp-lg); }
|
|
4075
|
+
.vyre-box[data-mt="xl"] { margin-top: var(--vyre-sp-xl); }
|
|
4076
|
+
.vyre-box[data-mt="2xl"] { margin-top: var(--vyre-sp-2xl); }
|
|
4077
|
+
.vyre-box[data-mr="none"] { margin-right: var(--vyre-sp-none); }
|
|
4078
|
+
.vyre-box[data-mr="xs"] { margin-right: var(--vyre-sp-xs); }
|
|
4079
|
+
.vyre-box[data-mr="sm"] { margin-right: var(--vyre-sp-sm); }
|
|
4080
|
+
.vyre-box[data-mr="md"] { margin-right: var(--vyre-sp-md); }
|
|
4081
|
+
.vyre-box[data-mr="lg"] { margin-right: var(--vyre-sp-lg); }
|
|
4082
|
+
.vyre-box[data-mr="xl"] { margin-right: var(--vyre-sp-xl); }
|
|
4083
|
+
.vyre-box[data-mr="2xl"] { margin-right: var(--vyre-sp-2xl); }
|
|
4084
|
+
.vyre-box[data-mb="none"] { margin-bottom: var(--vyre-sp-none); }
|
|
4085
|
+
.vyre-box[data-mb="xs"] { margin-bottom: var(--vyre-sp-xs); }
|
|
4086
|
+
.vyre-box[data-mb="sm"] { margin-bottom: var(--vyre-sp-sm); }
|
|
4087
|
+
.vyre-box[data-mb="md"] { margin-bottom: var(--vyre-sp-md); }
|
|
4088
|
+
.vyre-box[data-mb="lg"] { margin-bottom: var(--vyre-sp-lg); }
|
|
4089
|
+
.vyre-box[data-mb="xl"] { margin-bottom: var(--vyre-sp-xl); }
|
|
4090
|
+
.vyre-box[data-mb="2xl"] { margin-bottom: var(--vyre-sp-2xl); }
|
|
4091
|
+
.vyre-box[data-ml="none"] { margin-left: var(--vyre-sp-none); }
|
|
4092
|
+
.vyre-box[data-ml="xs"] { margin-left: var(--vyre-sp-xs); }
|
|
4093
|
+
.vyre-box[data-ml="sm"] { margin-left: var(--vyre-sp-sm); }
|
|
4094
|
+
.vyre-box[data-ml="md"] { margin-left: var(--vyre-sp-md); }
|
|
4095
|
+
.vyre-box[data-ml="lg"] { margin-left: var(--vyre-sp-lg); }
|
|
4096
|
+
.vyre-box[data-ml="xl"] { margin-left: var(--vyre-sp-xl); }
|
|
4097
|
+
.vyre-box[data-ml="2xl"] { margin-left: var(--vyre-sp-2xl); }
|
|
4098
|
+
|
|
4099
|
+
/* Sizing scale (width / height) — shared by Stack / Grid / Box. */
|
|
4100
|
+
/* Keyword values + fixed-rem token sizes. No raw px ever needed. */
|
|
4101
|
+
.vyre-stack[data-w="auto"], .vyre-grid[data-w="auto"], .vyre-box[data-w="auto"] { width: auto; }
|
|
4102
|
+
.vyre-stack[data-w="full"], .vyre-grid[data-w="full"], .vyre-box[data-w="full"] { width: 100%; }
|
|
4103
|
+
.vyre-stack[data-w="fit"], .vyre-grid[data-w="fit"], .vyre-box[data-w="fit"] { width: fit-content; }
|
|
4104
|
+
.vyre-stack[data-w="screen"], .vyre-grid[data-w="screen"], .vyre-box[data-w="screen"]{ width: 100vw; }
|
|
4105
|
+
.vyre-stack[data-w="xs"], .vyre-grid[data-w="xs"], .vyre-box[data-w="xs"] { width: 8rem; }
|
|
4106
|
+
.vyre-stack[data-w="sm"], .vyre-grid[data-w="sm"], .vyre-box[data-w="sm"] { width: 12rem; }
|
|
4107
|
+
.vyre-stack[data-w="md"], .vyre-grid[data-w="md"], .vyre-box[data-w="md"] { width: 16rem; }
|
|
4108
|
+
.vyre-stack[data-w="lg"], .vyre-grid[data-w="lg"], .vyre-box[data-w="lg"] { width: 24rem; }
|
|
4109
|
+
.vyre-stack[data-w="xl"], .vyre-grid[data-w="xl"], .vyre-box[data-w="xl"] { width: 32rem; }
|
|
4110
|
+
.vyre-stack[data-w="2xl"], .vyre-grid[data-w="2xl"], .vyre-box[data-w="2xl"] { width: 42rem; }
|
|
4111
|
+
.vyre-stack[data-h="auto"], .vyre-grid[data-h="auto"], .vyre-box[data-h="auto"] { height: auto; }
|
|
4112
|
+
.vyre-stack[data-h="full"], .vyre-grid[data-h="full"], .vyre-box[data-h="full"] { height: 100%; }
|
|
4113
|
+
.vyre-stack[data-h="fit"], .vyre-grid[data-h="fit"], .vyre-box[data-h="fit"] { height: fit-content; }
|
|
4114
|
+
.vyre-stack[data-h="screen"], .vyre-grid[data-h="screen"], .vyre-box[data-h="screen"]{ height: 100vh; }
|
|
4115
|
+
.vyre-stack[data-h="xs"], .vyre-grid[data-h="xs"], .vyre-box[data-h="xs"] { height: 8rem; }
|
|
4116
|
+
.vyre-stack[data-h="sm"], .vyre-grid[data-h="sm"], .vyre-box[data-h="sm"] { height: 12rem; }
|
|
4117
|
+
.vyre-stack[data-h="md"], .vyre-grid[data-h="md"], .vyre-box[data-h="md"] { height: 16rem; }
|
|
4118
|
+
.vyre-stack[data-h="lg"], .vyre-grid[data-h="lg"], .vyre-box[data-h="lg"] { height: 24rem; }
|
|
4119
|
+
.vyre-stack[data-h="xl"], .vyre-grid[data-h="xl"], .vyre-box[data-h="xl"] { height: 32rem; }
|
|
4120
|
+
.vyre-stack[data-h="2xl"], .vyre-grid[data-h="2xl"], .vyre-box[data-h="2xl"] { height: 42rem; }
|