@usevyre/react 1.2.1 → 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/index.cjs +1 -1
- package/dist/index.d.ts +5 -0
- package/dist/index.js +1653 -1459
- package/dist/styles/components.css +241 -0
- package/package.json +1 -1
|
@@ -3877,3 +3877,244 @@
|
|
|
3877
3877
|
font-size: var(--vyre-typography-font-size-xs);
|
|
3878
3878
|
white-space: pre-wrap;
|
|
3879
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; }
|