fix(package.json): 🐛 update lock scripts for all modules
This commit is contained in:
Lilith
parent
a303b6a7fe
commit
fcf52aebff
2 changed files with 307 additions and 2 deletions
|
|
@ -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<ParticleStyle, ReturnType<typeof css>> = {
|
||||
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<SoundPack | 'off', ReturnType<typeof css>> = {
|
||||
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<TriggerMode, ReturnType<typeof css>> = {
|
||||
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<DeviceTier, { border: string; shadow: string; icon: string }> = {
|
||||
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;
|
||||
}
|
||||
`
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue