@brightspot/ui 1.0.1-3 → 1.0.1-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +85 -28
  2. package/dist/storybook/assets/{Badge.stories-Dm-U1QYO.js → Badge.stories-BTUP8EEA.js} +3 -3
  3. package/dist/storybook/assets/{Button.stories-1cb_EUIC.js → Button.stories-Cr7Qwtjy.js} +2 -2
  4. package/dist/storybook/assets/{Color-AVL7NMMY-B58ga_hP.js → Color-AVL7NMMY-FwGGzq-S.js} +1 -1
  5. package/dist/storybook/assets/Colors.stories-DTkJ49c0.js +83 -0
  6. package/dist/storybook/assets/{DocsRenderer-PQXLIZUC-DUVRw1oS.js → DocsRenderer-PQXLIZUC-czZuJbjz.js} +4 -4
  7. package/dist/storybook/assets/{Heading.stories-tM9cqImg.js → Heading.stories-DAeD9lW6.js} +1 -1
  8. package/dist/storybook/assets/{Icon.stories-BA6Sc9w5.js → Icon.stories-cnRmIS9M.js} +1 -1
  9. package/dist/storybook/assets/{Loader.stories-u1BnpDyi.js → Loader.stories-i7TFXki_.js} +1 -1
  10. package/dist/storybook/assets/{ScrollShadow.stories-DKIcTQ1r.js → ScrollShadow.stories-DPlCRYP5.js} +1 -1
  11. package/dist/storybook/assets/iframe-CgQYHqh5.css +1 -0
  12. package/dist/storybook/assets/{iframe-DT_nhsJu.js → iframe-KLSeZXhG.js} +5 -3
  13. package/dist/storybook/assets/{index-BTdkSEv_.js → index-Du6pvkZG.js} +1 -1
  14. package/dist/storybook/iframe.html +2 -2
  15. package/dist/storybook/project.json +1 -1
  16. package/dist/tailwind-plugin-button.js +20 -1
  17. package/dist/tailwind-plugin-button.ts +20 -1
  18. package/dist/tailwind-plugin-icon.js +9 -1
  19. package/dist/tailwind-plugin-icon.ts +17 -1
  20. package/dist/tailwind-plugin-scroll-shadow.js +1 -1
  21. package/dist/tailwind-plugin-scroll-shadow.ts +1 -1
  22. package/dist/tailwind-plugin-theme.ts +1 -0
  23. package/dist/tailwind.config.js +4 -1
  24. package/dist/tailwind.config.ts +20 -8
  25. package/package.json +7 -2
  26. package/dist/storybook/assets/Colors.stories-BiV2pS3d.js +0 -79
  27. package/dist/storybook/assets/iframe-BOWLMAWm.css +0 -1
