[{"data":1,"prerenderedAt":982},["Reactive",2],{"content-query-FygW6FwCrD":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"_empty":6,"title":8,"description":9,"layout":5,"body":10,"_type":977,"_id":978,"_source":979,"_file":980,"_extension":981},"/docs/concepts","docs",false,"","Concepts - Inkline","Learn more about the intuitive concepts used throughout the UI Library and Inkline's design decisions.",{"type":11,"children":12,"toc":971},"root",[13,22,28,35,41,147,153,170,175,235,268,275,280,376,382,394,511,517,542,673,679,684,712,769,814,822,905,955,966],{"type":14,"tag":15,"props":16,"children":18},"element","h1",{"id":17},"concepts",[19],{"type":20,"value":21},"text","Concepts",{"type":14,"tag":23,"props":24,"children":26},"h2",{"id":25},"learn-more-about-the-intuitive-concepts-used-throughout-the-ui-library-and-inklines-design-decisions",[27],{"type":20,"value":9},{"type":14,"tag":29,"props":30,"children":32},"h3",{"id":31},"component-naming-convention",[33],{"type":20,"value":34},"Component Naming Convention",{"type":14,"tag":36,"props":37,"children":38},"p",{},[39],{"type":20,"value":40},"When designing Inkline, component names and prop names were chosen to be as intuitive as possible. The naming rules are:",{"type":14,"tag":42,"props":43,"children":44},"ul",{},[45,65,95,119],{"type":14,"tag":46,"props":47,"children":48},"li",{},[49,55,57,63],{"type":14,"tag":50,"props":51,"children":52},"strong",{},[53],{"type":20,"value":54},"Namespacing",{"type":20,"value":56}," - Component names should be namespaced using the ",{"type":14,"tag":58,"props":59,"children":60},"code-inline",{},[61],{"type":20,"value":62},"I",{"type":20,"value":64}," prefix to be easily recognizable and to avoid conflicts.",{"type":14,"tag":46,"props":66,"children":67},{},[68,73,75,80,82,87,88,93],{"type":14,"tag":50,"props":69,"children":70},{},[71],{"type":20,"value":72},"Simplicity",{"type":20,"value":74}," - Component names should be simple words where possible in order for them to be easy to remember: ",{"type":14,"tag":58,"props":76,"children":77},{},[78],{"type":20,"value":79},"IContainer",{"type":20,"value":81},", ",{"type":14,"tag":58,"props":83,"children":84},{},[85],{"type":20,"value":86},"IButton",{"type":20,"value":81},{"type":14,"tag":58,"props":89,"children":90},{},[91],{"type":20,"value":92},"INavbar",{"type":20,"value":94},", etc.",{"type":14,"tag":46,"props":96,"children":97},{},[98,103,105,110,112,117],{"type":14,"tag":50,"props":99,"children":100},{},[101],{"type":20,"value":102},"Clarity",{"type":20,"value":104}," - Component names should clearly reflect parent-child component relationships: ",{"type":14,"tag":58,"props":106,"children":107},{},[108],{"type":20,"value":109},"INav",{"type":20,"value":111}," and ",{"type":14,"tag":58,"props":113,"children":114},{},[115],{"type":20,"value":116},"INavItem",{"type":20,"value":118},".",{"type":14,"tag":46,"props":120,"children":121},{},[122,127,129,134,135,140,141,146],{"type":14,"tag":50,"props":123,"children":124},{},[125],{"type":20,"value":126},"Consistency",{"type":20,"value":128}," - Component prop names should be reused as often as possible to promote consistency: ",{"type":14,"tag":58,"props":130,"children":131},{},[132],{"type":20,"value":133},"color",{"type":20,"value":81},{"type":14,"tag":58,"props":136,"children":137},{},[138],{"type":20,"value":139},"size",{"type":20,"value":81},{"type":14,"tag":58,"props":142,"children":143},{},[144],{"type":20,"value":145},"disabled",{"type":20,"value":94},{"type":14,"tag":29,"props":148,"children":150},{"id":149},"css-naming-convention",[151],{"type":20,"value":152},"CSS Naming Convention",{"type":14,"tag":36,"props":154,"children":155},{},[156,158,168],{"type":20,"value":157},"Inkline uses ",{"type":14,"tag":159,"props":160,"children":165},"a",{"href":161,"rel":162,"target":164},"https://ricostacruz.com/rscss/",[163],"nofollow","_blank",[166],{"type":20,"value":167},"RSCSS",{"type":20,"value":169}," (Reasonable System for CSS Stylesheet Structure) principles as a base for naming classes, making them much easier to read and write. RSCSS is a simplified, more readable version of BEM.",{"type":14,"tag":36,"props":171,"children":172},{},[173],{"type":20,"value":174},"The RSCSS naming convention encourages you to think in components and revolves around three core concepts: components, variants and utilities.",{"type":14,"tag":176,"props":177,"children":182},"code",{"className":178,"code":180,"language":181,"meta":7},[179],"language-html","\u003Cdiv class=\"container -fluid _text:center\">\n","html",[183],{"type":14,"tag":184,"props":185,"children":186},"pre",{},[187],{"type":14,"tag":176,"props":188,"children":189},{"__ignoreMap":7},[190],{"type":14,"tag":191,"props":192,"children":195},"span",{"class":193,"line":194},"line",1,[196,202,208,213,219,224,230],{"type":14,"tag":191,"props":197,"children":199},{"class":198},"ct-553616",[200],{"type":20,"value":201},"\u003C",{"type":14,"tag":191,"props":203,"children":205},{"class":204},"ct-914029",[206],{"type":20,"value":207},"div",{"type":14,"tag":191,"props":209,"children":210},{"class":198},[211],{"type":20,"value":212}," ",{"type":14,"tag":191,"props":214,"children":216},{"class":215},"ct-762058",[217],{"type":20,"value":218},"class",{"type":14,"tag":191,"props":220,"children":221},{"class":198},[222],{"type":20,"value":223},"=",{"type":14,"tag":191,"props":225,"children":227},{"class":226},"ct-952708",[228],{"type":20,"value":229},"\"container -fluid _text:center\"",{"type":14,"tag":191,"props":231,"children":232},{"class":198},[233],{"type":20,"value":234},">",{"type":14,"tag":42,"props":236,"children":237},{},[238,248,258],{"type":14,"tag":46,"props":239,"children":240},{},[241,246],{"type":14,"tag":58,"props":242,"children":243},{},[244],{"type":20,"value":245},".container",{"type":20,"value":247}," represents a component class",{"type":14,"tag":46,"props":249,"children":250},{},[251,256],{"type":14,"tag":58,"props":252,"children":253},{},[254],{"type":20,"value":255},".-fluid",{"type":20,"value":257}," represents a variant class, specific to the component",{"type":14,"tag":46,"props":259,"children":260},{},[261,266],{"type":14,"tag":58,"props":262,"children":263},{},[264],{"type":20,"value":265},"._text:center",{"type":20,"value":267}," represents a utility class",{"type":14,"tag":269,"props":270,"children":272},"h5",{"id":271},"components",[273],{"type":20,"value":274},"Components",{"type":14,"tag":36,"props":276,"children":277},{},[278],{"type":20,"value":279},"Components are standalone entities that are meaningful on their own. Each component should be aware of its own design only, and should be usable without a specific context unless it's the only context they should be used in.",{"type":14,"tag":176,"props":281,"children":286},{"className":282,"code":284,"language":285,"meta":7},[283],"language-scss",".navbar { /* ... */ }\n\n.container { /* ... */ }\n\n.button { /* ... */ }\n","scss",[287],{"type":14,"tag":184,"props":288,"children":289},{},[290],{"type":14,"tag":176,"props":291,"children":292},{"__ignoreMap":7},[293,317,326,346,354],{"type":14,"tag":191,"props":294,"children":295},{"class":193,"line":194},[296,301,306,312],{"type":14,"tag":191,"props":297,"children":298},{"class":215},[299],{"type":20,"value":300},".navbar",{"type":14,"tag":191,"props":302,"children":303},{"class":198},[304],{"type":20,"value":305}," { ",{"type":14,"tag":191,"props":307,"children":309},{"class":308},"ct-086898",[310],{"type":20,"value":311},"/* ... */",{"type":14,"tag":191,"props":313,"children":314},{"class":198},[315],{"type":20,"value":316}," }\n",{"type":14,"tag":191,"props":318,"children":320},{"class":193,"line":319},2,[321],{"type":14,"tag":191,"props":322,"children":323},{},[324],{"type":20,"value":325},"\n",{"type":14,"tag":191,"props":327,"children":329},{"class":193,"line":328},3,[330,334,338,342],{"type":14,"tag":191,"props":331,"children":332},{"class":215},[333],{"type":20,"value":245},{"type":14,"tag":191,"props":335,"children":336},{"class":198},[337],{"type":20,"value":305},{"type":14,"tag":191,"props":339,"children":340},{"class":308},[341],{"type":20,"value":311},{"type":14,"tag":191,"props":343,"children":344},{"class":198},[345],{"type":20,"value":316},{"type":14,"tag":191,"props":347,"children":349},{"class":193,"line":348},4,[350],{"type":14,"tag":191,"props":351,"children":352},{},[353],{"type":20,"value":325},{"type":14,"tag":191,"props":355,"children":357},{"class":193,"line":356},5,[358,363,367,371],{"type":14,"tag":191,"props":359,"children":360},{"class":215},[361],{"type":20,"value":362},".button",{"type":14,"tag":191,"props":364,"children":365},{"class":198},[366],{"type":20,"value":305},{"type":14,"tag":191,"props":368,"children":369},{"class":308},[370],{"type":20,"value":311},{"type":14,"tag":191,"props":372,"children":373},{"class":198},[374],{"type":20,"value":375}," }",{"type":14,"tag":269,"props":377,"children":379},{"id":378},"variants",[380],{"type":20,"value":381},"Variants",{"type":14,"tag":36,"props":383,"children":384},{},[385,387,392],{"type":20,"value":386},"Components may have variants that modify their appearance or behaviour. Class names for variants will be prefixed by a dash (",{"type":14,"tag":58,"props":388,"children":389},{},[390],{"type":20,"value":391},"-",{"type":20,"value":393},").",{"type":14,"tag":176,"props":395,"children":398},{"className":396,"code":397,"language":285,"meta":7},[283],".button {\n    &.-primary { /* ... */ }\n    &.-disabled { /* ... */ }\n    &.-block { /* ... */ }\n}\n",[399],{"type":14,"tag":184,"props":400,"children":401},{},[402],{"type":14,"tag":176,"props":403,"children":404},{"__ignoreMap":7},[405,417,447,475,503],{"type":14,"tag":191,"props":406,"children":407},{"class":193,"line":194},[408,412],{"type":14,"tag":191,"props":409,"children":410},{"class":215},[411],{"type":20,"value":362},{"type":14,"tag":191,"props":413,"children":414},{"class":198},[415],{"type":20,"value":416}," {\n",{"type":14,"tag":191,"props":418,"children":419},{"class":193,"line":319},[420,425,430,435,439,443],{"type":14,"tag":191,"props":421,"children":422},{"class":198},[423],{"type":20,"value":424},"    ",{"type":14,"tag":191,"props":426,"children":427},{"class":204},[428],{"type":20,"value":429},"&",{"type":14,"tag":191,"props":431,"children":432},{"class":215},[433],{"type":20,"value":434},".-primary",{"type":14,"tag":191,"props":436,"children":437},{"class":198},[438],{"type":20,"value":305},{"type":14,"tag":191,"props":440,"children":441},{"class":308},[442],{"type":20,"value":311},{"type":14,"tag":191,"props":444,"children":445},{"class":198},[446],{"type":20,"value":316},{"type":14,"tag":191,"props":448,"children":449},{"class":193,"line":328},[450,454,458,463,467,471],{"type":14,"tag":191,"props":451,"children":452},{"class":198},[453],{"type":20,"value":424},{"type":14,"tag":191,"props":455,"children":456},{"class":204},[457],{"type":20,"value":429},{"type":14,"tag":191,"props":459,"children":460},{"class":215},[461],{"type":20,"value":462},".-disabled",{"type":14,"tag":191,"props":464,"children":465},{"class":198},[466],{"type":20,"value":305},{"type":14,"tag":191,"props":468,"children":469},{"class":308},[470],{"type":20,"value":311},{"type":14,"tag":191,"props":472,"children":473},{"class":198},[474],{"type":20,"value":316},{"type":14,"tag":191,"props":476,"children":477},{"class":193,"line":348},[478,482,486,491,495,499],{"type":14,"tag":191,"props":479,"children":480},{"class":198},[481],{"type":20,"value":424},{"type":14,"tag":191,"props":483,"children":484},{"class":204},[485],{"type":20,"value":429},{"type":14,"tag":191,"props":487,"children":488},{"class":215},[489],{"type":20,"value":490},".-block",{"type":14,"tag":191,"props":492,"children":493},{"class":198},[494],{"type":20,"value":305},{"type":14,"tag":191,"props":496,"children":497},{"class":308},[498],{"type":20,"value":311},{"type":14,"tag":191,"props":500,"children":501},{"class":198},[502],{"type":20,"value":316},{"type":14,"tag":191,"props":504,"children":505},{"class":193,"line":356},[506],{"type":14,"tag":191,"props":507,"children":508},{"class":198},[509],{"type":20,"value":510},"}",{"type":14,"tag":269,"props":512,"children":514},{"id":513},"utilities",[515],{"type":20,"value":516},"Utilities",{"type":14,"tag":36,"props":518,"children":519},{},[520,522,527,529,534,536,541],{"type":20,"value":521},"Utility classes are general-purpose helper classes meant to override values. Class names for helpers will be prefixed by an underscore (",{"type":14,"tag":58,"props":523,"children":524},{},[525],{"type":20,"value":526},"_",{"type":20,"value":528},"). When adding the ",{"type":14,"tag":58,"props":530,"children":531},{},[532],{"type":20,"value":533},"!",{"type":20,"value":535}," suffix, helpers provide styles that are tagged with ",{"type":14,"tag":58,"props":537,"children":538},{},[539],{"type":20,"value":540},"!important",{"type":20,"value":118},{"type":14,"tag":176,"props":543,"children":546},{"className":544,"code":545,"language":285,"meta":7},[283],"._margin:0 { margin: 0; }\n\n._text:center { text-align: center; }\n\n._display:flex! { display: flex !important; }\n",[547],{"type":14,"tag":184,"props":548,"children":549},{},[550],{"type":14,"tag":176,"props":551,"children":552},{"__ignoreMap":7},[553,587,594,625,632],{"type":14,"tag":191,"props":554,"children":555},{"class":193,"line":194},[556,561,566,572,577,582],{"type":14,"tag":191,"props":557,"children":558},{"class":215},[559],{"type":20,"value":560},"._margin",{"type":14,"tag":191,"props":562,"children":563},{"class":198},[564],{"type":20,"value":565},":0 { ",{"type":14,"tag":191,"props":567,"children":569},{"class":568},"ct-617022",[570],{"type":20,"value":571},"margin",{"type":14,"tag":191,"props":573,"children":574},{"class":198},[575],{"type":20,"value":576},": ",{"type":14,"tag":191,"props":578,"children":579},{"class":568},[580],{"type":20,"value":581},"0",{"type":14,"tag":191,"props":583,"children":584},{"class":198},[585],{"type":20,"value":586},"; }\n",{"type":14,"tag":191,"props":588,"children":589},{"class":193,"line":319},[590],{"type":14,"tag":191,"props":591,"children":592},{},[593],{"type":20,"value":325},{"type":14,"tag":191,"props":595,"children":596},{"class":193,"line":328},[597,602,607,612,616,621],{"type":14,"tag":191,"props":598,"children":599},{"class":215},[600],{"type":20,"value":601},"._text",{"type":14,"tag":191,"props":603,"children":604},{"class":198},[605],{"type":20,"value":606},":center { ",{"type":14,"tag":191,"props":608,"children":609},{"class":568},[610],{"type":20,"value":611},"text-align",{"type":14,"tag":191,"props":613,"children":614},{"class":198},[615],{"type":20,"value":576},{"type":14,"tag":191,"props":617,"children":618},{"class":568},[619],{"type":20,"value":620},"center",{"type":14,"tag":191,"props":622,"children":623},{"class":198},[624],{"type":20,"value":586},{"type":14,"tag":191,"props":626,"children":627},{"class":193,"line":348},[628],{"type":14,"tag":191,"props":629,"children":630},{},[631],{"type":20,"value":325},{"type":14,"tag":191,"props":633,"children":634},{"class":193,"line":356},[635,640,645,650,654,659,663,668],{"type":14,"tag":191,"props":636,"children":637},{"class":215},[638],{"type":20,"value":639},"._display",{"type":14,"tag":191,"props":641,"children":642},{"class":198},[643],{"type":20,"value":644},":flex! { ",{"type":14,"tag":191,"props":646,"children":647},{"class":568},[648],{"type":20,"value":649},"display",{"type":14,"tag":191,"props":651,"children":652},{"class":198},[653],{"type":20,"value":576},{"type":14,"tag":191,"props":655,"children":656},{"class":568},[657],{"type":20,"value":658},"flex",{"type":14,"tag":191,"props":660,"children":661},{"class":198},[662],{"type":20,"value":212},{"type":14,"tag":191,"props":664,"children":666},{"class":665},"ct-149352",[667],{"type":20,"value":540},{"type":14,"tag":191,"props":669,"children":670},{"class":198},[671],{"type":20,"value":672},"; }",{"type":14,"tag":269,"props":674,"children":676},{"id":675},"design-tokens",[677],{"type":20,"value":678},"Design Tokens",{"type":14,"tag":36,"props":680,"children":681},{},[682],{"type":20,"value":683},"CSS Variables in Inkline have a consistent naming scheme that you can follow whenever you want to redesign a component.",{"type":14,"tag":42,"props":685,"children":686},{},[687],{"type":14,"tag":46,"props":688,"children":689},{},[690,692,696,698,703,705,710],{"type":20,"value":691},"Global Design Tokens use only single hyphens ",{"type":14,"tag":58,"props":693,"children":694},{},[695],{"type":20,"value":391},{"type":20,"value":697},", can be either ",{"type":14,"tag":50,"props":699,"children":700},{},[701],{"type":20,"value":702},"standalone",{"type":20,"value":704}," or ",{"type":14,"tag":50,"props":706,"children":707},{},[708],{"type":20,"value":709},"composed",{"type":20,"value":711},", and are very intuitively named:",{"type":14,"tag":176,"props":713,"children":716},{"className":714,"code":715,"language":285,"meta":7},[283],"var(--padding); // var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left)\nvar(--color-primary) // var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) var(--color-primary-a)\n",[717],{"type":14,"tag":184,"props":718,"children":719},{},[720],{"type":14,"tag":176,"props":721,"children":722},{"__ignoreMap":7},[723,747],{"type":14,"tag":191,"props":724,"children":725},{"class":193,"line":194},[726,731,737,742],{"type":14,"tag":191,"props":727,"children":728},{"class":198},[729],{"type":20,"value":730},"var(",{"type":14,"tag":191,"props":732,"children":734},{"class":733},"ct-157101",[735],{"type":20,"value":736},"--padding",{"type":14,"tag":191,"props":738,"children":739},{"class":198},[740],{"type":20,"value":741},"); ",{"type":14,"tag":191,"props":743,"children":744},{"class":308},[745],{"type":20,"value":746},"// var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left)\n",{"type":14,"tag":191,"props":748,"children":749},{"class":193,"line":319},[750,754,759,764],{"type":14,"tag":191,"props":751,"children":752},{"class":198},[753],{"type":20,"value":730},{"type":14,"tag":191,"props":755,"children":756},{"class":733},[757],{"type":20,"value":758},"--color-primary",{"type":14,"tag":191,"props":760,"children":761},{"class":198},[762],{"type":20,"value":763},") ",{"type":14,"tag":191,"props":765,"children":766},{"class":308},[767],{"type":20,"value":768},"// var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) var(--color-primary-a)",{"type":14,"tag":176,"props":770,"children":773},{"className":771,"code":772,"language":285,"meta":7},[283],"var(--margin-top);\nvar(--font-weight-bold);\n",[774],{"type":14,"tag":184,"props":775,"children":776},{},[777],{"type":14,"tag":176,"props":778,"children":779},{"__ignoreMap":7},[780,797],{"type":14,"tag":191,"props":781,"children":782},{"class":193,"line":194},[783,787,792],{"type":14,"tag":191,"props":784,"children":785},{"class":198},[786],{"type":20,"value":730},{"type":14,"tag":191,"props":788,"children":789},{"class":733},[790],{"type":20,"value":791},"--margin-top",{"type":14,"tag":191,"props":793,"children":794},{"class":198},[795],{"type":20,"value":796},");\n",{"type":14,"tag":191,"props":798,"children":799},{"class":193,"line":319},[800,804,809],{"type":14,"tag":191,"props":801,"children":802},{"class":198},[803],{"type":20,"value":730},{"type":14,"tag":191,"props":805,"children":806},{"class":733},[807],{"type":20,"value":808},"--font-weight-bold",{"type":14,"tag":191,"props":810,"children":811},{"class":198},[812],{"type":20,"value":813},");",{"type":14,"tag":42,"props":815,"children":816},{},[817],{"type":14,"tag":46,"props":818,"children":819},{},[820],{"type":20,"value":821},"Component Design Tokens use the following naming convention:",{"type":14,"tag":176,"props":823,"children":826},{"className":824,"code":825,"language":285,"meta":7},[283],"var(--[component]--[variant]--[state]--[element]--[elementVariant]--[elementState]--[property])\n",[827],{"type":14,"tag":184,"props":828,"children":829},{},[830],{"type":14,"tag":176,"props":831,"children":832},{"__ignoreMap":7},[833],{"type":14,"tag":191,"props":834,"children":835},{"class":193,"line":194},[836,841,846,851,856,860,865,869,873,877,882,886,891,895,900],{"type":14,"tag":191,"props":837,"children":838},{"class":198},[839],{"type":20,"value":840},"var(--[",{"type":14,"tag":191,"props":842,"children":843},{"class":215},[844],{"type":20,"value":845},"component",{"type":14,"tag":191,"props":847,"children":848},{"class":198},[849],{"type":20,"value":850},"]--[",{"type":14,"tag":191,"props":852,"children":853},{"class":215},[854],{"type":20,"value":855},"variant",{"type":14,"tag":191,"props":857,"children":858},{"class":198},[859],{"type":20,"value":850},{"type":14,"tag":191,"props":861,"children":862},{"class":215},[863],{"type":20,"value":864},"state",{"type":14,"tag":191,"props":866,"children":867},{"class":198},[868],{"type":20,"value":850},{"type":14,"tag":191,"props":870,"children":871},{"class":215},[872],{"type":20,"value":14},{"type":14,"tag":191,"props":874,"children":875},{"class":198},[876],{"type":20,"value":850},{"type":14,"tag":191,"props":878,"children":879},{"class":215},[880],{"type":20,"value":881},"elementVariant",{"type":14,"tag":191,"props":883,"children":884},{"class":198},[885],{"type":20,"value":850},{"type":14,"tag":191,"props":887,"children":888},{"class":215},[889],{"type":20,"value":890},"elementState",{"type":14,"tag":191,"props":892,"children":893},{"class":198},[894],{"type":20,"value":850},{"type":14,"tag":191,"props":896,"children":897},{"class":215},[898],{"type":20,"value":899},"property",{"type":14,"tag":191,"props":901,"children":902},{"class":198},[903],{"type":20,"value":904},"])",{"type":14,"tag":176,"props":906,"children":909},{"className":907,"code":908,"language":285,"meta":7},[283],"var(--navbar--light--item--color);\n\nvar(--button--primary--disabled--background);\n",[910],{"type":14,"tag":184,"props":911,"children":912},{},[913],{"type":14,"tag":176,"props":914,"children":915},{"__ignoreMap":7},[916,932,939],{"type":14,"tag":191,"props":917,"children":918},{"class":193,"line":194},[919,923,928],{"type":14,"tag":191,"props":920,"children":921},{"class":198},[922],{"type":20,"value":730},{"type":14,"tag":191,"props":924,"children":925},{"class":733},[926],{"type":20,"value":927},"--navbar--light--item--color",{"type":14,"tag":191,"props":929,"children":930},{"class":198},[931],{"type":20,"value":796},{"type":14,"tag":191,"props":933,"children":934},{"class":193,"line":319},[935],{"type":14,"tag":191,"props":936,"children":937},{},[938],{"type":20,"value":325},{"type":14,"tag":191,"props":940,"children":941},{"class":193,"line":328},[942,946,951],{"type":14,"tag":191,"props":943,"children":944},{"class":198},[945],{"type":20,"value":730},{"type":14,"tag":191,"props":947,"children":948},{"class":733},[949],{"type":20,"value":950},"--button--primary--disabled--background",{"type":14,"tag":191,"props":952,"children":953},{"class":198},[954],{"type":20,"value":813},{"type":14,"tag":36,"props":956,"children":957},{},[958,964],{"type":14,"tag":159,"props":959,"children":961},{"href":960},"/docs/ui/design-tokens",[962],{"type":20,"value":963},"Read more",{"type":20,"value":965}," about the Design Tokens.",{"type":14,"tag":967,"children":968},"style",[969],{"type":20,"value":970},".ct-553616{color:#24292E;}\n.dark-theme .ct-553616{color:#E1E4E8;}\n.ct-914029{color:#22863A;}\n.dark-theme .ct-914029{color:#85E89D;}\n.ct-762058{color:#6F42C1;}\n.dark-theme .ct-762058{color:#B392F0;}\n.ct-952708{color:#032F62;}\n.dark-theme .ct-952708{color:#9ECBFF;}\n.ct-086898{color:#6A737D;}\n.ct-617022{color:#005CC5;}\n.dark-theme .ct-617022{color:#79B8FF;}\n.ct-149352{color:#D73A49;}\n.dark-theme .ct-149352{color:#F97583;}\n.ct-157101{color:#E36209;}\n.dark-theme .ct-157101{color:#FFAB70;}",{"title":7,"searchDepth":319,"depth":319,"links":972},[973],{"id":25,"depth":319,"text":9,"children":974},[975,976],{"id":31,"depth":328,"text":34},{"id":149,"depth":328,"text":152},"markdown","content:docs:concepts.md","content","docs/concepts.md","md",1794582256475]