UNPKG

tsm-ui

Version:

### Welcome to TSM-UI: Your Design System for Modern Web Development

6 lines (5 loc) • 3.12 kB
1
2
3
4
5
6
import{g as d,M as m}from"./chunk-HLWAVYOI.fdd61c05.js";import{r as g}from"./index.d591fb27.js";import{c as h}from"./index.8dde8ec8.js";import{a as n,j as e,F as u}from"./jsx-runtime.e41c3930.js";import{u as l}from"./index.300adb29.js";import"./iframe.c152d107.js";import"../sb-preview/runtime.js";import"./react-18.6f784551.js";import"./index.237cf077.js";import"./_commonjsHelpers.712cc82f.js";import"./chunk-ZGA76URP.8d615500.js";import"./index.ec72048c.js";import"./extends.bd401154.js";import"./index.b67ef974.js";import"./index.b38f6aa4.js";const x={display:"flex",flexDirection:"column",justifyContent:"space-between",alignItems:"center",fontFamily:"monospace"},f={display:"flex",flexWrap:"wrap"},y={width:60,height:60,margin:"0.2rem",padding:"4rem",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",transition:"background-color 0.3s",borderRadius:"4px",border:"1px solid #c6bca5",outline:"none",boxShadow:"0px 1px 33px -1px rgba(0, 0, 0, 0.46)",WebkitBoxShadow:"0px 1px 33px -1px rgba(0, 0, 0, 0.46)",MozBoxShadow:"0px 1px 33px -1px rgba(0, 0, 0, 0.46)"},b={display:"flex",justifyContent:"flex-end"},C={width:"250px",padding:"0.5rem",borderRadius:"4px",border:"1px solid #c6bca5",outline:"none",flexDirection:"column",background:"#181A1E",color:"white",marginBottom:"10px",marginRight:"20px"};function w(){const[t,o]=g.exports.useState(""),c=r=>{o(r.target.value)},p=Object.entries(h).filter(([r])=>r.toLowerCase().includes(t.toLowerCase()));return n("div",{children:[e("div",{style:b,children:e("input",{type:"text",placeholder:"Search colors by name...",value:t,onChange:c,style:C})}),e("div",{style:f,children:p.map(([r,i])=>e("div",{style:{...y,backgroundColor:i,color:d(i,"#e2dbdbb1")<3.5?"#1d1919cd":"#e2dbdbb1"},children:n("div",{style:x,children:[n("strong",{style:{alignSelf:"flex-start"},children:["$",r]}),e("span",{style:{alignSelf:"flex-end"},children:i})]})},r))})]})}function a(t){const o=Object.assign({p:"p",a:"a",img:"img",h1:"h1"},l(),t.components);return n(u,{children:[e(m,{title:"Tokens/Colors"}),` `,e(o.p,{children:e(o.a,{href:"https://raw.githubusercontent.com/showC0de-proFile/logos/main/label-color.svg",target:"_blank",rel:"nofollow noopener noreferrer",children:e(o.img,{src:"https://raw.githubusercontent.com/showC0de-proFile/logos/main/label-color.svg",alt:"Color Tokens"})})}),` `,e(o.h1,{id:"colors",children:"Colors"}),` `,e(o.p,{children:"The color token system in the ds-tsm Design System provides a set of predefined colors that can be used consistently throughout your project. These tokens simplify the process of managing and applying colors, ensuring visual consistency across your UI."}),` `,e(w,{})]})}function S(t={}){const{wrapper:o}=Object.assign({},l(),t.components);return o?e(o,{...t,children:e(a,{...t})}):a(t)}const k=()=>{throw new Error("Docs-only story")};k.parameters={docsOnly:!0};const s={title:"Tokens/Colors",tags:["stories-mdx"],includeStories:["__page"]};s.parameters=s.parameters||{};s.parameters.docs={...s.parameters.docs||{},page:S};const z=["__page"];export{z as __namedExportsOrder,k as __page,s as default};