welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
2 lines (1 loc) • 13 kB
CSS
@font-face{font-family:Work Sans;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Work Sans;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Work Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Work Sans;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Work Sans;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Work Sans;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Work Sans;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Work Sans;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Work Sans;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_cqDptfpA4cD3.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Work Sans;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/worksans/v23/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:welcome-font;font-weight:400;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-regular.woff2) format("woff2")}@font-face{font-family:welcome-font;font-weight:400;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-regular.woff2) format("woff2")}@font-face{font-family:welcome-font;font-weight:500;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-medium.woff2) format("woff2")}@font-face{font-family:welcome-font;font-weight:600;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-bold.woff2) format("woff2")}@font-face{font-family:welcome-font;font-style:italic;font-weight:400;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-regular-italic.woff2) format("woff2")}@font-face{font-family:welcome-font;font-style:italic;font-weight:500;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-medium-italic.woff2) format("woff2")}@font-face{font-family:welcome-font;font-style:italic;font-weight:600;src:url(https://cdn.welcome-ui.com/fonts/welcome-font-bold-italic.woff2) format("woff2")}@theme static{--*: initial; --spacing: .0625rem; --border-width-lg: 3px; --border-width-md: 2px; --border-width-sm: 1px; --color-beige-10: #fbf9f7; --color-beige-20: #f6f3ef; --color-beige-30: #eae4de; --color-beige-40: #d2cbc3; --color-beige-50: #a7a096; --color-beige-60: #605b55; --color-beige-70: #4d4944; --color-beige-80: #33302d; --color-beige-90: #1e1c1a; --color-blue-10: #e0f5ff; --color-blue-20: #bbeaff; --color-blue-30: #9bdef7; --color-blue-40: #55c3e9; --color-blue-50: #27a5d0; --color-blue-60: #057aa3; --color-blue-70: #025a79; --color-blue-80: #013c50; --color-blue-90: #00202b; --color-green-10: #eaffd4; --color-green-20: #d6f6b4; --color-green-30: #bade94; --color-green-40: #9fc873; --color-green-50: #83ad57; --color-green-60: #5a8034; --color-green-70: #40611f; --color-green-80: #2a4210; --color-green-90: #142603; --color-neutral-10: #ffffff; --color-neutral-20: #f3f3f3; --color-neutral-30: #dedede; --color-neutral-40: #bdbdbd; --color-neutral-50: #989898; --color-neutral-60: #585858; --color-neutral-70: #444444; --color-neutral-80: #212121; --color-neutral-90: #000000; --color-orange-10: #ffebce; --color-orange-20: #ffd495; --color-orange-30: #ffbb59; --color-orange-40: #ff9f14; --color-orange-50: #db860a; --color-orange-60: #a6670a; --color-orange-70: #824f06; --color-orange-80: #573607; --color-orange-90: #382303; --color-pink-10: #ffeaf5; --color-pink-20: #ffd5eb; --color-pink-30: #feb7dc; --color-pink-40: #f696c8; --color-pink-50: #e468a8; --color-pink-60: #c24887; --color-pink-70: #972962; --color-pink-80: #6d1142; --color-pink-90: #3c0725; --color-red-10: #fbdedc; --color-red-20: #fcc7c3; --color-red-30: #fdb3ae; --color-red-40: #ff9490; --color-red-50: #ff6165; --color-red-60: #e1003a; --color-red-70: #a80029; --color-red-80: #75001a; --color-red-90: #450101; --color-red-orange-10: #ffded0; --color-red-orange-20: #ffc9b2; --color-red-orange-30: #ffb595; --color-red-orange-40: #ff9868; --color-red-orange-50: #e67b49; --color-red-orange-60: #c45927; --color-red-orange-70: #9f4217; --color-red-orange-80: #6d2605; --color-red-orange-90: #451701; --color-teal-10: #d5fffa; --color-teal-20: #aaf4eb; --color-teal-30: #6de1d2; --color-teal-40: #00c7ae; --color-teal-50: #01aa95; --color-teal-60: #008070; --color-teal-70: #00544a; --color-teal-80: #003d35; --color-teal-90: #00211d; --color-transparent: rgba(0,0,0,0); --color-violet-10: #f2f2ff; --color-violet-20: #e0e0ff; --color-violet-30: #c9c9ff; --color-violet-40: #acacff; --color-violet-50: #9080f0; --color-violet-60: #7958d6; --color-violet-70: #593cac; --color-violet-80: #422a86; --color-violet-90: #1f0e51; --color-yellow-10: #fff8d9; --color-yellow-20: #fff1b2; --color-yellow-30: #ffe166; --color-yellow-40: #ffcd00; --color-yellow-50: #e5b800; --color-yellow-60: #b69200; --color-yellow-70: #846a01; --color-yellow-80: #604d00; --color-yellow-90: #423500; --color-brand-10: #fff8d9; --color-brand-20: #fff1b2; --color-brand-30: #ffe166; --color-brand-40: #ffcd00; --color-brand-50: #e5b800; --color-brand-60: #b69200; --color-brand-70: #846a01; --color-brand-80: #604d00; --color-brand-90: #423500; --color-overlay: color-mix(in oklab,#000000 55%,transparent); --color-secondary-blue: #55c3e9; --color-secondary-green: #bade94; --color-secondary-orange: #ff9868; --color-secondary-pink: #f696c8; --color-secondary-teal: #00c7ae; --color-secondary-violet: #acacff; --font-family-default: "Work Sans",sans-serif; --font-family-headings: "welcome-font",sans-serif; --font-family-icons: "welcome-icon-font"; --font-size-11: .6875rem; --font-size-12: .75rem; --font-size-13: .8125rem; --font-size-14: .875rem; --font-size-16: 1rem; --font-size-18: 1.125rem; --font-size-20: 1.25rem; --font-size-24: 1.5rem; --font-size-26: 1.625rem; --font-size-36: 2.25rem; --font-size-45: 2.8125rem; --font-size-65: 4.0625rem; --font-size-h0: 4.0625rem; --font-size-h1: 2.8125rem; --font-size-h2: 2.25rem; --font-size-h3: 1.625rem; --font-size-h4: 1.25rem; --font-size-h5: 1rem; --font-size-h6: .875rem; --font-size-lg: 1.125rem; --font-size-md: 1rem; --font-size-sm: .875rem; --font-size-subtitle-md: .8125rem; --font-size-subtitle-sm: .6875rem; --font-size-xl: 1.5rem; --font-size-xs: .75rem; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-bold: 600; --font-weight-medium: 500; --font-weight-regular: 400; --height-4: .25rem; --height-8: .5rem; --height-10: .625rem; --height-12: .75rem; --height-16: 1rem; --height-20: 1.25rem; --height-24: 1.5rem; --height-30: 1.875rem; --height-32: 2rem; --height-40: 2.5rem; --height-48: 3rem; --height-50: 3.125rem; --height-60: 3.75rem; --height-64: 4rem; --height-elements-lg: 2.5rem; --height-elements-md: 2rem; --height-elements-sm: 1.5rem; --height-elements-xl: 3rem; --height-elements-xs: 1rem; --height-elements-xxl: 4rem; --height-elements-xxs: .75rem; --letter-spacing-h0: -.10625rem; --letter-spacing-h1: -.075rem; --letter-spacing-h2: -.0625rem; --letter-spacing-h3: -.05625rem; --letter-spacing-h4: -.0375rem; --letter-spacing-h5: -.03125rem; --letter-spacing-h6: -.03125rem; --letter-spacing-lg: -.019rem; --letter-spacing-md: -.019rem; --letter-spacing-sm: -.019rem; --letter-spacing-subtitle-md: -.0125rem; --letter-spacing-subtitle-sm: -.0125rem; --letter-spacing-xs: -.0125rem; --line-height-14: .875rem; --line-height-16: 1rem; --line-height-18: 1.125rem; --line-height-20: 1.25rem; --line-height-24: 1.5rem; --line-height-32: 2rem; --line-height-40: 2.5rem; --line-height-48: 3rem; --line-height-72: 4.5rem; --line-height-iso-font-size: 1rem; --line-height-h0: 4.5rem; --line-height-h1: 3rem; --line-height-h2: 2.5rem; --line-height-h3: 2rem; --line-height-h4: 1.5rem; --line-height-h5: 1.25rem; --line-height-h6: 1.125rem; --line-height-lg: 1.5rem; --line-height-md: 1.125rem; --line-height-sm: 1.125rem; --line-height-subtitle-md: 1rem; --line-height-subtitle-sm: 1rem; --line-height-xs: .875rem; --radius-2xl: 1.5rem; --radius-circle: calc(infinity * 1px); --radius-lg: .5rem; --radius-md: .25rem; --radius-sm: .125rem; --radius-xl: 1rem; --breakpoint-2xl: 1440px; --breakpoint-3xl: 1620px; --breakpoint-4xl: 1920px; --breakpoint-lg: 980px; --breakpoint-md: 736px; --breakpoint-sm: 480px; --breakpoint-xl: 1280px; --breakpoint-xs: 0px; --shadow-focus: 0 0 0 2px #ffcd00; --shadow-focus-danger: 0 0 0 2px #fdb3ae; --shadow-focus-success: 0 0 0 2px #bade94; --shadow-focus-warning: 0 0 0 2px #ffd495; --shadow-md: 3px 4px 10px 0 color-mix(in oklab,#000000 7%,transparent); --shadow-sm: 1px 2px 4px 0 color-mix(in oklab,#000000 5%,transparent); --spacing-0: 0; --spacing-2: .125rem; --spacing-3: .1875rem; --spacing-4: .25rem; --spacing-8: .5rem; --spacing-12: .75rem; --spacing-16: 1rem; --spacing-24: 1.5rem; --spacing-28: 1.75rem; --spacing-32: 2rem; --spacing-36: 2.25rem; --spacing-48: 3rem; --spacing-64: 4rem; --spacing-96: 6rem; --spacing-128: 8rem; --spacing-192: 12rem; --spacing-3xl: 3rem; --spacing-4xl: 4rem; --spacing-5xl: 6rem; --spacing-6xl: 8rem; --spacing-7xl: 12rem; --spacing-lg: 1rem; --spacing-md: .75rem; --spacing-sm: .5rem; --spacing-xl: 1.5rem; --spacing-xs: .25rem; --spacing-xxl: 2rem; --spacing-xxs: .125rem; --duration-fast: .1s; --duration-medium: .3s; --duration-slow: .5s; --timing-primary: ease; --timing-secondary: linear; --timing-tertiary: cubic-bezier(.41,.094,.54,.07);}@layer base{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{min-width:0;min-height:0;font-size:100%;vertical-align:baseline}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{text-decoration:none}img{overflow:hidden}input{-webkit-appearance:none;-moz-appearance:none;appearance:none}input::-webkit-search-cancel-button{display:none}*,*:after,*:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%}body{min-height:100%;padding-top:1px;margin-top:-1px;font-family:var(--font-family-default)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}}