import{j as o}from"./iframe-p4aYZyoq.js";import"./preload-helper-BDBacUwf.js";const n={title:"Core/Colours"},e=()=>o.jsxs("section",{children:[o.jsx("h1",{children:"Colours"}),o.jsxs("section",{children:[o.jsx("h2",{children:"Primary palette"}),o.jsx("div",{className:"box-colour colour-sapphire-blue","data-name":"$colour-sapphire-blue"}),o.jsx("div",{className:"box-colour colour-sea-blue","data-name":"$colour-sea-blue"}),o.jsx("div",{className:"box-colour colour-vivid-cerulean","data-name":"$colour-vivid-cerulean"}),o.jsx("div",{className:"box-colour colour-medium-turquoise","data-name":"$colour-medium-turquoise"}),o.jsx("div",{className:"box-colour colour-gainsborough","data-name":"$colour-gainsborough"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Grey Palette"}),o.jsx("div",{className:"box-colour colour-yankees-blue","data-name":"$colour-yankees-blue"}),o.jsx("div",{className:"box-colour colour-independence","data-name":"$colour-independence"}),o.jsx("div",{className:"box-colour colour-weldon-blue","data-name":"$colour-weldon-blue"}),o.jsx("div",{className:"box-colour colour-pastel-blue","data-name":"$colour-pastel-blue"}),o.jsx("div",{className:"box-colour colour-platinum","data-name":"$colour-platinum"}),o.jsx("div",{className:"box-colour colour-sky-white","data-name":"$colour-sky-white"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Curation palette"}),o.jsx("div",{className:"box-colour colour-reviewed","data-name":"$colour-reviewed"}),o.jsx("div",{className:"box-colour colour-unreviewed","data-name":"$colour-unreviewed"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Namespace palette"}),o.jsx("div",{className:"box-colour colour-uniref","data-name":"$colour-uniref"}),o.jsx("div",{className:"box-colour colour-uniparc","data-name":"$colour-uniparc"}),o.jsx("div",{className:"box-colour colour-proteomes","data-name":"$colour-proteomes"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Help palette"}),o.jsx("div",{className:"box-colour colour-help-green","data-name":"$colour-help-green"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Tools palette"}),o.jsx("div",{className:"box-colour colour-peptide-search","data-name":"$colour-peptide-search"}),o.jsx("div",{className:"box-colour colour-id-mapping","data-name":"$colour-id-mapping"}),o.jsx("div",{className:"box-colour colour-blast","data-name":"$colour-blast"}),o.jsx("div",{className:"box-colour colour-align","data-name":"$colour-align"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Messages"}),o.jsx("div",{className:"box-colour colour-warning","data-name":"$colour-warning"}),o.jsx("div",{className:"box-colour colour-failure","data-name":"$colour-failure"}),o.jsx("div",{className:"box-colour colour-success","data-name":"$colour-success"}),o.jsx("div",{className:"box-colour colour-info","data-name":"$colour-info"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Data visualisation"}),o.jsx("div",{className:"box-colour colour-coyote-brown","data-name":"$colour-coyote-brown"}),o.jsx("div",{className:"box-colour colour-outer-space","data-name":"$colour-outer-space"})]}),o.jsx("hr",{}),o.jsxs("section",{children:[o.jsx("h2",{children:"Variables"}),o.jsxs("ul",{children:[o.jsxs("li",{children:[o.jsx("code",{children:"$colour-link"}),": the colour of something clickable"]}),o.jsxs("li",{children:[o.jsx("code",{children:"$colour-selected"}),': the colour of something "active" or "selected"']}),o.jsxs("li",{children:[o.jsx("code",{children:"$colour-hover"}),": the colour of something selectable on mouse hover"]})]})]})]});var a,l,c;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`() => <section>
    <h1>Colours</h1>
    <section>
      <h2>Primary palette</h2>
      <div className="box-colour colour-sapphire-blue" data-name="$colour-sapphire-blue" />
      <div className="box-colour colour-sea-blue" data-name="$colour-sea-blue" />
      <div className="box-colour colour-vivid-cerulean" data-name="$colour-vivid-cerulean" />
      <div className="box-colour colour-medium-turquoise" data-name="$colour-medium-turquoise" />
      <div className="box-colour colour-gainsborough" data-name="$colour-gainsborough" />
    </section>
    <hr />
    <section>
      <h2>Grey Palette</h2>
      <div className="box-colour colour-yankees-blue" data-name="$colour-yankees-blue" />
      <div className="box-colour colour-independence" data-name="$colour-independence" />
      <div className="box-colour colour-weldon-blue" data-name="$colour-weldon-blue" />
      <div className="box-colour colour-pastel-blue" data-name="$colour-pastel-blue" />
      <div className="box-colour colour-platinum" data-name="$colour-platinum" />
      <div className="box-colour colour-sky-white" data-name="$colour-sky-white" />
    </section>
    <hr />
    <section>
      <h2>Curation palette</h2>
      <div className="box-colour colour-reviewed" data-name="$colour-reviewed" />
      <div className="box-colour colour-unreviewed" data-name="$colour-unreviewed" />
    </section>
    <hr />
    <section>
      <h2>Namespace palette</h2>
      <div className="box-colour colour-uniref" data-name="$colour-uniref" />
      <div className="box-colour colour-uniparc" data-name="$colour-uniparc" />
      <div className="box-colour colour-proteomes" data-name="$colour-proteomes" />
    </section>
    <hr />
    <section>
      <h2>Help palette</h2>
      <div className="box-colour colour-help-green" data-name="$colour-help-green" />
    </section>
    <hr />
    <section>
      <h2>Tools palette</h2>
      <div className="box-colour colour-peptide-search" data-name="$colour-peptide-search" />
      <div className="box-colour colour-id-mapping" data-name="$colour-id-mapping" />
      <div className="box-colour colour-blast" data-name="$colour-blast" />
      <div className="box-colour colour-align" data-name="$colour-align" />
    </section>
    <hr />
    <section>
      <h2>Messages</h2>
      <div className="box-colour colour-warning" data-name="$colour-warning" />
      <div className="box-colour colour-failure" data-name="$colour-failure" />
      <div className="box-colour colour-success" data-name="$colour-success" />
      <div className="box-colour colour-info" data-name="$colour-info" />
    </section>
    <hr />
    <section>
      <h2>Data visualisation</h2>
      <div className="box-colour colour-coyote-brown" data-name="$colour-coyote-brown" />
      <div className="box-colour colour-outer-space" data-name="$colour-outer-space" />
    </section>
    <hr />
    <section>
      <h2>Variables</h2>
      <ul>
        <li>
          <code>$colour-link</code>: the colour of something clickable
        </li>
        <li>
          <code>$colour-selected</code>: the colour of something
          &quot;active&quot; or &quot;selected&quot;
        </li>
        <li>
          <code>$colour-hover</code>: the colour of something selectable on
          mouse hover
        </li>
      </ul>
    </section>
  </section>`,...(c=(l=e.parameters)==null?void 0:l.docs)==null?void 0:c.source}}};const u=["Colours"];export{e as Colours,u as __namedExportsOrder,n as default};
