{"_id":"@4i4/theme-toolkit","name":"@4i4/theme-toolkit","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@4i4/theme-toolkit","version":"0.1.0","description":"Utility helpers for styled-components themes used with @4i4/theme-registry","author":{"name":"Petyo Stoyanov","email":"petyosv@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/4i4-team/theme-toolkit.git"},"bugs":{"url":"https://github.com/4i4-team/theme-toolkit/issues"},"homepage":"https://github.com/4i4-team/theme-toolkit#readme","license":"MIT","main":"./dist/index.cjs.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.esm.js","types":"./dist/index.d.ts"}},"scripts":{"build":"rollup -c","start":"rollup -c -w","lint":"eslint --ext .ts src","clean":"rimraf dist","prepublishOnly":"npm run build"},"peerDependencies":{"styled-components":"^6.0.0"},"devDependencies":{"@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","eslint":"^8.57.1","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.2","eslint-plugin-react":"^7.37.2","prettier":"^3.3.3","rimraf":"^5.0.5","rollup":"^3.29.4","rollup-plugin-dts":"^5.3.0","rollup-plugin-peer-deps-external":"^2.2.4","styled-components":"^6.1.12","typescript":"^5.4.2"},"_id":"@4i4/theme-toolkit@0.1.0","gitHead":"155f6eef5d1c8710eaeb3e0e3f1672d122d1b756","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-1s0fHBKBGJjaFWbd7zyWWCbajOs7Qy3cKkN0c6x0D45vxa/K3lPKw+JZ+SLMhrRRfihOHV8ABfeJ8Sc/0p3Vzg==","shasum":"be2aedcdd8c6824da6819f01c96b0e786c8e3242","tarball":"https://registry.npmjs.org/@4i4/theme-toolkit/-/theme-toolkit-0.1.0.tgz","fileCount":10,"unpackedSize":44769,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCOGvYzYgE2HNKhyChX6kMAgqhCr5r7qwCXU5gJgZDo0gIhALjvccc18boYg/ruhXisxqjoUg0BuCXx7Aru2iUi3u5B"}]},"_npmUser":{"name":"petyosv","email":"petyosv@gmail.com"},"directories":{},"maintainers":[{"name":"petyosv","email":"petyosv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/theme-toolkit_0.1.0_1761128574996_0.7604024733538322"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T10:22:54.995Z","0.1.0":"2025-10-22T10:22:55.191Z","modified":"2025-10-22T10:22:55.811Z"},"maintainers":[{"name":"petyosv","email":"petyosv@gmail.com"}],"description":"Utility helpers for styled-components themes used with @4i4/theme-registry","homepage":"https://github.com/4i4-team/theme-toolkit#readme","repository":{"type":"git","url":"git+https://github.com/4i4-team/theme-toolkit.git"},"author":{"name":"Petyo Stoyanov","email":"petyosv@gmail.com"},"bugs":{"url":"https://github.com/4i4-team/theme-toolkit/issues"},"license":"MIT","readme":"# @4i4/theme-toolkit\n\nA collection of layout and color utilities for styled-components themes, designed to complement [`@4i4/theme-registry`](https://github.com/4i4-team/theme-registry).\n\n## Installation\n\n```\nnpm install @4i4/theme-toolkit\n# or\nyarn add @4i4/theme-toolkit\n```\n\n## Usage\n\n```ts\nimport {\n  DEFAULT_BREAKPOINTS,\n  media,\n  container,\n  buildColumn,\n  buildPalettes,\n  buildButtons,\n} from \"@4i4/theme-toolkit\";\n\nconst breakpoints = DEFAULT_BREAKPOINTS;\n\nconst theme = {\n  media: media(breakpoints),\n  container: container(breakpoints),\n  column: buildColumn(12, breakpoints),\n  palettes: buildPalettes({\n    primary: { main: \"#2251ff\", text: \"#ffffff\" },\n  }),\n  buttons: buildButtons([\"primary\"]),\n};\n```\n\n## Modules\n\n- **media-query** – breakpoint utilities (`DEFAULT_BREAKPOINTS`, `mediaQuery`, `media`), plus container helpers.\n- **grid** – grid utilities (`container`, `buildColumn`, `buildBreakpointColumnSizes`, `columnSizes`).\n- **colors** – color transforms (`convertHexToRGB`, `lighten`, `buildPalettes`, etc.).\n\nAll helpers are designed to work with styled-components themes.\n\n## Color Utilities\n\nThe `colors` module exposes helper functions for palette composition and color transformations:\n\n- `convertHexToRGB(hex)`: parse `#RGB`/`#RRGGBB` strings into `[r, g, b]` tuples.\n- `convertRgbToHex(rgb)`: convert an `[r, g, b]` tuple back to a hex string.\n- `convertHexToHue(hex)`: compute the hue (in degrees) for a hex color.\n- `lighten(hex, percent)` / `darken(hex, percent)`: adjust color luminosity with 0–100% clamped input.\n- `buildPalettes(palettes)`: generate CSS custom properties (e.g. `--color--primary`, `--color--primary--dark`).\n- `buildButtons(types)`: derive button class helpers (`.btn-primary`, `.btn-primary-hollow`, etc.) from palette variables.\n\nDefault palette utilities expect the CSS variables produced by `buildPalettes`; override or extend them to match your theme naming conventions.\n\n## Media Helpers Example\n\n```ts\nimport styled from \"styled-components\";\nimport { DEFAULT_BREAKPOINTS, media } from \"@4i4/theme-toolkit\";\n\nconst theme = {\n  media: media(DEFAULT_BREAKPOINTS),\n};\n\nexport const Wrapper = styled.div`\n  padding: 16px;\n\n  ${({ theme }) => theme.media.sm.max`\n    padding: 12px;\n  `}\n\n  ${({ theme }) => theme.media.lg.min`\n    padding: 24px;\n  `}\n`;\n```\n\nEach breakpoint exposes `min`, `max`, and `exact` functions, so responsive tweaks can stay declarative inside styled-components.\n\n## Grid Utilities\n\nGrid helpers build on the media utilities to create responsive column layouts.\n\n```ts\nimport styled from \"styled-components\";\nimport {\n  DEFAULT_BREAKPOINTS,\n  media,\n  container,\n  buildColumn,\n  columnSizes,\n} from \"@4i4/theme-toolkit\";\n\nconst breakpoints = DEFAULT_BREAKPOINTS;\n\nexport const Theme = {\n  media: media(breakpoints),\n  container: container(breakpoints),\n  column: buildColumn(12, breakpoints),\n  columnSizes: columnSizes(12),\n};\n\nexport const Container = styled.div`\n  ${({ theme }) => theme.container}\n  max-width: var(--container-width);\n  margin: 0 auto;\n  padding: 0 16px;\n`;\n\nexport const Column = styled.div`\n  ${({ theme }) => theme.column}\n`;\n\n// Usage: <Column className=\"md-6 lg-4\" /> will span 6 columns on md, 4 on lg\n```\n\n`columnSizes(size)` returns a numeric map of percentage widths that you can wire into class names or CSS custom properties as needed.\n\n## Integrating With styled-components Themes\n\nExtend your `DefaultTheme` to include the helpers you consume:\n\n```ts\nimport \"styled-components\";\nimport type { DefaultBreakpoints } from \"@4i4/theme-toolkit\";\n\ndeclare module \"styled-components\" {\n  // adjust the palette/button typing to your project needs\n  interface DefaultTheme {\n    media: ReturnType<typeof import(\"@4i4/theme-toolkit\").media<keyof DefaultBreakpoints>>;\n    container: ReturnType<typeof import(\"@4i4/theme-toolkit\").container<keyof DefaultBreakpoints>>;\n    column: ReturnType<typeof import(\"@4i4/theme-toolkit\").buildColumn<keyof DefaultBreakpoints>>;\n    palettes: ReturnType<typeof import(\"@4i4/theme-toolkit\").buildPalettes>;\n    buttons: ReturnType<typeof import(\"@4i4/theme-toolkit\").buildButtons>;\n  }\n}\n```\n\n## Button Helpers\n\n`buildButtons([\"primary\"])` generates class name helpers:\n\n- `.btn-primary`\n- `.btn-primary-hollow`\n- `.btn-primary-link`\n\nAll variants rely on the CSS variables created by `buildPalettes`. Customize the palette map or extend the button helper to suit your design system.\n\n## Custom Breakpoints\n\n`DEFAULT_BREAKPOINTS` matches the toolkit’s out-of-the-box layout setup. To use your own:\n\n```ts\nconst BREAKPOINTS = {\n  mobile: 0,\n  tablet: 640,\n  desktop: 1024,\n} as const;\n\nconst theme = {\n  media: media(BREAKPOINTS),\n  container: container(BREAKPOINTS),\n  column: buildColumn(12, BREAKPOINTS),\n};\n```\n\nAny string keys are supported; they flow through to `theme.media.<key>` and the generated grid class names.\n","readmeFilename":"README.md","_rev":"1-e81f4ea1d7c0c63c75a2c087300e84bb"}