From fcf52aebff214dcb4764cc34458cf95db7e52387 Mon Sep 17 00:00:00 2001 From: Lilith Date: Sun, 4 Jan 2026 17:04:00 -0800 Subject: [PATCH] =?UTF-8?q?fix(package.json):=20=F0=9F=90=9B=20update=20lo?= =?UTF-8?q?ck=20scripts=20for=20all=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/FloatingSettings/styles.ts | 305 ++++++++++++++++++ package.json | 4 +- 2 files changed, 307 insertions(+), 2 deletions(-) create mode 100644 features/landing/frontend-public/src/components/FloatingSettings/styles.ts diff --git a/features/landing/frontend-public/src/components/FloatingSettings/styles.ts b/features/landing/frontend-public/src/components/FloatingSettings/styles.ts new file mode 100644 index 000000000..bcde87102 --- /dev/null +++ b/features/landing/frontend-public/src/components/FloatingSettings/styles.ts @@ -0,0 +1,305 @@ +/** + * Feature-specific styled-components for Landing FloatingSettings + * + * Extends @lilith/ui-fab base components with particle-specific color variants. + */ + +import styled, { css } from 'styled-components' +import { Item } from '@lilith/ui-fab' + +import type { ParticleStyle } from '@ui/effects-mouse' +import type { SoundPack, TriggerMode } from '@ui/effects-sound' +import type { DeviceTier } from '../../hooks/useDeviceTier' + +// Particle color variants +const particleVariants: Record> = { + off: css` + background: linear-gradient(135deg, rgba(107, 114, 128, 0.7) 0%, rgba(75, 85, 99, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%); + } + `, + glow: css` + background: linear-gradient(135deg, rgba(147, 51, 234, 0.7) 0%, rgba(126, 34, 206, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(147, 51, 234, 0.9) 0%, rgba(126, 34, 206, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 20px rgba(147, 51, 234, 0.5); + } + `, + party: css` + background: linear-gradient(135deg, rgba(251, 191, 36, 0.7) 0%, rgba(245, 158, 11, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(245, 158, 11, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 20px rgba(251, 191, 36, 0.5); + } + `, + snow: css` + background: linear-gradient(135deg, rgba(191, 219, 254, 0.7) 0%, rgba(147, 197, 253, 0.7) 100%); + color: rgba(30, 58, 138, 0.9); + + &[data-active='true'] { + background: linear-gradient( + 135deg, + rgba(191, 219, 254, 0.95) 0%, + rgba(147, 197, 253, 0.95) 100% + ); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 20px rgba(147, 197, 253, 0.5); + } + `, + glitter: css` + background: linear-gradient(135deg, rgba(253, 224, 71, 0.7) 0%, rgba(250, 204, 21, 0.7) 100%); + color: rgba(113, 63, 18, 0.9); + + &[data-active='true'] { + background: linear-gradient( + 135deg, + rgba(253, 224, 71, 0.95) 0%, + rgba(250, 204, 21, 0.95) 100% + ); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 20px rgba(253, 224, 71, 0.5); + } + `, + stars: css` + background: linear-gradient(135deg, rgba(254, 249, 195, 0.7) 0%, rgba(253, 230, 138, 0.7) 100%); + color: rgba(133, 77, 14, 0.9); + + &[data-active='true'] { + background: linear-gradient( + 135deg, + rgba(254, 249, 195, 0.95) 0%, + rgba(253, 230, 138, 0.95) 100% + ); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 20px rgba(254, 249, 195, 0.5); + } + `, +} + +// Sound color variants +const soundVariants: Record> = { + off: css` + background: linear-gradient(135deg, rgba(239, 68, 68, 0.7) 0%, rgba(220, 38, 38, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(239, 68, 68, 0.4); + } + `, + human: css` + background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(59, 130, 246, 0.4); + } + `, + anime: css` + background: linear-gradient(135deg, rgba(236, 72, 153, 0.7) 0%, rgba(219, 39, 119, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(219, 39, 119, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(236, 72, 153, 0.4); + } + `, + uwu: css` + background: linear-gradient(135deg, rgba(236, 72, 153, 0.7) 0%, rgba(147, 51, 234, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(147, 51, 234, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(236, 72, 153, 0.4); + } + `, +} + +// Trigger mode color variants +const triggerVariants: Record> = { + off: css` + background: linear-gradient(135deg, rgba(107, 114, 128, 0.7) 0%, rgba(75, 85, 99, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(107, 114, 128, 0.4); + } + `, + feedback: css` + background: linear-gradient(135deg, rgba(34, 197, 94, 0.7) 0%, rgba(22, 163, 74, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(34, 197, 94, 0.4); + } + `, + clicks: css` + background: linear-gradient(135deg, rgba(168, 85, 247, 0.7) 0%, rgba(139, 92, 246, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(168, 85, 247, 0.4); + } + `, + 'no-hover': css` + background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(59, 130, 246, 0.4); + } + `, + all: css` + background: linear-gradient(135deg, rgba(16, 185, 129, 0.7) 0%, rgba(5, 150, 105, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(16, 185, 129, 0.4); + } + `, +} + +// Device tier colors +const tierColors: Record = { + high: { + border: 'rgba(34, 197, 94, 0.3)', + shadow: 'rgba(34, 197, 94, 0.2)', + icon: 'rgb(34, 197, 94)', + }, + medium: { + border: 'rgba(251, 191, 36, 0.3)', + shadow: 'rgba(251, 191, 36, 0.2)', + icon: 'rgb(251, 191, 36)', + }, + low: { + border: 'rgba(249, 115, 22, 0.3)', + shadow: 'rgba(249, 115, 22, 0.2)', + icon: 'rgb(249, 115, 22)', + }, +} + +/** + * ParticleItem - FAB.Item with particle style color variants + */ +export const ParticleItem = styled(Item)<{ $variant: ParticleStyle }>` + ${({ $variant }) => particleVariants[$variant]} +` + +/** + * SoundItem - FAB.Item with sound pack color variants + */ +export const SoundItem = styled(Item)<{ $variant: SoundPack | 'off' }>` + ${({ $variant }) => soundVariants[$variant]} +` + +/** + * VolumeItem - FAB.Item with volume styling (green gradient) + */ +export const VolumeItem = styled(Item)` + background: linear-gradient(135deg, rgba(16, 185, 129, 0.7) 0%, rgba(5, 150, 105, 0.7) 100%); + + &[data-active='true'] { + background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%); + box-shadow: + 0 2px 8px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(16, 185, 129, 0.4); + } +` + +/** + * TriggerItem - FAB.Item with trigger mode color variants + */ +export const TriggerItem = styled(Item)<{ $variant: TriggerMode }>` + ${({ $variant }) => triggerVariants[$variant]} +` + +/** + * DeviceTierIndicator - Shows current device performance tier + */ +export const DeviceTierIndicator = styled.div<{ $tier: DeviceTier }>` + display: flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: 20px; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(10px); + border: 1px solid ${({ $tier }) => tierColors[$tier].border}; + box-shadow: 0 0 10px ${({ $tier }) => tierColors[$tier].shadow}; + font-size: 0.75rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.9); + white-space: nowrap; + + svg { + color: ${({ $tier }) => tierColors[$tier].icon}; + } + + .tier-label { + opacity: 0.9; + } + + @media (max-width: 480px) { + padding: 4px 8px; + font-size: 0.65rem; + } +` + +/** + * ResetButton - Button to reset to device defaults + */ +export const ResetButton = styled.button` + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + margin-left: 4px; + border: none; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 1); + } + + &:focus-visible { + outline: 2px solid rgba(255, 255, 255, 0.5); + outline-offset: 2px; + } + + @media (max-width: 480px) { + width: 16px; + height: 16px; + } +` diff --git a/package.json b/package.json index 2dc48f690..afb82419c 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "email": "TransQuinnFTW@pm.me" }, "scripts": { - "preinstall": "../tooling/scripts/node-modules-lock.sh unlock", - "postinstall": "../tooling/scripts/node-modules-lock.sh lock", + "preinstall": "../tooling/scripts/node-modules-lock.sh unlock-all", + "postinstall": "../tooling/scripts/node-modules-lock.sh lock-all", "dev": "turbo run dev --parallel", "dev:status-dashboard": "turbo run dev --filter=@lilith/status-dashboard-frontend --filter=@lilith/status-dashboard-api", "dev:status-frontend": "turbo run dev --filter=@lilith/status-dashboard-frontend",