@guruhotel/aura-ui/esm/date-field/date-field.styles.js

⚛️ React UI library by GuruHotel

import{Box as o}from"../box";import{styled as r,theme as e}from"../theme";import{rounded as a}from"../common-variants";export const DateFieldSpan=r("span",{color:"$gray12",py:"$2"});export const SegmentContainer=r(o,{color:"$gray11",textAlign:"right",fontVariantNumeric:"tabular-nums",outline:"none",rounded:"$halfBase",variants:{isEditable:{false:{color:"$gray8"}},rounded:{none:{rounded:"$none"},xs:{rounded:"$xs"},sm:{rounded:"$xs"},md:{rounded:"$sm"},lg:{rounded:"$md"},xl:{rounded:"$lg"},"2xl":{rounded:"$xl"},"3xl":{rounded:"$2xl"},full:{rounded:"$full"},halfBase:{rounded:Math.abs(parseInt(e.radii.halfBase.value.replace(/\D/g,""),10)/2)},base:{rounded:"$halfBase"}}}});export const SegmenetSpan=r("span",{display:"block",pointerEvents:"none",width:"$full",textAlign:"center",fontStyle:"italic",_focus:{color:"$surfaceLight !important","> span":{color:"$surfaceLight !important"}},variants:{isPlaceholder:{false:{visibility:"hidden",height:0}}}});export const DateFieldElements=r("div",{width:"max-content",position:"relative",display:"flex",alignItems:"center",bg:"$surfaceLight",rounded:"$base",transition:"$default",variants:{colorScheme:{text:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$text9",_hover:{boxShadow:"0 0 0 2px $colors$text9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$text11",color:"$surfaceLight"}}},guru:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$guru9",_hover:{boxShadow:"0 0 0 2px $colors$guru9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$guru11",color:"$surfaceLight"}}},fellow:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$fellow9",_hover:{boxShadow:"0 0 0 2px $colors$fellow9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$fellow11",color:"$surfaceLight"}}},darkie:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$darkie9",_hover:{boxShadow:"0 0 0 2px $colors$darkie9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$darkie11",color:"$surfaceLight"}}},red:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$red9",_hover:{boxShadow:"0 0 0 2px $colors$red9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$red11",color:"$surfaceLight"}}},nature:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$nature9",_hover:{boxShadow:"0 0 0 2px $colors$nature9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$nature11",color:"$surfaceLight"}}},sunshine:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$sunshine10",_hover:{boxShadow:"0 0 0 2px $colors$sunshine10"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$sunshine11",color:"$surfaceLight"}}},violet:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$violet9",_hover:{boxShadow:"0 0 0 2px $colors$violet9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$violet11",color:"$surfaceLight"}}},gray:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$gray9",_hover:{boxShadow:"0 0 0 2px $colors$gray9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$gray11",color:"$surfaceLight"}}},primary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$primary9",_hover:{boxShadow:"0 0 0 2px $colors$primary9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$primary11",color:"$surfaceLight"}}},secondary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$secondary9",_hover:{boxShadow:"0 0 0 2px $colors$secondary9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$secondary11",color:"$surfaceLight"}}},utilitary:{boxShadow:"0 0 0 1px $colors$gray7",_hover:{boxShadow:"0 0 0 1px $colors$gray9"},_focusWithin:{boxShadow:"0 0 0 2px $colors$utilitary9",_hover:{boxShadow:"0 0 0 2px $colors$utilitary9"}},[`& ${SegmentContainer}`]:{_focus:{bg:"$utilitary11",color:"$surfaceLight"}}},unstyled:{boxShadow:"$none"}},size:{xs:{fontSize:"$xs",height:"$6",paddingInlineStart:"$2",paddingInlineEnd:"$2",[`& ${SegmentContainer}`]:{px:"$1",py:2}},sm:{fontSize:"$sm",height:"$8",paddingInlineStart:"$2",paddingInlineEnd:"$2",[`& ${SegmentContainer}`]:{px:"$1",py:2}},md:{height:"$10",fontSize:"$md",paddingInlineStart:"$3",paddingInlineEnd:"$3",[`& ${SegmentContainer}`]:{px:"$1",py:4}},lg:{height:"$12",fontSize:"$lg",paddingInlineStart:"$3",paddingInlineEnd:"$3",[`& ${SegmentContainer}`]:{px:"$1",py:6}},xl:{height:"$14",fontSize:"$xl",paddingInlineStart:"$6",paddingInlineEnd:"$6",[`& ${SegmentContainer}`]:{px:"$1",py:10}}},rounded:a}});