holygrail5 1.0.19 → 1.0.21

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 (77) hide show
  1. package/README.md +88 -18
  2. package/config.json +205 -77
  3. package/dist/assets/fonts/suisse-intl-light.woff +0 -0
  4. package/dist/assets/fonts/suisse-intl-light.woff2 +0 -0
  5. package/dist/assets/fonts/suisse-intl-medium.woff +0 -0
  6. package/dist/assets/fonts/suisse-intl-medium.woff2 +0 -0
  7. package/dist/assets/fonts/suisse-intl-regular.woff +0 -0
  8. package/dist/assets/fonts/suisse-intl-regular.woff2 +0 -0
  9. package/dist/assets/fonts/suisse-intl-semibold.woff +0 -0
  10. package/dist/assets/fonts/suisse-intl-semibold.woff2 +0 -0
  11. package/dist/assets/fonts/suisse-works-bold.woff +0 -0
  12. package/dist/assets/fonts/suisse-works-bold.woff2 +0 -0
  13. package/dist/assets/fonts/suisse-works-medium.woff +0 -0
  14. package/dist/assets/fonts/suisse-works-medium.woff2 +0 -0
  15. package/dist/assets/fonts/suisse-works-regular.woff +0 -0
  16. package/dist/assets/fonts/suisse-works-regular.woff2 +0 -0
  17. package/dist/componentes.html +429 -0
  18. package/dist/developer-guide.md +7 -7
  19. package/dist/guide-styles.css +197 -25
  20. package/dist/index.html +807 -689
  21. package/dist/output.css +217 -114
  22. package/dist/skills.html +14 -8
  23. package/dist/themes/dutti-demo.html +713 -19
  24. package/dist/themes/dutti.css +67 -16
  25. package/dist/themes/limited-demo.html +1121 -0
  26. package/dist/themes/limited.css +2493 -0
  27. package/package.json +1 -1
  28. package/src/.data/.previous-values.json +151 -84
  29. package/src/assets/fonts/suisse-intl-light.woff +0 -0
  30. package/src/assets/fonts/suisse-intl-light.woff2 +0 -0
  31. package/src/assets/fonts/suisse-intl-medium.woff +0 -0
  32. package/src/assets/fonts/suisse-intl-medium.woff2 +0 -0
  33. package/src/assets/fonts/suisse-intl-regular.woff +0 -0
  34. package/src/assets/fonts/suisse-intl-regular.woff2 +0 -0
  35. package/src/assets/fonts/suisse-intl-semibold.woff +0 -0
  36. package/src/assets/fonts/suisse-intl-semibold.woff2 +0 -0
  37. package/src/assets/fonts/suisse-works-bold.woff +0 -0
  38. package/src/assets/fonts/suisse-works-bold.woff2 +0 -0
  39. package/src/assets/fonts/suisse-works-medium.woff +0 -0
  40. package/src/assets/fonts/suisse-works-medium.woff2 +0 -0
  41. package/src/assets/fonts/suisse-works-regular.woff +0 -0
  42. package/src/assets/fonts/suisse-works-regular.woff2 +0 -0
  43. package/src/build/asset-manager.js +94 -3
  44. package/src/build/build-orchestrator.js +74 -12
  45. package/src/build/components-generator.js +584 -0
  46. package/src/build/skills-generator.js +43 -5
  47. package/src/build/theme-config-loader.js +58 -0
  48. package/src/build/theme-transformer.js +109 -16
  49. package/src/build/theme-vars-table-generator.js +349 -0
  50. package/src/build/typo-table-generator.js +154 -0
  51. package/src/docs-generator/guide-styles.css +197 -24
  52. package/src/docs-generator/html-generator.js +92 -246
  53. package/src/docs-generator/sections/colors-section.js +109 -0
  54. package/src/docs-generator/value-tracker.js +154 -0
  55. package/src/generators/typo-generator.js +2 -1
  56. package/src/generators/utils.js +90 -1
  57. package/src/skills.html +1 -0
  58. package/src/watch-config.js +99 -32
  59. package/themes/{dutti → _base}/_buttons.css +2 -2
  60. package/themes/{dutti → _base}/_checkboxes.css +1 -1
  61. package/themes/{dutti → _base}/_forms.css +1 -1
  62. package/themes/{dutti → _base}/_inputs.css +55 -10
  63. package/themes/{dutti → _base}/_labels.css +1 -1
  64. package/themes/dutti/README.md +67 -21
  65. package/themes/dutti/_variables.css +7 -1
  66. package/themes/dutti/demo.html +18 -14
  67. package/themes/dutti/theme.css +22 -44
  68. package/themes/dutti/theme.json +86 -0
  69. package/themes/limited/_variables.css +123 -0
  70. package/themes/limited/demo.html +296 -0
  71. package/themes/limited/theme.css +32 -0
  72. package/themes/limited/theme.json +105 -0
  73. /package/themes/{dutti → _base}/_containers.css +0 -0
  74. /package/themes/{dutti → _base}/_radios.css +0 -0
  75. /package/themes/{dutti → _base}/_switches.css +0 -0
  76. /package/themes/{dutti → _base}/components/_icons.css +0 -0
  77. /package/themes/{dutti → _base}/objects/_grid.css +0 -0
