@jrgermain/stylesheet 0.17.4 → 0.19.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 (11) hide show
  1. package/dist/enhance.js.map +1 -1
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +1 -0
  4. package/dist/{tokens.d.ts → lib/tokens.d.ts} +1 -15
  5. package/dist/lib/tokens.js +207 -0
  6. package/dist/stylesheet.css +1 -1
  7. package/dist/stylesheet.css.map +1 -1
  8. package/package.json +2 -7
  9. package/dist/enhance.d.ts +0 -0
  10. package/dist/tokens.js +0 -214
  11. package/dist/tokens.js.map +0 -7
package/dist/enhance.js.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/enhance.ts"],
3
+ "sources": ["../../src/enhance.ts"],
4
4
  "sourcesContent": ["// --------------------------------------------------------------------------------------\n// Enhancements\n// --------------------------------------------------------------------------------------\n// This script adds small UX tweaks for users with JavaScript enabled. In the spirit of\n// progressive enhancement, sites will be fully functional without it.\n//\n// This script does the following:\n// - Prevents layout shift when Modal, Drawer, and mobile Sidebar are opened\n// - Makes Sidebar fill available vertical space when Header is scrolled in/out of view\n// - Enables use of the `if-js-enabled` and `if-js-disabled` utility classes\n// --------------------------------------------------------------------------------------\n\n(async function () {\n /////////////////////////////\n // Initialize //\n /////////////////////////////\n\n // Ensure we're in a browser environment and exit early if not\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n console.warn(\n \"The Progressive Enhancements script was loaded in a non-browser environment. It's designed to run exclusively in the browser, so it won't do anything here.\",\n );\n return;\n }\n\n // Wait for document to be done loading before we continue\n await new Promise<void>((resolve) => {\n if (document.readyState !== \"complete\") {\n window.addEventListener(\"load\", () => resolve());\n } else {\n resolve();\n }\n });\n\n /////////////////////////////\n // Globals & Utils //\n /////////////////////////////\n\n const $root = document.querySelector(\"html\");\n const $app = document.querySelector<HTMLElement>(\".app\");\n const $appBody = document.querySelector<HTMLElement>(\".app-body\");\n const $appContent = document.querySelector<HTMLElement>(\".app-content\");\n const $headerContent = document.querySelector<HTMLElement>(\n \".app-header-content\",\n );\n const $sidebarContent = document.querySelector<HTMLElement>(\n \".app-sidebar-content\",\n );\n const $sidebarToggle = document.querySelector<HTMLInputElement>(\n \".app-sidebar-toggle input[type='checkbox']\",\n );\n\n const smallWidthMediaQuery = window.matchMedia(\"(width < 55rem)\");\n\n const hasVerticalOverflow = () =>\n $root != null &&\n $appContent != null &&\n $appContent.getBoundingClientRect().bottom > $root.clientHeight;\n\n const isOverflowHidden = () =>\n $app != null && window.getComputedStyle($app).overflowY === \"hidden\";\n\n //////////////////////////////\n // Define Enhancements //\n //////////////////////////////\n\n const setScrollGutter = () => {\n const shouldReserveGutter = hasVerticalOverflow() && isOverflowHidden();\n\n if ($headerContent) {\n $headerContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n if ($appContent) {\n $appContent.dataset.jrgScrollGutter = String(shouldReserveGutter);\n }\n };\n\n const setJsEnabled = () => {\n if ($app) {\n $app.dataset.jrgJsEnabled = \"true\";\n }\n };\n\n const setSidebarHeight = () => {\n // Ensure all necessary elements are present\n if (!$root || !$sidebarContent || !$appBody) {\n return;\n }\n\n // On narrow viewports (where sidebar is an overlay), remove the inline style for height\n if (smallWidthMediaQuery.matches) {\n $sidebarContent.style.height = \"\";\n return;\n }\n\n // On medium and wide viewports, resize the sidebar to fill available vertical space\n const start = Math.max(0, $appBody.getBoundingClientRect().top);\n const end = $root.clientHeight;\n const availableHeight = Math.floor(end - start);\n $sidebarContent.style.height = `${availableHeight}px`;\n };\n\n //////////////////////////////\n // Set Up Listeners & Run //\n //////////////////////////////\n\n // Resize listeners\n window.addEventListener(\"resize\", setSidebarHeight);\n window.addEventListener(\"resize\", setScrollGutter);\n\n // Scroll listener\n window.addEventListener(\"scroll\", () => {\n // Only resize the sidebar if the body content overflows the page. This\n // prevents weird behavior when the browser has elastic scrolling.\n if (hasVerticalOverflow()) setSidebarHeight();\n });\n\n // Attach sidebar toggle listener if toggle is present\n $sidebarToggle?.addEventListener(\"change\", setScrollGutter);\n\n // Add Modal/Drawer toggle listener\n document\n .querySelectorAll<HTMLDialogElement>(\"dialog.modal, dialog.drawer\")\n .forEach((dialog) => {\n dialog.addEventListener(\"toggle\", setScrollGutter);\n });\n\n // Automatically add listeners to any new Modals/Drawers\n const observer = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n for (const node of mutation.addedNodes) {\n if (\n node instanceof HTMLDialogElement &&\n (node.classList.contains(\"modal\") ||\n node.classList.contains(\"drawer\"))\n ) {\n node.addEventListener(\"toggle\", setScrollGutter);\n }\n }\n }\n });\n observer.observe(document.body, { childList: true, subtree: true });\n\n // Run all enhancements on initial load\n setSidebarHeight();\n setScrollGutter();\n setJsEnabled();\n})().catch(console.error);\n"],
