text: (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6356],{90312:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/ring-color",function(){return c(68832)}])},68832:function(a,b,c){"use strict";c.r(b),c.d(b,{"default":function(){return t}}),c(67294);var d=c(3905),e=c(41664),f=c(5679),g=c(83434),h=c(53339),i=c(74296),j=c(37517),k=c(38139),l=c(89934),m=c(6865),n=c(28368),o=h.DocumentationLayout,p={utilities:j.Z,transformProperties:function(a){a.selector;var b=a.properties;return delete b["--tw-ring-opacity"],Object.keys(b).forEach(function(a){b[a]=b[a].replace(" / var(--tw-ring-opacity)","")}),b}},q=function(a){return console.warn("Component Heading was not imported, exported, or provided by MDXProvider as global scope"),(0,d.kt)("div",Object.assign({},a))},r={Layout:o,classes:p,meta:{title:"Ring Color",description:"Utilities for setting the color of outline rings."},slug:"ring-color",tableOfContents:[{title:"Basic usage",slug:"basic-usage",children:[{title:"Setting the ring color",slug:"setting-the-ring-color",children:[]},{title:"Changing the opacity",slug:"changing-the-opacity",children:[]}]},{title:"Applying conditionally",slug:"applying-conditionally",children:[{title:"Hover, focus, and other states",slug:"hover-focus-and-other-states",children:[]},{title:"Breakpoints and media queries",slug:"breakpoints-and-media-queries",children:[]}]},{title:"Using custom values",slug:"using-custom-values",children:[{title:"Customizing your theme",slug:"customizing-your-theme",children:[]},{title:"Arbitrary values",slug:"arbitrary-values",children:[]}]}]},s=i.X_;function t(a){var b=a.components,c=function(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}(a,["components"]);return(0,d.kt)(s,Object.assign({},r,c,{components:b,mdxType:"MDXLayout"}),(0,d.kt)(f.X,{level:2,id:"basic-usage",nextElement:{type:"heading",depth:3}},"Basic usage"),(0,d.kt)(f.X,{level:3,id:"setting-the-ring-color",nextElement:{type:"paragraph"}},"Setting the ring color"),(0,d.kt)("p",null,"Use the ",(0,d.kt)("inlineCode",{parentName:"p"},"ring-{color}")," utilities to set the color of an ",(0,d.kt)(e.default,{href:"/docs/ring-width",passHref:!0},(0,d.kt)("a",null,"outline ring")),"."),(0,d.kt)(g.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"flex justify-center max-w-md mx-auto gap-4 text-white text-sm text-center font-bold leading-6 text-white\">\n    <button class=\"px-4 py-2 font-semibold text-sm bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm ring-2 ring-offset-2 ring-offset-gray-50 ring-blue-500\">Create account</button>\n  </div>\n"}),(0,d.kt)("pre",Object.assign({},{className:"language-html"}),(0,d.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"button")," ",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"... ring-2 ",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"ring-blue-500"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  Create account\n",(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"button"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.kt)(f.X,{level:3,id:"changing-the-opacity",nextElement:{type:"paragraph"}},"Changing the opacity"),(0,d.kt)("p",null,"Control the opacity of an element’s background color using the color opacity modifier."),(0,d.kt)(g.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"flex justify-center max-w-md mx-auto gap-4 text-white text-sm text-center font-bold leading-6 text-white\">\n    <button class=\"px-4 py-2 font-semibold text-sm bg-white text-gray-700 border border-gray-300 rounded-md shadow-sm ring-2 ring-offset-2 ring-offset-gray-50 ring-blue-500/50\">Create account</button>\n  </div>\n"}),(0,d.kt)("pre",Object.assign({},{className:"language-html"}),(0,d.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"button")," ",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"... ring-2 ring-blue-500",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"/50"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Subscribe",(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"button"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.kt)("p",null,"You can use any value defined in your ",(0,d.kt)(e.default,{href:"/docs/opacity",passHref:!0},(0,d.kt)("a",null,"opacity scale")),", or use arbitrary values if you need to deviate from your design tokens."),(0,d.kt)("pre",Object.assign({},{className:"language-html"}),(0,d.kt)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"button")," ",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"... ring-2 ring-blue-500",(0,d.kt)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"/[.55]"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Subscribe",(0,d.kt)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"button"),(0,d.kt)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.kt)("hr",null),(0,d.kt)(q,{level:2,id:"applying-conditionally",nextElement:{type:"heading",depth:3},ignore:!0,mdxType:"Heading"},"Applying conditionally"),(0,d.kt)(q,{level:3,id:"hover-focus-and-other-states",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Hover, focus, and other states"),(0,d.kt)(n.k,{defaultClass:"ring ring-blue-300",featuredClass:"ring-blue-500",mdxType:"HoverFocusAndOtherStates"}),(0,d.kt)(q,{level:3,id:"breakpoints-and-media-queries",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Breakpoints and media queries"),(0,d.kt)(l.p,{defaultClass:"ring ring-blue-300",featuredClass:"ring-blue-500",mdxType:"BreakpointsAndMediaQueries"}),(0,d.kt)("hr",null),(0,d.kt)(f.X,{level:2,id:"using-custom-values",nextElement:{type:"heading",depth:3}},"Using custom values"),(0,d.kt)(f.X,{level:3,id:"customizing-your-theme",nextElement:{type:"jsx"}},"Customizing your theme"),(0,d.kt)(m.h,{name:"ring",configKey:"ringColor",mdxType:"CustomizePluginColors"}),(0,d.kt)(f.X,{level:3,id:"arbitrary-values",nextElement:{type:"jsx"}},"Arbitrary values"),(0,d.kt)(k.k,{property:"ring-{color}",featuredClass:"ring-[#50d71e]",mdxType:"ArbitraryValues"}))}t.isMDXComponent=!0,t.layoutProps=r}},function(a){a.O(0,[9774,3430,6401,4756,7517,6852,2474,4713,2428,559,2888,179],function(){return a(a.s=90312)}),_N_E=a.O()}])