@brightspot/ui 1.0.1-3 → 1.0.1-wc.1

package/dist/storybook/assets/Colors.stories-BiV2pS3d.js

@@ -1,79 +0,0 @@
-import{x as i}from"./iframe-DT_nhsJu.js";import"./preload-helper-PPVm8Dsz.js";const c=r=>i`
-    <div class="my-10">
-      <div
-        class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4"
-      >
-        <div class="z-9 sticky top-28 lg:top-14">
-          &nbsp;
-        </div>
-        <div
-          class="z-9 top-28 col-start-2 grid grid-cols-11 justify-items-center gap-1.5 font-medium *:rotate-180 *:[writing-mode:vertical-lr] max-sm:py-1 sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] lg:top-14"
-        >
-          ${[...r.palette?.keys()??[]].map(n=>i`<div>${n}</div>`)}
-        </div>
-        <div></div>
-        <div class="grid h-10 grid-cols-11 gap-1.5 sm:gap-4">
-          ${[...r.palette?.values()??[]].map(n=>i`<div class="${n} size-full"></div>`)}
-        </div>
-      </div>
-    </div>
-  `,d={title:"Design System/Colors",component:"btu-theme",tags:["autodocs"],parameters:{controls:{exclude:["palette"]},docs:{subtitle:"We've replaced the default Tailwind colors with our own palette to match the design vocabulary. Specifically replacing 'blue' with 'primary', 'green' with 'success', 'yellow' with 'warning', and 'red' with 'error'. For example, instead of 'bg-blue-400', use 'bg-primary-400'."}},render:r=>c(r)},e={parameters:{docs:{description:{story:"Used for primary call to actions, visual UI elements, active and clicked states, and focused containers."}}},args:{palette:new Map([["25","bg-primary-25"],["50","bg-primary-50"],["100","bg-primary-100"],["200","bg-primary-200"],["300","bg-primary-300"],["400","bg-primary-400"],["500","bg-primary-500"],["600","bg-primary-600"],["700","bg-primary-700"],["800","bg-primary-800"],["900","bg-primary-900"]])}},a={parameters:{docs:{description:{story:"Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."}}},args:{palette:new Map([["25","bg-success-25"],["50","bg-success-50"],["100","bg-success-100"],["200","bg-success-200"],["300","bg-success-300"],["400","bg-success-400"],["500","bg-success-500"],["600","bg-success-600"],["700","bg-success-700"],["800","bg-success-800"],["900","bg-success-900"]])}},s={parameters:{docs:{description:{story:`Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.`}}},args:{palette:new Map([["25","bg-warning-25"],["50","bg-warning-50"],["100","bg-warning-100"],["200","bg-warning-200"],["300","bg-warning-300"],["400","bg-warning-400"],["500","bg-warning-500"],["600","bg-warning-600"],["700","bg-warning-700"],["800","bg-warning-800"],["900","bg-warning-900"]])}},t={parameters:{docs:{description:{story:'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'}}},args:{palette:new Map([["25","bg-error-25"],["50","bg-error-50"],["100","bg-error-100"],["200","bg-error-200"],["300","bg-error-300"],["400","bg-error-400"],["500","bg-error-500"],["600","bg-error-600"],["700","bg-error-700"],["800","bg-error-800"],["900","bg-error-900"]])}},o={parameters:{docs:{description:{story:"Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray."}}},args:{palette:new Map([["25","bg-gray-25"],["50","bg-gray-50"],["100","bg-gray-100"],["200","bg-gray-200"],["300","bg-gray-300"],["400","bg-gray-400"],["500","bg-gray-500"],["600","bg-gray-600"],["700","bg-gray-700"],["800","bg-gray-800"],["900","bg-gray-900"]])}},g={args:{palette:new Map([["primary","bg-primary-gradient"],["teal","bg-teal-gradient"],["success","bg-success-gradient"],["warning","bg-warning-gradient"],["error","bg-error-gradient"],["rose","bg-rose-gradient"],["purple","bg-purple-gradient"],["gray","bg-gray-gradient"]])}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'
-      }
-    }
-  },
-  args: {
-    palette: new Map([['25', 'bg-primary-25'], ['50', 'bg-primary-50'], ['100', 'bg-primary-100'], ['200', 'bg-primary-200'], ['300', 'bg-primary-300'], ['400', 'bg-primary-400'], ['500', 'bg-primary-500'], ['600', 'bg-primary-600'], ['700', 'bg-primary-700'], ['800', 'bg-primary-800'], ['900', 'bg-primary-900']])
-  }
-}`,...e.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: "Success colors communicate a positive action, postive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green."
-      }
-    }
-  },
-  args: {
-    palette: new Map([['25', 'bg-success-25'], ['50', 'bg-success-50'], ['100', 'bg-success-100'], ['200', 'bg-success-200'], ['300', 'bg-success-300'], ['400', 'bg-success-400'], ['500', 'bg-success-500'], ['600', 'bg-success-600'], ['700', 'bg-success-700'], ['800', 'bg-success-800'], ['900', 'bg-success-900']])
-  }
-}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users\\' attention.'
-      }
-    }
-  },
-  args: {
-    palette: new Map([['25', 'bg-warning-25'], ['50', 'bg-warning-50'], ['100', 'bg-warning-100'], ['200', 'bg-warning-200'], ['300', 'bg-warning-300'], ['400', 'bg-warning-400'], ['500', 'bg-warning-500'], ['600', 'bg-warning-600'], ['700', 'bg-warning-700'], ['800', 'bg-warning-800'], ['900', 'bg-warning-900']])
-  }
-}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as deleting or archiving an object.'
-      }
-    }
-  },
-  args: {
-    palette: new Map([['25', 'bg-error-25'], ['50', 'bg-error-50'], ['100', 'bg-error-100'], ['200', 'bg-error-200'], ['300', 'bg-error-300'], ['400', 'bg-error-400'], ['500', 'bg-error-500'], ['600', 'bg-error-600'], ['700', 'bg-error-700'], ['800', 'bg-error-800'], ['900', 'bg-error-900']])
-  }
-}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.'
-      }
-    }
-  },
-  args: {
-    palette: new Map([['25', 'bg-gray-25'], ['50', 'bg-gray-50'], ['100', 'bg-gray-100'], ['200', 'bg-gray-200'], ['300', 'bg-gray-300'], ['400', 'bg-gray-400'], ['500', 'bg-gray-500'], ['600', 'bg-gray-600'], ['700', 'bg-gray-700'], ['800', 'bg-gray-800'], ['900', 'bg-gray-900']])
-  }
-}`,...o.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
-  args: {
-    palette: new Map([['primary', 'bg-primary-gradient'], ['teal', 'bg-teal-gradient'], ['success', 'bg-success-gradient'], ['warning', 'bg-warning-gradient'], ['error', 'bg-error-gradient'], ['rose', 'bg-rose-gradient'], ['purple', 'bg-purple-gradient'], ['gray', 'bg-gray-gradient']])
-  }
-}`,...g.parameters?.docs?.source}}};const m=["Primary","Success","Warning","Error","Gray","Gradients"];export{t as Error,g as Gradients,o as Gray,e as Primary,a as Success,s as Warning,m as __namedExportsOrder,d as default};