5
5
  "mappings": "cAYC,gBAAkB,CAMjB,GAAI,OAAO,OAAW,KAAe,OAAO,SAAa,IAAa,CACpE,QAAQ,KACN,6JACF,EACA,MACF,CAGA,MAAM,IAAI,QAAeA,GAAY,CAC/B,SAAS,aAAe,WAC1B,OAAO,iBAAiB,OAAQ,IAAMA,EAAQ,CAAC,EAE/CA,EAAQ,CAEZ,CAAC,EAMD,MAAMC,EAAQ,SAAS,cAAc,MAAM,EACrCC,EAAO,SAAS,cAA2B,MAAM,EACjDC,EAAW,SAAS,cAA2B,WAAW,EAC1DC,EAAc,SAAS,cAA2B,cAAc,EAChEC,EAAiB,SAAS,cAC9B,qBACF,EACMC,EAAkB,SAAS,cAC/B,sBACF,EACMC,EAAiB,SAAS,cAC9B,4CACF,EAEMC,EAAuB,OAAO,WAAW,iBAAiB,EAE1DC,EAAsB,IAC1BR,GAAS,MACTG,GAAe,MACfA,EAAY,sBAAsB,EAAE,OAASH,EAAM,aAE/CS,EAAmB,IACvBR,GAAQ,MAAQ,OAAO,iBAAiBA,CAAI,EAAE,YAAc,SAMxDS,EAAkB,IAAM,CAC5B,MAAMC,EAAsBH,EAAoB,GAAKC,EAAiB,EAElEL,IACFA,EAAe,QAAQ,gBAAkB,OAAOO,CAAmB,GAEjER,IACFA,EAAY,QAAQ,gBAAkB,OAAOQ,CAAmB,EAEpE,EAEMC,EAAe,IAAM,CACrBX,IACFA,EAAK,QAAQ,aAAe,OAEhC,EAEMY,EAAmB,IAAM,CAE7B,GAAI,CAACb,GAAS,CAACK,GAAmB,CAACH,EACjC,OAIF,GAAIK,EAAqB,QAAS,CAChCF,EAAgB,MAAM,OAAS,GAC/B,MACF,CAGA,MAAMS,EAAQ,KAAK,IAAI,EAAGZ,EAAS,sBAAsB,EAAE,GAAG,EACxDa,EAAMf,EAAM,aACZgB,EAAkB,KAAK,MAAMD,EAAMD,CAAK,EAC9CT,EAAgB,MAAM,OAAS,GAAGW,CAAe,IACnD,EAOA,OAAO,iBAAiB,SAAUH,CAAgB,EAClD,OAAO,iBAAiB,SAAUH,CAAe,EAGjD,OAAO,iBAAiB,SAAU,IAAM,CAGlCF,EAAoB,GAAGK,EAAiB,CAC9C,CAAC,EAGDP,GAAgB,iBAAiB,SAAUI,CAAe,EAG1D,SACG,iBAAoC,6BAA6B,EACjE,QAASO,GAAW,CACnBA,EAAO,iBAAiB,SAAUP,CAAe,CACnD,CAAC,EAGc,IAAI,iBAAkBQ,GAAc,CACnD,UAAWC,KAAYD,EACrB,UAAWE,KAAQD,EAAS,WAExBC,aAAgB,oBACfA,EAAK,UAAU,SAAS,OAAO,GAC9BA,EAAK,UAAU,SAAS,QAAQ,IAElCA,EAAK,iBAAiB,SAAUV,CAAe,CAIvD,CAAC,EACQ,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAGlEG,EAAiB,EACjBH,EAAgB,EAChBE,EAAa,CACf,GAAG,EAAE,MAAM,QAAQ,KAAK",
