@eduboxpro/studio 0.1.0 → 0.1.2
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/fesm2022/eduboxpro-studio.mjs +664 -37
- package/fesm2022/eduboxpro-studio.mjs.map +1 -1
- package/index.d.ts +283 -15
- package/package.json +5 -4
- package/src/styles/_mixins.scss +157 -0
- package/src/styles/_reset.scss +65 -0
- package/src/styles/_tokens.scss +181 -0
- package/src/styles/studio.scss +15 -0
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SCSS Mixins
|
|
3
|
+
* Reusable style patterns
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Flex center
|
|
8
|
+
*/
|
|
9
|
+
@mixin flex-center {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Absolute center
|
|
17
|
+
*/
|
|
18
|
+
@mixin absolute-center {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: 50%;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translate(-50%, -50%);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Truncate text with ellipsis
|
|
27
|
+
*/
|
|
28
|
+
@mixin truncate {
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
text-overflow: ellipsis;
|
|
31
|
+
white-space: nowrap;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Line clamp (multi-line truncate)
|
|
36
|
+
*/
|
|
37
|
+
@mixin line-clamp($lines: 2) {
|
|
38
|
+
display: -webkit-box;
|
|
39
|
+
-webkit-line-clamp: $lines;
|
|
40
|
+
-webkit-box-orient: vertical;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Focus ring (accessible focus state)
|
|
46
|
+
*/
|
|
47
|
+
@mixin focus-ring($color: var(--studio-primary), $offset: 2px) {
|
|
48
|
+
outline: 2px solid $color;
|
|
49
|
+
outline-offset: $offset;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Visually hidden (accessible but invisible)
|
|
54
|
+
*/
|
|
55
|
+
@mixin visually-hidden {
|
|
56
|
+
position: absolute;
|
|
57
|
+
width: 1px;
|
|
58
|
+
height: 1px;
|
|
59
|
+
padding: 0;
|
|
60
|
+
margin: -1px;
|
|
61
|
+
overflow: hidden;
|
|
62
|
+
clip: rect(0, 0, 0, 0);
|
|
63
|
+
white-space: nowrap;
|
|
64
|
+
border-width: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Reset button styles
|
|
69
|
+
*/
|
|
70
|
+
@mixin reset-button {
|
|
71
|
+
border: none;
|
|
72
|
+
background: none;
|
|
73
|
+
padding: 0;
|
|
74
|
+
margin: 0;
|
|
75
|
+
font: inherit;
|
|
76
|
+
color: inherit;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
outline: none;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Reset list styles
|
|
83
|
+
*/
|
|
84
|
+
@mixin reset-list {
|
|
85
|
+
list-style: none;
|
|
86
|
+
padding: 0;
|
|
87
|
+
margin: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* Scrollbar styles
|
|
92
|
+
*/
|
|
93
|
+
@mixin custom-scrollbar($width: 8px, $track-color: transparent, $thumb-color: var(--studio-border-secondary)) {
|
|
94
|
+
&::-webkit-scrollbar {
|
|
95
|
+
width: $width;
|
|
96
|
+
height: $width;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&::-webkit-scrollbar-track {
|
|
100
|
+
background: $track-color;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&::-webkit-scrollbar-thumb {
|
|
104
|
+
background: $thumb-color;
|
|
105
|
+
border-radius: var(--studio-radius-full);
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
background: var(--studio-text-tertiary);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Smooth transition
|
|
115
|
+
*/
|
|
116
|
+
@mixin transition($properties...) {
|
|
117
|
+
transition-property: $properties;
|
|
118
|
+
transition-duration: var(--studio-transition-base);
|
|
119
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Responsive breakpoints
|
|
124
|
+
*/
|
|
125
|
+
@mixin breakpoint($size) {
|
|
126
|
+
@if $size == 'sm' {
|
|
127
|
+
@media (min-width: 640px) { @content; }
|
|
128
|
+
} @else if $size == 'md' {
|
|
129
|
+
@media (min-width: 768px) { @content; }
|
|
130
|
+
} @else if $size == 'lg' {
|
|
131
|
+
@media (min-width: 1024px) { @content; }
|
|
132
|
+
} @else if $size == 'xl' {
|
|
133
|
+
@media (min-width: 1280px) { @content; }
|
|
134
|
+
} @else if $size == '2xl' {
|
|
135
|
+
@media (min-width: 1536px) { @content; }
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Hover state (respects prefers-reduced-motion)
|
|
141
|
+
*/
|
|
142
|
+
@mixin hover {
|
|
143
|
+
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
|
|
144
|
+
&:hover {
|
|
145
|
+
@content;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Animation (respects prefers-reduced-motion)
|
|
152
|
+
*/
|
|
153
|
+
@mixin animate($name, $duration: var(--studio-transition-base)) {
|
|
154
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
155
|
+
animation: $name $duration;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS Reset
|
|
3
|
+
* Minimal CSS reset for consistent styling
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
*,
|
|
7
|
+
*::before,
|
|
8
|
+
*::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
* {
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
html {
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
-moz-osx-font-smoothing: grayscale;
|
|
20
|
+
text-rendering: optimizeLegibility;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
body {
|
|
24
|
+
font-family: var(--studio-font-family);
|
|
25
|
+
font-size: var(--studio-font-size-base);
|
|
26
|
+
line-height: var(--studio-line-height-normal);
|
|
27
|
+
color: var(--studio-text-primary);
|
|
28
|
+
background-color: var(--studio-bg-primary);
|
|
29
|
+
transition: background-color var(--studio-transition-base), color var(--studio-transition-base);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
img,
|
|
33
|
+
picture,
|
|
34
|
+
video,
|
|
35
|
+
canvas,
|
|
36
|
+
svg {
|
|
37
|
+
display: block;
|
|
38
|
+
max-width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
input,
|
|
42
|
+
button,
|
|
43
|
+
textarea,
|
|
44
|
+
select {
|
|
45
|
+
font: inherit;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
p,
|
|
49
|
+
h1,
|
|
50
|
+
h2,
|
|
51
|
+
h3,
|
|
52
|
+
h4,
|
|
53
|
+
h5,
|
|
54
|
+
h6 {
|
|
55
|
+
overflow-wrap: break-word;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button {
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
a {
|
|
63
|
+
color: inherit;
|
|
64
|
+
text-decoration: none;
|
|
65
|
+
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design Tokens
|
|
3
|
+
* CSS Custom Properties for theme customization
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* ========================================
|
|
8
|
+
* COLORS - Light Theme (Default)
|
|
9
|
+
* ======================================== */
|
|
10
|
+
|
|
11
|
+
/* Background colors */
|
|
12
|
+
--studio-bg-primary: #ffffff;
|
|
13
|
+
--studio-bg-secondary: #f3f4f6;
|
|
14
|
+
--studio-bg-tertiary: #e5e7eb;
|
|
15
|
+
|
|
16
|
+
/* Text colors */
|
|
17
|
+
--studio-text-primary: #111827;
|
|
18
|
+
--studio-text-secondary: #6b7280;
|
|
19
|
+
--studio-text-tertiary: #9ca3af;
|
|
20
|
+
--studio-text-inverse: #ffffff;
|
|
21
|
+
|
|
22
|
+
/* Border colors */
|
|
23
|
+
--studio-border-primary: #e5e7eb;
|
|
24
|
+
--studio-border-secondary: #d1d5db;
|
|
25
|
+
|
|
26
|
+
/* Brand colors */
|
|
27
|
+
--studio-primary: #7c3aed;
|
|
28
|
+
--studio-primary-hover: #6d28d9;
|
|
29
|
+
--studio-primary-active: #5b21b6;
|
|
30
|
+
|
|
31
|
+
--studio-secondary: #6366f1;
|
|
32
|
+
--studio-secondary-hover: #4f46e5;
|
|
33
|
+
--studio-secondary-active: #4338ca;
|
|
34
|
+
|
|
35
|
+
/* Semantic colors */
|
|
36
|
+
--studio-success: #10b981;
|
|
37
|
+
--studio-success-hover: #059669;
|
|
38
|
+
--studio-success-bg: #d1fae5;
|
|
39
|
+
|
|
40
|
+
--studio-error: #ef4444;
|
|
41
|
+
--studio-error-hover: #dc2626;
|
|
42
|
+
--studio-error-bg: #fee2e2;
|
|
43
|
+
|
|
44
|
+
--studio-warning: #f59e0b;
|
|
45
|
+
--studio-warning-hover: #d97706;
|
|
46
|
+
--studio-warning-bg: #fef3c7;
|
|
47
|
+
|
|
48
|
+
--studio-info: #0ea5e9;
|
|
49
|
+
--studio-info-hover: #0284c7;
|
|
50
|
+
--studio-info-bg: #dbeafe;
|
|
51
|
+
|
|
52
|
+
/* ========================================
|
|
53
|
+
* TYPOGRAPHY
|
|
54
|
+
* ======================================== */
|
|
55
|
+
|
|
56
|
+
--studio-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
57
|
+
--studio-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
58
|
+
|
|
59
|
+
/* Font sizes */
|
|
60
|
+
--studio-font-size-xs: 0.75rem; /* 12px */
|
|
61
|
+
--studio-font-size-sm: 0.875rem; /* 14px */
|
|
62
|
+
--studio-font-size-base: 1rem; /* 16px */
|
|
63
|
+
--studio-font-size-lg: 1.125rem; /* 18px */
|
|
64
|
+
--studio-font-size-xl: 1.25rem; /* 20px */
|
|
65
|
+
--studio-font-size-2xl: 1.5rem; /* 24px */
|
|
66
|
+
|
|
67
|
+
/* Font weights */
|
|
68
|
+
--studio-font-weight-normal: 400;
|
|
69
|
+
--studio-font-weight-medium: 500;
|
|
70
|
+
--studio-font-weight-semibold: 600;
|
|
71
|
+
--studio-font-weight-bold: 700;
|
|
72
|
+
|
|
73
|
+
/* Line heights */
|
|
74
|
+
--studio-line-height-tight: 1.25;
|
|
75
|
+
--studio-line-height-normal: 1.5;
|
|
76
|
+
--studio-line-height-relaxed: 1.75;
|
|
77
|
+
|
|
78
|
+
/* ========================================
|
|
79
|
+
* SPACING
|
|
80
|
+
* ======================================== */
|
|
81
|
+
|
|
82
|
+
--studio-spacing-xs: 0.25rem; /* 4px */
|
|
83
|
+
--studio-spacing-sm: 0.5rem; /* 8px */
|
|
84
|
+
--studio-spacing-md: 1rem; /* 16px */
|
|
85
|
+
--studio-spacing-lg: 1.5rem; /* 24px */
|
|
86
|
+
--studio-spacing-xl: 2rem; /* 32px */
|
|
87
|
+
--studio-spacing-2xl: 3rem; /* 48px */
|
|
88
|
+
|
|
89
|
+
/* ========================================
|
|
90
|
+
* BORDER RADIUS
|
|
91
|
+
* ======================================== */
|
|
92
|
+
|
|
93
|
+
--studio-radius-none: 0;
|
|
94
|
+
--studio-radius-sm: 0.25rem; /* 4px */
|
|
95
|
+
--studio-radius-md: 0.5rem; /* 8px */
|
|
96
|
+
--studio-radius-lg: 0.75rem; /* 12px */
|
|
97
|
+
--studio-radius-xl: 1rem; /* 16px */
|
|
98
|
+
--studio-radius-full: 9999px;
|
|
99
|
+
|
|
100
|
+
/* ========================================
|
|
101
|
+
* SHADOWS
|
|
102
|
+
* ======================================== */
|
|
103
|
+
|
|
104
|
+
--studio-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
105
|
+
--studio-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
106
|
+
--studio-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
107
|
+
--studio-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
108
|
+
|
|
109
|
+
/* ========================================
|
|
110
|
+
* TRANSITIONS
|
|
111
|
+
* ======================================== */
|
|
112
|
+
|
|
113
|
+
--studio-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
114
|
+
--studio-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
115
|
+
--studio-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
116
|
+
|
|
117
|
+
/* ========================================
|
|
118
|
+
* Z-INDEX
|
|
119
|
+
* ======================================== */
|
|
120
|
+
|
|
121
|
+
--studio-z-dropdown: 1000;
|
|
122
|
+
--studio-z-sticky: 1020;
|
|
123
|
+
--studio-z-fixed: 1030;
|
|
124
|
+
--studio-z-modal-backdrop: 1040;
|
|
125
|
+
--studio-z-modal: 1050;
|
|
126
|
+
--studio-z-popover: 1060;
|
|
127
|
+
--studio-z-tooltip: 1070;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* ========================================
|
|
131
|
+
* DARK THEME
|
|
132
|
+
* ======================================== */
|
|
133
|
+
|
|
134
|
+
[data-theme="dark"] {
|
|
135
|
+
/* Background colors */
|
|
136
|
+
--studio-bg-primary: #111827;
|
|
137
|
+
--studio-bg-secondary: #1f2937;
|
|
138
|
+
--studio-bg-tertiary: #374151;
|
|
139
|
+
|
|
140
|
+
/* Text colors */
|
|
141
|
+
--studio-text-primary: #f9fafb;
|
|
142
|
+
--studio-text-secondary: #d1d5db;
|
|
143
|
+
--studio-text-tertiary: #9ca3af;
|
|
144
|
+
--studio-text-inverse: #111827;
|
|
145
|
+
|
|
146
|
+
/* Border colors */
|
|
147
|
+
--studio-border-primary: #374151;
|
|
148
|
+
--studio-border-secondary: #4b5563;
|
|
149
|
+
|
|
150
|
+
/* Brand colors - slightly adjusted for dark mode */
|
|
151
|
+
--studio-primary: #a78bfa;
|
|
152
|
+
--studio-primary-hover: #c4b5fd;
|
|
153
|
+
--studio-primary-active: #ddd6fe;
|
|
154
|
+
|
|
155
|
+
--studio-secondary: #818cf8;
|
|
156
|
+
--studio-secondary-hover: #a5b4fc;
|
|
157
|
+
--studio-secondary-active: #c7d2fe;
|
|
158
|
+
|
|
159
|
+
/* Semantic colors */
|
|
160
|
+
--studio-success: #34d399;
|
|
161
|
+
--studio-success-hover: #6ee7b7;
|
|
162
|
+
--studio-success-bg: #064e3b;
|
|
163
|
+
|
|
164
|
+
--studio-error: #f87171;
|
|
165
|
+
--studio-error-hover: #fca5a5;
|
|
166
|
+
--studio-error-bg: #7f1d1d;
|
|
167
|
+
|
|
168
|
+
--studio-warning: #fbbf24;
|
|
169
|
+
--studio-warning-hover: #fcd34d;
|
|
170
|
+
--studio-warning-bg: #78350f;
|
|
171
|
+
|
|
172
|
+
--studio-info: #38bdf8;
|
|
173
|
+
--studio-info-hover: #7dd3fc;
|
|
174
|
+
--studio-info-bg: #0c4a6e;
|
|
175
|
+
|
|
176
|
+
/* Shadows - darker for dark mode */
|
|
177
|
+
--studio-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
178
|
+
--studio-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
|
179
|
+
--studio-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
|
|
180
|
+
--studio-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
|
|
181
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @eduboxpro/studio - Main Stylesheet
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your angular.json or styles array:
|
|
5
|
+
* "styles": ["node_modules/@eduboxpro/studio/styles/studio.scss"]
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* Design Tokens */
|
|
9
|
+
@forward 'tokens';
|
|
10
|
+
|
|
11
|
+
/* CSS Reset */
|
|
12
|
+
@forward 'reset';
|
|
13
|
+
|
|
14
|
+
/* Mixins - use in component styles as needed */
|
|
15
|
+
/* @use '@eduboxpro/studio/styles/mixins'; */
|