@ripperdoc-chrome77/tokens 1.0.0-beta → 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/README.md +127 -0
- 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 +2 -2
- package/src/foundations.css +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# @ripperdoc-chrome77/tokens
|
|
2
|
+
|
|
3
|
+
> Design tokens, shared foundation scales, and CSS variables for the **Ripperdoc** multi-MFE design system platform.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@ripperdoc-chrome77/tokens)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## 1. Overview
|
|
11
|
+
|
|
12
|
+
`@ripperdoc-chrome77/tokens` provides the raw primitives, semantic scales, and foundational CSS custom properties consumed across all Ripperdoc themes, packages, and micro-frontends (MFEs).
|
|
13
|
+
|
|
14
|
+
### Key Features
|
|
15
|
+
- **Strict 3-Tier Token Architecture**: Primitive tokens → Semantic design tokens (`--rd-*`) → Component tokens.
|
|
16
|
+
- **4px Baseline Grid**: Linear spacing scale (4px to 64px) calibrated for consistent visual rhythm.
|
|
17
|
+
- **Inter Typography Scale**: Pre-calculated responsive font sizes, line heights, letter spacings, and font weights.
|
|
18
|
+
- **Micro-Motion Curves**: Consistent durations and cubic-bezier easing tokens for fluid transitions.
|
|
19
|
+
- **TypeScript-First**: Strictly typed scale constants and string literal types.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## 2. Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
# Using pnpm (recommended)
|
|
27
|
+
pnpm add @ripperdoc-chrome77/tokens
|
|
28
|
+
|
|
29
|
+
# Using npm
|
|
30
|
+
npm install @ripperdoc-chrome77/tokens
|
|
31
|
+
|
|
32
|
+
# Using yarn
|
|
33
|
+
yarn add @ripperdoc-chrome77/tokens
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## 3. Usage
|
|
39
|
+
|
|
40
|
+
### A. Foundational CSS Custom Properties
|
|
41
|
+
Import the foundation styles into your global stylesheet, Storybook preview, or Next.js `_app.tsx` / `layout.tsx`:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
/* In your global.css or app entry point */
|
|
45
|
+
@import '@ripperdoc-chrome77/tokens/foundations.css';
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Or via JavaScript / TypeScript:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
import '@ripperdoc-chrome77/tokens/foundations.css';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
This injects standard CSS variables on `:root`:
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
.my-card {
|
|
58
|
+
padding: var(--rd-space-4); /* 16px */
|
|
59
|
+
border-radius: var(--rd-radius-md); /* 12px */
|
|
60
|
+
transition: all var(--rd-motion-normal) var(--rd-ease-standard);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### B. JavaScript / TypeScript Scale Constants
|
|
65
|
+
You can also import type-safe token values directly in code:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import { spacing, radii, motion, typography } from '@ripperdoc-chrome77/tokens';
|
|
69
|
+
import type { SpacingScale, RadiiScale, TypographyRole } from '@ripperdoc-chrome77/tokens';
|
|
70
|
+
|
|
71
|
+
// Access spacing scale values
|
|
72
|
+
console.log(spacing[4]); // "16px"
|
|
73
|
+
console.log(radii.md); // "12px"
|
|
74
|
+
console.log(motion.fast); // "150ms"
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## 4. Token Reference
|
|
80
|
+
|
|
81
|
+
### Spacing Scale (4px Baseline)
|
|
82
|
+
| Key | Value | CSS Variable |
|
|
83
|
+
| :--- | :--- | :--- |
|
|
84
|
+
| `1` | `4px` | `--rd-space-1` |
|
|
85
|
+
| `2` | `8px` | `--rd-space-2` |
|
|
86
|
+
| `3` | `12px` | `--rd-space-3` |
|
|
87
|
+
| `4` | `16px` | `--rd-space-4` |
|
|
88
|
+
| `5` | `20px` | `--rd-space-5` |
|
|
89
|
+
| `6` | `24px` | `--rd-space-6` |
|
|
90
|
+
| `8` | `32px` | `--rd-space-8` |
|
|
91
|
+
| `10` | `40px` | `--rd-space-10` |
|
|
92
|
+
| `12` | `48px` | `--rd-space-12` |
|
|
93
|
+
| `16` | `64px` | `--rd-space-16` |
|
|
94
|
+
|
|
95
|
+
### Corner Radii
|
|
96
|
+
| Key | Value | CSS Variable |
|
|
97
|
+
| :--- | :--- | :--- |
|
|
98
|
+
| `sm` | `4px` | `--rd-radius-sm` |
|
|
99
|
+
| `default` | `8px` | `--rd-radius-md` |
|
|
100
|
+
| `md` | `12px` | `--rd-radius-md` |
|
|
101
|
+
| `lg` | `16px` | `--rd-radius-lg` |
|
|
102
|
+
| `xl` | `24px` | `--rd-radius-xl` |
|
|
103
|
+
| `full` | `9999px` | `--rd-radius-full` |
|
|
104
|
+
|
|
105
|
+
### Motion & Transitions
|
|
106
|
+
| Key | Value | CSS Variable |
|
|
107
|
+
| :--- | :--- | :--- |
|
|
108
|
+
| `fast` | `150ms` | `--rd-motion-fast` |
|
|
109
|
+
| `normal` | `250ms` | `--rd-motion-normal` |
|
|
110
|
+
| `slow` | `400ms` | `--rd-motion-slow` |
|
|
111
|
+
| `easeStandard` | `cubic-bezier(0.4, 0, 0.2, 1)` | `--rd-ease-standard` |
|
|
112
|
+
| `easeDecelerate` | `cubic-bezier(0, 0, 0.2, 1)` | `--rd-ease-decelerate` |
|
|
113
|
+
| `easeAccelerate` | `cubic-bezier(0.4, 0, 1, 1)` | `--rd-ease-accelerate` |
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
## 5. Architectural Invariants
|
|
118
|
+
|
|
119
|
+
1. **One-Way Dependency**: Ripperdoc never imports MFE code or business logic.
|
|
120
|
+
2. **Strict Prefixing**: Every CSS variable defined by Ripperdoc begins with `--rd-`.
|
|
121
|
+
3. **Theme Independence**: Tokens establish the contract; themes map color palettes into this contract.
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## 6. License
|
|
126
|
+
|
|
127
|
+
MIT © Ripperdoc Team
|
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":"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","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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ripperdoc-chrome77/tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Design tokens and shared foundations for Ripperdoc design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
"build": "tsup && tsc --emitDeclarationOnly",
|
|
28
28
|
"typecheck": "tsc --noEmit"
|
|
29
29
|
}
|
|
30
|
-
}
|
|
30
|
+
}
|
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
|
+
}
|