@brrritscold/core-react 1.0.0 → 1.2.0

package/dist/styles.css

@@ -1,6 +1,10 @@
 /* Generated from tokens/tokens.json by scripts/build-styles.ts. Do not edit. */
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "@fontsource/inter/400.css";
+@import "@fontsource/inter/500.css";
+@import "@fontsource/inter/600.css";
+@import "@fontsource/inter/700.css";
 @source "./**/*.js";
 
 @custom-variant dark (&:is(.dark *));
@@ -61,7 +65,7 @@
   --border-radius-lg: 10px;
   --border-radius-xl: 14px;
   --border-radius-full: 9999px;
-  --font-family-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
@@ -89,6 +93,8 @@
   --opacity-10: 10%;
   --opacity-50: 50%;
   --opacity-100: 100%;
+  --destructive-background: rgba(185, 28, 28, 0.1); /** The tint behind destructive text: Button and Badge `destructive`, a destructive menu item's highlight. `destructive` at 10% in light, 20% in dark. */
+  --input-background: transparent; /** The fill of a form field: Input, Textarea, Select's trigger, Combobox, InputGroup, Checkbox, RadioGroup. Transparent in light, `input` at 30% in dark. */
   --background: var(--color-white);
   --foreground: var(--color-neutral-950);
   --card: var(--color-white);
@@ -108,9 +114,17 @@
   --input: var(--color-neutral-200);
   --ring: var(--color-neutral-400);
   --radius: var(--border-radius-lg);
+  --radius-xs: var(--border-radius-xs);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
+  --outline-background: var(--background); /** The fill of an outlined control raised on its surface: Button `outline`, the active tab. `background` in light, `input-background` in dark. */
 }
 
 .dark {
+  --destructive-background: rgba(248, 113, 113, 0.2); /** The tint behind destructive text: Button and Badge `destructive`, a destructive menu item's highlight. `destructive` at 10% in light, 20% in dark. */
+  --input-background: rgba(38, 38, 38, 0.3); /** The fill of a form field: Input, Textarea, Select's trigger, Combobox, InputGroup, Checkbox, RadioGroup. Transparent in light, `input` at 30% in dark. */
   --background: var(--color-neutral-950);
   --foreground: var(--color-neutral-50);
   --card: var(--color-neutral-900);
@@ -128,8 +142,14 @@
   --destructive: var(--color-red-400);
   --border: var(--color-neutral-800);
   --input: var(--color-neutral-800);
+  --outline-background: var(--input-background); /** The fill of an outlined control raised on its surface: Button `outline`, the active tab. `background` in light, `input-background` in dark. */
   --ring: var(--color-neutral-500);
   --radius: var(--border-radius-lg);
+  --radius-xs: var(--border-radius-xs);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
 }
 
 @theme inline {
@@ -205,14 +225,12 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-background: var(--destructive-background);
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-outline-background: var(--outline-background);
   --color-ring: var(--ring);
-  --radius-xs: calc(var(--radius) - 8px);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --radius-full: var(--border-radius-full);
 }
 
@@ -229,6 +247,11 @@
   --opacity-10: var(--opacity-10);
   --opacity-50: var(--opacity-50);
   --opacity-100: var(--opacity-100);
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
 }
 
 @layer base {

package/dist/tokens.json

@@ -235,7 +235,7 @@
 		"font-family": {
 			"sans": {
 				"$type": "fontFamilies",
-				"$value": "ui-sans-serif, system-ui, sans-serif"
+				"$value": "Inter, ui-sans-serif, system-ui, sans-serif"
 			},
 			"mono": {
 				"$type": "fontFamilies",
@@ -471,6 +471,11 @@
 			"$type": "color",
 			"$value": "{color.red.700}"
 		},
+		"destructive-background": {
+			"$type": "color",
+			"$value": "rgba(185, 28, 28, 0.1)",
+			"$description": "The tint behind destructive text: Button and Badge `destructive`, a destructive menu item's highlight. `destructive` at 10% in light, 20% in dark."
+		},
 		"border": {
 			"$type": "color",
 			"$value": "{color.neutral.200}"
@@ -479,6 +484,16 @@
 			"$type": "color",
 			"$value": "{color.neutral.200}"
 		},
+		"input-background": {
+			"$type": "color",
+			"$value": "transparent",
+			"$description": "The fill of a form field: Input, Textarea, Select's trigger, Combobox, InputGroup, Checkbox, RadioGroup. Transparent in light, `input` at 30% in dark."
+		},
+		"outline-background": {
+			"$type": "color",
+			"$value": "{background}",
+			"$description": "The fill of an outlined control raised on its surface: Button `outline`, the active tab. `background` in light, `input-background` in dark."
+		},
 		"ring": {
 			"$type": "color",
 			"$value": "{color.neutral.400}"
@@ -486,6 +501,26 @@
 		"radius": {
 			"$type": "borderRadius",
 			"$value": "{border-radius.lg}"
+		},
+		"radius-xs": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.xs}"
+		},
+		"radius-sm": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.sm}"
+		},
+		"radius-md": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.md}"
+		},
+		"radius-lg": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.lg}"
+		},
+		"radius-xl": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.xl}"
 		}
 	},
 	"dark": {
@@ -549,6 +584,11 @@
 			"$type": "color",
 			"$value": "{color.red.400}"
 		},
