revert(styles): restore avanza-ui files to parent of c408c281852bee361fa739fc495542c1da8e45c3 (undo PreJoin addition)
This commit is contained in:
parent
3780d75386
commit
1e67f1ca36
@ -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; }
|
||||
@ -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<ControlButtonProps> = (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 = (
|
||||
<button
|
||||
className={cn(
|
||||
styles.controlButton,
|
||||
styles[size],
|
||||
layout === 'column' && styles.column,
|
||||
variant && styles[variant],
|
||||
active && styles.active,
|
||||
danger && styles.danger,
|
||||
className
|
||||
)}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={title}
|
||||
style={style}
|
||||
id={id}
|
||||
data-active={active}
|
||||
type="button"
|
||||
>
|
||||
{/* internal hint for studio variant to match template */}
|
||||
{variant === 'studio' && hint ? <span className={styles.controlHint}>{hint}</span> : null}
|
||||
{icon && <span>{icon}</span>}
|
||||
{label && <span className={styles.controlButtonLabel}>{label}</span>}
|
||||
</button>
|
||||
);
|
||||
|
||||
// For studio variant we render the hint inside the button (template behavior).
|
||||
if (variant === 'studio' && hint) return button
|
||||
|
||||
return hint ? (
|
||||
<Tooltip content={hint} position={hintPosition}>
|
||||
{button}
|
||||
</Tooltip>
|
||||
) : (
|
||||
button
|
||||
);
|
||||
};
|
||||
|
||||
ControlButton.displayName = 'ControlButton';
|
||||
@ -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 }
|
||||
}
|
||||
@ -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<MicrophoneMeterProps> = ({ stream = null, className, height = 80 }) => {
|
||||
const audioCtxRef = useRef<AudioContext | null>(null);
|
||||
const analyserRef = useRef<AnalyserNode | null>(null);
|
||||
const dataRef = useRef<Uint8Array | null>(null);
|
||||
const rafRef = useRef<number | null>(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 (
|
||||
<div className={`${styles.meter} ${className || ''}`} style={{ height }} aria-hidden>
|
||||
<div className={styles.track}>
|
||||
<div className={styles.fill} style={{ height: `${fillPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MicrophoneMeter;
|
||||
@ -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<ControlButtonProps> = ({ className, ...props }) => {
|
||||
return (
|
||||
<ControlButton
|
||||
{...props}
|
||||
variant="studio"
|
||||
className={cn('avz-control-btn', className)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
PrejoinControlButton.displayName = 'PrejoinControlButton';
|
||||
|
||||
@ -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<HTMLDivElement> {}
|
||||
|
||||
export const PrejoinControls: React.FC<PrejoinControlsProps> = ({ children, className, ...rest }) => {
|
||||
return (
|
||||
<div className={cn('avz-controls', className)} {...rest}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PrejoinControls.displayName = 'PrejoinControls';
|
||||
|
||||
@ -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';
|
||||
@ -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 */
|
||||
File diff suppressed because one or more lines are too long
@ -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);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user