@natachah/vanilla-frontend 0.0.5 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/.gitlab-ci.yml +7 -0
  2. package/docs/pages/{components → base}/media.html +2 -2
  3. package/docs/pages/{layout → base}/reset.html +2 -2
  4. package/docs/pages/{layout → base}/typography.html +2 -2
  5. package/docs/pages/components/badge.html +2 -2
  6. package/docs/pages/components/breadcrumb.html +1 -1
  7. package/docs/pages/components/button.html +2 -2
  8. package/docs/pages/components/card.html +1 -1
  9. package/docs/pages/components/dialog.html +1 -1
  10. package/docs/pages/components/disclosure.html +1 -1
  11. package/docs/pages/components/dropdown.html +2 -2
  12. package/docs/pages/components/form.html +2 -2
  13. package/docs/pages/components/list.html +1 -1
  14. package/docs/pages/components/loading.html +1 -1
  15. package/docs/pages/components/progress.html +1 -1
  16. package/docs/pages/components/slider.html +1 -1
  17. package/docs/pages/components/table.html +1 -1
  18. package/docs/pages/{layout → layouts}/grid.html +1 -1
  19. package/docs/pages/quick-start/conventions.html +7 -7
  20. package/docs/pages/quick-start/customization.html +59 -62
  21. package/docs/pages/quick-start/installation.html +31 -28
  22. package/docs/pages/quick-start/mixins.html +29 -11
  23. package/docs/src/js/demo.js +1 -1
  24. package/docs/src/js/doc-layout.js +9 -6
  25. package/docs/src/scss/demo.scss +2 -2
  26. package/docs/src/scss/layout.scss +1 -1
  27. package/docs/src/scss/style.scss +2 -2
  28. package/esbuild.mjs +1 -1
  29. package/js/_autofill.js +0 -1
  30. package/js/_check-all.js +0 -1
  31. package/js/_comfort.js +0 -1
  32. package/js/_consent.js +0 -1
  33. package/js/_dialog.js +0 -1
  34. package/js/_dropdown.js +0 -1
  35. package/js/_scroll.js +0 -1
  36. package/js/_sidebar.js +0 -1
  37. package/js/_slider.js +0 -1
  38. package/js/_sortable.js +0 -1
  39. package/js/_tabpanel.js +0 -1
  40. package/js/_toggle.js +0 -1
  41. package/js/_tree.js +0 -1
  42. package/js/utilities/_base-component.js +0 -1
  43. package/js/utilities/_cookie.js +0 -1
  44. package/js/utilities/_error.js +0 -1
  45. package/js/utilities/_form-helper.js +0 -1
  46. package/package.json +2 -2
  47. package/scss/abstracts/_default.scss +21 -0
  48. package/scss/{utilities/_mixin.scss → abstracts/_mixins.scss} +49 -15
  49. package/scss/{variables/_setting.scss → abstracts/_options.scss} +5 -24
  50. package/scss/{_media.scss → base/_media.scss} +1 -2
  51. package/scss/{utilities → base}/_reset.scss +2 -3
  52. package/scss/{utilities → base}/_typography.scss +1 -2
  53. package/scss/base/index.scss +3 -0
  54. package/scss/{_badge.scss → components/_badge.scss} +5 -4
  55. package/scss/{_breadcrumb.scss → components/_breadcrumb.scss} +0 -1
  56. package/scss/{_button.scss → components/_button.scss} +2 -1
  57. package/scss/{_card.scss → components/_card.scss} +9 -8
  58. package/scss/{_dialog.scss → components/_dialog.scss} +7 -23
  59. package/scss/{_disclosure.scss → components/_disclosure.scss} +2 -1
  60. package/scss/{_dropdown.scss → components/_dropdown.scss} +7 -6
  61. package/scss/{_form.scss → components/_form.scss} +2 -1
  62. package/scss/{_group.scss → components/_group.scss} +3 -1
  63. package/scss/{_list.scss → components/_list.scss} +4 -3
  64. package/scss/{_loading.scss → components/_loading.scss} +0 -1
  65. package/scss/{_progress.scss → components/_progress.scss} +0 -1
  66. package/scss/{_slider.scss → components/_slider.scss} +0 -1
  67. package/scss/{_table.scss → components/_table.scss} +0 -1
  68. package/scss/components/index.scss +14 -0
  69. package/scss/{_grid.scss → layouts/_grid.scss} +1 -2
  70. package/scss/{variables → themes}/_root.scss +0 -1
  71. package/scss/vanilla-frontend.scss +19 -21
