diff --git a/README.md b/README.md index b2968ab..d090707 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ You can import specific mixins like follow - mixin and utilities work good together but you could only use one of the both if you need it ## Css Variable -### Border +### Radius ```scss :root { --radius-smallest: 4px; // Extra small : Menu, Snackbars, Text fields diff --git a/utilities.scss b/utilities.scss index 783092b..b5e5a9a 100644 --- a/utilities.scss +++ b/utilities.scss @@ -1,4 +1,4 @@ -@forward './utilities/border'; +@forward './utilities/radius'; @forward './utilities/spacing'; @forward './utilities/width'; @forward './utilities/z-index'; diff --git a/utilities/border.scss b/utilities/radius.scss similarity index 52% rename from utilities/border.scss rename to utilities/radius.scss index 968ee0d..472cc15 100644 --- a/utilities/border.scss +++ b/utilities/radius.scss @@ -1,17 +1,6 @@ // https://m3.material.io/styles/shape/shape-scale-tokens#59b6f73a-6ef2-45a6-ab48-611d07635661 :root { - // @TODO remove --border in favor of --radius - --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%; // @TODO remove in favor of --full - --border-full: 100%; // Full : Badge, Buttons, Sliders, Switches, Search bards - --radius-smallest: 4px; // Extra small : Menu, Snackbars, Text fields --radius-smaller: 8px; // Small : Chips, Rich tooltip --radius-small: 10px; // Medium : Cards, Small FABs