@terrahq/wysiwyg 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +661 -746
  2. package/content/wordpress-content.html +193 -152
  3. package/dist/content/wordpress-content.html +185 -154
  4. package/dist/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
  5. package/package.json +1 -1
  6. package/public/wordpress-starter/assets/icons/ArrowRight.svg +3 -0
  7. package/readme/blocks/Button.md +33 -13
  8. package/readme/blocks/Columns.md +28 -13
  9. package/readme/blocks/Links.md +2 -0
  10. package/readme/blocks/Quote.md +12 -0
  11. package/readme/blocks/Separator.md +25 -0
  12. package/readme/blocks/Table.md +96 -103
  13. package/readme/blocks/Video.md +80 -11
  14. package/readme/properties/Background.md +74 -0
  15. package/readme/properties/Font.md +15 -0
  16. package/readme/properties/Media.md +33 -0
  17. package/src/assets/icons/ArrowRight.svg +3 -0
  18. package/src/scss/_paths.scss +2 -1
  19. package/src/scss/framework/_var/_vars.scss +1 -1
  20. package/src/scss/framework/components/btn/_c--btn-a.scss +1 -0
  21. package/src/scss/framework/components/content/_c--content-a.scss +405 -455
  22. package/src/scss/framework/components/link/_c--link-a.scss +38 -7
  23. package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss +25 -6
  24. package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss +11 -0
  25. package/src/scss/global-content/_global-mixins/blocks/_content-block-quote.scss +23 -6
  26. package/src/scss/global-content/_global-mixins/blocks/_content-block-separator.scss +49 -3
  27. package/src/scss/global-content/_global-mixins/blocks/_content-block-table.scss +79 -7
  28. package/src/scss/global-content/_global-mixins/blocks/_content-links.scss +9 -2
  29. package/src/scss/global-content/_global-mixins/properties/_background.scss +50 -0
  30. package/src/scss/global-content/_global-mixins/properties/_font.scss +18 -6
  31. package/src/scss/global-content/_global-mixins/properties/_properties.scss +1 -0
  32. package/src/scss/sanity.scss +17 -1
  33. package/src/scss/wp.scss +441 -256
package/src/scss/wp.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  @use "sass:map";
2
+ @use "sass:color";
2
3
  @use "@scss/framework/_var/_vars.scss" as *;
3
4
  @use "./framework/components/btn/c--btn-a.scss";
4
5
  @use "./framework/components/link/c--link-a.scss";
@@ -8,260 +9,444 @@
8
9
 
9
10
  @use "./wordpress/index.scss" as *;
10
11
 