package/.gitlab-ci.yml CHANGED
@@ -20,9 +20,13 @@ pages:
20
20
  stage: build
21
21
  script:
22
22
  - npm run docs:build
23
+ - echo "Fichiers générés dans docs/dist :"
24
+ - ls -R docs/dist
23
25
  - rm -rf public
24
26
  - mkdir public
25
27
  - cp -a docs/dist/* public/
28
+ - echo "Fichiers dans le répertoire public :"
29
+ - ls -R public
26
30
  artifacts:
27
31
  paths:
28
32
  # The folder that contains the files to be exposed at the Page URL
@@ -37,4 +41,7 @@ publish-job:
37
41
  - if: $CI_COMMIT_REF_NAME == "production"
38
42
  script:
39
43
  - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
44
+ - echo "Fichiers dans le répertoire public avant publication :"
45
+ - ls -R public
46
+ - npm pack
40
47
  - npm publish --access public
package/docs/pages/{components → base}/media.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components ></title>
7
+ <title>Documentations: Base ></title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -28,7 +28,7 @@
28
28
  <img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_media';
31
+ @use '@natachah/vanilla-frontend/scss/base/media';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --image-width
package/docs/pages/{layout → base}/reset.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Layout > Reset</title>
7
+ <title>Documentations: Base > Reset</title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -31,7 +31,7 @@
31
31
  <p>To use it, import this file:</p>
32
32
 
33
33
  <doc-code data-type="scss">
34
- @import '@natachah/vanilla-frontend/scss/utilities/_reset';
34
+ @use '@natachah/vanilla-frontend/scss/base/reset';
35
35
  </doc-code>
36
36
 
37
37
  <h2>Preload</h2>
package/docs/pages/{layout → base}/typography.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Layout > Typography</title>
7
+ <title>Documentations: Base > Typography</title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -17,7 +17,7 @@
17
17
  <p>To use it, import this file:</p>
18
18
 
19
19
  <doc-code data-type="scss">
20
- @import '@natachah/vanilla-frontend/scss/layout/_typography'
20
+ @use '@natachah/vanilla-frontend/scss/base/typography'
21
21
  </doc-code>
22
22
 
23
23
  <h2>Heading</h2>
package/docs/pages/components/badge.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <span class="badge">Badge</span>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_badge';
31
+ @use '@natachah/vanilla-frontend/scss/components/badge';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --badge-color
@@ -143,7 +143,7 @@
143
143
  </div>
144
144
  </doc-code>
145
145
  <doc-code id="scss" data-type="scss" role="tabpanel">
146
- @import '@natachah/vanilla-frontend/scss/_group';
146
+ @use '@natachah/vanilla-frontend/scss/components/group';
147
147
  </doc-code>
148
148
  </div>
149
149
 
package/docs/pages/components/breadcrumb.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </nav>
42
42
  </doc-code>
43
43
  <doc-code id="scss" data-type="scss" role="tabpanel">
44
- @import '@natachah/vanilla-frontend/scss/_breadcrumb';
44
+ @use '@natachah/vanilla-frontend/scss/components/breadcrumb';
45
45
  </doc-code>
46
46
  <doc-code id="css" data-type="css" role="tabpanel">
47
47
  --breadcrumb-divider
package/docs/pages/components/button.html CHANGED
@@ -29,7 +29,7 @@
29
29
  <a href="#" role="button">Link as button</a>
30
30
  </doc-code>
31
31
  <doc-code id="scss" data-type="scss" role="tabpanel">
32
- @import '@natachah/vanilla-frontend/scss/_button';
32
+ @use '@natachah/vanilla-frontend/scss/components/button';
33
33
  </doc-code>
34
34
  <doc-code id="css" data-type="css" role="tabpanel">
35
35
  --button-color
@@ -174,7 +174,7 @@
174
174
  </div>
175
175
  </doc-code>
176
176
  <doc-code id="scss" data-type="scss" role="tabpanel">
177
- @import '@natachah/vanilla-frontend/scss/_group';
177
+ @use '@natachah/vanilla-frontend/scss/components/group';
178
178
  </doc-code>
179
179
  </div>
180
180
 
package/docs/pages/components/card.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <div class="card">Hello there !</div>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_card';
31
+ @use '@natachah/vanilla-frontend/scss/components/card';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --card-color
package/docs/pages/components/dialog.html CHANGED
@@ -48,7 +48,7 @@
48
48
  </dialog>
49
49
  </doc-code>
50
50
  <doc-code id="scss" data-type="scss" role="tabpanel">
51
- @import '@natachah/vanilla-frontend/scss/_dialog';
51
+ @use '@natachah/vanilla-frontend/scss/components/dialog';
52
52
  </doc-code>
53
53
  <doc-code id="css" data-type="css" role="tabpanel">
54
54
  --dialog-color
package/docs/pages/components/disclosure.html CHANGED
@@ -52,7 +52,7 @@
52
52
  </details>
53
53
  </doc-code>
54
54
  <doc-code id="scss" data-type="scss" role="tabpanel">
55
- @import '@natachah/vanilla-frontend/scss/_disclosure';
55
+ @use '@natachah/vanilla-frontend/scss/components/disclosure';
56
56
  </doc-code>
57
57
  <doc-code id="css" data-type="css" role="tabpanel">
58
58
  --disclosure-color
package/docs/pages/components/dropdown.html CHANGED
@@ -56,7 +56,7 @@
56
56
  </div>
57
57
  </doc-code>
58
58
  <doc-code id="scss" data-type="scss" role="tabpanel">
59
- @import '@natachah/vanilla-frontend/scss/_component';
59
+ @use '@natachah/vanilla-frontend/scss/components/component';
60
60
  </doc-code>
61
61
  <doc-code id="css" data-type="css" role="tabpanel">
62
62
  --dropdown-color
@@ -189,7 +189,7 @@
189
189
  </div>
190
190
  </doc-code>
191
191
  <doc-code id="scss" data-type="scss" role="tabpanel">
192
- @import '@natachah/vanilla-frontend/scss/_group';
192
+ @use '@natachah/vanilla-frontend/scss/components/group';
193
193
  </doc-code>
194
194
  </div>
195
195
 
package/docs/pages/components/form.html CHANGED
@@ -34,7 +34,7 @@
34
34
  </small>
35
35
  </doc-code>
36
36
  <doc-code id="scss" data-type="scss" role="tabpanel">
37
- @import '@natachah/vanilla-frontend/scss/_form';
37
+ @use '@natachah/vanilla-frontend/scss/components/form';
38
38
  </doc-code>
39
39
  <doc-code id="css" data-type="css" role="tabpanel">
40
40
  --form-color
@@ -320,7 +320,7 @@
320
320
  </fieldset>
321
321
  </doc-code>
322
322
  <doc-code id="scss" data-type="scss" role="tabpanel">
323
- @import '@natachah/vanilla-frontend/scss/_group';
323
+ @use '@natachah/vanilla-frontend/scss/components/group';
324
324
  </doc-code>
325
325
  </div>
326
326
 
package/docs/pages/components/list.html CHANGED
@@ -38,7 +38,7 @@
38
38
  </ul>
39
39
  </doc-code>
40
40
  <doc-code id="scss" data-type="scss" role="tabpanel">
41
- @import '@natachah/vanilla-frontend/scss/_list';
41
+ @use '@natachah/vanilla-frontend/scss/components/list';
42
42
  </doc-code>
43
43
  <doc-code id="css" data-type="css" role="tabpanel">
44
44
  --list-color
package/docs/pages/components/loading.html CHANGED
@@ -25,7 +25,7 @@
25
25
  <div aria-busy="true"></div>
26
26
  </doc-code>
27
27
  <doc-code id="scss" data-type="scss" role="tabpanel">
28
- @import '@natachah/vanilla-frontend/scss/_loading';
28
+ @use '@natachah/vanilla-frontend/scss/components/loading';
29
29
  </doc-code>
30
30
  </div>
31
31
 
package/docs/pages/components/progress.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <progress id="download" value="50" max="100">50%</progress>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_progress';
31
+ @use '@natachah/vanilla-frontend/scss/components/progress';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --progress-width
package/docs/pages/components/slider.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </div>
42
42
  </doc-code>
43
43
  <doc-code id="scss" data-type="scss" role="tabpanel">
44
- @import '@natachah/vanilla-frontend/scss/_slider';
44
+ @use '@natachah/vanilla-frontend/scss/components/slider';
45
45
  </doc-code>
46
46
  <doc-code id="css" data-type="css" role="tabpanel">
47
47
  --slider-columns
package/docs/pages/components/table.html CHANGED
@@ -81,7 +81,7 @@
81
81
  </table>
82
82
  </doc-code>
83
83
  <doc-code id="scss" data-type="scss" role="tabpanel">
84
- @import '@natachah/vanilla-frontend/scss/_table';
84
+ @use '@natachah/vanilla-frontend/scss/components/table';
85
85
  </doc-code>
86
86
  <doc-code id="css" data-type="css" role="tabpanel">
87
87
  --table-padding-inline
package/docs/pages/{layout → layouts}/grid.html RENAMED
@@ -17,7 +17,7 @@
17
17
  <p>To use it, import this file:</p>
18
18
 
19
19
  <doc-code data-type="scss">
20
- @import '@natachah/vanilla-frontend/scss/layout/_grid';
20
+ @use '@natachah/vanilla-frontend/scss/layouts/grid';
21
21
  </doc-code>
22
22
 
23
23
  <p>There is two types of grid, the basic and the flexible.</p>
package/docs/pages/quick-start/conventions.html CHANGED
@@ -51,16 +51,16 @@
51
51
 
52
52
  <doc-code data-type="css">
53
53
  :root {
54
- --global-property: red;
54
+ --global-property: red;
55
55
  }
56
56
 
57
57
  .my-class {
58
- background-color: var(--global-property)
58
+ background-color: var(--global-property)
59
59
  }
60
60
 
61
61
  #myId {
62
- --_private-property: green;
63
- background-color: var(--_private-property);
62
+ --_private-property: green;
63
+ background-color: var(--_private-property);
64
64
  }
65
65
  </doc-code>
66
66
 
@@ -78,7 +78,7 @@
78
78
  /// @access public
79
79
  ///
80
80
  @mixin something($name){
81
- color: $name
81
+ color: $name
82
82
  }
83
83
  </doc-code>
84
84
 
@@ -100,8 +100,8 @@
100
100
  * @returns {number} - The area of the rectangle
101
101
  */