+		"destructive-background": {
+			"$type": "color",
+			"$value": "rgba(248, 113, 113, 0.2)",
+			"$description": "The tint behind destructive text: Button and Badge `destructive`, a destructive menu item's highlight. `destructive` at 10% in light, 20% in dark."
+		},
 		"border": {
 			"$type": "color",
 			"$value": "{color.neutral.800}"
@@ -557,6 +597,16 @@
 			"$type": "color",
 			"$value": "{color.neutral.800}"
 		},
+		"input-background": {
+			"$type": "color",
+			"$value": "rgba(38, 38, 38, 0.3)",
+			"$description": "The fill of a form field: Input, Textarea, Select's trigger, Combobox, InputGroup, Checkbox, RadioGroup. Transparent in light, `input` at 30% in dark."
+		},
+		"outline-background": {
+			"$type": "color",
+			"$value": "{input-background}",
+			"$description": "The fill of an outlined control raised on its surface: Button `outline`, the active tab. `background` in light, `input-background` in dark."
+		},
 		"ring": {
 			"$type": "color",
 			"$value": "{color.neutral.500}"
@@ -564,6 +614,26 @@
 		"radius": {
 			"$type": "borderRadius",
 			"$value": "{border-radius.lg}"
+		},
+		"radius-xs": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.xs}"
+		},
+		"radius-sm": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.sm}"
+		},
+		"radius-md": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.md}"
+		},
+		"radius-lg": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.lg}"
+		},
+		"radius-xl": {
+			"$type": "borderRadius",
+			"$value": "{border-radius.xl}"
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brrritscold/core-react",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "The component library: shadcn (Base UI) React components on Tailwind v4, themed from one design token file and linked to the design system library in Penpot.",
   "license": "MIT",
   "author": "Blaine Richardson",
@@ -36,6 +36,7 @@
     },
     "./styles.css": "./dist/styles.css",
     "./tokens.json": "./dist/tokens.json",
+    "./library.snapshot.json": "./dist/library.snapshot.json",
     "./testing": {
       "types": "./dist/testing.d.ts",
       "default": "./dist/testing.js"
@@ -54,11 +55,12 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
+    "@fontsource/inter": "5.3.0",
     "@tanstack/react-table": "^9.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
-    "lucide-react": "^1.68.0",
+    "lucide-react": "1.68.0",
     "react-day-picker": "^10.0.2",
     "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
@@ -89,8 +91,8 @@
     "style-dictionary": "^5.8.0",
     "tailwindcss": "^4.3.4",
     "vite": "^8.3.5",
-    "@brrritscold/design-core-js": "0.1.0",
-    "@brrritscold/design-core-node": "0.1.0"
+    "@brrritscold/design-core-js": "0.1.1",
+    "@brrritscold/design-core-node": "0.1.2"
   },
   "scripts": {
     "build": "rm -rf dist && pnpm build:styles && tsc -p tsconfig.build.json && tsx scripts/build-icons.ts",
@@ -103,7 +105,7 @@
     "storybook": "pnpm build:styles && storybook dev -p 6006",
     "storybook:build": "pnpm build:styles && storybook build",
     "test:integration": "pnpm storybook:build && playwright test -c playwright.integration.config.ts",
-    "test:integration:ci": "pnpm test:integration:setup && pnpm test:integration && pnpm test:integration:teardown",
+    "test:integration:ci": "pnpm test:integration:setup && { pnpm test:integration; code=$?; pnpm test:integration:teardown; exit $code; }",
     "test:integration:setup": "tsx ./tests/integration/__utils__/setup.ts",
     "test:integration:teardown": "tsx ./tests/integration/__utils__/teardown.ts",
     "test:integration:watch": "pnpm storybook:build && playwright test -c playwright.integration.config.ts --ui",