@tcn/sb-blackcat-addon 0.0.1 → 1.0.1
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.
- package/dist/preview.cjs +1 -1
- package/dist/preview.cjs.map +1 -1
- package/dist/preview.d.cts +0 -10
- package/dist/preview.d.ts +0 -10
- package/dist/preview.js +1 -1
- package/dist/preview.js.map +1 -1
- package/dist/tcn_palette.module-WZDBNRNC.module.css +86 -0
- package/package.json +1 -1
package/dist/preview.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var
|
|
1
|
+
'use strict';var uiLayout=require('@tcn/ui-layout'),y=require('react'),g=require('./tcn_palette.module-WZDBNRNC.module.css');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var y__default=/*#__PURE__*/_interopDefault(y);var g__default=/*#__PURE__*/_interopDefault(g);var i="sb-blackcat-addon";function d(e,o){return Math.min(255,Math.max(0,e+Math.round(255*o/100)))}function n(e,o,c){let r,l,s,a=1;if(e.startsWith("#")){let t=e.slice(1);if(t.length===3||t.length===4)r=parseInt(t.charAt(0)+t.charAt(0),16),l=parseInt(t.charAt(1)+t.charAt(1),16),s=parseInt(t.charAt(2)+t.charAt(2),16),a=t.length===4?parseInt(t.charAt(3)+t.charAt(3),16)/255:1;else if(t.length===6||t.length===8)r=parseInt(t.substring(0,2),16),l=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16),a=t.length===8?parseInt(t.substring(6,8),16)/255:1;else throw console.log(e,"color"),new Error("Invalid hex color format")}else if(e.startsWith("rgb")){let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);if(t)r=parseInt(t[1]),l=parseInt(t[2]),s=parseInt(t[3]),a=t[4]?parseFloat(t[4]):1;else throw new Error("Invalid RGB(A) color format")}else throw console.log(e,"color"),new Error("Unsupported color format");return r=d(r,o),l=d(l,o),s=d(s,o),`rgba(${r}, ${l}, ${s}, ${c??a})`}var m=Object.freeze({Cyan:"#0abef1",Blue:"#1e7aff",Purple:"#953e96",Magenta:"#f54f9e",Red:"#e0383e",Orange:"#f7821a",Yellow:"#eeb80f",Green:"#39b712",Grey:"#797979",Black:"#333333",White:"#ffffff"}),u=Object.keys(m),p=(e,o)=>{let c=o.globals.direction??"ltr",r=o.globals.scalar??1,l=o.globals.accent??"Blue",s=o.globals.textColor??"Grey",a=m[l],t=m[s];return y.useEffect(()=>(document.body.dir=c,document.body.style.setProperty("--scalar",r.toString()),document.body.style.setProperty("--accessibility-scalar",r.toString()),document.body.style.setProperty("--accent-color",a),document.body.style.setProperty("--accent-light-color",n(a,10)),document.body.style.setProperty("--accent-dark-color",n(a,-5)),document.body.style.setProperty("--accent-disabled-color",n(a,-5,.5)),document.body.style.setProperty("--text-color",t),()=>{document.body.dir="ltr",document.body.style.removeProperty("--scalar"),document.body.style.removeProperty("--accessibility-scalar"),document.body.style.removeProperty("--accent-color"),document.body.style.removeProperty("--accent-light-color"),document.body.style.removeProperty("--accent-dark-color"),document.body.style.removeProperty("--accent-disabled-color"),document.body.style.removeProperty("--text-color");}),[c,r,a,t]),y__default.default.createElement(uiLayout.Pad,{className:g__default.default["tcn-palette"],amount:"16px"},y__default.default.createElement(e,null))};var h={parameters:{[i]:{}},globalTypes:{direction:{name:"Direction",description:"Layout direction of components based off user settings.",defaultValue:"ltr",toolbar:{icon:"transfer",items:[{value:"ltr",title:"Left to Right"},{value:"rtl",title:"Right to Left"}],showName:true,dynamicTitle:true}},scalar:{name:"Accessibility Scalar",description:"Scale text and component sizes based off user settings.",defaultValue:1,toolbar:{icon:"collapse",items:[{value:.75,title:"Extra Small"},{value:.875,title:"Small"},{value:1,title:"Medium"},{value:1.125,title:"Large"},{value:1.25,title:"Extra Large"}],showName:true,dynamicTitle:true}},accent:{description:"Global Accent Color",defaultValue:"Blue",toolbar:{title:"Accent",icon:"paintbrush",items:u,dynamicTitle:true}},textColor:{description:"Global Text Color",defaultValue:"Black",toolbar:{title:"Text Color",icon:"type",items:u,dynamicTitle:true}}},decorators:[p]},T=h;module.exports=T;//# sourceMappingURL=preview.cjs.map
|
|
2
2
|
//# sourceMappingURL=preview.cjs.map
|
package/dist/preview.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","TOOL_ID","BlackcatDecorator","Story","context","direction","scalar","useEffect","React","preview","preview_default"],"mappings":"oJAAO,IAAMA,EAAW,mBACXC,CCEN,IAAMC,CAAAA,CAA+B,CAACC,CAAAA,CAAOC,IAAY,CAC9D,IAAMC,CAAYD,CAAAA,CAAAA,CAAQ,QAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,QAAQ,MAAU,EAAA,CAAA,CAGzC,OAAAG,WAAAA,CAAU,IAAM,CACd,QAAA,CAAS,KAAK,GAAMF,CAAAA,EACtB,EAAG,CAACA,CAAS,CAAC,CAAA,CAEdE,YAAU,IAAM,CACd,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,wBAAA,CAA0BD,CAAO,CAAA,QAAA,EAAU,EAC7E,CAAA,CAAG,CAACA,CAAM,CAAC,CAEJE,CAAAA,kBAAAA,CAAA,aAACL,CAAAA,CAAAA,CAAA,IAAM,CAChB,CAAA,CCFMM,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAACT,CAAQ,EAAG,EAId,EAOA,WAAa,CAAA,CACX,UAAW,CACT,IAAA,CAAM,WACN,CAAA,WAAA,CAAa,0DACb,YAAc,CAAA,KAAA,CACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,eAAgB,CAAA,CACvC,CAAE,KAAO,CAAA,KAAA,CAAO,KAAO,CAAA,eAAgB,CACzC,CACA,CAAA,QAAA,CAAU,IACZ,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,EACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,GAAM,CAAA,KAAA,CAAO,aAAc,CAAA,CACpC,CAAE,KAAO,CAAA,IAAA,CAAO,KAAO,CAAA,OAAQ,EAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,EAC5B,CAAE,KAAA,CAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAC/B,CAAA,CAAE,KAAO,CAAA,IAAA,CAAM,MAAO,aAAc,CACtC,CACF,CACF,CACF,CAKA,CAAA,UAAA,CAAY,CAACE,CAAiB,CAChC,EAEOQ,CAAQD,CAAAA","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","import type { Decorator } from '@storybook/react';\nimport React, { useEffect } from 'react';\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n // const params = useParameter<BlackcatParameters>(ADDON_ID, defaultParameters)!;\n\n useEffect(() => {\n document.body.dir = direction;\n }, [direction]);\n\n useEffect(() => {\n document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n }, [scalar]);\n\n return <Story />;\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator } from './decorator.js';\n\n/**\n * A decorator is a way to wrap a story in extra \"rendering\" functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n\n /**\n * This is the global type for storybook that will add a toolbar to change the locale.\n * You must import this in preview.tsx and add it to the globalTypes object.\n * For more information, see: https://storybook.js.org/docs/essentials/toolbars-and-globals\n */\n globalTypes: {\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n showName: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: 1,\n toolbar: {\n icon: 'collapse',\n items: [\n { value: 0.75, title: 'Extra Small' },\n { value: 0.875, title: 'Small' },\n { value: 1, title: 'Medium' },\n { value: 1.125, title: 'Large' },\n { value: 1.25, title: 'Extra Large' },\n ],\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/adjust_color.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","adjustBrightness","value","percent","adjustColor","color","alpha","g","b","hex","matches","colorMap","colorNames","BlackcatDecorator","Story","context","direction","scalar","accent","textColor","hexAccent","hexTextColor","useEffect","React","Pad","styles","preview","preview_default"],"mappings":"4RAAO,IAAMA,CAAW,CAAA,mBAAA,CCAxB,SAASC,CAAAA,CAAiBC,CAAeC,CAAAA,CAAAA,CAAyB,CAEhE,OAAO,IAAK,CAAA,GAAA,CAAI,IAAK,IAAK,CAAA,GAAA,CAAI,CAAGD,CAAAA,CAAAA,CAAQ,KAAK,KAAO,CAAA,GAAA,CAAMC,CAAW,CAAA,GAAG,CAAC,CAAC,CAC7E,CAEO,SAASC,CAAYC,CAAAA,CAAAA,CAAeF,CAAiBG,CAAAA,CAAAA,CAAwB,CAClF,IAAI,CAAA,CACFC,CACAC,CAAAA,CAAAA,CACA,EAAI,CAEN,CAAA,GAAIH,CAAM,CAAA,UAAA,CAAW,GAAG,CAAG,CAAA,CAEzB,IAAMI,CAAAA,CAAMJ,EAAM,KAAM,CAAA,CAAC,CACzB,CAAA,GAAII,EAAI,MAAW,GAAA,CAAA,EAAKA,CAAI,CAAA,MAAA,GAAW,EAErC,CAAI,CAAA,QAAA,CAASA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAIA,CAAAA,CAAAA,CAAI,MAAO,CAAA,CAAC,CAAG,CAAA,EAAE,CAC9CF,CAAAA,CAAAA,CAAI,SAASE,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAIA,EAAI,MAAO,CAAA,CAAC,CAAG,CAAA,EAAE,EAC9CD,CAAI,CAAA,QAAA,CAASC,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAIA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAG,CAAA,EAAE,CAC9C,CAAA,CAAA,CAAIA,EAAI,MAAW,GAAA,CAAA,CAAI,QAASA,CAAAA,CAAAA,CAAI,OAAO,CAAC,CAAA,CAAIA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAG,EAAE,CAAA,CAAI,IAAM,CAClEA,CAAAA,KAAAA,GAAAA,CAAAA,CAAI,MAAW,GAAA,CAAA,EAAKA,EAAI,MAAW,GAAA,CAAA,CAC5C,CAAI,CAAA,QAAA,CAASA,EAAI,SAAU,CAAA,CAAA,CAAG,CAAC,CAAA,CAAG,EAAE,CACpCF,CAAAA,CAAAA,CAAI,QAASE,CAAAA,CAAAA,CAAI,UAAU,CAAG,CAAA,CAAC,CAAG,CAAA,EAAE,EACpCD,CAAI,CAAA,QAAA,CAASC,CAAI,CAAA,SAAA,CAAU,EAAG,CAAC,CAAA,CAAG,EAAE,CAAA,CACpC,CAAIA,CAAAA,CAAAA,CAAI,MAAW,GAAA,CAAA,CAAI,SAASA,CAAI,CAAA,SAAA,CAAU,CAAG,CAAA,CAAC,EAAG,EAAE,CAAA,CAAI,GAAM,CAAA,CAAA,CAAA,mBAEzD,GAAIJ,CAAAA,CAAAA,CAAO,OAAO,CAAA,CACpB,IAAI,KAAA,CAAM,0BAA0B,CAE9C,SAAWA,CAAM,CAAA,UAAA,CAAW,KAAK,CAAA,CAAG,CAElC,IAAMK,CAAAA,CAAUL,CAAM,CAAA,KAAA,CAAM,+CAA+C,CAC3E,CAAA,GAAIK,CACF,CAAA,CAAA,CAAI,QAASA,CAAAA,CAAAA,CAAQ,CAAC,CAAC,EACvBH,CAAI,CAAA,QAAA,CAASG,CAAQ,CAAA,CAAC,CAAC,CACvBF,CAAAA,CAAAA,CAAI,QAASE,CAAAA,CAAAA,CAAQ,CAAC,CAAC,CAAA,CACvB,CAAIA,CAAAA,CAAAA,CAAQ,CAAC,CAAI,CAAA,UAAA,CAAWA,CAAQ,CAAA,CAAC,CAAC,CAAI,CAAA,CAAA,CAAA,KAEpC,MAAA,IAAI,MAAM,6BAA6B,CAEjD,CACE,KAAA,MAAA,OAAA,CAAQ,IAAIL,CAAO,CAAA,OAAO,CAEpB,CAAA,IAAI,KAAM,CAAA,0BAA0B,CAI5C,CAAA,OAAA,CAAA,CAAIJ,EAAiB,CAAGE,CAAAA,CAAO,CAC/BI,CAAAA,CAAAA,CAAIN,EAAiBM,CAAGJ,CAAAA,CAAO,CAC/BK,CAAAA,CAAAA,CAAIP,EAAiBO,CAAGL,CAAAA,CAAO,CAGxB,CAAA,CAAA,KAAA,EAAQ,CAAC,CAAA,EAAA,EAAKI,CAAC,CAAA,EAAA,EAAKC,CAAC,CAAKF,EAAAA,EAAAA,CAAAA,EAAwB,CAAC,CAAA,CAAA,CAC5D,CC/CO,IAAMK,EAAW,MAAO,CAAA,MAAA,CAAO,CACpC,IAAA,CAAM,SACN,CAAA,IAAA,CAAM,SACN,CAAA,MAAA,CAAQ,UACR,OAAS,CAAA,SAAA,CACT,GAAK,CAAA,SAAA,CACL,OAAQ,SACR,CAAA,MAAA,CAAQ,SACR,CAAA,KAAA,CAAO,UACP,IAAM,CAAA,SAAA,CACN,KAAO,CAAA,SAAA,CACP,MAAO,SACT,CAAC,CAEYC,CAAAA,CAAAA,CAAa,OAAO,IAAKD,CAAAA,CAAQ,CAEjCE,CAAAA,CAAAA,CAA+B,CAACC,CAAOC,CAAAA,CAAAA,GAAY,CAC9D,IAAMC,EAAYD,CAAQ,CAAA,OAAA,CAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,MAAA,EAAU,EACnCG,CAASH,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,MAAA,EAAU,OACnCI,CAAYJ,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,SAAA,EAAa,OAEzCK,CAAYT,CAAAA,CAAAA,CAASO,CAAM,CAAA,CAC3BG,CAAeV,CAAAA,CAAAA,CAASQ,CAAS,CAAA,CAEvC,OAAAG,WAAU,CAAA,KACR,QAAS,CAAA,IAAA,CAAK,IAAMN,CACpB,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,YAAY,UAAYC,CAAAA,CAAAA,CAAO,QAAS,EAAC,CAC7D,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,YAAY,wBAA0BA,CAAAA,CAAAA,CAAO,QAAS,EAAC,EAC3E,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,WAAA,CAAY,iBAAkBG,CAAS,CAAA,CAC3D,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,sBAAA,CAAwBhB,CAAYgB,CAAAA,CAAAA,CAAW,EAAE,CAAC,CAAA,CAClF,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,qBAAA,CAAuBhB,CAAYgB,CAAAA,CAAAA,CAAW,EAAE,CAAC,CAAA,CACjF,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,WAAA,CAClB,yBACAhB,CAAAA,CAAAA,CAAYgB,EAAW,EAAI,CAAA,EAAG,CAChC,CAAA,CACA,SAAS,IAAK,CAAA,KAAA,CAAM,WAAY,CAAA,cAAA,CAAgBC,CAAY,CAErD,CAAA,IAAM,CACX,QAAA,CAAS,IAAK,CAAA,GAAA,CAAM,KACpB,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,cAAA,CAAe,UAAU,CAAA,CAC7C,SAAS,IAAK,CAAA,KAAA,CAAM,cAAe,CAAA,wBAAwB,EAC3D,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,gBAAgB,CAAA,CACnD,QAAS,CAAA,IAAA,CAAK,MAAM,cAAe,CAAA,sBAAsB,CACzD,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,cAAA,CAAe,qBAAqB,CAAA,CACxD,SAAS,IAAK,CAAA,KAAA,CAAM,cAAe,CAAA,yBAAyB,EAC5D,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,cAAc,EACnD,CAAA,CAAA,CACC,CAACL,CAAAA,CAAWC,EAAQG,CAAWC,CAAAA,CAAY,CAAC,CAAA,CAG7CE,mBAAA,aAACC,CAAAA,YAAAA,CAAA,CAAI,SAAA,CAAWC,kBAAO,CAAA,aAAa,CAAG,CAAA,MAAA,CAAO,QAC5CF,kBAAA,CAAA,aAAA,CAACT,CAAA,CAAA,IAAM,CACT,CAEJ,CAAA,CCzDMY,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAAC1B,CAAQ,EAAG,EAId,CAAA,CACA,YAAa,CACX,SAAA,CAAW,CACT,IAAA,CAAM,YACN,WAAa,CAAA,yDAAA,CACb,YAAc,CAAA,KAAA,CACd,QAAS,CACP,IAAA,CAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,KAAO,CAAA,KAAA,CAAO,MAAO,eAAgB,CAAA,CACvC,CAAE,KAAA,CAAO,MAAO,KAAO,CAAA,eAAgB,CACzC,CAAA,CACA,SAAU,IACV,CAAA,YAAA,CAAc,IAChB,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,CACd,CAAA,OAAA,CAAS,CACP,IAAM,CAAA,UAAA,CACN,KAAO,CAAA,CACL,CAAE,KAAO,CAAA,GAAA,CAAM,KAAO,CAAA,aAAc,CACpC,CAAA,CAAE,KAAO,CAAA,IAAA,CAAO,MAAO,OAAQ,CAAA,CAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,CAC5B,CAAA,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAAA,CAC/B,CAAE,KAAO,CAAA,IAAA,CAAM,KAAO,CAAA,aAAc,CACtC,CACA,CAAA,QAAA,CAAU,IACV,CAAA,YAAA,CAAc,IAChB,CACF,CAAA,CACA,MAAQ,CAAA,CACN,YAAa,qBACb,CAAA,YAAA,CAAc,MACd,CAAA,OAAA,CAAS,CACP,KAAA,CAAO,QACP,CAAA,IAAA,CAAM,aACN,KAAOY,CAAAA,CAAAA,CACP,YAAc,CAAA,IAChB,CACF,CACA,CAAA,SAAA,CAAW,CACT,WAAA,CAAa,oBACb,YAAc,CAAA,OAAA,CACd,OAAS,CAAA,CACP,MAAO,YACP,CAAA,IAAA,CAAM,MACN,CAAA,KAAA,CAAOA,EACP,YAAc,CAAA,IAChB,CACF,CACF,EAKA,UAAY,CAAA,CAACC,CAAiB,CAChC,EAEOc,CAAQD,CAAAA","file":"preview.cjs","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","function adjustBrightness(value: number, percent: number): number {\n // Calculate the adjustment based on the percent and ensure it's within the 0-255 range.\n return Math.min(255, Math.max(0, value + Math.round((255 * percent) / 100)));\n}\n\nexport function adjustColor(color: string, percent: number, alpha?: number): string {\n let r,\n g,\n b,\n a = 1;\n\n if (color.startsWith('#')) {\n // Remove '#' and parse the color based on its length.\n const hex = color.slice(1);\n if (hex.length === 3 || hex.length === 4) {\n // Expand shorthand hex to full.\n r = parseInt(hex.charAt(0) + hex.charAt(0), 16);\n g = parseInt(hex.charAt(1) + hex.charAt(1), 16);\n b = parseInt(hex.charAt(2) + hex.charAt(2), 16);\n a = hex.length === 4 ? parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255 : 1;\n } else if (hex.length === 6 || hex.length === 8) {\n r = parseInt(hex.substring(0, 2), 16);\n g = parseInt(hex.substring(2, 4), 16);\n b = parseInt(hex.substring(4, 6), 16);\n a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;\n } else {\n console.log(color, 'color');\n throw new Error('Invalid hex color format');\n }\n } else if (color.startsWith('rgb')) {\n // Extract values from rgb(a) string.\n const matches = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+),?\\s*([\\d.]*)\\)/);\n if (matches) {\n r = parseInt(matches[1]);\n g = parseInt(matches[2]);\n b = parseInt(matches[3]);\n a = matches[4] ? parseFloat(matches[4]) : 1;\n } else {\n throw new Error('Invalid RGB(A) color format');\n }\n } else {\n console.log(color, 'color');\n\n throw new Error('Unsupported color format');\n }\n\n // Apply brightness adjustment.\n r = adjustBrightness(r, percent);\n g = adjustBrightness(g, percent);\n b = adjustBrightness(b, percent);\n\n // Return the adjusted color in RGBA format.\n return `rgba(${r}, ${g}, ${b}, ${alpha != null ? alpha : a})`;\n}\n","import type { Decorator } from '@storybook/react';\nimport { Pad } from '@tcn/ui-layout';\nimport React, { useEffect } from 'react';\nimport { adjustColor } from 'src/adjust_color.js';\nimport styles from './tcn_palette.module.css';\n\nexport const colorMap = Object.freeze({\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'Blue';\n const textColor = context.globals.textColor ?? 'Grey';\n\n const hexAccent = colorMap[accent];\n const hexTextColor = colorMap[textColor];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--accent-light-color', adjustColor(hexAccent, 10));\n document.body.style.setProperty('--accent-dark-color', adjustColor(hexAccent, -5));\n document.body.style.setProperty(\n '--accent-disabled-color',\n adjustColor(hexAccent, -5, 0.5)\n );\n document.body.style.setProperty('--text-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accessibility-scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--accent-light-color');\n document.body.style.removeProperty('--accent-dark-color');\n document.body.style.removeProperty('--accent-disabled-color');\n document.body.style.removeProperty('--text-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Pad className={styles['tcn-palette']} amount=\"16px\">\n <Story />\n </Pad>\n );\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n showName: true,\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: 1,\n toolbar: {\n icon: 'collapse',\n items: [\n { value: 0.75, title: 'Extra Small' },\n { value: 0.875, title: 'Small' },\n { value: 1, title: 'Medium' },\n { value: 1.125, title: 'Large' },\n { value: 1.25, title: 'Extra Large' },\n ],\n showName: true,\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: 'Black',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}
|
package/dist/preview.d.cts
CHANGED
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
import { P } from './public-types-8dd0ccdf.js';
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* A decorator is a way to wrap a story in extra "rendering" functionality. Many addons define decorators
|
|
5
|
-
* in order to augment stories:
|
|
6
|
-
* - with extra rendering
|
|
7
|
-
* - gather details about how a story is rendered
|
|
8
|
-
*
|
|
9
|
-
* When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
|
|
10
|
-
*
|
|
11
|
-
* https://storybook.js.org/docs/react/writing-stories/decorators
|
|
12
|
-
*/
|
|
13
3
|
declare const preview: P;
|
|
14
4
|
|
|
15
5
|
export { preview as default };
|
package/dist/preview.d.ts
CHANGED
|
@@ -1,15 +1,5 @@
|
|
|
1
1
|
import { P } from './public-types-8dd0ccdf.js';
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* A decorator is a way to wrap a story in extra "rendering" functionality. Many addons define decorators
|
|
5
|
-
* in order to augment stories:
|
|
6
|
-
* - with extra rendering
|
|
7
|
-
* - gather details about how a story is rendered
|
|
8
|
-
*
|
|
9
|
-
* When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
|
|
10
|
-
*
|
|
11
|
-
* https://storybook.js.org/docs/react/writing-stories/decorators
|
|
12
|
-
*/
|
|
13
3
|
declare const preview: P;
|
|
14
4
|
|
|
15
5
|
export { preview as default };
|
package/dist/preview.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import {Pad}from'@tcn/ui-layout';import y,{useEffect}from'react';import g from'./tcn_palette.module-WZDBNRNC.module.css';var i="sb-blackcat-addon";function d(e,o){return Math.min(255,Math.max(0,e+Math.round(255*o/100)))}function n(e,o,c){let r,l,s,a=1;if(e.startsWith("#")){let t=e.slice(1);if(t.length===3||t.length===4)r=parseInt(t.charAt(0)+t.charAt(0),16),l=parseInt(t.charAt(1)+t.charAt(1),16),s=parseInt(t.charAt(2)+t.charAt(2),16),a=t.length===4?parseInt(t.charAt(3)+t.charAt(3),16)/255:1;else if(t.length===6||t.length===8)r=parseInt(t.substring(0,2),16),l=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16),a=t.length===8?parseInt(t.substring(6,8),16)/255:1;else throw console.log(e,"color"),new Error("Invalid hex color format")}else if(e.startsWith("rgb")){let t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*([\d.]*)\)/);if(t)r=parseInt(t[1]),l=parseInt(t[2]),s=parseInt(t[3]),a=t[4]?parseFloat(t[4]):1;else throw new Error("Invalid RGB(A) color format")}else throw console.log(e,"color"),new Error("Unsupported color format");return r=d(r,o),l=d(l,o),s=d(s,o),`rgba(${r}, ${l}, ${s}, ${c??a})`}var m=Object.freeze({Cyan:"#0abef1",Blue:"#1e7aff",Purple:"#953e96",Magenta:"#f54f9e",Red:"#e0383e",Orange:"#f7821a",Yellow:"#eeb80f",Green:"#39b712",Grey:"#797979",Black:"#333333",White:"#ffffff"}),u=Object.keys(m),p=(e,o)=>{let c=o.globals.direction??"ltr",r=o.globals.scalar??1,l=o.globals.accent??"Blue",s=o.globals.textColor??"Grey",a=m[l],t=m[s];return useEffect(()=>(document.body.dir=c,document.body.style.setProperty("--scalar",r.toString()),document.body.style.setProperty("--accessibility-scalar",r.toString()),document.body.style.setProperty("--accent-color",a),document.body.style.setProperty("--accent-light-color",n(a,10)),document.body.style.setProperty("--accent-dark-color",n(a,-5)),document.body.style.setProperty("--accent-disabled-color",n(a,-5,.5)),document.body.style.setProperty("--text-color",t),()=>{document.body.dir="ltr",document.body.style.removeProperty("--scalar"),document.body.style.removeProperty("--accessibility-scalar"),document.body.style.removeProperty("--accent-color"),document.body.style.removeProperty("--accent-light-color"),document.body.style.removeProperty("--accent-dark-color"),document.body.style.removeProperty("--accent-disabled-color"),document.body.style.removeProperty("--text-color");}),[c,r,a,t]),y.createElement(Pad,{className:g["tcn-palette"],amount:"16px"},y.createElement(e,null))};var h={parameters:{[i]:{}},globalTypes:{direction:{name:"Direction",description:"Layout direction of components based off user settings.",defaultValue:"ltr",toolbar:{icon:"transfer",items:[{value:"ltr",title:"Left to Right"},{value:"rtl",title:"Right to Left"}],showName:true,dynamicTitle:true}},scalar:{name:"Accessibility Scalar",description:"Scale text and component sizes based off user settings.",defaultValue:1,toolbar:{icon:"collapse",items:[{value:.75,title:"Extra Small"},{value:.875,title:"Small"},{value:1,title:"Medium"},{value:1.125,title:"Large"},{value:1.25,title:"Extra Large"}],showName:true,dynamicTitle:true}},accent:{description:"Global Accent Color",defaultValue:"Blue",toolbar:{title:"Accent",icon:"paintbrush",items:u,dynamicTitle:true}},textColor:{description:"Global Text Color",defaultValue:"Black",toolbar:{title:"Text Color",icon:"type",items:u,dynamicTitle:true}}},decorators:[p]},T=h;export{T as default};//# sourceMappingURL=preview.js.map
|
|
2
2
|
//# sourceMappingURL=preview.js.map
|
package/dist/preview.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/constants.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","TOOL_ID","BlackcatDecorator","Story","context","direction","scalar","useEffect","React","preview","preview_default"],"mappings":"gCAAO,IAAMA,EAAW,mBACXC,CCEN,IAAMC,CAAAA,CAA+B,CAACC,CAAAA,CAAOC,IAAY,CAC9D,IAAMC,CAAYD,CAAAA,CAAAA,CAAQ,QAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,QAAQ,MAAU,EAAA,CAAA,CAGzC,OAAAG,SAAAA,CAAU,IAAM,CACd,QAAA,CAAS,KAAK,GAAMF,CAAAA,EACtB,EAAG,CAACA,CAAS,CAAC,CAAA,CAEdE,UAAU,IAAM,CACd,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,wBAAA,CAA0BD,CAAO,CAAA,QAAA,EAAU,EAC7E,CAAA,CAAG,CAACA,CAAM,CAAC,CAEJE,CAAAA,CAAAA,CAAA,aAACL,CAAAA,CAAAA,CAAA,IAAM,CAChB,CAAA,CCFMM,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAACT,CAAQ,EAAG,EAId,EAOA,WAAa,CAAA,CACX,UAAW,CACT,IAAA,CAAM,WACN,CAAA,WAAA,CAAa,0DACb,YAAc,CAAA,KAAA,CACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,eAAgB,CAAA,CACvC,CAAE,KAAO,CAAA,KAAA,CAAO,KAAO,CAAA,eAAgB,CACzC,CACA,CAAA,QAAA,CAAU,IACZ,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,EACd,OAAS,CAAA,CACP,KAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,MAAO,GAAM,CAAA,KAAA,CAAO,aAAc,CAAA,CACpC,CAAE,KAAO,CAAA,IAAA,CAAO,KAAO,CAAA,OAAQ,EAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,EAC5B,CAAE,KAAA,CAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAC/B,CAAA,CAAE,KAAO,CAAA,IAAA,CAAM,MAAO,aAAc,CACtC,CACF,CACF,CACF,CAKA,CAAA,UAAA,CAAY,CAACE,CAAiB,CAChC,EAEOQ,CAAQD,CAAAA","file":"preview.js","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","import type { Decorator } from '@storybook/react';\nimport React, { useEffect } from 'react';\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n // const params = useParameter<BlackcatParameters>(ADDON_ID, defaultParameters)!;\n\n useEffect(() => {\n document.body.dir = direction;\n }, [direction]);\n\n useEffect(() => {\n document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n }, [scalar]);\n\n return <Story />;\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator } from './decorator.js';\n\n/**\n * A decorator is a way to wrap a story in extra \"rendering\" functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators\n */\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n\n /**\n * This is the global type for storybook that will add a toolbar to change the locale.\n * You must import this in preview.tsx and add it to the globalTypes object.\n * For more information, see: https://storybook.js.org/docs/essentials/toolbars-and-globals\n */\n globalTypes: {\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n showName: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: 1,\n toolbar: {\n icon: 'collapse',\n items: [\n { value: 0.75, title: 'Extra Small' },\n { value: 0.875, title: 'Small' },\n { value: 1, title: 'Medium' },\n { value: 1.125, title: 'Large' },\n { value: 1.25, title: 'Extra Large' },\n ],\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/constants.ts","../src/adjust_color.ts","../src/decorator.tsx","../src/preview.tsx"],"names":["ADDON_ID","adjustBrightness","value","percent","adjustColor","color","alpha","g","b","hex","matches","colorMap","colorNames","BlackcatDecorator","Story","context","direction","scalar","accent","textColor","hexAccent","hexTextColor","useEffect","React","Pad","styles","preview","preview_default"],"mappings":"yHAAO,IAAMA,CAAW,CAAA,mBAAA,CCAxB,SAASC,CAAAA,CAAiBC,CAAeC,CAAAA,CAAAA,CAAyB,CAEhE,OAAO,IAAK,CAAA,GAAA,CAAI,IAAK,IAAK,CAAA,GAAA,CAAI,CAAGD,CAAAA,CAAAA,CAAQ,KAAK,KAAO,CAAA,GAAA,CAAMC,CAAW,CAAA,GAAG,CAAC,CAAC,CAC7E,CAEO,SAASC,CAAYC,CAAAA,CAAAA,CAAeF,CAAiBG,CAAAA,CAAAA,CAAwB,CAClF,IAAI,CAAA,CACFC,CACAC,CAAAA,CAAAA,CACA,EAAI,CAEN,CAAA,GAAIH,CAAM,CAAA,UAAA,CAAW,GAAG,CAAG,CAAA,CAEzB,IAAMI,CAAAA,CAAMJ,EAAM,KAAM,CAAA,CAAC,CACzB,CAAA,GAAII,EAAI,MAAW,GAAA,CAAA,EAAKA,CAAI,CAAA,MAAA,GAAW,EAErC,CAAI,CAAA,QAAA,CAASA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAIA,CAAAA,CAAAA,CAAI,MAAO,CAAA,CAAC,CAAG,CAAA,EAAE,CAC9CF,CAAAA,CAAAA,CAAI,SAASE,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAIA,EAAI,MAAO,CAAA,CAAC,CAAG,CAAA,EAAE,EAC9CD,CAAI,CAAA,QAAA,CAASC,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAIA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAG,CAAA,EAAE,CAC9C,CAAA,CAAA,CAAIA,EAAI,MAAW,GAAA,CAAA,CAAI,QAASA,CAAAA,CAAAA,CAAI,OAAO,CAAC,CAAA,CAAIA,CAAI,CAAA,MAAA,CAAO,CAAC,CAAA,CAAG,EAAE,CAAA,CAAI,IAAM,CAClEA,CAAAA,KAAAA,GAAAA,CAAAA,CAAI,MAAW,GAAA,CAAA,EAAKA,EAAI,MAAW,GAAA,CAAA,CAC5C,CAAI,CAAA,QAAA,CAASA,EAAI,SAAU,CAAA,CAAA,CAAG,CAAC,CAAA,CAAG,EAAE,CACpCF,CAAAA,CAAAA,CAAI,QAASE,CAAAA,CAAAA,CAAI,UAAU,CAAG,CAAA,CAAC,CAAG,CAAA,EAAE,EACpCD,CAAI,CAAA,QAAA,CAASC,CAAI,CAAA,SAAA,CAAU,EAAG,CAAC,CAAA,CAAG,EAAE,CAAA,CACpC,CAAIA,CAAAA,CAAAA,CAAI,MAAW,GAAA,CAAA,CAAI,SAASA,CAAI,CAAA,SAAA,CAAU,CAAG,CAAA,CAAC,EAAG,EAAE,CAAA,CAAI,GAAM,CAAA,CAAA,CAAA,mBAEzD,GAAIJ,CAAAA,CAAAA,CAAO,OAAO,CAAA,CACpB,IAAI,KAAA,CAAM,0BAA0B,CAE9C,SAAWA,CAAM,CAAA,UAAA,CAAW,KAAK,CAAA,CAAG,CAElC,IAAMK,CAAAA,CAAUL,CAAM,CAAA,KAAA,CAAM,+CAA+C,CAC3E,CAAA,GAAIK,CACF,CAAA,CAAA,CAAI,QAASA,CAAAA,CAAAA,CAAQ,CAAC,CAAC,EACvBH,CAAI,CAAA,QAAA,CAASG,CAAQ,CAAA,CAAC,CAAC,CACvBF,CAAAA,CAAAA,CAAI,QAASE,CAAAA,CAAAA,CAAQ,CAAC,CAAC,CAAA,CACvB,CAAIA,CAAAA,CAAAA,CAAQ,CAAC,CAAI,CAAA,UAAA,CAAWA,CAAQ,CAAA,CAAC,CAAC,CAAI,CAAA,CAAA,CAAA,KAEpC,MAAA,IAAI,MAAM,6BAA6B,CAEjD,CACE,KAAA,MAAA,OAAA,CAAQ,IAAIL,CAAO,CAAA,OAAO,CAEpB,CAAA,IAAI,KAAM,CAAA,0BAA0B,CAI5C,CAAA,OAAA,CAAA,CAAIJ,EAAiB,CAAGE,CAAAA,CAAO,CAC/BI,CAAAA,CAAAA,CAAIN,EAAiBM,CAAGJ,CAAAA,CAAO,CAC/BK,CAAAA,CAAAA,CAAIP,EAAiBO,CAAGL,CAAAA,CAAO,CAGxB,CAAA,CAAA,KAAA,EAAQ,CAAC,CAAA,EAAA,EAAKI,CAAC,CAAA,EAAA,EAAKC,CAAC,CAAKF,EAAAA,EAAAA,CAAAA,EAAwB,CAAC,CAAA,CAAA,CAC5D,CC/CO,IAAMK,EAAW,MAAO,CAAA,MAAA,CAAO,CACpC,IAAA,CAAM,SACN,CAAA,IAAA,CAAM,SACN,CAAA,MAAA,CAAQ,UACR,OAAS,CAAA,SAAA,CACT,GAAK,CAAA,SAAA,CACL,OAAQ,SACR,CAAA,MAAA,CAAQ,SACR,CAAA,KAAA,CAAO,UACP,IAAM,CAAA,SAAA,CACN,KAAO,CAAA,SAAA,CACP,MAAO,SACT,CAAC,CAEYC,CAAAA,CAAAA,CAAa,OAAO,IAAKD,CAAAA,CAAQ,CAEjCE,CAAAA,CAAAA,CAA+B,CAACC,CAAOC,CAAAA,CAAAA,GAAY,CAC9D,IAAMC,EAAYD,CAAQ,CAAA,OAAA,CAAQ,SAAa,EAAA,KAAA,CACzCE,CAASF,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,MAAA,EAAU,EACnCG,CAASH,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,MAAA,EAAU,OACnCI,CAAYJ,CAAAA,CAAAA,CAAQ,OAAQ,CAAA,SAAA,EAAa,OAEzCK,CAAYT,CAAAA,CAAAA,CAASO,CAAM,CAAA,CAC3BG,CAAeV,CAAAA,CAAAA,CAASQ,CAAS,CAAA,CAEvC,OAAAG,SAAU,CAAA,KACR,QAAS,CAAA,IAAA,CAAK,IAAMN,CACpB,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,YAAY,UAAYC,CAAAA,CAAAA,CAAO,QAAS,EAAC,CAC7D,CAAA,QAAA,CAAS,IAAK,CAAA,KAAA,CAAM,YAAY,wBAA0BA,CAAAA,CAAAA,CAAO,QAAS,EAAC,EAC3E,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,WAAA,CAAY,iBAAkBG,CAAS,CAAA,CAC3D,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,sBAAA,CAAwBhB,CAAYgB,CAAAA,CAAAA,CAAW,EAAE,CAAC,CAAA,CAClF,QAAS,CAAA,IAAA,CAAK,MAAM,WAAY,CAAA,qBAAA,CAAuBhB,CAAYgB,CAAAA,CAAAA,CAAW,EAAE,CAAC,CAAA,CACjF,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,WAAA,CAClB,yBACAhB,CAAAA,CAAAA,CAAYgB,EAAW,EAAI,CAAA,EAAG,CAChC,CAAA,CACA,SAAS,IAAK,CAAA,KAAA,CAAM,WAAY,CAAA,cAAA,CAAgBC,CAAY,CAErD,CAAA,IAAM,CACX,QAAA,CAAS,IAAK,CAAA,GAAA,CAAM,KACpB,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,cAAA,CAAe,UAAU,CAAA,CAC7C,SAAS,IAAK,CAAA,KAAA,CAAM,cAAe,CAAA,wBAAwB,EAC3D,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,gBAAgB,CAAA,CACnD,QAAS,CAAA,IAAA,CAAK,MAAM,cAAe,CAAA,sBAAsB,CACzD,CAAA,QAAA,CAAS,KAAK,KAAM,CAAA,cAAA,CAAe,qBAAqB,CAAA,CACxD,SAAS,IAAK,CAAA,KAAA,CAAM,cAAe,CAAA,yBAAyB,EAC5D,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,cAAA,CAAe,cAAc,EACnD,CAAA,CAAA,CACC,CAACL,CAAAA,CAAWC,EAAQG,CAAWC,CAAAA,CAAY,CAAC,CAAA,CAG7CE,EAAA,aAACC,CAAAA,GAAAA,CAAA,CAAI,SAAA,CAAWC,CAAO,CAAA,aAAa,CAAG,CAAA,MAAA,CAAO,QAC5CF,CAAA,CAAA,aAAA,CAACT,CAAA,CAAA,IAAM,CACT,CAEJ,CAAA,CCzDMY,IAAAA,CAAAA,CAAmB,CACvB,UAAY,CAAA,CACV,CAAC1B,CAAQ,EAAG,EAId,CAAA,CACA,YAAa,CACX,SAAA,CAAW,CACT,IAAA,CAAM,YACN,WAAa,CAAA,yDAAA,CACb,YAAc,CAAA,KAAA,CACd,QAAS,CACP,IAAA,CAAM,UACN,CAAA,KAAA,CAAO,CACL,CAAE,KAAO,CAAA,KAAA,CAAO,MAAO,eAAgB,CAAA,CACvC,CAAE,KAAA,CAAO,MAAO,KAAO,CAAA,eAAgB,CACzC,CAAA,CACA,SAAU,IACV,CAAA,YAAA,CAAc,IAChB,CACF,EACA,MAAQ,CAAA,CACN,IAAM,CAAA,sBAAA,CACN,YAAa,yDACb,CAAA,YAAA,CAAc,CACd,CAAA,OAAA,CAAS,CACP,IAAM,CAAA,UAAA,CACN,KAAO,CAAA,CACL,CAAE,KAAO,CAAA,GAAA,CAAM,KAAO,CAAA,aAAc,CACpC,CAAA,CAAE,KAAO,CAAA,IAAA,CAAO,MAAO,OAAQ,CAAA,CAC/B,CAAE,KAAA,CAAO,EAAG,KAAO,CAAA,QAAS,CAC5B,CAAA,CAAE,MAAO,KAAO,CAAA,KAAA,CAAO,OAAQ,CAAA,CAC/B,CAAE,KAAO,CAAA,IAAA,CAAM,KAAO,CAAA,aAAc,CACtC,CACA,CAAA,QAAA,CAAU,IACV,CAAA,YAAA,CAAc,IAChB,CACF,CAAA,CACA,MAAQ,CAAA,CACN,YAAa,qBACb,CAAA,YAAA,CAAc,MACd,CAAA,OAAA,CAAS,CACP,KAAA,CAAO,QACP,CAAA,IAAA,CAAM,aACN,KAAOY,CAAAA,CAAAA,CACP,YAAc,CAAA,IAChB,CACF,CACA,CAAA,SAAA,CAAW,CACT,WAAA,CAAa,oBACb,YAAc,CAAA,OAAA,CACd,OAAS,CAAA,CACP,MAAO,YACP,CAAA,IAAA,CAAM,MACN,CAAA,KAAA,CAAOA,EACP,YAAc,CAAA,IAChB,CACF,CACF,EAKA,UAAY,CAAA,CAACC,CAAiB,CAChC,EAEOc,CAAQD,CAAAA","file":"preview.js","sourcesContent":["export const ADDON_ID = 'sb-blackcat-addon' as const;\nexport const TOOL_ID = `${ADDON_ID}/tool` as const;\n","function adjustBrightness(value: number, percent: number): number {\n // Calculate the adjustment based on the percent and ensure it's within the 0-255 range.\n return Math.min(255, Math.max(0, value + Math.round((255 * percent) / 100)));\n}\n\nexport function adjustColor(color: string, percent: number, alpha?: number): string {\n let r,\n g,\n b,\n a = 1;\n\n if (color.startsWith('#')) {\n // Remove '#' and parse the color based on its length.\n const hex = color.slice(1);\n if (hex.length === 3 || hex.length === 4) {\n // Expand shorthand hex to full.\n r = parseInt(hex.charAt(0) + hex.charAt(0), 16);\n g = parseInt(hex.charAt(1) + hex.charAt(1), 16);\n b = parseInt(hex.charAt(2) + hex.charAt(2), 16);\n a = hex.length === 4 ? parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255 : 1;\n } else if (hex.length === 6 || hex.length === 8) {\n r = parseInt(hex.substring(0, 2), 16);\n g = parseInt(hex.substring(2, 4), 16);\n b = parseInt(hex.substring(4, 6), 16);\n a = hex.length === 8 ? parseInt(hex.substring(6, 8), 16) / 255 : 1;\n } else {\n console.log(color, 'color');\n throw new Error('Invalid hex color format');\n }\n } else if (color.startsWith('rgb')) {\n // Extract values from rgb(a) string.\n const matches = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+),?\\s*([\\d.]*)\\)/);\n if (matches) {\n r = parseInt(matches[1]);\n g = parseInt(matches[2]);\n b = parseInt(matches[3]);\n a = matches[4] ? parseFloat(matches[4]) : 1;\n } else {\n throw new Error('Invalid RGB(A) color format');\n }\n } else {\n console.log(color, 'color');\n\n throw new Error('Unsupported color format');\n }\n\n // Apply brightness adjustment.\n r = adjustBrightness(r, percent);\n g = adjustBrightness(g, percent);\n b = adjustBrightness(b, percent);\n\n // Return the adjusted color in RGBA format.\n return `rgba(${r}, ${g}, ${b}, ${alpha != null ? alpha : a})`;\n}\n","import type { Decorator } from '@storybook/react';\nimport { Pad } from '@tcn/ui-layout';\nimport React, { useEffect } from 'react';\nimport { adjustColor } from 'src/adjust_color.js';\nimport styles from './tcn_palette.module.css';\n\nexport const colorMap = Object.freeze({\n Cyan: '#0abef1',\n Blue: '#1e7aff',\n Purple: '#953e96',\n Magenta: '#f54f9e',\n Red: '#e0383e',\n Orange: '#f7821a',\n Yellow: '#eeb80f',\n Green: '#39b712',\n Grey: '#797979',\n Black: '#333333',\n White: '#ffffff',\n});\n\nexport const colorNames = Object.keys(colorMap);\n\nexport const BlackcatDecorator: Decorator = (Story, context) => {\n const direction = context.globals.direction ?? 'ltr';\n const scalar = context.globals.scalar ?? 1;\n const accent = context.globals.accent ?? 'Blue';\n const textColor = context.globals.textColor ?? 'Grey';\n\n const hexAccent = colorMap[accent];\n const hexTextColor = colorMap[textColor];\n\n useEffect(() => {\n document.body.dir = direction;\n document.body.style.setProperty('--scalar', scalar.toString());\n document.body.style.setProperty('--accessibility-scalar', scalar.toString());\n document.body.style.setProperty('--accent-color', hexAccent);\n document.body.style.setProperty('--accent-light-color', adjustColor(hexAccent, 10));\n document.body.style.setProperty('--accent-dark-color', adjustColor(hexAccent, -5));\n document.body.style.setProperty(\n '--accent-disabled-color',\n adjustColor(hexAccent, -5, 0.5)\n );\n document.body.style.setProperty('--text-color', hexTextColor);\n\n return () => {\n document.body.dir = 'ltr';\n document.body.style.removeProperty('--scalar');\n document.body.style.removeProperty('--accessibility-scalar');\n document.body.style.removeProperty('--accent-color');\n document.body.style.removeProperty('--accent-light-color');\n document.body.style.removeProperty('--accent-dark-color');\n document.body.style.removeProperty('--accent-disabled-color');\n document.body.style.removeProperty('--text-color');\n };\n }, [direction, scalar, hexAccent, hexTextColor]);\n\n return (\n <Pad className={styles['tcn-palette']} amount=\"16px\">\n <Story />\n </Pad>\n );\n};\n","import type { Preview } from '@storybook/react';\nimport { ADDON_ID } from './constants.js';\nimport { BlackcatDecorator, colorNames } from './decorator.js';\n\nconst preview: Preview = {\n parameters: {\n [ADDON_ID]: {\n // enableScalar: true,\n // enableDirection: true,\n },\n },\n globalTypes: {\n direction: {\n name: 'Direction',\n description: 'Layout direction of components based off user settings.',\n defaultValue: 'ltr',\n toolbar: {\n icon: 'transfer',\n items: [\n { value: 'ltr', title: 'Left to Right' },\n { value: 'rtl', title: 'Right to Left' },\n ],\n showName: true,\n dynamicTitle: true,\n },\n },\n scalar: {\n name: 'Accessibility Scalar',\n description: 'Scale text and component sizes based off user settings.',\n defaultValue: 1,\n toolbar: {\n icon: 'collapse',\n items: [\n { value: 0.75, title: 'Extra Small' },\n { value: 0.875, title: 'Small' },\n { value: 1, title: 'Medium' },\n { value: 1.125, title: 'Large' },\n { value: 1.25, title: 'Extra Large' },\n ],\n showName: true,\n dynamicTitle: true,\n },\n },\n accent: {\n description: 'Global Accent Color',\n defaultValue: 'Blue',\n toolbar: {\n title: 'Accent',\n icon: 'paintbrush',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n textColor: {\n description: 'Global Text Color',\n defaultValue: 'Black',\n toolbar: {\n title: 'Text Color',\n icon: 'type',\n items: colorNames,\n dynamicTitle: true,\n },\n },\n },\n\n /**\n * Adds the Blackcat Decorator to all stories.\n */\n decorators: [BlackcatDecorator],\n};\n\nexport default preview;\n"]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
.tcn-palette {
|
|
2
|
+
/* Brand */
|
|
3
|
+
--tcn-primary-light: #fff7f0;
|
|
4
|
+
--tcn-primary-main: #cd6b2c;
|
|
5
|
+
--tcn-primary-dark: #b86128;
|
|
6
|
+
|
|
7
|
+
--tcn-secondary-light: #ecf4fb;
|
|
8
|
+
--tcn-secondary-main: #669eb4;
|
|
9
|
+
--tcn-secondary-dark: #497485;
|
|
10
|
+
|
|
11
|
+
--tcn-tertiary-light: #f9f4ed;
|
|
12
|
+
--tcn-tertiary-main: #dfd7cd;
|
|
13
|
+
--tcn-tertiary-dark: #7e6c5d;
|
|
14
|
+
|
|
15
|
+
--tcn-accent-green-light: #eef8ef;
|
|
16
|
+
--tcn-accent-green-main: #97bba3;
|
|
17
|
+
--tcn-accent-green-dark: #4f785b;
|
|
18
|
+
|
|
19
|
+
--tcn-accent-yellow-light: #fef9e7;
|
|
20
|
+
--tcn-accent-yellow-main: #dbc97e;
|
|
21
|
+
--tcn-accent-yellow-dark: #82722b;
|
|
22
|
+
|
|
23
|
+
--tcn-accent-blue-light: #f2f4f6;
|
|
24
|
+
--tcn-accent-blue-main: #395578;
|
|
25
|
+
--tcn-accent-blue-dark: #627083;
|
|
26
|
+
|
|
27
|
+
--tcn-accent-red-light: #fff4f4;
|
|
28
|
+
--tcn-accent-red-main: #ff6565;
|
|
29
|
+
--tcn-accent-red-dark: #c24848;
|
|
30
|
+
|
|
31
|
+
/* Neutral */
|
|
32
|
+
--tcn-neutral-black: #414141;
|
|
33
|
+
--tcn-neutral-grey-100: #555555;
|
|
34
|
+
--tcn-neutral-grey-90: #666666;
|
|
35
|
+
--tcn-neutral-grey-80: #777777;
|
|
36
|
+
--tcn-neutral-grey-dark: #808080;
|
|
37
|
+
--tcn-neutral-grey-70: #888888;
|
|
38
|
+
--tcn-neutral-grey-60: #999999;
|
|
39
|
+
--tcn-neutral-grey-main: #aaaaaa;
|
|
40
|
+
--tcn-neutral-grey-40: #bbbbbb;
|
|
41
|
+
--tcn-neutral-grey-30: #cccccc;
|
|
42
|
+
--tcn-neutral-grey-light: #d3d3d3;
|
|
43
|
+
--tcn-neutral-grey-20: #dddddd;
|
|
44
|
+
--tcn-neutral-grey-10: #eeeeee;
|
|
45
|
+
--tcn-neutral-white: #ffffff;
|
|
46
|
+
|
|
47
|
+
/* Status */
|
|
48
|
+
--tcn-status-error-light: var(--tcn-accent-red-light);
|
|
49
|
+
--tcn-status-error-main: var(--tcn-accent-red-main);
|
|
50
|
+
--tcn-status-error-dark: var(--tcn-accent-red-dark);
|
|
51
|
+
--tcn-status-warning-light: #f9e2cd;
|
|
52
|
+
--tcn-status-warning-main: #e48139;
|
|
53
|
+
--tcn-status-warning-dark: #b86027;
|
|
54
|
+
--tcn-status-caution-light: #ffeca9;
|
|
55
|
+
--tcn-status-caution-main: #ffd439;
|
|
56
|
+
--tcn-status-caution-dark: #dbb634;
|
|
57
|
+
--tcn-status-info-light: var(--tcn-secondary-light);
|
|
58
|
+
--tcn-status-info-main: var(--tcn-secondary-main);
|
|
59
|
+
--tcn-status-info-dark: var(--tcn-secondary-dark);
|
|
60
|
+
--tcn-status-disabled: #d3d3d3;
|
|
61
|
+
|
|
62
|
+
/* Feedback */
|
|
63
|
+
--tcn-feedback-failed-light: var(--tcn-accent-red-light);
|
|
64
|
+
--tcn-feedback-failed-main: var(--tcn-accent-red-main);
|
|
65
|
+
--tcn-feedback-failed-dark: var(--tcn-accent-red-dark);
|
|
66
|
+
--tcn-feedback-pending-light: var(--tcn-secondary-light);
|
|
67
|
+
--tcn-feedback-pending-main: var(--tcn-secondary-main);
|
|
68
|
+
--tcn-feedback-pending-dark: var(--tcn-secondary-dark);
|
|
69
|
+
--tcn-feedback-success-light: #86e8a8;
|
|
70
|
+
--tcn-feedback-success-main: #3fbb6a;
|
|
71
|
+
--tcn-feedback-success-dark: #2c904e;
|
|
72
|
+
|
|
73
|
+
/* Surface */
|
|
74
|
+
--tcn-surface-application: #f1f1f1;
|
|
75
|
+
--tcn-surface-page: #ffffff;
|
|
76
|
+
--tcn-surface-workspace: #eaeaea;
|
|
77
|
+
|
|
78
|
+
/* Text */
|
|
79
|
+
--tcn-text-primary: var(--tcn-accent-blue-main);
|
|
80
|
+
--tcn-text-emphasis: var(--tcn-primary-main);
|
|
81
|
+
--tcn-text-placeholder: var(--tcn-neutral-grey-30);
|
|
82
|
+
--tcn-text-disabled: var(--tcn-status-disabled);
|
|
83
|
+
--tcn-text-error: var(--tcn-status-error-main);
|
|
84
|
+
--tcn-text-loading: var(--tcn-neutral-grey-30);
|
|
85
|
+
--tcn-text-inverse: var(--tcn-neutral-white);
|
|
86
|
+
}
|