thread-ui 0.7.14 → 0.8.1

package/dist/styles/theme.css

@@ -0,0 +1,115 @@
+/* Thread Theme Implementation */
+:root {
+	/* Generic Theme Elements */
+	--thread-primary-light: #5a7d6a;
+	--thread-primary-main: #3c5c49;
+	--thread-primary-dark: #2a4535;
+	--thread-secondary-light: #7a97b2;
+	--thread-secondary-main: #546f8d;
+	--thread-secondary-dark: #3b526a;
+	--thread-tertiary-light: #8c7389;
+	--thread-tertiary-main: #6a546a;
+	--thread-tertiary-dark: #4a3a4a;
+	--thread-white: #ffffff;
+	--thread-black: #121212;
+	--thread-gray-light: #e5e7eb;
+	--thread-gray-main: #9ca3af;
+	--thread-gray-dark: #4b5563;
+	--thread-success-light: #86efac;
+	--thread-success-main: #22c55e;
+	--thread-success-dark: #15803d;
+	--thread-warning-light: #fde68a;
+	--thread-warning-main: #f59e0b;
+	--thread-warning-dark: #b45309;
+	--thread-error-light: #fca5a5;
+	--thread-error-main: #ef4444;
+	--thread-error-dark: #b91c1c;
+	--thread-info-light: #93c5fd;
+	--thread-info-main: #3b82f6;
+	--thread-info-dark: #1d4ed8;
+	--thread-breakpoint-sm: 0;
+	--thread-breakpoint-md: 768;
+	--thread-breakpoint-lg: 1024;
+	--thread-breakpoint-xl: 1280;
+	--thread-breakpoint-xxl: 1536;
+	--thread-border-radius-sm: 0.25rem;
+	--thread-border-radius-md: 0.375rem;
+	--thread-border-radius-lg: 0.5rem;
+	--thread-border-size-sm: 0.5px;
+	--thread-border-size-md: 1px;
+	--thread-border-size-lg: 1.5px;
+
+	/* Light Mode Values */
+	--thread-background-light-mode: #ffffff;
+	--thread-surface-light-mode: #f9fafb;
+	--thread-elevated-light-mode: #f3f4f6;
+	--thread-structure-light-mode: #e2e8f0;
+	--thread-text-standard-light-mode: #1f2937;
+	--thread-text-secondary-light-mode: #4b5563;
+	--thread-text-disabled-light-mode: #9ca3af;
+	--thread-text-accent-light-mode: #3c5c49;
+	--thread-text-inverted-light-mode: #f9fafb;
+
+	/* Dark Mode Values */
+	--thread-background-dark-mode: #121212;
+	--thread-surface-dark-mode: #1e1e1e;
+	--thread-elevated-dark-mode: #2d2d2d;
+	--thread-structure-dark-mode: #4b5563;
+	--thread-text-standard-dark-mode: #f9fafb;
+	--thread-text-secondary-dark-mode: #4b5563;
+	--thread-text-disabled-dark-mode: #6b7280;
+	--thread-text-accent-dark-mode: #3c5c49;
+	--thread-text-inverted-dark-mode: #1f2937;
+
+	/* Apply Light Mode Colors */
+	--thread-background: var(--thread-background-light-mode);
+	--thread-surface: var(--thread-surface-light-mode);
+	--thread-elevated: var(--thread-elevated-light-mode);
+	--thread-structure: var(--thread-structure-light-mode);
+	--thread-text-standard: var(--thread-text-standard-light-mode);
+	--thread-text-secondary: var(--thread-text-secondary-light-mode);
+	--thread-text-disabled: var(--thread-text-disabled-light-mode);
+	--thread-text-accent: var(--thread-text-accent-light-mode);
+	--thread-text-inverted: var(--thread-text-inverted-light-mode);
+}
+
+:root[data-theme='light'] {
+	/* Light Mode Color Override */
+	--thread-background: var(--thread-background-light-mode);
+	--thread-surface: var(--thread-surface-light-mode);
+	--thread-elevated: var(--thread-elevated-light-mode);
+	--thread-structure: var(--thread-structure-light-mode);
+	--thread-text-standard: var(--thread-text-standard-light-mode);
+	--thread-text-secondary: var(--thread-text-secondary-light-mode);
+	--thread-text-disabled: var(--thread-text-disabled-light-mode);
+	--thread-text-accent: var(--thread-text-accent-light-mode);
+	--thread-text-inverted: var(--thread-text-inverted-light-mode);
+}
+
+:root[data-theme='dark'] {
+	/* Dark Mode Color Override */
+	--thread-background: var(--thread-background-dark-mode);
+	--thread-surface: var(--thread-surface-dark-mode);
+	--thread-elevated: var(--thread-elevated-dark-mode);
+	--thread-structure: var(--thread-structure-dark-mode);
+	--thread-text-standard: var(--thread-text-standard-dark-mode);
+	--thread-text-secondary: var(--thread-text-secondary-dark-mode);
+	--thread-text-disabled: var(--thread-text-disabled-dark-mode);
+	--thread-text-accent: var(--thread-text-accent-dark-mode);
+	--thread-text-inverted: var(--thread-text-inverted-dark-mode);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme]) {
+		/* Apply Dark Mode Colors */
+		--thread-background: var(--thread-background-dark-mode);
+		--thread-surface: var(--thread-surface-dark-mode);
+		--thread-elevated: var(--thread-elevated-dark-mode);
+		--thread-structure: var(--thread-structure-dark-mode);
+		--thread-text-standard: var(--thread-text-standard-dark-mode);
+		--thread-text-secondary: var(--thread-text-secondary-dark-mode);
+		--thread-text-disabled: var(--thread-text-disabled-dark-mode);
+		--thread-text-accent: var(--thread-text-accent-dark-mode);
+		--thread-text-inverted: var(--thread-text-inverted-dark-mode);
+	}
+}

