@mhmo91/schmancy 0.9.6 → 0.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +6 -3
- package/mixins/baseElement.ts +0 -190
- package/mixins/constructor.ts +0 -3
- package/mixins/discovery.service.ts +0 -221
- package/mixins/formField.mixin.ts +0 -255
- package/mixins/index.ts +0 -7
- package/mixins/litElement.mixin.ts +0 -15
- package/mixins/scss.d.ts +0 -21
- package/mixins/surface.mixin.ts +0 -93
- package/mixins/tailwind.css +0 -560
- package/mixins/tailwind.mixin.ts +0 -30
package/mixins/index.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { CSSResult, LitElement } from 'lit'
|
|
2
|
-
import { TailwindElement } from './tailwind.mixin'
|
|
3
|
-
import { BaseElement, IBaseMixin } from './baseElement'
|
|
4
|
-
import { Constructor } from './constructor'
|
|
5
|
-
|
|
6
|
-
export const $LitElement = <T extends CSSResult>(componentStyle?: T) => {
|
|
7
|
-
class TailwindMixinClass extends BaseElement(TailwindElement(componentStyle)) {
|
|
8
|
-
disconnectedCallback = () => {
|
|
9
|
-
super.disconnectedCallback()
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
return TailwindMixinClass as CustomElementConstructor &
|
|
13
|
-
Constructor<LitElement> &
|
|
14
|
-
Constructor<IBaseMixin> /* see "typing the subclass" below */
|
|
15
|
-
}
|
package/mixins/scss.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
declare module '*.scss?inline' {
|
|
2
|
-
import { type CSSResult } from 'lit'
|
|
3
|
-
const styles: CSSResult
|
|
4
|
-
export default styles
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
declare module '*.module.scss' {
|
|
8
|
-
const classes: Record<string, string>
|
|
9
|
-
export default classes
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
declare module '*.css?inline' {
|
|
13
|
-
import { type CSSResult } from 'lit'
|
|
14
|
-
const styles: CSSResult
|
|
15
|
-
export default styles
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declare module '*.module.css' {
|
|
19
|
-
const classes: Record<string, string>
|
|
20
|
-
export default classes
|
|
21
|
-
}
|
package/mixins/surface.mixin.ts
DELETED
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import type { Constructor } from './constructor'
|
|
2
|
-
import { CSSResultGroup, CSSResultOrNative, LitElement } from 'lit'
|
|
3
|
-
import { property } from 'lit/decorators.js'
|
|
4
|
-
import type { TSurfaceColor } from '../src/types/surface'
|
|
5
|
-
import { surfaceStyles } from '../src/surface/surface.styles'
|
|
6
|
-
|
|
7
|
-
export type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'
|
|
8
|
-
export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all'
|
|
9
|
-
export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5
|
|
10
|
-
|
|
11
|
-
export declare class ISurfaceMixin {
|
|
12
|
-
fill: SchmancySurfaceFill
|
|
13
|
-
rounded: SchmancySurfaceRounded
|
|
14
|
-
elevation: SchmancySurfaceElevation
|
|
15
|
-
type: TSurfaceColor
|
|
16
|
-
clickable: boolean
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* SurfaceMixin - Adds surface styling properties AND styles to any LitElement
|
|
21
|
-
*
|
|
22
|
-
* Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.
|
|
23
|
-
* This is the recommended pattern for mixins that need to add styles.
|
|
24
|
-
*
|
|
25
|
-
* Provides these reflected properties:
|
|
26
|
-
* - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions
|
|
27
|
-
* - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
|
|
28
|
-
* - `elevation`: 0-5 - Shadow depth level
|
|
29
|
-
* - `type`: TSurfaceColor - Surface color variant (26+ options)
|
|
30
|
-
*
|
|
31
|
-
* Usage:
|
|
32
|
-
* ```typescript
|
|
33
|
-
* import { SurfaceMixin } from '@mixins/surface.mixin'
|
|
34
|
-
*
|
|
35
|
-
* @customElement('my-component')
|
|
36
|
-
* class MyComponent extends SurfaceMixin(TailwindElement(css`
|
|
37
|
-
* :host { display: block; }
|
|
38
|
-
* `)) {
|
|
39
|
-
* // Component now has type, fill, rounded, elevation properties
|
|
40
|
-
* // AND surfaceStyles are automatically included
|
|
41
|
-
* }
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
export const SurfaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {
|
|
45
|
-
class SurfaceMixinClass extends superClass {
|
|
46
|
-
/**
|
|
47
|
-
* Override finalizeStyles to inject surfaceStyles.
|
|
48
|
-
* This is the Lit-recommended way for mixins to add styles.
|
|
49
|
-
*/
|
|
50
|
-
protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
|
|
51
|
-
// Get parent's finalized styles using LitElement's method
|
|
52
|
-
const parentStyles = (superClass as unknown as typeof LitElement).finalizeStyles(styles)
|
|
53
|
-
// Append surfaceStyles at the end (higher specificity)
|
|
54
|
-
return [...parentStyles, surfaceStyles as CSSResultOrNative]
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Fill the width and/or height of the parent container.
|
|
59
|
-
* @default 'auto'
|
|
60
|
-
*/
|
|
61
|
-
@property({ type: String, reflect: true })
|
|
62
|
-
fill: SchmancySurfaceFill = 'auto'
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Specifies the rounding style of the component's corners.
|
|
66
|
-
* @default 'none'
|
|
67
|
-
*/
|
|
68
|
-
@property({ reflect: true })
|
|
69
|
-
rounded: SchmancySurfaceRounded = 'none'
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Defines the elevation level (shadow depth) of the surface.
|
|
73
|
-
* @default 0
|
|
74
|
-
*/
|
|
75
|
-
@property({ type: Number, reflect: true })
|
|
76
|
-
elevation: SchmancySurfaceElevation = 0
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* Specifies the surface type for styling.
|
|
80
|
-
* @default 'container'
|
|
81
|
-
*/
|
|
82
|
-
@property({ reflect: true })
|
|
83
|
-
type: TSurfaceColor = 'subtle'
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Makes the surface interactive with hover, active states and cursor pointer.
|
|
87
|
-
* @default false
|
|
88
|
-
*/
|
|
89
|
-
@property({ type: Boolean, reflect: true })
|
|
90
|
-
clickable = false
|
|
91
|
-
}
|
|
92
|
-
return SurfaceMixinClass as Constructor<ISurfaceMixin> & T
|
|
93
|
-
}
|
package/mixins/tailwind.css
DELETED
|
@@ -1,560 +0,0 @@
|
|
|
1
|
-
@import 'tailwindcss';
|
|
2
|
-
|
|
3
|
-
/* Cascade-layer order contract. Consumer (unlayered) CSS always overrides
|
|
4
|
-
library styles regardless of specificity. Library-internal tokens and
|
|
5
|
-
components live in named layers so consumers can target them precisely. */
|
|
6
|
-
@layer schmancy.tokens, schmancy.base, schmancy.components;
|
|
7
|
-
|
|
8
|
-
@layer schmancy.base {
|
|
9
|
-
:host,
|
|
10
|
-
:root {
|
|
11
|
-
font-family: var(--schmancy-font-family);
|
|
12
|
-
/* Advertise both schemes so UA form controls, scrollbars, and
|
|
13
|
-
`light-dark()` all render correctly until a theme resolves it. */
|
|
14
|
-
color-scheme: light dark;
|
|
15
|
-
}
|
|
16
|
-
:host,
|
|
17
|
-
:host *,
|
|
18
|
-
* {
|
|
19
|
-
/* pan-x pan-y allows scrolling but disables pinch-zoom */
|
|
20
|
-
touch-action: pan-x pan-y;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/* Interactive: luminous lift on hover, spring compress on active */
|
|
24
|
-
.interactive {
|
|
25
|
-
transition:
|
|
26
|
-
transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
27
|
-
box-shadow 400ms ease,
|
|
28
|
-
filter 200ms ease;
|
|
29
|
-
}
|
|
30
|
-
.interactive:hover {
|
|
31
|
-
transform: translateY(-1px);
|
|
32
|
-
filter: brightness(1.03);
|
|
33
|
-
box-shadow: 0 4px 20px -6px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 18%, transparent);
|
|
34
|
-
}
|
|
35
|
-
.interactive:active {
|
|
36
|
-
transform: scale(0.97);
|
|
37
|
-
filter: brightness(0.96);
|
|
38
|
-
box-shadow: none;
|
|
39
|
-
transition-duration: 100ms;
|
|
40
|
-
}
|
|
41
|
-
@media (prefers-reduced-motion: reduce) {
|
|
42
|
-
.interactive { transition: filter 150ms ease; }
|
|
43
|
-
.interactive:hover { transform: none; box-shadow: none; }
|
|
44
|
-
.interactive:active { transform: none; }
|
|
45
|
-
}
|
|
46
|
-
@theme inline {
|
|
47
|
-
--md-ref-typeface-brand: var(--schmancy-font-family);
|
|
48
|
-
--md-ref-typeface-plain: var(--schmancy-font-family);
|
|
49
|
-
--md-sys-color-primary: var(--schmancy-sys-color-primary-default);
|
|
50
|
-
--md-sys-color-secondary: var(--schmancy-sys-color-secondary-default);
|
|
51
|
-
|
|
52
|
-
--*: initial;
|
|
53
|
-
--border-style: solid;
|
|
54
|
-
--spacing: 4px;
|
|
55
|
-
--color-scrim: var(--schmancy-sys-color-scrim);
|
|
56
|
-
--color-outline-default: var(--schmancy-sys-color-outline);
|
|
57
|
-
--color-outline-variant: var(--schmancy-sys-color-outlineVariant);
|
|
58
|
-
/* Shorthand alias */
|
|
59
|
-
--color-outline: var(--schmancy-sys-color-outline);
|
|
60
|
-
--color-surface-default: var(--schmancy-sys-color-surface-default);
|
|
61
|
-
--color-surface-dim: var(--schmancy-sys-color-surface-dim);
|
|
62
|
-
--color-surface-bright: var(--schmancy-sys-color-surface-bright);
|
|
63
|
-
--color-surface-container: var(--schmancy-sys-color-surface-container);
|
|
64
|
-
--color-surface-low: var(--schmancy-sys-color-surface-low);
|
|
65
|
-
--color-surface-high: var(--schmancy-sys-color-surface-high);
|
|
66
|
-
--color-surface-highest: var(--schmancy-sys-color-surface-highest);
|
|
67
|
-
--color-surface-lowest: var(--schmancy-sys-color-surface-lowest);
|
|
68
|
-
/* CamelCase variants for Tailwind compatibility */
|
|
69
|
-
--color-surface-containerLow: var(--schmancy-sys-color-surface-containerLow);
|
|
70
|
-
--color-surface-containerHigh: var(--schmancy-sys-color-surface-containerHigh);
|
|
71
|
-
--color-surface-containerLowest: var(--schmancy-sys-color-surface-containerLowest);
|
|
72
|
-
--color-surface-containerHighest: var(--schmancy-sys-color-surface-containerHighest);
|
|
73
|
-
--color-surface-on: var(--schmancy-sys-color-surface-on);
|
|
74
|
-
--color-surface-on-variant: var(--schmancy-sys-color-surface-onVariant);
|
|
75
|
-
--color-primary-default: var(--schmancy-sys-color-primary-default);
|
|
76
|
-
--color-primary-on: var(--schmancy-sys-color-primary-on);
|
|
77
|
-
--color-primary-container: var(--schmancy-sys-color-primary-container);
|
|
78
|
-
--color-primary-on-container: var(--schmancy-sys-color-primary-onContainer);
|
|
79
|
-
--color-secondary-default: var(--schmancy-sys-color-secondary-default);
|
|
80
|
-
--color-secondary-on: var(--schmancy-sys-color-secondary-on);
|
|
81
|
-
--color-secondary-container: var(--schmancy-sys-color-secondary-container);
|
|
82
|
-
--color-secondary-on-container: var(--schmancy-sys-color-secondary-onContainer);
|
|
83
|
-
--color-tertiary-default: var(--schmancy-sys-color-tertiary-default);
|
|
84
|
-
--color-tertiary-on: var(--schmancy-sys-color-tertiary-on);
|
|
85
|
-
--color-tertiary-container: var(--schmancy-sys-color-tertiary-container);
|
|
86
|
-
--color-tertiary-on-container: var(--schmancy-sys-color-tertiary-onContainer);
|
|
87
|
-
--color-error-default: var(--schmancy-sys-color-error-default);
|
|
88
|
-
--color-error-on: var(--schmancy-sys-color-error-on);
|
|
89
|
-
--color-error-container: var(--schmancy-sys-color-error-container);
|
|
90
|
-
--color-error-on-container: var(--schmancy-sys-color-error-onContainer);
|
|
91
|
-
--color-success-default: var(--schmancy-sys-color-success-default);
|
|
92
|
-
--color-success-on: var(--schmancy-sys-color-success-on);
|
|
93
|
-
--color-success-container: var(--schmancy-sys-color-success-container);
|
|
94
|
-
--color-success-on-container: var(--schmancy-sys-color-success-onContainer);
|
|
95
|
-
--color-warning-default: var(--schmancy-sys-color-warning-default);
|
|
96
|
-
--color-warning-on: var(--schmancy-sys-color-warning-on);
|
|
97
|
-
--color-warning-container: var(--schmancy-sys-color-warning-container);
|
|
98
|
-
--color-warning-on-container: var(--schmancy-sys-color-warning-onContainer);
|
|
99
|
-
--color-info-default: var(--schmancy-sys-color-info-default);
|
|
100
|
-
--color-info-on: var(--schmancy-sys-color-info-on);
|
|
101
|
-
--color-info-container: var(--schmancy-sys-color-info-container);
|
|
102
|
-
--color-info-on-container: var(--schmancy-sys-color-info-onContainer);
|
|
103
|
-
|
|
104
|
-
/* DEPRECATED: camelCase aliases for backward compatibility - use hyphenated format instead */
|
|
105
|
-
--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);
|
|
106
|
-
--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);
|
|
107
|
-
--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);
|
|
108
|
-
--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);
|
|
109
|
-
--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);
|
|
110
|
-
--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);
|
|
111
|
-
--color-success-onContainer: var(--schmancy-sys-color-success-onContainer);
|
|
112
|
-
--color-warning-onContainer: var(--schmancy-sys-color-warning-onContainer);
|
|
113
|
-
--color-info-onContainer: var(--schmancy-sys-color-info-onContainer);
|
|
114
|
-
|
|
115
|
-
/* Shorthand aliases (maps to -default variant) */
|
|
116
|
-
--color-primary: var(--schmancy-sys-color-primary-default);
|
|
117
|
-
--color-secondary: var(--schmancy-sys-color-secondary-default);
|
|
118
|
-
--color-tertiary: var(--schmancy-sys-color-tertiary-default);
|
|
119
|
-
--color-error: var(--schmancy-sys-color-error-default);
|
|
120
|
-
--color-success: var(--schmancy-sys-color-success-default);
|
|
121
|
-
--color-warning: var(--schmancy-sys-color-warning-default);
|
|
122
|
-
--color-info: var(--schmancy-sys-color-info-default);
|
|
123
|
-
--color-surface: var(--schmancy-sys-color-surface-default);
|
|
124
|
-
|
|
125
|
-
--shadow-0: var(--schmancy-sys-elevation-0);
|
|
126
|
-
--shadow-1: var(--schmancy-sys-elevation-1);
|
|
127
|
-
--shadow-2: var(--schmancy-sys-elevation-2);
|
|
128
|
-
--shadow-3: var(--schmancy-sys-elevation-3);
|
|
129
|
-
--shadow-4: var(--schmancy-sys-elevation-4);
|
|
130
|
-
--shadow-5: var(--schmancy-sys-elevation-5);
|
|
131
|
-
--outline-1: var(--schmancy-sys-outline-1);
|
|
132
|
-
|
|
133
|
-
/* Luminous glow elevation — light-based depth for futuristic UI
|
|
134
|
-
Use shadow-glow-{1-5} classes. Glow intensifies with level. */
|
|
135
|
-
--shadow-glow-1: 0 2px 12px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent);
|
|
136
|
-
--shadow-glow-2: 0 4px 20px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 22%, transparent);
|
|
137
|
-
--shadow-glow-3: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 28%, transparent);
|
|
138
|
-
--shadow-glow-4: 0 12px 44px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 35%, transparent);
|
|
139
|
-
--shadow-glow-5: 0 20px 60px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 42%, transparent);
|
|
140
|
-
--font-sans:
|
|
141
|
-
var(--schmancy-font-family), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
142
|
-
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
143
|
-
--font-serif: var(--schmancy-font-family), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
|
144
|
-
--font-mono:
|
|
145
|
-
var(--schmancy-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
|
146
|
-
'Courier New', monospace;
|
|
147
|
-
--color-black: #000;
|
|
148
|
-
--color-white: #fff;
|
|
149
|
-
--spacing: 0.25rem;
|
|
150
|
-
--breakpoint-sm: 40rem;
|
|
151
|
-
--breakpoint-md: 48rem;
|
|
152
|
-
--breakpoint-lg: 64rem;
|
|
153
|
-
--breakpoint-xl: 80rem;
|
|
154
|
-
--breakpoint-2xl: 96rem;
|
|
155
|
-
--container-3xs: 16rem;
|
|
156
|
-
--container-2xs: 18rem;
|
|
157
|
-
--container-xs: 20rem;
|
|
158
|
-
--container-sm: 24rem;
|
|
159
|
-
--container-md: 28rem;
|
|
160
|
-
--container-lg: 32rem;
|
|
161
|
-
--container-xl: 36rem;
|
|
162
|
-
--container-2xl: 42rem;
|
|
163
|
-
--container-3xl: 48rem;
|
|
164
|
-
--container-4xl: 56rem;
|
|
165
|
-
--container-5xl: 64rem;
|
|
166
|
-
--container-6xl: 72rem;
|
|
167
|
-
--container-7xl: 80rem;
|
|
168
|
-
--text-xs: 0.75rem;
|
|
169
|
-
--text-xs--line-height: calc(1 / 0.75);
|
|
170
|
-
--text-sm: 0.875rem;
|
|
171
|
-
--text-sm--line-height: calc(1.25 / 0.875);
|
|
172
|
-
--text-base: 1rem;
|
|
173
|
-
--text-base--line-height: calc(1.5 / 1);
|
|
174
|
-
--text-lg: 1.125rem;
|
|
175
|
-
--text-lg--line-height: calc(1.75 / 1.125);
|
|
176
|
-
--text-xl: 1.25rem;
|
|
177
|
-
--text-xl--line-height: calc(1.75 / 1.25);
|
|
178
|
-
--text-2xl: 1.5rem;
|
|
179
|
-
--text-2xl--line-height: calc(2 / 1.5);
|
|
180
|
-
--text-3xl: 1.875rem;
|
|
181
|
-
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
182
|
-
--text-4xl: 2.25rem;
|
|
183
|
-
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
184
|
-
--text-5xl: 3rem;
|
|
185
|
-
--text-5xl--line-height: 1;
|
|
186
|
-
--text-6xl: 3.75rem;
|
|
187
|
-
--text-6xl--line-height: 1;
|
|
188
|
-
--text-7xl: 4.5rem;
|
|
189
|
-
--text-7xl--line-height: 1;
|
|
190
|
-
--text-8xl: 6rem;
|
|
191
|
-
--text-8xl--line-height: 1;
|
|
192
|
-
--text-9xl: 8rem;
|
|
193
|
-
--text-9xl--line-height: 1;
|
|
194
|
-
--font-weight-thin: 100;
|
|
195
|
-
--font-weight-extralight: 200;
|
|
196
|
-
--font-weight-light: 300;
|
|
197
|
-
--font-weight-normal: 400;
|
|
198
|
-
--font-weight-medium: 500;
|
|
199
|
-
--font-weight-semibold: 600;
|
|
200
|
-
--font-weight-bold: 700;
|
|
201
|
-
--font-weight-extrabold: 800;
|
|
202
|
-
--font-weight-black: 900;
|
|
203
|
-
--tracking-tighter: -0.05em;
|
|
204
|
-
--tracking-tight: -0.025em;
|
|
205
|
-
--tracking-normal: 0em;
|
|
206
|
-
--tracking-wide: 0.025em;
|
|
207
|
-
--tracking-wider: 0.05em;
|
|
208
|
-
--tracking-widest: 0.1em;
|
|
209
|
-
--leading-tight: 1.25;
|
|
210
|
-
--leading-snug: 1.375;
|
|
211
|
-
--leading-normal: 1.5;
|
|
212
|
-
--leading-relaxed: 1.625;
|
|
213
|
-
--leading-loose: 2;
|
|
214
|
-
--radius-xs: 0.125rem;
|
|
215
|
-
--radius-sm: 0.25rem;
|
|
216
|
-
--radius-md: 0.375rem;
|
|
217
|
-
--radius-lg: 0.5rem;
|
|
218
|
-
--radius-xl: 0.75rem;
|
|
219
|
-
--radius-2xl: 1rem;
|
|
220
|
-
--radius-3xl: 1.5rem;
|
|
221
|
-
--radius-4xl: 2rem;
|
|
222
|
-
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
|
223
|
-
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
224
|
-
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
225
|
-
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
226
|
-
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
227
|
-
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
228
|
-
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
229
|
-
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
|
230
|
-
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
|
231
|
-
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
|
232
|
-
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
|
233
|
-
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
|
234
|
-
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
|
235
|
-
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
|
236
|
-
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
|
237
|
-
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
|
238
|
-
--blur-xs: 4px;
|
|
239
|
-
--blur-sm: 8px;
|
|
240
|
-
--blur-md: 12px;
|
|
241
|
-
--blur-lg: 16px;
|
|
242
|
-
--blur-xl: 24px;
|
|
243
|
-
--blur-2xl: 40px;
|
|
244
|
-
--blur-3xl: 64px;
|
|
245
|
-
--perspective-dramatic: 100px;
|
|
246
|
-
--perspective-near: 300px;
|
|
247
|
-
--perspective-normal: 500px;
|
|
248
|
-
--perspective-midrange: 800px;
|
|
249
|
-
--perspective-distant: 1200px;
|
|
250
|
-
--aspect-video: 16 / 9;
|
|
251
|
-
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
252
|
-
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
253
|
-
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
254
|
-
--animate-spin: spin 1s linear infinite;
|
|
255
|
-
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
256
|
-
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
257
|
-
--animate-bounce: bounce 1s infinite;
|
|
258
|
-
/* ========================================================================
|
|
259
|
-
ANIMATION SYSTEM
|
|
260
|
-
|
|
261
|
-
A comprehensive, reusable animation library organized by category.
|
|
262
|
-
All animations use CSS custom properties for easy customization.
|
|
263
|
-
|
|
264
|
-
NAMING CONVENTION:
|
|
265
|
-
- Entrance animations: *-in (fade-in, slide-in, pop-in)
|
|
266
|
-
- Exit animations: *-out (fade-out, slide-out)
|
|
267
|
-
- Looping animations: descriptive name (float, pulse, shimmer)
|
|
268
|
-
|
|
269
|
-
USAGE:
|
|
270
|
-
- Use `animate-{name}` class in Tailwind
|
|
271
|
-
- Combine with `opacity-0` for entrance animations
|
|
272
|
-
- Use `animation-delay` via style attribute for staggered effects
|
|
273
|
-
======================================================================== */
|
|
274
|
-
|
|
275
|
-
/* ------------------------------------------------------------------------
|
|
276
|
-
TAILWIND DEFAULT ANIMATIONS
|
|
277
|
-
Standard animations from Tailwind CSS
|
|
278
|
-
------------------------------------------------------------------------ */
|
|
279
|
-
@keyframes spin {
|
|
280
|
-
to { transform: rotate(360deg); }
|
|
281
|
-
}
|
|
282
|
-
@keyframes ping {
|
|
283
|
-
75%, 100% { transform: scale(2); opacity: 0; }
|
|
284
|
-
}
|
|
285
|
-
@keyframes pulse {
|
|
286
|
-
50% { opacity: 0.5; }
|
|
287
|
-
}
|
|
288
|
-
@keyframes bounce {
|
|
289
|
-
0%, 100% {
|
|
290
|
-
transform: translateY(-25%);
|
|
291
|
-
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
292
|
-
}
|
|
293
|
-
50% {
|
|
294
|
-
transform: none;
|
|
295
|
-
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
296
|
-
}
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
/* ------------------------------------------------------------------------
|
|
300
|
-
ENTRANCE ANIMATIONS
|
|
301
|
-
One-shot animations for elements entering the viewport.
|
|
302
|
-
All use `forwards` fill-mode to maintain end state.
|
|
303
|
-
------------------------------------------------------------------------ */
|
|
304
|
-
|
|
305
|
-
/* Fade In - Simple opacity transition */
|
|
306
|
-
--animate-fade-in: fade-in 0.5s ease forwards;
|
|
307
|
-
@keyframes fade-in {
|
|
308
|
-
from { opacity: 0; }
|
|
309
|
-
to { opacity: 1; }
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
/* Fade In Up - Fade with upward movement (subtle) */
|
|
313
|
-
--animate-fade-in-up: fade-in-up 0.5s ease forwards;
|
|
314
|
-
@keyframes fade-in-up {
|
|
315
|
-
from { opacity: 0; transform: translateY(20px); }
|
|
316
|
-
to { opacity: 1; transform: translateY(0); }
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
/* Fade In Up Large - Fade with larger upward movement + scale */
|
|
320
|
-
--animate-fade-in-up-lg: fade-in-up-lg 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
|
|
321
|
-
@keyframes fade-in-up-lg {
|
|
322
|
-
from { opacity: 0; transform: translateY(30px) scale(0.95); }
|
|
323
|
-
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
/* Slide In Left - Enter from left side */
|
|
327
|
-
--animate-slide-in-left: slide-in-left 0.5s ease forwards;
|
|
328
|
-
@keyframes slide-in-left {
|
|
329
|
-
from { opacity: 0; transform: translateX(-30px); }
|
|
330
|
-
to { opacity: 1; transform: translateX(0); }
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
/* Slide In Right - Enter from right side */
|
|
334
|
-
--animate-slide-in-right: slide-in-right 0.5s ease forwards;
|
|
335
|
-
@keyframes slide-in-right {
|
|
336
|
-
from { opacity: 0; transform: translateX(30px); }
|
|
337
|
-
to { opacity: 1; transform: translateX(0); }
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
/* Pop In - Scale up with bounce easing */
|
|
341
|
-
--animate-pop-in: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
342
|
-
@keyframes pop-in {
|
|
343
|
-
from { opacity: 0; transform: scale(0.8); }
|
|
344
|
-
to { opacity: 1; transform: scale(1); }
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
/* Expand In - Subtle scale + translate entrance */
|
|
348
|
-
--animate-expand-in: expand-in 0.5s ease forwards;
|
|
349
|
-
@keyframes expand-in {
|
|
350
|
-
from { opacity: 0; transform: scale(0.95) translateY(10px); }
|
|
351
|
-
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
/* Converge In - Dramatic entrance with overshoot */
|
|
355
|
-
--animate-converge-in: converge-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
356
|
-
@keyframes converge-in {
|
|
357
|
-
0% { opacity: 0; transform: scale(0) translateY(50px); }
|
|
358
|
-
60% { opacity: 1; transform: scale(1.1) translateY(-10px); }
|
|
359
|
-
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
/* Spin In - Rotate + scale entrance */
|
|
363
|
-
--animate-spin-in: spin-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
|
|
364
|
-
@keyframes spin-in {
|
|
365
|
-
from { opacity: 0; transform: scale(0) rotate(-180deg); }
|
|
366
|
-
to { opacity: 1; transform: scale(1) rotate(0deg); }
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
/* Scatter In - Scale from 0 to partial opacity (for decorative elements) */
|
|
370
|
-
--animate-scatter-in: scatter-in 1s ease forwards;
|
|
371
|
-
@keyframes scatter-in {
|
|
372
|
-
from { opacity: 0; transform: scale(0); }
|
|
373
|
-
to { opacity: 0.2; transform: scale(1); }
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
/* ------------------------------------------------------------------------
|
|
377
|
-
LOOPING ANIMATIONS - PULSE VARIANTS
|
|
378
|
-
Continuous pulsing effects for attention/status indicators.
|
|
379
|
-
------------------------------------------------------------------------ */
|
|
380
|
-
|
|
381
|
-
/* Pulse Opacity - Simple opacity pulse */
|
|
382
|
-
--animate-pulse-opacity: pulse-opacity 2s ease-in-out infinite;
|
|
383
|
-
@keyframes pulse-opacity {
|
|
384
|
-
0%, 100% { opacity: 1; }
|
|
385
|
-
50% { opacity: 0.5; }
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
/* Pulse Scale - Scale + opacity pulse (for status dots) */
|
|
389
|
-
--animate-pulse-scale: pulse-scale 1.5s ease infinite;
|
|
390
|
-
@keyframes pulse-scale {
|
|
391
|
-
0%, 100% { transform: scale(1); opacity: 1; }
|
|
392
|
-
50% { transform: scale(1.3); opacity: 0.6; }
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
/* Pulse Glow - Scale + dynamic box-shadow (for highlighted elements) */
|
|
396
|
-
--animate-pulse-glow: pulse-glow 2s ease infinite;
|
|
397
|
-
@keyframes pulse-glow {
|
|
398
|
-
0%, 100% {
|
|
399
|
-
transform: scale(1);
|
|
400
|
-
box-shadow: 0 0 20px var(--schmancy-sys-color-primary-default);
|
|
401
|
-
}
|
|
402
|
-
50% {
|
|
403
|
-
transform: scale(1.05);
|
|
404
|
-
box-shadow: 0 0 40px var(--schmancy-sys-color-primary-default);
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
/* Pulse Ring - Expanding ring effect (for ripples) */
|
|
409
|
-
--animate-pulse-ring: pulse-ring 2s ease-out infinite;
|
|
410
|
-
@keyframes pulse-ring {
|
|
411
|
-
0% { transform: scale(0.8); opacity: 0.6; }
|
|
412
|
-
100% { transform: scale(2); opacity: 0; }
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
/* ------------------------------------------------------------------------
|
|
416
|
-
LOOPING ANIMATIONS - FLOAT VARIANTS
|
|
417
|
-
Gentle floating/hovering effects for ambient motion.
|
|
418
|
-
------------------------------------------------------------------------ */
|
|
419
|
-
|
|
420
|
-
/* Float - Simple vertical float */
|
|
421
|
-
--animate-float: float 3s ease-in-out infinite;
|
|
422
|
-
@keyframes float {
|
|
423
|
-
0%, 100% { transform: translateY(0); }
|
|
424
|
-
50% { transform: translateY(-8px); }
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
/* Float Particle - Vertical float with scale + opacity (for particles) */
|
|
428
|
-
--animate-float-particle: float-particle 4s ease-in-out infinite;
|
|
429
|
-
@keyframes float-particle {
|
|
430
|
-
0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
|
|
431
|
-
50% { transform: translateY(-30px) scale(1.2); opacity: 0.3; }
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
/* Float Chaos - Multi-axis chaotic movement (for scattered elements) */
|
|
435
|
-
--animate-float-chaos: float-chaos 8s ease-in-out infinite;
|
|
436
|
-
@keyframes float-chaos {
|
|
437
|
-
0% { transform: translateY(0) rotate(0deg) scale(1); }
|
|
438
|
-
25% { transform: translateY(-30px) rotate(15deg) scale(1.1); }
|
|
439
|
-
50% { transform: translateY(-10px) rotate(-10deg) scale(0.95); }
|
|
440
|
-
75% { transform: translateY(-40px) rotate(8deg) scale(1.05); }
|
|
441
|
-
100% { transform: translateY(0) rotate(0deg) scale(1); }
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
/* ------------------------------------------------------------------------
|
|
445
|
-
LOOPING ANIMATIONS - ROTATION
|
|
446
|
-
Continuous rotation effects.
|
|
447
|
-
------------------------------------------------------------------------ */
|
|
448
|
-
|
|
449
|
-
/* Rotate Orbit - Slow continuous rotation (for orbital elements) */
|
|
450
|
-
--animate-rotate-orbit: rotate-orbit 20s linear infinite;
|
|
451
|
-
@keyframes rotate-orbit {
|
|
452
|
-
from { transform: rotate(0deg); }
|
|
453
|
-
to { transform: rotate(360deg); }
|
|
454
|
-
}
|
|
455
|
-
|
|
456
|
-
/* ------------------------------------------------------------------------
|
|
457
|
-
LOOPING ANIMATIONS - MOVEMENT EFFECTS
|
|
458
|
-
Horizontal/directional movement for progress/flow indicators.
|
|
459
|
-
------------------------------------------------------------------------ */
|
|
460
|
-
|
|
461
|
-
/* Shimmer - Left-to-right shine effect (use with overflow:hidden) */
|
|
462
|
-
--animate-shimmer: shimmer 2s ease-in-out infinite;
|
|
463
|
-
@keyframes shimmer {
|
|
464
|
-
0% { left: -100%; }
|
|
465
|
-
50%, 100% { left: 100%; }
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
/* Scan Vertical - Top-to-bottom scanning line */
|
|
469
|
-
--animate-scan-vertical: scan-vertical 2s ease-in-out infinite;
|
|
470
|
-
@keyframes scan-vertical {
|
|
471
|
-
0% { top: 0; opacity: 0; }
|
|
472
|
-
10% { opacity: 1; }
|
|
473
|
-
90% { opacity: 1; }
|
|
474
|
-
100% { top: 100%; opacity: 0; }
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
/* Scan Horizontal - Left-to-right scanning */
|
|
478
|
-
--animate-scan-horizontal: scan-horizontal 2s ease-in-out infinite;
|
|
479
|
-
@keyframes scan-horizontal {
|
|
480
|
-
0% { left: -100%; }
|
|
481
|
-
100% { left: 100%; }
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
/* Flow - Continuous left-to-right flow (for progress connectors) */
|
|
485
|
-
--animate-flow: flow 2s ease-in-out infinite;
|
|
486
|
-
@keyframes flow {
|
|
487
|
-
0% { left: -50%; }
|
|
488
|
-
100% { left: 150%; }
|
|
489
|
-
}
|
|
490
|
-
|
|
491
|
-
/* Line Float - Horizontal line traversal with opacity (for decorative lines) */
|
|
492
|
-
--animate-line-float: line-float 4s ease-in-out infinite;
|
|
493
|
-
@keyframes line-float {
|
|
494
|
-
0%, 100% { transform: translateX(-100%) scaleX(0.5); opacity: 0; }
|
|
495
|
-
50% { transform: translateX(100%) scaleX(1); opacity: 0.3; }
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
/* ------------------------------------------------------------------------
|
|
499
|
-
KINETIC STATE — Physics-based feedback animations.
|
|
500
|
-
UI communicates through motion, not icons.
|
|
501
|
-
------------------------------------------------------------------------ */
|
|
502
|
-
|
|
503
|
-
/* Breathe — gentle living pulse for loading/active states */
|
|
504
|
-
--animate-breathe: breathe 2.5s ease-in-out infinite;
|
|
505
|
-
@keyframes breathe {
|
|
506
|
-
0%, 100% { transform: scale(1); opacity: 1; }
|
|
507
|
-
50% { transform: scale(1.015); opacity: 0.88; }
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
/* Glow Pulse — luminous throb for highlighted elements */
|
|
511
|
-
--animate-glow-pulse: glow-pulse 2s ease-in-out infinite;
|
|
512
|
-
@keyframes glow-pulse {
|
|
513
|
-
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--schmancy-sys-color-primary-default) 30%, transparent); }
|
|
514
|
-
50% { box-shadow: 0 0 24px 4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 15%, transparent); }
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
/* Kinetic Shake — physics-damped error feedback */
|
|
518
|
-
--animate-kinetic-shake: kinetic-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
|
|
519
|
-
@keyframes kinetic-shake {
|
|
520
|
-
0%, 100% { transform: translateX(0); }
|
|
521
|
-
10% { transform: translateX(-6px); }
|
|
522
|
-
20% { transform: translateX(5px); }
|
|
523
|
-
30% { transform: translateX(-4px); }
|
|
524
|
-
40% { transform: translateX(3px); }
|
|
525
|
-
50% { transform: translateX(-2px); }
|
|
526
|
-
60% { transform: translateX(1px); }
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
/* Scale Tap — spring-physics tap response */
|
|
530
|
-
--animate-scale-tap: scale-tap 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
531
|
-
@keyframes scale-tap {
|
|
532
|
-
0% { transform: scale(1); }
|
|
533
|
-
40% { transform: scale(0.94); }
|
|
534
|
-
100% { transform: scale(1); }
|
|
535
|
-
}
|
|
536
|
-
|
|
537
|
-
/* Glow In — luminous entrance with depth */
|
|
538
|
-
--animate-glow-in: glow-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
|
|
539
|
-
@keyframes glow-in {
|
|
540
|
-
from {
|
|
541
|
-
box-shadow: 0 0 0 0 transparent;
|
|
542
|
-
opacity: 0;
|
|
543
|
-
transform: scale(0.96);
|
|
544
|
-
}
|
|
545
|
-
to {
|
|
546
|
-
box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);
|
|
547
|
-
opacity: 1;
|
|
548
|
-
transform: scale(1);
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
/* ------------------------------------------------------------------------
|
|
553
|
-
CUSTOM EASING CURVES
|
|
554
|
-
Reusable timing functions for consistent animation feel.
|
|
555
|
-
------------------------------------------------------------------------ */
|
|
556
|
-
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
557
|
-
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
558
|
-
--ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);
|
|
559
|
-
}
|
|
560
|
-
} /* end @layer schmancy.base */
|