@indra-inter/neobrutalism-components 0.1.2 → 0.1.3

package/README.md

@@ -183,25 +183,23 @@ pnpm generate:design-tokens
 pnpm test:design-tokens
 ```
 
-The generated CSS is published as `neobrutalism-components/tokens.css`. A
-NativeWind application can import it once, then preserve its existing semantic
-variables by aliasing them to the generated `--neo-*` variables:
+For standard NativeWind semantic utilities, import the generated opt-in
+semantic stylesheet once in the consuming application's global CSS:
 
 ```css
-@import 'neobrutalism-components/tokens.css';
-
-@layer base {
-  :root,
-  .dark:root {
-    --background: var(--neo-background);
-    --primary: var(--neo-primary);
-    --color-success-100: var(--neo-success-100);
-  }
-}
+@import '@indra-inter/neobrutalism-components/nativewind.css';
 ```
 
-This keeps `className` utilities such as `bg-primary` and `bg-success-100`
-working while their values follow the package's light or dark Figma mode.
+This provides direct light and dark values for semantic classes such as
+`text-foreground`, `bg-primary`, and `bg-success-100`, matching the package
+`ThemeProvider` palette without a consumer-maintained token bridge.
+
+`tokens.css` remains available for compatibility and for consumers that need
+the namespaced `--neo-*` variables directly:
+
+```css
+@import '@indra-inter/neobrutalism-components/tokens.css';
+```
 
 ## Components
 

package/nativewind.css

@@ -0,0 +1,102 @@
+/* Generated NativeWind semantic tokens from Figma design tokens. Do not edit by hand. */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.92%;
+  --card: 0 0% 95.29%;
+  --card-foreground: 0 0% 3.92%;
+  --popover: 0 0% 98.04%;
+  --popover-foreground: 0 0% 3.92%;
+  --primary: 199.84 100% 50.2%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --primary-foreground: 0 0% 0%;
+  --secondary: 0 0% 3.92%;
+  --secondary-foreground: 0 0% 100%;
+  --muted: 0 0% 94.9%;
+  --muted-foreground: 0 0% 36.08%;
+  --accent: 201.11 100% 89.41%;
+  --accent-foreground: 202.17 79.31% 11.37%;
+  --destructive: 355.49 77.58% 56.27%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 0%;
+  --input: 0 0% 100%;
+  --ring: 199.84 100% 50.2%;
+  --success: 142.09 70.56% 45.29%;
+  --success-foreground: 0 0% 3.92%;
+  --color-success-100: 140.63 84.21% 92.55%;
+  --color-success-200: 141 78.95% 85.1%;
+  --color-success-300: 141.71 76.64% 73.14%;
+  --color-success-400: 141.89 69.16% 58.04%;
+  --color-success-500: 142.09 70.56% 45.29%;
+  --info: 217.22 91.22% 59.8%;
+  --info-foreground: 0 0% 3.92%;
+  --color-info-100: 214.29 94.59% 92.75%;
+  --color-info-200: 213.33 96.92% 87.25%;
+  --color-info-300: 211.7 96.36% 78.43%;
+  --color-info-400: 213.12 93.9% 67.84%;
+  --color-info-500: 217.22 91.22% 59.8%;
+  --warning: 26.39 90.22% 63.92%;
+  --warning-foreground: 0 0% 3.92%;
+  --color-warning-100: 28 100% 97.06%;
+  --color-warning-200: 26.51 100% 91.57%;
+  --color-warning-300: 26.84 100% 85.1%;
+  --color-warning-400: 26.55 100% 77.84%;
+  --color-warning-500: 26.39 90.22% 63.92%;
+  --error: 0 75.25% 60.39%;
+  --error-foreground: 0 75.25% 60.39% / 25.1%;
+  --color-error-100: 0 100% 95.88%;
+  --color-error-200: 0 100% 90.78%;
+  --color-error-300: 0 100% 82.75%;
+  --color-error-400: 0 90.14% 72.16%;
+  --color-error-500: 0 75.25% 60.39%;
+}
+
+.dark:root {
+  --background: 0 0% 12.16%;
+  --foreground: 0 0% 98.04%;
+  --card: 0 0% 10.2%;
+  --card-foreground: 0 0% 98.04%;
+  --popover: 0 0% 10.2%;
+  --popover-foreground: 0 0% 98.04%;
+  --primary: 199.84 100% 50.2%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --primary-foreground: 0 0% 0%;
+  --secondary: 0 0% 98.04%;
+  --secondary-foreground: 0 0% 5.88%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.92%;
+  --accent: 202.5 64.86% 14.51%;
+  --accent-foreground: 201.11 100% 89.41%;
+  --destructive: 0 100% 70.98%;
+  --destructive-foreground: 0 10.64% 9.22%;
+  --border: 0 0% 0%;
+  --input: 200 8.57% 13.73%;
+  --ring: 199.89 100% 65.1%;
+  --success: 142.09 70.56% 45.29%;
+  --success-foreground: 0 0% 98.04%;
+  --color-success-100: 140.63 84.21% 92.55%;
+  --color-success-200: 141 78.95% 85.1%;
+  --color-success-300: 141.71 76.64% 73.14%;
+  --color-success-400: 141.89 69.16% 58.04%;
+  --color-success-500: 142.09 70.56% 45.29%;
+  --info: 217.22 91.22% 59.8%;
+  --info-foreground: 0 0% 98.04%;
+  --color-info-100: 214.29 94.59% 92.75%;
+  --color-info-200: 213.33 96.92% 87.25%;
+  --color-info-300: 211.7 96.36% 78.43%;
+  --color-info-400: 213.12 93.9% 67.84%;
+  --color-info-500: 217.22 91.22% 59.8%;
+  --warning: 26.39 90.22% 63.92%;
+  --warning-foreground: 0 0% 98.04%;
+  --color-warning-100: 28 100% 97.06%;
+  --color-warning-200: 26.51 100% 91.57%;
+  --color-warning-300: 26.84 100% 85.1%;
+  --color-warning-400: 26.55 100% 77.84%;
+  --color-warning-500: 26.39 90.22% 63.92%;
+  --error: 0 75.25% 60.39%;
+  --error-foreground: 0 75.25% 60.39% / 25.1%;
+  --color-error-100: 0 100% 95.88%;
+  --color-error-200: 0 100% 90.78%;
+  --color-error-300: 0 100% 82.75%;
+  --color-error-400: 0 90.14% 72.16%;
+  --color-error-500: 0 75.25% 60.39%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indra-inter/neobrutalism-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -13,11 +13,13 @@
       "default": "./dist/module/index.js"
     },
     "./tokens.css": "./tokens.css",
+    "./nativewind.css": "./nativewind.css",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "tokens.css",
+    "nativewind.css",
     "README.md"
   ],
   "peerDependencies": {