@deepgram/styles 0.0.3 → 0.0.5

package/README.md

@@ -62,6 +62,105 @@ To customize and build the styles yourself:
 @import "@deepgram/styles/source";
 ```
 
+## Configuration
+
+### Base Font Size
+
+The entire design system is based on `rem` units, which scale relative to the root font size. By default, the base font size is set to `16px`. You can customize this by setting the CSS variable `--dg-base-font-size` in your application:
+
+```css
+:root {
+  --dg-base-font-size: 18px; /* Increase base size to 18px */
+}
+```
+
+Or target a specific element:
+
+```css
+.my-app {
+  --dg-base-font-size: 14px; /* Decrease base size to 14px */
+}
+```
+
+This approach allows for:
+
+- **Accessibility**: Users can adjust font sizes in their browser, and all components scale proportionally
+- **Responsive Design**: Change the base font size at different breakpoints for better mobile/desktop experiences
+- **Consistency**: All spacing, sizing, and typography scale together
+
+Example for responsive font sizing:
+
+```css
+:root {
+  --dg-base-font-size: 14px; /* Smaller on mobile */
+}
+
+@media (min-width: 768px) {
+  :root {
+    --dg-base-font-size: 16px; /* Standard on desktop */
+  }
+}
+```
+
+**Note**: The CSS variable defines the base font size, but all measurements internally use `rem` units, ensuring everything scales proportionally when you change this value.
+
+### Brand Colors
+
+The design system uses two primary brand colors that can be customized by setting CSS variables `--dg-primary` and `--dg-secondary` in your application. The gradient borders and glow effects automatically derive from these colors, so you only need to set two variables:
+
+```css
+:root {
+  --dg-primary: #ff6b35; /* Custom orange */
+  --dg-secondary: #4ecdc4; /* Custom teal */
+}
+```
+
+Or target a specific element:
+
+```css
+.my-custom-section {
+  --dg-primary: #9b59b6; /* Custom purple */
+  --dg-secondary: #3498db; /* Custom blue */
+}
+```
+
+This allows you to:
+
+- **Brand Consistency**: Easily apply your brand colors across all Deepgram components
+- **Theme Variations**: Create different themes or color schemes for different sections
+- **Quick Customization**: Override brand colors without rebuilding or forking the library
+- **Automatic Gradients**: Gradient borders and glow effects automatically use your custom colors
+
+Example for multiple themes:
+
+```css
+/* Default Deepgram theme */
+:root {
+  --dg-primary: #13ef95; /* Deepgram green */
+  --dg-secondary: #149afb; /* Deepgram blue */
+}
+
+/* Purple theme - gradient will be blue to purple */
+.theme-purple {
+  --dg-primary: #a855f7; /* Purple */
+  --dg-secondary: #ec4899; /* Pink */
+}
+
+/* Ocean theme - gradient will be teal to cyan */
+.theme-ocean {
+  --dg-primary: #16a085; /* Teal */
+  --dg-secondary: #3498db; /* Ocean Blue */
+}
+
+/* Sunset theme - gradient will be orange to golden */
+.theme-sunset {
+  --dg-primary: #ff6b35; /* Orange */
+  --dg-secondary: #f7931e; /* Golden */
+}
+```
+
+**Note**: These colors are used throughout the component library for buttons, links, highlights, gradient borders (secondary → primary), glow effects, and other interactive elements. The primary button's gradient border animates from `--dg-secondary` to `--dg-primary`, creating a cohesive brand experience.
+
 ## Available Components
 
 The library provides a comprehensive set of Tailwind-based components following BEM methodology:
@@ -85,9 +184,9 @@ The library provides a comprehensive set of Tailwind-based components following
 - `.dg-card--bordered` - Card with enhanced border
 - `.dg-card--structured` - Card optimized for image/header/body/footer layout
 - `.dg-card__image` - Card image container
-  - `.dg-card__image--small` - 120px height
-  - `.dg-card__image--medium` - 160px height
-  - `.dg-card__image--large` - 240px height
+  - `.dg-card__image--small` - Small height (7.5rem)
+  - `.dg-card__image--medium` - Medium height (10rem)
+  - `.dg-card__image--large` - Large height (15rem)
   - `.dg-card__image--aspect-4-3` - Responsive 4:3 aspect ratio
 - `.dg-card__icon` - Card icon container (for Font Awesome icons)
   - `.dg-card__icon--left` - Left-aligned icon (default)
@@ -106,11 +205,27 @@ The library provides a comprehensive set of Tailwind-based components following
 - `.dg-section--bordered` - Section with border and background
 - `.dg-section--elevated` - Section with shadow
 - `.dg-section--fieldset` - Fieldset-style section with legend
-- `.dg-constrain-width` - Constrained width container (960px max)
+- `.dg-constrain-width` - Constrained width container (60rem max)
 - `.dg-center-h` - Center content horizontally
 - `.dg-grid-mobile-stack` - Responsive grid that stacks on mobile
 - `.dg-action-group` - Action button group
 
+#### Multi-Column Layouts
+
+- `.dg-layout-three-column` - Full-height three-column layout with header
+- `.dg-layout-three-column__header` - Fixed header section with dark theme
+- `.dg-layout-three-column__header-container` - Header inner container (max-width constrained)
+- `.dg-layout-three-column__header-logo` - Logo image in header
+- `.dg-layout-three-column__header-actions` - Header action buttons container
+- `.dg-layout-three-column__header-button` - Icon button in header
+- `.dg-layout-three-column__header-profile` - Profile link wrapper
+- `.dg-layout-three-column__header-avatar` - Profile avatar image
+- `.dg-layout-three-column__main` - Main three-column container
+- `.dg-layout-three-column__left-main-wrapper` - Wrapper for left sidebar and main content
+- `.dg-layout-three-column__sidebar-left` - Left sidebar (256px on xl screens)
+- `.dg-layout-three-column__content` - Main content area (flexible width)
+- `.dg-layout-three-column__sidebar-right` - Right sidebar (384px on lg+ screens)
+
 ### Hero & Typography
 
 - `.dg-hero` - Hero section container
@@ -132,7 +247,7 @@ The library provides a comprehensive set of Tailwind-based components following
 - `.dg-input` - Base text input field
   - Focus state with primary color border
   - Disabled state with reduced opacity
-- `.dg-input--inline` - Input with minimum width (200px) for inline forms
+- `.dg-input--inline` - Input with minimum width (12.5rem) for inline forms
 - `.dg-input--full` - Override for specific width control
 - `.dg-textarea` - Multi-line text input
 - `.dg-checkbox` - Custom styled checkbox
@@ -144,7 +259,7 @@ The library provides a comprehensive set of Tailwind-based components following
 - `.dg-checkbox-description` - Container for checkbox with description text
 - `.dg-checkbox-group` - Container for multiple checkboxes
 - `.dg-form-field` - Form field container (label + input + helper)
-  - Full width on mobile, max-w-md (448px) on desktop
+  - Full width on mobile, max-w-md (28rem) on desktop
 - `.dg-form-field--full` - Override to make form field full width on all screens
 - `.dg-form-field--error` - Error validation state (cascades to children)
 - `.dg-form-field--success` - Success validation state (cascades to children)
@@ -365,6 +480,42 @@ Icon alignment options: `--left` (default), `--center`, `--right`
 </div>
 ```
 
