Update docs for new radius utilities

Author: reinink

docs/source/_assets/js/components/ResponsiveCodeSample.vue

@@ -22,7 +22,7 @@
         <p class="text-xs">xl</p>
       </span>
     </div>
-    <div class="rounded overflow-hidden border-2 border-smoke mb-8">
+    <div class="radius-md overflow-hidden border-2 border-smoke mb-8">
       <div class="p-4 bg-smoke-lighter border-b-2 border-smoke">
         <div class="whitespace-pre font-mono text-slate-lighter text-sm overflow-x-scroll" v-html="highlightedCode"></div>
       </div>

docs/source/_assets/less/markdown.less

@@ -31,7 +31,7 @@
   > p code, p& code& {
     @apply .inline-block;
     @apply .bg-smoke-lighter;
-    @apply .rounded-sm;
+    @apply .radius-sm;
     @apply .text-sm;
     @apply .p-1;
     @apply .leading-none;
@@ -46,7 +46,7 @@
     @apply .font-mono;
     @apply .border-2;
     @apply .border-smoke;
-    @apply .rounded;
+    @apply .radius-md;
     font-weight: 400;
   }
 

docs/source/_layouts/documentation.blade.php

@@ -24,7 +24,7 @@
         </p>
       </div>
       <div class="relative">
-        <input id="docsearch" class="placeholder-grey-dark rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
+        <input id="docsearch" class="placeholder-grey-dark radius-md bg-white border border-smoke py-2 pr-4 pl-10 block w-full appearance-none" type="text" placeholder="Search the docs">
         <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
           <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
         </div>

docs/source/_partials/code-sample.blade.php

@@ -1,4 +1,4 @@
-<div class="rounded overflow-hidden border-2 border-grey-light mb-8 bg-white">
+<div class="radius-md overflow-hidden border-2 border-grey-light mb-8 bg-white">
   <div class="border-b-2 border-grey-light p-4 {{ $class ?? '' }}">
     {{ $slot }}
   </div>

docs/source/_partials/customized-config.blade.php

@@ -1,4 +1,4 @@
-<div class="border-2 border-smoke rounded mb-8">
+<div class="border-2 border-smoke radius-md mb-8">
   <div class="bg-smoke-lighter p-4 font-mono text-sm">
     <div class="whitespace-pre text-grey-dark">{</div>
     <div class="whitespace-pre text-grey-light">  // ...</div>

docs/source/_partials/feature-badges.blade.php

@@ -1,63 +1,63 @@
 <div class="mb-6">
   <div class="flex flex-wrap -mb-2">
     @if ($responsive)
-    <a href="#responsive" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#responsive" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Responsive</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Responsive</span>
     </span>
     @endif
 
     @if ($customizable)
-    <a href="#customizing" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#customizing" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Customizable</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Customizable</span>
     </span>
     @endif
 
     @if ($hover)
-    <a href="#hover" class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <a href="#hover" class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Hover</span>
     </a>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Hover</span>
     </span>
     @endif
 
     @if ($focus)
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
-      <span class="inline-flex rounded-full bg-green-light text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none mr-2">
+      <span class="inline-flex radius-full bg-green-light text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.8 9.4c-.33-.442-.958-.53-1.4-.2-.442.33-.53.958-.2 1.4l3 4c.38.508 1.134.537 1.553.06l7-8c.363-.417.32-1.05-.094-1.413-.417-.363-1.05-.32-1.413.094L8.06 12.414 5.8 9.4z"/></svg>
       </span>
       <span>Focus</span>
     </span>
     @else
-    <span class="mb-2 inline-flex items-center rounded-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
-      <span class="inline-flex rounded-full bg-grey text-white mr-1">
+    <span class="mb-2 inline-flex items-center radius-full border border-grey-light bg-grey-lightest text-xs font-semibold pl-1 pt-1 pb-1 pr-2 leading-none opacity-50 mr-2">
+      <span class="inline-flex radius-full bg-grey text-white mr-1">
         <svg class="h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L6.707 5.293c-.39-.39-1.024-.39-1.414 0-.39.39-.39 1.024 0 1.414L8.586 10l-3.293 3.293c-.39.39-.39 1.024 0 1.414.39.39 1.024.39 1.414 0L10 11.414l3.293 3.293c.39.39 1.024.39 1.414 0 .39-.39.39-1.024 0-1.414L11.414 10l3.293-3.293c.39-.39.39-1.024 0-1.414-.39-.39-1.024-.39-1.414 0L10 8.586z"/></svg>
       </span>
       <span>Focus</span>

docs/source/_partials/work-in-progress-example.blade.php

@@ -1,5 +1,5 @@
 <div class="mt-8">
-  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+  <div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3">
     <div class="flex">
       <div class="py-1">
         <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>

docs/source/_partials/work-in-progress.blade.php

@@ -1,4 +1,4 @@
-<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3 mb-4">
+<div class="bg-blue-lightest border-l-4 border-blue-light radius-b-md text-blue-darkest px-4 py-3 mb-4">
   <div class="flex">
     <div class="py-1">
       <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>

docs/source/docs/border-color.blade.md

@@ -37,7 +37,7 @@ features:
 In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover.
 
 @component('_partials.code-sample', ['class' => 'text-center'])
-<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold rounded">
+<button class="border-2 border-blue hover:border-red bg-transparent text-blue-dark hover:text-red-dark py-2 px-4 font-semibold radius-md">
   Button
 </button>
 @endcomponent