@texturehq/edges 0.1.8 → 1.0.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/components.manifest.json +548 -7
- package/dist/generated/tailwind-tokens-dark.css +190 -0
- package/dist/generated/tailwind-tokens-light.css +190 -0
- package/dist/index.cjs +6 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1183 -125
- package/dist/index.d.ts +1183 -125
- package/dist/index.js +6 -5
- package/dist/index.js.map +1 -1
- package/dist/styles/animations.css +132 -0
- package/dist/styles/computed.css +137 -0
- package/dist/styles/utilities.css +13 -0
- package/dist/styles.css +1654 -641
- package/dist/theme.css +26 -1102
- package/package.json +44 -16
- package/scripts/validate-tokens.js +177 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Animation Keyframes and Utilities
|
|
3
|
+
* CSS animations that can be used throughout the design system
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* ============================================
|
|
7
|
+
Keyframe Definitions
|
|
8
|
+
============================================ */
|
|
9
|
+
|
|
10
|
+
@keyframes wave {
|
|
11
|
+
0% {
|
|
12
|
+
transform: translateX(-100%);
|
|
13
|
+
}
|
|
14
|
+
50%,
|
|
15
|
+
100% {
|
|
16
|
+
transform: translateX(100%);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@keyframes slide-in-from-right {
|
|
21
|
+
from {
|
|
22
|
+
transform: translateX(100%);
|
|
23
|
+
}
|
|
24
|
+
to {
|
|
25
|
+
transform: translateX(0);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes slide-in-from-left {
|
|
30
|
+
from {
|
|
31
|
+
transform: translateX(-100%);
|
|
32
|
+
}
|
|
33
|
+
to {
|
|
34
|
+
transform: translateX(0);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes slide-out-to-right {
|
|
39
|
+
from {
|
|
40
|
+
transform: translateX(0);
|
|
41
|
+
}
|
|
42
|
+
to {
|
|
43
|
+
transform: translateX(100%);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes slide-out-to-left {
|
|
48
|
+
from {
|
|
49
|
+
transform: translateX(0);
|
|
50
|
+
}
|
|
51
|
+
to {
|
|
52
|
+
transform: translateX(-100%);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@keyframes fade-in {
|
|
57
|
+
from {
|
|
58
|
+
opacity: 0;
|
|
59
|
+
}
|
|
60
|
+
to {
|
|
61
|
+
opacity: 1;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes fade-out {
|
|
66
|
+
from {
|
|
67
|
+
opacity: 1;
|
|
68
|
+
}
|
|
69
|
+
to {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes spin {
|
|
75
|
+
to {
|
|
76
|
+
transform: rotate(360deg);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@keyframes ping {
|
|
81
|
+
75%,
|
|
82
|
+
100% {
|
|
83
|
+
transform: scale(2);
|
|
84
|
+
opacity: 0;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@keyframes pulse {
|
|
89
|
+
50% {
|
|
90
|
+
opacity: 0.5;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@keyframes bounce {
|
|
95
|
+
0%,
|
|
96
|
+
100% {
|
|
97
|
+
transform: translateY(-25%);
|
|
98
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
99
|
+
}
|
|
100
|
+
50% {
|
|
101
|
+
transform: none;
|
|
102
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* ============================================
|
|
107
|
+
Animation Utility Classes
|
|
108
|
+
============================================ */
|
|
109
|
+
|
|
110
|
+
.slide-in-from-right {
|
|
111
|
+
animation: slide-in-from-right 0.3s ease-out;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.slide-in-from-left {
|
|
115
|
+
animation: slide-in-from-left 0.3s ease-out;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.slide-out-to-right {
|
|
119
|
+
animation: slide-out-to-right 0.15s ease-in;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.slide-out-to-left {
|
|
123
|
+
animation: slide-out-to-left 0.15s ease-in;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.fade-in {
|
|
127
|
+
animation: fade-in 0.2s ease-out;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.fade-out {
|
|
131
|
+
animation: fade-out 0.15s ease-in;
|
|
132
|
+
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Computed Values
|
|
3
|
+
* Derived calculations based on design tokens
|
|
4
|
+
* These values depend on CSS custom properties defined in the token files
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@theme inline {
|
|
8
|
+
/* ============================================
|
|
9
|
+
Form Control Computed Sizes
|
|
10
|
+
============================================ */
|
|
11
|
+
|
|
12
|
+
/* Form Control Base Sizes */
|
|
13
|
+
--control-sm: 0.75rem;
|
|
14
|
+
--control-md: 0.875rem;
|
|
15
|
+
--control-lg: 1rem;
|
|
16
|
+
--control-xl: 1.125rem;
|
|
17
|
+
|
|
18
|
+
/* Form Control Line Heights */
|
|
19
|
+
--control-sm-height: calc(var(--control-sm) * 2.75);
|
|
20
|
+
--control-md-height: calc(var(--control-md) * 2.75);
|
|
21
|
+
--control-lg-height: calc(var(--control-lg) * 3);
|
|
22
|
+
--control-xl-height: calc(var(--control-xl) * 3);
|
|
23
|
+
|
|
24
|
+
/* Form Control Padding */
|
|
25
|
+
--control-padding-sm: 0.75rem;
|
|
26
|
+
--control-padding-md: 1rem;
|
|
27
|
+
--control-padding-lg: 1.25rem;
|
|
28
|
+
--control-padding-xl: 1.5rem;
|
|
29
|
+
|
|
30
|
+
/* Form Control Gaps */
|
|
31
|
+
--control-gap-sm: 0.25rem;
|
|
32
|
+
--control-gap-md: 0.375rem;
|
|
33
|
+
--control-gap-lg: 0.5rem;
|
|
34
|
+
--control-gap-xl: 0.625rem;
|
|
35
|
+
|
|
36
|
+
/* Input Heights (includes padding) */
|
|
37
|
+
--input-height-sm: calc(var(--control-sm-height) + (var(--control-padding-sm) * 2));
|
|
38
|
+
--input-height-md: calc(var(--control-md-height) + (var(--control-padding-md) * 2));
|
|
39
|
+
--input-height-lg: calc(var(--control-lg-height) + (var(--control-padding-lg) * 2));
|
|
40
|
+
--input-height-xl: calc(var(--control-xl-height) + (var(--control-padding-xl) * 2));
|
|
41
|
+
|
|
42
|
+
/* Border Radius */
|
|
43
|
+
--control-border-radius: var(--border-radius-lg);
|
|
44
|
+
|
|
45
|
+
/* Select Widths */
|
|
46
|
+
--select-min-width-sm: 7.5rem;
|
|
47
|
+
--select-min-width-md: 10rem;
|
|
48
|
+
--select-min-width-lg: 12.5rem;
|
|
49
|
+
--select-min-width-xl: 15rem;
|
|
50
|
+
|
|
51
|
+
/* Form Control Text Relationships */
|
|
52
|
+
--control-text-sm: var(--text-xs);
|
|
53
|
+
--control-text-md: var(--text-sm);
|
|
54
|
+
--control-text-lg: var(--text-base);
|
|
55
|
+
--control-text-xl: var(--text-lg);
|
|
56
|
+
|
|
57
|
+
/* Form Control Group Spacing */
|
|
58
|
+
--control-group-spacing-sm: var(--control-gap-sm);
|
|
59
|
+
--control-group-spacing-md: var(--control-gap-md);
|
|
60
|
+
--control-group-spacing-lg: var(--control-gap-lg);
|
|
61
|
+
--control-group-spacing-xl: var(--control-gap-xl);
|
|
62
|
+
|
|
63
|
+
/* Form Layout Spacing */
|
|
64
|
+
--form-row-gap: var(--control-gap-lg);
|
|
65
|
+
--form-column-gap: var(--control-gap-xl);
|
|
66
|
+
--form-section-gap: calc(var(--control-gap-xl) * 2);
|
|
67
|
+
--form-field-gap: var(--control-gap-md);
|
|
68
|
+
|
|
69
|
+
/* ============================================
|
|
70
|
+
Interactive States
|
|
71
|
+
============================================ */
|
|
72
|
+
|
|
73
|
+
--control-hover-opacity: 0.9;
|
|
74
|
+
--control-active-opacity: 0.8;
|
|
75
|
+
--control-pressed-opacity: 0.7;
|
|
76
|
+
|
|
77
|
+
--control-focus-ring-color: var(--color-neutral-black);
|
|
78
|
+
--control-focus-ring-color-error: var(--color-feedback-error-border);
|
|
79
|
+
--control-focus-ring-color-success: var(--color-feedback-success-border);
|
|
80
|
+
|
|
81
|
+
/* ============================================
|
|
82
|
+
Form Validation States
|
|
83
|
+
============================================ */
|
|
84
|
+
|
|
85
|
+
--control-error-border: var(--color-feedback-error-border);
|
|
86
|
+
--control-error-background: var(--color-feedback-error-background);
|
|
87
|
+
--control-error-text: var(--color-feedback-error-text);
|
|
88
|
+
|
|
89
|
+
--control-success-border: var(--color-feedback-success-border);
|
|
90
|
+
--control-success-background: var(--color-feedback-success-background);
|
|
91
|
+
--control-success-text: var(--color-feedback-success-text);
|
|
92
|
+
|
|
93
|
+
--control-warning-border: var(--color-feedback-warning-border);
|
|
94
|
+
--control-warning-background: var(--color-feedback-warning-background);
|
|
95
|
+
--control-warning-text: var(--color-feedback-warning-text);
|
|
96
|
+
|
|
97
|
+
/* ============================================
|
|
98
|
+
Form Control Transitions
|
|
99
|
+
============================================ */
|
|
100
|
+
|
|
101
|
+
--control-transition-duration: 150ms;
|
|
102
|
+
--control-transition-timing: var(--ease-in-out);
|
|
103
|
+
--control-hover-transition: all var(--control-transition-duration)
|
|
104
|
+
var(--control-transition-timing);
|
|
105
|
+
--control-focus-transition: all var(--control-transition-duration)
|
|
106
|
+
var(--control-transition-timing);
|
|
107
|
+
|
|
108
|
+
/* ============================================
|
|
109
|
+
Form Labels and Help Text
|
|
110
|
+
============================================ */
|
|
111
|
+
|
|
112
|
+
--control-label-margin: var(--control-gap-sm);
|
|
113
|
+
--control-helper-text-margin: var(--control-gap-sm);
|
|
114
|
+
--control-helper-text-size: var(--text-sm);
|
|
115
|
+
--control-helper-text-color: var(--color-text-muted);
|
|
116
|
+
--control-label-size: var(--text-sm);
|
|
117
|
+
--control-label-color: var(--color-text-body);
|
|
118
|
+
|
|
119
|
+
/* ============================================
|
|
120
|
+
Input Adornments
|
|
121
|
+
============================================ */
|
|
122
|
+
|
|
123
|
+
--control-icon-size-sm: 1rem;
|
|
124
|
+
--control-icon-size-md: 1.25rem;
|
|
125
|
+
--control-icon-size-lg: 1.5rem;
|
|
126
|
+
--control-icon-size-xl: 1.75rem;
|
|
127
|
+
--control-adornment-gap: var(--control-gap-sm);
|
|
128
|
+
|
|
129
|
+
/* ============================================
|
|
130
|
+
Legacy Form Control Variables
|
|
131
|
+
============================================ */
|
|
132
|
+
|
|
133
|
+
--control-height-sm: 2rem;
|
|
134
|
+
--control-height-md: 2.5rem;
|
|
135
|
+
--control-height-lg: 3rem;
|
|
136
|
+
--control-height-xl: 3.5rem;
|
|
137
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility Classes
|
|
3
|
+
* Reusable utility classes for common patterns
|
|
4
|
+
* Note: Animation utilities are in animations.css
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* Placeholder for future utility classes */
|
|
8
|
+
/* Examples might include:
|
|
9
|
+
- Layout utilities
|
|
10
|
+
- Display utilities
|
|
11
|
+
- Accessibility utilities
|
|
12
|
+
- etc.
|
|
13
|
+
*/
|