@natachah/vanilla-frontend 0.0.4 → 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 (75) 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/javascript/sortable.html +10 -10
  19. package/docs/pages/javascript/tree.html +5 -5
  20. package/docs/pages/{layout → layouts}/grid.html +1 -1
  21. package/docs/pages/quick-start/conventions.html +7 -7
  22. package/docs/pages/quick-start/customization.html +59 -62
  23. package/docs/pages/quick-start/installation.html +31 -28
  24. package/docs/pages/quick-start/mixins.html +29 -11
  25. package/docs/src/js/demo.js +1 -1
  26. package/docs/src/js/doc-layout.js +9 -6
  27. package/docs/src/scss/demo.scss +2 -2
  28. package/docs/src/scss/layout.scss +1 -1
  29. package/docs/src/scss/style.scss +2 -2
  30. package/esbuild.mjs +1 -1
  31. package/js/_autofill.js +0 -1
  32. package/js/_check-all.js +0 -1
  33. package/js/_comfort.js +0 -1
  34. package/js/_consent.js +0 -1
  35. package/js/_dialog.js +0 -1
  36. package/js/_dropdown.js +0 -1
  37. package/js/_scroll.js +0 -1
  38. package/js/_sidebar.js +0 -1
  39. package/js/_slider.js +0 -1
  40. package/js/_sortable.js +4 -3
  41. package/js/_tabpanel.js +0 -1
  42. package/js/_toggle.js +0 -1
  43. package/js/_tree.js +2 -3
  44. package/js/tests/sortable.test.js +4 -4
  45. package/js/tests/tree.test.js +5 -5
  46. package/js/utilities/_base-component.js +0 -1
  47. package/js/utilities/_cookie.js +0 -1
  48. package/js/utilities/_error.js +0 -1
  49. package/js/utilities/_form-helper.js +0 -1
  50. package/package.json +2 -2
  51. package/scss/abstracts/_default.scss +21 -0
  52. package/scss/{utilities/_mixin.scss → abstracts/_mixins.scss} +49 -15
  53. package/scss/{variables/_setting.scss → abstracts/_options.scss} +5 -24
  54. package/scss/{_media.scss → base/_media.scss} +1 -2
  55. package/scss/{utilities → base}/_reset.scss +2 -3
  56. package/scss/{utilities → base}/_typography.scss +1 -2
  57. package/scss/base/index.scss +3 -0
  58. package/scss/{_badge.scss → components/_badge.scss} +5 -4
  59. package/scss/{_breadcrumb.scss → components/_breadcrumb.scss} +0 -1
  60. package/scss/{_button.scss → components/_button.scss} +2 -1
  61. package/scss/{_card.scss → components/_card.scss} +9 -8
  62. package/scss/{_dialog.scss → components/_dialog.scss} +7 -23
  63. package/scss/{_disclosure.scss → components/_disclosure.scss} +2 -1
  64. package/scss/{_dropdown.scss → components/_dropdown.scss} +7 -6
  65. package/scss/{_form.scss → components/_form.scss} +2 -1
  66. package/scss/{_group.scss → components/_group.scss} +3 -1
  67. package/scss/{_list.scss → components/_list.scss} +4 -3
  68. package/scss/{_loading.scss → components/_loading.scss} +0 -1
  69. package/scss/{_progress.scss → components/_progress.scss} +0 -1
  70. package/scss/{_slider.scss → components/_slider.scss} +0 -1
  71. package/scss/{_table.scss → components/_table.scss} +0 -1
  72. package/scss/components/index.scss +14 -0
  73. package/scss/{_grid.scss → layouts/_grid.scss} +1 -2
  74. package/scss/{variables → themes}/_root.scss +0 -1
  75. 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/javascript/sortable.html CHANGED
@@ -48,23 +48,23 @@
48
48
  </div>
49
49
 
50
50
  <h2 id="handle">Handle</h2>
51
- <p>You can decide which part of the item is draggable with the <code>data-handle</code> attribute</p>
51
+ <p>You can decide which part of the item is draggable with the <code>data-handle="sortable"</code> attribute</p>
52
52
  <doc-demo>
53
53
  <ul class="demo-sortable">
54
54
  <li draggable=" false">
55
- <span data-handle>
55
+ <span data-handle="sortable">
56
56
  HANDLE
57
57
  </span>
58
58
  Lorem, ipsum.
59
59
  </li>
60
60
  <li draggable="false">
61
- <span data-handle>
61
+ <span data-handle="sortable">
62
62
  HANDLE
63
63
  </span>
64
64
  Impedit, quod!
65
65
  </li>
66
66
  <li draggable="false">
67
- <span data-handle>
67
+ <span data-handle="sortable">
68
68
  HANDLE
69
69
  </span>
70
70
  Repudiandae, rerum.
@@ -75,19 +75,19 @@
75
75
  <doc-code>
76
76
  <ul id="mySortableListWithHandle">
77
77
  <li draggable="false">
78
- <span data-handle>
78
+ <span data-handle="sortable">
79
79
  Handle
80
80
  </span>
81
81
  Lorem, ipsum.
82
82
  </li>
83
83
  <li draggable="false">
84
- <span data-handle>
84
+ <span data-handle="sortable">
85
85
  Handle
86
86
  </span>
87
87
  Impedit, quod!
88
88
  </li>
89
89
  <li draggable="false">
90
- <span data-handle>
90
+ <span data-handle="sortable">
91
91
  Handle
92
92
  </span>
93
93
  Repudiandae, rerum.
@@ -135,9 +135,9 @@
135
135
  <doc-code data-type="js">
136
136
  const mySortable = document.getElementById('mySortableList')
137
137
  mySortable.addEventListener('sortable:drag', (e) => {
138
- const theCollectionOfItems = e.detail.items
139
- const thecurrentItem = e.detail.current
140
- ...
138
+ const theCollectionOfItems = e.detail.items
139
+ const thecurrentItem = e.detail.current
140
+ ...
141
141
  })
142
142
  </doc-code>
143
143
 
package/docs/pages/javascript/tree.html CHANGED
@@ -136,12 +136,12 @@
136
136
  </blockquote>
137
137
 
138
138
  <h2>Handle</h2>
139
- <p>You can decide which part of the item toggle the open/close method with the <code>data-handle</code> attribute</p>
139
+ <p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>
140
140
  <doc-demo>
141
141
  <ul class="demo-tree" role="tree">
142
142
  <li role="treeitem">
143
143
  <span aria-expanded="false" aria-owns="sublist">
144
- <span data-handle>
144
+ <span data-handle="tree">
145
145
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
146
146
  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
147
147
  </svg>
@@ -162,7 +162,7 @@
162
162
  ...
163
163
  <li role="treeitem">
164
164
  <span aria-expanded="false" aria-owns="treelist">
165
- <span data-handle>
165
+ <span data-handle="tree">
166
166
  HANDLE
167
167
  </span>
168
168
  Inventore, perspiciatis
@@ -209,8 +209,8 @@
209
209
  <doc-code data-type="js">
210
210
  const myTree = document.getElementById('myTree')
211
211
  myTree.addEventListener('tree:changed', (e) => {
212
- const isOpen = e.detail.isOpen
213
- ...
212
+ const isOpen = e.detail.isOpen
213
+ ...
214
214
  })
215
215
  </doc-code>
216
216
 
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