@appartmint/mint 1.0.7 → 1.0.9

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@appartmint/mint",
3
3
  "author": "App Art Mint LLC",
4
- "version": "1.0.7",
4
+ "version": "1.0.9",
5
5
  "license": "MIT",
6
6
  "description": "The front-end TS/SCSS framework of App Art Mint",
7
7
  "keywords": [
@@ -1,8 +1,10 @@
1
- /// _index.scss - Loads every scss style file in the Mint library
1
+ /// _index.scss - Forward all overrides
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Mint
4
+ /// @group Index
5
+ @charset 'utf-8';
5
6
 
6
7
  /// Imports
7
8
  @use './components';
8
9
  @use './global';
10
+ @use './overrides';
@@ -1,3 +1,10 @@
1
+ /// _index.scss - Forward all overrides
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Index
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
1
8
  @use './backgrounds';
2
9
  @use './buttons';
3
10
  @use './cards';
@@ -0,0 +1,48 @@
1
+ /// _amplify.scss - Amplify styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Overrides
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../util' as *;
9
+ @use '../components/buttons';
10
+ @use '../components/cards';
11
+
12
+ /// Amplify Styles
13
+ :root:root {
14
+ @include css-var-ref(--amplify-colors-background-error, $amp-background-error);
15
+ @include css-var-ref(--amplify-colors-border-primary, $amp-border-primary);
16
+ @include css-var-ref(--amplify-colors-border-focus, $amp-border-focus);
17
+ @include css-var-ref(--amplify-colors-font-hover, $amp-font-hover);
18
+ @include css-var-ref(--amplify-colors-font-interactive, $amp-font-interactive);
19
+ @include css-var-ref(--amplify-colors-font-primary, $amp-font-primary);
20
+ @include css-var-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
21
+ @include css-var-ref(--amplify-colors-font-secondary, $amp-font-secondary);
22
+ @include css-var-ref(--amplify-colors-font-error, $amp-font-error);
23
+ @include css-var-ref(--amplify-colors-font-warning, $amp-font-warning);
24
+ @include css-var-ref(--amplify-colors-font-success, $amp-font-success);
25
+ @include css-var-ref(--amplify-colors-font-info, $amp-font-info);
26
+
27
+ @include css-var(--amplify-border-widths-small, $amp-border-width);
28
+
29
+ [data-amplify-authenticator] {
30
+ [data-amplify-container] {
31
+ @extend #{class(card)};
32
+
33
+ [data-amplify-router] {
34
+ @extend #{class(content)};
35
+ border: none;
36
+ }
37
+ }
38
+ }
39
+
40
+ [amplify-button] {
41
+ @extend #{class(btn)};
42
+ margin: auto;
43
+ }
44
+
45
+ .amplify-icon {
46
+ display: block;
47
+ }
48
+ }
@@ -0,0 +1,46 @@
1
+ /// _amplify.scss - Amplify styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Overrides
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../util' as *;
9
+
10
+ /// FullCalendar Styles
11
+ .fc {
12
+ --fc-page-bg-color: #{css-var(brand-6)};
13
+ .fc-toolbar {
14
+ flex-wrap: wrap;
15
+ justify-content: space-around;
16
+ gap: 1rem;
17
+
18
+ &-title {
19
+ @include break-max(sm) {
20
+ font-size: 1.25rem;
21
+ }
22
+ }
23
+ }
24
+ .fc-timegrid {
25
+ &-divider {
26
+ padding: 0;
27
+ }
28
+ &-slot-minor {
29
+ border-top-style: groove;
30
+ }
31
+ }
32
+ .fc-list-table {
33
+ --fc-list-event-hover-bg-color: #{css-var(brand-4)};
34
+
35
+ @include break-max(sm) {
36
+ word-break: normal;
37
+ }
38
+
39
+ .fc-list-event-time {
40
+ @include break-max(xs) {
41
+ white-space: normal;
42
+
43
+ }
44
+ }
45
+ }
46
+ }
@@ -0,0 +1,11 @@
1
+ /// _index.scss - Forward all overrides
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Index
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use './amplify';
9
+ @use './full-calendar';
10
+ @use './material';
11
+ @use './swiper';
@@ -0,0 +1,24 @@
1
+ /// _material.scss - Material styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Overrides
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../util' as *;
9
+
10
+ /// Material Styles
11
+ :root:root {
12
+ @include css-var(--mat-table-background-color, $mat-table-bg);
13
+ @include css-var(--mat-paginator-container-background-color, $mat-table-bg);
14
+ @include css-var(--mat-table-row-item-label-text-color, $mat-table-fore);
15
+ @include css-var(--mat-table-header-headline-color, $mat-table-fore);
16
+ @include css-var(--mat-table-header-subheadline-color, $mat-table-fore);
17
+ @include css-var(--mat-paginator-container-text-color, $mat-table-fore);
18
+ }
19
+
20
+ .cdk-overlay-container {
21
+ .mat-mdc-select-panel {
22
+ background: css-var($mat-select-bg);
23
+ }
24
+ }
@@ -0,0 +1,55 @@
1
+ /// _swiper.scss - Swiper styles
2
+ /// @author App Art Mint LLC
3
+ ///
4
+ /// @group Overrides
5
+ @charset 'utf-8';
6
+
7
+ /// Imports
8
+ @use '../util' as *;
9
+
10
+ /// Variables
11
+ $arrows-offset: 1rem;
12
+ $arrows-size: 2rem;
13
+
14
+ /// Swiper Styles
15
+ :root {
16
+ @include css-var-ref(--swiper-navigation-color, fore);
17
+ @include css-var-ref(--swiper-pagination-color, brand);
18
+ @include css-var(--swiper-navigation-size, $arrows-size);
19
+
20
+ .swiper {
21
+ max-width: 100%;
22
+
23
+ @include break(xs) {
24
+ @include css-var(--swiper-navigation-sides-offset, $arrows-offset);
25
+ }
26
+
27
+ &-slide {
28
+ @include break(xs) {
29
+ padding: $arrows-offset + $arrows-size;
30
+ }
31
+ }
32
+
33
+ &-button {
34
+ &-prev,
35
+ &-next {
36
+ &::after {
37
+ font-family: "Font Awesome 6 Pro";
38
+ font-weight: 900;
39
+ }
40
+ }
41
+
42
+ &-prev {
43
+ &::after {
44
+ content: '\f053';
45
+ }
46
+ }
47
+
48
+ &-next {
49
+ &::after {
50
+ content: '\f054';
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
@@ -1,8 +1,9 @@
1
- /// _index.scss - SCSS Utilities
1
+ /// _index.scss - Forward all overrides
2
2
  /// @author App Art Mint LLC
3
3
  ///
4
- /// @group Mint
4
+ /// @group Index
5
+ @charset 'utf-8';
5
6
 
6
- /// Forwards
7
+ /// Imports
7
8
  @forward './util';
8
9
  @forward './vars';
@@ -200,7 +200,11 @@ $bootstrap5: false !default;
200
200
  @error 'The css-var function requires a string value.';
201
201
  }
202
202
 
203
- @return var(css-prefix($base));
203
+ @if (string.index($base, '--') != 1) {
204
+ $base: css-prefix($base);
205
+ }
206
+
207
+ @return var(#{$base});
204
208
  }
205
209
 
206
210
  /// Negates a provided CSS-selector
@@ -454,7 +458,15 @@ $bootstrap5: false !default;
454
458
  /// @param {Any} $val - the value of the CSS var
455
459
  /// @output a prefixed CSS var definition
456
460
  @mixin css-var ($key, $val) {
457
- #{css-prefix($key)}: #{$val};
461
+ @if (type-of($key) != 'string') {
462
+ @error 'The css-var mixin requires a string for the $key argument.';
463
+ }
464
+
465
+ @if (string.index($key, '--') != 1) {
466
+ $key: css-prefix($key);
467
+ }
468
+
469
+ #{$key}: #{$val};
458
470
  }
459
471
 
460
472
  /// Creates a prefixed CSS var reference
@@ -467,6 +479,10 @@ $bootstrap5: false !default;
467
479
  /// @param {String} $key2 - the key of the referenced CSS var
468
480
  /// @output a prefixed CSS var reference
469
481
  @mixin css-var-ref ($key1, $key2) {
482
+ @if (type-of($key1) != 'string' or type-of($key2) != 'string') {
483
+ @error 'The css-var-ref mixin requires string values for both parameters.';
484
+ }
485
+
470
486
  @include css-var($key1, css-var($key2));
471
487
  }
472
488
 
@@ -175,12 +175,24 @@ $texture-border-repeat: round !default;
175
175
  /// Backgrounds
176
176
  $back-bg-blur: 0.15vw !default;
177
177
 
178
+ /// Material
179
+ $mat-table-bg: back !default;
180
+ $mat-table-fore: fore !default;
181
+ $mat-select-bg: brand-4 !default;
182
+
183
+ /// Amplify
184
+ $amp-font-primary: fore !default;
185
+ $amp-background-error: glow-0 !default;
186
+ $amp-font-warning: warning !default;
187
+ $amp-font-success: success !default;
188
+ $amp-font-info: info !default;
189
+ $amp-border-width: $border-width !default;
190
+
178
191
 
179
192
  /// Themes
180
193
  $theme-default: light !default;
181
194
 
182
195
  /// Default Theme (light)
183
-
184
196
  /// Buttons
185
197
  $btn-back-default: brand-2;
186
198
  $btn-back: $btn-back-default !default;
@@ -208,6 +220,21 @@ $header-link-fore-hover: $header-link-fore-hover-default !default;
208
220
  $footer-heel-fore-default: back;
209
221
  $footer-heel-fore: $footer-heel-fore-default !default;
210
222
 
223
+ /// Amplify
224
+ $amp-border-primary-default: brand-5;
225
+ $amp-border-primary: $amp-border-primary-default !default;
226
+ $amp-border-focus-default: brand-4;
227
+ $amp-border-focus: $amp-border-focus-default !default;
228
+ $amp-font-hover-default: brand-3;
229
+ $amp-font-hover: $amp-font-hover-default !default;
230
+ $amp-font-interactive-default: brand-5;
231
+ $amp-font-interactive: $amp-font-interactive-default !default;
232
+ $amp-font-secondary-default: brand-6;
233
+ $amp-font-secondary: $amp-font-secondary-default !default;
234
+ $amp-font-error-default: danger-5 !default;
235
+ $amp-font-error: $amp-font-error-default !default;
236
+
237
+
211
238
  /// Dark Theme
212
239
  @if ($theme-default == dark) {
213
240
 
@@ -222,4 +249,12 @@ $footer-heel-fore: $footer-heel-fore-default !default;
222
249
 
223
250
  /// Footer
224
251
  $footer-heel-fore: if($footer-heel-fore != $footer-heel-fore-default, $footer-heel-fore, fore);
252
+
253
+ /// Amplify
254
+ $amp-border-primary: if($amp-border-primary != $amp-border-primary-default, $amp-border-primary, brand-1);
255
+ $amp-border-focus: if($amp-border-focus != $amp-border-focus-default, $amp-border-focus, brand-3);
256
+ $amp-font-hover: if($amp-font-hover != $amp-font-hover-default, $amp-font-hover, brand-0);
257
+ $amp-font-interactive: if($amp-font-interactive != $amp-font-interactive-default, $amp-font-interactive, brand-1);
258
+ $amp-font-secondary: if($amp-font-secondary != $amp-font-secondary-default, $amp-font-secondary, brand-0);
259
+ $amp-font-error: if($amp-font-error != $amp-font-error-default, $amp-font-error, danger-4);
225
260
  }