102
102
  function calculate(length, width) {
103
- const myVariable = 'nothing'
104
- return length * height
103
+ const myVariable = 'nothing'
104
+ return length * height
105
105
  }
106
106
  </doc-code>
107
107
 
package/docs/pages/quick-start/customization.html CHANGED
@@ -23,17 +23,17 @@
23
23
  <p>In the <code>:root</code> set the default CSS properties that are global to all your website.</p>
24
24
  <p>You also can split in multiple files, e.g.: <code>root.scss</code> and <code>color.scss</code></p>
25
25
 
26
- <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_root.scss</code>, or copy this code in your own file:</p>
26
+ <p>You can use the default file <code>@natachah/vanilla-frontend/scss/themes/_root.scss</code>, or copy this code in your own file:</p>
27
27
 
28
28
  <doc-code data-type="scss">
29
29
  :root {
30
-
30
+
31
31
  // Typography
32
32
  --font-size: 16px;
33
33
  --line-height: 1.5;
34
34
  --font-family: Arial;
35
35
  --font-weight: normal;
36
-
36
+
37
37
  --font-size-h1: 2.25em; // 36px
38
38
  --font-size-h2: 2.00em; // 32px
39
39
  --font-size-h3: 1.75em; // 28px
@@ -42,36 +42,36 @@
42
42
  --font-size-h6: 1.125em; // 18px
43
43
  --font-size-large: 1.125em; // 18px
44
44
  --font-size-small: .875em; // 14px
45
-
45
+
46
46
  // Anchor
47
47
  --decoration: none;
48
48
 
49
49
  // Layouts
50
50
  --padding-inline: .75em;
51
51
  --padding-block: .5em;
52
-
52
+
53
53
  // Border
54
54
  --border-size: 1px;
55
55
  --border-style: solid;
56
56
  --border-radius: .25rem;
57
-
57
+
58
58
  // Focus (outline)
59
59
  --focus-size: 3px;
60
60
  --focus-style: solid;
61
61
  --focus-offset: 0;
62
62
  --focus-opacity: 50%;
63
-
63
+
64
64
  // Hover (color-mix)
65
65
  --hover-color: black;
66
66
  --hover-percent: 5%;
67
-
67
+
68
68
  // Active (color-mix)
69
69
  --active-color: black;
70
70
  --active-percent: 10%;
71
-
71
+
72
72
  // Disabled
73
73
  --disabled-opacity: 50%;
74
-
74
+
75
75
  // Colors
76
76
  --color-body: white;
77
77
  --color-font: black;
@@ -79,7 +79,7 @@
79
79
  --color-error: #DC3030;
80
80
  --color-success: #008A00;
81
81
  --color-warning: #FFA500;
82
-
82
+
83
83
  // Contrasts
84
84
  --color-warning-contrast: black;
85
85
 
@@ -114,7 +114,7 @@
114
114
  <p>In best practive it will be better to have a file per theme.</p>
115
115
  </blockquote>
116
116
 
117
- <h2>SCSS setting</h2>
117
+ <h2>SCSS options</h2>
118
118
 
119
119
  <p>A few settings are set via the SCSS, they are for variations and for default style as:</p>
120
120
 
@@ -124,59 +124,56 @@
124
124
  <li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
125
125
  </ul>
126
126
 
127
- <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_setting.scss</code>, or copy this code in your own file:</p>
127
+ <p>You can use the default file <code>@natachah/vanilla-frontend/scss/abstracts/_options.scss</code>, or copy this code in your own file:</p>
128
128
 
129
129
  <doc-code data-type="scss">
130
- /// Define the default list of colors available
131
- ///
132
- /// @access public
133
- ///
134
- $colors: (
135
- primary,
136
- success,
137
- error,
138
- warning
130
+ @forward '@natachah/vanilla-frontend/scss/abstracts/_options.scss' with (
131
+
132
+ $colors: (
133
+ primary,
134
+ success,
135
+ error,
136
+ warning
137
+ );
138
+
139
+ $color-variations: (
140
+ badge: $colors,
141
+ button: $colors,
142
+ card: $colors,
143
+ disclosure: $colors,
144
+ list: $colors
145
+ );
146
+
147
+ $outline-variations: (
148
+ badge,
149
+ button,
150
+ card,
151
+ disclosure,
152
+ list
153
+ );
139
154
  );
140
-
141
- /// Define the components that have some color variations
142
- ///
143
- /// @example button: (error) // <button class="error"></button>
144
- /// @access public
145
- ///
146
- $color-variations: (
147
- badge: $colors,
148
- button: $colors,
149
- card: $colors,
150
- disclosure: $colors,
151
- list: $colors
152
- );
153
-
154
- /// Define the components that have an outline variation
155
- ///
156
- /// @example button // <button class="outline"></button>
157
- /// @access public
158
- ///
159
- $outline-variations: (
160
- badge,
161
- button,
162
- card,
163
- disclosure,
164
- list
165
- );
166
-
167
- /// Define the default properties for item
168
- ///
169
- /// @access public
170
- ///
171
- $default-item-properties: (
172
- color: var(--color-font),
173
- background: transparent,
174
- border-size: var(--border-size),
175
- border-style: var(--border-style),
176
- border-color: transparent,
177
- border-radius: var(--border-radius),
178
- padding-inline: var(--padding-inline),
179
- padding-block: var(--padding-block)
155
+ </doc-code>
156
+
157
+ <p>And use is in your main scss as:</p>
158
+
159
+ <doc-code data-type="scss">
160
+ @use 'path/to/custom-options' as options;
161
+ </doc-code>
162
+
163
+ <p>You can use the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code>, or copy this code in your own file:</p>
164
+
165
+ <doc-code data-type="scss">
166
+ @use '@natachah/vanilla-frontend/scss/abstracts/_default.scss' with (
167
+ $item-properties: (
168
+ color: var(--color-font),
169
+ background: transparent,
170
+ border-size: var(--border-size),
171
+ border-style: var(--border-style),
172
+ border-color: transparent,
173
+ border-radius: var(--border-radius),
174
+ padding-inline: var(--padding-inline),
175
+ padding-block: var(--padding-block)
176
+ );
180
177
  );
181
178
  </doc-code>
182
179
 
package/docs/pages/quick-start/installation.html CHANGED
@@ -21,42 +21,45 @@
21
21
  <p>Then you can import the <b>SCSS</b> files:</p>
22
22
 
23
23
  <doc-code data-type="scss">
24
- @import '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
24
+ @use '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
25
25
  </doc-code>
26
26
 
27
27
  <p>Or better, include only the files that you need, here the template with all files:</p>
28
28
 
29
29
  <doc-code data-type="scss">
30
- // Can be overide by your own variables files
31
- @import '@natachah/vanilla-frontend/scss/variables/_root';
32
- @import '@natachah/vanilla-frontend/scss/variables/_setting';
33
-
34
- // Utilities
35
- @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
36
- @import '@natachah/vanilla-frontend/scss/utilities/_reset';
37
- @import '@natachah/vanilla-frontend/scss/utilities/_typography';
38
-
39
- // Components
40
- @import '@natachah/vanilla-frontend/scss/_badge';
41
- @import '@natachah/vanilla-frontend/scss/_breadcrumb';
42
- @import '@natachah/vanilla-frontend/scss/_button';
43
- @import '@natachah/vanilla-frontend/scss/_card';
44
- @import '@natachah/vanilla-frontend/scss/_dialog';
45
- @import '@natachah/vanilla-frontend/scss/_disclosure';
46
- @import '@natachah/vanilla-frontend/scss/_dropdown';
47
- @import '@natachah/vanilla-frontend/scss/_form';
48
- @import '@natachah/vanilla-frontend/scss/_grid';
49
- @import '@natachah/vanilla-frontend/scss/_group';
50
- @import '@natachah/vanilla-frontend/scss/_list';
51
- @import '@natachah/vanilla-frontend/scss/_loading';
52
- @import '@natachah/vanilla-frontend/scss/_media';
53
- @import '@natachah/vanilla-frontend/scss/_progress';
54
- @import '@natachah/vanilla-frontend/scss/_slider';
55
- @import '@natachah/vanilla-frontend/scss/_table';
30
+ // Should be overide by your own files
31
+ @use '@natachah/vanilla-frontend/scss/themes/_root';
32
+
33
+ // If you need to use the mixin
34
+ @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
35
+
36
+ // Base files (reset, typography and media)
37
+ @use "@natachah/vanilla-frontend/scss/base";
38
+
39
+ // Layouts
40
+ @use "@natachah/vanilla-frontend/scss/layouts/grid";
41
+
42
+ // Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
43
+ @use '@natachah/vanilla-frontend/scss/components/_badge';
44
+ @use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
45
+ @use '@natachah/vanilla-frontend/scss/components/_button';
46
+ @use '@natachah/vanilla-frontend/scss/components/_card';
47
+ @use '@natachah/vanilla-frontend/scss/components/_dialog';
48
+ @use '@natachah/vanilla-frontend/scss/components/_disclosure';
49
+ @use '@natachah/vanilla-frontend/scss/components/_dropdown';
50
+ @use '@natachah/vanilla-frontend/scss/components/_form';
51
+ @use '@natachah/vanilla-frontend/scss/components/_grid';
52
+ @use '@natachah/vanilla-frontend/scss/components/_group';
53
+ @use '@natachah/vanilla-frontend/scss/components/_list';
54
+ @use '@natachah/vanilla-frontend/scss/components/_loading';
55
+ @use '@natachah/vanilla-frontend/scss/components/_progress';
56
+ @use '@natachah/vanilla-frontend/scss/components/_slider';
57
+ @use '@natachah/vanilla-frontend/scss/components/_table';
58
+
56
59
  </doc-code>
57
60
 
58
61
  <blockquote>
59
- <p>There is no required files, but it's recommanded to have at least the reset and typography...</p>
62
+ <p>There is no required files, but it's recommanded to have at least the <b>base/*</b> and the <b>themes/root</b></p>
60
63
  </blockquote>
61
64
 
62
65
  <p>Import the <b>Javascript</b> files that you need, here the template:</p>