@@ -0,0 +1,296 @@
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sistema de Theming Limited - Demo</title>
7
+ <link rel="stylesheet" href="../output.css">
8
+ <link rel="stylesheet" href="limited.css">
9
+ <style>
10
+
11
+ </style>
12
+ </head>
13
+ <body>
14
+
15
+ <div class="demo-container guide-main-content">
16
+ <h2 class="demo-title">Limited Theme</h2>
17
+
18
+
19
+ <div class="demo-section-2">
20
+ <h3>¿Dónde se customiza el tema?</h3>
21
+ <p class="mb-16">
22
+ Limited se construye en <strong>dos capas</strong> sobre HolyGrail5:
23
+ </p>
24
+
25
+ <div class="mb-16">
26
+ <strong>1. Tokens base</strong> — <code>config.json</code> define la paleta, espaciados y tipografía compartidos. <code>npm run build</code> regenera <code>dist/output.css</code>.
27
+ </div>
28
+ <div class="mb-16">
29
+ <strong>2. Overrides del tema</strong> — <code>themes/limited/theme.json</code> declara los metadatos y overrides (paleta dorada, Suisse Works serif). <code>themes/limited/_variables.css</code> los materializa como CSS custom properties y mapea las variables de componente (ej. <code>--btn-primary-bg: var(--hg-color-primary)</code>).
30
+ </div>
31
+
32
+ <p class="mb-24">
33
+ <code>themes/limited/theme.css</code> es el punto de entrada: importa todos los módulos del tema. Las variables tipográficas (<code>--hg-typo-font-family-*</code>) se redefinen para aplicar Suisse Works a titulares y texto corrido.
34
+ </p>
35
+ </div>
36
+
37
+ <!-- BLOQUE DEL TEMA (meta + variables) generado en build a partir de themes/<tema>/theme.json -->
38
+ <!-- HG_THEME_BLOCK -->
39
+
40
+ <!-- TIPOGRAFÍA (tabla generada en build a partir de config.json → typo) -->
41
+ <!-- HG_TYPO_TABLE -->
42
+
43
+ <!-- BOTONES -->
44
+ <section class="demo-section" id="buttons">
45
+ <h2 class="demo-title">Botones</h2>
46
+
47
+ <h3 class="demo-subtitle">Variantes</h3>
48
+ <div class="demo-grid">
49
+ <div class="demo-item">
50
+ <button class="btn btn-primary">Primary</button>
51
+ <div class="demo-code">.btn .btn-primary</div>
52
+ </div>
53
+ <div class="demo-item">
54
+ <button class="btn btn-secondary">Secondary</button>
55
+ <div class="demo-code">.btn .btn-secondary</div>
56
+ </div>
57
+ <div class="demo-item">
58
+ <button class="btn btn-tertiary">Tertiary</button>
59
+ <div class="demo-code">.btn .btn-tertiary</div>
60
+ </div>
61
+ <div class="demo-item">
62
+ <button class="btn btn-label-m">Label M</button>
63
+ <div class="demo-code">.btn .btn-label-m</div>
64
+ </div>
65
+ <div class="demo-item">
66
+ <button class="btn btn-link">Link</button>
67
+ <div class="demo-code">.btn .btn-link</div>
68
+ </div>
69
+ <div class="demo-item">
70
+ <button class="btn btn-badge">Badge</button>
71
+ <div class="demo-code">.btn .btn-badge</div>
72
+ </div>
73
+
74
+ <div class="demo-item">
75
+ <button class="btn btn-primary" disabled>Disabled</button>
76
+ <div class="demo-code">.btn[disabled]</div>
77
+ </div>
78
+ </div>
79
+
80
+ <h3 class="demo-subtitle">Tamaños</h3>
81
+ <div class="demo-grid">
82
+ <div class="demo-item">
83
+ <button class="btn btn-primary btn-sm">Small</button>
84
+ <div class="demo-code">.btn-sm</div>
85
+ </div>
86
+ <div class="demo-item">
87
+ <button class="btn btn-primary btn-md">Medium</button>
88
+ <div class="demo-code">.btn-md</div>
89
+ </div>
90
+ <div class="demo-item">
91
+ <button class="btn btn-primary btn-lg">Large</button>
92
+ <div class="demo-code">.btn-lg</div>
93
+ </div>
94
+ </div>
95
+
96
+ <h3 class="demo-subtitle">Ancho completo</h3>
97
+ <div class="demo-item">
98
+ <button class="btn btn-primary btn-md btn-full">Botón ancho completo</button>
99
+ <div class="demo-code">.btn-full</div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- INPUTS -->
104
+ <section class="demo-section" id="inputs">
105
+ <h2 class="demo-title">Inputs</h2>
106
+
107
+ <h3 class="demo-subtitle">Tipos básicos</h3>
108
+ <div class="demo-grid">
109
+ <div class="demo-item">
110
+ <div class="form-input-label-2">
111
+ <input type="text" id="input-text" class="input" placeholder="Escribe algo...">
112
+ <label for="input-text">Texto</label>
113
+ </div>
114
+ <div class="demo-code">.input</div>
115
+ </div>
116
+ <div class="demo-item">
117
+ <div class="form-input-label-2">
118
+ <input type="email" id="input-email" class="input" placeholder="email@ejemplo.com">
119
+ <label for="input-email">Email</label>
120
+ </div>
121
+ <div class="demo-code">type="email"</div>
122
+ </div>
123
+ <div class="demo-item">
124
+ <div class="form-input-label-2">
125
+ <input type="password" id="input-password" class="input" placeholder="••••••••">
126
+ <label for="input-password">Contraseña</label>
127
+ </div>
128
+ <div class="demo-code">type="password"</div>
129
+ </div>
130
+ <div class="demo-item">
131
+ <div class="form-input-label-2">
132
+ <input type="number" id="input-number" class="input" placeholder="123">
133
+ <label for="input-number">Número</label>
134
+ </div>
135
+ <div class="demo-code">type="number"</div>
136
+ </div>
137
+ </div>
138
+
139
+ <h3 class="demo-subtitle">Estados</h3>
140
+ <div class="demo-grid">
141
+ <div class="demo-item">
142
+ <div class="form-input-label-2">
143
+ <input type="text" id="input-error" class="input input-error" value="Valor inválido" placeholder=" ">
144
+ <label for="input-error">Error</label>
145
+ </div>
146
+ <span class="helper-text helper-text-error">Este campo tiene un error</span>
147
+ <div class="demo-code">.input-error</div>
148
+ </div>
149
+ <div class="demo-item">
150
+ <div class="form-input-label-2">
151
+ <input type="text" id="input-success" class="input input-success" value="Valor válido" placeholder=" ">
152
+ <label for="input-success">Success</label>
153
+ </div>
154
+ <span class="helper-text helper-text-success">Campo válido</span>
155
+ <div class="demo-code">.input-success</div>
156
+ </div>
157
+ <div class="demo-item">
158
+ <div class="form-input-label-2">
159
+ <input type="text" id="input-warning" class="input input-warning" value="Atención" placeholder=" ">
160
+ <label for="input-warning">Warning</label>
161
+ </div>
162
+ <span class="helper-text helper-text-warning">Revisa este campo</span>
163
+ <div class="demo-code">.input-warning</div>
164
+ </div>
165
+ <div class="demo-item">
166
+ <div class="form-input-label-2">
167
+ <input type="text" id="input-disabled" class="input" value="No editable" placeholder=" " disabled>
168
+ <label for="input-disabled">Disabled</label>
169
+ </div>
170
+ <div class="demo-code">input[disabled]</div>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+
176
+ <!-- CHECKBOXES -->
177
+ <section class="demo-section" id="checkboxes">
178
+ <h2 class="demo-title">Checkboxes</h2>
179
+
180
+ <div class="demo-grid">
181
+ <div class="demo-item">
182
+ <label class="checkbox">
183
+ <input type="checkbox">
184
+ <span class="checkbox-indicator">
185
+ <svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
186
+ <path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
187
+ </svg>
188
+ </span>
189
+ <span class="checkbox-label">Checkbox sin marcar</span>
190
+ </label>
191
+ <div class="demo-code">.checkbox</div>
192
+ </div>
193
+ <div class="demo-item">
194
+ <label class="checkbox">
195
+ <input type="checkbox" checked>
196
+ <span class="checkbox-indicator">
197
+ <svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
198
+ <path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
199
+ </svg>
200
+ </span>
201
+ <span class="checkbox-label">Checkbox marcado</span>
202
+ </label>
203
+ <div class="demo-code">input[checked]</div>
204
+ </div>
205
+ <div class="demo-item">
206
+ <label class="checkbox">
207
+ <input type="checkbox" disabled>
208
+ <span class="checkbox-indicator">
209
+ <svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false">
210
+ <path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/>
211
+ </svg>
212
+ </span>
213
+ <span class="checkbox-label">Checkbox disabled</span>
214
+ </label>
215
+ <div class="demo-code">input[disabled]</div>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- RADIOS -->
221
+ <section class="demo-section" id="radios">
222
+ <h2 class="demo-title">Radios</h2>
223
+
224
+ <div class="demo-grid">
225
+ <div class="demo-item">
226
+ <div class="checkbox-radio">
227
+ <input id="radio_1_lim" name="gender_lim" type="radio" value="F" />
228
+ <label for="radio_1_lim">
229
+ <i class="ico-radio"></i>
230
+ <span class="title-m">checkbox-radio</span>
231
+ </label>
232
+ </div>
233
+ <div class="checkbox-radio">
234
+ <input id="radio_2_lim" name="gender_lim" type="radio" value="M" />
235
+ <label for="radio_2_lim">
236
+ <i class="ico-radio"></i>
237
+ <span class="title-m">checkbox-radio</span>
238
+ </label>
239
+ </div>
240
+ <div class="demo-code">.checkbox-radio</div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- SWITCHES -->
246
+ <section class="demo-section" id="switches">
247
+ <h2 class="demo-title">Switches / Toggles</h2>
248
+
249
+ <h3 class="demo-subtitle">Checkbox-item-2</h3>
250
+ <div class="demo-grid">
251
+ <div class="demo-item">
252
+ <div class="checkbox-item-2">
253
+ <input id="checkbox18_lim" name="checkbox18_lim" type="checkbox" />
254
+ <label for="checkbox18_lim">
255
+ <div class="checkbox-circle"></div>
256
+ <span class="theta">checkbox-item-2</span>
257
+ </label>
258
+ </div>
259
+ <div class="demo-code">.checkbox-item-2</div>
260
+ </div>
261
+ <div class="demo-item">
262
+ <div class="checkbox-item-2">
263
+ <input id="checkbox19_lim" name="checkbox19_lim" type="checkbox" checked />
264
+ <label for="checkbox19_lim">
265
+ <div class="checkbox-circle"></div>
266
+ <span class="theta">checkbox-item-2 activado</span>
267
+ </label>
268
+ </div>
269
+ <div class="demo-code">input[checked]</div>
270
+ </div>
271
+ <div class="demo-item">
272
+ <div class="checkbox-item-2">
273
+ <input id="checkbox20_lim" name="checkbox20_lim" type="checkbox" disabled />
274
+ <label for="checkbox20_lim">
275
+ <div class="checkbox-circle"></div>
276
+ <span class="theta">checkbox-item-2 disabled</span>
277
+ </label>
278
+ </div>
279
+ <div class="demo-code">input[disabled]</div>
280
+ </div>
281
+ <div class="demo-item">
282
+ <div class="checkbox-item-2 is-error">
283
+ <input id="checkbox21_lim" name="checkbox21_lim" type="checkbox" />
284
+ <label for="checkbox21_lim">
285
+ <div class="checkbox-circle"></div>
286
+ <span class="theta">checkbox-item-2 error</span>
287
+ </label>
288
+ </div>
289
+ <div class="demo-code">.is-error</div>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ </div>
295
+ </body>
296
+ </html>
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Sistema de Theming Limited
3
+ * Basado en HolyGrail5 CSS Variables
4
+ *
5
+ * Paleta lujo cálido (dorados + crema) con tipografía 100% serif
6
+ * (Suisse Works en titulares y texto corrido).
7
+ *
8
+ * Los componentes (botones, inputs, checkboxes, radios, switches, labels,
9
+ * forms, containers, grid, icons) son compartidos desde `themes/_base/`.
10
+ * Para personalizar un componente SOLO en este tema, crea una copia
11
+ * local del fichero en `themes/limited/` y cambia su @import aquí para
12
+ * que apunte a esa versión en vez de a `../_base/`.
13
+ */
14
+
15
+ /* Variables del tema (colores, tipografía y mapeo de componentVars) */
16
+ @import url('_variables.css');
17
+
18
+ /* Componentes compartidos ─ themes/_base/ */
19
+ @import url('../_base/_buttons.css');
20
+ @import url('../_base/_inputs.css');
21
+ @import url('../_base/_labels.css');
22
+ @import url('../_base/_checkboxes.css');
23
+ @import url('../_base/_radios.css');
24
+ @import url('../_base/_switches.css');
25
+ @import url('../_base/_forms.css');
26
+
27
+ /* Objects (layout) compartidos ─ themes/_base/ */
28
+ @import url('../_base/_containers.css');
29
+ @import url('../_base/objects/_grid.css');
30
+
31
+ /* Components (icons) compartidos ─ themes/_base/ */
32
+ @import url('../_base/components/_icons.css');
@@ -0,0 +1,105 @@
1
+ {
2
+ "meta": {
3
+ "name": "limited",
4
+ "displayName": "Limited",
5
+ "description": "Tema de lujo cálido con paleta dorada, bronces y crema, y tipografía 100% serif: Suisse Works tanto en titulares como en texto corrido. Redefine los colores semánticos sobre la base HolyGrail5, manteniendo los componentVars mapeados a los tokens --hg-color-* para heredar automáticamente la paleta del tema.",
6
+ "version": "1.0.0",
7
+ "author": "HolyGrail CSS"
8
+ },
9
+ "tokenOverrides": {
10
+ "color": {
11
+ "primary": "#1D1D1D",
12
+ "feel": "#A38A6B",
13
+ "feel-dark": "#7A6346",
14
+ "error": "#9B2A1E",
15
+ "success": "#7A8D5F",
16
+ "warning": "#D4A84B",
17
+ "info": "#5B7FA1",
18
+ "special": "#B99D6B",
19
+ "bg-light": "#F4F2ED",
20
+ "bg-cream": "#F4F2ED"
21
+ },
22
+ "spacing": {}
23
+ },
24
+ "typography": {
25
+ "fontFamilyMap": {
26
+ "primary-light": "\"suisse-works-regular\", Georgia, \"Times New Roman\", serif",
27
+ "primary-regular": "\"suisse-works-regular\", Georgia, \"Times New Roman\", serif",
28
+ "primary-bold": "\"suisse-works-bold\", Georgia, \"Times New Roman\", serif",
29
+ "secondary": "\"suisse-works-medium\", Georgia, \"Times New Roman\", serif"
30
+ }
31
+ },
32
+ "componentVars": {
33
+ "btn": {
34
+ "primary-bg": "var(--hg-color-primary)",
35
+ "primary-color": "var(--hg-color-white)",
36
+ "primary-hover-bg": "var(--hg-color-feel-dark)",
37
+
38
+ "secondary-bg": "var(--hg-color-feel)",
39
+ "secondary-color": "var(--hg-color-white)",
40
+ "secondary-hover-bg": "var(--hg-color-feel-dark)",
41
+
42
+ "outline-border": "var(--hg-color-feel-dark)",
43
+ "outline-color": "var(--hg-color-feel-dark)",
44
+ "outline-hover-bg": "var(--hg-color-feel-dark)",
45
+ "outline-hover-color": "var(--hg-color-white)",
46
+
47
+ "ghost-color": "var(--hg-color-primary)",
48
+ "ghost-hover-bg": "var(--hg-color-bg-cream)",
49
+
50
+ "feel-bg": "var(--hg-color-feel)",
51
+ "feel-color": "var(--hg-color-white)",
52
+ "feel-hover-bg": "var(--hg-color-feel-dark)",
53
+
54
+ "padding-x-sm": "var(--hg-spacing-12)",
55
+ "padding-y-sm": "var(--hg-spacing-8)",
56
+ "padding-x-md": "var(--hg-spacing-16)",
57
+ "padding-y-md": "var(--hg-spacing-12)",
58
+ "padding-x-lg": "var(--hg-spacing-24)",
59
+ "padding-y-lg": "var(--hg-spacing-16)"
60
+ },
61
+ "input": {
62
+ "border": "var(--hg-color-middle-grey)",
63
+ "border-focus": "var(--hg-color-feel-dark)",
64
+ "bg": "var(--hg-color-white)",
65
+ "color": "var(--hg-color-primary)",
66
+ "placeholder": "var(--hg-color-middle-grey)",
67
+ "error-border": "var(--hg-color-error)",
68
+ "success-border": "var(--hg-color-success)",
69
+ "warning-border": "var(--hg-color-warning)",
70
+ "padding-x": "var(--hg-spacing-16)",
71
+ "padding-y": "var(--hg-spacing-12)",
72
+ "gap": "var(--hg-spacing-8)"
73
+ },
74
+ "label": {
75
+ "color": "var(--hg-color-primary)",
76
+ "required": "var(--hg-color-error)"
77
+ },
78
+ "checkbox": {
79
+ "bg": "var(--hg-color-white)",
80
+ "border": "var(--hg-color-middle-grey)",
81
+ "checked-bg": "var(--hg-color-feel-dark)",
82
+ "checked-border": "var(--hg-color-feel-dark)"
83
+ },
84
+ "radio": {
85
+ "bg": "var(--hg-color-white)",
86
+ "border": "var(--hg-color-middle-grey)",
87
+ "checked-bg": "var(--hg-color-feel-dark)",
88
+ "checked-border": "var(--hg-color-feel-dark)"
89
+ },
90
+ "switch": {
91
+ "bg": "var(--hg-color-middle-grey)",
92
+ "active-bg": "var(--hg-color-feel)",
93
+ "thumb": "var(--hg-color-white)"
94
+ },
95
+ "form-group": {
96
+ "gap": "var(--hg-spacing-16)"
97
+ }
98
+ },
99
+ "design": {
100
+ "border-radius": "0",
101
+ "border-width": "1px",
102
+ "border-style": "solid",
103
+ "transition": "all 0.3s ease"
104
+ }
105
+ }
File without changes
File without changes
File without changes
File without changes
File without changes