diff --git a/packages/avanza-ui/src/components/ControlButton.module.css b/packages/avanza-ui/src/components/ControlButton.module.css deleted file mode 100644 index 36ee358..0000000 --- a/packages/avanza-ui/src/components/ControlButton.module.css +++ /dev/null @@ -1,170 +0,0 @@ -/* stylelint-disable */ - -.controlButton { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0.5rem; - width: auto; - min-width: 7.5rem; - height: 2.75rem; - background: linear-gradient(135deg, var(--au-gray-700), var(--au-gray-800)); - border: 0.125rem solid rgba(255,255,255,0.06); - color: var(--au-text-primary); - cursor: pointer; - border-radius: 0.625rem; - transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 160ms ease, background 160ms ease; - box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12); - position: relative; - font-size: 1rem; - outline: none; - padding: 0 0.875rem; -} - -.controlButton span:first-child { - display:inline-flex; - align-items:center; - justify-content:center; - width:1.5rem; - height:1.5rem; -} - -/* layout column: icon above label */ -.column{ - flex-direction: column; - gap: 8px; - padding: 12px 20px; -} -.column span:first-child{ width:24px; height:24px } - -/* studio variant: light background, subtle border & shadow to match PreJoin */ -.studio{ - background: #ffffff; - border: 1px solid #e5e5e5; - color: #666666; - box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); - border-radius: 8px; -} - -/* studio hover / disabled to match prejoin template */ -.studio:hover:not(:disabled){ - background: #fee2e2; - color: #1a1a1a; -} -.studio[data-active="false"], -.studio:where([data-active="false"]) { - background: #fecaca; - color: #dc2626; -} -.studio[data-active="false"] span:first-child svg{ fill: #b91c1c !important; color: #b91c1c !important } - -/* internal hint (tooltip-like) used by studio variant */ -.controlHint{ - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - background-color: #1a1a1a; - color: white; - padding: 6px 12px; - border-radius: 6px; - font-size: 12px; - white-space: nowrap; - opacity: 0; - pointer-events:none; - transition: opacity 0.2s; - margin-bottom: 8px; -} - -.studio:hover .controlHint{ opacity:1 } - -/* slash mark over icon when disabled (like template control-icon::after) */ -.studio span:first-child{ position: relative } -.studio[data-active="false"] span:first-child::after{ - content: ''; - position: absolute; - width: 2px; - height: 28px; - background-color: #dc2626; - transform: rotate(-45deg); - left: 50%; - top: 50%; - transform-origin: center; - transform: translate(-50%, -50%) rotate(-45deg); - opacity: 1; -} - -.controlButton:hover:not(:disabled) { - transform: translateY(-0.125rem) scale(1.01); - box-shadow: 0 0.5rem 1.25rem rgba(2,6,23,0.12); -} - -.controlButton:focus-visible { - box-shadow: 0 0.5rem 1.25rem rgba(79,70,229,0.18); - transform: translateY(-0.0625rem); -} - -.controlButton:active:not(:disabled) { - transform: translateY(0) scale(0.995); -} - -.controlButton:disabled { - opacity: 1; - cursor: not-allowed; -} - -.controlButton.active { - background: linear-gradient(135deg, var(--au-primary), var(--au-primary-hover)); - border-color: var(--au-primary); - box-shadow: 0 0.375rem 1.25rem rgba(79, 70, 229, 0.28); -} - -.controlButton.danger { - background: linear-gradient(135deg, var(--au-danger-200), var(--au-danger-300)); - border-color: var(--au-danger-300); -} - -.controlButton.danger:hover:not(:disabled) { - background: linear-gradient(135deg, var(--au-danger-600), var(--au-danger-500)); - box-shadow: 0 0.375rem 1.25rem rgba(239,68,68,0.18); -} - -.controlButton[data-active="false"] { - background: linear-gradient(180deg, var(--au-danger-100), var(--au-danger-200)); - border-color: var(--au-danger-400); -} - -.controlButton[data-active="false"] span:first-child svg, -.controlButton.danger span:first-child svg { - fill: var(--au-danger-700) !important; - color: var(--au-danger-700) !important; -} - -.sm { - min-width: 5.75rem; - height: 2.5rem; - font-size: 0.875rem; -} - -.md { - min-width: 7.5rem; - height: 2.75rem; - font-size: 1rem; -} - -.lg { - min-width: 10rem; - height: 3.25rem; - font-size: 1.125rem; -} - -.controlButtonLabel { - font-size: 0.875rem; - font-weight: var(--au-font-medium); - margin: 0; - text-transform: none; - letter-spacing: 0; -} - -.tooltip { display: inline-block; } diff --git a/packages/avanza-ui/src/components/ControlButton.tsx b/packages/avanza-ui/src/components/ControlButton.tsx deleted file mode 100644 index cdaf9e7..0000000 --- a/packages/avanza-ui/src/components/ControlButton.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import { cn } from '../utils/helpers'; -import type { ComponentBaseProps } from '../types'; -import styles from './ControlButton.module.css'; -import { Tooltip } from './Tooltip'; - -export interface ControlButtonProps extends ComponentBaseProps { - icon?: React.ReactNode; - label?: string; - active?: boolean; - danger?: boolean; - size?: 'sm' | 'md' | 'lg'; - onClick?: () => void; - disabled?: boolean; - title?: string; - hint?: string; - hintPosition?: 'top' | 'bottom' | 'left' | 'right'; - layout?: 'row' | 'column'; - variant?: 'default' | 'studio'; -} - -export const ControlButton: React.FC = (props) => { - const { - icon, - label, - active = false, - danger = false, - size = 'md', - onClick, - disabled = false, - title, - className, - style, - id, - hint, - hintPosition = 'top', - layout = 'row', - variant = 'default', - } = props; - - const button = ( - - ); - - // For studio variant we render the hint inside the button (template behavior). - if (variant === 'studio' && hint) return button - - return hint ? ( - - {button} - - ) : ( - button - ); -}; - -ControlButton.displayName = 'ControlButton'; diff --git a/packages/avanza-ui/src/components/MicrophoneMeter.module.css b/packages/avanza-ui/src/components/MicrophoneMeter.module.css deleted file mode 100644 index 159cefe..0000000 --- a/packages/avanza-ui/src/components/MicrophoneMeter.module.css +++ /dev/null @@ -1,31 +0,0 @@ -:root{ - --au-meter-bg: rgba(15,23,42,0.06); - --au-meter-fill: #10b981; -} - -.meter{ - display:flex; - align-items:flex-end; - justify-content:center; -} - -.track{ - width:18px; - background: rgba(0,0,0,0.04); - border-radius: 8px; - overflow: hidden; - display:flex; - align-items:flex-end; - justify-content:center; -} - -.fill{ - width:100%; - background: linear-gradient(180deg, #34d399, #10b981); - transition: height 140ms ease; - height:4%; -} - -@media (prefers-color-scheme: light){ - .track{ background: #f3f4f6 } -} diff --git a/packages/avanza-ui/src/components/MicrophoneMeter.tsx b/packages/avanza-ui/src/components/MicrophoneMeter.tsx deleted file mode 100644 index 8da1503..0000000 --- a/packages/avanza-ui/src/components/MicrophoneMeter.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; -import styles from './MicrophoneMeter.module.css'; - -export interface MicrophoneMeterProps { - stream?: MediaStream | null; - className?: string; - // altura del medidor en px opcional - height?: number; -} - -export const MicrophoneMeter: React.FC = ({ stream = null, className, height = 80 }) => { - const audioCtxRef = useRef(null); - const analyserRef = useRef(null); - const dataRef = useRef(null); - const rafRef = useRef(null); - const [level, setLevel] = useState(0); - - useEffect(() => { - if (!stream) return; - let mounted = true; - - try { - const AudioCtx = window.AudioContext || (window as any).webkitAudioContext; - const audioCtx = new AudioCtx(); - audioCtxRef.current = audioCtx; - const analyser = audioCtx.createAnalyser(); - analyser.fftSize = 256; - analyserRef.current = analyser; - const source = audioCtx.createMediaStreamSource(stream); - source.connect(analyser); - const bufferLength = analyser.frequencyBinCount; - const data = new Uint8Array(bufferLength); - dataRef.current = data; - - const tick = () => { - if (!mounted) return; - try { - analyser.getByteTimeDomainData(data); - let sum = 0; - for (let i = 0; i < data.length; i++) { - const v = (data[i] - 128) / 128; - sum += v * v; - } - const rms = Math.sqrt(sum / data.length); - // scale to 0..1, clamp - const lvl = Math.min(1, Math.max(0, (rms - 0.01) * 3)); - setLevel(lvl); - } catch (e) { - // ignore - } - rafRef.current = requestAnimationFrame(tick); - }; - rafRef.current = requestAnimationFrame(tick); - } catch (e) { - // ignore if audio not possible - } - - return () => { - mounted = false; - if (rafRef.current) cancelAnimationFrame(rafRef.current); - try { - analyserRef.current && analyserRef.current.disconnect(); - audioCtxRef.current && audioCtxRef.current.close(); - } catch (e) {} - audioCtxRef.current = null; - analyserRef.current = null; - dataRef.current = null; - }; - }, [stream]); - - const fillPercent = Math.round(level * 100); - - return ( -
-
-
-
-
- ); -}; - -export default MicrophoneMeter; diff --git a/packages/avanza-ui/src/components/PrejoinControlButton.tsx b/packages/avanza-ui/src/components/PrejoinControlButton.tsx deleted file mode 100644 index 00e9070..0000000 --- a/packages/avanza-ui/src/components/PrejoinControlButton.tsx +++ /dev/null @@ -1,20 +0,0 @@ -// filepath: packages/avanza-ui/src/components/PrejoinControlButton.tsx -import React from 'react'; -import { ControlButton, type ControlButtonProps } from './ControlButton'; -import { cn } from '../utils/helpers'; - -/** - * Thin wrapper that forces `variant="studio"` and exposes avz classes for prejoin template compatibility. - */ -export const PrejoinControlButton: React.FC = ({ className, ...props }) => { - return ( - - ); -}; - -PrejoinControlButton.displayName = 'PrejoinControlButton'; - diff --git a/packages/avanza-ui/src/components/PrejoinControls.tsx b/packages/avanza-ui/src/components/PrejoinControls.tsx deleted file mode 100644 index bf054fc..0000000 --- a/packages/avanza-ui/src/components/PrejoinControls.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// filepath: packages/avanza-ui/src/components/PrejoinControls.tsx -import React from 'react'; -import { cn } from '../utils/helpers'; - -export interface PrejoinControlsProps extends React.HTMLAttributes {} - -export const PrejoinControls: React.FC = ({ children, className, ...rest }) => { - return ( -
- {children} -
- ); -}; - -PrejoinControls.displayName = 'PrejoinControls'; - diff --git a/packages/avanza-ui/src/components/SegmentedControl.tsx b/packages/avanza-ui/src/components/SegmentedControl.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/packages/avanza-ui/src/index.ts b/packages/avanza-ui/src/index.ts deleted file mode 100644 index 1080207..0000000 --- a/packages/avanza-ui/src/index.ts +++ /dev/null @@ -1,106 +0,0 @@ -// Styles -import './styles/globals.css'; -import './styles/controls.css'; -import './tokens.css'; -import './styles/prejoin.css'; - -// Components -export { Button } from './components/Button'; -export type { ButtonProps } from './components/Button'; - -export { Card, CardHeader, CardBody, CardFooter } from './components/Card'; -export type { CardProps, CardSectionProps } from './components/Card'; - -export { Input } from './components/Input'; -export type { InputProps } from './components/Input'; - -export { Textarea } from './components/Textarea'; -export type { TextareaProps } from './components/Textarea'; - -export { Select } from './components/Select'; -export type { SelectProps, SelectOption } from './components/Select'; - -export { Checkbox } from './components/Checkbox'; -export type { CheckboxProps } from './components/Checkbox'; - -export { Radio } from './components/Radio'; -export type { RadioProps } from './components/Radio'; - -export { Switch } from './components/Switch'; -export type { SwitchProps } from './components/Switch'; - -export { Dropdown, DropdownItem, DropdownDivider, DropdownHeader } from './components/Dropdown'; -export type { DropdownProps, DropdownItemProps } from './components/Dropdown'; - -export { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal'; -export type { ModalProps, ModalSectionProps, ModalHeaderProps } from './components/Modal'; - -export { Tooltip } from './components/Tooltip'; -export type { TooltipProps } from './components/Tooltip'; - -export { Avatar } from './components/Avatar'; -export type { AvatarProps } from './components/Avatar'; - -export { Badge } from './components/Badge'; -export type { BadgeProps } from './components/Badge'; - -export { Spinner } from './components/Spinner'; -export type { SpinnerProps } from './components/Spinner'; - -export { Alert } from './components/Alert'; -export type { AlertProps } from './components/Alert'; - -export { Tabs } from './components/Tabs'; -export type { TabsProps, Tab } from './components/Tabs'; - -export { Accordion } from './components/Accordion'; -export type { AccordionProps, AccordionItem } from './components/Accordion'; - -export { Breadcrumb } from './components/Breadcrumb'; -export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb'; - -export { Progress } from './components/Progress'; -export type { ProgressProps } from './components/Progress'; - -export { Pagination } from './components/Pagination'; -export type { PaginationProps } from './components/Pagination'; - -// Studio Components -export { StudioHeader } from './components/StudioHeader'; -export type { StudioHeaderProps } from './components/StudioHeader'; - -export { ControlButton } from './components/ControlButton'; -export type { ControlButtonProps } from './components/ControlButton'; - -export { ControlGroup } from './components/ControlGroup'; -export type { ControlGroupProps } from './components/ControlGroup'; - -export { ControlBar } from './components/ControlBar'; -export type { ControlBarProps } from './components/ControlBar'; - -export { IconButton } from './components/IconButton'; -export type { IconButtonProps } from './components/IconButton'; - -export { SceneCard } from './components/SceneCard'; -export type { SceneCardProps } from './components/SceneCard'; - -export { VideoTile } from './components/VideoTile'; -export type { VideoTileProps, ConnectionQuality } from './components/VideoTile'; - -export { MicrophoneMeter } from './components/MicrophoneMeter'; -export type { MicrophoneMeterProps } from './components/MicrophoneMeter'; - -export { PrejoinControls } from './components/PrejoinControls'; -export { PrejoinControlButton } from './components/PrejoinControlButton'; -export type { PrejoinControlsProps } from './components/PrejoinControls'; - -// Tokens -export { tokens } from './tokens'; -export type { Tokens } from './tokens'; - -// Types -export type { ButtonVariant, ButtonSize, Theme, ComponentBaseProps } from './types'; - -// Utils -export { cn, formatDate, generateId, debounce, throttle } from './utils/helpers'; -export { modifierKeyLabel, isMacPlatform, isWindowsPlatform, isLinuxPlatform } from './utils/platform'; diff --git a/packages/avanza-ui/src/styles/globals.css b/packages/avanza-ui/src/styles/globals.css deleted file mode 100644 index 531569e..0000000 --- a/packages/avanza-ui/src/styles/globals.css +++ /dev/null @@ -1,171 +0,0 @@ -/* avanza-ui global tokens and resets */ -:root{ - /* Colors */ - --au-gray-950: #0b1220; - --au-gray-900: #0f172a; - --au-gray-800: #111827; - --au-gray-700: #1f2937; - --au-gray-600: #374151; - --au-gray-600-2: #4b5563; - - --au-primary: #4f46e5; - --au-primary-hover: #4338ca; - --au-success-500: #10b981; - --au-warning-500: #f59e0b; - /* danger color moved to danger palette below */ - - /* Danger palette (shades) */ - --au-danger-100: #fff5f5; - --au-danger-200: #fee2e2; - --au-danger-300: #fed7d7; - --au-danger-400: #fca5a5; - --au-danger-500: #ef4444; - --au-danger-600: #fb7185; - --au-danger-700: #c53030; - --au-danger-800: #9b1f1f; - - --au-text-primary: #f1f5f9; - --au-text-secondary: #cbd5e1; - - /* Radius */ - --au-radius-sm: 4px; - --au-radius-md: 8px; - --au-radius-lg: 12px; - --au-radius-full: 9999px; - - /* Typography */ - --au-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - --au-font-bold: 700; - --au-font-medium: 500; - --au-font-normal: 400; - - /* Transitions */ - --au-transition-fast: 150ms ease; - --au-transition-medium: 250ms ease; - --au-transition-slow: 400ms ease; - - /* Shadows */ - --au-shadow-sm: 0 4px 12px rgba(2,6,23,0.18); - --au-shadow-md: 0 8px 24px rgba(2,6,23,0.28); -} - -/* Light theme overrides (if used in non-dark mode) */ -[data-theme="light"]{ - --au-text-primary: #1f2937; - --au-text-secondary: #6b7280; - --au-gray-950: #f8fafc; - --au-gray-900: #ffffff; - --au-gray-800: #f3f4f6; - --au-gray-700: #e5e7eb; - --au-gray-600: #9ca3af; -} - -/* Basic resets for avanza-ui components */ -.au-root, .avanza-ui-root { - font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - color: var(--au-text-primary); -} - -button { font-family: inherit } - -/* Ensure modal/backdrop stacking works */ -.avanza-ui-modal-backdrop { z-index: 9999 } - -/* Compatibility tokens for other packages (broadcast-panel / studio-panel) - These map commonly used project tokens to the avanza-ui design tokens so - all packages can import the avanza-ui globals and get consistent values. -*/ -:root{ - /* Broadcast-style tokens */ - --primary-blue: var(--au-primary); - --primary-blue-hover: var(--au-primary-hover); - --background-color: var(--au-gray-950); - --surface-color: var(--au-gray-900); - --text-primary: var(--au-text-primary); - --text-secondary: var(--au-text-secondary); - --border-light: rgba(255,255,255,0.04); - --active-bg-light: rgba(79,70,229,0.06); - --shadow-sm: var(--au-shadow-sm); - --shadow-md: var(--au-shadow-md); - --skeleton-base: #e5e7eb; - --skeleton-highlight: #f3f4f6; - - /* Surface tokens used by studio-panel */ - --surface-50: #f8fafc; - --surface-900: #0f172a; - - /* Studio specific tokens (map to avanza-ui tokens) */ - --studio-bg-primary: var(--background-color); - --studio-bg-secondary: var(--surface-color); - --studio-bg-tertiary: var(--active-bg-light); - --studio-bg-elevated: var(--surface-color); - --studio-bg-hover: rgba(255,255,255,0.02); - - --studio-border: var(--border-light); - --studio-border-light: rgba(255,255,255,0.02); - --studio-border-subtle: rgba(255,255,255,0.01); - - --studio-text-primary: var(--text-primary); - --studio-text-secondary: var(--text-secondary); - --studio-text-muted: #94a3b8; - --studio-text-disabled: #9ca3af; - - --studio-accent: var(--primary-blue); - --studio-accent-hover: var(--primary-blue-hover); - --studio-accent-light: rgba(79,70,229,0.08); - - --studio-success: var(--au-success-500); - --studio-warning: var(--au-warning-500); - --studio-danger: var(--au-danger-500); - --studio-danger-100: var(--au-danger-100); - --studio-danger-200: var(--au-danger-200); - --studio-danger-300: var(--au-danger-300); - --studio-danger-400: var(--au-danger-400); - --studio-danger-500: var(--au-danger-500); - --studio-danger-600: var(--au-danger-600); - --studio-danger-700: var(--au-danger-700); - - --studio-recording: var(--au-danger-500); - --studio-recording-pulse: rgba(239, 68, 68, 0.12); - - --studio-space-xs: 4px; - --studio-space-sm: 8px; - --studio-space-md: 12px; - --studio-space-lg: 16px; - --studio-space-xl: 24px; - - --studio-radius-sm: var(--au-radius-sm); - --studio-radius-md: var(--au-radius-md); - --studio-radius-lg: var(--au-radius-lg); - --studio-radius-xl: calc(var(--au-radius-lg) + 4px); - - --studio-font-family: var(--au-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); - --studio-text-base: 14px; - --studio-text-sm: 12px; - - /* Additional studio tokens required by studio-theme.css and components */ - --studio-font-normal: var(--au-font-normal, 400); - --studio-leading-normal: 1.4; - --studio-radius-full: var(--au-radius-full, 9999px); - - --studio-shadow-sm: var(--au-shadow-sm); - --studio-shadow-md: var(--au-shadow-md); - --studio-shadow-lg: 0 12px 40px rgba(2,6,23,0.32); - - --studio-transition: 200ms ease; - --studio-transition-fast: 120ms ease; - --studio-transition-slow: 320ms ease; -} - -/* Light theme compatibility mapping */ -[data-theme="light"]{ - --primary-blue: var(--au-primary); - --background-color: #f7f8fa; - --surface-color: #ffffff; - --text-primary: #1f2937; - --text-secondary: #6b7280; - --surface-50: #f8fafc; - --surface-900: #0f172a; -} - -/* End of compatibility tokens */ diff --git a/packages/avanza-ui/src/styles/prejoin.css b/packages/avanza-ui/src/styles/prejoin.css deleted file mode 100644 index 6bcd638..0000000 --- a/packages/avanza-ui/src/styles/prejoin.css +++ /dev/null @@ -1,385 +0,0 @@ -/* filepath: packages/avanza-ui/src/styles/prejoin.css */ -@import './studio-theme.css'; - -:root{ - --au-prejoin-badge: rgba(99,102,241,0.95); - --au-prejoin-danger: var(--studio-danger, #ef4444); - --au-prejoin-bg: #ffffff; - --au-prejoin-video-bg: #0a0a1a; - --au-prejoin-mic-bg: #f8f9fa; - --studio-text-primary: #1a1a1a !important; - --studio-text-secondary: #666666 !important; - --studio-accent: #2563eb !important; - --studio-border: #e5e5e5 !important; - --surface-color: #ffffff !important; - --background-color: #ffffff !important; -} - -/* Load the Requiner font used by the visual baseline (inlined as base64 to ensure parity in headless renders) */ -@font-face { - font-family: 'Requiner'; - /* inlined WOFF to guarantee identical rendering in browserless/data:URL captures */ - src: url('data:font/woff;base64,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')); - font-weight: 400 700; - font-style: normal; - font-display: swap; -} - -/* Improve font rendering parity across browsers and force the project's preferred font stack */ -.avz-prejoin-container, .avz-prejoin-card, .avz-prejoin-header, .avz-form-label, .avz-input, .avz-submit { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - font-family: 'Requiner', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -} - -/* Container & header (template exact values) */ -.avz-prejoin-container{ max-width: 628px; width:100%; margin:0 auto; padding:20px } -.avz-prejoin-card{ background: var(--au-prejoin-bg); border-radius: 12px; padding: 0 } -.avz-prejoin-header{ text-align:center; margin-bottom:24px } -.avz-prejoin-title{ font-size:28px; font-weight:600; color:var(--studio-text-primary, #1a1a1a); margin-bottom:8px } -.avz-prejoin-note{ font-size:14px; color:var(--studio-text-secondary, #666666); line-height:1.5 } - -/* Video + mic layout */ -.avz-video-row{ display:flex; gap:16px; margin-bottom:24px; align-items:flex-start } -.avz-video-preview{ flex:1; background:var(--au-prejoin-video-bg); border-radius:12px; aspect-ratio:16/9; position:relative; overflow:hidden } -.avz-video-el{ width:100%; height:100%; object-fit:cover; background:#0b0b0b } -.avz-badge{ position:absolute; bottom:16px; left:14px; background:var(--au-prejoin-badge); color:#fff; padding:8px 18px; border-radius:20px; font-size:14px; font-weight:500 } - -/* Mic status */ -.avz-mic-status{ background-color:var(--au-prejoin-mic-bg); border-radius:12px; padding:20px; min-width:180px; display:flex; flex-direction:column; align-items:center; justify-content:center } -.avz-mic-icon{ width:48px; height:48px; background-color:#e8e8e8; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative } -.avz-mic-icon::before{ content:'🎤'; font-size:24px } -.avz-mic-meter{ width:32px; height:80px; background-color:#e8e8e8; border-radius:16px; margin-bottom:12px; position:relative; overflow:hidden } -.avz-mic-level{ position:absolute; bottom:0; left:0; right:0; height:20%; background: linear-gradient(to top, #22c55e, #86efac); border-radius:16px; transition: height 0.1s ease-out } -.avz-mic-status-text{ text-align:center; font-size:14px; color:#22c55e; font-weight:500; margin-bottom:4px; white-space: pre-line } -.avz-mic-device{ font-size:11px; color:#999999; text-align:center } - -/* Controls wrapper - template exact */ -.avz-controls{ display:inline-flex; justify-content:center; gap:8px; padding:12px; background-color:var(--au-prejoin-bg); border:1px solid var(--studio-border, #e5e5e5); border-radius:12px; margin-bottom:24px; margin-left:auto; margin-right:auto; box-shadow:0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) } -.avz-controls-wrapper{ text-align:center } - -.avz-control-btn{ display:flex; flex-direction:column; align-items:center; gap:8px; background:transparent; border:none; cursor:pointer; color:var(--studio-text-secondary,#666666); font-size:13px; transition:all 0.2s; padding:12px 20px; border-radius:8px; position:relative } -.avz-control-btn:hover{ color:var(--studio-text-primary,#1a1a1a); background-color:#f8fafc } -.avz-control-btn.disabled{ color:var(--au-prejoin-danger,#dc2626); background-color:#fecaca } -.avz-control-btn.disabled:hover{ color:#b91c1c; background-color:#fca5a5 } - -.avz-control-icon{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; position:relative } -.avz-control-icon::after{ content:''; position:absolute; width:2px; height:28px; background-color:var(--au-prejoin-danger,#dc2626); transform:rotate(-45deg); opacity:0; transition:opacity 0.2s } -.avz-control-btn.disabled .avz-control-icon::after{ opacity:1 } - -.avz-control-hint{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background-color:var(--studio-text-primary,#1a1a1a); color:white; padding:6px 12px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.2s; margin-bottom:8px } -.avz-control-hint::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--studio-text-primary,#1a1a1a) } -.avz-control-btn:hover .avz-control-hint{ opacity:1 } - -.kbd{ background-color:#374151; padding:2px 6px; border-radius:3px; font-family:monospace; font-size:11px; margin:0 2px } - -/* Form styles (template) */ -.avz-form-group{ margin-bottom:20px } -.avz-form-label{ display:block; font-size:14px; color:var(--studio-text-primary,#1a1a1a); margin-bottom:8px; font-weight:500 } -.avz-form-label .avz-optional{ color:var(--studio-text-secondary,#666666); font-weight:400 } -.avz-input{ width:100%; padding:12px 16px; border:1px solid var(--studio-border,#d1d5db); border-radius:8px; font-size:14px; color:var(--studio-text-primary,#1a1a1a); transition: border-color 0.2s, box-shadow 0.2s } -.avz-input:focus{ outline:none; border-color:var(--studio-accent,#3b82f6); box-shadow:0 0 0 3px rgba(59,130,246,0.1) } -.avz-input::placeholder{ color:#9ca3af } -.avz-submit{ width:100%; padding:14px; background-color:var(--studio-accent,#2563eb); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:background-color 0.2s } -.avz-submit:hover{ background-color:#1d4ed8 } -.avz-submit:active{ background-color:#1e40af } - -/* Fine tuning to match template pixel values */ -.avz-prejoin-title{ line-height:1.1 } -/* Badge: usar padding exacto del template para que sea pixel-perfect */ -.avz-badge{ padding:8px 18px; font-size:14px; border-radius:20px; line-height:20px; font-family: 'General Sans', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif } -/* Revert control container shadow to template */ -.avz-controls{ box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); } -/* Buttons: template padding and radius */ -.avz-control-btn{ min-width:auto !important; padding:12px 20px; border-radius:8px } -/* Icon sizes per template */ -.avz-control-icon, .avz-control-icon svg{ width:24px; height:24px; display:flex; align-items:center; justify-content:center } - -/* Allow mic status text to include line breaks like the template */ -.avz-mic-status-text{ line-height:1.05; white-space: pre-line } - -/* visual tweaks for disabled slash */ -.avz-control-btn[data-active="false"] .avz-control-icon::after{ opacity:1 } - -/* Conservative visual fixes to better match baseline/template */ -.avz-control-btn { - background: transparent !important; - background-image: none !important; - color: #666666 !important; - box-shadow: none !important; - -webkit-appearance: none; -} -/* Ensure SVG icons in control buttons use neutral stroke color */ -.avz-control-btn svg, .avz-control-btn .avz-control-icon svg { - stroke: #666666 !important; - fill: none !important; -} -/* Force controls container to use template background/border/shadow */ -.avz-controls { - background-color: #ffffff !important; - border: 1px solid #e5e5e5 !important; - box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; -} -/* Force submit button to template blue and remove gradients */ -.avz-submit { - background-color: #2563eb !important; - background-image: none !important; - border-radius: 8px !important; - font-weight: 600 !important; -} - -/* Additional high-specificity overrides to stomp component library styles that may be applied later */ -.avz-prejoin-container .avz-controls .avz-control-btn, -.avz-prejoin-card .avz-controls .avz-control-btn, -.container .controls .control-btn, -.controls .control-btn { - background: transparent !important; - background-image: none !important; - color: #666666 !important; - box-shadow: none !important; - border: none !important; -} - -/* Make sure icon fills are neutral grey (some toolkits set gradient fills) */ -.avz-prejoin-container .avz-controls .avz-control-btn svg, -.avz-prejoin-card .avz-controls .avz-control-btn svg, -.controls .control-btn svg { - stroke: #666666 !important; - fill: none !important; -} - -/* Force join/submit button inside any wrapper to the template blue */ -.avz-prejoin-container .avz-submit, -.avz-prejoin-card .avz-submit, -.controls .submit-btn { - background-color: #2563eb !important; - background-image: none !important; - color: #ffffff !important; - border-radius: 8px !important; - font-weight: 600 !important; - box-shadow: none !important; -} - -/* Badge: ensure exact padding and font smoothing */ -.avz-badge, .user-badge { - padding: 8px 18px !important; - font-size: 14px !important; - border-radius: 20px !important; - line-height: 20px !important; - font-family: 'General Sans', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - -webkit-font-smoothing: antialiased !important; - -moz-osx-font-smoothing: grayscale !important; - /* Slight position nudge to better match baseline */ - bottom: 17px !important; - left: 13px !important; -} - -/* Defensive: remove strong gradients/shadows from any element with class name containing "-accent" */ -[class*="accent"], [class*="-accent"], .btn--primary, .button--primary { - background-image: none !important; - background: none !important; - box-shadow: none !important; -} - -/* Stronger control-bar adjustments to better match the visual baseline/template */ -/* Ensure container width and centering similar to template */ -.controls, .avz-controls { - max-width: 560px !important; /* slightly wider to match baseline */ - width: 100% !important; - padding: 12px !important; - border-radius: 12px !important; - background-color: #ffffff !important; - border: 1px solid #e5e5e5 !important; - box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; /* template light shadow */ - display: flex !important; - justify-content: center !important; - gap: 12px !important; /* A: increase gap */ -} - -/* Make each button look like template: neutral background, subtle border, icon above label */ -.controls .control-btn, .avz-controls .avz-control-btn { - min-width: 120px !important; /* A: adjusted to 120px per iteration */ - padding: 12px 16px !important; /* slight increase for balance */ - border-radius: 8px !important; /* standardize radius */ - background: #ffffff !important; - border: 1px solid rgba(0,0,0,0.06) !important; /* subtle border */ - box-shadow: none !important; /* B: remove inset to avoid floating glow */ - color: #374151 !important; - display: flex !important; - flex-direction: column !important; - align-items: center !important; - gap: 8px !important; - text-align: center !important; -} - -/* Hover state: slight lift but no purple gradient */ -.controls .control-btn:hover, .avz-controls .avz-control-btn:hover { - background-color: #f8fafc !important; /* very subtle */ - color: #111827 !important; - transform: translateY(-1px) !important; /* tiny uplift */ -} - -/* Disabled look: muted red outline like template */ -.controls .control-btn.disabled, .avz-controls .avz-control-btn.disabled { - background-color: #fff5f5 !important; - color: #9f1239 !important; - border-color: #fee2e2 !important; -} - -/* Icon styling: force neutral stroke and remove fills/gradients */ -.controls .control-btn .control-icon svg, .avz-controls .avz-control-btn svg { - stroke: #6b7280 !important; /* neutral grey */ - fill: none !important; -} - -/* Label under icon: neutral text */ -.controls .control-btn span, .avz-controls .avz-control-btn span { - color: #4b5563 !important; /* slightly dark grey */ - font-size: 13px !important; - line-height: 1.1 !important; -} - -/* Remove large external glow still present on some library wrappers */ -.controls, .controls * , .avz-controls, .avz-controls * { - box-shadow: none !important; -} - -/* Reapply subtle container shadow only on the container (not on children) */ -.controls, .avz-controls { - box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important; -} - -/* Ensure tooltips remain above */ -.control-hint, .avz-control-hint { z-index: 40 !important; } - -/* End control-bar A+B adjustments */ - -/* Micro-adjustments: tiny nudges to better align to baseline */ -.avz-badge, .user-badge { - /* nudge to pixel-perfect positions used in template */ - bottom: 16px !important; /* keep slightly lower */ - left: 14px !important; /* small left nudge */ - padding: 8px 18px !important; /* keep compact */ - font-weight: 500 !important; /* baseline weight */ - border-radius: 20px !important; -} - -.controls, .avz-controls { - /* adjust container width and spacing to better match template */ - max-width: 560px !important; /* widen slightly */ - gap: 10px !important; /* moderate gap */ - padding: 12px 14px !important; - border-radius: 12px !important; - border: 1px solid rgba(0,0,0,0.06) !important; - box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; /* slightly subtler */ -} - -.controls .control-btn, .avz-controls .avz-control-btn { - min-width: 110px !important; /* slight reduction */ - padding: 10px 14px !important; /* balanced padding */ - border-radius: 8px !important; - background: #ffffff !important; - border: 1px solid rgba(0,0,0,0.06) !important; - box-shadow: none !important; - color: #374151 !important; - display: flex !important; - flex-direction: column !important; - align-items: center !important; - gap: 8px !important; - text-align: center !important; -} - -/* Micro-adjustment pass 2: fine tuning */ -.avz-badge, .user-badge { - left: 13px !important; - bottom: 17px !important; - padding: 8px 18px !important; - font-weight: 600 !important; - box-shadow: none !important; -} - -.avz-video-preview, .video-preview { - border-radius: 12px !important; - background: #060611 !important; /* slightly darker to match baseline */ - box-shadow: none !important; -} - -.avz-controls, .controls { - margin-top: 10px !important; - margin-bottom: 24px !important; - max-width: 540px !important; -} - -.avz-submit { - height: 44px !important; - line-height: 44px !important; - border-radius: 8px !important; - box-shadow: none !important; -} - -.avz-input { background-color: #ffffff !important; } - -/* small tweak to top spacing to better align header */ -.avz-prejoin-header { margin-top: 6px !important; } - -/* end micro-adjustment pass 2 */ - -/* Micro-adjustment pass 3: header, note color, controls vertical align */ -.avz-prejoin-title { color: #111827 !important; font-weight: 700 !important; } -.avz-prejoin-note { color: #9ca3af !important; font-weight: 400 !important; } - -.avz-controls, .controls { margin-top: 18px !important; padding: 10px 12px !important; } - -.avz-video-preview, .video-preview { background: #05040a !important; } - -.avz-input { border-color: #e6e9ef !important; background: #fff !important; } - -.avz-badge { background: #5b55f8 !important; } - -.avz-submit { background-color: #2563eb !important; box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset !important; } - -/* reduce overall contrast of shadows to avoid large diff due to shadow intensity */ -.controls, .avz-controls { box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; } - -/* ensure body uses the inlined font explicitly */ -body, .avz-prejoin-container { font-family: 'Requiner', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } - -/* End micro-adjustment pass 3 */ - -/* Micro-adjustment pass 4: force template CSS variables and exact values */ -/* Force these on container to reduce environment differences */ -.avz-prejoin-container, .avz-prejoin-card, body { - background-color: #ffffff !important; - color: var(--studio-text-primary) !important; -} - -/* Badge: use the exact rgba from the template baseline */ -.avz-badge, .user-badge { background: rgba(99,102,241,0.95) !important; color: #ffffff !important; } - -/* Video preview exact background and radius */ -.avz-video-preview, .video-preview { background: #0a0a1a !important; border-radius: 12px !important; } - -/* Controls: exact border and shadow from template */ -.controls, .avz-controls { border: 1px solid #e5e5e5 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; } - -/* Inputs: lighter border to match template */ -.avz-input { border: 1px solid #d9dfe6 !important; background: #ffffff !important; } - -/* Buttons: ensure flat, no gradients and consistent height */ -.avz-submit { background-color: #2563eb !important; background-image: none !important; height: 44px !important; padding: 0 18px !important; } - -/* Subtle global smoothing to reduce antialiasing diffs */ -* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -/* High-specificity hook to override library rules */ -html body .avz-prejoin-container .avz-controls .avz-control-btn, -html body .avz-controls .avz-control-btn, -html body .controls .control-btn { - background: transparent !important; - border: none !important; - color: #666666 !important; - box-shadow: none !important; -} - -/* End micro-adjustment pass 4 */ diff --git a/packages/avanza-ui/src/tokens.css b/packages/avanza-ui/src/tokens.css deleted file mode 100644 index 6c000b0..0000000 --- a/packages/avanza-ui/src/tokens.css +++ /dev/null @@ -1,83 +0,0 @@ -:root { - /* Colors */ - --color-bg: #ffffff; - --color-text: #1a1a1a; - --color-muted: #666666; - --color-video-bg: #0a0a1a; - --color-badge-bg: rgba(99, 102, 241, 0.9); /* #6366f1 @ 0.9 */ - - --color-mic-bg: #f8f9fa; - --color-muted-light: #e8e8e8; - --color-mic-from: #22c55e; - --color-mic-to: #86efac; - - --color-control-border: #e5e5e5; - --color-control-hover-bg: #fee2e2; - --color-control-disabled-bg: #fecaca; - --color-control-disabled-text: #dc2626; - - --color-kbd-bg: #374151; - --color-info: #3b82f6; - - --color-input-border: #d1d5db; - --color-input-placeholder: #9ca3af; - - --color-submit: #2563eb; - --color-submit-hover: #1d4ed8; - --color-submit-active: #1e40af; - - /* Typography */ - --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; - --fs-h1: 1.75rem; /* 28px */ - --fs-body: 0.875rem; /* 14px */ - --fs-small: 0.6875rem; /* 11px */ - --fs-btn: 0.8125rem; /* 13px */ - --fs-submit: 0.9375rem; /* 15px */ - - /* Radii */ - --radius-lg: 12px; - --radius-md: 8px; - --radius-pill: 20px; - --radius-meter: 16px; - - /* Layout */ - --container-max-width: 628px; - --gap-default: 16px; - - /* Shadows */ - --shadow-controls: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); - - /* Misc */ - --kbd-padding: 2px 6px; -} - -/* Small helper utilities used by avanza-ui components when not using Tailwind */ -.avz-kbd { - background-color: var(--color-kbd-bg); - padding: var(--kbd-padding); - border-radius: 3px; - font-family: monospace; - font-size: var(--fs-small); - color: #fff; -} - -.avz-badge { - background: var(--color-badge-bg); - color: #fff; - padding: 8px 20px; - border-radius: var(--radius-pill); - font-size: 0.875rem; - font-weight: 500; -} - -.avz-preview { - background: var(--color-video-bg); - border-radius: var(--radius-lg); - overflow: hidden; - position: relative; -} - -.avz-control-shadow { - box-shadow: var(--shadow-controls); -} - diff --git a/packages/avanza-ui/src/tokens.ts b/packages/avanza-ui/src/tokens.ts deleted file mode 100644 index 2385589..0000000 --- a/packages/avanza-ui/src/tokens.ts +++ /dev/null @@ -1,46 +0,0 @@ -export const tokens = { - colors: { - bg: '#ffffff', - text: '#1a1a1a', - muted: '#666666', - videoBg: '#0a0a1a', - badgeBg: 'rgba(99,102,241,0.9)', - micFrom: '#22c55e', - micTo: '#86efac', - controlBorder: '#e5e5e5', - controlHoverBg: '#fee2e2', - controlDisabledBg: '#fecaca', - controlDisabledText: '#dc2626', - kbdBg: '#374151', - info: '#3b82f6', - inputBorder: '#d1d5db', - inputPlaceholder: '#9ca3af', - submit: '#2563eb', - submitHover: '#1d4ed8', - submitActive: '#1e40af', - }, - radii: { - lg: '12px', - md: '8px', - pill: '20px', - meter: '16px', - }, - sizes: { - containerMaxWidth: '628px', - gapDefault: '16px', - }, - typography: { - fontSans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", - fsH1: '1.75rem', - fsBody: '0.875rem', - fsSmall: '0.6875rem', - fsBtn: '0.8125rem', - fsSubmit: '0.9375rem', - }, - shadows: { - controls: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)', - }, -} as const; - -export type Tokens = typeof tokens; - diff --git a/packages/avanza-ui/src/utils/platform.ts b/packages/avanza-ui/src/utils/platform.ts deleted file mode 100644 index d7ea301..0000000 --- a/packages/avanza-ui/src/utils/platform.ts +++ /dev/null @@ -1,33 +0,0 @@ -// Utility to detect platform and provide modifier key label -export const isBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined'; - -export function isMacPlatform(): boolean { - if (!isBrowser) return false; - const platform = navigator.platform || ''; - const ua = navigator.userAgent || ''; - return /Mac|iPhone|iPad|iPod/i.test(platform) || /Macintosh/i.test(ua); -} - -export function isWindowsPlatform(): boolean { - if (!isBrowser) return false; - const platform = navigator.platform || ''; - return /Win(dows)?/i.test(platform); -} - -export function isLinuxPlatform(): boolean { - if (!isBrowser) return false; - const platform = navigator.platform || ''; - return /Linux|X11/i.test(platform) && !/Android/i.test(navigator.userAgent || ''); -} - -export function modifierKeyLabel(): { key: 'Meta' | 'Ctrl'; display: string } { - return isMacPlatform() ? { key: 'Meta', display: '⌘' } : { key: 'Ctrl', display: 'CTRL' }; -} - -export default { - isMacPlatform, - isWindowsPlatform, - isLinuxPlatform, - modifierKeyLabel, -}; -