@appolabs/ui 0.1.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.
@@ -0,0 +1,178 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // tailwind/preset.ts
31
+ var preset_exports = {};
32
+ __export(preset_exports, {
33
+ appolabsUIPreset: () => appolabsUIPreset,
34
+ default: () => preset_default
35
+ });
36
+ module.exports = __toCommonJS(preset_exports);
37
+ var import_tailwindcss_animate = __toESM(require("tailwindcss-animate"), 1);
38
+ var appolabsUIPreset = {
39
+ darkMode: ["class"],
40
+ theme: {
41
+ extend: {
42
+ borderRadius: {
43
+ lg: "var(--radius)",
44
+ md: "calc(var(--radius) - 2px)",
45
+ sm: "calc(var(--radius) - 4px)"
46
+ },
47
+ colors: {
48
+ background: "hsl(var(--background))",
49
+ foreground: "hsl(var(--foreground))",
50
+ card: {
51
+ DEFAULT: "hsl(var(--card))",
52
+ foreground: "hsl(var(--card-foreground))"
53
+ },
54
+ popover: {
55
+ DEFAULT: "hsl(var(--popover))",
56
+ foreground: "hsl(var(--popover-foreground))"
57
+ },
58
+ primary: {
59
+ DEFAULT: "hsl(var(--primary))",
60
+ foreground: "hsl(var(--primary-foreground))"
61
+ },
62
+ secondary: {
63
+ DEFAULT: "hsl(var(--secondary))",
64
+ foreground: "hsl(var(--secondary-foreground))"
65
+ },
66
+ muted: {
67
+ DEFAULT: "hsl(var(--muted))",
68
+ foreground: "hsl(var(--muted-foreground))"
69
+ },
70
+ accent: {
71
+ DEFAULT: "hsl(var(--accent))",
72
+ foreground: "hsl(var(--accent-foreground))"
73
+ },
74
+ destructive: {
75
+ DEFAULT: "hsl(var(--destructive))",
76
+ foreground: "hsl(var(--destructive-foreground))"
77
+ },
78
+ border: "hsl(var(--border))",
79
+ input: "hsl(var(--input))",
80
+ ring: "hsl(var(--ring))",
81
+ chart: {
82
+ "1": "hsl(var(--chart-1))",
83
+ "2": "hsl(var(--chart-2))",
84
+ "3": "hsl(var(--chart-3))",
85
+ "4": "hsl(var(--chart-4))",
86
+ "5": "hsl(var(--chart-5))"
87
+ },
88
+ sidebar: {
89
+ DEFAULT: "hsl(var(--sidebar-background))",
90
+ foreground: "hsl(var(--sidebar-foreground))",
91
+ primary: "hsl(var(--sidebar-primary))",
92
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
93
+ accent: "hsl(var(--sidebar-accent))",
94
+ "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
95
+ border: "hsl(var(--sidebar-border))",
96
+ ring: "hsl(var(--sidebar-ring))"
97
+ },
98
+ // Appo brand colors
99
+ appo: {
100
+ accent: {
101
+ DEFAULT: "var(--appo-accent)",
102
+ light: "var(--appo-accent-light)",
103
+ dark: "var(--appo-accent-dark)"
104
+ },
105
+ purple: {
106
+ 400: "var(--appo-purple-400)",
107
+ 500: "var(--appo-purple-500)",
108
+ 600: "var(--appo-purple-600)",
109
+ 700: "var(--appo-purple-700)"
110
+ }
111
+ }
112
+ },
113
+ keyframes: {
114
+ "accordion-down": {
115
+ from: { height: "0" },
116
+ to: { height: "var(--radix-accordion-content-height)" }
117
+ },
118
+ "accordion-up": {
119
+ from: { height: "var(--radix-accordion-content-height)" },
120
+ to: { height: "0" }
121
+ },
122
+ "gradient-shift": {
123
+ "0%, 100%": { backgroundPosition: "0% 50%" },
124
+ "50%": { backgroundPosition: "100% 50%" }
125
+ },
126
+ float: {
127
+ "0%, 100%": { transform: "translateY(0)" },
128
+ "50%": { transform: "translateY(-10px)" }
129
+ },
130
+ "glow-pulse": {
131
+ "0%, 100%": {
132
+ boxShadow: "0 0 20px rgba(138, 158, 255, 0.3), 0 0 40px rgba(167, 139, 250, 0.2)"
133
+ },
134
+ "50%": {
135
+ boxShadow: "0 0 40px rgba(138, 158, 255, 0.5), 0 0 80px rgba(167, 139, 250, 0.3)"
136
+ }
137
+ },
138
+ shimmer: {
139
+ "0%": { backgroundPosition: "-200% 0" },
140
+ "100%": { backgroundPosition: "200% 0" }
141
+ },
142
+ "fade-in-up": {
143
+ from: { opacity: "0", transform: "translateY(20px)" },
144
+ to: { opacity: "1", transform: "translateY(0)" }
145
+ },
146
+ "scale-in": {
147
+ from: { opacity: "0", transform: "scale(0.95)" },
148
+ to: { opacity: "1", transform: "scale(1)" }
149
+ },
150
+ "pulse-slow": {
151
+ "0%, 100%": { opacity: "1" },
152
+ "50%": { opacity: "0.5" }
153
+ }
154
+ },
155
+ animation: {
156
+ "accordion-down": "accordion-down 0.2s ease-out",
157
+ "accordion-up": "accordion-up 0.2s ease-out",
158
+ gradient: "gradient-shift 8s ease infinite",
159
+ float: "float 6s ease-in-out infinite",
160
+ "glow-pulse": "glow-pulse 3s ease-in-out infinite",
161
+ shimmer: "shimmer 2s infinite",
162
+ "fade-in-up": "fade-in-up 0.6s ease-out forwards",
163
+ "scale-in": "scale-in 0.4s ease-out forwards",
164
+ "pulse-slow": "pulse-slow 2s ease-in-out infinite"
165
+ },
166
+ transitionDuration: {
167
+ "400": "400ms",
168
+ "600": "600ms"
169
+ }
170
+ }
171
+ },
172
+ plugins: [import_tailwindcss_animate.default]
173
+ };
174
+ var preset_default = appolabsUIPreset;
175
+ // Annotate the CommonJS export names for ESM import in node:
176
+ 0 && (module.exports = {
177
+ appolabsUIPreset
178
+ });
@@ -0,0 +1,143 @@
1
+ // tailwind/preset.ts
2
+ import tailwindAnimate from "tailwindcss-animate";
3
+ var appolabsUIPreset = {
4
+ darkMode: ["class"],
5
+ theme: {
6
+ extend: {
7
+ borderRadius: {
8
+ lg: "var(--radius)",
9
+ md: "calc(var(--radius) - 2px)",
10
+ sm: "calc(var(--radius) - 4px)"
11
+ },
12
+ colors: {
13
+ background: "hsl(var(--background))",
14
+ foreground: "hsl(var(--foreground))",
15
+ card: {
16
+ DEFAULT: "hsl(var(--card))",
17
+ foreground: "hsl(var(--card-foreground))"
18
+ },
19
+ popover: {
20
+ DEFAULT: "hsl(var(--popover))",
21
+ foreground: "hsl(var(--popover-foreground))"
22
+ },
23
+ primary: {
24
+ DEFAULT: "hsl(var(--primary))",
25
+ foreground: "hsl(var(--primary-foreground))"
26
+ },
27
+ secondary: {
28
+ DEFAULT: "hsl(var(--secondary))",
29
+ foreground: "hsl(var(--secondary-foreground))"
30
+ },
31
+ muted: {
32
+ DEFAULT: "hsl(var(--muted))",
33
+ foreground: "hsl(var(--muted-foreground))"
34
+ },
35
+ accent: {
36
+ DEFAULT: "hsl(var(--accent))",
37
+ foreground: "hsl(var(--accent-foreground))"
38
+ },
39
+ destructive: {
40
+ DEFAULT: "hsl(var(--destructive))",
41
+ foreground: "hsl(var(--destructive-foreground))"
42
+ },
43
+ border: "hsl(var(--border))",
44
+ input: "hsl(var(--input))",
45
+ ring: "hsl(var(--ring))",
46
+ chart: {
47
+ "1": "hsl(var(--chart-1))",
48
+ "2": "hsl(var(--chart-2))",
49
+ "3": "hsl(var(--chart-3))",
50
+ "4": "hsl(var(--chart-4))",
51
+ "5": "hsl(var(--chart-5))"
52
+ },
53
+ sidebar: {
54
+ DEFAULT: "hsl(var(--sidebar-background))",
55
+ foreground: "hsl(var(--sidebar-foreground))",
56
+ primary: "hsl(var(--sidebar-primary))",
57
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
58
+ accent: "hsl(var(--sidebar-accent))",
59
+ "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
60
+ border: "hsl(var(--sidebar-border))",
61
+ ring: "hsl(var(--sidebar-ring))"
62
+ },
63
+ // Appo brand colors
64
+ appo: {
65
+ accent: {
66
+ DEFAULT: "var(--appo-accent)",
67
+ light: "var(--appo-accent-light)",
68
+ dark: "var(--appo-accent-dark)"
69
+ },
70
+ purple: {
71
+ 400: "var(--appo-purple-400)",
72
+ 500: "var(--appo-purple-500)",
73
+ 600: "var(--appo-purple-600)",
74
+ 700: "var(--appo-purple-700)"
75
+ }
76
+ }
77
+ },
78
+ keyframes: {
79
+ "accordion-down": {
80
+ from: { height: "0" },
81
+ to: { height: "var(--radix-accordion-content-height)" }
82
+ },
83
+ "accordion-up": {
84
+ from: { height: "var(--radix-accordion-content-height)" },
85
+ to: { height: "0" }
86
+ },
87
+ "gradient-shift": {
88
+ "0%, 100%": { backgroundPosition: "0% 50%" },
89
+ "50%": { backgroundPosition: "100% 50%" }
90
+ },
91
+ float: {
92
+ "0%, 100%": { transform: "translateY(0)" },
93
+ "50%": { transform: "translateY(-10px)" }
94
+ },
95
+ "glow-pulse": {
96
+ "0%, 100%": {
97
+ boxShadow: "0 0 20px rgba(138, 158, 255, 0.3), 0 0 40px rgba(167, 139, 250, 0.2)"
98
+ },
99
+ "50%": {
100
+ boxShadow: "0 0 40px rgba(138, 158, 255, 0.5), 0 0 80px rgba(167, 139, 250, 0.3)"
101
+ }
102
+ },
103
+ shimmer: {
104
+ "0%": { backgroundPosition: "-200% 0" },
105
+ "100%": { backgroundPosition: "200% 0" }
106
+ },
107
+ "fade-in-up": {
108
+ from: { opacity: "0", transform: "translateY(20px)" },
109
+ to: { opacity: "1", transform: "translateY(0)" }
110
+ },
111
+ "scale-in": {
112
+ from: { opacity: "0", transform: "scale(0.95)" },
113
+ to: { opacity: "1", transform: "scale(1)" }
114
+ },
115
+ "pulse-slow": {
116
+ "0%, 100%": { opacity: "1" },
117
+ "50%": { opacity: "0.5" }
118
+ }
119
+ },
120
+ animation: {
121
+ "accordion-down": "accordion-down 0.2s ease-out",
122
+ "accordion-up": "accordion-up 0.2s ease-out",
123
+ gradient: "gradient-shift 8s ease infinite",
124
+ float: "float 6s ease-in-out infinite",
125
+ "glow-pulse": "glow-pulse 3s ease-in-out infinite",
126
+ shimmer: "shimmer 2s infinite",
127
+ "fade-in-up": "fade-in-up 0.6s ease-out forwards",
128
+ "scale-in": "scale-in 0.4s ease-out forwards",
129
+ "pulse-slow": "pulse-slow 2s ease-in-out infinite"
130
+ },
131
+ transitionDuration: {
132
+ "400": "400ms",
133
+ "600": "600ms"
134
+ }
135
+ }
136
+ },
137
+ plugins: [tailwindAnimate]
138
+ };
139
+ var preset_default = appolabsUIPreset;
140
+ export {
141
+ appolabsUIPreset,
142
+ preset_default as default
143
+ };
package/package.json ADDED
@@ -0,0 +1,145 @@
1
+ {
2
+ "name": "@appolabs/ui",
3
+ "version": "0.1.0",
4
+ "description": "React UI component library for Appo Labs applications",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/appolabs/ui.git"
9
+ },
10
+ "homepage": "https://github.com/appolabs/ui#readme",
11
+ "bugs": {
12
+ "url": "https://github.com/appolabs/ui/issues"
13
+ },
14
+ "keywords": [
15
+ "react",
16
+ "components",
17
+ "ui",
18
+ "tailwindcss",
19
+ "radix-ui"
20
+ ],
21
+ "type": "module",
22
+ "main": "./dist/index.cjs",
23
+ "module": "./dist/index.js",
24
+ "types": "./dist/index.d.ts",
25
+ "exports": {
26
+ ".": {
27
+ "import": {
28
+ "types": "./dist/index.d.ts",
29
+ "default": "./dist/index.js"
30
+ },
31
+ "require": {
32
+ "types": "./dist/index.d.cts",
33
+ "default": "./dist/index.cjs"
34
+ }
35
+ },
36
+ "./styles/globals.css": "./src/styles/globals.css",
37
+ "./styles/variables.css": "./src/styles/variables.css",
38
+ "./tailwind": {
39
+ "import": {
40
+ "types": "./dist/tailwind/preset.d.ts",
41
+ "default": "./dist/tailwind/preset.js"
42
+ },
43
+ "require": {
44
+ "types": "./dist/tailwind/preset.d.cts",
45
+ "default": "./dist/tailwind/preset.cjs"
46
+ }
47
+ }
48
+ },
49
+ "files": [
50
+ "dist",
51
+ "src/styles",
52
+ "tailwind"
53
+ ],
54
+ "sideEffects": [
55
+ "**/*.css"
56
+ ],
57
+ "scripts": {
58
+ "dev": "tsup --watch",
59
+ "build": "tsup",
60
+ "lint": "eslint 'src/**/*.{ts,tsx}'",
61
+ "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
62
+ "format": "prettier --write 'src/**/*.{ts,tsx}'",
63
+ "typecheck": "tsc --noEmit",
64
+ "prepublishOnly": "pnpm build"
65
+ },
66
+ "peerDependencies": {
67
+ "react": "^18.0.0",
68
+ "react-dom": "^18.0.0",
69
+ "tailwindcss": "^3.0.0"
70
+ },
71
+ "peerDependenciesMeta": {
72
+ "react-hook-form": {
73
+ "optional": true
74
+ },
75
+ "recharts": {
76
+ "optional": true
77
+ }
78
+ },
79
+ "dependencies": {
80
+ "@radix-ui/react-accordion": "^1.2.0",
81
+ "@radix-ui/react-alert-dialog": "^1.1.0",
82
+ "@radix-ui/react-aspect-ratio": "^1.1.0",
83
+ "@radix-ui/react-avatar": "^1.1.0",
84
+ "@radix-ui/react-checkbox": "^1.1.0",
85
+ "@radix-ui/react-collapsible": "^1.1.0",
86
+ "@radix-ui/react-context-menu": "^2.2.0",
87
+ "@radix-ui/react-dialog": "^1.1.0",
88
+ "@radix-ui/react-dropdown-menu": "^2.1.0",
89
+ "@radix-ui/react-hover-card": "^1.1.0",
90
+ "@radix-ui/react-label": "^2.1.0",
91
+ "@radix-ui/react-menubar": "^1.1.0",
92
+ "@radix-ui/react-navigation-menu": "^1.2.0",
93
+ "@radix-ui/react-popover": "^1.1.0",
94
+ "@radix-ui/react-progress": "^1.1.0",
95
+ "@radix-ui/react-radio-group": "^1.2.0",
96
+ "@radix-ui/react-scroll-area": "^1.1.0",
97
+ "@radix-ui/react-select": "^2.1.0",
98
+ "@radix-ui/react-separator": "^1.1.0",
99
+ "@radix-ui/react-slider": "^1.2.0",
100
+ "@radix-ui/react-slot": "^1.1.0",
101
+ "@radix-ui/react-switch": "^1.1.0",
102
+ "@radix-ui/react-tabs": "^1.1.0",
103
+ "@radix-ui/react-toast": "^1.2.0",
104
+ "@radix-ui/react-toggle": "^1.1.0",
105
+ "@radix-ui/react-toggle-group": "^1.1.0",
106
+ "@radix-ui/react-tooltip": "^1.1.0",
107
+ "class-variance-authority": "^0.7.0",
108
+ "clsx": "^2.1.0",
109
+ "cmdk": "^1.0.0",
110
+ "date-fns": "^4.1.0",
111
+ "embla-carousel-react": "^8.0.0",
112
+ "input-otp": "^1.2.0",
113
+ "lucide-react": "^0.400.0",
114
+ "react-day-picker": "^9.0.0",
115
+ "react-resizable-panels": "^2.0.0",
116
+ "sonner": "^1.5.0",
117
+ "tailwind-merge": "^2.3.0",
118
+ "tailwindcss-animate": "^1.0.7",
119
+ "vaul": "^0.9.0"
120
+ },
121
+ "devDependencies": {
122
+ "@types/react": "^18.3.0",
123
+ "@types/react-dom": "^18.3.0",
124
+ "@typescript-eslint/eslint-plugin": "^7.0.0",
125
+ "@typescript-eslint/parser": "^7.0.0",
126
+ "eslint": "^8.57.0",
127
+ "eslint-config-prettier": "^9.1.0",
128
+ "eslint-plugin-react": "^7.34.0",
129
+ "eslint-plugin-react-hooks": "^4.6.0",
130
+ "prettier": "^3.2.0",
131
+ "react": "^18.3.0",
132
+ "react-dom": "^18.3.0",
133
+ "react-hook-form": "^7.51.0",
134
+ "recharts": "^2.12.0",
135
+ "tailwindcss": "^3.4.0",
136
+ "tsup": "^8.0.0",
137
+ "typescript": "^5.4.0"
138
+ },
139
+ "engines": {
140
+ "node": ">=18.0.0"
141
+ },
142
+ "publishConfig": {
143
+ "access": "public"
144
+ }
145
+ }
@@ -0,0 +1,13 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @layer base {
6
+ * {
7
+ @apply border-border;
8
+ }
9
+
10
+ body {
11
+ @apply bg-background text-foreground;
12
+ }
13
+ }
@@ -0,0 +1,102 @@
1
+ :root {
2
+ --radius: 0.625rem;
3
+
4
+ /* Appo Brand Colors */
5
+ --appo-accent: #8a9eff;
6
+ --appo-accent-light: #b3c2ff;
7
+ --appo-accent-dark: #6b7fd9;
8
+
9
+ --appo-purple-400: #a78bfa;
10
+ --appo-purple-500: #8b5cf6;
11
+ --appo-purple-600: #7c3aed;
12
+ --appo-purple-700: #6d28d9;
13
+
14
+ /* Base colors - Light mode */
15
+ --background: 0 0% 99%;
16
+ --foreground: 261 40% 8%;
17
+ --card: 0 0% 100%;
18
+ --card-foreground: 261 40% 8%;
19
+ --popover: 0 0% 100%;
20
+ --popover-foreground: 261 40% 8%;
21
+
22
+ /* Primary - Appo accent #8a9eff */
23
+ --primary: 230 100% 77%;
24
+ --primary-foreground: 230 30% 15%;
25
+
26
+ /* Secondary */
27
+ --secondary: 270 30% 96%;
28
+ --secondary-foreground: 261 40% 8%;
29
+
30
+ /* Muted */
31
+ --muted: 270 20% 95%;
32
+ --muted-foreground: 261 10% 45%;
33
+
34
+ /* Accent - Purple tint */
35
+ --accent: 285 40% 92%;
36
+ --accent-foreground: 261 40% 8%;
37
+
38
+ --destructive: 0 84.2% 60.2%;
39
+ --destructive-foreground: 60 9.1% 97.8%;
40
+ --border: 270 20% 90%;
41
+ --input: 270 20% 90%;
42
+ --ring: 230 100% 77%;
43
+
44
+ /* Chart colors */
45
+ --chart-1: 230 100% 77%;
46
+ --chart-2: 270 70% 60%;
47
+ --chart-3: 175 60% 45%;
48
+ --chart-4: 45 90% 65%;
49
+ --chart-5: 30 90% 55%;
50
+
51
+ /* Sidebar */
52
+ --sidebar-background: 270 20% 97%;
53
+ --sidebar-foreground: 261 40% 8%;
54
+ --sidebar-primary: 230 100% 77%;
55
+ --sidebar-primary-foreground: 230 30% 15%;
56
+ --sidebar-accent: 285 40% 92%;
57
+ --sidebar-accent-foreground: 261 40% 8%;
58
+ --sidebar-border: 270 20% 90%;
59
+ --sidebar-ring: 230 100% 77%;
60
+ }
61
+
62
+ .dark {
63
+ --background: 270 25% 7%;
64
+ --foreground: 270 10% 96%;
65
+ --card: 270 25% 10%;
66
+ --card-foreground: 270 10% 96%;
67
+ --popover: 270 25% 10%;
68
+ --popover-foreground: 270 10% 96%;
69
+
70
+ /* Primary - Appo accent #8a9eff */
71
+ --primary: 230 100% 77%;
72
+ --primary-foreground: 230 30% 10%;
73
+
74
+ --secondary: 270 20% 15%;
75
+ --secondary-foreground: 270 10% 96%;
76
+ --muted: 270 20% 15%;
77
+ --muted-foreground: 270 10% 60%;
78
+
79
+ --accent: 285 30% 18%;
80
+ --accent-foreground: 270 10% 96%;
81
+
82
+ --destructive: 0 62.8% 55%;
83
+ --destructive-foreground: 0 0% 98%;
84
+ --border: 0 0% 100% / 10%;
85
+ --input: 0 0% 100% / 15%;
86
+ --ring: 230 100% 77%;
87
+
88
+ --chart-1: 230 100% 77%;
89
+ --chart-2: 280 70% 65%;
90
+ --chart-3: 35 90% 55%;
91
+ --chart-4: 290 70% 60%;
92
+ --chart-5: 15 90% 55%;
93
+
94
+ --sidebar-background: 270 25% 10%;
95
+ --sidebar-foreground: 270 10% 96%;
96
+ --sidebar-primary: 230 100% 77%;
97
+ --sidebar-primary-foreground: 230 30% 10%;
98
+ --sidebar-accent: 285 30% 18%;
99
+ --sidebar-accent-foreground: 270 10% 96%;
100
+ --sidebar-border: 0 0% 100% / 10%;
101
+ --sidebar-ring: 230 100% 77%;
102
+ }