https://kiku.listen.org/3524.618db42055e1fdce.bundle.js

1"use strict";(self["webpackChunkclient"]=self["webpackChunkclient"]||[]).push([[3524],{53524:function(s,l,e){e.r(l),e.d(l,{default:function(){return U}});var a=e(20641),i=e(90033);const c={class:"design-system o-fullwidth"},t={class:"ds-header"},o={class:"ds-header-actions"},n={class:"icon"},d={class:"ds-section"},r={class:"ds-block-title"},u={class:"ds-matrix-headrow"},k={class:"ds-matrix-cell ds-matrix-rowhead"},b=["disabled"],g={key:0,class:"icon-text"},p={class:"icon is-small"},h={class:"ds-section"},v={class:"ds-block-title"},m={class:"ds-matrix-headrow"},L={class:"ds-matrix-cell ds-matrix-rowhead"},y={key:0,class:"icon-text"},x={class:"icon is-small"},C={class:"ds-section"},f={class:"ds-cards-grid"},w={class:"ds-card-cell-label"},I={class:"ds-section"},E={class:"ds-block-title"},X={class:"ds-swatches"},S=["title"],$={class:"ds-swatch-label"},_={class:"ds-section"},F={class:"ds-grid-block"},T={class:"ds-scale-grid"},W={class:"ds-scale-label"},z={class:"ds-scale-value"},K={class:"ds-grid-block"},D={class:"ds-radius-grid"},B={class:"ds-radius-label"},A={class:"ds-radius-value"},G={class:"ds-section"},P={class:"ds-grid-block"},q={class:"ds-type-grid"},H={class:"ds-type-label"};function V(s,l,e,V,j,N){const R=(0,a.g2)("font-awesome-icon"),U=(0,a.g2)("b-notification");return(0,a.uX)(),(0,a.CE)("div",c,[(0,a.Lk)("header",t,[l[1]||(l[1]=(0,a.Lk)("div",null,[(0,a.Lk)("h1",{class:"ds-title"},"Design System"),(0,a.Lk)("p",{class:"ds-subtitle"},"Buttons, tags, notifications, colors & spacing. Use the theme picker to preview every variant under each chrome preset.")],-1)),(0,a.Lk)("div",o,[(0,a.Lk)("button",{class:"button is-primary is-rounded",onClick:l[0]||(l[0]=(...s)=>N.openThemeSidebar&&N.openThemeSidebar(...s))},[(0,a.Lk)("span",n,[(0,a.bF)(R,{icon:"fa-light fa-palette"})]),(0,a.Lk)("span",null,(0,i.v_)(s.$t("Theme appearance")),1)])])]),(0,a.Lk)("section",d,[l[4]||(l[4]=(0,a.Lk)("h2",{class:"ds-section-title"},"Buttons",-1)),l[5]||(l[5]=(0,a.Lk)("p",{class:"ds-section-hint"},[(0,a.eW)(" Every color × size × state combination. All have "),(0,a.Lk)("code",null,"is-rounded"),(0,a.eW)(" per project standard. ")],-1)),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.buttonSizes,s=>((0,a.uX)(),(0,a.CE)("div",{key:`btn-size-${s.cls}`,class:"ds-grid-block"},[(0,a.Lk)("h3",r,[l[2]||(l[2]=(0,a.eW)(" Size: ",-1)),(0,a.Lk)("code",null,(0,i.v_)(s.label),1)]),(0,a.Lk)("div",{class:"ds-matrix",style:(0,i.Tr)({"--matrix-cols":j.buttonStates.length})},[(0,a.Lk)("div",u,[l[3]||(l[3]=(0,a.Lk)("div",{class:"ds-matrix-cell ds-matrix-corner"},"color / style",-1)),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.buttonStates,(s,l)=>((0,a.uX)(),(0,a.CE)("div",{key:`hdr-${l}-${s.label}`,class:"ds-matrix-cell ds-matrix-headcell"},(0,i.v_)(s.label),1))),128))]),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.buttonColors,l=>((0,a.uX)(),(0,a.CE)("div",{key:`row-${s.cls}-${l.cls}`,class:"ds-matrix-row"},[(0,a.Lk)("div",k,(0,i.v_)(l.label),1),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.buttonStates,(e,c)=>((0,a.uX)(),(0,a.CE)("div",{key:`cell-${s.cls}-${l.cls}-${c}`,class:"ds-matrix-cell"},[(0,a.Lk)("button",{class:(0,i.C4)(["button is-rounded",[s.cls,l.cls,e.cls]]),disabled:"is-disabled"===e.cls||e.disabled},[e.withIcon?((0,a.uX)(),(0,a.CE)("span",g,[(0,a.Lk)("span",p,[(0,a.bF)(R,{icon:"fa-light fa-user"})]),(0,a.Lk)("span",null,(0,i.v_)(l.label),1)])):((0,a.uX)(),(0,a.CE)(a.FK,{key:1},[(0,a.eW)((0,i.v_)(l.label),1)],64))],10,b)]))),128))]))),128))],4)]))),128))]),(0,a.Lk)("section",h,[l[8]||(l[8]=(0,a.Lk)("h2",{class:"ds-section-title"},"Tags",-1)),l[9]||(l[9]=(0,a.Lk)("p",{class:"ds-section-hint"},[(0,a.eW)(" Status indicators & badges. All "),(0,a.Lk)("code",null,"is-rounded"),(0,a.eW)(" . ")],-1)),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.tagSizes,s=>((0,a.uX)(),(0,a.CE)("div",{key:`tag-size-${s.cls||"default"}`,class:"ds-grid-block"},[(0,a.Lk)("h3",v,[l[6]||(l[6]=(0,a.eW)(" Size: ",-1)),(0,a.Lk)("code",null,(0,i.v_)(s.label),1)]),(0,a.Lk)("div",{class:"ds-matrix",style:(0,i.Tr)({"--matrix-cols":j.tagStyles.length})},[(0,a.Lk)("div",m,[l[7]||(l[7]=(0,a.Lk)("div",{class:"ds-matrix-cell ds-matrix-corner"},"color / style",-1)),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.tagStyles,(s,l)=>((0,a.uX)(),(0,a.CE)("div",{key:`tag-hdr-${l}-${s.label}`,class:"ds-matrix-cell ds-matrix-headcell"},(0,i.v_)(s.label),1))),128))]),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.tagColors,l=>((0,a.uX)(),(0,a.CE)("div",{key:`tag-row-${s.cls||"default"}-${l.cls}`,class:"ds-matrix-row"},[(0,a.Lk)("div",L,(0,i.v_)(l.label),1),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.tagStyles,(e,c)=>((0,a.uX)(),(0,a.CE)("div",{key:`tag-cell-${s.cls||"default"}-${l.cls}-${c}`,class:"ds-matrix-cell"},[(0,a.Lk)("span",{class:(0,i.C4)(["tag is-rounded",[s.cls,l.cls,e.cls]])},[e.withIcon?((0,a.uX)(),(0,a.CE)("span",y,[(0,a.Lk)("span",x,[(0,a.bF)(R,{icon:"fa-light fa-user"})]),(0,a.Lk)("span",null,(0,i.v_)(l.label),1)])):((0,a.uX)(),(0,a.CE)(a.FK,{key:1},[(0,a.eW)((0,i.v_)(l.label),1)],64))],2)]))),128))]))),128))],4)]))),128))]),(0,a.Lk)("section",C,[l[11]||(l[11]=(0,a.Lk)("h2",{class:"ds-section-title"},"Notifications",-1)),l[12]||(l[12]=(0,a.Lk)("p",{class:"ds-section-hint"},[(0,a.eW)(" Inline feedback panels. Pair the semantic color with "),(0,a.Lk)("code",null,"is-light"),(0,a.eW)(" or "),(0,a.Lk)("code",null,"has-icon"),(0,a.eW)(" as needed. ")],-1)),(0,a.Lk)("div",f,[((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.notificationVariants,s=>((0,a.uX)(),(0,a.CE)("div",{key:`notif-${s.label}`,class:"ds-card-cell"},[(0,a.Lk)("div",w,[(0,a.Lk)("code",null,(0,i.v_)(s.label),1)]),(0,a.bF)(U,{type:s.type,"has-icon":s.hasIcon,"aria-close-label":"Close notification"},{default:(0,a.k6)(()=>[...l[10]||(l[10]=[(0,a.eW)(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. ",-1)])]),_:1},8,["type","has-icon"])]))),128))])]),(0,a.Lk)("section",I,[l[13]||(l[13]=(0,a.Lk)("h2",{class:"ds-section-title"},"Color tokens",-1)),l[14]||(l[14]=(0,a.Lk)("p",{class:"ds-section-hint"},[(0,a.eW)(" Semantic "),(0,a.Lk)("code",null,"--orgo-*"),(0,a.eW)(" and "),(0,a.Lk)("code",null,"--bulma-*"),(0,a.eW)(" variables. Hover a swatch to see its computed value. ")],-1)),((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.colorTokenGroups,s=>((0,a.uX)(),(0,a.CE)("div",{key:`color-group-${s.title}`,class:"ds-grid-block"},[(0,a.Lk)("h3",E,(0,i.v_)(s.title),1),(0,a.Lk)("div",X,[((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(s.tokens,s=>((0,a.uX)(),(0,a.CE)("div",{key:`tok-${s}`,class:"ds-swatch",title:s},[(0,a.Lk)("div",{class:"ds-swatch-color",style:(0,i.Tr)({background:`var(${s})`})},null,4),(0,a.Lk)("code",$,(0,i.v_)(s),1)],8,S))),128))])]))),128))]),(0,a.Lk)("section",_,[l[17]||(l[17]=(0,a.Lk)("h2",{class:"ds-section-title"},"Spacing & radius",-1)),l[18]||(l[18]=(0,a.Lk)("p",{class:"ds-section-hint"},[(0,a.eW)(" 8px grid ( "),(0,a.Lk)("code",null,"--orgo-space-*"),(0,a.eW)(" ) and radius scale ( "),(0,a.Lk)("code",null,"--orgo-radius-*"),(0,a.eW)(" ). ")],-1)),(0,a.Lk)("div",F,[l[15]||(l[15]=(0,a.Lk)("h3",{class:"ds-block-title"},"Spacing",-1)),(0,a.Lk)("div",T,[((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.spacingTokens,s=>((0,a.uX)(),(0,a.CE)("div",{key:`sp-${s.token}`,class:"ds-scale-row"},[(0,a.Lk)("code",W,(0,i.v_)(s.token),1),(0,a.Lk)("div",{class:"ds-scale-bar",style:(0,i.Tr)({width:`var(${s.token})`})},null,4),(0,a.Lk)("span",z,(0,i.v_)(s.value),1)]))),128))])]),(0,a.Lk)("div",K,[l[16]||(l[16]=(0,a.Lk)("h3",{class:"ds-block-title"},"Border radius",-1)),(0,a.Lk)("div",D,[((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.radiusTokens,s=>((0,a.uX)(),(0,a.CE)("div",{key:`rad-${s.token}`,class:"ds-radius-cell"},[(0,a.Lk)("div",{class:"ds-radius-box",style:(0,i.Tr)({borderRadius:`var(${s.token})`})},null,4),(0,a.Lk)("code",B,(0,i.v_)(s.token),1),(0,a.Lk)("span",A,(0,i.v_)(s.value),1)]))),128))])])]),(0,a.Lk)("section",G,[l[19]||(l[19]=(0,a.Lk)("h2",{class:"ds-section-title"},"Typography",-1)),l[20]||(l[20]=(0,a.Lk)("p",{class:"ds-section-hint"},"Heading and text scale.",-1)),(0,a.Lk)("div",P,[(0,a.Lk)("div",q,[((0,a.uX)(!0),(0,a.CE)(a.FK,null,(0,a.pI)(j.typeScale,s=>((0,a.uX)(),(0,a.CE)("div",{key:`type-${s.cls}`,class:"ds-type-row"},[(0,a.Lk)("code",H,(0,i.v_)(s.cls),1),(0,a.Lk)("span",{class:(0,i.C4)(s.cls)},"The quick brown fox",2)]))),128))])])])])}var j={name:"DesignSystem",data(){return{buttonSizes:[{cls:"is-small",label:"small"},{cls:"",label:"default"},{cls:"is-medium",label:"medium"},{cls:"is-large",label:"large"}],buttonColors:[{cls:"is-primary",label:"Primary"},{cls:"is-link",label:"Link"},{cls:"is-info",label:"Info"},{cls:"is-success",label:"Success"},{cls:"is-warning",label:"Warning"},{cls:"is-danger",label:"Danger"},{cls:"is-dark",label:"Dark"},{cls:"is-light",label:"Light"},{cls:"is-white",label:"White"},{cls:"is-text",label:"Text"},{cls:"is-ghost",label:"Ghost"}],buttonStates:[{cls:"",label:"solid"},{cls:"is-passive",label:"passive"},{cls:"is-outlined",label:"outlined"},{cls:"is-loading",label:"loading"},{cls:"is-disabled",label:"disabled",disabled:!0},{cls:"",label:"with icon",withIcon:!0}],tagSizes:[{cls:"",label:"default"},{cls:"is-medium",label:"medium"},{cls:"is-large",label:"large"}],tagColors:[{cls:"is-primary",label:"Primary"},{cls:"is-link",label:"Link"},{cls:"is-info",label:"Info"},{cls:"is-success",label:"Success"},{cls:"is-warning",label:"Warning"},{cls:"is-danger",label:"Danger"},{cls:"is-dark",label:"Dark"},{cls:"is-light",label:"Light"}],tagStyles:[{cls:"",label:"solid"},{cls:"is-passive",label:"passive"},{cls:"",label:"with icon",withIcon:!0}],notificationVariants:[{label:"is-info",type:"is-info",hasIcon:!1},{label:"is-info is-light",type:"is-info is-light",hasIcon:!1},{label:"is-success",type:"is-success",hasIcon:!1},{label:"is-success is-light",type:"is-success is-light",hasIcon:!1},{label:"is-warning",type:"is-warning",hasIcon:!1},{label:"is-warning is-light",type:"is-warning is-light",hasIcon:!1},{label:"is-danger",type:"is-danger",hasIcon:!1},{label:"is-danger is-light",type:"is-danger is-light",hasIcon:!1},{label:"is-info + icon",type:"is-info",hasIcon:!0},{label:"is-success + icon",type:"is-success",hasIcon:!0},{label:"is-warning + icon",type:"is-warning",hasIcon:!0},{label:"is-danger + icon",type:"is-danger",hasIcon:!0}],colorTokenGroups:[{title:"Surface / chrome",tokens:["--orgo-app-bg","--orgo-card-bg","--orgo-card-border","--orgo-hr"]},{title:"Text",tokens:["--orgo-body-text","--bulma-text","--bulma-text-strong","--bulma-text-weak"]},{title:"Brand & semantic",tokens:["--orgo-color-primary","--bulma-primary","--bulma-link","--bulma-info","--bulma-success","--bulma-warning","--bulma-danger"]}],spacingTokens:[{token:"--orgo-space-xs",value:"4px"},{token:"--orgo-space-sm",value:"8px"},{token:"--orgo-space-md",value:"16px"},{token:"--orgo-space-lg",value:"24px"},{token:"--orgo-space-xl",value:"32px"}],radiusTokens:[{token:"--orgo-radius-sm",value:"8px"},{token:"--orgo-radius-md",value:"12px"},{token:"--orgo-radius-lg",value:"14px"},{token:"--orgo-radius-full",value:"9999px"}],typeScale:[{cls:"is-size-1"},{cls:"is-size-2"},{cls:"is-size-3"},{cls:"is-size-4"},{cls:"is-size-5"},{cls:"is-size-6"},{cls:"is-size-6-half"},{cls:"is-size-7"}]}},methods:{openThemeSidebar(){this.$store.commit("openThemeSidebar")}}},N=e(66262);const R=(0,N.A)(j,[["render",V],["__scopeId","data-v-612434e3"]]

1);var U=R}}]);