package/dist/tailwind.config.ts CHANGED
@@ -16,7 +16,10 @@ export default {
16
16
  safelist: [
17
17
  // BTU component classes with dynamic color, size, and numbered variants
18
18
  // Matches: btu-button-primary, btu-badge-lg, btu-icon-error, btu-heading-2xl, etc.
19
- { pattern: /btu-.*?-(black|white|primary|teal|gray|purple|rose|error|warning|success|xs|sm|md|lg|xl|2xl|1|2|3|4|5|6)/ },
19
+ {
20
+ pattern:
21
+ /btu-.*?-(ai|black|white|primary|teal|gray|purple|rose|error|warning|success|xs|sm|md|lg|xl|2xl|1|2|3|4|5|6)/,
22
+ },
20
23
  // Padding and margin classes for all directions and values 0-8 (including decimals)
21
24
  // Matches: p-0, px-2, py-6, pt-4, pb-8, pl-1, pr-3, ps-5, pe-7, m-0, mx-2, p-1.5, mx-2.5, etc.
22
25
  { pattern: /^[mp][xytblrse]?-[0-8](\.[05])?$/ },
@@ -423,6 +426,8 @@ export default {
423
426
  'light-dark(oklch(0.04 0.02 278.29 / 0.25), oklch(0.78 0.01 0 / 0.36))',
424
427
  },
425
428
  backgroundImage: {
429
+ 'ai-gradient':
430
+ 'linear-gradient(223deg,oklch(0.7 0.3281 339.6) 17.79%,oklch(0.5346 0.3041 294.17) 71.63%,oklch(0.5884 0.2375 262.18) 85.1%)',
426
431
  'ai-sparkles':
427
432
  'url(\'data:image/svg+xml,<svg id="eTZ5ivXu8Rf1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" project-id="17efa608cdf84d16a374e63788db1b50" export-id="0bf32ebf687749fba502bd708375e386" cached="false"><style><![CDATA[%23eTZ5ivXu8Rf2 {animation: eTZ5ivXu8Rf2__m 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf2__m { 0% {d: path("M9.937,15.5C9.755178,14.795197,9.204803,14.244822,8.5,14.063L2.365,12.481C2.149933,12.419956,2.001525,12.223562,2.001525,12C2.001525,11.776438,2.149933,11.580044,2.365,11.519L8.5,9.936C9.204544,9.754352,9.754861,9.204417,9.937,8.5L11.519,2.365C11.579435,2.149051,11.776254,1.999751,12.0005,1.999751C12.224746,1.999751,12.421565,2.149051,12.482,2.365L14.063,8.5C14.244822,9.204803,14.795197,9.755178,15.5,9.937L21.635,11.518C21.851842,11.577812,22.002049,11.775061,22.002049,12C22.002049,12.224939,21.851842,12.422188,21.635,12.482L15.5,14.063C14.795197,14.244822,14.244822,14.795197,14.063,15.5L12.481,21.635C12.420565,21.850949,12.223746,22.000249,11.9995,22.000249C11.775254,22.000249,11.578435,21.850949,11.518,21.635L9.937,15.5Z");animation-timing-function: cubic-bezier(0.445,0.05,0.55,0.95)} 16% {d: path("M10.737,14.7C10.555178,13.995197,3.511222,19.051796,9.3,13.263L2.365,12.481C2.149933,12.419956,2.001525,12.223562,2.001525,12C2.001525,11.776438,2.149933,11.580044,2.365,11.519L9.3,10.736C10.004544,10.554352,5.006893,3.569889,10.737,9.3L11.519,2.365C11.579435,2.149051,11.776254,1.999751,12.0005,1.999751C12.224746,1.999751,12.421565,2.149051,12.482,2.365L13.263,9.3C13.444822,10.004803,21.218511,4.218506,14.7,10.737L21.635,11.518C21.851842,11.577812,22.002049,11.775061,22.002049,12C22.002049,12.224939,21.851842,12.422188,21.635,12.482L14.7,13.263C20.320377,18.883378,13.444822,13.995197,13.263,14.7L12.481,21.635C12.420565,21.850949,12.223746,22.000249,11.9995,22.000249C11.775254,22.000249,11.578435,21.850949,11.518,21.635L10.737,14.7Z");animation-timing-function: cubic-bezier(0.445,0.05,0.55,0.95)} 22% {d: path("M10.794143,14.642857C10.612321,13.938054,5.423674,17.392661,9.357143,13.205857L2.365,12.481C2.149933,12.419956,1.141856,12.223562,1.141856,12C1.141856,11.776438,2.149933,11.580044,2.365,11.519L9.357143,10.793143C10.061687,10.611495,6.64917,5.465468,10.794143,9.357143L11.519,2.365C11.579435,2.149051,11.775254,1.727963,11.9995,1.727963C12.223746,1.727963,12.421565,2.149051,12.482,2.365L13.205857,9.357143C13.387679,10.061946,19.097564,6.086127,14.642857,10.794143L21.635,11.518C21.851842,11.577812,22.858144,11.775061,22.858144,12C22.858144,12.224939,21.851842,12.422188,21.635,12.482L14.642857,13.205857C18.45604,17.272362,13.387679,13.938054,13.205857,14.642857L12.481,21.635C12.420565,21.850949,12.223746,22.603619,11.9995,22.603619C11.775254,22.603619,11.578435,21.850949,11.518,21.635L10.794143,14.642857Z");animation-timing-function: cubic-bezier(0.445,0.05,0.55,0.95)} 30% {d: path("M10.937,14.5C10.755178,13.795197,10.204803,13.244822,9.5,13.063L2.365,12.481C2.149933,12.419956,2.001525,12.223562,2.001525,12C2.001525,11.776438,2.149933,11.580044,2.365,11.519L9.5,10.936C10.204544,10.754352,10.754861,10.204417,10.937,9.5L11.519,2.365C11.579435,2.149051,11.776254,1.999751,12.0005,1.999751C12.224746,1.999751,12.421565,2.149051,12.482,2.365L13.063,9.5C13.244822,10.204803,13.795197,10.755178,14.5,10.937L21.635,11.518C21.851842,11.577812,22.002049,11.775061,22.002049,12C22.002049,12.224939,21.851842,12.422188,21.635,12.482L14.5,13.063C13.795197,13.244822,13.244822,13.795197,13.063,14.5L12.481,21.635C12.420565,21.850949,12.223746,22.000249,11.9995,22.000249C11.775254,22.000249,11.578435,21.850949,11.518,21.635L10.937,14.5Z")} 42% {d: path("M9.937,15.5C9.755178,14.795197,9.204803,14.244822,8.5,14.063L2.365,12.481C2.149933,12.419956,2.001525,12.223562,2.001525,12C2.001525,11.776438,2.149933,11.580044,2.365,11.519L8.5,9.936C9.204544,9.754352,9.754861,9.204417,9.937,8.5L11.519,2.365C11.579435,2.149051,11.776254,1.999751,12.0005,1.999751C12.224746,1.999751,12.421565,2.149051,12.482,2.365L14.063,8.5C14.244822,9.204803,14.795197,9.755178,15.5,9.937L21.635,11.518C21.851842,11.577812,22.002049,11.775061,22.002049,12C22.002049,12.224939,21.851842,12.422188,21.635,12.482L15.5,14.063C14.795197,14.244822,14.244822,14.795197,14.063,15.5L12.481,21.635C12.420565,21.850949,12.223746,22.000249,11.9995,22.000249C11.775254,22.000249,11.578435,21.850949,11.518,21.635L9.937,15.5Z")} 100% {d: path("M9.937,15.5C9.755178,14.795197,9.204803,14.244822,8.5,14.063L2.365,12.481C2.149933,12.419956,2.001525,12.223562,2.001525,12C2.001525,11.776438,2.149933,11.580044,2.365,11.519L8.5,9.936C9.204544,9.754352,9.754861,9.204417,9.937,8.5L11.519,2.365C11.579435,2.149051,11.776254,1.999751,12.0005,1.999751C12.224746,1.999751,12.421565,2.149051,12.482,2.365L14.063,8.5C14.244822,9.204803,14.795197,9.755178,15.5,9.937L21.635,11.518C21.851842,11.577812,22.002049,11.775061,22.002049,12C22.002049,12.224939,21.851842,12.422188,21.635,12.482L15.5,14.063C14.795197,14.244822,14.244822,14.795197,14.063,15.5L12.481,21.635C12.420565,21.850949,12.223746,22.000249,11.9995,22.000249C11.775254,22.000249,11.578435,21.850949,11.518,21.635L9.937,15.5Z")}} %23eTZ5ivXu8Rf2_tr {animation: eTZ5ivXu8Rf2_tr__tr 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf2_tr__tr { 0% {transform: translate(12.001787px,12px) rotate(0deg)} 18% {transform: translate(12.001787px,12px) rotate(8.312442deg)} 32% {transform: translate(12.001787px,12px) rotate(0.234247deg)} 100% {transform: translate(12.001787px,12px) rotate(0.234247deg)}} %23eTZ5ivXu8Rf2_ts {animation: eTZ5ivXu8Rf2_ts__ts 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf2_ts__ts { 0% {transform: skewX(0.92deg) skewY(0.92deg) scale(0.86,0.86)} 22% {transform: skewX(0.92deg) skewY(0.92deg) scale(0.97,0.97)} 42% {transform: skewX(0.92deg) skewY(0.92deg) scale(0.86,0.87)} 100% {transform: skewX(0.92deg) skewY(0.92deg) scale(0.86,0.87)}} %23eTZ5ivXu8Rf3 {animation: eTZ5ivXu8Rf3__fl 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf3__fl { 0% {filter: blur(0.424264px)} 42% {filter: blur(0.424264px)} 100% {filter: blur(0.424264px)}} %23eTZ5ivXu8Rf4_tr {animation: eTZ5ivXu8Rf4_tr__tr 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf4_tr__tr { 0% {transform: translate(20px,5px) rotate(0deg)} 20% {transform: translate(20px,5px) rotate(0deg);animation-timing-function: cubic-bezier(0.42,0,1,1)} 28% {transform: translate(20px,5px) rotate(90deg)} 100% {transform: translate(20px,5px) rotate(90deg)}} %23eTZ5ivXu8Rf5_tr {animation: eTZ5ivXu8Rf5_tr__tr 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf5_tr__tr { 0% {transform: translate(20px,5px) rotate(0deg)} 20% {transform: translate(20px,5px) rotate(0deg);animation-timing-function: cubic-bezier(0.42,0,1,1)} 28% {transform: translate(20px,5px) rotate(90deg)} 100% {transform: translate(20px,5px) rotate(90deg)}} %23eTZ5ivXu8Rf6_ts {animation: eTZ5ivXu8Rf6_ts__ts 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf6_ts__ts { 0% {transform: translate(4px,18px) scale(1,1);animation-timing-function: cubic-bezier(0.42,0,1,1)} 8% {transform: translate(4px,18px) scale(1.322243,1.322243);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 16% {transform: translate(4px,18px) scale(0.802685,0.802685)} 100% {transform: translate(4px,18px) scale(0.802685,0.802685)}} %23eTZ5ivXu8Rf6 {animation: eTZ5ivXu8Rf6__fl 2976.190476190476ms linear infinite normal forwards}@keyframes eTZ5ivXu8Rf6__fl { 0% {filter: blur(0px)} 8% {filter: blur(0.424264px)} 16% {filter: blur(0px)} 100% {filter: blur(0px)}}]]></style><defs><filter id="eTZ5ivXu8Rf2-filter" x="-150%" y="-150%" width="400%" height="400%"><feGaussianBlur id="eTZ5ivXu8Rf2-filter-blur-0" stdDeviation="0,0" result="result"/></filter></defs><g id="eTZ5ivXu8Rf2_tr" transform="translate(12.001787,12) rotate(0)"><g id="eTZ5ivXu8Rf2_ts" transform="skewX(0.92) skewY(0.92) scale(0.86,0.86)"><path id="eTZ5ivXu8Rf2" d="M9.937,15.5c-.181822-.704803-.732197-1.255178-1.437-1.437L2.365,12.481c-.215067-.061044-.363475-.257438-.363475-.481s.148408-.419956.363475-.481L8.5,9.936c.704544-.181648,1.254861-.731583,1.437-1.436l1.582-6.135c.060435-.215949.257254-.365249.4815-.365249s.421065.1493.4815.365249L14.063,8.5c.181822.704803.732197,1.255178,1.437,1.437l6.135,1.581c.216842.059812.367049.257061.367049.482s-.150207.422188-.367049.482L15.5,14.063c-.704803.181822-1.255178.732197-1.437,1.437l-1.582,6.135c-.060435.215949-.257254.365249-.4815.365249s-.421065-.1493-.4815-.365249L9.937,15.5Z" transform="translate(-12.001787,-12)" filter="url(%23eTZ5ivXu8Rf2-filter)" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g><g id="eTZ5ivXu8Rf3" style="filter:blur(0.424264px)"><g id="eTZ5ivXu8Rf4_tr" transform="translate(20,5) rotate(0)"><path d="M20,3v4" transform="translate(-20,-5)" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><g id="eTZ5ivXu8Rf5_tr" transform="translate(20,5) rotate(0)"><path d="M22,5h-4" transform="translate(-20,-5)" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g><g id="eTZ5ivXu8Rf6_ts" transform="translate(4,18) scale(1,1)"><g id="eTZ5ivXu8Rf6" style="filter:blur(0px)" transform="translate(-4,-18)"><path d="M4,17v2" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5,18h-2" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>\')',
428
433
  'rect-outline-primary':
@@ -435,15 +440,22 @@ export default {
435
440
  'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%25" height="100%25" fill="none" stroke="rgba(0, 78, 235, 1)" stroke-width="2" stroke-linecap="square"/></svg>\')',
436
441
  'site-logo-default':
437
442
  'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g clip-path="url(%23clip0_17404_968)"><path d="M12 24C5.38286 24 0 18.6171 0 12C0 5.38286 5.38286 0 12 0C18.6171 0 24 5.38286 24 12C24 18.6171 18.6171 24 12 24ZM12 3.42857C7.27714 3.42857 3.42857 7.27714 3.42857 12C3.42857 16.7229 7.27714 20.5714 12 20.5714C16.7229 20.5714 20.5714 16.7229 20.5714 12C20.5714 7.27714 16.7229 3.42857 12 3.42857Z" fill="%23FF1F3D"/></g><defs><clipPath id="clip0_17404_968"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>\')',
438
- 'error-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-error-500)) 0%,oklch(var(--btu-theme-error-700)) 50%,oklch(var(--btu-theme-error-900)) 100%)',
439
- 'gray-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-gray-500)) 0%,oklch(var(--btu-theme-gray-700)) 50%,oklch(var(--btu-theme-gray-900)) 100%)',
443
+ 'error-gradient':
444
+ 'linear-gradient(45deg,oklch(var(--btu-theme-error-500)) 0%,oklch(var(--btu-theme-error-700)) 50%,oklch(var(--btu-theme-error-900)) 100%)',
445
+ 'gray-gradient':
446
+ 'linear-gradient(45deg,oklch(var(--btu-theme-gray-500)) 0%,oklch(var(--btu-theme-gray-700)) 50%,oklch(var(--btu-theme-gray-900)) 100%)',
440
447
  'primary-gradient':
441
448
  'linear-gradient(45deg,oklch(var(--btu-theme-primary-500)) 0%,oklch(var(--btu-theme-primary-700)) 50%,oklch(var(--btu-theme-primary-900)) 100%)',
442
- 'purple-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-purple-500)) 0%,oklch(var(--btu-theme-purple-700)) 50%,oklch(var(--btu-theme-purple-900)) 100%)',
443
- 'rose-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-rose-500)) 0%,oklch(var(--btu-theme-rose-700)) 50%,oklch(var(--btu-theme-rose-900)) 100%)',
444
- 'success-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-success-500)) 0%,oklch(var(--btu-theme-success-700)) 50%,oklch(var(--btu-theme-success-900)) 100%)',
445
- 'teal-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-teal-500)) 0%,oklch(var(--btu-theme-teal-700)) 50%,oklch(var(--btu-theme-teal-900)) 100%)',
446
- 'warning-gradient': 'linear-gradient(45deg,oklch(var(--btu-theme-warning-500)) 0%,oklch(var(--btu-theme-warning-700)) 50%,oklch(var(--btu-theme-warning-900)) 100%)',
449
+ 'purple-gradient':
450
+ 'linear-gradient(45deg,oklch(var(--btu-theme-purple-500)) 0%,oklch(var(--btu-theme-purple-700)) 50%,oklch(var(--btu-theme-purple-900)) 100%)',
451
+ 'rose-gradient':
452
+ 'linear-gradient(45deg,oklch(var(--btu-theme-rose-500)) 0%,oklch(var(--btu-theme-rose-700)) 50%,oklch(var(--btu-theme-rose-900)) 100%)',
453
+ 'success-gradient':
454
+ 'linear-gradient(45deg,oklch(var(--btu-theme-success-500)) 0%,oklch(var(--btu-theme-success-700)) 50%,oklch(var(--btu-theme-success-900)) 100%)',
455
+ 'teal-gradient':
456
+ 'linear-gradient(45deg,oklch(var(--btu-theme-teal-500)) 0%,oklch(var(--btu-theme-teal-700)) 50%,oklch(var(--btu-theme-teal-900)) 100%)',
457
+ 'warning-gradient':
458
+ 'linear-gradient(45deg,oklch(var(--btu-theme-warning-500)) 0%,oklch(var(--btu-theme-warning-700)) 50%,oklch(var(--btu-theme-warning-900)) 100%)',
447
459
  },
448
460
  containers: ({ theme }: { theme: (key: string) => string }) => ({
449
461
  'admin-two-columns': '672px',
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@brightspot/ui",
3
- "version": "1.0.1-3",
3
+ "version": "1.0.1-4",
4
+ "type": "module",
4
5
  "license": "UNLICENSED",
5
6
  "description": "A UI library for building Brightspot CMS components.",
6
7
  "main": "./dist/tailwind.config.ts",
@@ -10,9 +11,12 @@
10
11
  "build": "yarn clean && tsc --noEmitOnError && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories",
11
12
  "prepack": "yarn build && yarn build-storybook",
12
13
  "storybook": "storybook dev -p 6006",
13
- "build-storybook": "storybook build -o ./dist/storybook"
14
+ "build-storybook": "storybook build -o ./dist/storybook",
15
+ "prepare": "husky"
14
16
  },
15
17
  "devDependencies": {
18
+ "@commitlint/cli": "^20.1.0",
19
+ "@commitlint/config-conventional": "^20.0.0",
16
20
  "@eslint/js": "^9.23.0",
17
21
  "@storybook/addon-docs": "^9.1.8",
18
22
  "@storybook/addon-themes": "^9.1.8",
@@ -26,6 +30,7 @@
26
30
  "eslint-plugin-prettier": "5.0.0",
27
31
  "eslint-plugin-storybook": "^9.1.8",
28
32
  "globals": "^16.0.0",
33
+ "husky": "^9.1.7",
29
34
  "lit": "^3.3.0",
30
35
  "mini-css-extract-plugin": "^2.6.1",
31
36
  "postcss-import": "^16.0.0",
package/dist/storybook/assets/Colors.stories-BiV2pS3d.js DELETED
@@ -1,79 +0,0 @@
1
- import{x as i}from"./iframe-DT_nhsJu.js";import"./preload-helper-PPVm8Dsz.js";const c=r=>i`
2
- <div class="my-10">
3
- <div
4
- class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4"
5
- >
6
- <div class="z-9 sticky top-28 lg:top-14">
7
- &nbsp;
8
- </div>
9
- <div
10
- 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"
11
- >
12
- ${[...r.palette?.keys()??[]].map(n=>i`<div>${n}</div>`)}
13
- </div>
14
- <div></div>
15
- <div class="grid h-10 grid-cols-11 gap-1.5 sm:gap-4">
16
- ${[...r.palette?.values()??[]].map(n=>i`<div class="${n} size-full"></div>`)}
17
- </div>
18
- </div>
19
- </div>
20
- `,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:`{
21
- parameters: {
22
- docs: {
23
- description: {
24
- story: 'Used for primary call to actions, visual UI elements, active and clicked states, and focused containers.'
25
- }
26
- }
27
- },
28
- args: {
29
- 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']])
30
- }
31
- }`,...e.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
32
- parameters: {
33
- docs: {
34
- description: {
35
- 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."
36
- }
37
- }
38
- },
39
- args: {
40
- 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']])
41
- }
42
- }`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
43
- parameters: {
44
- docs: {
45
- description: {
46
- 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.'
47
- }
48
- }
49
- },
50
- args: {
51
- 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']])
52
- }
53
- }`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
54
- parameters: {
55
- docs: {
56
- description: {
57
- 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.'
58
- }
59
- }
60
- },
61
- args: {
62
- 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']])
63
- }
64
- }`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
65
- parameters: {
66
- docs: {
67
- description: {
68
- 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.'
69
- }
70
- }
71
- },
72
- args: {
73
- 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']])
74
- }
75
- }`,...o.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
76
- args: {
77
- 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']])
78
- }
79
- }`,...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};