@techfides/ui-library-design 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TechFides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+# @techfides/ui-library-design
+
+The framework-agnostic half of the TechFides UI library: the Tailwind CSS v4 theme, the design tokens, and the variant recipes every component is built from.
+
+No framework, no components. If you are building with Vue, install [`@techfides/ui-library-vue`](https://www.npmjs.com/package/@techfides/ui-library-vue) instead — it depends on this one and brings it with it. Reach for this package directly when you are styling something the component library does not cover, or when a React binding arrives.
+
+## Install
+
+```bash
+pnpm add @techfides/ui-library-design
+```
+
+ESM only, Node 24 or newer.
+
+## Wire it up
+
+```css
+@import 'tailwindcss';
+@import '@techfides/ui-library-design/css';
+```
+
+That brings the theme, the base layer, the tokens and the two typefaces the type scale asks for — Inter and Poppins, in the four weights it uses. `@techfides/ui-library-design/theme.css` is the theme on its own, without the fonts and without the `@source` directive, for when you want to bring your own of both.
+
+## What is in it
+
+**Tokens** — surfaces, lines, ink, four brand accents, four semantic tones, a four-step rhythm, five radii, the type scale, the motion curves and durations. Every one of them is a Tailwind v4 `@theme` entry, so `bg-tf-panel`, `text-tf-muted` and `rounded-tf-card` are ordinary utilities.
+
+**Recipes** — one [cva](https://cva.style) recipe per component part, holding the classes that component paints with. `buttonRecipe`, `tableCellRecipe`, `statValueRecipe` and so on. A framework binding renders the markup and asks a recipe for the classes.
+
+**`cn`** — clsx and tailwind-merge, extended with every scale the theme declares, so a consumer's class always wins over ours:
+
+```ts
+import { cn } from '@techfides/ui-library-design'
+
+cn('bg-tf-panel p-6', props.class)
+```
+
+**Brand** — four accents, switched by a `data-brand` attribute on the root. Every accent role in the system derives from the one the brand names.
+
+## The one thing to know about surfaces
+
+Depth is carried by lightness, not by shadow: on a dark screen a black shadow has almost nothing to fall on. There are five surface steps and each is measurably lighter than the one below it. A shadow means something different — that a thing has left the page altogether.
+
+Two rules fall out of that and both are easy to break:
+
+- Translucent surfaces **compound**. Two sheets at 6.5 per cent are 12.6 per cent, not 6.5. A glass card inside a glass card is lighter than either.
+- A `mask-image` erases the fill of the element it is set on, background included. Nothing that fades may paint a surface of its own.
+
+## Publishing this package
+
+Use `pnpm`, not `npm` — the published `exports` map lives in `publishConfig`, which npm ignores. A `prepack` guard refuses any other agent.
+
+## Licence
+
+MIT

package/assets/brands/digital-boost-group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" viewBox="0 0 512 512"><defs><clipPath id="cp1" clipPathUnits="userSpaceOnUse"><path d="M-410-339h940v862h-940z"/></clipPath><clipPath id="cp2" clipPathUnits="userSpaceOnUse"><path d="M1 9h180v165H1z"/></clipPath></defs><style>.a{fill:#f3f3f3}.b{fill:#995fd2}</style><g clip-path="url(#cp1)" transform="scale(2.81319)"><path d="M-341.3-62.8V93.8c0 236.7 195.4 429.2 435.6 429.2C334.6 523 530 329.7 530 92.1s-195.4-431-435.7-431H-26.3v68.2H94.3c202.3 0 366.8 162.8 366.8 362.8S296.6 454.8 94.3 454.8c-202.2 0-366.7-161.9-366.7-361v-224.9H-410v68.3z" class="a"/><path d="M-410-270.7V-339h347.7l.1 432.8c0 84.5 70.2 153.1 156.5 153.1 86.4 0 156.6-69.4 156.6-154.8 0-85.5-70.2-154.9-156.6-154.9H-26.3V-131H94.3c124.4 0 225.6 100.1 225.6 223.1s-101.2 223-225.6 223c-124.3 0-225.5-99.2-225.5-221.3v-364.5z" class="a"/><path d="M-410-166.8V-235h242.7V93.8c0 141.8 117.4 257.1 261.6 257.1C238.6 350.9 356 234.8 356 92.1S238.6-166.7 94.3-166.7H-26.3v-68.2H94.3c182.3 0 330.6 146.7 330.6 327s-148.3 327-330.6 327-330.6-145.9-330.6-325.3v-260.6z" class="a"/></g><g clip-path="url(#cp2)" transform="scale(2.81319)"><path d="M14.1 61.9v30c0 45.2 37.5 82.1 83.5 82.1S181 137 181 91.5 143.6 9 97.6 9H74.5v13.1h23.1c38.7 0 70.2 31.1 70.2 69.4S136.3 161 97.6 161s-70.3-31.1-70.3-69.1V48.8H1v13.1z" class="b"/><path d="M1 22.1V9h66.6v82.9c0 16.1 13.4 29.3 30 29.3 16.5 0 30-13.3 30-29.7 0-16.3-13.5-29.6-30-29.6H74.5V48.8h23.1c23.8 0 43.2 19.2 43.2 42.7 0 23.6-19.4 42.7-43.2 42.7s-43.2-19-43.2-42.3V22.1z" class="b"/><path d="M1 42V28.9h46.5v63c0 27.1 22.4 49.2 50.1 49.2 27.6 0 50.1-22.3 50.1-49.6S125.2 42 97.6 42H74.5V28.9h23.1c34.9 0 63.3 28.1 63.3 62.6s-28.4 62.6-63.3 62.6-63.3-27.9-63.3-62.2V42z" class="b"/></g></svg>

package/assets/brands/rtsg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512"><style>.b{fill:#ea7504}</style><path d="M250.964 251.803c0 17.627-14.269 31.895-31.895 31.895s-31.895-14.268-31.895-31.895c0-18.465 14.269-32.734 31.895-32.734s31.895 14.269 31.895 32.734" class="b"/><path d="M45.3 18.5V0L23.1 15.8v9c.9-.5 1.9-.8 3-.8h.5v-6.4L41.8 6.8v51.8l2.7-1.8c6.5-4.4 10.3-11.6 10.3-19.5.1-7.4-3.5-14.4-9.5-18.8m0 33.2V23c3.9 3.8 6.1 8.9 6.1 14.3 0 5.5-2.2 10.7-6.1 14.4" style="fill:#d95614" transform="scale(8.39344)"/><path d="M256 510.321V365.115c0-20.145-16.787-36.931-36.931-36.931s-36.931 16.786-36.931 36.93v129.26l-22.663-14.27c-57.914-36.09-92.327-98.202-92.327-167.029 0-72.183 39.449-138.491 102.4-172.905v34.414c-45.325 31.055-73.023 83.095-73.023 138.491 0 48.682 20.144 94.007 56.236 125.902v-73.862c0-36.092 29.377-66.308 66.308-66.308 36.092 0 66.308 30.216 66.308 66.308v144.367z" class="b"/></svg>

package/assets/brands/tech-it-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512"><style>.b{fill:#84bd23}</style><path d="M256 79.36c42.667 0 81.067 15.36 111.787 40.107q3.84 2.56 7.68 0l55.466-40.96c2.56-1.707 3.414-6.827 0-9.387C385.707 26.453 324.267 0 256 0 188.587 0 127.147 26.453 81.067 69.12c-2.56 2.56-2.56 7.68.853 9.387l55.467 40.96c1.706 1.706 5.12 1.706 7.68 0C174.933 94.72 214.187 79.36 256 79.36m221.867 64L422.4 183.467c-1.707 1.706-2.56 5.12-1.707 7.68 7.68 20.48 11.947 41.813 11.947 64.853 0 25.6-5.12 49.493-14.507 70.827-11.093 24.746-28.16 46.933-47.786 64-30.72 25.6-70.827 41.813-114.347 41.813-42.667 0-82.773-16.213-113.493-41.813-20.48-17.067-36.694-39.254-47.787-64C85.333 305.493 80.213 281.6 80.213 256c0-23.04 4.267-44.373 11.947-64.853.853-2.56 0-5.974-2.56-7.68L34.987 143.36c-3.414-2.56-7.68-1.707-9.387 1.707C8.533 179.2 0 217.6 0 258.56 1.707 398.507 116.053 512 256 512c141.653 0 256.853-114.347 256.853-256 0-39.253-9.386-76.8-25.6-110.933-1.706-3.414-5.973-4.267-9.386-1.707" class="b"/><path d="M216.747 151.893v208.214c0 3.413 1.706 5.973 5.12 6.826q16.213 3.414 34.133 3.414t34.987-3.414c3.413-.853 5.12-3.413 5.12-6.826V151.893c0-3.413-1.707-5.973-5.12-6.826q-17.067-3.414-34.987-3.414t-34.133 3.414c-3.414.853-5.12 3.413-5.12 6.826" class="b"/></svg>

package/assets/brands/techfides.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512"><style>.a{fill:#0075c9}.b{fill:#003056}.c{fill:#7e8890}</style><path d="M473.39 0H41.967v55.397H473.39zM41.967 117.508v55.397h139.331V459.12l56.236 47.004V117.508h-56.236zM473.39 117.508H277.823v55.397H473.39zM421.35 243.41H277.824v55.397h143.528z" class="a"/></svg>

package/css/index.css

@@ -0,0 +1,8 @@
+@import '@fontsource-variable/inter';
+@import '@fontsource/poppins/300.css';
+@import '@fontsource/poppins/400.css';
+@import '@fontsource/poppins/600.css';
+@import '@fontsource/poppins/700.css';
+@import './theme.css';
+
+@source "../dist";