@cocoar/ui 0.1.0-beta.99 → 0.1.1

package/styles/tokens/select-overlay.css

@@ -0,0 +1,40 @@
+/**
+ * Cocoar Design System - Select Overlay Size Variants
+ *
+ * These styles are applied to overlay panels via panelClass.
+ * They define size-specific custom properties consumed by
+ * the select dropdown content.
+ */
+
+/* ========================================
+   SELECT DROPDOWN SIZE VARIANTS
+   Applied via panelClass on overlay panel
+   ======================================== */
+
+/* XS Size */
+.coar-select-dropdown--xs {
+  --coar-select-option-font-size: var(--coar-component-xs-font-size);
+  --coar-select-option-padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  --coar-select-search-height: 24px;
+}
+
+/* S Size */
+.coar-select-dropdown--s {
+  --coar-select-option-font-size: var(--coar-component-s-font-size);
+  --coar-select-option-padding: var(--coar-spacing-xs) var(--coar-spacing-s);
+  --coar-select-search-height: 28px;
+}
+
+/* M Size (default) */
+.coar-select-dropdown--m {
+  --coar-select-option-font-size: var(--coar-body-small-base-size);
+  --coar-select-option-padding: var(--coar-spacing-s) var(--coar-spacing-m);
+  --coar-select-search-height: 32px;
+}
+
+/* L Size */
+.coar-select-dropdown--l {
+  --coar-select-option-font-size: var(--coar-component-l-font-size);
+  --coar-select-option-padding: var(--coar-spacing-m) var(--coar-spacing-l);
+  --coar-select-search-height: 40px;
+}

package/styles/tokens/shadows.css