6
6
  "names": ["resolve", "$root", "$app", "$appBody", "$appContent", "$headerContent", "$sidebarContent", "$sidebarToggle", "smallWidthMediaQuery", "hasVerticalOverflow", "isOverflowHidden", "setScrollGutter", "shouldReserveGutter", "setJsEnabled", "setSidebarHeight", "start", "end", "availableHeight", "dialog", "mutations", "mutation", "node"]
package/dist/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./lib/tokens";
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./lib/tokens";
package/dist/{tokens.d.ts → lib/tokens.d.ts} RENAMED
@@ -119,21 +119,7 @@ export declare enum Color {
119
119
  ContrastBackground = "var(--color-contrast-background)",
120
120
  ContrastText = "var(--color-contrast-text)",
121
121
  Shadow = "var(--color-shadow)",
122
- Border = "var(--color-border)",
123
- /** @deprecated use SurfaceSecondary */
124
- Body = "var(--color-body)",
125
- /** @deprecated use SurfaceSecondary */
126
- Page = "var(--color-page)",
127
- /** @deprecated use SurfacePrimary */
128
- Surface = "var(--color-surface)",
129
- /** @deprecated use SurfacePrimary */
130
- BodyAlt = "var(--color-body-alt)",
131
- /** @deprecated use TextPrimary */
132
- BodyText = "var(--color-body-text)",
133
- /** @deprecated use TextSecondary */
134
- BodyTextAlt = "var(--color-body-text-alt)",
135
- /** @deprecated use ContrastText */
136
- BodyTextInvert = "var(--color-body-text-invert)"
122
+ Border = "var(--color-border)"
137
123
  }
