@blenx-dev/theme 0.0.1 → 0.0.3

package/package.json

@@ -1,40 +1,33 @@
 {
   "name": "@blenx-dev/theme",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
-  "sideEffects": false,
-  "files": [
-    "**/*"
-  ],
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": [
+    "./theme.css"
+  ],
   "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
     "./contract": {
       "types": "./contract.css.d.ts",
-      "import": "./contract.css.js"
+      "import": "./contract.js"
     },
     "./tokens": {
       "types": "./tokens.css.d.ts",
-      "import": "./tokens.css.js"
+      "import": "./tokens.js"
     },
     "./light-theme": {
       "types": "./light-theme.css.d.ts",
-      "import": "./light-theme.css.js"
-    }
-  },
-  "scripts": {
-    "build": "vite build"
+      "import": "./light-theme.js"
+    },
+    "./theme.css": "./theme.css"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.20.1"
-  },
-  "devDependencies": {
-    "@blenx-dev/config": "0.0.0",
-    "@vanilla-extract/vite-plugin": "^5.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "^6",
-    "vite": "^8.1.0",
-    "vite-plugin-dts": "^5.0.3"
   }
 }

package/.turbo/turbo-check-types.log

@@ -1 +0,0 @@
-$ tsc --noEmit

package/src/contract.css.ts

@@ -1,84 +0,0 @@
-import { createThemeContract, globalStyle } from "@vanilla-extract/css";
-
-export const themeContract = createThemeContract({
-  primary: "primary",
-  primarySubtle: "primary-subtle",
-  secondary: "secondary",
-  primaryHover: "primary-hover",
-  contentPrimary: "content-primary",
-  contentSecondary: "content-secondary",
-  contentDisabled: "content-disabled",
-  contentAccent: "content-accent",
-  contentOnPrimary: "content-on-primary",
-  surface: "surface",
-  surfaceSubtle: "surface-subtle",
-  surfaceRaised: "surface-raised",
-  surfaceHover: "surface-hover",
-  surfaceOverlay: "surface-overlay",
-  border: "border",
-  borderSubtle: "border-subtle",
-  borderStrong: "border-strong",
-  borderRadius: "border-radius",
-  background: "background",
-  backgroundSubtle: "background-subtle",
-  sentimentPositive: "sentiment-positive",
-  sentimentPositiveSubtle: "sentiment-positive-subtle",
-  sentimentPositiveHover: "sentiment-positive-hover",
-  sentimentWarning: "sentiment-warning",
-  sentimentWarningSubtle: "sentiment-warning-subtle",
-  sentimentWarningHover: "sentiment-warning-hover",
-  sentimentNegative: "sentiment-negative",
-  sentimentNegativeSubtle: "sentiment-negative-subtle",
-  sentimentNegativeHover: "sentiment-negative-hover",
-  sentimentInfo: "sentiment-info",
-  sentimentInfoSubtle: "sentiment-info-subtle",
-  sentimentInfoHover: "sentiment-info-hover",
-  focusRing: "focus-ring",
-  shadowSm: "shadow-sm",
-  shadowMd: "shadow-md",
-  shadowLg: "shadow-lg",
-  shadowXl: "shadow-xl",
-  fontSize: "font-size",
-  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/index.ts

@@ -1,3 +0,0 @@
-export * from "./contract.css";
-export * from "./light-theme.css";
-export * from "./tokens.css";

package/src/light-theme.css.ts

@@ -1,106 +0,0 @@
-import { createTheme } from "@vanilla-extract/css";
-import { themeContract } from "./contract.css";
-
-export const [themeClass, themeVars] = createTheme(themeContract, {
-  primary: "#1c1917",
-  primarySubtle: "#57534e",
-  secondary: "#4f5d95",
-  focusRing: "#5b5fc7",
-
-  background: "#f5f3ef",
-  backgroundSubtle: "#edeae4",
-
-  surface: "#ffffff",
-  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)",
-
-  fontSize: "16px",
-  borderRadius: "12px",
-});
-
-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)",
-
-  fontSize: "16px",
-  borderRadius: "12px",
-});

package/src/tokens.css.ts

