diff --git a/README.md b/README.md index 1fca68f..f185008 100644 --- a/README.md +++ b/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 } ``` diff --git a/package.json b/package.json index a5d10df..530be98 100644 --- a/package.json +++ b/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", diff --git a/utilities/border.scss b/utilities/border.scss index ddf7576..ec0b0c4 100644 --- a/utilities/border.scss +++ b/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 }