@deepgram/styles 0.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Deepgram
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,147 @@
+# @deepgram/styles
+
+A Tailwind-based design system and styles library for Deepgram design system and demos.
+
+## Installation
+
+```bash
+npm install @deepgram/styles
+# or
+pnpm add @deepgram/styles
+# or
+yarn add @deepgram/styles
+```
+
+## Usage
+
+### Basic Usage (Pre-built CSS)
+
+Import the pre-built, minified CSS in your application:
+
+```javascript
+import '@deepgram/styles';
+```
+
+Or in HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@deepgram/styles/dist/deepgram.css">
+```
+
+### Expanded CSS (Non-minified)
+
+For development or easier debugging:
+
+```javascript
+import '@deepgram/styles/expanded';
+```
+
+### Using with Tailwind CSS
+
+If you're using Tailwind CSS in your project, you can extend your configuration with the Deepgram theme:
+
+```javascript
+// tailwind.config.js
+const deepgramConfig = require('@deepgram/styles/tailwind-config');
+
+module.exports = {
+  presets: [deepgramConfig],
+  content: [
+    './src/**/*.{html,js,ts,jsx,tsx}',
+    // your content paths
+  ],
+  // your customizations
+};
+```
+
+### Importing Source Files
+
+To customize and build the styles yourself:
+
+```css
+@import '@deepgram/styles/source';
+```
+
+## Available Components
+
+The library provides a comprehensive set of Tailwind-based components:
+
+### Layout
+- `.dg-app-header` - Application header with navigation
+- `.dg-hero` - Hero section for main content
+- `.dg-two-column-layout` - Responsive two-column grid
+- `.dg-container` - Centered content container
+- `.dg-grid-{2,3,4}` - Responsive grid layouts
+
+### Components
+- `.dg-panel` - Content panel with border
+- `.dg-panel-elevated` - Panel with shadow
+- `.dg-card` - Interactive card component
+- `.dg-selection-list` - Vertical selection list
+- `.dg-selection-item` - Selectable list item
+- `.dg-drop-zone` - File drop zone
+- `.dg-result-display` - Content display area
+
+### Buttons
+- `.dg-button-primary` - Primary action button
+- `.dg-button-secondary` - Secondary action button
+- `.dg-button-outline` - Outline button
+
+### Forms
+- `.dg-input` - Text input field
+- `.dg-textarea` - Multi-line text area
+- `.dg-select` - Select dropdown
+- `.dg-checkbox` - Checkbox input
+
+### Utilities
+- `.dg-badge-{success,warning,error,info}` - Status badges
+- `.dg-spinner` - Loading spinner
+- `.dg-divider` - Section divider
+- `.text-gradient` - Text with gradient effect
+- `.scrollbar-thin` - Thin scrollbar styling
+
+## Theme Colors
+
+The library includes Deepgram brand colors:
+
+- **Primary**: Spring Green (#13ef93)
+- **Accent**: Lavender Blue (#5c68d4)
+- **Dark Mode**: Professional dark theme
+- **Light Mode**: Clean light theme (toggle with `.light-mode` class on body)
+
+## Dark/Light Mode
+
+Dark mode is the default. To enable light mode:
+
+```javascript
+document.body.classList.add('light-mode');
+```
+
+To toggle:
+
+```javascript
+document.body.classList.toggle('light-mode');
+```
+
+## Responsive Design
+
+All components are mobile-first and responsive:
+
+- Mobile: Single column layouts
+- Tablet (md): Two column layouts
+- Desktop (lg): Multi-column layouts
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- CSS Grid and Flexbox support required
+- CSS Custom Properties (CSS Variables) support required
+
+## License
+
+MIT
+
+## Contributing
+
+See the [main repository](https://github.com/deepgram/starter-uis) for contribution guidelines.
+