@makigamestudio/ui-ionic 0.8.0 → 0.9.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.
Files changed (8) hide show
  1. package/README.md +675 -32
  2. package/fesm2022/makigamestudio-ui-ionic.mjs +9 -9
  3. package/fesm2022/makigamestudio-ui-ionic.mjs.map +1 -1
  4. package/global-styles.css +68 -0
  5. package/global-styles.scss +87 -0
  6. package/package.json +2 -2
  7. package/theme.css +65 -89
  8. package/theme.scss +33 -162
package/theme.css CHANGED
@@ -1,105 +1,45 @@
1
1
  /**
2
- * @makigamestudio/maki-core Theme Variables
2
+ * @makigamestudio/ui-ionic Theme Variables
3
3
  *
4
4
  * Import this file in your global styles to customize the library components.
5
- * Example: @use '@makigamestudio/maki-core/theme.scss';
5
+ * This automatically includes global-styles.scss for component styles.
6
+ *
7
+ * Example: @use '@makigamestudio/ui-ionic/theme.scss';
6
8
  *
7
9
  * Override these variables in your own SCSS to customize the appearance.
10
+ * Place your overrides AFTER importing this file.
8
11
  */
9
- :root {
10
- --maki-primary: #3880ff;
11
- --maki-primary-rgb: 56, 128, 255;
12
- --maki-primary-contrast: #ffffff;
13
- --maki-primary-shade: #3171e0;
14
- --maki-primary-tint: #4c8dff;
15
- --maki-secondary: #3dc2ff;
16
- --maki-secondary-rgb: 61, 194, 255;
17
- --maki-secondary-contrast: #000000;
18
- --maki-secondary-shade: #36abe0;
19
- --maki-secondary-tint: #50c8ff;
20
- --maki-accent: #5260ff;
21
- --maki-accent-rgb: 82, 96, 255;
22
- --maki-accent-contrast: #ffffff;
23
- --maki-accent-shade: #4854e0;
24
- --maki-accent-tint: #6370ff;
25
- --maki-success: #2dd36f;
26
- --maki-warning: #ffc409;
27
- --maki-danger: #eb445a;
28
- --maki-info: #3dc2ff;
29
- --maki-background: #f4f5f8;
30
- --maki-background-rgb: 244, 245, 248;
31
- --maki-surface: #ffffff;
32
- --maki-surface-rgb: 255, 255, 255;
33
- --maki-text-primary: #1a1a1a;
34
- --maki-text-secondary: #666666;
35
- --maki-text-muted: #999999;
36
- --maki-text-inverse: #ffffff;
37
- --maki-card-background: var(--maki-surface);
38
- --maki-card-color: var(--maki-text-primary);
39
- --maki-card-margin: 16px;
40
- --maki-card-border-radius: 12px;
41
- --maki-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
42
- --maki-spacing-xs: 4px;
43
- --maki-spacing-sm: 8px;
44
- --maki-spacing-md: 12px;
45
- --maki-spacing-lg: 16px;
46
- --maki-spacing-xl: 24px;
47
- --maki-spacing-xxl: 32px;
48
- --maki-radius-sm: 4px;
49
- --maki-radius-md: 8px;
50
- --maki-radius-lg: 12px;
51
- --maki-radius-xl: 16px;
52
- --maki-radius-full: 9999px;
53
- --maki-font-family:
54
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
55
- --maki-font-size-xs: 0.75rem;
56
- --maki-font-size-sm: 0.875rem;
57
- --maki-font-size-md: 1rem;
58
- --maki-font-size-lg: 1.125rem;
59
- --maki-font-size-xl: 1.25rem;
60
- --maki-font-size-xxl: 1.5rem;
61
- --maki-transition-fast: 150ms ease;
62
- --maki-transition-normal: 250ms ease;
63
- --maki-transition-slow: 350ms ease;
64
- --maki-button-padding-start: 8px;
65
- --maki-button-padding-end: 8px;
66
- --maki-button-spinner-size: 16px;
67
- --maki-button-dropdown-icon-size: 16px;
68
- --maki-button-dropdown-icon-gap: 4px;
69
- --maki-action-button-list-padding: 16px;
70
- --maki-action-button-list-item-height: 44px;
71
- --maki-action-button-list-icon-size: 20px;
72
- --maki-action-button-list-icon-gap: 12px;
12
+ /**
13
+ * @makigamestudio/ui-ionic Global Component Styles
14
+ *
15
+ * This file contains global styles for library components that need to be
16
+ * applied at the document level (e.g., tooltips rendered in document.body).
17
+ *
18
+ * This file is automatically imported by theme.scss, so consumers only need
19
+ * to import theme.scss to get both CSS variables and component styles.
20
+ */
21
+ ion-popover::part(content) {
22
+ margin: var(--maki-spacing-xs, 0.25rem) 0;
73
23
  }
74
24
 
75
- @media (prefers-color-scheme: dark) {
76
- :root {
77
- --maki-background: #1a1a1a;
78
- --maki-background-rgb: 26, 26, 26;
79
- --maki-surface: #2d2d2d;
80
- --maki-surface-rgb: 45, 45, 45;
81
- --maki-text-primary: #ffffff;
82
- --maki-text-secondary: #b3b3b3;
83
- --maki-text-muted: #808080;
84
- --maki-text-inverse: #1a1a1a;
85
- --maki-card-background: var(--maki-surface);
86
- --maki-card-color: var(--maki-text-primary);
87
- --maki-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
88
- }
89
- }
90
25
  .maki-tooltip {
91
- background: var(--ion-color-dark);
92
- color: var(--ion-color-light, #fff);
93
- padding: var(--maki-spacing-sm) var(--maki-spacing-md);
94
- border-radius: var(--maki-radius-sm, 4px);
95
- font-size: var(--maki-font-size-sm);
96
- font-family: var(--maki-font-family);
97
- max-width: min(97vw, 450px) !important;
26
+ background: var(--ion-color-dark, #222428);
27
+ color: var(--ion-color-dark-contrast, #fff);
28
+ padding: var(--maki-spacing-sm, 0.5rem) var(--maki-spacing-md, 0.75rem);
29
+ border-radius: var(--maki-radius-xs, 0.25rem);
30
+ font-size: var(--maki-font-size-sm, 0.875rem);
31
+ font-family: var(--ion-font-family, sans-serif);
32
+ line-height: var(--maki-line-height-normal, 1.5);
33
+ letter-spacing: var(--maki-letter-spacing-normal, 0);
34
+ max-width: min(100vw, 450px) !important;
98
35
  width: fit-content;
99
36
  overflow: scroll;
100
37
  word-wrap: break-word;
101
- box-shadow: var(--maki-card-box-shadow);
38
+ box-shadow: var(--maki-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
39
+ z-index: 10000;
102
40
  pointer-events: none;
41
+ margin: var(--maki-spacing-xs, 0.25rem) var(--maki-spacing-xs, 0.25rem) var(--maki-spacing-xs, 0.25rem) 0;
42
+ transition: opacity 150ms ease;
103
43
  }
104
44
  .maki-tooltip[data-color=primary] {
105
45
  background: var(--ion-color-primary);
@@ -137,3 +77,39 @@
137
77
  background: var(--ion-color-dark);
138
78
  color: var(--ion-color-dark-contrast);
139
79
  }
80
+
81
+ :root {
82
+ --maki-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
83
+ --maki-spacing-xxs: 0.125rem;
84
+ --maki-spacing-xs: 0.25rem;
85
+ --maki-spacing-sm: 0.5rem;
86
+ --maki-spacing-md: 0.75rem;
87
+ --maki-spacing-lg: 1rem;
88
+ --maki-spacing-xl: 1.5rem;
89
+ --maki-spacing-xxl: 2rem;
90
+ --maki-radius-xs: 0.25rem;
91
+ --maki-radius-sm: 0.5rem;
92
+ --maki-radius-md: 0.75rem;
93
+ --maki-radius-lg: 1rem;
94
+ --maki-radius-xl: 1.5rem;
95
+ --maki-radius-xxl: 2rem;
96
+ --maki-radius-full: 9999px;
97
+ --maki-font-size-xs: 0.75rem;
98
+ --maki-font-size-sm: 0.875rem;
99
+ --maki-font-size-md: 1rem;
100
+ --maki-font-size-lg: 1.125rem;
101
+ --maki-font-size-xl: 1.25rem;
102
+ --maki-font-size-xxl: 1.5rem;
103
+ --maki-font-size-xxxl: 2rem;
104
+ --maki-line-height-tight: 1.25;
105
+ --maki-line-height-normal: 1.5;
106
+ --maki-line-height-relaxed: 1.75;
107
+ --maki-letter-spacing-normal: 0;
108
+ --maki-letter-spacing-wide: 0.02em;
109
+ }
110
+
111
+ @media (prefers-color-scheme: dark) {
112
+ :root {
113
+ --maki-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
114
+ }
115
+ }
package/theme.scss CHANGED
@@ -1,121 +1,69 @@
1
1
  /**
2
- * @makigamestudio/maki-core Theme Variables
2
+ * @makigamestudio/ui-ionic Theme Variables
3
3
  *
4
4
  * Import this file in your global styles to customize the library components.
5
- * Example: @use '@makigamestudio/maki-core/theme.scss';
5
+ * This automatically includes global-styles.scss for component styles.
6
+ *
7
+ * Example: @use '@makigamestudio/ui-ionic/theme.scss';
6
8
  *
7
9
  * Override these variables in your own SCSS to customize the appearance.
10
+ * Place your overrides AFTER importing this file.
8
11
  */
9
12
 
10
- :root {
11
- // ==============================================
12
- // Brand Colors
13
- // ==============================================
14
- --maki-primary: #3880ff;
15
- --maki-primary-rgb: 56, 128, 255;
16
- --maki-primary-contrast: #ffffff;
17
- --maki-primary-shade: #3171e0;
18
- --maki-primary-tint: #4c8dff;
19
-
20
- --maki-secondary: #3dc2ff;
21
- --maki-secondary-rgb: 61, 194, 255;
22
- --maki-secondary-contrast: #000000;
23
- --maki-secondary-shade: #36abe0;
24
- --maki-secondary-tint: #50c8ff;
25
-
26
- --maki-accent: #5260ff;
27
- --maki-accent-rgb: 82, 96, 255;
28
- --maki-accent-contrast: #ffffff;
29
- --maki-accent-shade: #4854e0;
30
- --maki-accent-tint: #6370ff;
31
-
32
- // ==============================================
33
- // Semantic Colors
34
- // ==============================================
35
- --maki-success: #2dd36f;
36
- --maki-warning: #ffc409;
37
- --maki-danger: #eb445a;
38
- --maki-info: #3dc2ff;
39
-
40
- // ==============================================
41
- // Background & Surface
42
- // ==============================================
43
- --maki-background: #f4f5f8;
44
- --maki-background-rgb: 244, 245, 248;
45
- --maki-surface: #ffffff;
46
- --maki-surface-rgb: 255, 255, 255;
47
-
48
- // ==============================================
49
- // Text Colors
50
- // ==============================================
51
- --maki-text-primary: #1a1a1a;
52
- --maki-text-secondary: #666666;
53
- --maki-text-muted: #999999;
54
- --maki-text-inverse: #ffffff;
13
+ // Import global component styles (must use @use to avoid deprecation warnings)
14
+ @use './global-styles';
55
15
 
16
+ :root {
56
17
  // ==============================================
57
- // Card Component
18
+ // Shadows
58
19
  // ==============================================
59
- --maki-card-background: var(--maki-surface);
60
- --maki-card-color: var(--maki-text-primary);
61
- --maki-card-margin: 16px;
62
- --maki-card-border-radius: 12px;
63
- --maki-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
20
+ --maki-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
64
21
 
65
22
  // ==============================================
66
23
  // Spacing Scale
67
24
  // ==============================================
68
- --maki-spacing-xs: 4px;
69
- --maki-spacing-sm: 8px;
70
- --maki-spacing-md: 12px;
71
- --maki-spacing-lg: 16px;
72
- --maki-spacing-xl: 24px;
73
- --maki-spacing-xxl: 32px;
25
+ --maki-spacing-xxs: 0.125rem;
26
+ --maki-spacing-xs: 0.25rem;
27
+ --maki-spacing-sm: 0.5rem;
28
+ --maki-spacing-md: 0.75rem;
29
+ --maki-spacing-lg: 1rem;
30
+ --maki-spacing-xl: 1.5rem;
31
+ --maki-spacing-xxl: 2rem;
74
32
 
75
33
  // ==============================================
76
34
  // Border Radius Scale
77
35
  // ==============================================
78
- --maki-radius-sm: 4px;
79
- --maki-radius-md: 8px;
80
- --maki-radius-lg: 12px;
81
- --maki-radius-xl: 16px;
36
+ --maki-radius-xs: 0.25rem;
37
+ --maki-radius-sm: 0.5rem;
38
+ --maki-radius-md: 0.75rem;
39
+ --maki-radius-lg: 1rem;
40
+ --maki-radius-xl: 1.5rem;
41
+ --maki-radius-xxl: 2rem;
82
42
  --maki-radius-full: 9999px;
83
43
 
84
44
  // ==============================================
85
- // Typography
45
+ // Typography - Font Sizes
86
46
  // ==============================================
87
- --maki-font-family:
88
- -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
89
47
  --maki-font-size-xs: 0.75rem;
90
48
  --maki-font-size-sm: 0.875rem;
91
49
  --maki-font-size-md: 1rem;
92
50
  --maki-font-size-lg: 1.125rem;
93
51
  --maki-font-size-xl: 1.25rem;
94
52
  --maki-font-size-xxl: 1.5rem;
53
+ --maki-font-size-xxxl: 2rem;
95
54
 
96
55
  // ==============================================
97
- // Transitions
56
+ // Typography - Line Heights
98
57
  // ==============================================
99
- --maki-transition-fast: 150ms ease;
100
- --maki-transition-normal: 250ms ease;
101
- --maki-transition-slow: 350ms ease;
58
+ --maki-line-height-tight: 1.25;
59
+ --maki-line-height-normal: 1.5;
60
+ --maki-line-height-relaxed: 1.75;
102
61
 
103
62
  // ==============================================
104
- // Button Component (maki-button)
63
+ // Typography - Letter Spacing
105
64
  // ==============================================
106
- --maki-button-padding-start: 8px;
107
- --maki-button-padding-end: 8px;
108
- --maki-button-spinner-size: 16px;
109
- --maki-button-dropdown-icon-size: 16px;
110
- --maki-button-dropdown-icon-gap: 4px;
111
-
112
- // ==============================================
113
- // Action Button List Component (maki-action-button-list)
114
- // ==============================================
115
- --maki-action-button-list-padding: 16px;
116
- --maki-action-button-list-item-height: 44px;
117
- --maki-action-button-list-icon-size: 20px;
118
- --maki-action-button-list-icon-gap: 12px;
65
+ --maki-letter-spacing-normal: 0;
66
+ --maki-letter-spacing-wide: 0.02em;
119
67
  }
120
68
 
121
69
  // ==============================================
@@ -123,83 +71,6 @@
123
71
  // ==============================================
124
72
  @media (prefers-color-scheme: dark) {
125
73
  :root {
126
- --maki-background: #1a1a1a;
127
- --maki-background-rgb: 26, 26, 26;
128
- --maki-surface: #2d2d2d;
129
- --maki-surface-rgb: 45, 45, 45;
130
-
131
- --maki-text-primary: #ffffff;
132
- --maki-text-secondary: #b3b3b3;
133
- --maki-text-muted: #808080;
134
- --maki-text-inverse: #1a1a1a;
135
-
136
- --maki-card-background: var(--maki-surface);
137
- --maki-card-color: var(--maki-text-primary);
138
- --maki-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
139
- }
140
- }
141
-
142
- // ==============================================
143
- // Tooltip Component (maki-tooltip)
144
- // ==============================================
145
- .maki-tooltip {
146
- // Base styles
147
- background: var(--ion-color-dark);
148
- color: var(--ion-color-light, #fff);
149
- padding: var(--maki-spacing-sm) var(--maki-spacing-md);
150
- border-radius: var(--maki-radius-sm, 4px);
151
- font-size: var(--maki-font-size-sm);
152
- font-family: var(--maki-font-family);
153
- max-width: min(97vw, 450px) !important;
154
- width: fit-content;
155
- overflow: scroll;
156
- word-wrap: break-word;
157
- box-shadow: var(--maki-card-box-shadow);
158
- pointer-events: none;
159
-
160
- // Color variants using Ionic color system
161
- &[data-color='primary'] {
162
- background: var(--ion-color-primary);
163
- color: var(--ion-color-primary-contrast);
164
- }
165
-
166
- &[data-color='secondary'] {
167
- background: var(--ion-color-secondary);
168
- color: var(--ion-color-secondary-contrast);
169
- }
170
-
171
- &[data-color='tertiary'] {
172
- background: var(--ion-color-tertiary);
173
- color: var(--ion-color-tertiary-contrast);
174
- }
175
-
176
- &[data-color='success'] {
177
- background: var(--ion-color-success);
178
- color: var(--ion-color-success-contrast);
179
- }
180
-
181
- &[data-color='warning'] {
182
- background: var(--ion-color-warning);
183
- color: var(--ion-color-warning-contrast);
184
- }
185
-
186
- &[data-color='danger'] {
187
- background: var(--ion-color-danger);
188
- color: var(--ion-color-danger-contrast);
189
- }
190
-
191
- &[data-color='light'] {
192
- background: var(--ion-color-light);
193
- color: var(--ion-color-light-contrast);
194
- }
195
-
196
- &[data-color='medium'] {
197
- background: var(--ion-color-medium);
198
- color: var(--ion-color-medium-contrast);
199
- }
200
-
201
- &[data-color='dark'] {
202
- background: var(--ion-color-dark);
203
- color: var(--ion-color-dark-contrast);
74
+ --maki-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
204
75
  }
205
76
  }