rothzerg-ui 0.1.6 → 0.1.7
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/README.md
CHANGED
|
@@ -13,7 +13,7 @@ A highly customizable, production-ready React component library built with TypeS
|
|
|
13
13
|
- **40+ page blocks** — Hero, Dashboard, Kanban, Pricing, AuthForm, and more
|
|
14
14
|
- **25 React hooks** — useDebounce, useLocalStorage, useMediaQuery, and more
|
|
15
15
|
- **20 utility functions** — formatDate, formatNumber, slugify, deepEqual, and more
|
|
16
|
-
- **Fully customizable** — every token is a CSS custom property, configured via `rothzerg.config.
|
|
16
|
+
- **Fully customizable** — every token is a CSS custom property, configured via `rothzerg.config.ts`
|
|
17
17
|
- **BEM methodology** — semantic class names, easy to override
|
|
18
18
|
- **TailwindCSS 4.2** — compiled at build time, no Tailwind required in your project
|
|
19
19
|
- **Accessible** — built on Radix UI primitives, WCAG 2.1 AA
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RothzergProvider.cjs","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.
|
|
1
|
+
{"version":3,"file":"RothzergProvider.cjs","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.ts default export */\n config?: RothzergConfig;\n /** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */\n targetSelector?: string;\n}\n\nfunction camelToKebab(str: string): string {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/**\n * RothzergProvider\n *\n * Wrap your application with this provider to apply your custom theme.\n * It injects your rothzerg.config.ts values as CSS custom properties at runtime.\n *\n * @example\n * import { RothzergProvider } from 'rothzerg-ui';\n * import config from './rothzerg.config';\n *\n * export default function App() {\n * return (\n * <RothzergProvider config={config}>\n * <YourApp />\n * </RothzergProvider>\n * );\n * }\n */\nexport function RothzergProvider({\n children,\n config,\n}: RothzergProviderProps) {\n const mergedConfig = useMemo(\n () => mergeConfig(defaultConfig, config),\n [config],\n );\n\n useEffect(() => {\n const { theme, darkMode, cssPrefix: prefix } = mergedConfig;\n\n const rootVars: string[] = [];\n\n // Collect color tokens\n if (theme.colors) {\n for (const [key, value] of Object.entries(theme.colors)) {\n if (value) {\n rootVars.push(` --${prefix}-color-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect border radius tokens\n if (theme.borderRadius) {\n for (const [key, value] of Object.entries(theme.borderRadius)) {\n if (value) {\n rootVars.push(` --${prefix}-radius-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect font tokens\n if (theme.fonts) {\n for (const [key, value] of Object.entries(theme.fonts)) {\n if (value) {\n rootVars.push(` --${prefix}-font-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect animation tokens\n if (theme.animation) {\n const { duration, durationSlow, easing, easingBounce } = theme.animation;\n if (duration) rootVars.push(` --${prefix}-animation-duration: ${duration};`);\n if (durationSlow) rootVars.push(` --${prefix}-animation-duration-slow: ${durationSlow};`);\n if (easing) rootVars.push(` --${prefix}-animation-easing: ${easing};`);\n if (easingBounce) rootVars.push(` --${prefix}-animation-easing-bounce: ${easingBounce};`);\n }\n\n // Collect shadow tokens\n if (theme.shadows) {\n for (const [key, value] of Object.entries(theme.shadows)) {\n if (value) {\n rootVars.push(` --${prefix}-shadow-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Build dark mode vars\n let darkRule = '';\n if (theme.darkColors) {\n const darkVars = Object.entries(theme.darkColors)\n .filter(([, v]) => v !== undefined)\n .map(([k, v]) => ` --${prefix}-color-${camelToKebab(k)}: ${v};`)\n .join('\\n');\n\n darkRule = darkMode === 'media'\n ? `@media (prefers-color-scheme: dark) { :root {\\n${darkVars}\\n} }`\n : `.dark {\\n${darkVars}\\n}`;\n }\n\n // Inject all tokens as stylesheet rules (not inline styles) so dark class can override\n let styleEl = document.getElementById('rz-tokens') as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = document.createElement('style');\n styleEl.id = 'rz-tokens';\n document.head.appendChild(styleEl);\n }\n styleEl.textContent = `:root {\\n${rootVars.join('\\n')}\\n}\\n${darkRule}`;\n }, [mergedConfig]);\n\n return (\n <RothzergContext.Provider value={{ config: mergedConfig }}>\n {children}\n </RothzergContext.Provider>\n );\n}\n"],"names":["createContext","defaultConfig","useContext","useMemo","mergeConfig","useEffect","jsx"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ interface RothzergContextValue {
|
|
|
6
6
|
export declare function useRothzerg(): RothzergContextValue;
|
|
7
7
|
export interface RothzergProviderProps {
|
|
8
8
|
children: React.ReactNode;
|
|
9
|
-
/** Your rothzerg.config.
|
|
9
|
+
/** Your rothzerg.config.ts default export */
|
|
10
10
|
config?: RothzergConfig;
|
|
11
11
|
/** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */
|
|
12
12
|
targetSelector?: string;
|
|
@@ -15,7 +15,7 @@ export interface RothzergProviderProps {
|
|
|
15
15
|
* RothzergProvider
|
|
16
16
|
*
|
|
17
17
|
* Wrap your application with this provider to apply your custom theme.
|
|
18
|
-
* It injects your rothzerg.config.
|
|
18
|
+
* It injects your rothzerg.config.ts values as CSS custom properties at runtime.
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
21
|
* import { RothzergProvider } from 'rothzerg-ui';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RothzergProvider.js","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.
|
|
1
|
+
{"version":3,"file":"RothzergProvider.js","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.ts default export */\n config?: RothzergConfig;\n /** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */\n targetSelector?: string;\n}\n\nfunction camelToKebab(str: string): string {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/**\n * RothzergProvider\n *\n * Wrap your application with this provider to apply your custom theme.\n * It injects your rothzerg.config.ts values as CSS custom properties at runtime.\n *\n * @example\n * import { RothzergProvider } from 'rothzerg-ui';\n * import config from './rothzerg.config';\n *\n * export default function App() {\n * return (\n * <RothzergProvider config={config}>\n * <YourApp />\n * </RothzergProvider>\n * );\n * }\n */\nexport function RothzergProvider({\n children,\n config,\n}: RothzergProviderProps) {\n const mergedConfig = useMemo(\n () => mergeConfig(defaultConfig, config),\n [config],\n );\n\n useEffect(() => {\n const { theme, darkMode, cssPrefix: prefix } = mergedConfig;\n\n const rootVars: string[] = [];\n\n // Collect color tokens\n if (theme.colors) {\n for (const [key, value] of Object.entries(theme.colors)) {\n if (value) {\n rootVars.push(` --${prefix}-color-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect border radius tokens\n if (theme.borderRadius) {\n for (const [key, value] of Object.entries(theme.borderRadius)) {\n if (value) {\n rootVars.push(` --${prefix}-radius-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect font tokens\n if (theme.fonts) {\n for (const [key, value] of Object.entries(theme.fonts)) {\n if (value) {\n rootVars.push(` --${prefix}-font-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect animation tokens\n if (theme.animation) {\n const { duration, durationSlow, easing, easingBounce } = theme.animation;\n if (duration) rootVars.push(` --${prefix}-animation-duration: ${duration};`);\n if (durationSlow) rootVars.push(` --${prefix}-animation-duration-slow: ${durationSlow};`);\n if (easing) rootVars.push(` --${prefix}-animation-easing: ${easing};`);\n if (easingBounce) rootVars.push(` --${prefix}-animation-easing-bounce: ${easingBounce};`);\n }\n\n // Collect shadow tokens\n if (theme.shadows) {\n for (const [key, value] of Object.entries(theme.shadows)) {\n if (value) {\n rootVars.push(` --${prefix}-shadow-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Build dark mode vars\n let darkRule = '';\n if (theme.darkColors) {\n const darkVars = Object.entries(theme.darkColors)\n .filter(([, v]) => v !== undefined)\n .map(([k, v]) => ` --${prefix}-color-${camelToKebab(k)}: ${v};`)\n .join('\\n');\n\n darkRule = darkMode === 'media'\n ? `@media (prefers-color-scheme: dark) { :root {\\n${darkVars}\\n} }`\n : `.dark {\\n${darkVars}\\n}`;\n }\n\n // Inject all tokens as stylesheet rules (not inline styles) so dark class can override\n let styleEl = document.getElementById('rz-tokens') as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = document.createElement('style');\n styleEl.id = 'rz-tokens';\n document.head.appendChild(styleEl);\n }\n styleEl.textContent = `:root {\\n${rootVars.join('\\n')}\\n}\\n${darkRule}`;\n }, [mergedConfig]);\n\n return (\n <RothzergContext.Provider value={{ config: mergedConfig }}>\n {children}\n </RothzergContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,kBAAkB,cAAoC;AAAA,EAC1D,QAAQ;AACV,CAAC;AAEM,SAAS,cAAoC;AAClD,SAAO,WAAW,eAAe;AACnC;AAUA,SAAS,aAAa,KAAqB;AACzC,SAAO,IAAI,QAAQ,mBAAmB,OAAO,EAAE,YAAA;AACjD;AAoBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,eAAe;AAAA,IACnB,MAAM,YAAY,eAAe,MAAM;AAAA,IACvC,CAAC,MAAM;AAAA,EAAA;AAGT,YAAU,MAAM;AACd,UAAM,EAAE,OAAO,UAAU,WAAW,WAAW;AAE/C,UAAM,WAAqB,CAAA;AAG3B,QAAI,MAAM,QAAQ;AAChB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,MAAM,GAAG;AACvD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,UAAU,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACrE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,cAAc;AACtB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,YAAY,GAAG;AAC7D,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,WAAW,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,OAAO;AACf,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,KAAK,GAAG;AACtD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACpE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,WAAW;AACnB,YAAM,EAAE,UAAU,cAAc,QAAQ,aAAA,IAAiB,MAAM;AAC/D,UAAI,SAAU,UAAS,KAAK,OAAO,MAAM,wBAAwB,QAAQ,GAAG;AAC5E,UAAI,aAAc,UAAS,KAAK,OAAO,MAAM,6BAA6B,YAAY,GAAG;AACzF,UAAI,OAAQ,UAAS,KAAK,OAAO,MAAM,sBAAsB,MAAM,GAAG;AACtE,UAAI,aAAc,UAAS,KAAK,OAAO,MAAM,6BAA6B,YAAY,GAAG;AAAA,IAC3F;AAGA,QAAI,MAAM,SAAS;AACjB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,OAAO,GAAG;AACxD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,WAAW,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,WAAW;AACf,QAAI,MAAM,YAAY;AACpB,YAAM,WAAW,OAAO,QAAQ,MAAM,UAAU,EAC7C,OAAO,CAAC,CAAA,EAAG,CAAC,MAAM,MAAM,MAAS,EACjC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,MAAM,UAAU,aAAa,CAAC,CAAC,KAAK,CAAC,GAAG,EAC/D,KAAK,IAAI;AAEZ,iBAAW,aAAa,UACpB;AAAA,EAAkD,QAAQ;AAAA,OAC1D;AAAA,EAAY,QAAQ;AAAA;AAAA,IAC1B;AAGA,QAAI,UAAU,SAAS,eAAe,WAAW;AACjD,QAAI,CAAC,SAAS;AACZ,gBAAU,SAAS,cAAc,OAAO;AACxC,cAAQ,KAAK;AACb,eAAS,KAAK,YAAY,OAAO;AAAA,IACnC;AACA,YAAQ,cAAc;AAAA,EAAY,SAAS,KAAK,IAAI,CAAC;AAAA;AAAA,EAAQ,QAAQ;AAAA,EACvE,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,QAAQ,gBACxC,UACH;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rothzerg-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "A highly customizable React UI component library built with TypeScript, TailwindCSS 4.2 and BEM methodology",
|
|
5
5
|
"author": "Rothzerg",
|
|
6
6
|
"license": "MIT",
|
|
@@ -122,5 +122,6 @@
|
|
|
122
122
|
"repository": {
|
|
123
123
|
"type": "git",
|
|
124
124
|
"url": "https://github.com/rothzerg/rothzerg-ui.git"
|
|
125
|
-
}
|
|
125
|
+
},
|
|
126
|
+
"homepage": "https://ui.rothzerg.dev"
|
|
126
127
|
}
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Rothzerg UI Configuration Example
|
|
3
|
-
*
|
|
4
|
-
* Copy this file to your project root as:
|
|
5
|
-
* rothzerg.config.js (JavaScript)
|
|
6
|
-
* rothzerg.config.ts (TypeScript — recommended)
|
|
7
|
-
*
|
|
8
|
-
* Then pass it to RothzergProvider:
|
|
9
|
-
*
|
|
10
|
-
* import config from './rothzerg.config';
|
|
11
|
-
* <RothzergProvider config={config}>...</RothzergProvider>
|
|
12
|
-
*
|
|
13
|
-
* Use defineConfig() for TypeScript intellisense:
|
|
14
|
-
* import { defineConfig } from 'rothzerg-ui';
|
|
15
|
-
* export default defineConfig({ ... });
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/** @type {import('rothzerg-ui').RothzergConfig} */
|
|
19
|
-
export default {
|
|
20
|
-
/**
|
|
21
|
-
* Theme tokens
|
|
22
|
-
* All values become CSS custom properties on :root (--rz-color-primary, etc.)
|
|
23
|
-
*/
|
|
24
|
-
theme: {
|
|
25
|
-
/**
|
|
26
|
-
* Light mode colors
|
|
27
|
-
* Every key maps to a --rz-color-{key} CSS custom property
|
|
28
|
-
*/
|
|
29
|
-
colors: {
|
|
30
|
-
// Brand
|
|
31
|
-
primary: '#6366f1', // --rz-color-primary
|
|
32
|
-
primaryForeground: '#ffffff', // --rz-color-primary-foreground
|
|
33
|
-
|
|
34
|
-
// Neutrals
|
|
35
|
-
secondary: '#f1f5f9',
|
|
36
|
-
secondaryForeground: '#0f172a',
|
|
37
|
-
muted: '#f8fafc',
|
|
38
|
-
mutedForeground: '#64748b',
|
|
39
|
-
accent: '#f1f5f9',
|
|
40
|
-
accentForeground: '#0f172a',
|
|
41
|
-
|
|
42
|
-
// Feedback
|
|
43
|
-
destructive: '#ef4444',
|
|
44
|
-
destructiveForeground: '#ffffff',
|
|
45
|
-
success: '#22c55e',
|
|
46
|
-
successForeground: '#f0fdf4',
|
|
47
|
-
warning: '#f59e0b',
|
|
48
|
-
warningForeground: '#fffbeb',
|
|
49
|
-
info: '#3b82f6',
|
|
50
|
-
infoForeground: '#eff6ff',
|
|
51
|
-
|
|
52
|
-
// Surface
|
|
53
|
-
background: '#ffffff',
|
|
54
|
-
foreground: '#0f172a',
|
|
55
|
-
card: '#ffffff',
|
|
56
|
-
cardForeground: '#0f172a',
|
|
57
|
-
popover: '#ffffff',
|
|
58
|
-
popoverForeground: '#0f172a',
|
|
59
|
-
|
|
60
|
-
// Borders & inputs
|
|
61
|
-
border: '#e2e8f0',
|
|
62
|
-
input: '#e2e8f0',
|
|
63
|
-
ring: '#6366f1', // Focus ring color
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Dark mode color overrides
|
|
68
|
-
* Only specify tokens that differ in dark mode
|
|
69
|
-
*/
|
|
70
|
-
darkColors: {
|
|
71
|
-
primary: '#818cf8',
|
|
72
|
-
primaryForeground: '#ffffff',
|
|
73
|
-
secondary: '#1e293b',
|
|
74
|
-
secondaryForeground: '#f8fafc',
|
|
75
|
-
muted: '#1e293b',
|
|
76
|
-
mutedForeground: '#94a3b8',
|
|
77
|
-
accent: '#1e293b',
|
|
78
|
-
accentForeground: '#f8fafc',
|
|
79
|
-
background: '#0f172a',
|
|
80
|
-
foreground: '#f8fafc',
|
|
81
|
-
card: '#1e293b',
|
|
82
|
-
cardForeground: '#f8fafc',
|
|
83
|
-
popover: '#1e293b',
|
|
84
|
-
popoverForeground: '#f8fafc',
|
|
85
|
-
border: '#334155',
|
|
86
|
-
input: '#334155',
|
|
87
|
-
ring: '#818cf8',
|
|
88
|
-
},
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* Border radius scale
|
|
92
|
-
* Maps to --rz-radius-{key}
|
|
93
|
-
*/
|
|
94
|
-
borderRadius: {
|
|
95
|
-
none: '0',
|
|
96
|
-
xs: '0.125rem',
|
|
97
|
-
sm: '0.25rem',
|
|
98
|
-
md: '0.5rem', // Used by most components by default
|
|
99
|
-
lg: '0.75rem',
|
|
100
|
-
xl: '1rem',
|
|
101
|
-
'2xl': '1.5rem',
|
|
102
|
-
full: '9999px',
|
|
103
|
-
},
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* Font families
|
|
107
|
-
* Maps to --rz-font-{key}
|
|
108
|
-
*/
|
|
109
|
-
fonts: {
|
|
110
|
-
sans: "'Inter', system-ui, -apple-system, sans-serif",
|
|
111
|
-
mono: "'JetBrains Mono', 'Fira Code', monospace",
|
|
112
|
-
},
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* Animation settings
|
|
116
|
-
*/
|
|
117
|
-
animation: {
|
|
118
|
-
duration: '150ms', // Fast transitions (buttons, hover)
|
|
119
|
-
durationSlow: '300ms', // Slow transitions (drawers, dialogs)
|
|
120
|
-
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
121
|
-
easingBounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
122
|
-
},
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* Box shadows
|
|
126
|
-
* Maps to --rz-shadow-{key}
|
|
127
|
-
*/
|
|
128
|
-
shadows: {
|
|
129
|
-
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
130
|
-
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
131
|
-
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
132
|
-
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
133
|
-
},
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* Dark mode strategy
|
|
138
|
-
* - 'class': Toggle dark mode by adding/removing 'dark' class on <html>
|
|
139
|
-
* document.documentElement.classList.toggle('dark')
|
|
140
|
-
* - 'media': Automatically follow OS dark mode preference
|
|
141
|
-
* - false: Disable dark mode entirely
|
|
142
|
-
*/
|
|
143
|
-
darkMode: 'class',
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
* Per-component default prop values
|
|
147
|
-
* Override the built-in defaults for your design needs
|
|
148
|
-
*/
|
|
149
|
-
components: {
|
|
150
|
-
button: {
|
|
151
|
-
defaultVariant: 'default', // Which variant to use when none is specified
|
|
152
|
-
defaultSize: 'md',
|
|
153
|
-
},
|
|
154
|
-
badge: {
|
|
155
|
-
defaultVariant: 'secondary',
|
|
156
|
-
},
|
|
157
|
-
input: {
|
|
158
|
-
defaultVariant: 'default',
|
|
159
|
-
},
|
|
160
|
-
},
|
|
161
|
-
};
|