138
124
  export declare enum FontSize {
139
125
  XS = "var(--font-size-xs)",
package/dist/lib/tokens.js ADDED
@@ -0,0 +1,207 @@
1
+ export var Color;
2
+ (function (Color) {
3
+ // Standard palette
4
+ Color["Brand1"] = "var(--color-brand-1)";
5
+ Color["Brand2"] = "var(--color-brand-2)";
6
+ Color["Brand3"] = "var(--color-brand-3)";
7
+ Color["Brand4"] = "var(--color-brand-4)";
8
+ Color["Brand5"] = "var(--color-brand-5)";
9
+ Color["Brand6"] = "var(--color-brand-6)";
10
+ Color["Brand7"] = "var(--color-brand-7)";
11
+ Color["Brand8"] = "var(--color-brand-8)";
12
+ Color["Brand9"] = "var(--color-brand-9)";
13
+ Color["BrandTransparent"] = "var(--color-brand-transparent)";
14
+ Color["BrandExtraTransparent"] = "var(--color-brand-extra-transparent)";
15
+ Color["Red1"] = "var(--color-red-1)";
16
+ Color["Red2"] = "var(--color-red-2)";
17
+ Color["Red3"] = "var(--color-red-3)";
18
+ Color["Red4"] = "var(--color-red-4)";
19
+ Color["Red5"] = "var(--color-red-5)";
20
+ Color["Red6"] = "var(--color-red-6)";
21
+ Color["Red7"] = "var(--color-red-7)";
22
+ Color["Red8"] = "var(--color-red-8)";
23
+ Color["Red9"] = "var(--color-red-9)";
24
+ Color["RedTransparent"] = "var(--color-red-transparent)";
25
+ Color["RedExtraTransparent"] = "var(--color-red-extra-transparent)";
26
+ Color["Orange1"] = "var(--color-orange-1)";
27
+ Color["Orange2"] = "var(--color-orange-2)";
28
+ Color["Orange3"] = "var(--color-orange-3)";
29
+ Color["Orange4"] = "var(--color-orange-4)";
30
+ Color["Orange5"] = "var(--color-orange-5)";
31
+ Color["Orange6"] = "var(--color-orange-6)";
32
+ Color["Orange7"] = "var(--color-orange-7)";
33
+ Color["Orange8"] = "var(--color-orange-8)";
34
+ Color["Orange9"] = "var(--color-orange-9)";
35
+ Color["OrangeTransparent"] = "var(--color-orange-transparent)";
36
+ Color["OrangeExtraTransparent"] = "var(--color-orange-extra-transparent)";
37
+ Color["Yellow1"] = "var(--color-yellow-1)";
38
+ Color["Yellow2"] = "var(--color-yellow-2)";
39
+ Color["Yellow3"] = "var(--color-yellow-3)";
40
+ Color["Yellow4"] = "var(--color-yellow-4)";
41
+ Color["Yellow5"] = "var(--color-yellow-5)";
42
+ Color["Yellow6"] = "var(--color-yellow-6)";
43
+ Color["Yellow7"] = "var(--color-yellow-7)";
44
+ Color["Yellow8"] = "var(--color-yellow-8)";
45
+ Color["Yellow9"] = "var(--color-yellow-9)";
46
+ Color["YellowTransparent"] = "var(--color-yellow-transparent)";
47
+ Color["YellowExtraTransparent"] = "var(--color-yellow-extra-transparent)";
48
+ Color["Green1"] = "var(--color-green-1)";
49
+ Color["Green2"] = "var(--color-green-2)";
50
+ Color["Green3"] = "var(--color-green-3)";
51
+ Color["Green4"] = "var(--color-green-4)";
52
+ Color["Green5"] = "var(--color-green-5)";
53
+ Color["Green6"] = "var(--color-green-6)";
54
+ Color["Green7"] = "var(--color-green-7)";
55
+ Color["Green8"] = "var(--color-green-8)";
56
+ Color["Green9"] = "var(--color-green-9)";
57
+ Color["GreenTransparent"] = "var(--color-green-transparent)";
58
+ Color["GreenExtraTransparent"] = "var(--color-green-extra-transparent)";
59
+ Color["Teal1"] = "var(--color-teal-1)";
60
+ Color["Teal2"] = "var(--color-teal-2)";
61
+ Color["Teal3"] = "var(--color-teal-3)";
62
+ Color["Teal4"] = "var(--color-teal-4)";
63
+ Color["Teal5"] = "var(--color-teal-5)";
64
+ Color["Teal6"] = "var(--color-teal-6)";
65
+ Color["Teal7"] = "var(--color-teal-7)";
66
+ Color["Teal8"] = "var(--color-teal-8)";
67
+ Color["Teal9"] = "var(--color-teal-9)";
68
+ Color["TealTransparent"] = "var(--color-teal-transparent)";
69
+ Color["TealExtraTransparent"] = "var(--color-teal-extra-transparent)";
70
+ Color["Blue1"] = "var(--color-blue-1)";
71
+ Color["Blue2"] = "var(--color-blue-2)";
72
+ Color["Blue3"] = "var(--color-blue-3)";
73
+ Color["Blue4"] = "var(--color-blue-4)";
74
+ Color["Blue5"] = "var(--color-blue-5)";
75
+ Color["Blue6"] = "var(--color-blue-6)";
76
+ Color["Blue7"] = "var(--color-blue-7)";
77
+ Color["Blue8"] = "var(--color-blue-8)";
78
+ Color["Blue9"] = "var(--color-blue-9)";
79
+ Color["BlueTransparent"] = "var(--color-blue-transparent)";
80
+ Color["BlueExtraTransparent"] = "var(--color-blue-extra-transparent)";
81
+ Color["Purple1"] = "var(--color-purple-1)";
82
+ Color["Purple2"] = "var(--color-purple-2)";
83
+ Color["Purple3"] = "var(--color-purple-3)";
84
+ Color["Purple4"] = "var(--color-purple-4)";
85
+ Color["Purple5"] = "var(--color-purple-5)";
86
+ Color["Purple6"] = "var(--color-purple-6)";
87
+ Color["Purple7"] = "var(--color-purple-7)";
88
+ Color["Purple8"] = "var(--color-purple-8)";
89
+ Color["Purple9"] = "var(--color-purple-9)";
90
+ Color["PurpleTransparent"] = "var(--color-purple-transparent)";
91
+ Color["PurpleExtraTransparent"] = "var(--color-purple-extra-transparent)";
92
+ Color["Magenta1"] = "var(--color-magenta-1)";
93
+ Color["Magenta2"] = "var(--color-magenta-2)";
94
+ Color["Magenta3"] = "var(--color-magenta-3)";
95
+ Color["Magenta4"] = "var(--color-magenta-4)";
96
+ Color["Magenta5"] = "var(--color-magenta-5)";
97
+ Color["Magenta6"] = "var(--color-magenta-6)";
98
+ Color["Magenta7"] = "var(--color-magenta-7)";
99
+ Color["Magenta8"] = "var(--color-magenta-8)";
100
+ Color["Magenta9"] = "var(--color-magenta-9)";
101
+ Color["MagentaTransparent"] = "var(--color-magenta-transparent)";
102
+ Color["MagentaExtraTransparent"] = "var(--color-magenta-extra-transparent)";
103
+ Color["Gray1"] = "var(--color-gray-1)";
104
+ Color["Gray2"] = "var(--color-gray-2)";
105
+ Color["Gray3"] = "var(--color-gray-3)";
106
+ Color["Gray4"] = "var(--color-gray-4)";
107
+ Color["Gray5"] = "var(--color-gray-5)";
108
+ Color["Gray6"] = "var(--color-gray-6)";
109
+ Color["Gray7"] = "var(--color-gray-7)";
110
+ Color["Gray8"] = "var(--color-gray-8)";
111
+ Color["Gray9"] = "var(--color-gray-9)";
112
+ Color["GrayTransparent"] = "var(--color-gray-transparent)";
113
+ Color["GrayExtraTransparent"] = "var(--color-gray-extra-transparent)";
114
+ // Semantic colors
115
+ Color["SurfacePrimary"] = "var(--color-surface-primary)";
116
+ Color["SurfaceSecondary"] = "var(--color-surface-secondary)";
117
+ Color["SurfaceTertiary"] = "var(--color-surface-tertiary)";
118
+ Color["TextPrimary"] = "var(--color-text-primary)";
119
+ Color["TextSecondary"] = "var(--color-text-secondary)";
120
+ Color["TextTertiary"] = "var(--color-text-tertiary)";
121
+ Color["ContrastBackground"] = "var(--color-contrast-background)";
122
+ Color["ContrastText"] = "var(--color-contrast-text)";
123
+ Color["Shadow"] = "var(--color-shadow)";
124
+ Color["Border"] = "var(--color-border)";
125
+ })(Color || (Color = {}));
126
+ export var FontSize;
127
+ (function (FontSize) {
128
+ FontSize["XS"] = "var(--font-size-xs)";
129
+ FontSize["S"] = "var(--font-size-s)";
130
+ FontSize["M"] = "var(--font-size-m)";
131
+ FontSize["L"] = "var(--font-size-l)";
132
+ FontSize["XL"] = "var(--font-size-xl)";
133
+ FontSize["XXL"] = "var(--font-size-2xl)";
134
+ FontSize["XXXL"] = "var(--font-size-3xl)";
135
+ FontSize["XXXXL"] = "var(--font-size-4xl)";
136
+ })(FontSize || (FontSize = {}));
137
+ export var FontWeight;
138
+ (function (FontWeight) {
139
+ FontWeight["Light"] = "var(--font-weight-light)";
140
+ FontWeight["Normal"] = "var(--font-weight-normal)";
141
+ FontWeight["Semibold"] = "var(--font-weight-semibold)";
142
+ FontWeight["Bold"] = "var(--font-weight-bold)";
143
+ FontWeight["Black"] = "var(--font-weight-black)";
144
+ })(FontWeight || (FontWeight = {}));
145
+ export var FontFamily;
146
+ (function (FontFamily) {
147
+ FontFamily["Body"] = "var(--font-family-body)";
148
+ FontFamily["Heading"] = "var(--font-family-heading)";
149
+ FontFamily["Mono"] = "var(--font-family-mono)";
150
+ })(FontFamily || (FontFamily = {}));
151
+ export var Space;
152
+ (function (Space) {
153
+ Space["None"] = "var(--space-none)";
154
+ Space["XXXS"] = "var(--space-3xs)";
155
+ Space["XXS"] = "var(--space-2xs)";
156
+ Space["XS"] = "var(--space-xs)";
157
+ Space["S"] = "var(--space-s)";
158
+ Space["M"] = "var(--space-m)";
159
+ Space["L"] = "var(--space-l)";
160
+ Space["XL"] = "var(--space-xl)";
161
+ Space["XXL"] = "var(--space-2xl)";
162
+ Space["XXXL"] = "var(--space-3xl)";
163
+ Space["BodyX"] = "var(--body-x)";
164
+ Space["BodyY"] = "var(--body-y)";
165
+ })(Space || (Space = {}));
166
+ export var Radius;
167
+ (function (Radius) {
168
+ Radius["None"] = "var(--radius-none)";
169
+ Radius["S"] = "var(--radius-s)";
170
+ Radius["M"] = "var(--radius-m)";
171
+ Radius["L"] = "var(--radius-l)";
172
+ Radius["XL"] = "var(--radius-xl)";
173
+ Radius["XXL"] = "var(--radius-2xl)";
174
+ Radius["Full"] = "var(--radius-full)";
175
+ })(Radius || (Radius = {}));
176
+ export var Shadow;
177
+ (function (Shadow) {
178
+ Shadow["None"] = "var(--shadow-none)";
179
+ Shadow["S"] = "var(--shadow-s)";
180
+ Shadow["M"] = "var(--shadow-m)";
181
+ Shadow["L"] = "var(--shadow-l)";
182
+ Shadow["XL"] = "var(--shadow-xl)";
183
+ })(Shadow || (Shadow = {}));
184
+ export var BorderWidth;
185
+ (function (BorderWidth) {
186
+ BorderWidth["None"] = "var(--border-none)";
187
+ BorderWidth["S"] = "var(--border-s)";
188
+ BorderWidth["M"] = "var(--border-m)";
189
+ BorderWidth["L"] = "var(--border-l)";
190
+ BorderWidth["XL"] = "var(--border-xl)";
191
+ })(BorderWidth || (BorderWidth = {}));
192
+ export var EasingFunction;
193
+ (function (EasingFunction) {
194
+ EasingFunction["Default"] = "var(--ease-default)";
195
+ EasingFunction["Out"] = "var(--ease-out)";
196
+ EasingFunction["In"] = "var(--ease-in)";
197
+ EasingFunction["Both"] = "var(--ease-both)";
198
+ EasingFunction["BothSubtle"] = "var(--ease-both-subtle)";
199
+ EasingFunction["Spring"] = "var(--ease-spring)";
200
+ })(EasingFunction || (EasingFunction = {}));
201
+ export var Duration;
202
+ (function (Duration) {
203
+ Duration["S"] = "var(--duration-s)";
204
+ Duration["M"] = "var(--duration-m)";
205
+ Duration["L"] = "var(--duration-l)";
206
+ Duration["XL"] = "var(--duration-xl)";
207
+ })(Duration || (Duration = {}));