12
+ // =============================================================================
13
+ // WYSIWYG — Referencia completa de opciones (orden alfabético)
14
+ // -----------------------------------------------------------------------------
15
+ // Este archivo documenta TODAS las opciones que acepta `make-content-modifier`.
16
+ // - Grupos y claves están ordenados alfabéticamente.
17
+ // - Las líneas SIN comentar son la configuración activa de este proyecto.
18
+ // - Las líneas comentadas (//) muestran las posibilidades disponibles con un
19
+ // valor de ejemplo; descoméntalas y ajústalas para activarlas.
20
+ //
21
+ // Sub-mapas reutilizables (mismas claves en todos los sitios donde aparecen):
22
+ //
23
+ // FONT -> bold-color, bold-font-weight, className, color, font-family,
24
+ // font-size, font-style, font-weight, letter-spacing, line-height,
25
+ // margin-bottom, margin-bottom-before-lists, max-lines, padding-top,
26
+ // text-align, text-decoration, text-decoration-color,
27
+ // text-underline-position
28
+ //
29
+ // BORDER -> border-color, border-radius, border-style, border-width
30
+ //
31
+ // MEDIA -> border-color, border-radius, border-style, border-width, caption
32
+ // (FONT), margin-bottom, max-height, max-width, min-height,
33
+ // min-width, object-fit, object-position,
34
+ // zoom-button-background-color, zoom-button-border-radius,
35
+ // zoom-button-bottom, zoom-button-right
36
+ // =============================================================================
37
+
11
38
  .c--content-a {
12
- &--wp {
13
- @include make-content();
14
- @include make-content-modifier(
15
- $btn-options: (
16
- "className": c--btn-a c--btn-a--second,
17
- "margin-bottom": $measure * 3,
18
- ),
19
- $columns-options: (
20
- "breakpoint": $tablets,
21
- "margin-bottom": $measure * 3,
22
- ),
23
- $footnote-options: (
24
- "color": #638c1d,
25
- "font-family": arial,
26
- "font-size": 1rem,
27
- "font-style": italic,
28
- "font-weight": 400,
29
- "letter-spacing": 1px,
30
- "line-height": 1.5,
31
- "max-lines": 3,
32
- "text-decoration": none,
33
- "text-decoration-color": #000000,
34
- "text-underline-position": under,
35
- "className": f--font-e,
36
- "margin-bottom": $measure * 3,
37
- "padding-top": $measure,
38
- "text-align": left,
39
- ),
40
- $highlighted-options: (
41
- "color": red,
42
- "font-family": arial,
43
- "font-size": 2rem,
44
- "font-style": italic,
45
- "font-weight": 400,
46
- "letter-spacing": 1px,
47
- "line-height": 1.5,
48
- "max-lines": 3,
49
- "text-decoration": none,
50
- "text-decoration-color": #000000,
51
- "text-underline-position": under,
52
- "className": f--font-e,
53
- "margin-bottom": $measure * 3,
54
- "padding-top": $measure,
55
- "text-align": center,
56
- ),
57
- $image-options: (
58
- // "border-color": red,
59
- "border-radius": 20px,
60
- // "border-style": solid,
61
- // "border-width": 2px,
62
- "object-fit": cover,
63
- "max-height": 700px,
64
- "min-height": 0,
65
- "object-position": center,
66
- "max-width": 100%,
67
- "min-width": 30px,
68
- "margin-bottom": $measure * 7,
69
- "caption": (
70
- // "color": red,
71
- "font-family": arial,
72
- // "font-size": 2rem,
73
- "font-style": italic,
74
- "font-weight": 400,
75
- "letter-spacing": 1px,
76
- "line-height": 1.5,
77
- "max-lines": 3,
78
- "text-decoration": none,
79
- "text-decoration-color": #000000,
80
- "text-underline-position": under,
81
- "className": f--font-f,
82
- "margin-bottom": $measure * 3,
83
- "padding-top": $measure,
84
- "text-align": right
85
- ),
86
- ),
87
- $quote-options: (
88
- "padding": $measure * 5 0,
89
- "margin-top": $measure,
90
- "margin-bottom": $measure * 5,
91
- "border": (
92
- "border-color": red,
93
- "border-radius": 0,
94
- "border-style": solid,
95
- "border-width": 2px 0,
96
- ),
97
- "paragraph": (
98
- // "color": red,
99
- "font-family": arial,
100
- // "font-size": 2rem,
101
- "font-style": italic,
102
- "font-weight": 400,
103
- "letter-spacing": 1px,
104
- "line-height": 1.5,
105
- // "max-lines": 3,
106
- "text-decoration": none,
107
- "text-decoration-color": #000000,
108
- "text-underline-position": under,
109
- "className": f--font-d,
110
- // "margin-bottom": $measure*3,
111
- // "padding-top": $measure,
112
- // "text-align": right,,,,
113
- ),
114
- "cite": (
115
- // "color": red,
116
- "font-family": arial,
117
- // "font-size": 2rem,
118
- "font-style": italic,
119
- "font-weight": 400,
120
- "letter-spacing": 1px,
121
- "line-height": 1.5,
122
- "max-lines": 3,
123
- "text-decoration": none,
124
- "text-decoration-color": #000000,
125
- "text-underline-position": under,
126
- "className": f--font-f,
127
- "margin-bottom": $measure * 3,
128
- "padding-top": $measure * 2,
129
- "text-align": right,
130
- ),
131
- ),
132
- $separator-options: (
133
- "margin": $measure * 5 auto,
134
- "width": 60%,
135
- "color": orange,
136
- "height": 2px,
137
- ),
138
- $headings-options: (
139
- "h2": (
140
- "color": orange,
141
- "padding-top": $measure * 2,
142
- ),
143
- "h3": (
144
- "color": blue,
145
- ),
146
- ),
147
- $link-options: (
148
- "className": c--link-a,
149
- ),
150
- $paragraphs-options: (
151
- "className": f--font-e f--color-f,
152
- "margin-bottom": $measure * 4,
153
- "margin-bottom-before-lists": $measure * 2,
154
- "bold-font-weight": 600,
155
- ),
156
- $lists-options: (
157
- "number-font": (
158
- "font-weight": 600,
159
- ),
160
- "first-number-width": 14px,
161
- "first-level-number-color": map.get($color-options, d),
162
- "first-level-artwork-width": 8px,
163
- "first-level-artwork-top": 8px,
164
- "first-level-artwork-image": null,
165
- "first-level-artwork-background": map.get($color-options, d),
166
- "first-level-artwork-border-radius": 50%,
167
- "first-level-artwork-border-width": null,
168
- "first-level-artwork-border-color": null,
169
- "second-level-number-color": map.get($color-options, g),
170
- "second-level-artwork-width": null,
171
- "second-level-artwork-top": null,
172
- "second-level-artwork-image": null,
173
- "second-level-artwork-background": null,
174
- "second-level-artwork-border-radius": null,
175
- "second-level-artwork-border-width": null,
176
- "second-level-artwork-border-color": null,
177
- "third-level-number-color": map.get($color-options, f),
178
- "third-level-artwork-width": null,
179
- "third-level-artwork-top": null,
180
- "third-level-artwork-image": null,
181
- "third-level-artwork-background": null,
182
- "third-level-artwork-border-radius": null,
183
- "third-level-artwork-border-width": null,
184
- "third-level-artwork-border-color": null,
185
- "margin-bottom": $measure * 4,
186
- "nested-list-spacing": $measure,
187
- "font-styles": (
188
- "className": f--font-e f--color-e,
189
- "margin-bottom": $measure,
190
- ),
191
- ),
192
- $table-options: (
193
- "header-font-styles": (
194
- // "color": red,
195
- // "font-family": arial,
196
- // "font-size": 2rem,
197
- // "font-style": italic,
198
- "font-weight": 600,
199
- // "letter-spacing": 1px,
200
- // "line-height": 1.5,
201
- // "max-lines": 3,
202
- // "text-decoration": none,
203
- // "text-decoration-color": #000000,
204
- // "text-underline-position": under,
205
- "className": f--font-e,
206
- // "margin-bottom": $measure*3,
207
- // "padding-top": $measure,
208
- // "text-align": right,,,,
209
- ),
210
- "body-font-styles": (
211
- // "color": red,
212
- // "font-family": arial,
213
- // "font-size": 2rem,
214
- // "font-style": italic,
215
- // "font-weight": 600,
216
- // "letter-spacing": 1px,
217
- // "line-height": 1.5,
218
- // "max-lines": 3,
219
- // "text-decoration": none,
220
- // "text-decoration-color": #000000,
221
- // "text-underline-position": under,
222
- "className": f--font-e,
223
- // "margin-bottom": $measure*3,
224
- // "padding-top": $measure,
225
- // "text-align": right,,,,
226
- ),
227
- "caption": (
228
- // "color": red,
229
- // "font-family": arial,
230
- // "font-size": 2rem,
231
- // "font-style": italic,
232
- // "font-weight": 600,
233
- // "letter-spacing": 1px,
234
- // "line-height": 1.5,
235
- // "max-lines": 3,
236
- // "text-decoration": none,
237
- // "text-decoration-color": #000000,
238
- // "text-underline-position": under,
239
- "className": f--font-f f--color-e,
240
- // "margin-bottom": $measure*3,
241
- // "padding-top": $measure,
242
- "text-align": right,
243
- ),
244
- "margin-bottom": $measure * 4,
245
- "header-cells-padding": $measure * 2,
246
- "body-cells-padding": $measure $measure * 2,
247
- "header-border": (
248
- "border-width": 1px,
249
- "border-style": solid,
250
- "border-color": map.get($color-options, a),
251
- ),
252
- "header-background": rgba(map.get($color-options, a), 0.3),
253
- "body-border": (
254
- "border-width": 1px,
255
- "border-style": solid,
256
- "border-color": map.get($color-options, a),
257
- ),
258
- "body-background": rgba(map.get($color-options, e), 0.3),
259
- "odd-rows-background": rgba(map.get($color-options, e), 0.5),
260
- "odd-rows-text-color": null,
261
- ),
262
- $utilities-options: (
263
- "media-text-aligned-margin-x": 32px,
264
- )
265
- );
266
- }
267
- }
39
+ &--wp {
40
+ @include make-content();
41
+ @include make-content-modifier(
42
+ $btn-options: (
43
+ "className": c--btn-a c--btn-a--second,
44
+ "even-className": c--btn-a,
45
+ "margin-bottom": $measure * 3,
46
+ "column-gap": $measure * 2,
47
+ "row-gap": $measure,
48
+ ),
49
+ $columns-options: (
50
+ "breakpoint": $tablets,
51
+ "column-gap": $measure * 4,
52
+ "margin-bottom": $measure * 3,
53
+ "row-gap": $measure * 4,
54
+ ),
55
+ $footnote-options: (
56
+ "className": f--font-f,
57
+ "color": map.get($color-options, h),
58
+ // "bold-color": red,
59
+ // "bold-font-weight": 600,
60
+ // "font-weight": 300,
61
+ // "font-style": italic,
62
+ "margin-bottom": $measure * 3,
63
+ "margin-bottom-before-lists": $measure * 2,
64
+ "max-lines": 1,
65
+ "padding-top": $measure*9,
66
+ "text-align": left,
67
+ "text-decoration": underline,
68
+ "text-decoration-color": map.get($color-options, g),
69
+ "text-underline-position": above,
70
+ ),
71
+ $headings-options: (
72
+ "h1": (
73
+ // "bold-color": red,
74
+ // "bold-font-weight": 600,
75
+ // "className": f--font-a,
76
+ // "color": orange,
77
+ // "font-style": italic,
78
+ // "font-weight": 400,
79
+ // "margin-bottom": $measure * 3,
80
+ // "margin-bottom-before-lists": $measure * 2,
81
+ // "padding-top": $measure * 2,
82
+ // "text-align": left,
83
+ // "text-decoration": none,
84
+ // "text-decoration-color": #000000,
85
+ // "text-underline-position": under,
86
+ ),
87
+ "h2": (
88
+ "bold-color": map.get($color-options, e),
89
+ "bold-font-weight": 600,
90
+ "className": f--font-a,
91
+ "color": map.get($color-options, h),
92
+ // "font-style": italic,
93
+ // "font-weight": 400,
94
+ "margin-bottom": $measure * 3,
95
+ "margin-bottom-before-lists": $measure * 2,
96
+ "padding-top": $measure * 2,
97
+ // "text-align": left,
98
+ // "text-decoration": none,
99
+ // "text-decoration-color": #000000,
100
+ // "text-underline-position": under,
101
+ ),
102
+ "h3": (
103
+ "bold-color": map.get($color-options, e),
104
+ "bold-font-weight": 600,
105
+ "className": f--font-b,
106
+ "color": map.get($color-options, h),
107
+ // "font-style": italic,
108
+ // "font-weight": 400,
109
+ "margin-bottom": $measure * 3,
110
+ "margin-bottom-before-lists": $measure * 2,
111
+ "padding-top": $measure * 2,
112
+ // "text-align": left,
113
+ // "text-decoration": none,
114
+ // "text-decoration-color": #000000,
115
+ // "text-underline-position": under,
116
+ ),
117
+ "h4": (
118
+ "bold-color": map.get($color-options, f),
119
+ "bold-font-weight": 600,
120
+ "className": f--font-c,
121
+ "color": map.get($color-options, i),
122
+ // "font-style": italic,
123
+ // "font-weight": 400,
124
+ "margin-bottom": $measure * 3,
125
+ "margin-bottom-before-lists": $measure * 2,
126
+ "padding-top": $measure * 2,
127
+ // "text-align": left,
128
+ // "text-decoration": none,
129
+ // "text-decoration-color": #000000,
130
+ // "text-underline-position": under,
131
+ ),
132
+ "h5": (
133
+ "bold-color": map.get($color-options, f),
134
+ "bold-font-weight": 600,
135
+ "className": f--font-d,
136
+ "color": map.get($color-options, i),
137
+ // "font-style": italic,
138
+ // "font-weight": 400,
139
+ "margin-bottom": $measure * 3,
140
+ "margin-bottom-before-lists": $measure * 2,
141
+ // "max-lines": 3,
142
+ "padding-top": $measure * 2,
143
+ // "text-align": left,
144
+ // "text-decoration": none,
145
+ // "text-decoration-color": #000000,
146
+ // "text-underline-position": under,
147
+ ),
148
+ "h6": (
149
+ "bold-color": map.get($color-options, h),
150
+ "bold-font-weight": 600,
151
+ "className": f--font-e,
152
+ "color": map.get($color-options, g),
153
+ // "font-style": italic,
154
+ // "font-weight": 400,
155
+ "margin-bottom": $measure * 3,
156
+ "margin-bottom-before-lists": $measure * 2,
157
+ // "max-lines": 3,
158
+ "padding-top": $measure * 2,
159
+ // "text-align": left,
160
+ // "text-decoration": none,
161
+ // "text-decoration-color": #000000,
162
+ // "text-underline-position": under,
163
+ ),
164
+ ),
165
+ $highlighted-options: (
166
+ "bold-color": map.get($color-options, i),
167
+ // "bold-font-weight": 600,
168
+ "className": f--font-d f--color-a,
169
+ // "color": red,
170
+ // "font-style": italic,
171
+ // "font-weight": 400,
172
+ "margin-bottom": $measure * 3,
173
+ "margin-bottom-before-lists": $measure * 2,
174
+ // "padding-top": $measure,
175
+ // "text-align": center,
176
+ // "text-decoration": none,
177
+ // "text-decoration-color": #000000,
178
+ // "text-underline-position": under,
179
+ ),
180
+ $image-options: (
181
+ // "border-color": red,
182
+ "border-radius": $measure*2,
183
+ // "border-style": solid,
184
+ // "border-width": 2px,
185
+ "caption": (
186
+ "bold-color": map.get($color-options, f),
187
+ // "bold-font-weight": 600,
188
+ "className": f--font-f,
189
+ // "color": red,
190
+ // "font-style": italic,
191
+ // "font-weight": 400,
192
+ // "margin-bottom": $measure * 3,
193
+ // "margin-bottom-before-lists": $measure * 2,
194
+ "padding-top": $measure*2,
195
+ "text-align": right,
196
+ // "text-decoration": none,
197
+ // "text-decoration-color": #000000,
198
+ // "text-underline-position": under,
199
+ ),
200
+ "margin-bottom": $measure * 3,
201
+ // "max-height": 700px,
202
+ // "max-width": 100%,
203
+ // "min-height": 0,
204
+ // "min-width": 30px,
205
+ // "object-fit": cover,
206
+ // "object-position": center,
207
+ "zoom-button-background-color": map.get($color-options, f),
208
+ "zoom-button-border-radius": 4px,
209
+ "zoom-button-bottom": 16px,
210
+ "zoom-button-right": 16px,
211
+ ),
212
+ $link-options: (
213
+ "className": c--link-a,
214
+ ),
215
+ $lists-options: (
216
+ "first-level-artwork-background": map.get($color-options, i),
217
+ "first-level-artwork-border-color": map.get($color-options, f),
218
+ "first-level-artwork-border-radius": 50%,
219
+ "first-level-artwork-border-width": 2px,
220
+ // "first-level-artwork-image": null,
221
+ "first-level-artwork-top": 6px,
222
+ "first-level-artwork-width": 10px,
223
+ "first-level-number-color": map.get($color-options, f),
224
+ "first-number-width": 14px,
225
+ "font-styles": (
226
+ "bold-color": map.get($color-options, f),
227
+ // "bold-font-weight": 600,
228
+ "className": f--font-e f--color-a,
229
+ // "color": red,
230
+ // "font-style": italic,
231
+ // "font-weight": 400,
232
+ "margin-bottom": $measure,
233
+ "margin-bottom-before-lists": $measure * 2,
234
+ // "padding-top": $measure,
235
+ // "text-align": left,
236
+ // "text-decoration": none,
237
+ // "text-decoration-color": #000000,
238
+ // "text-underline-position": under,
239
+ ),
240
+ "margin-bottom": $measure * 3,
241
+ "nested-list-spacing": $measure,
242
+ "number-font": (
243
+ // "bold-color": red,
244
+ // "bold-font-weight": 600,
245
+ // "className": f--font-e,
246
+ // "color": red,
247
+ // "font-style": italic,
248
+ "font-weight": 600,
249
+ // "margin-bottom": $measure,
250
+ // "margin-bottom-before-lists": $measure * 2,
251
+ // "padding-top": $measure,
252
+ // "text-align": left,
253
+ // "text-decoration": none,
254
+ // "text-decoration-color": #000000,
255
+ // "text-underline-position": under,
256
+ ),
257
+ // "second-level-artwork-background": null,
258
+ "second-level-artwork-border-color": transparent,
259
+ // "second-level-artwork-border-radius": null,
260
+ // "second-level-artwork-border-width": null,
261
+ // "second-level-artwork-image": null,
262
+ // "second-level-artwork-top": null,
263
+ // "second-level-artwork-width": null,
264
+ // "second-level-number-color": map.get($color-options, g),
265
+ "third-level-artwork-background": map.get($color-options, f),
266
+ // "third-level-artwork-border-color": null,
267
+ // "third-level-artwork-border-radius": null,
268
+ // "third-level-artwork-border-width": 2px,
269
+ // "third-level-artwork-image": null,
270
+ "third-level-artwork-top": 8px,
271
+ "third-level-artwork-width": 8px,
272
+ // "third-level-number-color": map.get($color-options, f),
273
+ ),
274
+ $paragraphs-options: (
275
+ "bold-color": map.get($color-options, e),
276
+ // "bold-font-weight": 600,
277
+ "className": f--font-e f--color-a,
278
+ // "color": red,
279
+ // "font-style": italic,
280
+ // "font-weight": 400,
281
+ "margin-bottom": $measure * 3,
282
+ "margin-bottom-before-lists": $measure * 2,
283
+ // "padding-top": $measure,
284
+ // "text-align": left,
285
+ // "text-decoration": none,
286
+ // "text-decoration-color": #000000,
287
+ // "text-underline-position": under,
288
+ ),
289
+ $quote-options: (
290
+ "background": (
291
+ "background-color": color.adjust(map.get($color-options, e), $lightness: 50%),
292
+ "background-image": url("http://placeholder.terrahq.com/img-16by9.webp"),
293
+ "background-size": cover,
294
+ "background-position": center,
295
+ "background-repeat": no-repeat,
296
+ "overlay": linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
297
+ ),
298
+ "border": (
299
+ "border-color": color.adjust(map.get($color-options, e), $lightness: 45%),
300
+ "border-radius": $measure*2,
301
+ "border-style": solid,
302
+ "border-width": 2px 0,
303
+ ),
304
+ "cite": (
305
+ // "bold-color": red,
306
+ // "bold-font-weight": 600,
307
+ "className": f--font-f,
308
+ "color": map.get($color-options, b),
309
+ // "font-weight": 400,
310
+ // "font-style": italic,
311
+ // "margin-bottom": $measure * 3,
312
+ // "padding-top": $measure * 2,
313
+ // "text-align": right,
314
+ // "text-decoration": none,
315
+ // "text-decoration-color": #000000,
316
+ // "text-underline-position": under,
317
+ ),
318
+ "margin-bottom": $measure * 5,
319
+ "margin-top": $measure,
320
+ "padding": $measure * 5,
321
+ "paragraph": (
322
+ // "bold-color": red,
323
+ // "bold-font-weight": 600,
324
+ "className": f--font-d,
325
+ "color": map.get($color-options, b),
326
+ // "font-style": italic,
327
+ // "font-weight": 400,
328
+ "margin-bottom": $measure * 3,
329
+ // "padding-top": $measure,
330
+ // "text-align": right,
331
+ // "text-decoration": none,
332
+ // "text-decoration-color": #000000,
333
+ // "text-underline-position": under,
334
+ ),
335
+ ),
336
+ $separator-options: (
337
+ "color": color.adjust(map.get($color-options, e), $lightness: -10%),
338
+ "height": 7px,
339
+ "margin": $measure * 10 0,
340
+ "width": 100%,
341
+ "dots-color": map.get($color-options, h),
342
+ "dots-size": 2rem,
343
+ "dots-spacing": 1rem,
344
+ ),
345
+ $table-options: (
346
+ "body-background": rgba(map.get($color-options, e), 0.3),
347
+ "body-border-right": 1px solid map.get($color-options, e),
348
+ "body-border-bottom": 1px solid map.get($color-options, i),
349
+ "table-border": 3px solid map.get($color-options, e),
350
+ "table-border-radius": $measure * 2,
351
+ "scroll-breakpoint": 700px,
352
+ "body-cells-padding": $measure $measure * 2,
353
+ "odd-rows-background": rgba(map.get($color-options, e), 0.5),
354
+ "odd-rows-text-color": map.get($color-options, i),
355
+ "body-font-styles": (
356
+ "bold-color": map.get($color-options, h),
357
+ // "bold-font-weight": 600,
358
+ "className": f--font-d,
359
+ // "color": red,
360
+ // "font-style": italic,
361
+ // "font-weight": 600,
362
+ // "margin-bottom": $measure * 3,
363
+ // "margin-bottom-before-lists": $measure * 2,
364
+ // "padding-top": $measure,
365
+ // "text-align": right,
366
+ // "text-decoration": none,
367
+ // "text-decoration-color": #000000,
368
+ // "text-underline-position": under,
369
+ ),
370
+ "caption": (
371
+ "bold-color": map.get($color-options, h),
372
+ // "bold-font-weight": 600,
373
+ "className": f--font-f,
374
+ "color": map.get($color-options, a),
375
+ // "font-style": italic,
376
+ // "font-weight": 600,
377
+ "margin-bottom": $measure,
378
+ // "margin-bottom-before-lists": $measure * 2,
379
+ "padding-top": $measure,
380
+ "text-align": right,
381
+ // "text-decoration": none,
382
+ // "text-decoration-color": #000000,
383
+ // "text-underline-position": under,
384
+ ),
385
+ "header-background": rgba(map.get($color-options, e), 0.1),
386
+ "header-border-right": 1px solid map.get($color-options, e),
387
+ "header-border-bottom": 2px solid map.get($color-options, e),
388
+ "header-cells-padding": $measure * 2,
389
+ "header-font-styles": (
390
+ // "bold-color": red,
391
+ // "bold-font-weight": 600,
392
+ "className": f--font-d,
393
+ "color": map.get($color-options, e),
394
+ // "font-style": italic,
395
+ "font-weight": 600,
396
+ // "margin-bottom": $measure * 3,
397
+ // "margin-bottom-before-lists": $measure * 2,
398
+ // "max-lines": 3,
399
+ // "padding-top": $measure,
400
+ "text-align": center,
401
+ // "text-decoration": none,
402
+ // "text-decoration-color": #000000,
403
+ // "text-underline-position": under,
404
+ ),
405
+ "margin-bottom": $measure * 4,
406
+
407
+ ),
408
+ $utilities-options: (
409
+ "media-text-aligned-margin-x": 32px,
410
+ ),
411
+ $video-options: (
412
+ "border-color": map.get($color-options, e),
413
+ "border-radius": $measure*2,
414
+ "border-style": solid,
415
+ "border-width": 4px,
416
+ "caption": (
417
+ "bold-color": map.get($color-options, e),
418
+ // "bold-font-weight": 600,
419
+ "className": f--font-f,
420
+ // "color": red,
421
+ // "font-style": italic,
422
+ // "font-weight": 400,
423
+ // "margin-bottom": $measure * 3,
424
+ // "margin-bottom-before-lists": $measure * 2,
425
+ // "max-lines": 3,
426
+ "padding-top": $measure*1.5,
427
+ "text-align": right,
428
+ // "text-decoration": none,
429
+ // "text-decoration-color": #000000,
430
+ // "text-underline-position": under,
431
+ ),
432
+ "margin-bottom": $measure * 3,
433
+ // "max-height": 700px,
434
+ // "max-width": 100%,
435
+ // "min-height": 0,
436
+ // "min-width": 30px,
437
+ // "object-fit": cover,
438
+ // "object-position": center,
439
+ ),
440
+ $custom-options: (
441
+ // ".mi-selector": (
442
+ // "class": f--font-e f--color-f,
443
+ // "color": red,
444
+ // ),
445
+ // "parent": (
446
+ // "background": map.get($color-options, i),
447
+ // "padding": $measure * 2,
448
+ // ),
449
+ ),
450
+ );
451
+ }
452
+ }