@@ -0,0 +1,38 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Shadows / Elevation
+ * For depth and layering in the UI
+ */
+
+:root {
+  /* Shadow Colors - using rgba for transparency */
+  --coar-shadow-color: rgba(0, 0, 0, 0.08);
+  --coar-shadow-color-strong: rgba(0, 0, 0, 0.12);
+
+  /* Elevation Levels - classic drop shadows for light mode */
+  --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color);
+  --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 1px 2px var(--coar-shadow-color);
+  --coar-shadow-m: 0 4px 8px var(--coar-shadow-color), 0 2px 4px var(--coar-shadow-color);
+  --coar-shadow-l: 0 8px 16px var(--coar-shadow-color), 0 4px 8px var(--coar-shadow-color);
+  --coar-shadow-xl: 0 16px 32px var(--coar-shadow-color-strong), 0 8px 16px var(--coar-shadow-color);
+
+  /* Directional shadows - for sidebars, panels, drawers */
+  --coar-shadow-right: 4px 0 8px var(--coar-shadow-color), 2px 0 4px var(--coar-shadow-color);
+}
+
+/* Dark mode - use lighter borders/glows since shadows don't work on dark backgrounds */
+.dark-mode {
+  /* In dark mode, we combine a subtle dark outer shadow with a light inner glow/edge */
+  --coar-shadow-color: rgba(0, 0, 0, 0.5);
+  --coar-shadow-color-strong: rgba(0, 0, 0, 0.6);
+
+  /* Light edge highlight for elevation perception */
+  --coar-shadow-xs: 0 1px 2px var(--coar-shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  --coar-shadow-s: 0 2px 4px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  --coar-shadow-m: 0 4px 12px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  --coar-shadow-l: 0 8px 24px var(--coar-shadow-color), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  --coar-shadow-xl: 0 16px 48px var(--coar-shadow-color-strong), 0 0 0 1px rgba(255, 255, 255, 0.12);
+
+  /* Directional shadows - for sidebars, panels, drawers */
+  --coar-shadow-right: 4px 0 8px rgba(0, 0, 0, 0.3), inset -1px 0 0 0 rgba(255, 255, 255, 0.08);
+}

package/styles/tokens/sidebar.css

@@ -0,0 +1,67 @@
+/**
+ * Cocoar Design System - Sidebar Component Tokens
+ *
+ * Design tokens for sidebar navigation component layout and styling.
+ * All tokens use --coar-sidebar-* namespace.
+ */
+
+:root {
+  /* ========================================
+     Width and Dimensions
+     ======================================== */
+
+  /* Default sidebar width */
+  --coar-sidebar-width: 16rem;
+  --coar-sidebar-min-width: 12rem;
+  --coar-sidebar-max-width: 20rem;
+
+  /* Collapsed (icon-only) width */
+  --coar-sidebar-collapsed-width: 4rem;
+
+  /* ========================================
+     Visual Styling
+     ======================================== */
+
+  /* Background and borders */
+  --coar-sidebar-background: var(--coar-background-neutral-primary);
+  --coar-sidebar-border: 1px solid var(--coar-border-neutral-tertiary);
+
+  /* Optional elevation shadow */
+  --coar-sidebar-shadow: none;
+
+  /* ========================================
+     Section Spacing
+     ======================================== */
+
+  /* Header section */
+  --coar-sidebar-header-padding: var(--coar-spacing-m);
+  --coar-sidebar-header-border: 1px solid var(--coar-border-neutral-tertiary);
+
+  /* Content section (scrollable area) */
+  --coar-sidebar-content-padding: var(--coar-spacing-s);
+
+  /* Footer section */
+  --coar-sidebar-footer-padding: var(--coar-spacing-m);
+  --coar-sidebar-footer-border: 1px solid var(--coar-border-neutral-tertiary);
+
+  /* ========================================
+     Scrollbar Styling
+     ======================================== */
+
+  --coar-scrollbar-thumb: rgba(0, 0, 0, 0.2);
+  --coar-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+}
+
+/* ========================================
+   Dark Mode Overrides
+   ======================================== */
+
+.dark-mode {
+  --coar-sidebar-background: var(--coar-background-neutral-primary);
+  --coar-sidebar-border: 1px solid var(--coar-border-neutral-tertiary);
+  --coar-sidebar-header-border: 1px solid var(--coar-border-neutral-tertiary);
+  --coar-sidebar-footer-border: 1px solid var(--coar-border-neutral-tertiary);
+
+  --coar-scrollbar-thumb: rgba(255, 255, 255, 0.2);
+  --coar-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+}

package/styles/tokens/spacing.css

@@ -0,0 +1,16 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Spacing - Margins, padding, and gaps
+ * Based on 4px grid system
+ */
+
+:root {
+  --coar-spacing-xxs: 2px;
+  --coar-spacing-xs: 4px;
+  --coar-spacing-s: 8px;
+  --coar-spacing-m: 16px;
+  --coar-spacing-l: 24px;
+  --coar-spacing-xl: 32px;
+  --coar-spacing-xxl: 48px;
+  --coar-spacing-xxxl: 64px;
+}

package/styles/tokens/stroke-width.css

@@ -0,0 +1,12 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Stroke Width - Border widths
+ * Auto-generated from Figma - Do not edit manually
+ */
+
+:root {
+  --coar-stroke-width-l: 4px;
+  --coar-stroke-width-m: 2px;
+  --coar-stroke-width-s: 1px;
+  --coar-stroke-width-xs: 0.5px;
+}

package/styles/tokens/type-primitives.css

@@ -0,0 +1,23 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Type Primitives - Font families and base sizes
+ * Auto-generated from Figma - Do not edit manually
+ */
+
+:root {
+  --coar-font-family-body: Poppins;
+  --coar-font-family-title: Inter;
+  --coar-font-size-l: 24px;
+  --coar-font-size-m: 20px;
+  --coar-font-size-s: 16px;
+  --coar-font-size-xl: 32px;
+  --coar-font-size-xs: 14px;
+  --coar-font-size-xxl: 48px;
+  --coar-font-size-xxs: 12px;
+  --coar-font-size-xxxl: 72px;
+  --coar-font-size-xxxs: 10px;
+  --coar-font-weight-bold: 700;
+  --coar-font-weight-medium: 500;
+  --coar-font-weight-regular: 400;
+  --coar-font-weight-semi-bold: 600;
+}

package/styles/tokens/typography-responsive.css

@@ -0,0 +1,44 @@
+/**
+ * Cocoar Design System - Responsive Typography Extensions
+ *
+ * This file extends the base typography tokens with responsive variants.
+ * These are NOT auto-generated from Figma - they can be edited manually.
+ *
+ * The base tokens (--coar-titles-display-size, etc.) come from Figma.
+ * These responsive variants scale typography for different screen sizes.
+ */
+
+:root {
+  /* ========================================
+     RESPONSIVE TYPOGRAPHY TOKENS
+     ========================================
+
+     Naming convention:
+     --coar-{category}-{style}-size-{breakpoint}
+
+     Breakpoints:
+     - (default): Desktop 1024px+
+     - tablet: 768px - 1023px
+     - mobile: < 768px
+     ======================================== */
+
+  /* Display - 72px → 48px → 36px */
+  --coar-titles-display-size-tablet: 48px;
+  --coar-titles-display-size-mobile: 36px;
+
+  /* Title - 48px → 36px → 28px */
+  --coar-titles-title-size-tablet: 36px;
+  --coar-titles-title-size-mobile: 28px;
+
+  /* Subtitle - 32px → 24px → 20px */
+  --coar-titles-subtitle-size-tablet: 24px;
+  --coar-titles-subtitle-size-mobile: 20px;
+
+  /* Heading - 24px → 20px → 18px */
+  --coar-headings-heading-size-tablet: 20px;
+  --coar-headings-heading-size-mobile: 18px;
+
+  /* Subheading - 20px → 18px → 16px */
+  --coar-headings-subheading-size-tablet: 18px;
+  --coar-headings-subheading-size-mobile: 16px;
+}

package/styles/tokens/typography.css

@@ -0,0 +1,41 @@
+/**
+ * Cocoar Design System - Design Tokens
+ * Typography - Font styles and sizes
+ * Auto-generated from Figma - Do not edit manually
+ */
+
+:root {
+  --coar-body-base-family: Poppins;
+  --coar-body-base-size: 16px;
+  --coar-body-base-weight: 400;
+  --coar-body-bold-family: Poppins;
+  --coar-body-bold-size: 16px;
+  --coar-body-bold-weight: 700;
+  --coar-body-caption-family: Poppins;
+  --coar-body-caption-size: 12px;
+  --coar-body-caption-weight: 500;
+  --coar-body-footnote-family: Poppins;
+  --coar-body-footnote-size: 10px;
+  --coar-body-footnote-weight: 400;
+  --coar-body-small-base-family: Poppins;
+  --coar-body-small-base-size: 14px;
+  --coar-body-small-base-weight: 400;
+  --coar-body-small-bold-family: Poppins;
+  --coar-body-small-bold-size: 14px;
+  --coar-body-small-bold-weight: 700;
+  --coar-headings-heading-family: Poppins;
+  --coar-headings-heading-size: 24px;
+  --coar-headings-heading-weight: 600;
+  --coar-headings-subheading-family: Poppins;
+  --coar-headings-subheading-size: 20px;
+  --coar-headings-subheading-weight: 400;
+  --coar-titles-display-family: Inter;
+  --coar-titles-display-size: 72px;
+  --coar-titles-display-weight: 700;
+  --coar-titles-subtitle-family: Inter;
+  --coar-titles-subtitle-size: 32px;
+  --coar-titles-subtitle-weight: 400;
+  --coar-titles-title-family: Inter;
+  --coar-titles-title-size: 48px;
+  --coar-titles-title-weight: 700;
+}