+### Three-Column Layout
+
+```html
+<div class="dg-layout-three-column">
+  <header class="dg-layout-three-column__header">
+    <div class="dg-layout-three-column__header-container">
+      <img src="logo.svg" alt="Company" class="dg-layout-three-column__header-logo" />
+      <div class="dg-layout-three-column__header-actions">
+        <button type="button" class="dg-layout-three-column__header-button">
+          <span class="dg-sr-only">Notifications</span>
+          <!-- Icon SVG -->
+        </button>
+        <a href="#" class="dg-layout-three-column__header-profile">
+          <span class="dg-sr-only">Profile</span>
+          <img src="avatar.jpg" alt="" class="dg-layout-three-column__header-avatar" />
+        </a>
+      </div>
+    </div>
+  </header>
+
+  <div class="dg-layout-three-column__main">
+    <div class="dg-layout-three-column__left-main-wrapper">
+      <div class="dg-layout-three-column__sidebar-left">
+        <!-- Left sidebar content (navigation, filters, etc.) -->
+      </div>
+      <div class="dg-layout-three-column__content">
+        <!-- Main content area -->
+      </div>
+    </div>
+    <div class="dg-layout-three-column__sidebar-right">
+      <!-- Right sidebar content (notifications, info, etc.) -->
+    </div>
+  </div>
+</div>
+```
+
 ## Theme Colors
 
 The library includes Deepgram brand colors: