feat(border.scss): add --border-bigger & --border-full

README.md

@@ -35,13 +35,15 @@ You can import specific mixins like follow
 ### Border
 ```scss
 :root {
-  --border-smallest: 4px;
-  --border-smaller: 8px;
-  --border-small: 10px;
-  --border: 16px;
+  --border-smallest: 4px; // Extra small : Menu, Snackbars, Text fields
+  --border-smaller: 8px; // Small : Chips, Rich tooltip
+  --border-small: 10px; // Medium : Cards, Small FABs
+  --border: 16px; // Large : FABs, Navigation drawers
   --border-big: 20px;
+  --border-bigger: 28px; // Extra large : Dialogs, Large FABs, Search view (full-screen), Time picker, Time input
   --border-rounded: 50px;
-  --border-circle: 100%;
+  --border-circle: 100%; // @TODO remove in favor of --full
+  --border-full: 100%; // Full : Badge, Buttons, Sliders, Switches, Search bards
 }
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scss-opinionated",
-  "version": "17.0.2",
+  "version": "17.1.0",
   "description": "Opiniated scss mixin and utilities",
   "license": "MIT",
   "author": "Raphael Balet",

utilities/border.scss

@@ -1,9 +1,13 @@
+// https://m3.material.io/styles/shape/shape-scale-tokens#59b6f73a-6ef2-45a6-ab48-611d07635661
+
 :root {
-  --border-smallest: 4px;
-  --border-smaller: 8px;
-  --border-small: 10px;
-  --border: 16px;
+  --border-smallest: 4px; // Extra small : Menu, Snackbars, Text fields
+  --border-smaller: 8px; // Small : Chips, Rich tooltip
+  --border-small: 10px; // Medium : Cards, Small FABs
+  --border: 16px; // Large : FABs, Navigation drawers
   --border-big: 20px;
+  --border-bigger: 28px; // Extra large : Dialogs, Large FABs, Search view (full-screen), Time picker, Time input
   --border-rounded: 50px;
-  --border-circle: 100%;
+  --border-circle: 100%; // @TODO remove in favor of --full
+  --border-full: 100%; // Full : Badge, Buttons, Sliders, Switches, Search bards
 }