@blenx-dev/theme 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @blenx-dev/theme
 
+## 0.1.2
+
+### Patch Changes
+
+- 423768f: add reset file
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@blenx-dev/theme",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "sideEffects": false,
   "exports": {
     "./contract": "./src/contract.css.ts",
     "./tokens": "./src/tokens.css.ts",
-    "./light-theme": "./src/light-theme.css.ts"
+    "./light-theme": "./src/light-theme.css.ts",
+    "./reset": "./src/reset.css.ts"
   },
   "publishConfig": {
     "access": "public"

package/src/contract.css.ts

@@ -1,4 +1,4 @@
-import { createThemeContract, globalStyle } from "@vanilla-extract/css";
+import { createThemeContract } from "@vanilla-extract/css";
 
 export const themeContract = createThemeContract({
   primary: "primary",
@@ -42,43 +42,3 @@ export const themeContract = createThemeContract({
   hoverOverlay: "hover-overlay",
   hoverOverlaySoft: "hover-overlay-soft",
 });
-
-globalStyle("*", {
-  margin: 0,
-  padding: 0,
-  boxSizing: "border-box",
-});
-
-globalStyle("*::before, *::after", {
-  boxSizing: "border-box",
-});
-globalStyle("html, body", {
-  margin: 0,
-  padding: 0,
-  minHeight: "100%",
-});
-globalStyle("body", {
-  lineHeight: 1.5,
-  WebkitFontSmoothing: "antialiased",
-  MozOsxFontSmoothing: "grayscale",
-});
-globalStyle("h1, h2, h3, h4, h5, h6", {
-  fontSize: "inherit",
-  fontWeight: "inherit",
-});
-globalStyle("ul, ol", {
-  margin: 0,
-  padding: 0,
-});
-globalStyle("img, picture, video, canvas, svg", {
-  display: "block",
-  maxWidth: "100%",
-});
-globalStyle("button,a,input, textarea, select", {
-  font: "inherit",
-  color: "inherit",
-  textDecoration: "none",
-});
-globalStyle("#root", {
-  minHeight: "100vh",
-});

package/src/light-theme.css.ts

@@ -56,50 +56,51 @@ export const [themeClass, themeVars] = createTheme(themeContract, {
 export const darkThemeClass = createTheme(themeContract, {
   primary: "#f5f3ef",
   primarySubtle: "#d4cec5",
-  secondary: "#4f5d95",
-  focusRing: "#5b5fc7",
-
-  background: "#1c1917",
-  backgroundSubtle: "#edeae4",
-
-  surface: "#1c1917",
-  surfaceSubtle: "#faf9f7",
-  surfaceRaised: "#ffffff",
-  surfaceHover: "#edeae4",
-  surfaceOverlay: "rgba(28,25,23,0.35)",
-
-  border: "#e2ddd6",
-  borderSubtle: "#edeae4",
-  borderStrong: "#c8c1b5",
-
-  contentPrimary: "#1c1917",
-  contentSecondary: "#57534e",
-  contentDisabled: "#a8a29e",
-  contentAccent: "#1c1917",
-  contentOnPrimary: "#ffffff",
-
-  sentimentNegative: "#ef4444",
-  sentimentNegativeSubtle: "#fef2f2",
-  sentimentPositive: "#10b981",
-  sentimentPositiveSubtle: "#ecfdf5",
-  sentimentWarning: "#f59e0b",
-  sentimentWarningSubtle: "#fffbeb",
-  sentimentInfo: "#0ea5e9",
-  sentimentInfoSubtle: "#f0f9ff",
-
-  shadowSm: "0 1px 3px rgba(28,25,23,0.07), 0 1px 2px rgba(28,25,23,0.04)",
-  shadowMd: "0 4px 12px rgba(28,25,23,0.09), 0 2px 4px rgba(28,25,23,0.05)",
-  shadowLg: "0 8px 24px rgba(28,25,23,0.11), 0 4px 8px rgba(28,25,23,0.05)",
-  shadowXl: "0 20px 48px rgba(28,25,23,0.14), 0 8px 16px rgba(28,25,23,0.07)",
-
-  primaryHover: "#292524",
-  sentimentPositiveHover: "#059669",
-  sentimentWarningHover: "#d97706",
-  sentimentNegativeHover: "#dc2626",
-  sentimentInfoHover: "#0284c7",
-
-  hoverOverlay: "rgba(28,25,23,0.05)",
-  hoverOverlaySoft: "rgba(28,25,23,0.10)",
+  secondary: "#8ea0ff",
+
+  background: "#0f0e0c",
+  backgroundSubtle: "#1a1916",
+
+  surface: "#1a1916",
+  surfaceSubtle: "#242320",
+  surfaceRaised: "#2e2c28",
+  surfaceHover: "#2e2c28",
+  surfaceOverlay: "rgba(0,0,0,0.75)",
+
+  border: "#2e2c28",
+  borderSubtle: "#242320",
+  borderStrong: "#3c3a35",
+
+  contentPrimary: "#f5f3ef",
+  contentSecondary: "#a8a29e",
+  contentDisabled: "#57534e",
+  contentAccent: "#f5f3ef",
+  contentOnPrimary: "#0f0e0c",
+
+  focusRing: "#818cf8",
+
+  sentimentNegative: "#f87171",
+  sentimentNegativeSubtle: "#450a0a",
+  sentimentPositive: "#34d399",
+  sentimentPositiveSubtle: "#064e3b",
+  sentimentWarning: "#fbbf24",
+  sentimentWarningSubtle: "#451a03",
+  sentimentInfo: "#38bdf8",
+  sentimentInfoSubtle: "#082f49",
+
+  shadowSm: "0 1px 3px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.18)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.18)",
+  shadowLg: "0 8px 24px rgba(0,0,0,0.38), 0 4px 8px rgba(0,0,0,0.22)",
+  shadowXl: "0 20px 48px rgba(0,0,0,0.48), 0 8px 16px rgba(0,0,0,0.28)",
+
+  primaryHover: "#e7e3dc",
+  sentimentPositiveHover: "#6ee7b7",
+  sentimentWarningHover: "#fcd34d",
+  sentimentNegativeHover: "#fca5a5",
+  sentimentInfoHover: "#7dd3fc",
+
+  hoverOverlay: "rgba(245,243,239,0.07)",
+  hoverOverlaySoft: "rgba(245,243,239,0.13)",
 
   fontSize: "16px",
   borderRadius: "12px",

package/src/reset.css.ts

@@ -0,0 +1,48 @@
+import { globalStyle } from "@vanilla-extract/css";
+
+globalStyle("*", {
+  margin: 0,
+  padding: 0,
+  boxSizing: "border-box",
+});
+
+globalStyle("*::before, *::after", {
+  boxSizing: "border-box",
+});
+
+globalStyle("html, body", {
+  margin: 0,
+  padding: 0,
+  minHeight: "100%",
+});
+
+globalStyle("body", {
+  lineHeight: 1.5,
+  WebkitFontSmoothing: "antialiased",
+  MozOsxFontSmoothing: "grayscale",
+});
+
+globalStyle("h1, h2, h3, h4, h5, h6", {
+  fontSize: "inherit",
+  fontWeight: "inherit",
+});
+
+globalStyle("ul, ol", {
+  margin: 0,
+  padding: 0,
+});
+
+globalStyle("img, picture, video, canvas, svg", {
+  display: "block",
+  maxWidth: "100%",
+});
+
+globalStyle("button,a,input, textarea, select", {
+  font: "inherit",
+  color: "inherit",
+  textDecoration: "none",
+});
+
+globalStyle("#root", {
+  minHeight: "100vh",
+});