@indra-inter/neobrutalism-components 0.1.2 → 0.1.4

package/dist/typescript/theme/theme.d.ts

@@ -1,25 +1,26 @@
+import { designTokens } from './design-tokens.generated.js';
 export type ThemeMode = 'light' | 'dark';
+export type ThemeVariant = 'blue' | 'coral';
+type KebabToCamelCase<Value extends string> = Value extends `${infer Head}-${infer Tail}` ? `${Head}${Capitalize<KebabToCamelCase<Tail>>}` : Value;
+type ModeTokenName = keyof (typeof designTokens.mode.light.Blue) & string;
+type ModeColors = {
+    [Name in ModeTokenName as KebabToCamelCase<Name>]: string;
+};
+type ThemeStatusName = 'success' | 'info' | 'warning' | 'error';
+type ThemeStatusScale = '100' | '200' | '300' | '400' | '500';
+type ThemeStatusColor = Record<ThemeStatusScale, string> & {
+    foreground: string;
+};
+export type ThemeStatus = Record<ThemeStatusName, ThemeStatusColor>;
 export type Theme = {
-    colors: {
-        background: string;
-        surface: string;
-        popover: string;
-        accent: string;
-        primary: string;
-        primaryHover: string;
-        primaryForeground: string;
-        secondary: string;
-        secondaryForeground: string;
-        destructive: string;
-        destructiveForeground: string;
+    colors: ModeColors & {
         warning: string;
         success: string;
         info: string;
-        foreground: string;
-        mutedForeground: string;
+        error: string;
         disabled: string;
-        semanticBorder: string;
     };
+    status: ThemeStatus;
     border: {
         color: string;
         radius: number;
@@ -47,6 +48,8 @@ export type Theme = {
         weight: '500';
     };
 };
-export declare function createTheme(mode?: ThemeMode): Theme;
+export declare function createNativeWindVariables(mode: ThemeMode, variant?: ThemeVariant): Record<`--${string}`, string>;
+export declare function createTheme(mode?: ThemeMode, variant?: ThemeVariant): Theme;
 export declare const theme: Theme;
+export {};
 //# sourceMappingURL=theme.d.ts.map

package/dist/typescript/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;QACrB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,WAAW,EAAE,MAAM,CAAC;QACpB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAC;QACX,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,KAAK,CAAC;KACf,CAAC;CACH,CAAC;AAEF,wBAAgB,WAAW,CAAC,IAAI,GAAE,SAAmB,GAAG,KAAK,CAoD5D;AAED,eAAO,MAAM,KAAK,OAAuB,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA2B,CAAC;AAGzD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,KAAK,gBAAgB,CAAC,KAAK,SAAS,MAAM,IACxC,KAAK,SAAS,GAAG,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GACvC,GAAG,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,GAC9C,KAAK,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAE1E,KAAK,UAAU,GAAG;KACf,IAAI,IAAI,aAAa,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,MAAM;CAC1D,CAAC;AAEF,KAAK,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAChE,KAAK,gBAAgB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAC9D,KAAK,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAEpE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,UAAU,GAAG;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,UAAU,EAAE;QACV,EAAE,EAAE,MAAM,CAAC;QACX,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,MAAM,EAAE,KAAK,CAAC;KACf,CAAC;CACH,CAAC;AA2CF,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,SAAS,EACf,OAAO,GAAE,YAAqB,GAC7B,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAE/B;AAED,wBAAgB,WAAW,CACzB,IAAI,GAAE,SAAmB,EACzB,OAAO,GAAE,YAAqB,GAC7B,KAAK,CA2CP;AAED,eAAO,MAAM,KAAK,OAAuB,CAAC"}

package/nativewind.css

@@ -0,0 +1,146 @@
+/* Generated NativeWind semantic tokens from Figma design tokens. Do not edit by hand. */
+:root {
+  --accent: 201.11 100% 89.41%;
+  --accent-foreground: 202.17 79.31% 11.37%;
+  --background: 0 0% 100%;
+  --background-color: 0 0% 0% / 50.2%;
+  --border: 0 0% 0%;
+  --card: 0 0% 95.29%;
+  --card-foreground: 0 0% 3.92%;
+  --code: 0 0% 94.9%;
+  --code-foreground: 0 0% 3.92%;
+  --decor-accent: 199.84 100% 50.2%;
+  --decor-ink: 0 0% 0%;
+  --decor-paper: 0 0% 100%;
+  --destructive: 355.49 77.58% 56.27%;
+  --destructive-foreground: 0 0% 100%;
+  --foreground: 0 0% 3.92%;
+  --input: 0 0% 100%;
+  --muted: 0 0% 94.9%;
+  --muted-foreground: 0 0% 36.08%;
+  --popover: 0 0% 98.04%;
+  --popover-foreground: 0 0% 3.92%;
+  --primary: 199.84 100% 50.2%;
+  --primary-foreground: 0 0% 0%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --ring: 199.84 100% 50.2%;
+  --secondary: 0 0% 3.92%;
+  --secondary-foreground: 0 0% 100%;
+  --selection: 199.84 100% 50.2%;
+  --selection-foreground: 0 0% 0%;
+  --semantic-background: 0 0% 55.29%;
+  --semantic-border: 0 0.45% 56.27%;
+  --semantic-foreground: 0 0% 100%;
+  --shadow-color: 0 0% 4.31%;
+  --sidebar: 0 0% 100%;
+  --sidebar-accent: 201.11 100% 89.41%;
+  --sidebar-accent-foreground: 202.17 79.31% 11.37%;
+  --sidebar-border: 0 0% 0%;
+  --sidebar-foreground: 0 0% 3.92%;
+  --sidebar-primary: 199.84 100% 50.2%;
+  --sidebar-primary-foreground: 0 0% 0%;
+  --sidebar-ring: 199.84 100% 50.2%;
+  --surface: 0 0% 95.29%;
+  --surface-foreground: 0 0% 3.92%;
+  --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 {
+  --accent: 202.5 64.86% 14.51%;
+  --accent-foreground: 201.11 100% 89.41%;
+  --background: 0 0% 12.16%;
+  --background-color: 0 0% 0% / 50.2%;
+  --border: 0 0% 0%;
+  --card: 0 0% 10.2%;
+  --card-foreground: 0 0% 98.04%;
+  --code: 0 0% 14.9%;
+  --code-foreground: 0 0% 98.04%;
+  --decor-accent: 200.19 46.85% 56.47%;
+  --decor-ink: 0 0% 0%;
+  --decor-paper: 0 0% 100%;
+  --destructive: 0 100% 70.98%;
+  --destructive-foreground: 0 10.64% 9.22%;
+  --foreground: 0 0% 98.04%;
+  --input: 200 8.57% 13.73%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.92%;
+  --popover: 0 0% 10.2%;
+  --popover-foreground: 0 0% 98.04%;
+  --primary: 199.84 100% 50.2%;
+  --primary-foreground: 0 0% 0%;
+  --primary-hover: 200.98 79.89% 64.9%;
+  --ring: 199.89 100% 65.1%;
+  --secondary: 0 0% 98.04%;
+  --secondary-foreground: 0 0% 5.88%;
+  --selection: 199.84 100% 50.2%;
+  --selection-foreground: 0 0% 0%;
+  --semantic-background: 30 2.63% 14.9%;
+  --semantic-border: 210 1.22% 32.16%;
+  --semantic-foreground: 0 0% 100%;
+  --shadow-color: 0 0% 23.92%;
+  --sidebar: 0 0% 12.16%;
+  --sidebar-accent: 202.5 64.86% 14.51%;
+  --sidebar-accent-foreground: 201.11 100% 89.41%;
+  --sidebar-border: 0 0% 0%;
+  --sidebar-foreground: 0 0% 98.04%;
+  --sidebar-primary: 199.84 100% 50.2%;
+  --sidebar-primary-foreground: 0 0% 0%;
+  --sidebar-ring: 199.89 100% 65.1%;
+  --surface: 0 0% 10.2%;
+  --surface-foreground: 0 0% 98.04%;
+  --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.4",
   "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": {
@@ -45,15 +47,16 @@
     "test:card-nativewind": "node ./scripts/test-card-nativewind.mjs",
     "test:bottom-sheet-drag-dismiss": "node ./scripts/test-bottom-sheet-drag-dismiss.mjs",
     "test:chat-list-item-slots": "node ./scripts/test-chat-list-item-slots.mjs",
-    "test:design-tokens": "node ./scripts/test-design-tokens.mjs",
+    "test:design-tokens": "node ./scripts/test-design-tokens.mjs && node ./scripts/test-theme-family-token-contract.mjs",
     "test:divider": "node ./scripts/test-divider.mjs",
     "test:icon-button-ghost": "node ./scripts/test-icon-button-ghost.mjs",
     "test:input-addon-padding": "node ./scripts/test-input-addon-padding.mjs",
     "test:list-item-nativewind": "node ./scripts/test-list-item-nativewind.mjs",
     "test:pin-code-field": "node ./scripts/test-pin-code-field.mjs",
-    "test:public-styling-contract": "node ./scripts/test-public-styling-contract.mjs",
+    "test:public-styling-contract": "node ./scripts/test-public-styling-contract.mjs && node ./scripts/test-theme-family-public-contract.mjs",
     "test:shared-styling": "node ./scripts/test-shared-styling.mjs",
     "test:styling-aliases": "node ./scripts/test-styling-aliases.mjs",
+    "test:theme-family-runtime": "node ./scripts/test-theme-family-runtime-contract.mjs",
     "test:tabs-figma-update": "node ./scripts/test-tabs-figma-update.mjs",
     "prepare": "pnpm build",
     "typecheck": "tsc --noEmit"