@@ -1,162 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "./contract.css";
-
-export const borderRadius = {
-  xsmall: "2px",
-  small: "4px",
-  medium: "8px",
-  large: "12px",
-  xlarge: "16px",
-  xxlarge: "24px",
-  full: "999px",
-} as const;
-
-export const fonts = {
-  sans: '"DM Sans", system-ui, -apple-system, sans-serif',
-  display: '"DM Sans", system-ui, sans-serif',
-  heading: '"DM Sans", system-ui, sans-serif',
-  body: '"DM Sans", system-ui, sans-serif',
-  label: '"DM Sans", system-ui, sans-serif',
-  mono: '"DM Mono", ui-monospace, SFMono-Regular, monospace',
-} as const;
-
-export const fontSize = {
-  xxsmall: "10px",
-  xsmall: "12px",
-  small: "14px",
-  medium: "16px",
-  large: "18px",
-  xlarge: "20px",
-  xxlarge: "24px",
-  xxxlarge: "30px",
-  display: "36px",
-  displayLg: "48px",
-  hero: "60px",
-} as const;
-
-export const fontWeight = {
-  regular: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-} as const;
-
-export const lineHeight = {
-  tight: "1.2",
-  snug: "1.35",
-  normal: "1.5",
-  relaxed: "1.625",
-  loose: "1.8",
-} as const;
-
-export const letterSpacing = {
-  tight: "-0.04em",
-  snug: "-0.02em",
-  normal: "0",
-  wide: "0.02em",
-  wider: "0.05em",
-  widest: "0.1em",
-} as const;
-
-export const spacing = {
-  none: "0px",
-  xxsmall: "4px",
-  xsmall: "8px",
-  small: "12px",
-  medium: "16px",
-  large: "24px",
-  xlarge: "32px",
-  xxlarge: "48px",
-  xxxlarge: "64px",
-  huge: "80px",
-  massive: "96px",
-  titanic: "192px",
-  "0": "0px",
-  "0.5": "2px",
-  "1": "4px",
-  "2": "8px",
-  "3": "12px",
-  "4": "16px",
-  "5": "20px",
-  "6": "24px",
-  "7": "28px",
-  "8": "32px",
-  "9": "36px",
-  "10": "40px",
-  "12": "48px",
-  "16": "64px",
-  "20": "80px",
-  "24": "96px",
-  "32": "128px",
-  "40": "160px",
-  "48": "192px",
-} as const;
-
-export const mediaQueries = {
-  sm: "screen and (min-width: 640px)",
-  md: "screen and (min-width: 768px)",
-  lg: "screen and (min-width: 1024px)",
-  xl: "screen and (min-width: 1280px)",
-  xxl: "screen and (min-width: 1536px)",
-  dark: "(prefers-color-scheme: dark)",
-} as const;
-
-export const primitives = {
-  trigger: style({
-    appearance: "none",
-    backgroundColor: "transparent",
-    border: "none",
-    font: "inherit",
-    color: "inherit",
-    textDecoration: "none",
-    borderWidth: 0,
-    WebkitTapHighlightColor: "transparent",
-  }),
-  focusable: style({
-    outline: "none",
-    selectors: {
-      "&:focus-visible": {
-        outline: `2px solid ${themeContract.focusRing}`,
-      },
-    },
-  }),
-};
-
-export const borderWidth = {
-  hairline: "0.5px",
-  thin: "1px",
-  medium: "1.5px",
-  thick: "2px",
-  heavy: "3px",
-} as const;
-
-export const duration = {
-  instant: "50ms",
-  fast: "100ms",
-  normal: "200ms",
-  slow: "300ms",
-  slower: "500ms",
-  lazy: "700ms",
-} as const;
-
-export const easing = {
-  linear: "linear",
-  standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-  enter: "cubic-bezier(0, 0, 0.2, 1)",
-  exit: "cubic-bezier(0.4, 0, 1, 1)",
-  spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-  bounce: "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
-} as const;
-
-export const zIndex = {
-  base: 0,
-  raised: 100,
-  floating: 1000,
-  sticky: 1100,
-  overlay: 1200,
-  popover: 1300,
-  modal: 1400,
-  toast: 1500,
-  tooltip: 1600,
-} as const;

package/tsconfig.effective.json

@@ -1,38 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "lib": [
-            "esnext",
-            "dom",
-            "dom.iterable"
-        ],
-        "verbatimModuleSyntax": true,
-        "strict": true,
-        "skipLibCheck": true,
-        "resolveJsonModule": true,
-        "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
-        "forceConsistentCasingInFileNames": true,
-        "isolatedModules": true,
-        "noUncheckedIndexedAccess": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "types": [],
-        "preserveConstEnums": true
-    },
-    "files": [
-        "./src/contract.css.ts",
-        "./src/index.ts",
-        "./src/light-theme.css.ts",
-        "./src/tokens.css.ts"
-    ],
-    "include": [
-        "src/**/*.ts"
-    ],
-    "exclude": [
-        "node_modules"
-    ]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@blenx-dev/config/tsconfig.base.json",
-  "compilerOptions": {
-    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "types": []
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules"]
-}

package/vite.config.ts

@@ -1,28 +0,0 @@
-import { defineConfig } from "vite";
-import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  plugins: [
-    vanillaExtractPlugin(),
-    dts(),
-  ],
-
-  build: {
-    target: "esnext",
-
-    lib: {
-      entry: {
-        index: "src/index.ts",
-        contract: "src/contract.css.ts",
-        tokens: "src/tokens.css.ts",
-        "light-theme": "src/light-theme.css.ts",
-      },
-      formats: ["es"],
-    },
-
-    rollupOptions: {
-      external: ["@vanilla-extract/css"],
-    },
-  },
-});