@bagelink/vue 1.15.346 → 1.15.352

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": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "1.15.346",
4
+ "version": "1.15.352",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Bagel Studio",
@@ -31,7 +31,7 @@
31
31
  "require": "./dist/index.cjs",
32
32
  "import": "./dist/index.mjs"
33
33
  },
34
- "./style.css": "./src/styles/bagel.css",
34
+ "./style.css": "./dist/style.css",
35
35
  "./styles/core.css": "./src/styles/core.css",
36
36
  "./styles/fonts/admin.css": "./src/styles/fonts/admin.css",
37
37
  "./styles/fonts/ploni.css": "./src/styles/fonts/Ploni.css",
@@ -3,6 +3,154 @@
3
3
  specificity). Consumers override plain utilities with normal CSS, and
4
4
  override `!important` utilities by adding their own `!important`. */
5
5
 
6
- /* Legacy/admin aggregate. Public sites should use styles/core.css instead. */
7
- @import "core.css";
8
- @import "./fonts/admin.css";
6
+ /* Icon fonts must load via the main stylesheet (not only inside Icon.vue's
7
+ <style>), otherwise in Vite dev mode the @import is injected after other
8
+ rules and the browser ignores it, so Material/Font Awesome icons render as
9
+ raw ligature text. Keep these first so the @import rules stay valid. */
10
+ /* Pin unused axes (opsz/GRAD); keep wght+FILL ranges the Icon component animates.
11
+ * Shrinks the ~3.8MB full variable font — the page's biggest asset. */
12
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0');
13
+ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
14
+
15
+ /* Tokens — lowest priority, only custom properties */
16
+ @import "theme.css";
17
+ @import "dark.css";
18
+ @import "./fonts/Ploni.css";
19
+
20
+ /* Base / component styles (plain — utilities with !important win over these) */
21
+ @import "inputs.css";
22
+ @import "input-variants.css";
23
+ @import "buttons.css";
24
+ @import "scrollbar.css";
25
+ @import "transitions.css";
26
+ @import "motion.css";
27
+ @import "loginCard.css";
28
+ @import "app-layout.css";
29
+
30
+ /* Utilities — highest priority (carry !important) */
31
+ @import "base-colors.css";
32
+ @import "layout.css";
33
+ @import "mobilLayout.css";
34
+ @import "xlLayout.css";
35
+ @import "text.css";
36
+ @import "colors.css";
37
+ @import "mobileColors.css";
38
+ @import "appearance.css";
39
+ @import "gradients.css";
40
+ @import "color-variants.css";
41
+
42
+ /* Icon font-family bindings — mirrored from Icon.vue so icons work even when
43
+ that component's injected <style> is not yet present (e.g. Vite dev mode). */
44
+ .bgl_icon-font {
45
+ font-family: 'Material Symbols Outlined', serif !important;
46
+ }
47
+
48
+ .bgl_icon-font.fa {
49
+ font-family: 'Font Awesome 6 Free', serif !important;
50
+ }
51
+
52
+ .bgl_icon-font.fa-brands {
53
+ font-family: 'Font Awesome 6 Brands', serif !important;
54
+ }
55
+
56
+ .bgl_icon-font.bgl_icon-round {
57
+ display: inline-flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ flex-shrink: 0;
61
+ aspect-ratio: 1;
62
+ border-radius: 1000px;
63
+ line-height: 1;
64
+ box-sizing: border-box;
65
+ }
66
+
67
+ /* Reset / base element styles */
68
+ :root {
69
+ --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
70
+ --bgl-transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
71
+ }
72
+
73
+ .grid>* {
74
+ min-height: 0;
75
+ }
76
+
77
+ * {
78
+ box-sizing: border-box;
79
+ }
80
+
81
+ html {
82
+ text-size-adjust: 100%;
83
+ height: 100%;
84
+ background-attachment: scroll;
85
+ }
86
+
87
+ body {
88
+ margin: 0;
89
+ min-height: 100%;
90
+ background-color: var(--bgl-bg);
91
+ font-family: var(--bgl-font);
92
+ font-size: var(--bgl-font-size);
93
+ font-weight: 400;
94
+ line-height: 1.65;
95
+ width: auto;
96
+ height: auto;
97
+ color: var(--bgl-text-color);
98
+ }
99
+
100
+ a {
101
+ background-color: transparent;
102
+ cursor: pointer;
103
+ display: inline-block;
104
+ color: inherit;
105
+ }
106
+
107
+ a:active,
108
+ a:hover {
109
+ outline: 0;
110
+ }
111
+
112
+ b,
113
+ strong {
114
+ font-weight: bold;
115
+ }
116
+
117
+ hr {
118
+ box-sizing: content-box;
119
+ }
120
+
121
+ img,
122
+ video,
123
+ canvas,
124
+ audio,
125
+ iframe,
126
+ embed,
127
+ object {
128
+ max-width: 100%;
129
+ vertical-align: middle;
130
+ border: 0;
131
+ }
132
+
133
+ input,
134
+ button,
135
+ textarea,
136
+ select {
137
+ font: inherit;
138
+ }
139
+
140
+ button::-moz-focus-inner,
141
+ input::-moz-focus-inner {
142
+ border: 0;
143
+ padding: 0;
144
+ }
145
+
146
+ @media screen and (max-width: 910px) {
147
+ body {
148
+ min-height: 100vh;
149
+ min-height: -webkit-fill-available;
150
+ height: -webkit-fill-available;
151
+ }
152
+
153
+ html {
154
+ height: -webkit-fill-available;
155
+ }
156
+ }