@tekton-ui/styled 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tekton Contributors
+
+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,76 @@
+# @tekton/styled
+
+Token-enforced styled-components wrapper with compile-time and runtime validation.
+
+## Overview
+
+Drop-in replacement for styled-components that enforces design token usage and rejects hardcoded CSS values.
+
+## Installation
+
+```bash
+pnpm add @tekton/styled styled-components
+```
+
+## Usage
+
+```typescript
+import { styled, tokens } from '@tekton/styled';
+
+// ✅ Valid: Using tokens
+const Card = styled.div`
+  background: ${tokens.bg.surface.elevated};
+  padding: ${tokens.spacing[6]};
+  border-radius: ${tokens.radius.lg};
+  box-shadow: ${tokens.shadow.md};
+`;
+
+// ❌ Invalid: Hardcoded values throw runtime errors
+const Bad = styled.div`
+  background: #ffffff; // Error: Hardcoded value detected
+  padding: 16px; // Error: Hardcoded value detected
+`;
+
+// ✅ Valid: Non-token properties work normally
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: ${tokens.bg.surface.default};
+`;
+```
+
+## Token Accessor
+
+The `tokens` accessor provides IDE autocomplete and returns CSS variable references:
+
+```typescript
+tokens.bg.surface.default; // → 'var(--tekton-bg-surface-default)'
+tokens.spacing[4]; // → 'var(--tekton-spacing-4)'
+tokens.fg.primary; // → 'var(--tekton-fg-primary)'
+```
+
+## Features
+
+- **Compile-time Type Safety**: TypeScript enforces token types
+- **Runtime Validation**: Detects hardcoded colors and spacing values
+- **IDE Autocomplete**: Full IntelliSense support for tokens
+- **styled-components Compatible**: Works with all styled-components features
+- **Error Messages**: Clear, actionable error messages with suggestions
+
+## Requirements
+
+- REQ-STY-001: Reject hardcoded colors (#fff, rgb(), hsl(), etc.)
+- REQ-STY-002: Reject hardcoded spacing (16px, 2rem, etc.)
+- REQ-STY-003: Provide IDE autocomplete
+- REQ-STY-013: Allow non-token properties (display, position, etc.)
+
+## SPEC Reference
+
+- [SPEC-STYLED-001](/.moai/specs/SPEC-STYLED-001/spec.md)
+- TAG-003: Token Accessor
+- TAG-004: Styled Wrapper Core
+- TAG-005: Runtime Validation
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { tokens } from './tokens.js';
+export { styled, css, createGlobalStyle } from './styled.js';
+export type { ValidTokenValue } from './styled.js';
+export { validateNoHardcodedValues } from './validation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { tokens } from './tokens.js';
+export { styled, css, createGlobalStyle } from './styled.js';
+export { validateNoHardcodedValues } from './validation.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/styled.d.ts

@@ -0,0 +1,6 @@
+import baseStyled, { css as baseCss, createGlobalStyle as baseCreateGlobalStyle } from 'styled-components';
+import type { TokenReference } from '@tekton-ui/tokens';
+export type ValidTokenValue = TokenReference | string | number | ((props: any) => TokenReference | string | number);
+export declare const styled: typeof baseStyled;
+export { baseCss as css, baseCreateGlobalStyle as createGlobalStyle };
+//# sourceMappingURL=styled.d.ts.map

package/dist/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAOA,OAAO,UAAU,EAAE,EACjB,GAAG,IAAI,OAAO,EACd,iBAAiB,IAAI,qBAAqB,EAC3C,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOxD,MAAM,MAAM,eAAe,GACvB,cAAc,GACd,MAAM,GACN,MAAM,GACN,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;AAOvD,eAAO,MAAM,MAAM,EAAE,OAAO,UAc1B,CAAC;AAmBH,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/styled.js

@@ -0,0 +1,22 @@
+import baseStyled, { css as baseCss, createGlobalStyle as baseCreateGlobalStyle, } from 'styled-components';
+import { validateNoHardcodedValues } from './validation.js';
+export const styled = new Proxy(baseStyled, {
+    get(target, prop) {
+        if (typeof prop === 'symbol' || prop === 'default') {
+            return target[prop];
+        }
+        const component = target[prop];
+        if (typeof component === 'function') {
+            return createTokenEnforcedStyled(component);
+        }
+        return component;
+    },
+});
+function createTokenEnforcedStyled(styledFn) {
+    return (strings, ...values) => {
+        validateNoHardcodedValues(strings, values);
+        return styledFn(strings, ...values);
+    };
+}
+export { baseCss as css, baseCreateGlobalStyle as createGlobalStyle };
+//# sourceMappingURL=styled.js.map

package/dist/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAOA,OAAO,UAAU,EAAE,EACjB,GAAG,IAAI,OAAO,EACd,iBAAiB,IAAI,qBAAqB,GAC3C,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAiB5D,MAAM,CAAC,MAAM,MAAM,GAAsB,IAAI,KAAK,CAAC,UAAU,EAAE;IAC7D,GAAG,CAAC,MAAM,EAAE,IAAqB;QAC/B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACnD,OAAQ,MAAc,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QAED,MAAM,SAAS,GAAI,MAAc,CAAC,IAAI,CAAC,CAAC;QAExC,IAAI,OAAO,SAAS,KAAK,UAAU,EAAE,CAAC;YACpC,OAAO,yBAAyB,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;CACF,CAAC,CAAC;AAKH,SAAS,yBAAyB,CAAC,QAAa;IAC9C,OAAO,CAAC,OAA6B,EAAE,GAAG,MAAyB,EAAE,EAAE;QAErE,yBAAyB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAG3C,OAAO,QAAQ,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC;AAMD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/tokens.d.ts

@@ -0,0 +1,3 @@
+import type { TektonTokens } from '@tekton-ui/tokens';
+export declare const tokens: TektonTokens;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,eAAO,MAAM,MAAM,EAAE,YAInB,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,29 @@
+export const tokens = new Proxy({}, {
+    get(_target, category) {
+        return createCategoryProxy(category);
+    },
+});
+function createCategoryProxy(category) {
+    const target = {};
+    return new Proxy(target, {
+        get(_target, key) {
+            if (key === 'toString' || key === 'valueOf') {
+                return () => `var(--tekton-${category})`;
+            }
+            if (key === Symbol.toPrimitive) {
+                return (hint) => {
+                    if (hint === 'string' || hint === 'default') {
+                        return `var(--tekton-${category})`;
+                    }
+                    return null;
+                };
+            }
+            if (typeof key === 'symbol') {
+                return undefined;
+            }
+            const path = `${category}-${String(key)}`;
+            return createCategoryProxy(path);
+        },
+    });
+}
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAC,MAAM,MAAM,GAAiB,IAAI,KAAK,CAAC,EAAkB,EAAE;IAChE,GAAG,CAAC,OAAO,EAAE,QAAgB;QAC3B,OAAO,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;CACF,CAAC,CAAC;AAMH,SAAS,mBAAmB,CAAC,QAAgB;IAE3C,MAAM,MAAM,GAAG,EAAE,CAAC;IAElB,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE;QACvB,GAAG,CAAC,OAAO,EAAE,GAAoB;YAE/B,IAAI,GAAG,KAAK,UAAU,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC5C,OAAO,GAAG,EAAE,CAAC,gBAAgB,QAAQ,GAAG,CAAC;YAC3C,CAAC;YAGD,IAAI,GAAG,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC;gBAC/B,OAAO,CAAC,IAAY,EAAE,EAAE;oBACtB,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;wBAC5C,OAAO,gBAAgB,QAAQ,GAAG,CAAC;oBACrC,CAAC;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC;YACJ,CAAC;YAGD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,OAAO,SAAS,CAAC;YACnB,CAAC;YAGD,MAAM,IAAI,GAAG,GAAG,QAAQ,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1C,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;KACF,CAAC,CAAC;AACL,CAAC"}

package/dist/validation.d.ts

@@ -0,0 +1,2 @@
+export declare function validateNoHardcodedValues(strings: TemplateStringsArray, values: any[]): void;
+//# sourceMappingURL=validation.d.ts.map

package/dist/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../src/validation.ts"],"names":[],"mappings":"AAWA,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CA2E5F"}

package/dist/validation.js

@@ -0,0 +1,65 @@
+export function validateNoHardcodedValues(strings, values) {
+    let fullTemplate = '';
+    for (let i = 0; i < strings.length; i++) {
+        fullTemplate += strings[i];
+        if (i < values.length) {
+            if (typeof values[i] === 'function') {
+                fullTemplate += '${...}';
+            }
+            else {
+                fullTemplate += String(values[i]);
+            }
+        }
+    }
+    const colorPatterns = [
+        {
+            regex: /#[0-9a-fA-F]{3,8}\b/g,
+            type: 'hex color',
+            example: 'tokens.bg.primary.default',
+        },
+        {
+            regex: /rgb\s*\([^)]+\)/gi,
+            type: 'rgb() color',
+            example: 'tokens.bg.primary.default',
+        },
+        {
+            regex: /rgba\s*\([^)]+\)/gi,
+            type: 'rgba() color',
+            example: 'tokens.bg.primary.default',
+        },
+        {
+            regex: /hsl\s*\([^)]+\)/gi,
+            type: 'hsl() color',
+            example: 'tokens.fg.primary',
+        },
+        {
+            regex: /hsla\s*\([^)]+\)/gi,
+            type: 'hsla() color',
+            example: 'tokens.fg.primary',
+        },
+    ];
+    for (const { regex, type, example } of colorPatterns) {
+        const match = regex.exec(fullTemplate);
+        if (match) {
+            throw new Error(`[Tekton] Hardcoded value detected: ${type} "${match[0]}"\n` +
+                `Use tokens instead. Example: ${example}\n` +
+                `Template snippet: ${fullTemplate.substring(Math.max(0, match.index - 20), match.index + 40)}...`);
+        }
+    }
+    const spacingPatterns = [
+        {
+            regex: /(?:padding|margin|gap|top|right|bottom|left|width|height)\s*:\s*\d+px/gi,
+            type: 'pixel spacing',
+            example: 'tokens.spacing[4]',
+        },
+    ];
+    for (const { regex, type, example } of spacingPatterns) {
+        const match = regex.exec(fullTemplate);
+        if (match) {
+            throw new Error(`[Tekton] Hardcoded value detected: ${type} "${match[0]}"\n` +
+                `Use tokens instead. Example: ${example}\n` +
+                `Template snippet: ${fullTemplate.substring(Math.max(0, match.index - 20), match.index + 40)}...`);
+        }
+    }
+}
+//# sourceMappingURL=validation.js.map

package/dist/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../src/validation.ts"],"names":[],"mappings":"AAWA,MAAM,UAAU,yBAAyB,CAAC,OAA6B,EAAE,MAAa;IAEpF,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;YAEtB,IAAI,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE,CAAC;gBACpC,YAAY,IAAI,QAAQ,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,YAAY,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC;IAGD,MAAM,aAAa,GAAG;QACpB;YACE,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,2BAA2B;SACrC;QACD;YACE,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,2BAA2B;SACrC;QACD;YACE,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,2BAA2B;SACrC;QACD;YACE,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,mBAAmB;SAC7B;QACD;YACE,KAAK,EAAE,oBAAoB;YAC3B,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,mBAAmB;SAC7B;KACF,CAAC;IAGF,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,aAAa,EAAE,CAAC;QACrD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,IAAI,KAAK,CACb,sCAAsC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK;gBAC1D,gCAAgC,OAAO,IAAI;gBAC3C,qBAAqB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CACpG,CAAC;QACJ,CAAC;IACH,CAAC;IAGD,MAAM,eAAe,GAAG;QACtB;YACE,KAAK,EAAE,yEAAyE;YAChF,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,mBAAmB;SAC7B;KACF,CAAC;IAEF,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,eAAe,EAAE,CAAC;QACvD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,IAAI,KAAK,CACb,sCAAsC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK;gBAC1D,gCAAgC,OAAO,IAAI;gBAC3C,qBAAqB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CACpG,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC"}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@tekton-ui/styled",
+  "version": "0.3.0",
+  "description": "Token-enforced styled-components wrapper with compile-time and runtime validation",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/soo-kate-yeon/tekton",
+    "directory": "packages/styled"
+  },
+  "dependencies": {
+    "styled-components": "^6.1.13",
+    "@tekton-ui/tokens": "0.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "@vitest/coverage-v8": "^2.1.8",
+    "eslint": "^9.18.0",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "styled-components": "^6.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "license": "MIT",
+  "keywords": [
+    "styled-components",
+    "design-tokens",
+    "token-enforcement",
+    "design-system",
+    "css-in-js"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src __tests__ --ext .ts"
+  }
+}