package/dist/styles/thread.css

@@ -1,115 +1,3 @@
-/* Thread Theme Implementation */
-:root {
-	/* Generic Theme Elements */
-	--thread-primary-light: #5a7d6a;
-	--thread-primary-main: #3c5c49;
-	--thread-primary-dark: #2a4535;
-	--thread-secondary-light: #7a97b2;
-	--thread-secondary-main: #546f8d;
-	--thread-secondary-dark: #3b526a;
-	--thread-tertiary-light: #8c7389;
-	--thread-tertiary-main: #6a546a;
-	--thread-tertiary-dark: #4a3a4a;
-	--thread-white: #ffffff;
-	--thread-black: #121212;
-	--thread-gray-light: #e5e7eb;
-	--thread-gray-main: #9ca3af;
-	--thread-gray-dark: #4b5563;
-	--thread-success-light: #86efac;
-	--thread-success-main: #22c55e;
-	--thread-success-dark: #15803d;
-	--thread-warning-light: #fde68a;
-	--thread-warning-main: #f59e0b;
-	--thread-warning-dark: #b45309;
-	--thread-error-light: #fca5a5;
-	--thread-error-main: #ef4444;
-	--thread-error-dark: #b91c1c;
-	--thread-info-light: #93c5fd;
-	--thread-info-main: #3b82f6;
-	--thread-info-dark: #1d4ed8;
-	--thread-breakpoint-sm: 0;
-	--thread-breakpoint-md: 768;
-	--thread-breakpoint-lg: 1024;
-	--thread-breakpoint-xl: 1280;
-	--thread-breakpoint-xxl: 1536;
-	--thread-border-radius-sm: 0.25rem;
-	--thread-border-radius-md: 0.375rem;
-	--thread-border-radius-lg: 0.5rem;
-	--thread-border-size-sm: 0.5px;
-	--thread-border-size-md: 1px;
-	--thread-border-size-lg: 1.5px;
-
-	/* Light Mode Values */
-	--thread-background-light-mode: #ffffff;
-	--thread-surface-light-mode: #f9fafb;
-	--thread-elevated-light-mode: #f3f4f6;
-	--thread-structure-light-mode: #e2e8f0;
-	--thread-text-standard-light-mode: #1f2937;
-	--thread-text-secondary-light-mode: #4b5563;
-	--thread-text-disabled-light-mode: #9ca3af;
-	--thread-text-accent-light-mode: #3c5c49;
-	--thread-text-inverted-light-mode: #f9fafb;
-
-	/* Dark Mode Values */
-	--thread-background-dark-mode: #121212;
-	--thread-surface-dark-mode: #1e1e1e;
-	--thread-elevated-dark-mode: #2d2d2d;
-	--thread-structure-dark-mode: #4b5563;
-	--thread-text-standard-dark-mode: #f9fafb;
-	--thread-text-secondary-dark-mode: #4b5563;
-	--thread-text-disabled-dark-mode: #6b7280;
-	--thread-text-accent-dark-mode: #3c5c49;
-	--thread-text-inverted-dark-mode: #1f2937;
-
-	/* Apply Light Mode Colors */
-	--thread-background: var(--thread-background-light-mode);
-	--thread-surface: var(--thread-surface-light-mode);
-	--thread-elevated: var(--thread-elevated-light-mode);
-	--thread-structure: var(--thread-structure-light-mode);
-	--thread-text-standard: var(--thread-text-standard-light-mode);
-	--thread-text-secondary: var(--thread-text-secondary-light-mode);
-	--thread-text-disabled: var(--thread-text-disabled-light-mode);
-	--thread-text-accent: var(--thread-text-accent-light-mode);
-	--thread-text-inverted: var(--thread-text-inverted-light-mode);
-}
-
-:root[data-theme='light'] {
-	/* Light Mode Color Override */
-	--thread-background: var(--thread-background-light-mode);
-	--thread-surface: var(--thread-surface-light-mode);
-	--thread-elevated: var(--thread-elevated-light-mode);
-	--thread-structure: var(--thread-structure-light-mode);
-	--thread-text-standard: var(--thread-text-standard-light-mode);
-	--thread-text-secondary: var(--thread-text-secondary-light-mode);
-	--thread-text-disabled: var(--thread-text-disabled-light-mode);
-	--thread-text-accent: var(--thread-text-accent-light-mode);
-	--thread-text-inverted: var(--thread-text-inverted-light-mode);
-}
-
-:root[data-theme='dark'] {
-	/* Dark Mode Color Override */
-	--thread-background: var(--thread-background-dark-mode);
-	--thread-surface: var(--thread-surface-dark-mode);
-	--thread-elevated: var(--thread-elevated-dark-mode);
-	--thread-structure: var(--thread-structure-dark-mode);
-	--thread-text-standard: var(--thread-text-standard-dark-mode);
-	--thread-text-secondary: var(--thread-text-secondary-dark-mode);
-	--thread-text-disabled: var(--thread-text-disabled-dark-mode);
-	--thread-text-accent: var(--thread-text-accent-dark-mode);
-	--thread-text-inverted: var(--thread-text-inverted-dark-mode);
-}
-
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme]) {
-		/* Apply Dark Mode Colors */
-		--thread-background: var(--thread-background-dark-mode);
-		--thread-surface: var(--thread-surface-dark-mode);
-		--thread-elevated: var(--thread-elevated-dark-mode);
-		--thread-structure: var(--thread-structure-dark-mode);
-		--thread-text-standard: var(--thread-text-standard-dark-mode);
-		--thread-text-secondary: var(--thread-text-secondary-dark-mode);
-		--thread-text-disabled: var(--thread-text-disabled-dark-mode);
-		--thread-text-accent: var(--thread-text-accent-dark-mode);
-		--thread-text-inverted: var(--thread-text-inverted-dark-mode);
-	}
-}
+@import "./theme.css";
+@import "./panda.css";
+@import "./tailwind.css";

package/dist/types/image/image.types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 /** Props for a standard HTML `<img>` element */
 export type HtmlImageProps = {
     src: string;
-    alt: string;
+    alt?: string;
     width?: number | string;
     height?: number | string;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thread-ui",
-	"version": "0.7.14",
+	"version": "0.8.1",
 	"author": "Andrew Fisher",
 	"description": "UI Library for React Applications.",
 	"license": "MIT",
@@ -20,15 +20,14 @@
 	"main": "dist/index.js",
 	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
-		"./dist/styled-system/css": "./dist/styled-system/css/index.js",
-		"./dist/styled-system/patterns": "./dist/styled-system/patterns/index.js",
-		"./dist/styled-system/recipes": "./dist/styled-system/recipes/index.js"
+		"./thread.css": "./dist/styles/thread.css"
 	},
 	"sideEffects": [
 		"**/*.css"