@brrritscold/core-react 1.1.0 → 1.2.0

package/dist/styles.css

@@ -93,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);
@@ -117,9 +119,12 @@
   --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);
@@ -137,6 +142,7 @@
   --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);
@@ -219,8 +225,11 @@
   --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-full: var(--border-radius-full);
 }

package/dist/tokens.json

@@ -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}"
@@ -569,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}"
@@ -577,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}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brrritscold/core-react",
-  "version": "1.1.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",
@@ -91,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",