@citygross/components_v2 0.0.11 → 0.0.13
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/AlertBox/AlertBox.css.ts.vanilla.css +87 -0
- package/dist/components/AlertBox/AlertBox.css.vanilla.js +10 -0
- package/dist/components/AlertBox/AlertBox.d.ts +17 -0
- package/dist/components/AlertBox/AlertBox.js +38 -0
- package/dist/components/Box/Box.js +33 -16
- package/dist/components/BoxArrow/BoxArrow.css.ts.vanilla.css +154 -0
- package/dist/components/BoxArrow/BoxArrow.css.vanilla.js +6 -0
- package/dist/components/BoxArrow/BoxArrow.js +19 -0
- package/dist/components/CartItemSummary/CartItemSummary.css.ts.vanilla.css +23 -0
- package/dist/components/CartItemSummary/CartItemSummary.css.vanilla.js +8 -0
- package/dist/components/CartItemSummary/CartItemSummary.d.ts +15 -0
- package/dist/components/CartItemSummary/CartItemSummary.js +31 -0
- package/dist/components/CartSummary/CartSummary.css.ts.vanilla.css +34 -0
- package/dist/components/CartSummary/CartSummary.css.vanilla.js +11 -0
- package/dist/components/CartSummary/CartSummary.d.ts +26 -0
- package/dist/components/CartSummary/CartSummary.js +60 -0
- package/dist/components/Divider/Divider.css.ts.vanilla.css +6 -0
- package/dist/components/Divider/Divider.css.vanilla.js +7 -0
- package/dist/components/Divider/Divider.d.ts +9 -0
- package/dist/components/Divider/Divider.js +10 -0
- package/dist/components/Dot/Dot.css.ts.vanilla.css +8 -0
- package/dist/components/Dot/Dot.css.vanilla.js +7 -0
- package/dist/components/Dot/Dot.d.ts +9 -0
- package/dist/components/Dot/Dot.js +16 -0
- package/dist/components/FormControl/FormControl.css.ts.vanilla.css +21 -0
- package/dist/components/FormControl/FormControl.css.vanilla.js +7 -0
- package/dist/components/FormControl/FormControl.d.ts +17 -0
- package/dist/components/FormControl/FormControl.js +21 -0
- package/dist/components/Input/Input.css.ts.vanilla.css +60 -0
- package/dist/components/Input/Input.css.vanilla.js +9 -0
- package/dist/components/Input/Input.d.ts +16 -0
- package/dist/components/Input/Input.js +49 -0
- package/dist/components/ListItem/ListItem.css.ts.vanilla.css +72 -0
- package/dist/components/ListItem/ListItem.css.vanilla.js +11 -0
- package/dist/components/ListItem/ListItem.d.ts +29 -0
- package/dist/components/ListItem/ListItem.js +92 -0
- package/dist/components/ListItem/assets/fallback_grocery.js +3 -0
- package/dist/components/Skeleton/Skeleton.css.ts.vanilla.css +164 -0
- package/dist/components/Skeleton/Skeleton.css.vanilla.js +7 -0
- package/dist/components/Skeleton/Skeleton.d.ts +10 -0
- package/dist/components/Skeleton/Skeleton.js +22 -0
- package/dist/components/Spacer/Spacer.css.ts.vanilla.css +3 -0
- package/dist/components/Spacer/Spacer.css.vanilla.js +7 -0
- package/dist/components/Spacer/Spacer.d.ts +9 -0
- package/dist/components/Spacer/Spacer.js +6 -0
- package/dist/components/Spinner/Spinner.css.ts.vanilla.css +171 -0
- package/dist/components/Spinner/Spinner.css.vanilla.js +7 -0
- package/dist/components/Spinner/Spinner.d.ts +10 -0
- package/dist/components/Spinner/Spinner.js +17 -0
- package/dist/components/TimeLine/TimeLine.css.ts.vanilla.css +178 -0
- package/dist/components/TimeLine/TimeLine.css.vanilla.js +9 -0
- package/dist/components/TimeLine/TimeLine.d.ts +25 -0
- package/dist/components/TimeLine/TimeLine.js +53 -0
- package/dist/cssUtils/border.css.d.ts +4 -0
- package/dist/cssUtils/border.css.vanilla.js +6 -0
- package/dist/cssUtils/color.css.d.ts +6 -0
- package/dist/cssUtils/color.css.vanilla.js +8 -0
- package/dist/cssUtils/spacings.css.d.ts +9 -0
- package/dist/cssUtils/spacings.css.ts.vanilla.css +0 -66
- package/dist/cssUtils/spacings.css.vanilla.js +11 -0
- package/dist/cssUtils/typography.css.d.ts +5 -0
- package/dist/cssUtils/typography.css.ts.vanilla.css +100 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +19 -0
- package/dist/typography/BodyText/BodyText.css.vanilla.js +8 -0
- package/dist/typography/BodyText/BodyText.d.ts +16 -0
- package/dist/typography/BodyText/BodyText.js +28 -0
- package/dist/typography/H3/H3.css.ts.vanilla.css +4 -0
- package/dist/typography/H3/H3.css.vanilla.js +8 -0
- package/dist/typography/H3/H3.js +24 -0
- package/package.json +2 -2
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { skeleton } from './Skeleton.css.vanilla.js';
|
|
3
|
+
|
|
4
|
+
const Skeleton = ({
|
|
5
|
+
width,
|
|
6
|
+
height,
|
|
7
|
+
borderRadius,
|
|
8
|
+
className
|
|
9
|
+
}) => {
|
|
10
|
+
return /* @__PURE__ */ React.createElement(
|
|
11
|
+
"span",
|
|
12
|
+
{
|
|
13
|
+
className: `${skeleton({
|
|
14
|
+
width,
|
|
15
|
+
height,
|
|
16
|
+
borderRadius
|
|
17
|
+
})} ${className}`
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { Skeleton as default };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import './../../cssUtils/spacings.css.ts.vanilla.css';
|
|
2
|
+
import './Spacer.css.ts.vanilla.css';
|
|
3
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
4
|
+
|
|
5
|
+
var spacer = createRuntimeFn({ defaultClassName: "Spacer_spacer__7fj4w10", variantClassNames: { marginBottomDynamic: { xxxs: "spacings_marginBottomDynamic_xxxs__e0awtz10", xxs: "spacings_marginBottomDynamic_xxs__e0awtz11", xxs2: "spacings_marginBottomDynamic_xxs2__e0awtz12", xs: "spacings_marginBottomDynamic_xs__e0awtz13", xs2: "spacings_marginBottomDynamic_xs2__e0awtz14", sm: "spacings_marginBottomDynamic_sm__e0awtz15", sm2: "spacings_marginBottomDynamic_sm2__e0awtz16", md: "spacings_marginBottomDynamic_md__e0awtz17", lg: "spacings_marginBottomDynamic_lg__e0awtz18", xl: "spacings_marginBottomDynamic_xl__e0awtz19", xxl: "spacings_marginBottomDynamic_xxl__e0awtz1a", false: "spacings_marginBottomDynamic_false__e0awtz1b" } }, defaultVariants: {}, compoundVariants: [] });
|
|
6
|
+
|
|
7
|
+
export { spacer };
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
@keyframes Spinner_spin__1rywg3p0 {
|
|
2
|
+
0% {
|
|
3
|
+
transform: rotate(0deg);
|
|
4
|
+
}
|
|
5
|
+
100% {
|
|
6
|
+
transform: rotate(360deg);
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
.Spinner_size_small__1rywg3p1 {
|
|
10
|
+
height: 16px;
|
|
11
|
+
width: 16px;
|
|
12
|
+
border-width: 2.1333333333333333;
|
|
13
|
+
border-style: solid;
|
|
14
|
+
}
|
|
15
|
+
.Spinner_size_medium__1rywg3p2 {
|
|
16
|
+
height: 24px;
|
|
17
|
+
width: 24px;
|
|
18
|
+
border-width: 3.2;
|
|
19
|
+
border-style: solid;
|
|
20
|
+
}
|
|
21
|
+
.Spinner_size_large__1rywg3p3 {
|
|
22
|
+
height: 32px;
|
|
23
|
+
width: 32px;
|
|
24
|
+
border-width: 4.266666666666667;
|
|
25
|
+
border-style: solid;
|
|
26
|
+
}
|
|
27
|
+
.Spinner_spinnerColor_primary__1rywg3p4 {
|
|
28
|
+
border-top-color: #FFE522;
|
|
29
|
+
}
|
|
30
|
+
.Spinner_spinnerColor_secondary__1rywg3p5 {
|
|
31
|
+
border-top-color: #0069AE;
|
|
32
|
+
}
|
|
33
|
+
.Spinner_spinnerColor_brandYellow__1rywg3p6 {
|
|
34
|
+
border-top-color: #FFE522;
|
|
35
|
+
}
|
|
36
|
+
.Spinner_spinnerColor_brandBlue__1rywg3p7 {
|
|
37
|
+
border-top-color: #0069AE;
|
|
38
|
+
}
|
|
39
|
+
.Spinner_spinnerColor_brandPurple__1rywg3p8 {
|
|
40
|
+
border-top-color: #A71680;
|
|
41
|
+
}
|
|
42
|
+
.Spinner_spinnerColor_brandPrio__1rywg3p9 {
|
|
43
|
+
border-top-color: #a80073;
|
|
44
|
+
}
|
|
45
|
+
.Spinner_spinnerColor_yellowLighter__1rywg3pa {
|
|
46
|
+
border-top-color: #FFFBE7;
|
|
47
|
+
}
|
|
48
|
+
.Spinner_spinnerColor_yellowLight__1rywg3pb {
|
|
49
|
+
border-top-color: #FFF7D1;
|
|
50
|
+
}
|
|
51
|
+
.Spinner_spinnerColor_blueLight__1rywg3pc {
|
|
52
|
+
border-top-color: #ECF7FE;
|
|
53
|
+
}
|
|
54
|
+
.Spinner_spinnerColor_blueLighter__1rywg3pd {
|
|
55
|
+
border-top-color: #D3EDFD;
|
|
56
|
+
}
|
|
57
|
+
.Spinner_spinnerColor_blueMedium__1rywg3pe {
|
|
58
|
+
border-top-color: #92B9D3;
|
|
59
|
+
}
|
|
60
|
+
.Spinner_spinnerColor_greenLight__1rywg3pf {
|
|
61
|
+
border-top-color: #F2FDF2;
|
|
62
|
+
}
|
|
63
|
+
.Spinner_spinnerColor_greenMedium__1rywg3pg {
|
|
64
|
+
border-top-color: #BEE5BE;
|
|
65
|
+
}
|
|
66
|
+
.Spinner_spinnerColor_redLight__1rywg3ph {
|
|
67
|
+
border-top-color: #FCE9E9;
|
|
68
|
+
}
|
|
69
|
+
.Spinner_spinnerColor_recipeVego__1rywg3pi {
|
|
70
|
+
border-top-color: #65DB69;
|
|
71
|
+
}
|
|
72
|
+
.Spinner_spinnerColor_recipeLactose__1rywg3pj {
|
|
73
|
+
border-top-color: #8CCDF0;
|
|
74
|
+
}
|
|
75
|
+
.Spinner_spinnerColor_recipeGluten__1rywg3pk {
|
|
76
|
+
border-top-color: #D5642A;
|
|
77
|
+
}
|
|
78
|
+
.Spinner_spinnerColor_link__1rywg3pl {
|
|
79
|
+
border-top-color: #0072BB;
|
|
80
|
+
}
|
|
81
|
+
.Spinner_spinnerColor_white__1rywg3pm {
|
|
82
|
+
border-top-color: #FFFFFF;
|
|
83
|
+
}
|
|
84
|
+
.Spinner_spinnerColor_black__1rywg3pn {
|
|
85
|
+
border-top-color: #000000;
|
|
86
|
+
}
|
|
87
|
+
.Spinner_spinnerColor_lightest__1rywg3po {
|
|
88
|
+
border-top-color: #F7F7F7;
|
|
89
|
+
}
|
|
90
|
+
.Spinner_spinnerColor_lighter__1rywg3pp {
|
|
91
|
+
border-top-color: #F1F1F1;
|
|
92
|
+
}
|
|
93
|
+
.Spinner_spinnerColor_light__1rywg3pq {
|
|
94
|
+
border-top-color: #E8E8E8;
|
|
95
|
+
}
|
|
96
|
+
.Spinner_spinnerColor_medium__1rywg3pr {
|
|
97
|
+
border-top-color: #DBDBDB;
|
|
98
|
+
}
|
|
99
|
+
.Spinner_spinnerColor_mediumDark__1rywg3ps {
|
|
100
|
+
border-top-color: #6C6C6C;
|
|
101
|
+
}
|
|
102
|
+
.Spinner_spinnerColor_dark__1rywg3pt {
|
|
103
|
+
border-top-color: #979797;
|
|
104
|
+
}
|
|
105
|
+
.Spinner_spinnerColor_darker__1rywg3pu {
|
|
106
|
+
border-top-color: #4A4A4A;
|
|
107
|
+
}
|
|
108
|
+
.Spinner_spinnerColor_darkest__1rywg3pv {
|
|
109
|
+
border-top-color: #333333;
|
|
110
|
+
}
|
|
111
|
+
.Spinner_spinnerColor_buttonGray__1rywg3pw {
|
|
112
|
+
border-top-color: #E5E4E5;
|
|
113
|
+
}
|
|
114
|
+
.Spinner_spinnerColor_disabledGray__1rywg3px {
|
|
115
|
+
border-top-color: #B8B8B8;
|
|
116
|
+
}
|
|
117
|
+
.Spinner_spinnerColor_disabledDarkGray__1rywg3py {
|
|
118
|
+
border-top-color: #5c5c5c;
|
|
119
|
+
}
|
|
120
|
+
.Spinner_spinnerColor_placeholder__1rywg3pz {
|
|
121
|
+
border-top-color: #8f8f8f;
|
|
122
|
+
}
|
|
123
|
+
.Spinner_spinnerColor_border__1rywg3p10 {
|
|
124
|
+
border-top-color: #0069AE;
|
|
125
|
+
}
|
|
126
|
+
.Spinner_spinnerColor_boxShadow__1rywg3p11 {
|
|
127
|
+
border-top-color: #E1E1E1;
|
|
128
|
+
}
|
|
129
|
+
.Spinner_spinnerColor_boxShadowActive__1rywg3p12 {
|
|
130
|
+
border-top-color: rgba(7, 52, 99, 0.15);
|
|
131
|
+
}
|
|
132
|
+
.Spinner_spinnerColor_alertRed__1rywg3p13 {
|
|
133
|
+
border-top-color: #E02721;
|
|
134
|
+
}
|
|
135
|
+
.Spinner_spinnerColor_alertBlue__1rywg3p14 {
|
|
136
|
+
border-top-color: #0072BB;
|
|
137
|
+
}
|
|
138
|
+
.Spinner_spinnerColor_alertGreen__1rywg3p15 {
|
|
139
|
+
border-top-color: #3F9A3C;
|
|
140
|
+
}
|
|
141
|
+
.Spinner_spinnerColor_darkOverlay__1rywg3p16 {
|
|
142
|
+
border-top-color: rgba(0, 0, 0, 0.6);
|
|
143
|
+
}
|
|
144
|
+
.Spinner_spinnerColor_transparent__1rywg3p17 {
|
|
145
|
+
border-top-color: #ffffff00;
|
|
146
|
+
}
|
|
147
|
+
.Spinner_spinnerColor_brandBlueHover__1rywg3p18 {
|
|
148
|
+
border-top-color: #005C99;
|
|
149
|
+
}
|
|
150
|
+
.Spinner_spinnerColor_brandYellowHover__1rywg3p19 {
|
|
151
|
+
border-top-color: #F5D800;
|
|
152
|
+
}
|
|
153
|
+
.Spinner_spinnerColor_brandPrioHover__1rywg3p1a {
|
|
154
|
+
border-top-color: #90136F;
|
|
155
|
+
}
|
|
156
|
+
.Spinner_spinnerColor_brandBlueActive__1rywg3p1b {
|
|
157
|
+
border-top-color: #004D80;
|
|
158
|
+
}
|
|
159
|
+
.Spinner_spinnerColor_brandYellowActive__1rywg3p1c {
|
|
160
|
+
border-top-color: #DBC100;
|
|
161
|
+
}
|
|
162
|
+
.Spinner_spinnerColor_brandPrioActive__1rywg3p1d {
|
|
163
|
+
border-top-color: #7A105E;
|
|
164
|
+
}
|
|
165
|
+
.Spinner_spinnerColor_none__1rywg3p1e {
|
|
166
|
+
border-top-color: none;
|
|
167
|
+
}
|
|
168
|
+
.Spinner_spinnerWrapper__1rywg3p1f {
|
|
169
|
+
border-radius: 50%;
|
|
170
|
+
animation: Spinner_spin__1rywg3p0 1s linear infinite;
|
|
171
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import './../../cssUtils/border.css.ts.vanilla.css';
|
|
2
|
+
import './Spinner.css.ts.vanilla.css';
|
|
3
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
4
|
+
|
|
5
|
+
var spinnerWrapper = createRuntimeFn({ defaultClassName: "Spinner_spinnerWrapper__1rywg3p1f", variantClassNames: { size: { small: "Spinner_size_small__1rywg3p1", medium: "Spinner_size_medium__1rywg3p2", large: "Spinner_size_large__1rywg3p3" }, borderColor: { primary: "border_borderColor_primary__c3f0gf0", secondary: "border_borderColor_secondary__c3f0gf1", brandYellow: "border_borderColor_brandYellow__c3f0gf2", brandBlue: "border_borderColor_brandBlue__c3f0gf3", brandPurple: "border_borderColor_brandPurple__c3f0gf4", brandPrio: "border_borderColor_brandPrio__c3f0gf5", yellowLighter: "border_borderColor_yellowLighter__c3f0gf6", yellowLight: "border_borderColor_yellowLight__c3f0gf7", blueLight: "border_borderColor_blueLight__c3f0gf8", blueLighter: "border_borderColor_blueLighter__c3f0gf9", blueMedium: "border_borderColor_blueMedium__c3f0gfa", greenLight: "border_borderColor_greenLight__c3f0gfb", greenMedium: "border_borderColor_greenMedium__c3f0gfc", redLight: "border_borderColor_redLight__c3f0gfd", recipeVego: "border_borderColor_recipeVego__c3f0gfe", recipeLactose: "border_borderColor_recipeLactose__c3f0gff", recipeGluten: "border_borderColor_recipeGluten__c3f0gfg", link: "border_borderColor_link__c3f0gfh", white: "border_borderColor_white__c3f0gfi", black: "border_borderColor_black__c3f0gfj", lightest: "border_borderColor_lightest__c3f0gfk", lighter: "border_borderColor_lighter__c3f0gfl", light: "border_borderColor_light__c3f0gfm", medium: "border_borderColor_medium__c3f0gfn", mediumDark: "border_borderColor_mediumDark__c3f0gfo", dark: "border_borderColor_dark__c3f0gfp", darker: "border_borderColor_darker__c3f0gfq", darkest: "border_borderColor_darkest__c3f0gfr", buttonGray: "border_borderColor_buttonGray__c3f0gfs", disabledGray: "border_borderColor_disabledGray__c3f0gft", disabledDarkGray: "border_borderColor_disabledDarkGray__c3f0gfu", placeholder: "border_borderColor_placeholder__c3f0gfv", border: "border_borderColor_border__c3f0gfw", boxShadow: "border_borderColor_boxShadow__c3f0gfx", boxShadowActive: "border_borderColor_boxShadowActive__c3f0gfy", alertRed: "border_borderColor_alertRed__c3f0gfz", alertBlue: "border_borderColor_alertBlue__c3f0gf10", alertGreen: "border_borderColor_alertGreen__c3f0gf11", darkOverlay: "border_borderColor_darkOverlay__c3f0gf12", transparent: "border_borderColor_transparent__c3f0gf13", brandBlueHover: "border_borderColor_brandBlueHover__c3f0gf14", brandYellowHover: "border_borderColor_brandYellowHover__c3f0gf15", brandPrioHover: "border_borderColor_brandPrioHover__c3f0gf16", brandBlueActive: "border_borderColor_brandBlueActive__c3f0gf17", brandYellowActive: "border_borderColor_brandYellowActive__c3f0gf18", brandPrioActive: "border_borderColor_brandPrioActive__c3f0gf19", none: "border_borderColor_none__c3f0gf1a" }, spinnerColor: { primary: "Spinner_spinnerColor_primary__1rywg3p4", secondary: "Spinner_spinnerColor_secondary__1rywg3p5", brandYellow: "Spinner_spinnerColor_brandYellow__1rywg3p6", brandBlue: "Spinner_spinnerColor_brandBlue__1rywg3p7", brandPurple: "Spinner_spinnerColor_brandPurple__1rywg3p8", brandPrio: "Spinner_spinnerColor_brandPrio__1rywg3p9", yellowLighter: "Spinner_spinnerColor_yellowLighter__1rywg3pa", yellowLight: "Spinner_spinnerColor_yellowLight__1rywg3pb", blueLight: "Spinner_spinnerColor_blueLight__1rywg3pc", blueLighter: "Spinner_spinnerColor_blueLighter__1rywg3pd", blueMedium: "Spinner_spinnerColor_blueMedium__1rywg3pe", greenLight: "Spinner_spinnerColor_greenLight__1rywg3pf", greenMedium: "Spinner_spinnerColor_greenMedium__1rywg3pg", redLight: "Spinner_spinnerColor_redLight__1rywg3ph", recipeVego: "Spinner_spinnerColor_recipeVego__1rywg3pi", recipeLactose: "Spinner_spinnerColor_recipeLactose__1rywg3pj", recipeGluten: "Spinner_spinnerColor_recipeGluten__1rywg3pk", link: "Spinner_spinnerColor_link__1rywg3pl", white: "Spinner_spinnerColor_white__1rywg3pm", black: "Spinner_spinnerColor_black__1rywg3pn", lightest: "Spinner_spinnerColor_lightest__1rywg3po", lighter: "Spinner_spinnerColor_lighter__1rywg3pp", light: "Spinner_spinnerColor_light__1rywg3pq", medium: "Spinner_spinnerColor_medium__1rywg3pr", mediumDark: "Spinner_spinnerColor_mediumDark__1rywg3ps", dark: "Spinner_spinnerColor_dark__1rywg3pt", darker: "Spinner_spinnerColor_darker__1rywg3pu", darkest: "Spinner_spinnerColor_darkest__1rywg3pv", buttonGray: "Spinner_spinnerColor_buttonGray__1rywg3pw", disabledGray: "Spinner_spinnerColor_disabledGray__1rywg3px", disabledDarkGray: "Spinner_spinnerColor_disabledDarkGray__1rywg3py", placeholder: "Spinner_spinnerColor_placeholder__1rywg3pz", border: "Spinner_spinnerColor_border__1rywg3p10", boxShadow: "Spinner_spinnerColor_boxShadow__1rywg3p11", boxShadowActive: "Spinner_spinnerColor_boxShadowActive__1rywg3p12", alertRed: "Spinner_spinnerColor_alertRed__1rywg3p13", alertBlue: "Spinner_spinnerColor_alertBlue__1rywg3p14", alertGreen: "Spinner_spinnerColor_alertGreen__1rywg3p15", darkOverlay: "Spinner_spinnerColor_darkOverlay__1rywg3p16", transparent: "Spinner_spinnerColor_transparent__1rywg3p17", brandBlueHover: "Spinner_spinnerColor_brandBlueHover__1rywg3p18", brandYellowHover: "Spinner_spinnerColor_brandYellowHover__1rywg3p19", brandPrioHover: "Spinner_spinnerColor_brandPrioHover__1rywg3p1a", brandBlueActive: "Spinner_spinnerColor_brandBlueActive__1rywg3p1b", brandYellowActive: "Spinner_spinnerColor_brandYellowActive__1rywg3p1c", brandPrioActive: "Spinner_spinnerColor_brandPrioActive__1rywg3p1d", none: "Spinner_spinnerColor_none__1rywg3p1e" } }, defaultVariants: { size: "medium", borderColor: "lighter", spinnerColor: "brandBlue" }, compoundVariants: [] });
|
|
6
|
+
|
|
7
|
+
export { spinnerWrapper };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TPaletteKeys } from '@citygross/design-tokens_v2';
|
|
2
|
+
|
|
3
|
+
declare type TSpinner = {
|
|
4
|
+
borderColor?: TPaletteKeys;
|
|
5
|
+
spinnerColor?: TPaletteKeys;
|
|
6
|
+
size?: 'small' | 'medium' | 'large';
|
|
7
|
+
};
|
|
8
|
+
declare const Spinner: ({ borderColor, size, spinnerColor }: TSpinner) => JSX.Element;
|
|
9
|
+
|
|
10
|
+
export { Spinner, TSpinner };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { spinnerWrapper } from './Spinner.css.vanilla.js';
|
|
3
|
+
|
|
4
|
+
const Spinner = ({ borderColor, size, spinnerColor }) => {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
className: spinnerWrapper({
|
|
9
|
+
borderColor,
|
|
10
|
+
size,
|
|
11
|
+
spinnerColor
|
|
12
|
+
})
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { Spinner };
|
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
.TimeLine_baseTimeLineItem__vvpfow0 {
|
|
2
|
+
display: flex;
|
|
3
|
+
gap: 24px;
|
|
4
|
+
align-items: center;
|
|
5
|
+
padding: 8px 0;
|
|
6
|
+
position: relative;
|
|
7
|
+
}
|
|
8
|
+
.TimeLine_baseTimeLineItem__vvpfow0 > * &:nth-child(2) {
|
|
9
|
+
flex-grow: 1;
|
|
10
|
+
}
|
|
11
|
+
.TimeLine_baseTimeLine__vvpfow1 {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
}
|
|
15
|
+
.TimeLine_timeLineH3__vvpfow2 {
|
|
16
|
+
padding-bottom: 16px;
|
|
17
|
+
}
|
|
18
|
+
.TimeLine_borderColor_primary__vvpfow3::before {
|
|
19
|
+
border-color: #FFE522;
|
|
20
|
+
}
|
|
21
|
+
.TimeLine_borderColor_secondary__vvpfow4::before {
|
|
22
|
+
border-color: #0069AE;
|
|
23
|
+
}
|
|
24
|
+
.TimeLine_borderColor_brandYellow__vvpfow5::before {
|
|
25
|
+
border-color: #FFE522;
|
|
26
|
+
}
|
|
27
|
+
.TimeLine_borderColor_brandBlue__vvpfow6::before {
|
|
28
|
+
border-color: #0069AE;
|
|
29
|
+
}
|
|
30
|
+
.TimeLine_borderColor_brandPurple__vvpfow7::before {
|
|
31
|
+
border-color: #A71680;
|
|
32
|
+
}
|
|
33
|
+
.TimeLine_borderColor_brandPrio__vvpfow8::before {
|
|
34
|
+
border-color: #a80073;
|
|
35
|
+
}
|
|
36
|
+
.TimeLine_borderColor_yellowLighter__vvpfow9::before {
|
|
37
|
+
border-color: #FFFBE7;
|
|
38
|
+
}
|
|
39
|
+
.TimeLine_borderColor_yellowLight__vvpfowa::before {
|
|
40
|
+
border-color: #FFF7D1;
|
|
41
|
+
}
|
|
42
|
+
.TimeLine_borderColor_blueLight__vvpfowb::before {
|
|
43
|
+
border-color: #ECF7FE;
|
|
44
|
+
}
|
|
45
|
+
.TimeLine_borderColor_blueLighter__vvpfowc::before {
|
|
46
|
+
border-color: #D3EDFD;
|
|
47
|
+
}
|
|
48
|
+
.TimeLine_borderColor_blueMedium__vvpfowd::before {
|
|
49
|
+
border-color: #92B9D3;
|
|
50
|
+
}
|
|
51
|
+
.TimeLine_borderColor_greenLight__vvpfowe::before {
|
|
52
|
+
border-color: #F2FDF2;
|
|
53
|
+
}
|
|
54
|
+
.TimeLine_borderColor_greenMedium__vvpfowf::before {
|
|
55
|
+
border-color: #BEE5BE;
|
|
56
|
+
}
|
|
57
|
+
.TimeLine_borderColor_redLight__vvpfowg::before {
|
|
58
|
+
border-color: #FCE9E9;
|
|
59
|
+
}
|
|
60
|
+
.TimeLine_borderColor_recipeVego__vvpfowh::before {
|
|
61
|
+
border-color: #65DB69;
|
|
62
|
+
}
|
|
63
|
+
.TimeLine_borderColor_recipeLactose__vvpfowi::before {
|
|
64
|
+
border-color: #8CCDF0;
|
|
65
|
+
}
|
|
66
|
+
.TimeLine_borderColor_recipeGluten__vvpfowj::before {
|
|
67
|
+
border-color: #D5642A;
|
|
68
|
+
}
|
|
69
|
+
.TimeLine_borderColor_link__vvpfowk::before {
|
|
70
|
+
border-color: #0072BB;
|
|
71
|
+
}
|
|
72
|
+
.TimeLine_borderColor_white__vvpfowl::before {
|
|
73
|
+
border-color: #FFFFFF;
|
|
74
|
+
}
|
|
75
|
+
.TimeLine_borderColor_black__vvpfowm::before {
|
|
76
|
+
border-color: #000000;
|
|
77
|
+
}
|
|
78
|
+
.TimeLine_borderColor_lightest__vvpfown::before {
|
|
79
|
+
border-color: #F7F7F7;
|
|
80
|
+
}
|
|
81
|
+
.TimeLine_borderColor_lighter__vvpfowo::before {
|
|
82
|
+
border-color: #F1F1F1;
|
|
83
|
+
}
|
|
84
|
+
.TimeLine_borderColor_light__vvpfowp::before {
|
|
85
|
+
border-color: #E8E8E8;
|
|
86
|
+
}
|
|
87
|
+
.TimeLine_borderColor_medium__vvpfowq::before {
|
|
88
|
+
border-color: #DBDBDB;
|
|
89
|
+
}
|
|
90
|
+
.TimeLine_borderColor_mediumDark__vvpfowr::before {
|
|
91
|
+
border-color: #6C6C6C;
|
|
92
|
+
}
|
|
93
|
+
.TimeLine_borderColor_dark__vvpfows::before {
|
|
94
|
+
border-color: #979797;
|
|
95
|
+
}
|
|
96
|
+
.TimeLine_borderColor_darker__vvpfowt::before {
|
|
97
|
+
border-color: #4A4A4A;
|
|
98
|
+
}
|
|
99
|
+
.TimeLine_borderColor_darkest__vvpfowu::before {
|
|
100
|
+
border-color: #333333;
|
|
101
|
+
}
|
|
102
|
+
.TimeLine_borderColor_buttonGray__vvpfowv::before {
|
|
103
|
+
border-color: #E5E4E5;
|
|
104
|
+
}
|
|
105
|
+
.TimeLine_borderColor_disabledGray__vvpfoww::before {
|
|
106
|
+
border-color: #B8B8B8;
|
|
107
|
+
}
|
|
108
|
+
.TimeLine_borderColor_disabledDarkGray__vvpfowx::before {
|
|
109
|
+
border-color: #5c5c5c;
|
|
110
|
+
}
|
|
111
|
+
.TimeLine_borderColor_placeholder__vvpfowy::before {
|
|
112
|
+
border-color: #8f8f8f;
|
|
113
|
+
}
|
|
114
|
+
.TimeLine_borderColor_border__vvpfowz::before {
|
|
115
|
+
border-color: #0069AE;
|
|
116
|
+
}
|
|
117
|
+
.TimeLine_borderColor_boxShadow__vvpfow10::before {
|
|
118
|
+
border-color: #E1E1E1;
|
|
119
|
+
}
|
|
120
|
+
.TimeLine_borderColor_boxShadowActive__vvpfow11::before {
|
|
121
|
+
border-color: rgba(7, 52, 99, 0.15);
|
|
122
|
+
}
|
|
123
|
+
.TimeLine_borderColor_alertRed__vvpfow12::before {
|
|
124
|
+
border-color: #E02721;
|
|
125
|
+
}
|
|
126
|
+
.TimeLine_borderColor_alertBlue__vvpfow13::before {
|
|
127
|
+
border-color: #0072BB;
|
|
128
|
+
}
|
|
129
|
+
.TimeLine_borderColor_alertGreen__vvpfow14::before {
|
|
130
|
+
border-color: #3F9A3C;
|
|
131
|
+
}
|
|
132
|
+
.TimeLine_borderColor_darkOverlay__vvpfow15::before {
|
|
133
|
+
border-color: rgba(0, 0, 0, 0.6);
|
|
134
|
+
}
|
|
135
|
+
.TimeLine_borderColor_transparent__vvpfow16::before {
|
|
136
|
+
border-color: #ffffff00;
|
|
137
|
+
}
|
|
138
|
+
.TimeLine_borderColor_brandBlueHover__vvpfow17::before {
|
|
139
|
+
border-color: #005C99;
|
|
140
|
+
}
|
|
141
|
+
.TimeLine_borderColor_brandYellowHover__vvpfow18::before {
|
|
142
|
+
border-color: #F5D800;
|
|
143
|
+
}
|
|
144
|
+
.TimeLine_borderColor_brandPrioHover__vvpfow19::before {
|
|
145
|
+
border-color: #90136F;
|
|
146
|
+
}
|
|
147
|
+
.TimeLine_borderColor_brandBlueActive__vvpfow1a::before {
|
|
148
|
+
border-color: #004D80;
|
|
149
|
+
}
|
|
150
|
+
.TimeLine_borderColor_brandYellowActive__vvpfow1b::before {
|
|
151
|
+
border-color: #DBC100;
|
|
152
|
+
}
|
|
153
|
+
.TimeLine_borderColor_brandPrioActive__vvpfow1c::before {
|
|
154
|
+
border-color: #7A105E;
|
|
155
|
+
}
|
|
156
|
+
.TimeLine_borderColor_none__vvpfow1d::before {
|
|
157
|
+
border-color: none;
|
|
158
|
+
}
|
|
159
|
+
.TimeLine_baseTimeLineList__vvpfow1e {
|
|
160
|
+
position: relative;
|
|
161
|
+
}
|
|
162
|
+
.TimeLine_baseTimeLineList__vvpfow1e:before {
|
|
163
|
+
content: "";
|
|
164
|
+
height: calc(100% - 32px);
|
|
165
|
+
position: absolute;
|
|
166
|
+
top: 16px;
|
|
167
|
+
left: 3px;
|
|
168
|
+
border-width: 1px;
|
|
169
|
+
}
|
|
170
|
+
.TimeLine_baseTimeLineList_borderStyle_solid__vvpfow1f:before {
|
|
171
|
+
border-style: solid;
|
|
172
|
+
}
|
|
173
|
+
.TimeLine_baseTimeLineList_borderStyle_dashed__vvpfow1g:before {
|
|
174
|
+
border-style: dashed;
|
|
175
|
+
}
|
|
176
|
+
.TimeLine_baseTimeLineList_borderStyle_none__vvpfow1h:before {
|
|
177
|
+
border-style: none;
|
|
178
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './TimeLine.css.ts.vanilla.css';
|
|
2
|
+
import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
|
|
3
|
+
|
|
4
|
+
var baseTimeLine = "TimeLine_baseTimeLine__vvpfow1";
|
|
5
|
+
var baseTimeLineItem = "TimeLine_baseTimeLineItem__vvpfow0";
|
|
6
|
+
var baseTimeLineList = createRuntimeFn({ defaultClassName: "TimeLine_baseTimeLineList__vvpfow1e", variantClassNames: { borderStyle: { solid: "TimeLine_baseTimeLineList_borderStyle_solid__vvpfow1f", dashed: "TimeLine_baseTimeLineList_borderStyle_dashed__vvpfow1g", none: "TimeLine_baseTimeLineList_borderStyle_none__vvpfow1h" }, borderColor: { primary: "TimeLine_borderColor_primary__vvpfow3", secondary: "TimeLine_borderColor_secondary__vvpfow4", brandYellow: "TimeLine_borderColor_brandYellow__vvpfow5", brandBlue: "TimeLine_borderColor_brandBlue__vvpfow6", brandPurple: "TimeLine_borderColor_brandPurple__vvpfow7", brandPrio: "TimeLine_borderColor_brandPrio__vvpfow8", yellowLighter: "TimeLine_borderColor_yellowLighter__vvpfow9", yellowLight: "TimeLine_borderColor_yellowLight__vvpfowa", blueLight: "TimeLine_borderColor_blueLight__vvpfowb", blueLighter: "TimeLine_borderColor_blueLighter__vvpfowc", blueMedium: "TimeLine_borderColor_blueMedium__vvpfowd", greenLight: "TimeLine_borderColor_greenLight__vvpfowe", greenMedium: "TimeLine_borderColor_greenMedium__vvpfowf", redLight: "TimeLine_borderColor_redLight__vvpfowg", recipeVego: "TimeLine_borderColor_recipeVego__vvpfowh", recipeLactose: "TimeLine_borderColor_recipeLactose__vvpfowi", recipeGluten: "TimeLine_borderColor_recipeGluten__vvpfowj", link: "TimeLine_borderColor_link__vvpfowk", white: "TimeLine_borderColor_white__vvpfowl", black: "TimeLine_borderColor_black__vvpfowm", lightest: "TimeLine_borderColor_lightest__vvpfown", lighter: "TimeLine_borderColor_lighter__vvpfowo", light: "TimeLine_borderColor_light__vvpfowp", medium: "TimeLine_borderColor_medium__vvpfowq", mediumDark: "TimeLine_borderColor_mediumDark__vvpfowr", dark: "TimeLine_borderColor_dark__vvpfows", darker: "TimeLine_borderColor_darker__vvpfowt", darkest: "TimeLine_borderColor_darkest__vvpfowu", buttonGray: "TimeLine_borderColor_buttonGray__vvpfowv", disabledGray: "TimeLine_borderColor_disabledGray__vvpfoww", disabledDarkGray: "TimeLine_borderColor_disabledDarkGray__vvpfowx", placeholder: "TimeLine_borderColor_placeholder__vvpfowy", border: "TimeLine_borderColor_border__vvpfowz", boxShadow: "TimeLine_borderColor_boxShadow__vvpfow10", boxShadowActive: "TimeLine_borderColor_boxShadowActive__vvpfow11", alertRed: "TimeLine_borderColor_alertRed__vvpfow12", alertBlue: "TimeLine_borderColor_alertBlue__vvpfow13", alertGreen: "TimeLine_borderColor_alertGreen__vvpfow14", darkOverlay: "TimeLine_borderColor_darkOverlay__vvpfow15", transparent: "TimeLine_borderColor_transparent__vvpfow16", brandBlueHover: "TimeLine_borderColor_brandBlueHover__vvpfow17", brandYellowHover: "TimeLine_borderColor_brandYellowHover__vvpfow18", brandPrioHover: "TimeLine_borderColor_brandPrioHover__vvpfow19", brandBlueActive: "TimeLine_borderColor_brandBlueActive__vvpfow1a", brandYellowActive: "TimeLine_borderColor_brandYellowActive__vvpfow1b", brandPrioActive: "TimeLine_borderColor_brandPrioActive__vvpfow1c", none: "TimeLine_borderColor_none__vvpfow1d" } }, defaultVariants: {}, compoundVariants: [] });
|
|
7
|
+
var timeLineH3 = "TimeLine_timeLineH3__vvpfow2";
|
|
8
|
+
|
|
9
|
+
export { baseTimeLine, baseTimeLineItem, baseTimeLineList, timeLineH3 };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { TPaletteKeys } from '@citygross/design-tokens_v2';
|
|
2
|
+
|
|
3
|
+
declare type TTimelineItem = {
|
|
4
|
+
primaryText: string;
|
|
5
|
+
time: string;
|
|
6
|
+
secondaryText?: string;
|
|
7
|
+
tiernaryText?: string;
|
|
8
|
+
};
|
|
9
|
+
declare type TTimeline = {
|
|
10
|
+
items: TTimelineItem[];
|
|
11
|
+
title?: string;
|
|
12
|
+
mobileTitle?: string;
|
|
13
|
+
current: number;
|
|
14
|
+
dotColor?: TPaletteKeys;
|
|
15
|
+
dotActiveColor?: TPaletteKeys;
|
|
16
|
+
dotShadow?: TPaletteKeys;
|
|
17
|
+
borderStyle?: 'dashed' | 'solid';
|
|
18
|
+
borderColor?: TPaletteKeys;
|
|
19
|
+
completedColor?: TPaletteKeys;
|
|
20
|
+
color?: TPaletteKeys;
|
|
21
|
+
reversed?: boolean;
|
|
22
|
+
};
|
|
23
|
+
declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, reversed, completedColor }: TTimeline): JSX.Element;
|
|
24
|
+
|
|
25
|
+
export { TTimeline, TTimelineItem, Timeline };
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useDetectDevice } from '@citygross/utils';
|
|
3
|
+
import { Dot } from '../Dot/Dot.js';
|
|
4
|
+
import { baseTimeLine, timeLineH3, baseTimeLineList, baseTimeLineItem } from './TimeLine.css.vanilla.js';
|
|
5
|
+
import { H3 } from '../../typography/H3/H3.js';
|
|
6
|
+
import { BodyText } from '../../typography/BodyText/BodyText.js';
|
|
7
|
+
|
|
8
|
+
function Timeline({
|
|
9
|
+
items,
|
|
10
|
+
title = "Vi skickar l\xF6pande information n\xE4r:",
|
|
11
|
+
mobileTitle = "N\xE4r din...",
|
|
12
|
+
current,
|
|
13
|
+
dotColor = "greenLight",
|
|
14
|
+
dotActiveColor = "alertGreen",
|
|
15
|
+
dotShadow = "greenMedium",
|
|
16
|
+
borderStyle = "dashed",
|
|
17
|
+
borderColor,
|
|
18
|
+
color,
|
|
19
|
+
reversed,
|
|
20
|
+
completedColor
|
|
21
|
+
}) {
|
|
22
|
+
const { isMobile } = useDetectDevice();
|
|
23
|
+
return /* @__PURE__ */ React.createElement("div", { className: baseTimeLine }, /* @__PURE__ */ React.createElement(H3, { className: timeLineH3 }, isMobile ? mobileTitle : title), /* @__PURE__ */ React.createElement(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
className: baseTimeLineList({
|
|
27
|
+
borderStyle: length > 1 ? "none" : borderStyle,
|
|
28
|
+
borderColor
|
|
29
|
+
})
|
|
30
|
+
},
|
|
31
|
+
items.map((item, index) => /* @__PURE__ */ React.createElement("div", { className: baseTimeLineItem, key: item.primaryText + index }, /* @__PURE__ */ React.createElement(
|
|
32
|
+
Dot,
|
|
33
|
+
{
|
|
34
|
+
color: reversed ? index >= current ? dotActiveColor : dotColor : index <= current ? dotActiveColor : dotColor,
|
|
35
|
+
shadow: dotShadow
|
|
36
|
+
}
|
|
37
|
+
), current === index ? /* @__PURE__ */ React.createElement(H3, { color }, isMobile ? `${item.primaryText} (${item.time})` : `${item.primaryText} - ${item.time}`) : /* @__PURE__ */ React.createElement(BodyText, { color: completedColor ?? color }, isMobile ? `${item.primaryText} (${item.time})` : `${item.primaryText} - ${item.time}`), !isMobile && /* @__PURE__ */ React.createElement(
|
|
38
|
+
BodyText,
|
|
39
|
+
{
|
|
40
|
+
color: current === index || !completedColor ? color : completedColor
|
|
41
|
+
},
|
|
42
|
+
item.secondaryText
|
|
43
|
+
), /* @__PURE__ */ React.createElement(
|
|
44
|
+
BodyText,
|
|
45
|
+
{
|
|
46
|
+
color: current === index || !completedColor ? color : completedColor
|
|
47
|
+
},
|
|
48
|
+
item.tiernaryText
|
|
49
|
+
)))
|
|
50
|
+
));
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export { Timeline };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
declare const borderColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
|
|
2
|
+
declare const borderRadius: Record<"extraSmall" | "small" | "default" | "none" | "big" | "round" | "large" | "bigger", string>;
|
|
3
|
+
|
|
4
|
+
export { borderColor, borderRadius };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './border.css.ts.vanilla.css';
|
|
2
|
+
|
|
3
|
+
var borderColor = { primary: "border_borderColor_primary__c3f0gf0", secondary: "border_borderColor_secondary__c3f0gf1", brandYellow: "border_borderColor_brandYellow__c3f0gf2", brandBlue: "border_borderColor_brandBlue__c3f0gf3", brandPurple: "border_borderColor_brandPurple__c3f0gf4", brandPrio: "border_borderColor_brandPrio__c3f0gf5", yellowLighter: "border_borderColor_yellowLighter__c3f0gf6", yellowLight: "border_borderColor_yellowLight__c3f0gf7", blueLight: "border_borderColor_blueLight__c3f0gf8", blueLighter: "border_borderColor_blueLighter__c3f0gf9", blueMedium: "border_borderColor_blueMedium__c3f0gfa", greenLight: "border_borderColor_greenLight__c3f0gfb", greenMedium: "border_borderColor_greenMedium__c3f0gfc", redLight: "border_borderColor_redLight__c3f0gfd", recipeVego: "border_borderColor_recipeVego__c3f0gfe", recipeLactose: "border_borderColor_recipeLactose__c3f0gff", recipeGluten: "border_borderColor_recipeGluten__c3f0gfg", link: "border_borderColor_link__c3f0gfh", white: "border_borderColor_white__c3f0gfi", black: "border_borderColor_black__c3f0gfj", lightest: "border_borderColor_lightest__c3f0gfk", lighter: "border_borderColor_lighter__c3f0gfl", light: "border_borderColor_light__c3f0gfm", medium: "border_borderColor_medium__c3f0gfn", mediumDark: "border_borderColor_mediumDark__c3f0gfo", dark: "border_borderColor_dark__c3f0gfp", darker: "border_borderColor_darker__c3f0gfq", darkest: "border_borderColor_darkest__c3f0gfr", buttonGray: "border_borderColor_buttonGray__c3f0gfs", disabledGray: "border_borderColor_disabledGray__c3f0gft", disabledDarkGray: "border_borderColor_disabledDarkGray__c3f0gfu", placeholder: "border_borderColor_placeholder__c3f0gfv", border: "border_borderColor_border__c3f0gfw", boxShadow: "border_borderColor_boxShadow__c3f0gfx", boxShadowActive: "border_borderColor_boxShadowActive__c3f0gfy", alertRed: "border_borderColor_alertRed__c3f0gfz", alertBlue: "border_borderColor_alertBlue__c3f0gf10", alertGreen: "border_borderColor_alertGreen__c3f0gf11", darkOverlay: "border_borderColor_darkOverlay__c3f0gf12", transparent: "border_borderColor_transparent__c3f0gf13", brandBlueHover: "border_borderColor_brandBlueHover__c3f0gf14", brandYellowHover: "border_borderColor_brandYellowHover__c3f0gf15", brandPrioHover: "border_borderColor_brandPrioHover__c3f0gf16", brandBlueActive: "border_borderColor_brandBlueActive__c3f0gf17", brandYellowActive: "border_borderColor_brandYellowActive__c3f0gf18", brandPrioActive: "border_borderColor_brandPrioActive__c3f0gf19", none: "border_borderColor_none__c3f0gf1a" };
|
|
4
|
+
var borderRadius = { none: "border_borderRadius_none__c3f0gf1b", extraSmall: "border_borderRadius_extraSmall__c3f0gf1c", small: "border_borderRadius_small__c3f0gf1d", "default": "border_borderRadius_default__c3f0gf1e", big: "border_borderRadius_big__c3f0gf1f", bigger: "border_borderRadius_bigger__c3f0gf1g", large: "border_borderRadius_large__c3f0gf1h", round: "border_borderRadius_round__c3f0gf1i" };
|
|
5
|
+
|
|
6
|
+
export { borderColor, borderRadius };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const color: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
|
|
2
|
+
declare const backgroundColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
|
|
3
|
+
declare const hoverColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
|
|
4
|
+
declare const hoverBackgroundColor: Record<"primary" | "none" | "boxShadow" | "border" | "link" | "black" | "transparent" | "white" | "medium" | "dark" | "light" | "lighter" | "secondary" | "brandYellow" | "brandBlue" | "brandPurple" | "brandPrio" | "yellowLighter" | "yellowLight" | "blueLight" | "blueLighter" | "blueMedium" | "greenLight" | "greenMedium" | "redLight" | "recipeVego" | "recipeLactose" | "recipeGluten" | "lightest" | "mediumDark" | "darker" | "darkest" | "buttonGray" | "disabledGray" | "disabledDarkGray" | "placeholder" | "boxShadowActive" | "alertRed" | "alertBlue" | "alertGreen" | "darkOverlay" | "brandBlueHover" | "brandYellowHover" | "brandPrioHover" | "brandBlueActive" | "brandYellowActive" | "brandPrioActive", string>;
|
|
5
|
+
|
|
6
|
+
export { backgroundColor, color, hoverBackgroundColor, hoverColor };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import './color.css.ts.vanilla.css';
|
|
2
|
+
|
|
3
|
+
var backgroundColor = { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" };
|
|
4
|
+
var color = { primary: "color_color_primary__13rr0b20", secondary: "color_color_secondary__13rr0b21", brandYellow: "color_color_brandYellow__13rr0b22", brandBlue: "color_color_brandBlue__13rr0b23", brandPurple: "color_color_brandPurple__13rr0b24", brandPrio: "color_color_brandPrio__13rr0b25", yellowLighter: "color_color_yellowLighter__13rr0b26", yellowLight: "color_color_yellowLight__13rr0b27", blueLight: "color_color_blueLight__13rr0b28", blueLighter: "color_color_blueLighter__13rr0b29", blueMedium: "color_color_blueMedium__13rr0b2a", greenLight: "color_color_greenLight__13rr0b2b", greenMedium: "color_color_greenMedium__13rr0b2c", redLight: "color_color_redLight__13rr0b2d", recipeVego: "color_color_recipeVego__13rr0b2e", recipeLactose: "color_color_recipeLactose__13rr0b2f", recipeGluten: "color_color_recipeGluten__13rr0b2g", link: "color_color_link__13rr0b2h", white: "color_color_white__13rr0b2i", black: "color_color_black__13rr0b2j", lightest: "color_color_lightest__13rr0b2k", lighter: "color_color_lighter__13rr0b2l", light: "color_color_light__13rr0b2m", medium: "color_color_medium__13rr0b2n", mediumDark: "color_color_mediumDark__13rr0b2o", dark: "color_color_dark__13rr0b2p", darker: "color_color_darker__13rr0b2q", darkest: "color_color_darkest__13rr0b2r", buttonGray: "color_color_buttonGray__13rr0b2s", disabledGray: "color_color_disabledGray__13rr0b2t", disabledDarkGray: "color_color_disabledDarkGray__13rr0b2u", placeholder: "color_color_placeholder__13rr0b2v", border: "color_color_border__13rr0b2w", boxShadow: "color_color_boxShadow__13rr0b2x", boxShadowActive: "color_color_boxShadowActive__13rr0b2y", alertRed: "color_color_alertRed__13rr0b2z", alertBlue: "color_color_alertBlue__13rr0b210", alertGreen: "color_color_alertGreen__13rr0b211", darkOverlay: "color_color_darkOverlay__13rr0b212", transparent: "color_color_transparent__13rr0b213", brandBlueHover: "color_color_brandBlueHover__13rr0b214", brandYellowHover: "color_color_brandYellowHover__13rr0b215", brandPrioHover: "color_color_brandPrioHover__13rr0b216", brandBlueActive: "color_color_brandBlueActive__13rr0b217", brandYellowActive: "color_color_brandYellowActive__13rr0b218", brandPrioActive: "color_color_brandPrioActive__13rr0b219", none: "color_color_none__13rr0b21a" };
|
|
5
|
+
var hoverBackgroundColor = { primary: "color_hoverBackgroundColor_primary__13rr0b23x", secondary: "color_hoverBackgroundColor_secondary__13rr0b23y", brandYellow: "color_hoverBackgroundColor_brandYellow__13rr0b23z", brandBlue: "color_hoverBackgroundColor_brandBlue__13rr0b240", brandPurple: "color_hoverBackgroundColor_brandPurple__13rr0b241", brandPrio: "color_hoverBackgroundColor_brandPrio__13rr0b242", yellowLighter: "color_hoverBackgroundColor_yellowLighter__13rr0b243", yellowLight: "color_hoverBackgroundColor_yellowLight__13rr0b244", blueLight: "color_hoverBackgroundColor_blueLight__13rr0b245", blueLighter: "color_hoverBackgroundColor_blueLighter__13rr0b246", blueMedium: "color_hoverBackgroundColor_blueMedium__13rr0b247", greenLight: "color_hoverBackgroundColor_greenLight__13rr0b248", greenMedium: "color_hoverBackgroundColor_greenMedium__13rr0b249", redLight: "color_hoverBackgroundColor_redLight__13rr0b24a", recipeVego: "color_hoverBackgroundColor_recipeVego__13rr0b24b", recipeLactose: "color_hoverBackgroundColor_recipeLactose__13rr0b24c", recipeGluten: "color_hoverBackgroundColor_recipeGluten__13rr0b24d", link: "color_hoverBackgroundColor_link__13rr0b24e", white: "color_hoverBackgroundColor_white__13rr0b24f", black: "color_hoverBackgroundColor_black__13rr0b24g", lightest: "color_hoverBackgroundColor_lightest__13rr0b24h", lighter: "color_hoverBackgroundColor_lighter__13rr0b24i", light: "color_hoverBackgroundColor_light__13rr0b24j", medium: "color_hoverBackgroundColor_medium__13rr0b24k", mediumDark: "color_hoverBackgroundColor_mediumDark__13rr0b24l", dark: "color_hoverBackgroundColor_dark__13rr0b24m", darker: "color_hoverBackgroundColor_darker__13rr0b24n", darkest: "color_hoverBackgroundColor_darkest__13rr0b24o", buttonGray: "color_hoverBackgroundColor_buttonGray__13rr0b24p", disabledGray: "color_hoverBackgroundColor_disabledGray__13rr0b24q", disabledDarkGray: "color_hoverBackgroundColor_disabledDarkGray__13rr0b24r", placeholder: "color_hoverBackgroundColor_placeholder__13rr0b24s", border: "color_hoverBackgroundColor_border__13rr0b24t", boxShadow: "color_hoverBackgroundColor_boxShadow__13rr0b24u", boxShadowActive: "color_hoverBackgroundColor_boxShadowActive__13rr0b24v", alertRed: "color_hoverBackgroundColor_alertRed__13rr0b24w", alertBlue: "color_hoverBackgroundColor_alertBlue__13rr0b24x", alertGreen: "color_hoverBackgroundColor_alertGreen__13rr0b24y", darkOverlay: "color_hoverBackgroundColor_darkOverlay__13rr0b24z", transparent: "color_hoverBackgroundColor_transparent__13rr0b250", brandBlueHover: "color_hoverBackgroundColor_brandBlueHover__13rr0b251", brandYellowHover: "color_hoverBackgroundColor_brandYellowHover__13rr0b252", brandPrioHover: "color_hoverBackgroundColor_brandPrioHover__13rr0b253", brandBlueActive: "color_hoverBackgroundColor_brandBlueActive__13rr0b254", brandYellowActive: "color_hoverBackgroundColor_brandYellowActive__13rr0b255", brandPrioActive: "color_hoverBackgroundColor_brandPrioActive__13rr0b256", none: "color_hoverBackgroundColor_none__13rr0b257" };
|
|
6
|
+
var hoverColor = { primary: "color_hoverColor_primary__13rr0b22m", secondary: "color_hoverColor_secondary__13rr0b22n", brandYellow: "color_hoverColor_brandYellow__13rr0b22o", brandBlue: "color_hoverColor_brandBlue__13rr0b22p", brandPurple: "color_hoverColor_brandPurple__13rr0b22q", brandPrio: "color_hoverColor_brandPrio__13rr0b22r", yellowLighter: "color_hoverColor_yellowLighter__13rr0b22s", yellowLight: "color_hoverColor_yellowLight__13rr0b22t", blueLight: "color_hoverColor_blueLight__13rr0b22u", blueLighter: "color_hoverColor_blueLighter__13rr0b22v", blueMedium: "color_hoverColor_blueMedium__13rr0b22w", greenLight: "color_hoverColor_greenLight__13rr0b22x", greenMedium: "color_hoverColor_greenMedium__13rr0b22y", redLight: "color_hoverColor_redLight__13rr0b22z", recipeVego: "color_hoverColor_recipeVego__13rr0b230", recipeLactose: "color_hoverColor_recipeLactose__13rr0b231", recipeGluten: "color_hoverColor_recipeGluten__13rr0b232", link: "color_hoverColor_link__13rr0b233", white: "color_hoverColor_white__13rr0b234", black: "color_hoverColor_black__13rr0b235", lightest: "color_hoverColor_lightest__13rr0b236", lighter: "color_hoverColor_lighter__13rr0b237", light: "color_hoverColor_light__13rr0b238", medium: "color_hoverColor_medium__13rr0b239", mediumDark: "color_hoverColor_mediumDark__13rr0b23a", dark: "color_hoverColor_dark__13rr0b23b", darker: "color_hoverColor_darker__13rr0b23c", darkest: "color_hoverColor_darkest__13rr0b23d", buttonGray: "color_hoverColor_buttonGray__13rr0b23e", disabledGray: "color_hoverColor_disabledGray__13rr0b23f", disabledDarkGray: "color_hoverColor_disabledDarkGray__13rr0b23g", placeholder: "color_hoverColor_placeholder__13rr0b23h", border: "color_hoverColor_border__13rr0b23i", boxShadow: "color_hoverColor_boxShadow__13rr0b23j", boxShadowActive: "color_hoverColor_boxShadowActive__13rr0b23k", alertRed: "color_hoverColor_alertRed__13rr0b23l", alertBlue: "color_hoverColor_alertBlue__13rr0b23m", alertGreen: "color_hoverColor_alertGreen__13rr0b23n", darkOverlay: "color_hoverColor_darkOverlay__13rr0b23o", transparent: "color_hoverColor_transparent__13rr0b23p", brandBlueHover: "color_hoverColor_brandBlueHover__13rr0b23q", brandYellowHover: "color_hoverColor_brandYellowHover__13rr0b23r", brandPrioHover: "color_hoverColor_brandPrioHover__13rr0b23s", brandBlueActive: "color_hoverColor_brandBlueActive__13rr0b23t", brandYellowActive: "color_hoverColor_brandYellowActive__13rr0b23u", brandPrioActive: "color_hoverColor_brandPrioActive__13rr0b23v", none: "color_hoverColor_none__13rr0b23w" };
|
|
7
|
+
|
|
8
|
+
export { backgroundColor, color, hoverBackgroundColor, hoverColor };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
declare const margin: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
2
|
+
declare const marginHorizontal: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
3
|
+
declare const marginVertical: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
4
|
+
declare const marginBottomDynamic: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
5
|
+
declare const padding: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
6
|
+
declare const paddingHorizontal: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
7
|
+
declare const paddingVertical: Record<"false" | "xs" | "xxxs" | "xxs" | "xxs2" | "xs2" | "sm" | "sm2" | "md" | "lg" | "xl" | "xxl", string>;
|
|
8
|
+
|
|
9
|
+
export { margin, marginBottomDynamic, marginHorizontal, marginVertical, padding, paddingHorizontal, paddingVertical };
|