@ripperdoc-chrome77/tokens 1.0.0 → 1.1.0
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/dist/index.cjs +86 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +78 -2
- package/dist/index.js.map +1 -1
- package/dist/motion.d.ts +205 -0
- package/package.json +1 -1
- package/src/foundations.css +39 -0
package/dist/index.cjs
CHANGED
|
@@ -20,12 +20,90 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
|
|
23
|
+
cssMotion: () => cssMotion,
|
|
24
|
+
durations: () => durations,
|
|
25
|
+
easings: () => easings,
|
|
26
|
+
motionTokens: () => motionTokens,
|
|
24
27
|
radii: () => radii,
|
|
25
28
|
spacing: () => spacing,
|
|
29
|
+
springs: () => springs,
|
|
30
|
+
transitions: () => transitions,
|
|
26
31
|
typography: () => typography
|
|
27
32
|
});
|
|
28
33
|
module.exports = __toCommonJS(index_exports);
|
|
34
|
+
|
|
35
|
+
// src/motion.ts
|
|
36
|
+
var durations = {
|
|
37
|
+
fast: 0.15,
|
|
38
|
+
normal: 0.25,
|
|
39
|
+
slow: 0.4,
|
|
40
|
+
fastMs: "150ms",
|
|
41
|
+
normalMs: "250ms",
|
|
42
|
+
slowMs: "400ms"
|
|
43
|
+
};
|
|
44
|
+
var easings = {
|
|
45
|
+
// Cubic-bezier array representation (for Motion/Framer Motion)
|
|
46
|
+
standard: [0.4, 0, 0.2, 1],
|
|
47
|
+
decelerate: [0, 0, 0.2, 1],
|
|
48
|
+
accelerate: [0.4, 0, 1, 1],
|
|
49
|
+
emphasized: [0.2, 0, 0, 1],
|
|
50
|
+
// CSS cubic-bezier strings
|
|
51
|
+
standardCss: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
52
|
+
decelerateCss: "cubic-bezier(0, 0, 0.2, 1)",
|
|
53
|
+
accelerateCss: "cubic-bezier(0.4, 0, 1, 1)",
|
|
54
|
+
emphasizedCss: "cubic-bezier(0.2, 0, 0, 1)"
|
|
55
|
+
};
|
|
56
|
+
var springs = {
|
|
57
|
+
// Snappy: Ideal for standard interactive elements (buttons, chips, toggles)
|
|
58
|
+
snappy: {
|
|
59
|
+
type: "spring",
|
|
60
|
+
stiffness: 400,
|
|
61
|
+
damping: 30,
|
|
62
|
+
mass: 0.8
|
|
63
|
+
},
|
|
64
|
+
// Gentle: Ideal for modals, dialogs, drawers, and large surfaces
|
|
65
|
+
gentle: {
|
|
66
|
+
type: "spring",
|
|
67
|
+
stiffness: 200,
|
|
68
|
+
damping: 25,
|
|
69
|
+
mass: 1
|
|
70
|
+
},
|
|
71
|
+
// Bouncy: Playful feedback for badges, toasts, and attention states
|
|
72
|
+
bouncy: {
|
|
73
|
+
type: "spring",
|
|
74
|
+
stiffness: 300,
|
|
75
|
+
damping: 15,
|
|
76
|
+
mass: 1
|
|
77
|
+
},
|
|
78
|
+
// Stiff: Instantaneous response with minimal travel
|
|
79
|
+
stiff: {
|
|
80
|
+
type: "spring",
|
|
81
|
+
stiffness: 500,
|
|
82
|
+
damping: 35,
|
|
83
|
+
mass: 0.5
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
var transitions = {
|
|
87
|
+
fast: { duration: durations.fast, ease: easings.decelerate },
|
|
88
|
+
normal: { duration: durations.normal, ease: easings.standard },
|
|
89
|
+
slow: { duration: durations.slow, ease: easings.standard },
|
|
90
|
+
spring: springs.snappy,
|
|
91
|
+
springGentle: springs.gentle,
|
|
92
|
+
springBouncy: springs.bouncy,
|
|
93
|
+
springStiff: springs.stiff,
|
|
94
|
+
easeIn: { duration: durations.normal, ease: easings.accelerate },
|
|
95
|
+
easeOut: { duration: durations.normal, ease: easings.decelerate },
|
|
96
|
+
easeInOut: { duration: durations.normal, ease: easings.standard },
|
|
97
|
+
reduced: { duration: 0 }
|
|
98
|
+
};
|
|
99
|
+
var motionTokens = {
|
|
100
|
+
durations,
|
|
101
|
+
easings,
|
|
102
|
+
springs,
|
|
103
|
+
transitions
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
// src/index.ts
|
|
29
107
|
var spacing = {
|
|
30
108
|
1: "4px",
|
|
31
109
|
2: "8px",
|
|
@@ -46,7 +124,7 @@ var radii = {
|
|
|
46
124
|
xl: "24px",
|
|
47
125
|
full: "9999px"
|
|
48
126
|
};
|
|
49
|
-
var
|
|
127
|
+
var cssMotion = {
|
|
50
128
|
fast: "150ms",
|
|
51
129
|
normal: "250ms",
|
|
52
130
|
slow: "400ms",
|
|
@@ -70,9 +148,14 @@ var typography = {
|
|
|
70
148
|
};
|
|
71
149
|
// Annotate the CommonJS export names for ESM import in node:
|
|
72
150
|
0 && (module.exports = {
|
|
73
|
-
|
|
151
|
+
cssMotion,
|
|
152
|
+
durations,
|
|
153
|
+
easings,
|
|
154
|
+
motionTokens,
|
|
74
155
|
radii,
|
|
75
156
|
spacing,
|
|
157
|
+
springs,
|
|
158
|
+
transitions,
|
|
76
159
|
typography
|
|
77
160
|
});
|
|
78
161
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export const spacing = {\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n sm: '4px',\n default: '8px',\n md: '12px',\n lg: '16px',\n xl: '24px',\n full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/motion.ts"],"sourcesContent":["export const spacing = {\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n sm: '4px',\n default: '8px',\n md: '12px',\n lg: '16px',\n xl: '24px',\n full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const cssMotion = {\n fast: '150ms',\n normal: '250ms',\n slow: '400ms',\n easeStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const;\n\nexport * from './motion';\n\nexport const typography = {\n displayHero: { size: '48px', lineHeight: '56px', weight: '700', letterSpacing: '-0.03em' },\n headlineXl: { size: '40px', lineHeight: '48px', weight: '700', letterSpacing: '-0.025em' },\n headlineLg: { size: '28px', lineHeight: '36px', weight: '700', letterSpacing: '-0.02em' },\n headlineMd: { size: '22px', lineHeight: '28px', weight: '600', letterSpacing: '-0.015em' },\n headlineSm: { size: '18px', lineHeight: '24px', weight: '600', letterSpacing: '-0.01em' },\n titleMd: { size: '16px', lineHeight: '22px', weight: '600', letterSpacing: '-0.005em' },\n bodyLg: { size: '18px', lineHeight: '28px', weight: '400', letterSpacing: '0' },\n bodyMd: { size: '16px', lineHeight: '24px', weight: '400', letterSpacing: '0' },\n bodySm: { size: '14px', lineHeight: '20px', weight: '400', letterSpacing: '0' },\n labelLg: { size: '14px', lineHeight: '18px', weight: '600', letterSpacing: '0.01em' },\n labelMd: { size: '12px', lineHeight: '16px', weight: '600', letterSpacing: '0.02em' },\n labelSm: { size: '11px', lineHeight: '14px', weight: '700', letterSpacing: '0.06em' },\n} as const;\n\nexport type TypographyRole = keyof typeof typography;\n","/**\n * Ripperdoc Motion Tokens\n * Centralized durations, easing curves, spring physics, and transitions.\n * Consumed by both CSS custom properties and JavaScript motion libraries.\n */\n\nexport const durations = {\n fast: 0.15,\n normal: 0.25,\n slow: 0.4,\n fastMs: '150ms',\n normalMs: '250ms',\n slowMs: '400ms',\n} as const;\n\nexport type DurationKey = 'fast' | 'normal' | 'slow';\n\nexport const easings = {\n // Cubic-bezier array representation (for Motion/Framer Motion)\n standard: [0.4, 0, 0.2, 1] as const,\n decelerate: [0, 0, 0.2, 1] as const,\n accelerate: [0.4, 0, 1, 1] as const,\n emphasized: [0.2, 0, 0, 1] as const,\n\n // CSS cubic-bezier strings\n standardCss: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerateCss: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerateCss: 'cubic-bezier(0.4, 0, 1, 1)',\n emphasizedCss: 'cubic-bezier(0.2, 0, 0, 1)',\n} as const;\n\nexport type EasingKey = 'standard' | 'decelerate' | 'accelerate' | 'emphasized';\n\nexport const springs = {\n // Snappy: Ideal for standard interactive elements (buttons, chips, toggles)\n snappy: {\n type: 'spring' as const,\n stiffness: 400,\n damping: 30,\n mass: 0.8,\n },\n // Gentle: Ideal for modals, dialogs, drawers, and large surfaces\n gentle: {\n type: 'spring' as const,\n stiffness: 200,\n damping: 25,\n mass: 1,\n },\n // Bouncy: Playful feedback for badges, toasts, and attention states\n bouncy: {\n type: 'spring' as const,\n stiffness: 300,\n damping: 15,\n mass: 1,\n },\n // Stiff: Instantaneous response with minimal travel\n stiff: {\n type: 'spring' as const,\n stiffness: 500,\n damping: 35,\n mass: 0.5,\n },\n} as const;\n\nexport type SpringKey = keyof typeof springs;\n\nexport const transitions = {\n fast: { duration: durations.fast, ease: easings.decelerate },\n normal: { duration: durations.normal, ease: easings.standard },\n slow: { duration: durations.slow, ease: easings.standard },\n spring: springs.snappy,\n springGentle: springs.gentle,\n springBouncy: springs.bouncy,\n springStiff: springs.stiff,\n easeIn: { duration: durations.normal, ease: easings.accelerate },\n easeOut: { duration: durations.normal, ease: easings.decelerate },\n easeInOut: { duration: durations.normal, ease: easings.standard },\n reduced: { duration: 0 },\n} as const;\n\nexport type TransitionKey = keyof typeof transitions;\n\nexport const motionTokens = {\n durations,\n easings,\n springs,\n transitions,\n} as const;\n"],"mappings":"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","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export declare const radii: {
|
|
|
20
20
|
readonly full: '9999px';
|
|
21
21
|
};
|
|
22
22
|
export type RadiiScale = keyof typeof radii;
|
|
23
|
-
export declare const
|
|
23
|
+
export declare const cssMotion: {
|
|
24
24
|
readonly fast: '150ms';
|
|
25
25
|
readonly normal: '250ms';
|
|
26
26
|
readonly slow: '400ms';
|
|
@@ -28,6 +28,7 @@ export declare const motion: {
|
|
|
28
28
|
readonly easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)';
|
|
29
29
|
readonly easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)';
|
|
30
30
|
};
|
|
31
|
+
export * from './motion';
|
|
31
32
|
export declare const typography: {
|
|
32
33
|
readonly displayHero: {
|
|
33
34
|
readonly size: '48px';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,74 @@
|
|
|
1
|
+
// src/motion.ts
|
|
2
|
+
var durations = {
|
|
3
|
+
fast: 0.15,
|
|
4
|
+
normal: 0.25,
|
|
5
|
+
slow: 0.4,
|
|
6
|
+
fastMs: "150ms",
|
|
7
|
+
normalMs: "250ms",
|
|
8
|
+
slowMs: "400ms"
|
|
9
|
+
};
|
|
10
|
+
var easings = {
|
|
11
|
+
// Cubic-bezier array representation (for Motion/Framer Motion)
|
|
12
|
+
standard: [0.4, 0, 0.2, 1],
|
|
13
|
+
decelerate: [0, 0, 0.2, 1],
|
|
14
|
+
accelerate: [0.4, 0, 1, 1],
|
|
15
|
+
emphasized: [0.2, 0, 0, 1],
|
|
16
|
+
// CSS cubic-bezier strings
|
|
17
|
+
standardCss: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
18
|
+
decelerateCss: "cubic-bezier(0, 0, 0.2, 1)",
|
|
19
|
+
accelerateCss: "cubic-bezier(0.4, 0, 1, 1)",
|
|
20
|
+
emphasizedCss: "cubic-bezier(0.2, 0, 0, 1)"
|
|
21
|
+
};
|
|
22
|
+
var springs = {
|
|
23
|
+
// Snappy: Ideal for standard interactive elements (buttons, chips, toggles)
|
|
24
|
+
snappy: {
|
|
25
|
+
type: "spring",
|
|
26
|
+
stiffness: 400,
|
|
27
|
+
damping: 30,
|
|
28
|
+
mass: 0.8
|
|
29
|
+
},
|
|
30
|
+
// Gentle: Ideal for modals, dialogs, drawers, and large surfaces
|
|
31
|
+
gentle: {
|
|
32
|
+
type: "spring",
|
|
33
|
+
stiffness: 200,
|
|
34
|
+
damping: 25,
|
|
35
|
+
mass: 1
|
|
36
|
+
},
|
|
37
|
+
// Bouncy: Playful feedback for badges, toasts, and attention states
|
|
38
|
+
bouncy: {
|
|
39
|
+
type: "spring",
|
|
40
|
+
stiffness: 300,
|
|
41
|
+
damping: 15,
|
|
42
|
+
mass: 1
|
|
43
|
+
},
|
|
44
|
+
// Stiff: Instantaneous response with minimal travel
|
|
45
|
+
stiff: {
|
|
46
|
+
type: "spring",
|
|
47
|
+
stiffness: 500,
|
|
48
|
+
damping: 35,
|
|
49
|
+
mass: 0.5
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
var transitions = {
|
|
53
|
+
fast: { duration: durations.fast, ease: easings.decelerate },
|
|
54
|
+
normal: { duration: durations.normal, ease: easings.standard },
|
|
55
|
+
slow: { duration: durations.slow, ease: easings.standard },
|
|
56
|
+
spring: springs.snappy,
|
|
57
|
+
springGentle: springs.gentle,
|
|
58
|
+
springBouncy: springs.bouncy,
|
|
59
|
+
springStiff: springs.stiff,
|
|
60
|
+
easeIn: { duration: durations.normal, ease: easings.accelerate },
|
|
61
|
+
easeOut: { duration: durations.normal, ease: easings.decelerate },
|
|
62
|
+
easeInOut: { duration: durations.normal, ease: easings.standard },
|
|
63
|
+
reduced: { duration: 0 }
|
|
64
|
+
};
|
|
65
|
+
var motionTokens = {
|
|
66
|
+
durations,
|
|
67
|
+
easings,
|
|
68
|
+
springs,
|
|
69
|
+
transitions
|
|
70
|
+
};
|
|
71
|
+
|
|
1
72
|
// src/index.ts
|
|
2
73
|
var spacing = {
|
|
3
74
|
1: "4px",
|
|
@@ -19,7 +90,7 @@ var radii = {
|
|
|
19
90
|
xl: "24px",
|
|
20
91
|
full: "9999px"
|
|
21
92
|
};
|
|
22
|
-
var
|
|
93
|
+
var cssMotion = {
|
|
23
94
|
fast: "150ms",
|
|
24
95
|
normal: "250ms",
|
|
25
96
|
slow: "400ms",
|
|
@@ -42,9 +113,14 @@ var typography = {
|
|
|
42
113
|
labelSm: { size: "11px", lineHeight: "14px", weight: "700", letterSpacing: "0.06em" }
|
|
43
114
|
};
|
|
44
115
|
export {
|
|
45
|
-
|
|
116
|
+
cssMotion,
|
|
117
|
+
durations,
|
|
118
|
+
easings,
|
|
119
|
+
motionTokens,
|
|
46
120
|
radii,
|
|
47
121
|
spacing,
|
|
122
|
+
springs,
|
|
123
|
+
transitions,
|
|
48
124
|
typography
|
|
49
125
|
};
|
|
50
126
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export const spacing = {\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n sm: '4px',\n default: '8px',\n md: '12px',\n lg: '16px',\n xl: '24px',\n full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/motion.ts","../src/index.ts"],"sourcesContent":["/**\n * Ripperdoc Motion Tokens\n * Centralized durations, easing curves, spring physics, and transitions.\n * Consumed by both CSS custom properties and JavaScript motion libraries.\n */\n\nexport const durations = {\n fast: 0.15,\n normal: 0.25,\n slow: 0.4,\n fastMs: '150ms',\n normalMs: '250ms',\n slowMs: '400ms',\n} as const;\n\nexport type DurationKey = 'fast' | 'normal' | 'slow';\n\nexport const easings = {\n // Cubic-bezier array representation (for Motion/Framer Motion)\n standard: [0.4, 0, 0.2, 1] as const,\n decelerate: [0, 0, 0.2, 1] as const,\n accelerate: [0.4, 0, 1, 1] as const,\n emphasized: [0.2, 0, 0, 1] as const,\n\n // CSS cubic-bezier strings\n standardCss: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerateCss: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerateCss: 'cubic-bezier(0.4, 0, 1, 1)',\n emphasizedCss: 'cubic-bezier(0.2, 0, 0, 1)',\n} as const;\n\nexport type EasingKey = 'standard' | 'decelerate' | 'accelerate' | 'emphasized';\n\nexport const springs = {\n // Snappy: Ideal for standard interactive elements (buttons, chips, toggles)\n snappy: {\n type: 'spring' as const,\n stiffness: 400,\n damping: 30,\n mass: 0.8,\n },\n // Gentle: Ideal for modals, dialogs, drawers, and large surfaces\n gentle: {\n type: 'spring' as const,\n stiffness: 200,\n damping: 25,\n mass: 1,\n },\n // Bouncy: Playful feedback for badges, toasts, and attention states\n bouncy: {\n type: 'spring' as const,\n stiffness: 300,\n damping: 15,\n mass: 1,\n },\n // Stiff: Instantaneous response with minimal travel\n stiff: {\n type: 'spring' as const,\n stiffness: 500,\n damping: 35,\n mass: 0.5,\n },\n} as const;\n\nexport type SpringKey = keyof typeof springs;\n\nexport const transitions = {\n fast: { duration: durations.fast, ease: easings.decelerate },\n normal: { duration: durations.normal, ease: easings.standard },\n slow: { duration: durations.slow, ease: easings.standard },\n spring: springs.snappy,\n springGentle: springs.gentle,\n springBouncy: springs.bouncy,\n springStiff: springs.stiff,\n easeIn: { duration: durations.normal, ease: easings.accelerate },\n easeOut: { duration: durations.normal, ease: easings.decelerate },\n easeInOut: { duration: durations.normal, ease: easings.standard },\n reduced: { duration: 0 },\n} as const;\n\nexport type TransitionKey = keyof typeof transitions;\n\nexport const motionTokens = {\n durations,\n easings,\n springs,\n transitions,\n} as const;\n","export const spacing = {\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport type SpacingScale = keyof typeof spacing;\n\nexport const radii = {\n sm: '4px',\n default: '8px',\n md: '12px',\n lg: '16px',\n xl: '24px',\n full: '9999px',\n} as const;\n\nexport type RadiiScale = keyof typeof radii;\n\nexport const cssMotion = {\n fast: '150ms',\n normal: '250ms',\n slow: '400ms',\n easeStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n easeDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n easeAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const;\n\nexport * from './motion';\n\nexport const typography = {\n displayHero: { size: '48px', lineHeight: '56px', weight: '700', letterSpacing: '-0.03em' },\n headlineXl: { size: '40px', lineHeight: '48px', weight: '700', letterSpacing: '-0.025em' },\n headlineLg: { size: '28px', lineHeight: '36px', weight: '700', letterSpacing: '-0.02em' },\n headlineMd: { size: '22px', lineHeight: '28px', weight: '600', letterSpacing: '-0.015em' },\n headlineSm: { size: '18px', lineHeight: '24px', weight: '600', letterSpacing: '-0.01em' },\n titleMd: { size: '16px', lineHeight: '22px', weight: '600', letterSpacing: '-0.005em' },\n bodyLg: { size: '18px', lineHeight: '28px', weight: '400', letterSpacing: '0' },\n bodyMd: { size: '16px', lineHeight: '24px', weight: '400', letterSpacing: '0' },\n bodySm: { size: '14px', lineHeight: '20px', weight: '400', letterSpacing: '0' },\n labelLg: { size: '14px', lineHeight: '18px', weight: '600', letterSpacing: '0.01em' },\n labelMd: { size: '12px', lineHeight: '16px', weight: '600', letterSpacing: '0.02em' },\n labelSm: { size: '11px', lineHeight: '14px', weight: '700', letterSpacing: '0.06em' },\n} as const;\n\nexport type TypographyRole = keyof typeof typography;\n"],"mappings":";AAMO,IAAM,YAAY;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,QAAQ;AACV;AAIO,IAAM,UAAU;AAAA;AAAA,EAErB,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;AAAA,EACzB,YAAY,CAAC,GAAG,GAAG,KAAK,CAAC;AAAA,EACzB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,EACzB,YAAY,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA;AAAA,EAGzB,aAAa;AAAA,EACb,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AACjB;AAIO,IAAM,UAAU;AAAA;AAAA,EAErB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AAAA;AAAA,EAEA,OAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF;AAIO,IAAM,cAAc;AAAA,EACzB,MAAM,EAAE,UAAU,UAAU,MAAM,MAAM,QAAQ,WAAW;AAAA,EAC3D,QAAQ,EAAE,UAAU,UAAU,QAAQ,MAAM,QAAQ,SAAS;AAAA,EAC7D,MAAM,EAAE,UAAU,UAAU,MAAM,MAAM,QAAQ,SAAS;AAAA,EACzD,QAAQ,QAAQ;AAAA,EAChB,cAAc,QAAQ;AAAA,EACtB,cAAc,QAAQ;AAAA,EACtB,aAAa,QAAQ;AAAA,EACrB,QAAQ,EAAE,UAAU,UAAU,QAAQ,MAAM,QAAQ,WAAW;AAAA,EAC/D,SAAS,EAAE,UAAU,UAAU,QAAQ,MAAM,QAAQ,WAAW;AAAA,EAChE,WAAW,EAAE,UAAU,UAAU,QAAQ,MAAM,QAAQ,SAAS;AAAA,EAChE,SAAS,EAAE,UAAU,EAAE;AACzB;AAIO,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACvFO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIO,IAAM,QAAQ;AAAA,EACnB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAIO,IAAM,YAAY;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,gBAAgB;AAClB;AAIO,IAAM,aAAa;AAAA,EACxB,aAAa,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACzF,YAAY,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,UAAU;AAAA,EACxF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,WAAW;AAAA,EACtF,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,QAAQ,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,IAAI;AAAA,EAC9E,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AAAA,EACpF,SAAS,EAAE,MAAM,QAAQ,YAAY,QAAQ,QAAQ,OAAO,eAAe,SAAS;AACtF;","names":[]}
|
package/dist/motion.d.ts
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Ripperdoc Motion Tokens
|
|
3
|
+
* Centralized durations, easing curves, spring physics, and transitions.
|
|
4
|
+
* Consumed by both CSS custom properties and JavaScript motion libraries.
|
|
5
|
+
*/
|
|
6
|
+
export declare const durations: {
|
|
7
|
+
readonly fast: 0.15;
|
|
8
|
+
readonly normal: 0.25;
|
|
9
|
+
readonly slow: 0.4;
|
|
10
|
+
readonly fastMs: '150ms';
|
|
11
|
+
readonly normalMs: '250ms';
|
|
12
|
+
readonly slowMs: '400ms';
|
|
13
|
+
};
|
|
14
|
+
export type DurationKey = 'fast' | 'normal' | 'slow';
|
|
15
|
+
export declare const easings: {
|
|
16
|
+
readonly standard: readonly [0.4, 0, 0.2, 1];
|
|
17
|
+
readonly decelerate: readonly [0, 0, 0.2, 1];
|
|
18
|
+
readonly accelerate: readonly [0.4, 0, 1, 1];
|
|
19
|
+
readonly emphasized: readonly [0.2, 0, 0, 1];
|
|
20
|
+
readonly standardCss: 'cubic-bezier(0.4, 0, 0.2, 1)';
|
|
21
|
+
readonly decelerateCss: 'cubic-bezier(0, 0, 0.2, 1)';
|
|
22
|
+
readonly accelerateCss: 'cubic-bezier(0.4, 0, 1, 1)';
|
|
23
|
+
readonly emphasizedCss: 'cubic-bezier(0.2, 0, 0, 1)';
|
|
24
|
+
};
|
|
25
|
+
export type EasingKey = 'standard' | 'decelerate' | 'accelerate' | 'emphasized';
|
|
26
|
+
export declare const springs: {
|
|
27
|
+
readonly snappy: {
|
|
28
|
+
readonly type: 'spring';
|
|
29
|
+
readonly stiffness: 400;
|
|
30
|
+
readonly damping: 30;
|
|
31
|
+
readonly mass: 0.8;
|
|
32
|
+
};
|
|
33
|
+
readonly gentle: {
|
|
34
|
+
readonly type: 'spring';
|
|
35
|
+
readonly stiffness: 200;
|
|
36
|
+
readonly damping: 25;
|
|
37
|
+
readonly mass: 1;
|
|
38
|
+
};
|
|
39
|
+
readonly bouncy: {
|
|
40
|
+
readonly type: 'spring';
|
|
41
|
+
readonly stiffness: 300;
|
|
42
|
+
readonly damping: 15;
|
|
43
|
+
readonly mass: 1;
|
|
44
|
+
};
|
|
45
|
+
readonly stiff: {
|
|
46
|
+
readonly type: 'spring';
|
|
47
|
+
readonly stiffness: 500;
|
|
48
|
+
readonly damping: 35;
|
|
49
|
+
readonly mass: 0.5;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
export type SpringKey = keyof typeof springs;
|
|
53
|
+
export declare const transitions: {
|
|
54
|
+
readonly fast: {
|
|
55
|
+
readonly duration: 0.15;
|
|
56
|
+
readonly ease: readonly [0, 0, 0.2, 1];
|
|
57
|
+
};
|
|
58
|
+
readonly normal: {
|
|
59
|
+
readonly duration: 0.25;
|
|
60
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
61
|
+
};
|
|
62
|
+
readonly slow: {
|
|
63
|
+
readonly duration: 0.4;
|
|
64
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
65
|
+
};
|
|
66
|
+
readonly spring: {
|
|
67
|
+
readonly type: 'spring';
|
|
68
|
+
readonly stiffness: 400;
|
|
69
|
+
readonly damping: 30;
|
|
70
|
+
readonly mass: 0.8;
|
|
71
|
+
};
|
|
72
|
+
readonly springGentle: {
|
|
73
|
+
readonly type: 'spring';
|
|
74
|
+
readonly stiffness: 200;
|
|
75
|
+
readonly damping: 25;
|
|
76
|
+
readonly mass: 1;
|
|
77
|
+
};
|
|
78
|
+
readonly springBouncy: {
|
|
79
|
+
readonly type: 'spring';
|
|
80
|
+
readonly stiffness: 300;
|
|
81
|
+
readonly damping: 15;
|
|
82
|
+
readonly mass: 1;
|
|
83
|
+
};
|
|
84
|
+
readonly springStiff: {
|
|
85
|
+
readonly type: 'spring';
|
|
86
|
+
readonly stiffness: 500;
|
|
87
|
+
readonly damping: 35;
|
|
88
|
+
readonly mass: 0.5;
|
|
89
|
+
};
|
|
90
|
+
readonly easeIn: {
|
|
91
|
+
readonly duration: 0.25;
|
|
92
|
+
readonly ease: readonly [0.4, 0, 1, 1];
|
|
93
|
+
};
|
|
94
|
+
readonly easeOut: {
|
|
95
|
+
readonly duration: 0.25;
|
|
96
|
+
readonly ease: readonly [0, 0, 0.2, 1];
|
|
97
|
+
};
|
|
98
|
+
readonly easeInOut: {
|
|
99
|
+
readonly duration: 0.25;
|
|
100
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
101
|
+
};
|
|
102
|
+
readonly reduced: {
|
|
103
|
+
readonly duration: 0;
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
export type TransitionKey = keyof typeof transitions;
|
|
107
|
+
export declare const motionTokens: {
|
|
108
|
+
readonly durations: {
|
|
109
|
+
readonly fast: 0.15;
|
|
110
|
+
readonly normal: 0.25;
|
|
111
|
+
readonly slow: 0.4;
|
|
112
|
+
readonly fastMs: '150ms';
|
|
113
|
+
readonly normalMs: '250ms';
|
|
114
|
+
readonly slowMs: '400ms';
|
|
115
|
+
};
|
|
116
|
+
readonly easings: {
|
|
117
|
+
readonly standard: readonly [0.4, 0, 0.2, 1];
|
|
118
|
+
readonly decelerate: readonly [0, 0, 0.2, 1];
|
|
119
|
+
readonly accelerate: readonly [0.4, 0, 1, 1];
|
|
120
|
+
readonly emphasized: readonly [0.2, 0, 0, 1];
|
|
121
|
+
readonly standardCss: 'cubic-bezier(0.4, 0, 0.2, 1)';
|
|
122
|
+
readonly decelerateCss: 'cubic-bezier(0, 0, 0.2, 1)';
|
|
123
|
+
readonly accelerateCss: 'cubic-bezier(0.4, 0, 1, 1)';
|
|
124
|
+
readonly emphasizedCss: 'cubic-bezier(0.2, 0, 0, 1)';
|
|
125
|
+
};
|
|
126
|
+
readonly springs: {
|
|
127
|
+
readonly snappy: {
|
|
128
|
+
readonly type: 'spring';
|
|
129
|
+
readonly stiffness: 400;
|
|
130
|
+
readonly damping: 30;
|
|
131
|
+
readonly mass: 0.8;
|
|
132
|
+
};
|
|
133
|
+
readonly gentle: {
|
|
134
|
+
readonly type: 'spring';
|
|
135
|
+
readonly stiffness: 200;
|
|
136
|
+
readonly damping: 25;
|
|
137
|
+
readonly mass: 1;
|
|
138
|
+
};
|
|
139
|
+
readonly bouncy: {
|
|
140
|
+
readonly type: 'spring';
|
|
141
|
+
readonly stiffness: 300;
|
|
142
|
+
readonly damping: 15;
|
|
143
|
+
readonly mass: 1;
|
|
144
|
+
};
|
|
145
|
+
readonly stiff: {
|
|
146
|
+
readonly type: 'spring';
|
|
147
|
+
readonly stiffness: 500;
|
|
148
|
+
readonly damping: 35;
|
|
149
|
+
readonly mass: 0.5;
|
|
150
|
+
};
|
|
151
|
+
};
|
|
152
|
+
readonly transitions: {
|
|
153
|
+
readonly fast: {
|
|
154
|
+
readonly duration: 0.15;
|
|
155
|
+
readonly ease: readonly [0, 0, 0.2, 1];
|
|
156
|
+
};
|
|
157
|
+
readonly normal: {
|
|
158
|
+
readonly duration: 0.25;
|
|
159
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
160
|
+
};
|
|
161
|
+
readonly slow: {
|
|
162
|
+
readonly duration: 0.4;
|
|
163
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
164
|
+
};
|
|
165
|
+
readonly spring: {
|
|
166
|
+
readonly type: 'spring';
|
|
167
|
+
readonly stiffness: 400;
|
|
168
|
+
readonly damping: 30;
|
|
169
|
+
readonly mass: 0.8;
|
|
170
|
+
};
|
|
171
|
+
readonly springGentle: {
|
|
172
|
+
readonly type: 'spring';
|
|
173
|
+
readonly stiffness: 200;
|
|
174
|
+
readonly damping: 25;
|
|
175
|
+
readonly mass: 1;
|
|
176
|
+
};
|
|
177
|
+
readonly springBouncy: {
|
|
178
|
+
readonly type: 'spring';
|
|
179
|
+
readonly stiffness: 300;
|
|
180
|
+
readonly damping: 15;
|
|
181
|
+
readonly mass: 1;
|
|
182
|
+
};
|
|
183
|
+
readonly springStiff: {
|
|
184
|
+
readonly type: 'spring';
|
|
185
|
+
readonly stiffness: 500;
|
|
186
|
+
readonly damping: 35;
|
|
187
|
+
readonly mass: 0.5;
|
|
188
|
+
};
|
|
189
|
+
readonly easeIn: {
|
|
190
|
+
readonly duration: 0.25;
|
|
191
|
+
readonly ease: readonly [0.4, 0, 1, 1];
|
|
192
|
+
};
|
|
193
|
+
readonly easeOut: {
|
|
194
|
+
readonly duration: 0.25;
|
|
195
|
+
readonly ease: readonly [0, 0, 0.2, 1];
|
|
196
|
+
};
|
|
197
|
+
readonly easeInOut: {
|
|
198
|
+
readonly duration: 0.25;
|
|
199
|
+
readonly ease: readonly [0.4, 0, 0.2, 1];
|
|
200
|
+
};
|
|
201
|
+
readonly reduced: {
|
|
202
|
+
readonly duration: 0;
|
|
203
|
+
};
|
|
204
|
+
};
|
|
205
|
+
};
|
package/package.json
CHANGED
package/src/foundations.css
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--rd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
35
|
--rd-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
|
|
36
36
|
--rd-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
|
|
37
|
+
--rd-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
37
38
|
|
|
38
39
|
/* Layout Constraints */
|
|
39
40
|
--rd-container-max-width: 1440px;
|
|
@@ -42,6 +43,34 @@
|
|
|
42
43
|
--rd-gutter: 16px;
|
|
43
44
|
}
|
|
44
45
|
|
|
46
|
+
/* Global Motion Control Attributes */
|
|
47
|
+
[data-motion-disabled='true'],
|
|
48
|
+
[data-motion-disabled='true'] * {
|
|
49
|
+
--rd-duration-fast: 0ms !important;
|
|
50
|
+
--rd-duration-normal: 0ms !important;
|
|
51
|
+
--rd-duration-slow: 0ms !important;
|
|
52
|
+
transition-duration: 0ms !important;
|
|
53
|
+
animation-duration: 0ms !important;
|
|
54
|
+
animation-iteration-count: 1 !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-reduced-motion='true'],
|
|
58
|
+
[data-reduced-motion='true'] * {
|
|
59
|
+
--rd-duration-fast: 0.01ms !important;
|
|
60
|
+
--rd-duration-normal: 0.01ms !important;
|
|
61
|
+
--rd-duration-slow: 0.01ms !important;
|
|
62
|
+
transition-duration: 0.01ms !important;
|
|
63
|
+
animation-duration: 0.01ms !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media (prefers-reduced-motion: reduce) {
|
|
67
|
+
:root:not([data-reduced-motion='never']) {
|
|
68
|
+
--rd-duration-fast: 0.01ms;
|
|
69
|
+
--rd-duration-normal: 0.01ms;
|
|
70
|
+
--rd-duration-slow: 0.01ms;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
45
74
|
/* Tabular figures for runtimes, timers, episode numbers */
|
|
46
75
|
.rd-tabular-nums {
|
|
47
76
|
font-variant-numeric: tabular-nums;
|
|
@@ -141,3 +170,13 @@
|
|
|
141
170
|
letter-spacing: 0.06em;
|
|
142
171
|
text-transform: uppercase;
|
|
143
172
|
}
|
|
173
|
+
|
|
174
|
+
/* Keyframes for CSS Spinner Animation */
|
|
175
|
+
@keyframes rd-spin {
|
|
176
|
+
from {
|
|
177
|
+
transform: rotate(0deg);
|
|
178
|
+
}
|
|
179
|
+
to {
|
|
180
|
+
transform: rotate(360deg);
|
|
181
|
+
}
|
|
182
|
+
}
|