@jfrader/styling 0.0.0-stage → 0.19.1
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/LICENSE +21 -0
- package/dist/css.js +2 -0
- package/dist/index.js +7 -0
- package/dist/media.js +5 -0
- package/dist/native-scrollbar.js +11 -0
- package/dist/sx.js +29 -0
- package/dist/theme.js +6 -0
- package/dist/types/css.d.ts +3 -0
- package/dist/types/index.d.ts +5 -0
- package/dist/types/media.d.ts +4 -0
- package/dist/types/native-scrollbar.d.ts +1 -0
- package/dist/types/sx.d.ts +17 -0
- package/dist/types/theme.d.ts +219 -0
- package/package.json +54 -3
- package/README.md +0 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 jfrader
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/css.js
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { CacheProvider as e, ClassNames as t, EmotionThemeProvider as n, css as r, keyframes as i, useEmotionTheme as a } from "./css.js";
|
|
3
|
+
import { COARSE_POINTER as o, FORCED_COLORS as s, REDUCED_MOTION as c, REDUCED_TRANSPARENCY as l } from "./media.js";
|
|
4
|
+
import { nativeScrollbarStyle as u } from "./native-scrollbar.js";
|
|
5
|
+
import { WithSx as d, withoutSx as f } from "./sx.js";
|
|
6
|
+
import { theme as p } from "./theme.js";
|
|
7
|
+
export { o as COARSE_POINTER, e as CacheProvider, t as ClassNames, n as EmotionThemeProvider, s as FORCED_COLORS, c as REDUCED_MOTION, l as REDUCED_TRANSPARENCY, d as WithSx, r as css, i as keyframes, u as nativeScrollbarStyle, p as theme, a as useEmotionTheme, f as withoutSx };
|
package/dist/media.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
//#region src/media.ts
|
|
3
|
+
var e = "@media (prefers-reduced-motion: reduce)", t = "@media (forced-colors: active)", n = "@media (pointer: coarse)", r = "@media (prefers-reduced-transparency: reduce)";
|
|
4
|
+
//#endregion
|
|
5
|
+
export { n as COARSE_POINTER, t as FORCED_COLORS, e as REDUCED_MOTION, r as REDUCED_TRANSPARENCY };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { css as e } from "./css.js";
|
|
3
|
+
import { FORCED_COLORS as t } from "./media.js";
|
|
4
|
+
import { vars as n } from "@jfrader/tokens/vars";
|
|
5
|
+
//#region src/native-scrollbar.ts
|
|
6
|
+
var r = e({
|
|
7
|
+
scrollbarColor: `${n.color.borderControl} transparent`,
|
|
8
|
+
[t]: { scrollbarColor: "auto" }
|
|
9
|
+
});
|
|
10
|
+
//#endregion
|
|
11
|
+
export { r as nativeScrollbarStyle };
|
package/dist/sx.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { ClassNames as e } from "./css.js";
|
|
3
|
+
import { nativeScrollbarStyle as t } from "./native-scrollbar.js";
|
|
4
|
+
import { jsx as n } from "@emotion/react/jsx-runtime";
|
|
5
|
+
//#region src/sx.tsx
|
|
6
|
+
function r(e) {
|
|
7
|
+
if (!e) return;
|
|
8
|
+
let { sx: t, ...n } = e;
|
|
9
|
+
return n;
|
|
10
|
+
}
|
|
11
|
+
var i = (e) => Array.isArray(e);
|
|
12
|
+
function a(e, t) {
|
|
13
|
+
return typeof e == "function" ? a(e(t), t) : i(e) ? e.map((e) => a(e, t)) : e;
|
|
14
|
+
}
|
|
15
|
+
function o({ className: t, styles: r, children: i }) {
|
|
16
|
+
return /* @__PURE__ */ n(e, { children: ({ css: e, cx: n, theme: o }) => i(r === void 0 ? t : n(e(a(r, o)), t)) });
|
|
17
|
+
}
|
|
18
|
+
function s({ className: e, styles: r, sx: i, children: a }) {
|
|
19
|
+
return /* @__PURE__ */ n(o, {
|
|
20
|
+
styles: i,
|
|
21
|
+
children: (s) => /* @__PURE__ */ n(o, {
|
|
22
|
+
className: i === void 0 ? e : [e, s].filter(Boolean).join(" "),
|
|
23
|
+
styles: [t, r],
|
|
24
|
+
children: a
|
|
25
|
+
})
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
export { s as WithSx, r as withoutSx };
|
package/dist/theme.js
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { CacheProvider, ClassNames, css, keyframes, ThemeProvider as EmotionThemeProvider, useTheme as useEmotionTheme, } from '@emotion/react';
|
|
2
|
+
export type { ClassNamesContent, Interpolation, SerializedStyles, Theme } from '@emotion/react';
|
|
3
|
+
export type { JfraderTheme } from './theme';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
|
|
2
|
+
export declare const FORCED_COLORS = "@media (forced-colors: active)";
|
|
3
|
+
export declare const COARSE_POINTER = "@media (pointer: coarse)";
|
|
4
|
+
export declare const REDUCED_TRANSPARENCY = "@media (prefers-reduced-transparency: reduce)";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const nativeScrollbarStyle: import("@emotion/react").SerializedStyles;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type Interpolation, type Theme } from './css';
|
|
3
|
+
export interface SxProps {
|
|
4
|
+
/** The public style-override prop. Accepts theme-aware style values and applies last. */
|
|
5
|
+
sx?: Interpolation<Theme>;
|
|
6
|
+
}
|
|
7
|
+
export declare function withoutSx<Props extends SxProps>(props: Props | undefined): Omit<Props, 'sx'> | undefined;
|
|
8
|
+
interface ClassNameProps {
|
|
9
|
+
className?: string;
|
|
10
|
+
children: (className: string | undefined) => ReactNode;
|
|
11
|
+
}
|
|
12
|
+
interface WithSxProps extends SxProps, ClassNameProps {
|
|
13
|
+
/** The part's own styles, merged first. */
|
|
14
|
+
styles?: Interpolation<Theme>;
|
|
15
|
+
}
|
|
16
|
+
export declare function WithSx({ className, styles, sx, children }: WithSxProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
export declare const theme: {
|
|
2
|
+
readonly color: {
|
|
3
|
+
readonly bg: "var(--ui-color-bg)";
|
|
4
|
+
readonly bgSoft: "var(--ui-color-bg-soft)";
|
|
5
|
+
readonly surface: "var(--ui-color-surface)";
|
|
6
|
+
readonly surfaceRaised: "var(--ui-color-surface-raised)";
|
|
7
|
+
readonly surfaceHover: "var(--ui-color-surface-hover)";
|
|
8
|
+
readonly surfaceInset: "var(--ui-color-surface-inset)";
|
|
9
|
+
readonly colorPickerCheckerA: "var(--ui-color-color-picker-checker-a)";
|
|
10
|
+
readonly colorPickerCheckerB: "var(--ui-color-color-picker-checker-b)";
|
|
11
|
+
readonly colorPickerWhite: "var(--ui-color-color-picker-white)";
|
|
12
|
+
readonly colorPickerBlack: "var(--ui-color-color-picker-black)";
|
|
13
|
+
readonly border: "var(--ui-color-border)";
|
|
14
|
+
readonly borderSubtle: "var(--ui-color-border-subtle)";
|
|
15
|
+
readonly borderStrong: "var(--ui-color-border-strong)";
|
|
16
|
+
readonly borderControl: "var(--ui-color-border-control)";
|
|
17
|
+
readonly text: "var(--ui-color-text)";
|
|
18
|
+
readonly textMuted: "var(--ui-color-text-muted)";
|
|
19
|
+
readonly textSubtle: "var(--ui-color-text-subtle)";
|
|
20
|
+
readonly accent: "var(--ui-color-accent)";
|
|
21
|
+
readonly accentHover: "var(--ui-color-accent-hover)";
|
|
22
|
+
readonly accentContrast: "var(--ui-color-accent-contrast)";
|
|
23
|
+
readonly accentText: "var(--ui-color-accent-text)";
|
|
24
|
+
readonly accentSoft: "var(--ui-color-accent-soft)";
|
|
25
|
+
readonly accentSoftHover: "var(--ui-color-accent-soft-hover)";
|
|
26
|
+
readonly accentBorder: "var(--ui-color-accent-border)";
|
|
27
|
+
readonly voiceOrbCloudListening: "var(--ui-color-voice-orb-cloud-listening)";
|
|
28
|
+
readonly voiceOrbCloudThinking: "var(--ui-color-voice-orb-cloud-thinking)";
|
|
29
|
+
readonly voiceOrbCloudSpeaking: "var(--ui-color-voice-orb-cloud-speaking)";
|
|
30
|
+
readonly danger: "var(--ui-color-danger)";
|
|
31
|
+
readonly dangerHover: "var(--ui-color-danger-hover)";
|
|
32
|
+
readonly dangerContrast: "var(--ui-color-danger-contrast)";
|
|
33
|
+
readonly dangerText: "var(--ui-color-danger-text)";
|
|
34
|
+
readonly dangerSoft: "var(--ui-color-danger-soft)";
|
|
35
|
+
readonly dangerSoftHover: "var(--ui-color-danger-soft-hover)";
|
|
36
|
+
readonly dangerBorder: "var(--ui-color-danger-border)";
|
|
37
|
+
readonly warning: "var(--ui-color-warning)";
|
|
38
|
+
readonly warningSoft: "var(--ui-color-warning-soft)";
|
|
39
|
+
readonly success: "var(--ui-color-success)";
|
|
40
|
+
readonly successSoft: "var(--ui-color-success-soft)";
|
|
41
|
+
readonly info: "var(--ui-color-info)";
|
|
42
|
+
readonly infoSoft: "var(--ui-color-info-soft)";
|
|
43
|
+
readonly focusRing: "var(--ui-color-focus-ring)";
|
|
44
|
+
readonly signatureInkBlack: "var(--ui-color-signature-ink-black)";
|
|
45
|
+
readonly signatureInkBlue: "var(--ui-color-signature-ink-blue)";
|
|
46
|
+
readonly signatureInkViolet: "var(--ui-color-signature-ink-violet)";
|
|
47
|
+
readonly cardFace: "var(--ui-color-card-face)";
|
|
48
|
+
readonly cardInk: "var(--ui-color-card-ink)";
|
|
49
|
+
readonly cardRed: "var(--ui-color-card-red)";
|
|
50
|
+
readonly chipWhite: "var(--ui-color-chip-white)";
|
|
51
|
+
readonly chipRed: "var(--ui-color-chip-red)";
|
|
52
|
+
readonly chipGreen: "var(--ui-color-chip-green)";
|
|
53
|
+
readonly chipBlack: "var(--ui-color-chip-black)";
|
|
54
|
+
readonly chipPurple: "var(--ui-color-chip-purple)";
|
|
55
|
+
readonly chipGold: "var(--ui-color-chip-gold)";
|
|
56
|
+
readonly chipSpot: "var(--ui-color-chip-spot)";
|
|
57
|
+
readonly chipInk: "var(--ui-color-chip-ink)";
|
|
58
|
+
readonly surfaceGlass: "var(--ui-color-surface-glass)";
|
|
59
|
+
readonly surfaceHighlight: "var(--ui-color-surface-highlight)";
|
|
60
|
+
readonly surfaceSheen: "var(--ui-color-surface-sheen)";
|
|
61
|
+
readonly surfaceHoloCyan: "var(--ui-color-surface-holo-cyan)";
|
|
62
|
+
readonly surfaceHoloRose: "var(--ui-color-surface-holo-rose)";
|
|
63
|
+
readonly scrim: "var(--ui-color-scrim)";
|
|
64
|
+
readonly syntaxKeyword: "var(--ui-color-syntax-keyword)";
|
|
65
|
+
readonly syntaxString: "var(--ui-color-syntax-string)";
|
|
66
|
+
readonly syntaxConstant: "var(--ui-color-syntax-constant)";
|
|
67
|
+
readonly syntaxFunction: "var(--ui-color-syntax-function)";
|
|
68
|
+
readonly syntaxType: "var(--ui-color-syntax-type)";
|
|
69
|
+
readonly syntaxTag: "var(--ui-color-syntax-tag)";
|
|
70
|
+
readonly syntaxProperty: "var(--ui-color-syntax-property)";
|
|
71
|
+
readonly syntaxComment: "var(--ui-color-syntax-comment)";
|
|
72
|
+
readonly syntaxPunctuation: "var(--ui-color-syntax-punctuation)";
|
|
73
|
+
};
|
|
74
|
+
readonly shadow: {
|
|
75
|
+
readonly raised: "var(--ui-shadow-raised)";
|
|
76
|
+
readonly overlay: "var(--ui-shadow-overlay)";
|
|
77
|
+
readonly floating: "var(--ui-shadow-floating)";
|
|
78
|
+
readonly cardFlight: "var(--ui-shadow-card-flight)";
|
|
79
|
+
};
|
|
80
|
+
readonly zIndex: {
|
|
81
|
+
readonly popover: "var(--ui-z-index-popover)";
|
|
82
|
+
readonly modal: "var(--ui-z-index-modal)";
|
|
83
|
+
readonly toast: "var(--ui-z-index-toast)";
|
|
84
|
+
readonly cardFlight: "var(--ui-z-index-card-flight)";
|
|
85
|
+
};
|
|
86
|
+
readonly cardMaterial: {
|
|
87
|
+
readonly blur: "var(--ui-card-material-blur)";
|
|
88
|
+
readonly tilt: "var(--ui-card-material-tilt)";
|
|
89
|
+
readonly perspective: "var(--ui-card-material-perspective)";
|
|
90
|
+
};
|
|
91
|
+
readonly radius: {
|
|
92
|
+
readonly sm: "var(--ui-radius-sm)";
|
|
93
|
+
readonly md: "var(--ui-radius-md)";
|
|
94
|
+
readonly lg: "var(--ui-radius-lg)";
|
|
95
|
+
readonly xl: "var(--ui-radius-xl)";
|
|
96
|
+
readonly full: "var(--ui-radius-full)";
|
|
97
|
+
};
|
|
98
|
+
readonly space: {
|
|
99
|
+
readonly "1": "var(--ui-space-1)";
|
|
100
|
+
readonly "2": "var(--ui-space-2)";
|
|
101
|
+
readonly "3": "var(--ui-space-3)";
|
|
102
|
+
readonly "4": "var(--ui-space-4)";
|
|
103
|
+
readonly "5": "var(--ui-space-5)";
|
|
104
|
+
readonly "6": "var(--ui-space-6)";
|
|
105
|
+
readonly "8": "var(--ui-space-8)";
|
|
106
|
+
readonly "10": "var(--ui-space-10)";
|
|
107
|
+
readonly "12": "var(--ui-space-12)";
|
|
108
|
+
};
|
|
109
|
+
readonly textSize: {
|
|
110
|
+
readonly xs: "var(--ui-text-size-xs)";
|
|
111
|
+
readonly sm: "var(--ui-text-size-sm)";
|
|
112
|
+
readonly md: "var(--ui-text-size-md)";
|
|
113
|
+
readonly lg: "var(--ui-text-size-lg)";
|
|
114
|
+
readonly xl: "var(--ui-text-size-xl)";
|
|
115
|
+
readonly "2xl": "var(--ui-text-size-2xl)";
|
|
116
|
+
readonly "3xl": "var(--ui-text-size-3xl)";
|
|
117
|
+
};
|
|
118
|
+
readonly lineHeight: {
|
|
119
|
+
readonly tight: "var(--ui-line-height-tight)";
|
|
120
|
+
readonly base: "var(--ui-line-height-base)";
|
|
121
|
+
readonly relaxed: "var(--ui-line-height-relaxed)";
|
|
122
|
+
};
|
|
123
|
+
readonly fontWeight: {
|
|
124
|
+
readonly regular: "var(--ui-font-weight-regular)";
|
|
125
|
+
readonly medium: "var(--ui-font-weight-medium)";
|
|
126
|
+
readonly semibold: "var(--ui-font-weight-semibold)";
|
|
127
|
+
readonly bold: "var(--ui-font-weight-bold)";
|
|
128
|
+
};
|
|
129
|
+
readonly editorial: {
|
|
130
|
+
readonly headline: {
|
|
131
|
+
readonly lead: "var(--ui-editorial-headline-lead)";
|
|
132
|
+
readonly secondary: "var(--ui-editorial-headline-secondary)";
|
|
133
|
+
readonly standard: "var(--ui-editorial-headline-standard)";
|
|
134
|
+
readonly brief: "var(--ui-editorial-headline-brief)";
|
|
135
|
+
};
|
|
136
|
+
readonly dek: "var(--ui-editorial-dek)";
|
|
137
|
+
readonly summary: "var(--ui-editorial-summary)";
|
|
138
|
+
readonly lede: "var(--ui-editorial-lede)";
|
|
139
|
+
readonly body: "var(--ui-editorial-body)";
|
|
140
|
+
readonly meta: "var(--ui-editorial-meta)";
|
|
141
|
+
readonly kicker: "var(--ui-editorial-kicker)";
|
|
142
|
+
readonly measure: "var(--ui-editorial-measure)";
|
|
143
|
+
readonly centeredMeasure: "var(--ui-editorial-centered-measure)";
|
|
144
|
+
readonly dropCap: "var(--ui-editorial-drop-cap)";
|
|
145
|
+
readonly hit: "var(--ui-editorial-hit)";
|
|
146
|
+
readonly lineHeight: {
|
|
147
|
+
readonly lead: "var(--ui-editorial-line-height-lead)";
|
|
148
|
+
readonly secondary: "var(--ui-editorial-line-height-secondary)";
|
|
149
|
+
readonly brief: "var(--ui-editorial-line-height-brief)";
|
|
150
|
+
readonly dropCap: "var(--ui-editorial-line-height-drop-cap)";
|
|
151
|
+
};
|
|
152
|
+
readonly tracking: {
|
|
153
|
+
readonly headline: "var(--ui-editorial-tracking-headline)";
|
|
154
|
+
readonly secondary: "var(--ui-editorial-tracking-secondary)";
|
|
155
|
+
readonly standard: "var(--ui-editorial-tracking-standard)";
|
|
156
|
+
readonly label: "var(--ui-editorial-tracking-label)";
|
|
157
|
+
readonly kicker: "var(--ui-editorial-tracking-kicker)";
|
|
158
|
+
};
|
|
159
|
+
readonly rule: {
|
|
160
|
+
readonly thin: "var(--ui-editorial-rule-thin)";
|
|
161
|
+
readonly strong: "var(--ui-editorial-rule-strong)";
|
|
162
|
+
};
|
|
163
|
+
readonly breakpoint: {
|
|
164
|
+
readonly columns: "var(--ui-editorial-breakpoint-columns)";
|
|
165
|
+
readonly desktop: "var(--ui-editorial-breakpoint-desktop)";
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
readonly font: {
|
|
169
|
+
readonly sans: "var(--ui-font-sans)";
|
|
170
|
+
readonly mono: "var(--ui-font-mono)";
|
|
171
|
+
};
|
|
172
|
+
readonly motion: {
|
|
173
|
+
readonly duration: {
|
|
174
|
+
readonly fast: "var(--ui-motion-duration-fast)";
|
|
175
|
+
readonly base: "var(--ui-motion-duration-base)";
|
|
176
|
+
readonly slow: "var(--ui-motion-duration-slow)";
|
|
177
|
+
readonly presence: "var(--ui-motion-duration-presence)";
|
|
178
|
+
readonly cardFlip: "var(--ui-motion-duration-card-flip)";
|
|
179
|
+
readonly cardDeal: "var(--ui-motion-duration-card-deal)";
|
|
180
|
+
readonly cardDealStagger: "var(--ui-motion-duration-card-deal-stagger)";
|
|
181
|
+
readonly cardPlayOwn: "var(--ui-motion-duration-card-play-own)";
|
|
182
|
+
readonly cardPlay: "var(--ui-motion-duration-card-play)";
|
|
183
|
+
readonly playedPile: "var(--ui-motion-duration-played-pile)";
|
|
184
|
+
readonly callFade: "var(--ui-motion-duration-call-fade)";
|
|
185
|
+
readonly callSlam: "var(--ui-motion-duration-call-slam)";
|
|
186
|
+
readonly callShake: "var(--ui-motion-duration-call-shake)";
|
|
187
|
+
readonly callShakeDelay: "var(--ui-motion-duration-call-shake-delay)";
|
|
188
|
+
};
|
|
189
|
+
readonly easeStandard: "var(--ui-motion-ease-standard)";
|
|
190
|
+
readonly easePresence: "var(--ui-motion-ease-presence)";
|
|
191
|
+
readonly easeCardFlip: "var(--ui-motion-ease-card-flip)";
|
|
192
|
+
readonly easePlayedPile: "var(--ui-motion-ease-played-pile)";
|
|
193
|
+
readonly easePlayedPileShadow: "var(--ui-motion-ease-played-pile-shadow)";
|
|
194
|
+
};
|
|
195
|
+
readonly size: {
|
|
196
|
+
readonly controlSm: "var(--ui-size-control-sm)";
|
|
197
|
+
readonly controlMd: "var(--ui-size-control-md)";
|
|
198
|
+
readonly controlLg: "var(--ui-size-control-lg)";
|
|
199
|
+
readonly touch: "var(--ui-size-touch)";
|
|
200
|
+
readonly personAvatarLg: "var(--ui-size-person-avatar-lg)";
|
|
201
|
+
readonly emblemSm: "var(--ui-size-emblem-sm)";
|
|
202
|
+
readonly emblemMd: "var(--ui-size-emblem-md)";
|
|
203
|
+
readonly emblemLg: "var(--ui-size-emblem-lg)";
|
|
204
|
+
readonly emblemXl: "var(--ui-size-emblem-xl)";
|
|
205
|
+
readonly gameCardSm: "var(--ui-size-game-card-sm)";
|
|
206
|
+
readonly gameCardMd: "var(--ui-size-game-card-md)";
|
|
207
|
+
readonly gameCardLg: "var(--ui-size-game-card-lg)";
|
|
208
|
+
readonly gameCardXl: "var(--ui-size-game-card-xl)";
|
|
209
|
+
readonly gameCardPerspective: "var(--ui-size-game-card-perspective)";
|
|
210
|
+
readonly dialogStackBreakpoint: "var(--ui-size-dialog-stack-breakpoint)";
|
|
211
|
+
readonly dialogStackSheetPeek: "var(--ui-size-dialog-stack-sheet-peek)";
|
|
212
|
+
readonly dialogStackDialogPeek: "var(--ui-size-dialog-stack-dialog-peek)";
|
|
213
|
+
};
|
|
214
|
+
};
|
|
215
|
+
export type JfraderTheme = typeof theme;
|
|
216
|
+
declare module '@emotion/react' {
|
|
217
|
+
interface Theme extends JfraderTheme {
|
|
218
|
+
}
|
|
219
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,57 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jfrader/styling",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.19.1",
|
|
4
|
+
"description": "Shared Emotion styling seam for @jfrader/icons and @jfrader/ui.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/types/index.d.ts",
|
|
13
|
+
"import": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./css": {
|
|
16
|
+
"types": "./dist/types/css.d.ts",
|
|
17
|
+
"import": "./dist/css.js"
|
|
18
|
+
},
|
|
19
|
+
"./sx": {
|
|
20
|
+
"types": "./dist/types/sx.d.ts",
|
|
21
|
+
"import": "./dist/sx.js"
|
|
22
|
+
},
|
|
23
|
+
"./native-scrollbar": {
|
|
24
|
+
"types": "./dist/types/native-scrollbar.d.ts",
|
|
25
|
+
"import": "./dist/native-scrollbar.js"
|
|
26
|
+
},
|
|
27
|
+
"./theme": {
|
|
28
|
+
"types": "./dist/types/theme.d.ts",
|
|
29
|
+
"import": "./dist/theme.js"
|
|
30
|
+
},
|
|
31
|
+
"./media": {
|
|
32
|
+
"types": "./dist/types/media.d.ts",
|
|
33
|
+
"import": "./dist/media.js"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"@emotion/react": "^11.14.0",
|
|
41
|
+
"@jfrader/tokens": "0.19.1"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"react": "^19.0.0"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@types/node": "^26.6.5",
|
|
48
|
+
"@vitejs/plugin-react": "^6.1.2",
|
|
49
|
+
"@types/react": "^19.3.0",
|
|
50
|
+
"typescript": "^7.0.2",
|
|
51
|
+
"vite": "^8.3.4"
|
|
52
|
+
},
|
|
53
|
+
"scripts": {
|
|
54
|
+
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
55
|
+
"build": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json"
|
|
56
|
+
}
|
|
6
57
|
}
|
package/README.md
DELETED