@happlyui/cli 0.3.2 → 1.0.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/dist/index.js +1928 -678
- package/package.json +46 -46
package/dist/index.js
CHANGED
|
@@ -2092,7 +2092,7 @@ var require_clear = __commonJS((exports, module) => {
|
|
|
2092
2092
|
if (it)
|
|
2093
2093
|
o = it;
|
|
2094
2094
|
var i = 0;
|
|
2095
|
-
var F = function
|
|
2095
|
+
var F = function F2() {};
|
|
2096
2096
|
return { s: F, n: function n() {
|
|
2097
2097
|
if (i >= o.length)
|
|
2098
2098
|
return { done: true };
|
|
@@ -4424,7 +4424,7 @@ var require_dist = __commonJS((exports, module) => {
|
|
|
4424
4424
|
if (it)
|
|
4425
4425
|
o = it;
|
|
4426
4426
|
var i = 0;
|
|
4427
|
-
var F = function
|
|
4427
|
+
var F = function F2() {};
|
|
4428
4428
|
return { s: F, n: function n() {
|
|
4429
4429
|
if (i >= o.length)
|
|
4430
4430
|
return { done: true };
|
|
@@ -4527,7 +4527,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
4527
4527
|
}
|
|
4528
4528
|
return question2.format ? yield question2.format(answer2, answers) : answer2;
|
|
4529
4529
|
});
|
|
4530
|
-
return function
|
|
4530
|
+
return function getFormattedAnswer2(_x, _x2) {
|
|
4531
4531
|
return _ref.apply(this, arguments);
|
|
4532
4532
|
};
|
|
4533
4533
|
}();
|
|
@@ -13855,7 +13855,7 @@ var require_parent_module = __commonJS((exports, module) => {
|
|
|
13855
13855
|
|
|
13856
13856
|
// ../../node_modules/.bun/import-fresh@3.3.1/node_modules/import-fresh/index.js
|
|
13857
13857
|
var require_import_fresh = __commonJS((exports, module) => {
|
|
13858
|
-
var __dirname = "
|
|
13858
|
+
var __dirname = "C:\\Happly\\code\\happly-ui-npm\\node_modules\\.bun\\import-fresh@3.3.1\\node_modules\\import-fresh", __filename = "C:\\Happly\\code\\happly-ui-npm\\node_modules\\.bun\\import-fresh@3.3.1\\node_modules\\import-fresh\\index.js";
|
|
13859
13859
|
var path2 = __require("path");
|
|
13860
13860
|
var resolveFrom = require_resolve_from();
|
|
13861
13861
|
var parentModule = require_parent_module();
|
|
@@ -13895,7 +13895,7 @@ var require_is_arrayish = __commonJS((exports, module) => {
|
|
|
13895
13895
|
var require_error_ex = __commonJS((exports, module) => {
|
|
13896
13896
|
var util = __require("util");
|
|
13897
13897
|
var isArrayish = require_is_arrayish();
|
|
13898
|
-
var errorEx = function
|
|
13898
|
+
var errorEx = function errorEx2(name, properties) {
|
|
13899
13899
|
if (!name || name.constructor !== String) {
|
|
13900
13900
|
properties = name || {};
|
|
13901
13901
|
name = Error.name;
|
|
@@ -17393,7 +17393,7 @@ var require_js_yaml = __commonJS((exports, module) => {
|
|
|
17393
17393
|
|
|
17394
17394
|
// ../../node_modules/.bun/typescript@5.9.3/node_modules/typescript/lib/typescript.js
|
|
17395
17395
|
var require_typescript = __commonJS((exports, module) => {
|
|
17396
|
-
var __dirname = "
|
|
17396
|
+
var __dirname = "C:\\Happly\\code\\happly-ui-npm\\node_modules\\.bun\\typescript@5.9.3\\node_modules\\typescript\\lib", __filename = "C:\\Happly\\code\\happly-ui-npm\\node_modules\\.bun\\typescript@5.9.3\\node_modules\\typescript\\lib\\typescript.js";
|
|
17397
17397
|
/*! *****************************************************************************
|
|
17398
17398
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
17399
17399
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -186124,14 +186124,14 @@ var require_loaders = __commonJS((exports) => {
|
|
|
186124
186124
|
var path_1 = __importDefault(__require("path"));
|
|
186125
186125
|
var url_1 = __require("url");
|
|
186126
186126
|
var importFresh;
|
|
186127
|
-
var loadJsSync = function
|
|
186127
|
+
var loadJsSync = function loadJsSync2(filepath) {
|
|
186128
186128
|
if (importFresh === undefined) {
|
|
186129
186129
|
importFresh = require_import_fresh();
|
|
186130
186130
|
}
|
|
186131
186131
|
return importFresh(filepath);
|
|
186132
186132
|
};
|
|
186133
186133
|
exports.loadJsSync = loadJsSync;
|
|
186134
|
-
var loadJs = async function
|
|
186134
|
+
var loadJs = async function loadJs2(filepath) {
|
|
186135
186135
|
try {
|
|
186136
186136
|
const { href } = (0, url_1.pathToFileURL)(filepath);
|
|
186137
186137
|
return (await import(href)).default;
|
|
@@ -186148,7 +186148,7 @@ var require_loaders = __commonJS((exports) => {
|
|
|
186148
186148
|
};
|
|
186149
186149
|
exports.loadJs = loadJs;
|
|
186150
186150
|
var parseJson;
|
|
186151
|
-
var loadJson = function
|
|
186151
|
+
var loadJson = function loadJson2(filepath, content) {
|
|
186152
186152
|
if (parseJson === undefined) {
|
|
186153
186153
|
parseJson = require_parse_json();
|
|
186154
186154
|
}
|
|
@@ -186162,7 +186162,7 @@ ${error.message}`;
|
|
|
186162
186162
|
};
|
|
186163
186163
|
exports.loadJson = loadJson;
|
|
186164
186164
|
var yaml;
|
|
186165
|
-
var loadYaml = function
|
|
186165
|
+
var loadYaml = function loadYaml2(filepath, content) {
|
|
186166
186166
|
if (yaml === undefined) {
|
|
186167
186167
|
yaml = require_js_yaml();
|
|
186168
186168
|
}
|
|
@@ -186176,7 +186176,7 @@ ${error.message}`;
|
|
|
186176
186176
|
};
|
|
186177
186177
|
exports.loadYaml = loadYaml;
|
|
186178
186178
|
var typescript;
|
|
186179
|
-
var loadTsSync = function
|
|
186179
|
+
var loadTsSync = function loadTsSync2(filepath, content) {
|
|
186180
186180
|
if (typescript === undefined) {
|
|
186181
186181
|
typescript = require_typescript();
|
|
186182
186182
|
}
|
|
@@ -186204,7 +186204,7 @@ ${error.message}`;
|
|
|
186204
186204
|
}
|
|
186205
186205
|
};
|
|
186206
186206
|
exports.loadTsSync = loadTsSync;
|
|
186207
|
-
var loadTs = async function
|
|
186207
|
+
var loadTs = async function loadTs2(filepath, content) {
|
|
186208
186208
|
if (typescript === undefined) {
|
|
186209
186209
|
typescript = (await Promise.resolve().then(() => __toESM(require_typescript()))).default;
|
|
186210
186210
|
}
|
|
@@ -186997,7 +186997,7 @@ var require_dist2 = __commonJS((exports) => {
|
|
|
186997
186997
|
var Explorer_js_1 = require_Explorer();
|
|
186998
186998
|
var ExplorerSync_js_1 = require_ExplorerSync();
|
|
186999
186999
|
var util_1 = require_util3();
|
|
187000
|
-
var identity = function
|
|
187000
|
+
var identity = function identity2(x) {
|
|
187001
187001
|
return x;
|
|
187002
187002
|
};
|
|
187003
187003
|
function getUserDefinedOptionsFromMetaConfig() {
|
|
@@ -187131,16 +187131,8 @@ var require_dist2 = __commonJS((exports) => {
|
|
|
187131
187131
|
});
|
|
187132
187132
|
|
|
187133
187133
|
// src/types/index.ts
|
|
187134
|
-
var REGISTRY_URL = "https://raw.githubusercontent.com/Mindful-Connect/happly-ui-npm/production/packages/registry", CONFIG_FILE = "happly-ui-components.json"
|
|
187135
|
-
var init_types =
|
|
187136
|
-
BASE_COLORS = [
|
|
187137
|
-
"slate",
|
|
187138
|
-
"gray",
|
|
187139
|
-
"zinc",
|
|
187140
|
-
"neutral",
|
|
187141
|
-
"stone"
|
|
187142
|
-
];
|
|
187143
|
-
});
|
|
187134
|
+
var REGISTRY_URL = "https://raw.githubusercontent.com/Mindful-Connect/happly-ui-npm/production/packages/registry", CONFIG_FILE = "happly-ui-components.json";
|
|
187135
|
+
var init_types = () => {};
|
|
187144
187136
|
|
|
187145
187137
|
// src/utils/config.ts
|
|
187146
187138
|
var exports_config = {};
|
|
@@ -187206,6 +187198,8 @@ function getComponentPath(componentName, componentType, config, fileName) {
|
|
|
187206
187198
|
return path2.join(srcPrefix + (config.aliases.hooks || "@/hooks").replace("@/", ""), finalFileName);
|
|
187207
187199
|
case "registry:lib":
|
|
187208
187200
|
return path2.join(srcPrefix + (config.aliases.lib || "@/lib").replace("@/", ""), "happly-ui", finalFileName);
|
|
187201
|
+
case "registry:style":
|
|
187202
|
+
return path2.join(srcPrefix + config.aliases.ui.replace("@/", ""), "styles", finalFileName);
|
|
187209
187203
|
default:
|
|
187210
187204
|
return path2.join(srcPrefix + config.aliases.ui.replace("@/", ""), finalFileName);
|
|
187211
187205
|
}
|
|
@@ -187247,7 +187241,7 @@ function getRegistryUrl(config) {
|
|
|
187247
187241
|
return config?.registry || REGISTRY_URL;
|
|
187248
187242
|
}
|
|
187249
187243
|
function isLocalRegistry(registry) {
|
|
187250
|
-
return registry.startsWith("/") || registry.startsWith("./") || registry.startsWith("file://");
|
|
187244
|
+
return registry.startsWith("/") || registry.startsWith("./") || registry.startsWith("file://") || /^[a-zA-Z]:[\\/]/.test(registry);
|
|
187251
187245
|
}
|
|
187252
187246
|
async function fetchOrRead(url) {
|
|
187253
187247
|
if (isLocalRegistry(url)) {
|
|
@@ -188793,6 +188787,8 @@ async function detectTailwindCss(cwd) {
|
|
|
188793
188787
|
"src/globals.css",
|
|
188794
188788
|
"src/app/globals.css",
|
|
188795
188789
|
"app/globals.css",
|
|
188790
|
+
"src/app/[locale]/globals.css",
|
|
188791
|
+
"app/[locale]/globals.css",
|
|
188796
188792
|
"styles/globals.css",
|
|
188797
188793
|
"src/styles/globals.css"
|
|
188798
188794
|
];
|
|
@@ -189161,69 +189157,47 @@ var shadows = {
|
|
|
189161
189157
|
"regular-xs": "0 1px 2px 0 #0a0d1408",
|
|
189162
189158
|
"regular-sm": "0 2px 4px #1b1c1d0a",
|
|
189163
189159
|
"regular-md": "0 16px 32px -12px #0e121b1a",
|
|
189164
|
-
"
|
|
189165
|
-
"
|
|
189166
|
-
"
|
|
189167
|
-
"button-
|
|
189168
|
-
|
|
189169
|
-
|
|
189170
|
-
|
|
189171
|
-
"
|
|
189172
|
-
|
|
189173
|
-
|
|
189174
|
-
|
|
189175
|
-
"
|
|
189176
|
-
|
|
189177
|
-
|
|
189178
|
-
|
|
189160
|
+
"button-primary-focus": "0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-primary-alpha-10)",
|
|
189161
|
+
"button-important-focus": "0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-neutral-alpha-16)",
|
|
189162
|
+
"button-error-focus": "0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-red-alpha-10)",
|
|
189163
|
+
"button-warning-focus": "0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-orange-alpha-10)",
|
|
189164
|
+
"button-success-focus": "0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-green-alpha-10)",
|
|
189165
|
+
"fancy-buttons-neutral": "0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628",
|
|
189166
|
+
"fancy-buttons-primary": "0 1px 2px 0 #0e121b3d, 0 0 0 1px var(--color-primary-base)",
|
|
189167
|
+
"fancy-buttons-error": "0 1px 2px 0 #0e121b3d, 0 0 0 1px var(--color-error-base)",
|
|
189168
|
+
"fancy-buttons-stroke": "0 1px 3px 0 #0e121b1f, 0 0 0 1px var(--color-stroke-soft-200)",
|
|
189169
|
+
"toggle-switch": "0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08",
|
|
189170
|
+
"switch-thumb": "0 4px 8px 0 #1b1c1d0f, 0 2px 4px 0 #0e121b14",
|
|
189171
|
+
tooltip: "0 12px 24px 0 #0e121b0f, 0 1px 2px 0 #0e121b08",
|
|
189172
|
+
"custom-xs": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06), 0 2px 4px rgba(51, 51, 51, 0.04), 0 1px 2px rgba(51, 51, 51, 0.04), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
|
|
189173
|
+
"custom-sm": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 16px 8px -8px rgba(51, 51, 51, 0.01), 0 12px 6px -6px rgba(51, 51, 51, 0.02), 0 5px 5px -2.5px rgba(51, 51, 51, 0.08), 0 1px 3px -1.5px rgba(51, 51, 51, 0.16), inset 0 -0.5px 0.5px rgba(51, 51, 51, 0.08)",
|
|
189174
|
+
"custom-md": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04), 0 3px 3px -1.5px rgba(51, 51, 51, 0.02), 0 6px 6px -3px rgba(51, 51, 51, 0.04), 0 12px 12px -6px rgba(51, 51, 51, 0.04), 0 24px 24px -12px rgba(51, 51, 51, 0.04), 0 48px 48px -24px rgba(51, 51, 51, 0.04), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
|
|
189175
|
+
"custom-lg": "0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04), 0 3px 3px -1.5px rgba(51, 51, 51, 0.02), 0 6px 6px -3px rgba(51, 51, 51, 0.04), 0 12px 12px -6px rgba(51, 51, 51, 0.04), 0 24px 24px -12px rgba(51, 51, 51, 0.04), 0 48px 48px -24px rgba(51, 51, 51, 0.04), 0 96px 96px -32px rgba(51, 51, 51, 0.06), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06)",
|
|
189176
|
+
"complex-12": "0 80px 80px -40px rgba(23, 23, 23, 0.04), 0 48px 48px -24px rgba(23, 23, 23, 0.04)",
|
|
189177
|
+
complex: "0 20px 20px -10px rgba(23, 23, 23, 0.04), 0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08), 0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset",
|
|
189178
|
+
"complex-2": "0 10px 10px -5px rgba(23, 23, 23, 0.02), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02)",
|
|
189179
|
+
"complex-4": "0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02)",
|
|
189180
|
+
"complex-5": "0 0 6px 0 rgba(255, 255, 255, 0.24) inset, 0 40px 40px -20px rgba(23, 23, 23, 0.06), 0 10px 10px -5px rgba(23, 23, 23, 0.06), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04)",
|
|
189181
|
+
"complex-6": "0 40px 40px -20px rgba(23, 23, 23, 0.06), 0 10px 10px -5px rgba(23, 23, 23, 0.06), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 6px 0 rgba(255, 255, 255, 0.24) inset",
|
|
189182
|
+
"complex-7": "0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #335cff",
|
|
189183
|
+
"complex-8": "0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0.08), 0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset",
|
|
189184
|
+
"complex-9": "0 80px 40px -20px rgba(23, 23, 23, 0.06), 0 40px 40px -20px rgba(23, 23, 23, 0.06), 0 10px 10px -5px rgba(23, 23, 23, 0.06), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 6px 0 rgba(255, 255, 255, 0.04) inset",
|
|
189185
|
+
"complex-10": "0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04)",
|
|
189186
|
+
"complex-11": "0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset, 0 20px 20px -10px rgba(23, 23, 23, 0.04), 0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0.04), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04)",
|
|
189187
|
+
"custom-input": "0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08)",
|
|
189188
|
+
"custom-input-2": "0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px var(--color-bg-soft-200)",
|
|
189189
|
+
"custom-input-4": "0 3px 3px -1.5px rgba(23, 23, 23, 0.06), 0 1px 1px -0.5px rgba(23, 23, 23, 0.06), 0 0 0 1px rgba(23, 23, 23, 0.02)",
|
|
189190
|
+
"custom-input-active": "0 6px 6px -3px rgba(23, 23, 23, 0.02), 0 3px 3px -1.5px rgba(23, 23, 23, 0.04), 0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff",
|
|
189191
|
+
"gray-shadow": "0 0 0 1px rgba(23, 23, 23, 0.08)"
|
|
189179
189192
|
};
|
|
189180
189193
|
var borderRadii = {
|
|
189181
|
-
lg: "var(--radius)",
|
|
189182
|
-
md: "calc(var(--radius) - 2px)",
|
|
189183
|
-
sm: "calc(var(--radius) - 4px)",
|
|
189184
189194
|
"8": "0.5rem",
|
|
189185
|
-
"10": ".625rem",
|
|
189195
|
+
"10": "0.625rem",
|
|
189186
189196
|
"12": "0.75rem",
|
|
189187
189197
|
"16": "1rem",
|
|
189188
189198
|
"20": "1.25rem"
|
|
189189
189199
|
};
|
|
189190
189200
|
var colors = {
|
|
189191
|
-
primaryColor: "rgb(var(--primary-color-rgb) / <alpha-value>)",
|
|
189192
|
-
primaryColorText: "var(--primary-color-text)",
|
|
189193
|
-
secondaryColor: "var(--secondary-color)",
|
|
189194
|
-
secondaryColorText: "var(--secondary-color-text)",
|
|
189195
|
-
primaryBase: "#335CFF",
|
|
189196
|
-
turquoise: "#2aceb6",
|
|
189197
|
-
glitter: "#e4e9fe",
|
|
189198
|
-
clarity: {
|
|
189199
|
-
"0.1": "#484854",
|
|
189200
|
-
0: "#575759",
|
|
189201
|
-
1: "#7F7F82",
|
|
189202
|
-
2: "#95A0BC",
|
|
189203
|
-
3: "#B1B1C4",
|
|
189204
|
-
"3.5": "#CFCFD4",
|
|
189205
|
-
"3.75": "#D9D9E2",
|
|
189206
|
-
4: "#E6E6EC",
|
|
189207
|
-
5: "#F9FAFB",
|
|
189208
|
-
black: "#2f2f30",
|
|
189209
|
-
blue: {
|
|
189210
|
-
0: "#595782",
|
|
189211
|
-
25: "#F8F9FF",
|
|
189212
|
-
40: "#E6E6EC",
|
|
189213
|
-
50: "#E6ECFF"
|
|
189214
|
-
},
|
|
189215
|
-
bg: "#f5f6ff",
|
|
189216
|
-
bg2: "#F7F7FC",
|
|
189217
|
-
cyan: "#13B6E7",
|
|
189218
|
-
gray: "#9292A1",
|
|
189219
|
-
verified: "#1393E7",
|
|
189220
|
-
green: "#2AAF3C",
|
|
189221
|
-
pink: "#DD438E",
|
|
189222
|
-
purple: "#4A4DEE",
|
|
189223
|
-
red: "#FF472E",
|
|
189224
|
-
yellow: "#E9A91E",
|
|
189225
|
-
orange: "#FF8447"
|
|
189226
|
-
},
|
|
189227
189201
|
ds: {
|
|
189228
189202
|
"static-black": "var(--color-static-black)",
|
|
189229
189203
|
"static-white": "var(--color-static-white)",
|
|
@@ -189258,9 +189232,11 @@ var colors = {
|
|
|
189258
189232
|
"information-light": "var(--color-information-light)",
|
|
189259
189233
|
"information-lighter": "var(--color-information-lighter)",
|
|
189260
189234
|
"warning-dark": "var(--color-warning-dark)",
|
|
189235
|
+
"warning-darker": "var(--color-warning-darker)",
|
|
189261
189236
|
"warning-base": "var(--color-warning-base)",
|
|
189262
189237
|
"warning-light": "var(--color-warning-light)",
|
|
189263
189238
|
"warning-lighter": "var(--color-warning-lighter)",
|
|
189239
|
+
"warning-alpha-10": "var(--color-warning-alpha-10)",
|
|
189264
189240
|
"error-darker": "var(--color-error-darker)",
|
|
189265
189241
|
"error-dark": "var(--color-error-dark)",
|
|
189266
189242
|
"error-base": "var(--color-error-base)",
|
|
@@ -189268,9 +189244,11 @@ var colors = {
|
|
|
189268
189244
|
"error-lighter": "var(--color-error-lighter)",
|
|
189269
189245
|
"error-alpha-10": "var(--color-error-alpha-10)",
|
|
189270
189246
|
"success-dark": "var(--color-success-dark)",
|
|
189247
|
+
"success-darker": "var(--color-success-darker)",
|
|
189271
189248
|
"success-base": "var(--color-success-base)",
|
|
189272
189249
|
"success-light": "var(--color-success-light)",
|
|
189273
189250
|
"success-lighter": "var(--color-success-lighter)",
|
|
189251
|
+
"success-alpha-10": "var(--color-success-alpha-10)",
|
|
189274
189252
|
"away-dark": "var(--color-away-dark)",
|
|
189275
189253
|
"away-base": "var(--color-away-base)",
|
|
189276
189254
|
"away-light": "var(--color-away-light)",
|
|
@@ -189305,317 +189283,361 @@ var colors = {
|
|
|
189305
189283
|
950: "var(--color-primary-950)"
|
|
189306
189284
|
},
|
|
189307
189285
|
neutral: {
|
|
189308
|
-
0: "
|
|
189309
|
-
50: "
|
|
189310
|
-
100: "
|
|
189311
|
-
200: "
|
|
189312
|
-
300: "
|
|
189313
|
-
400: "
|
|
189314
|
-
500: "
|
|
189315
|
-
600: "
|
|
189316
|
-
700: "
|
|
189317
|
-
800: "
|
|
189318
|
-
900: "
|
|
189319
|
-
950: "
|
|
189320
|
-
},
|
|
189321
|
-
blue: {
|
|
189322
|
-
50: "#EBF1FF",
|
|
189323
|
-
100: "#D5E2FF",
|
|
189324
|
-
200: "#C0D5FF",
|
|
189325
|
-
300: "#97BAFF",
|
|
189326
|
-
400: "#6895FF",
|
|
189327
|
-
500: "#335CFF",
|
|
189328
|
-
600: "#3559E9",
|
|
189329
|
-
700: "#2547D0",
|
|
189330
|
-
800: "#1F3BAD",
|
|
189331
|
-
900: "#182F8B",
|
|
189332
|
-
950: "#122368"
|
|
189333
|
-
},
|
|
189334
|
-
orange: {
|
|
189335
|
-
50: "#FFF3EB",
|
|
189336
|
-
100: "#FFE6D5",
|
|
189337
|
-
200: "#FFD9C0",
|
|
189338
|
-
300: "#FFC197",
|
|
189339
|
-
400: "#FFA468",
|
|
189340
|
-
500: "#FF9147",
|
|
189341
|
-
600: "#E97D35",
|
|
189342
|
-
700: "#D06925",
|
|
189343
|
-
800: "#AD581F",
|
|
189344
|
-
900: "#8B4618",
|
|
189345
|
-
950: "#683412"
|
|
189346
|
-
},
|
|
189347
|
-
red: {
|
|
189348
|
-
50: "#FFEBEC",
|
|
189349
|
-
100: "#FFD5D8",
|
|
189350
|
-
200: "#FFC0C5",
|
|
189351
|
-
300: "#FF97A0",
|
|
189352
|
-
400: "#FF6875",
|
|
189353
|
-
500: "#FB3748",
|
|
189354
|
-
600: "#E93544",
|
|
189355
|
-
700: "#D02533",
|
|
189356
|
-
800: "#AD1F2B",
|
|
189357
|
-
900: "#8B1822",
|
|
189358
|
-
950: "#681219"
|
|
189359
|
-
},
|
|
189360
|
-
green: {
|
|
189361
|
-
50: "#E0FAEC",
|
|
189362
|
-
100: "#D0FBE9",
|
|
189363
|
-
200: "#C2F5DA",
|
|
189364
|
-
300: "#84EBB4",
|
|
189365
|
-
400: "#3EE089",
|
|
189366
|
-
500: "#1FC16B",
|
|
189367
|
-
600: "#1DAF61",
|
|
189368
|
-
700: "#178C4E",
|
|
189369
|
-
800: "#1A7544",
|
|
189370
|
-
900: "#16643B",
|
|
189371
|
-
950: "#0B4627"
|
|
189372
|
-
},
|
|
189373
|
-
yellow: {
|
|
189374
|
-
50: "#FFF4D6",
|
|
189375
|
-
100: "#FFEFCC",
|
|
189376
|
-
200: "#FFECC0",
|
|
189377
|
-
300: "#FFE097",
|
|
189378
|
-
400: "#FFD268",
|
|
189379
|
-
500: "#F6B51E",
|
|
189380
|
-
600: "#E6A819",
|
|
189381
|
-
700: "#C99A2C",
|
|
189382
|
-
800: "#A78025",
|
|
189383
|
-
900: "#86661D",
|
|
189384
|
-
950: "#624C18"
|
|
189385
|
-
},
|
|
189386
|
-
purple: {
|
|
189387
|
-
50: "#EFEBFF",
|
|
189388
|
-
100: "#DCD5FF",
|
|
189389
|
-
200: "#CAC0FF",
|
|
189390
|
-
300: "#A897FF",
|
|
189391
|
-
400: "#8C71F6",
|
|
189392
|
-
500: "#7D52F4",
|
|
189393
|
-
600: "#693EE0",
|
|
189394
|
-
700: "#5B2CC9",
|
|
189395
|
-
800: "#4C25A7",
|
|
189396
|
-
900: "#3D1D86",
|
|
189397
|
-
950: "#351A75"
|
|
189398
|
-
},
|
|
189399
|
-
sky: {
|
|
189400
|
-
50: "#EBF8FF",
|
|
189401
|
-
100: "#D5F1FF",
|
|
189402
|
-
200: "#C0EAFF",
|
|
189403
|
-
300: "#97DCFF",
|
|
189404
|
-
400: "#68CDFF",
|
|
189405
|
-
500: "#47C2FF",
|
|
189406
|
-
600: "#35ADE9",
|
|
189407
|
-
700: "#2597D0",
|
|
189408
|
-
800: "#1F7EAD",
|
|
189409
|
-
900: "#18658B",
|
|
189410
|
-
950: "#124B68"
|
|
189411
|
-
},
|
|
189412
|
-
pink: {
|
|
189413
|
-
50: "#FFEBF4",
|
|
189414
|
-
100: "#FFD5EA",
|
|
189415
|
-
200: "#FFC0DF",
|
|
189416
|
-
300: "#FF97CB",
|
|
189417
|
-
400: "#FF68B3",
|
|
189418
|
-
500: "#FB4BA3",
|
|
189419
|
-
600: "#E9358F",
|
|
189420
|
-
700: "#D0257A",
|
|
189421
|
-
800: "#AD1F66",
|
|
189422
|
-
900: "#8B1852",
|
|
189423
|
-
950: "#68123D"
|
|
189424
|
-
},
|
|
189425
|
-
teal: {
|
|
189426
|
-
50: "#E4FBF8",
|
|
189427
|
-
100: "#D0FBF5",
|
|
189428
|
-
200: "#C2F5EE",
|
|
189429
|
-
300: "#84EBDD",
|
|
189430
|
-
400: "#3FDEC9",
|
|
189431
|
-
500: "#22D3BB",
|
|
189432
|
-
600: "#1DAF9C",
|
|
189433
|
-
700: "#178C7D",
|
|
189434
|
-
800: "#1A7569",
|
|
189435
|
-
900: "#16645A",
|
|
189436
|
-
950: "#0B463E"
|
|
189286
|
+
0: "var(--color-neutral-0)",
|
|
189287
|
+
50: "var(--color-neutral-50)",
|
|
189288
|
+
100: "var(--color-neutral-100)",
|
|
189289
|
+
200: "var(--color-neutral-200)",
|
|
189290
|
+
300: "var(--color-neutral-300)",
|
|
189291
|
+
400: "var(--color-neutral-400)",
|
|
189292
|
+
500: "var(--color-neutral-500)",
|
|
189293
|
+
600: "var(--color-neutral-600)",
|
|
189294
|
+
700: "var(--color-neutral-700)",
|
|
189295
|
+
800: "var(--color-neutral-800)",
|
|
189296
|
+
900: "var(--color-neutral-900)",
|
|
189297
|
+
950: "var(--color-neutral-950)"
|
|
189437
189298
|
},
|
|
189438
189299
|
alpha: {
|
|
189439
189300
|
neutral: {
|
|
189440
|
-
24: "
|
|
189441
|
-
16: "
|
|
189442
|
-
10: "
|
|
189301
|
+
24: "var(--color-neutral-alpha-24)",
|
|
189302
|
+
16: "var(--color-neutral-alpha-16)",
|
|
189303
|
+
10: "var(--color-neutral-alpha-10)"
|
|
189443
189304
|
},
|
|
189444
189305
|
blue: {
|
|
189445
|
-
24: "
|
|
189446
|
-
16: "
|
|
189447
|
-
10: "
|
|
189306
|
+
24: "var(--color-blue-alpha-24)",
|
|
189307
|
+
16: "var(--color-blue-alpha-16)",
|
|
189308
|
+
10: "var(--color-blue-alpha-10)"
|
|
189448
189309
|
},
|
|
189449
189310
|
orange: {
|
|
189450
|
-
24: "
|
|
189451
|
-
16: "
|
|
189452
|
-
10: "
|
|
189311
|
+
24: "var(--color-orange-alpha-24)",
|
|
189312
|
+
16: "var(--color-orange-alpha-16)",
|
|
189313
|
+
10: "var(--color-orange-alpha-10)"
|
|
189453
189314
|
},
|
|
189454
189315
|
red: {
|
|
189455
|
-
24: "
|
|
189456
|
-
16: "
|
|
189457
|
-
10: "
|
|
189316
|
+
24: "var(--color-red-alpha-24)",
|
|
189317
|
+
16: "var(--color-red-alpha-16)",
|
|
189318
|
+
10: "var(--color-red-alpha-10)"
|
|
189458
189319
|
},
|
|
189459
189320
|
green: {
|
|
189460
|
-
24: "
|
|
189461
|
-
16: "
|
|
189462
|
-
10: "
|
|
189321
|
+
24: "var(--color-green-alpha-24)",
|
|
189322
|
+
16: "var(--color-green-alpha-16)",
|
|
189323
|
+
10: "var(--color-green-alpha-10)"
|
|
189463
189324
|
},
|
|
189464
189325
|
yellow: {
|
|
189465
|
-
24: "
|
|
189466
|
-
16: "
|
|
189467
|
-
10: "
|
|
189326
|
+
24: "var(--color-yellow-alpha-24)",
|
|
189327
|
+
16: "var(--color-yellow-alpha-16)",
|
|
189328
|
+
10: "var(--color-yellow-alpha-10)"
|
|
189468
189329
|
},
|
|
189469
189330
|
purple: {
|
|
189470
|
-
24: "
|
|
189471
|
-
16: "
|
|
189472
|
-
10: "
|
|
189331
|
+
24: "var(--color-purple-alpha-24)",
|
|
189332
|
+
16: "var(--color-purple-alpha-16)",
|
|
189333
|
+
10: "var(--color-purple-alpha-10)"
|
|
189473
189334
|
},
|
|
189474
189335
|
sky: {
|
|
189475
|
-
24: "
|
|
189476
|
-
16: "
|
|
189477
|
-
10: "
|
|
189336
|
+
24: "var(--color-sky-alpha-24)",
|
|
189337
|
+
16: "var(--color-sky-alpha-16)",
|
|
189338
|
+
10: "var(--color-sky-alpha-10)"
|
|
189478
189339
|
},
|
|
189479
189340
|
pink: {
|
|
189480
|
-
24: "
|
|
189481
|
-
16: "
|
|
189482
|
-
10: "
|
|
189341
|
+
24: "var(--color-pink-alpha-24)",
|
|
189342
|
+
16: "var(--color-pink-alpha-16)",
|
|
189343
|
+
10: "var(--color-pink-alpha-10)"
|
|
189483
189344
|
},
|
|
189484
189345
|
teal: {
|
|
189485
|
-
24: "
|
|
189486
|
-
16: "
|
|
189487
|
-
10: "
|
|
189346
|
+
24: "var(--color-teal-alpha-24)",
|
|
189347
|
+
16: "var(--color-teal-alpha-16)",
|
|
189348
|
+
10: "var(--color-teal-alpha-10)"
|
|
189488
189349
|
},
|
|
189489
189350
|
black: {
|
|
189490
|
-
24: "
|
|
189491
|
-
16: "
|
|
189492
|
-
10: "
|
|
189351
|
+
24: "var(--color-black-alpha-24)",
|
|
189352
|
+
16: "var(--color-black-alpha-16)",
|
|
189353
|
+
10: "var(--color-black-alpha-10)"
|
|
189493
189354
|
}
|
|
189494
189355
|
},
|
|
189495
189356
|
white: {
|
|
189496
|
-
|
|
189357
|
+
24: "var(--color-white-alpha-24)",
|
|
189358
|
+
16: "var(--color-white-alpha-16)",
|
|
189359
|
+
10: "var(--color-white-alpha-10)"
|
|
189497
189360
|
}
|
|
189498
189361
|
},
|
|
189499
|
-
|
|
189500
|
-
|
|
189501
|
-
|
|
189502
|
-
|
|
189503
|
-
var
|
|
189504
|
-
|
|
189505
|
-
|
|
189506
|
-
|
|
189507
|
-
|
|
189508
|
-
"text-soft-400": "var(--color-neutral-400)",
|
|
189509
|
-
"text-disabled-300": "var(--color-neutral-300)",
|
|
189510
|
-
"text-white-0": "var(--color-neutral-0)",
|
|
189511
|
-
overlay: "0 0 0 / 0.75",
|
|
189512
|
-
"bg-strong-950": "var(--color-neutral-950)",
|
|
189513
|
-
"bg-surface-800": "var(--color-neutral-800)",
|
|
189514
|
-
"bg-sub-300": "var(--color-neutral-300)",
|
|
189515
|
-
"bg-soft-200": "var(--color-neutral-200)",
|
|
189516
|
-
"bg-weak-50": "var(--color-neutral-50)",
|
|
189517
|
-
"bg-white-0": "var(--color-neutral-0)",
|
|
189518
|
-
"stroke-strong-950": "var(--color-neutral-950)",
|
|
189519
|
-
"stroke-sub-300": "var(--color-neutral-300)",
|
|
189520
|
-
"stroke-soft-200": "var(--color-neutral-200)",
|
|
189521
|
-
"stroke-white-0": "var(--color-neutral-0)",
|
|
189522
|
-
"primary-darker": "var(--color-blue-800)",
|
|
189523
|
-
"primary-dark": "var(--color-blue-700)",
|
|
189524
|
-
"primary-base": "var(--color-blue-500)",
|
|
189525
|
-
"primary-light": "var(--color-blue-200)",
|
|
189526
|
-
"primary-lighter": "var(--color-blue-100)",
|
|
189527
|
-
"primary-alpha-24": "var(--color-blue-alpha-24)",
|
|
189528
|
-
"primary-alpha-20": "var(--color-blue-alpha-20)",
|
|
189529
|
-
"primary-alpha-16": "var(--color-blue-alpha-16)",
|
|
189530
|
-
"primary-alpha-10": "var(--color-blue-alpha-10)",
|
|
189531
|
-
"primary-50": "var(--color-blue-50)",
|
|
189532
|
-
"primary-100": "var(--color-blue-100)",
|
|
189533
|
-
"primary-200": "var(--color-blue-200)",
|
|
189534
|
-
"primary-300": "var(--color-blue-300)",
|
|
189535
|
-
"primary-400": "var(--color-blue-400)",
|
|
189536
|
-
"primary-500": "var(--color-blue-500)",
|
|
189537
|
-
"primary-600": "var(--color-blue-600)",
|
|
189538
|
-
"primary-700": "var(--color-blue-700)",
|
|
189539
|
-
"primary-800": "var(--color-blue-800)",
|
|
189540
|
-
"primary-900": "var(--color-blue-900)",
|
|
189541
|
-
"primary-950": "var(--color-blue-950)",
|
|
189542
|
-
"faded-dark": "var(--color-neutral-800)",
|
|
189543
|
-
"faded-base": "var(--color-neutral-500)",
|
|
189544
|
-
"faded-light": "var(--color-neutral-200)",
|
|
189545
|
-
"faded-lighter": "var(--color-neutral-100)",
|
|
189546
|
-
"information-dark": "var(--color-blue-950)",
|
|
189547
|
-
"information-base": "var(--color-blue-500)",
|
|
189548
|
-
"information-light": "var(--color-blue-200)",
|
|
189549
|
-
"information-lighter": "var(--color-blue-50)",
|
|
189550
|
-
"warning-dark": "var(--color-yellow-950)",
|
|
189551
|
-
"warning-base": "var(--color-yellow-500)",
|
|
189552
|
-
"warning-light": "var(--color-yellow-200)",
|
|
189553
|
-
"warning-lighter": "var(--color-yellow-50)",
|
|
189554
|
-
"error-darker": "var(--color-red-950)",
|
|
189555
|
-
"error-dark": "var(--color-red-700)",
|
|
189556
|
-
"error-base": "var(--color-red-500)",
|
|
189557
|
-
"error-light": "var(--color-red-200)",
|
|
189558
|
-
"error-lighter": "var(--color-red-50)",
|
|
189559
|
-
"error-alpha-10": "var(--color-red-alpha-10)",
|
|
189560
|
-
"success-dark": "var(--color-green-950)",
|
|
189561
|
-
"success-base": "var(--color-green-500)",
|
|
189562
|
-
"success-light": "var(--color-green-200)",
|
|
189563
|
-
"success-lighter": "var(--color-green-50)",
|
|
189564
|
-
"away-dark": "var(--color-yellow-950)",
|
|
189565
|
-
"away-base": "var(--color-yellow-500)",
|
|
189566
|
-
"away-light": "var(--color-yellow-200)",
|
|
189567
|
-
"away-lighter": "var(--color-yellow-50)",
|
|
189568
|
-
"feature-dark": "var(--color-purple-950)",
|
|
189569
|
-
"feature-base": "var(--color-purple-500)",
|
|
189570
|
-
"feature-light": "var(--color-purple-200)",
|
|
189571
|
-
"feature-lighter": "var(--color-purple-50)",
|
|
189572
|
-
"verified-dark": "var(--color-sky-950)",
|
|
189573
|
-
"verified-base": "var(--color-sky-500)",
|
|
189574
|
-
"verified-light": "var(--color-sky-200)",
|
|
189575
|
-
"verified-lighter": "var(--color-sky-50)",
|
|
189576
|
-
"highlighted-dark": "var(--color-pink-950)",
|
|
189577
|
-
"highlighted-base": "var(--color-pink-500)",
|
|
189578
|
-
"highlighted-light": "var(--color-pink-200)",
|
|
189579
|
-
"highlighted-lighter": "var(--color-pink-50)",
|
|
189580
|
-
"stable-dark": "var(--color-teal-950)",
|
|
189581
|
-
"stable-base": "var(--color-teal-500)",
|
|
189582
|
-
"stable-light": "var(--color-teal-200)",
|
|
189583
|
-
"stable-lighter": "var(--color-teal-50)"
|
|
189584
|
-
};
|
|
189585
|
-
var baseSemanticColors = {
|
|
189586
|
-
background: "hsl(var(--background))",
|
|
189587
|
-
foreground: "hsl(var(--foreground))",
|
|
189588
|
-
card: {
|
|
189589
|
-
DEFAULT: "hsl(var(--card))",
|
|
189590
|
-
foreground: "hsl(var(--card-foreground))"
|
|
189362
|
+
bg: {
|
|
189363
|
+
"strong-950": "var(--color-bg-strong-950)",
|
|
189364
|
+
"surface-800": "var(--color-bg-surface-800)",
|
|
189365
|
+
"sub-300": "var(--color-bg-sub-300)",
|
|
189366
|
+
"soft-200": "var(--color-bg-soft-200)",
|
|
189367
|
+
"soft-600": "var(--color-bg-soft-600)",
|
|
189368
|
+
"weak-50": "var(--color-bg-weak-50)",
|
|
189369
|
+
"weak-25": "var(--color-bg-weak-25)",
|
|
189370
|
+
"white-0": "var(--color-bg-white-0)"
|
|
189591
189371
|
},
|
|
189592
|
-
|
|
189593
|
-
|
|
189594
|
-
|
|
189372
|
+
text: {
|
|
189373
|
+
"strong-950": "var(--color-text-strong-950)",
|
|
189374
|
+
"sub-600": "var(--color-text-sub-600)",
|
|
189375
|
+
"soft-400": "var(--color-text-soft-400)",
|
|
189376
|
+
"disabled-300": "var(--color-text-disabled-300)",
|
|
189377
|
+
"white-0": "var(--color-text-white-0)"
|
|
189378
|
+
},
|
|
189379
|
+
stroke: {
|
|
189380
|
+
"strong-950": "var(--color-stroke-strong-950)",
|
|
189381
|
+
"sub-300": "var(--color-stroke-sub-300)",
|
|
189382
|
+
"soft-200": "var(--color-stroke-soft-200)",
|
|
189383
|
+
"white-0": "var(--color-stroke-white-0)"
|
|
189384
|
+
},
|
|
189385
|
+
static: {
|
|
189386
|
+
black: "var(--color-static-black)",
|
|
189387
|
+
white: "var(--color-static-white)"
|
|
189595
189388
|
},
|
|
189596
189389
|
primary: {
|
|
189597
|
-
|
|
189598
|
-
|
|
189390
|
+
50: "var(--color-primary-50)",
|
|
189391
|
+
100: "var(--color-primary-100)",
|
|
189392
|
+
200: "var(--color-primary-200)",
|
|
189393
|
+
300: "var(--color-primary-300)",
|
|
189394
|
+
400: "var(--color-primary-400)",
|
|
189395
|
+
500: "var(--color-primary-500)",
|
|
189396
|
+
600: "var(--color-primary-600)",
|
|
189397
|
+
700: "var(--color-primary-700)",
|
|
189398
|
+
800: "var(--color-primary-800)",
|
|
189399
|
+
900: "var(--color-primary-900)",
|
|
189400
|
+
950: "var(--color-primary-950)",
|
|
189401
|
+
darker: "var(--color-primary-darker)",
|
|
189402
|
+
dark: "var(--color-primary-dark)",
|
|
189403
|
+
base: "var(--color-primary-base)",
|
|
189404
|
+
light: "var(--color-primary-light)",
|
|
189405
|
+
lighter: "var(--color-primary-lighter)",
|
|
189406
|
+
"alpha-24": "var(--color-primary-alpha-24)",
|
|
189407
|
+
"alpha-20": "var(--color-primary-alpha-20)",
|
|
189408
|
+
"alpha-16": "var(--color-primary-alpha-16)",
|
|
189409
|
+
"alpha-10": "var(--color-primary-alpha-10)"
|
|
189410
|
+
},
|
|
189411
|
+
faded: {
|
|
189412
|
+
dark: "var(--color-faded-dark)",
|
|
189413
|
+
base: "var(--color-faded-base)",
|
|
189414
|
+
light: "var(--color-faded-light)",
|
|
189415
|
+
lighter: "var(--color-faded-lighter)"
|
|
189416
|
+
},
|
|
189417
|
+
information: {
|
|
189418
|
+
dark: "var(--color-information-dark)",
|
|
189419
|
+
base: "var(--color-information-base)",
|
|
189420
|
+
light: "var(--color-information-light)",
|
|
189421
|
+
lighter: "var(--color-information-lighter)"
|
|
189422
|
+
},
|
|
189423
|
+
warning: {
|
|
189424
|
+
darker: "var(--color-warning-darker)",
|
|
189425
|
+
dark: "var(--color-warning-dark)",
|
|
189426
|
+
base: "var(--color-warning-base)",
|
|
189427
|
+
light: "var(--color-warning-light)",
|
|
189428
|
+
lighter: "var(--color-warning-lighter)",
|
|
189429
|
+
"alpha-10": "var(--color-warning-alpha-10)"
|
|
189430
|
+
},
|
|
189431
|
+
error: {
|
|
189432
|
+
darker: "var(--color-error-darker)",
|
|
189433
|
+
dark: "var(--color-error-dark)",
|
|
189434
|
+
base: "var(--color-error-base)",
|
|
189435
|
+
light: "var(--color-error-light)",
|
|
189436
|
+
lighter: "var(--color-error-lighter)",
|
|
189437
|
+
"alpha-10": "var(--color-error-alpha-10)"
|
|
189438
|
+
},
|
|
189439
|
+
success: {
|
|
189440
|
+
darker: "var(--color-success-darker)",
|
|
189441
|
+
dark: "var(--color-success-dark)",
|
|
189442
|
+
base: "var(--color-success-base)",
|
|
189443
|
+
light: "var(--color-success-light)",
|
|
189444
|
+
lighter: "var(--color-success-lighter)",
|
|
189445
|
+
"alpha-10": "var(--color-success-alpha-10)"
|
|
189446
|
+
},
|
|
189447
|
+
away: {
|
|
189448
|
+
dark: "var(--color-away-dark)",
|
|
189449
|
+
base: "var(--color-away-base)",
|
|
189450
|
+
light: "var(--color-away-light)",
|
|
189451
|
+
lighter: "var(--color-away-lighter)"
|
|
189452
|
+
},
|
|
189453
|
+
feature: {
|
|
189454
|
+
dark: "var(--color-feature-dark)",
|
|
189455
|
+
base: "var(--color-feature-base)",
|
|
189456
|
+
light: "var(--color-feature-light)",
|
|
189457
|
+
lighter: "var(--color-feature-lighter)"
|
|
189458
|
+
},
|
|
189459
|
+
verified: {
|
|
189460
|
+
dark: "var(--color-verified-dark)",
|
|
189461
|
+
base: "var(--color-verified-base)",
|
|
189462
|
+
light: "var(--color-verified-light)",
|
|
189463
|
+
lighter: "var(--color-verified-lighter)"
|
|
189464
|
+
},
|
|
189465
|
+
highlighted: {
|
|
189466
|
+
dark: "var(--color-highlighted-dark)",
|
|
189467
|
+
base: "var(--color-highlighted-base)",
|
|
189468
|
+
light: "var(--color-highlighted-light)",
|
|
189469
|
+
lighter: "var(--color-highlighted-lighter)"
|
|
189470
|
+
},
|
|
189471
|
+
stable: {
|
|
189472
|
+
dark: "var(--color-stable-dark)",
|
|
189473
|
+
base: "var(--color-stable-base)",
|
|
189474
|
+
light: "var(--color-stable-light)",
|
|
189475
|
+
lighter: "var(--color-stable-lighter)"
|
|
189476
|
+
},
|
|
189477
|
+
neutral: {
|
|
189478
|
+
0: "var(--color-neutral-0)",
|
|
189479
|
+
50: "var(--color-neutral-50)",
|
|
189480
|
+
100: "var(--color-neutral-100)",
|
|
189481
|
+
200: "var(--color-neutral-200)",
|
|
189482
|
+
300: "var(--color-neutral-300)",
|
|
189483
|
+
400: "var(--color-neutral-400)",
|
|
189484
|
+
500: "var(--color-neutral-500)",
|
|
189485
|
+
600: "var(--color-neutral-600)",
|
|
189486
|
+
700: "var(--color-neutral-700)",
|
|
189487
|
+
800: "var(--color-neutral-800)",
|
|
189488
|
+
900: "var(--color-neutral-900)",
|
|
189489
|
+
950: "var(--color-neutral-950)"
|
|
189490
|
+
},
|
|
189491
|
+
overlay: {
|
|
189492
|
+
DEFAULT: "var(--color-overlay)",
|
|
189493
|
+
gray: "var(--color-overlay-gray)",
|
|
189494
|
+
slate: "var(--color-overlay-slate)"
|
|
189495
|
+
},
|
|
189496
|
+
gray: {
|
|
189497
|
+
0: "#ffffff",
|
|
189498
|
+
50: "#f7f7f7",
|
|
189499
|
+
100: "#f5f5f5",
|
|
189500
|
+
200: "#ebebeb",
|
|
189501
|
+
300: "#d1d1d1",
|
|
189502
|
+
400: "#a3a3a3",
|
|
189503
|
+
500: "#7b7b7b",
|
|
189504
|
+
600: "#5c5c5c",
|
|
189505
|
+
700: "#333333",
|
|
189506
|
+
800: "#262626",
|
|
189507
|
+
900: "#1c1c1c",
|
|
189508
|
+
950: "#171717"
|
|
189509
|
+
},
|
|
189510
|
+
slate: {
|
|
189511
|
+
0: "#ffffff",
|
|
189512
|
+
50: "#f5f7fa",
|
|
189513
|
+
100: "#f2f5f8",
|
|
189514
|
+
200: "#eaecf0",
|
|
189515
|
+
300: "#cacfd8",
|
|
189516
|
+
400: "#99a0ae",
|
|
189517
|
+
500: "#717784",
|
|
189518
|
+
600: "#525866",
|
|
189519
|
+
700: "#2b303b",
|
|
189520
|
+
800: "#222530",
|
|
189521
|
+
900: "#181b25",
|
|
189522
|
+
950: "#0e121b"
|
|
189523
|
+
},
|
|
189524
|
+
blue: {
|
|
189525
|
+
50: "#ebf1ff",
|
|
189526
|
+
100: "#d5e2ff",
|
|
189527
|
+
200: "#c0d5ff",
|
|
189528
|
+
300: "#97baff",
|
|
189529
|
+
400: "#4d82ff",
|
|
189530
|
+
500: "#335cff",
|
|
189531
|
+
600: "#3559e9",
|
|
189532
|
+
700: "#2547d0",
|
|
189533
|
+
800: "#1f3bad",
|
|
189534
|
+
900: "#182f8b",
|
|
189535
|
+
950: "#122368"
|
|
189599
189536
|
},
|
|
189600
|
-
|
|
189601
|
-
|
|
189602
|
-
|
|
189537
|
+
orange: {
|
|
189538
|
+
50: "#fff3eb",
|
|
189539
|
+
100: "#ffe6d5",
|
|
189540
|
+
200: "#ffd9c0",
|
|
189541
|
+
300: "#ffc197",
|
|
189542
|
+
400: "#ffa468",
|
|
189543
|
+
500: "#fa7319",
|
|
189544
|
+
600: "#e16614",
|
|
189545
|
+
700: "#ce5e12",
|
|
189546
|
+
800: "#b75310",
|
|
189547
|
+
900: "#96440d",
|
|
189548
|
+
950: "#71330a"
|
|
189603
189549
|
},
|
|
189604
|
-
|
|
189605
|
-
|
|
189606
|
-
|
|
189550
|
+
red: {
|
|
189551
|
+
50: "#ffebec",
|
|
189552
|
+
100: "#ffd5d8",
|
|
189553
|
+
200: "#ffc0c5",
|
|
189554
|
+
300: "#ff97a0",
|
|
189555
|
+
400: "#ff6875",
|
|
189556
|
+
500: "#fb3748",
|
|
189557
|
+
600: "#e93544",
|
|
189558
|
+
700: "#d02533",
|
|
189559
|
+
800: "#ad1f2b",
|
|
189560
|
+
900: "#8b1822",
|
|
189561
|
+
950: "#681219"
|
|
189607
189562
|
},
|
|
189608
|
-
|
|
189609
|
-
|
|
189610
|
-
|
|
189563
|
+
green: {
|
|
189564
|
+
50: "#e3f7ec",
|
|
189565
|
+
100: "#d6f5e8",
|
|
189566
|
+
200: "#c2f5da",
|
|
189567
|
+
300: "#84ebb4",
|
|
189568
|
+
400: "#3ee089",
|
|
189569
|
+
500: "#1fc16b",
|
|
189570
|
+
600: "#1daf61",
|
|
189571
|
+
700: "#178c4e",
|
|
189572
|
+
800: "#1a7544",
|
|
189573
|
+
900: "#16643b",
|
|
189574
|
+
950: "#0b4627"
|
|
189611
189575
|
},
|
|
189612
|
-
|
|
189613
|
-
|
|
189614
|
-
|
|
189576
|
+
yellow: {
|
|
189577
|
+
50: "#fffaeb",
|
|
189578
|
+
100: "#ffefcc",
|
|
189579
|
+
200: "#ffecc0",
|
|
189580
|
+
300: "#ffe097",
|
|
189581
|
+
400: "#ffd268",
|
|
189582
|
+
500: "#f6b51e",
|
|
189583
|
+
600: "#e6a819",
|
|
189584
|
+
700: "#c99a2c",
|
|
189585
|
+
800: "#a78025",
|
|
189586
|
+
900: "#86661d",
|
|
189587
|
+
950: "#624c18"
|
|
189615
189588
|
},
|
|
189616
|
-
|
|
189617
|
-
|
|
189618
|
-
|
|
189589
|
+
purple: {
|
|
189590
|
+
50: "#efebff",
|
|
189591
|
+
100: "#dcd5ff",
|
|
189592
|
+
200: "#cac0ff",
|
|
189593
|
+
300: "#a897ff",
|
|
189594
|
+
400: "#8c71f6",
|
|
189595
|
+
500: "#7d52f4",
|
|
189596
|
+
600: "#693ee0",
|
|
189597
|
+
700: "#5b2cc9",
|
|
189598
|
+
800: "#4c25a7",
|
|
189599
|
+
900: "#3d1d86",
|
|
189600
|
+
950: "#351a75"
|
|
189601
|
+
},
|
|
189602
|
+
sky: {
|
|
189603
|
+
50: "#ebf8ff",
|
|
189604
|
+
100: "#d5f1ff",
|
|
189605
|
+
200: "#c0eaff",
|
|
189606
|
+
300: "#97dcff",
|
|
189607
|
+
400: "#68cdff",
|
|
189608
|
+
500: "#47c2ff",
|
|
189609
|
+
600: "#35ade9",
|
|
189610
|
+
700: "#2597d0",
|
|
189611
|
+
800: "#1f7ead",
|
|
189612
|
+
900: "#18658b",
|
|
189613
|
+
950: "#124b68"
|
|
189614
|
+
},
|
|
189615
|
+
pink: {
|
|
189616
|
+
50: "#ffebf4",
|
|
189617
|
+
100: "#ffd5ea",
|
|
189618
|
+
200: "#ffc0df",
|
|
189619
|
+
300: "#ff97cb",
|
|
189620
|
+
400: "#ff68b3",
|
|
189621
|
+
500: "#fb4ba3",
|
|
189622
|
+
600: "#e9358f",
|
|
189623
|
+
700: "#d0257a",
|
|
189624
|
+
800: "#ad1f66",
|
|
189625
|
+
900: "#8b1852",
|
|
189626
|
+
950: "#68123d"
|
|
189627
|
+
},
|
|
189628
|
+
teal: {
|
|
189629
|
+
50: "#e4fbf8",
|
|
189630
|
+
100: "#d0fbf5",
|
|
189631
|
+
200: "#c2f5ee",
|
|
189632
|
+
300: "#84ebdd",
|
|
189633
|
+
400: "#3fdec9",
|
|
189634
|
+
500: "#22d3bb",
|
|
189635
|
+
600: "#1daf9c",
|
|
189636
|
+
700: "#178c7d",
|
|
189637
|
+
800: "#1a7569",
|
|
189638
|
+
900: "#16645a",
|
|
189639
|
+
950: "#0b463e"
|
|
189640
|
+
}
|
|
189619
189641
|
};
|
|
189620
189642
|
var fontFamilies = {
|
|
189621
189643
|
thunder: [
|
|
@@ -189671,125 +189693,27 @@ var keyframes = {
|
|
|
189671
189693
|
"0%": { transform: "scale(0.5)", opacity: "0" },
|
|
189672
189694
|
"50%": { transform: "scale(1.2)" },
|
|
189673
189695
|
"100%": { transform: "scale(1)", opacity: "1" }
|
|
189696
|
+
},
|
|
189697
|
+
shimmer: {
|
|
189698
|
+
"0%": { backgroundPosition: "200% 0" },
|
|
189699
|
+
"100%": { backgroundPosition: "-200% 0" }
|
|
189674
189700
|
}
|
|
189675
189701
|
};
|
|
189676
189702
|
var animations = {
|
|
189677
189703
|
"accordion-down": "accordion-down 0.2s ease-out",
|
|
189678
189704
|
"accordion-up": "accordion-up 0.2s ease-out",
|
|
189679
189705
|
"spin-smooth": "spin-smooth 1s linear infinite",
|
|
189680
|
-
"copy-success": "copy-success 0.3s ease-out forwards"
|
|
189706
|
+
"copy-success": "copy-success 0.3s ease-out forwards",
|
|
189707
|
+
shimmer: "shimmer 2s infinite linear"
|
|
189681
189708
|
};
|
|
189682
189709
|
|
|
189683
189710
|
// src/utils/transformers/tailwind.ts
|
|
189711
|
+
var HAPPLY_PLUGIN_FILE = "happly-ui-tailwind.cjs";
|
|
189684
189712
|
async function updateTailwindConfig(cwd, config, tailwindVersion) {
|
|
189685
189713
|
if (tailwindVersion === 4) {
|
|
189686
|
-
|
|
189714
|
+
logger.success("Happly tokens applied via happly-theme.css (v4)");
|
|
189687
189715
|
} else {
|
|
189688
189716
|
await updateConfigV3(cwd, config);
|
|
189689
|
-
await updateCssV3(cwd, config);
|
|
189690
|
-
}
|
|
189691
|
-
}
|
|
189692
|
-
function generateCssVariables() {
|
|
189693
|
-
const vars = [];
|
|
189694
|
-
const colorsObj = colors;
|
|
189695
|
-
const ds = colorsObj.ds || {};
|
|
189696
|
-
Object.entries(ds).forEach(([key, value]) => {
|
|
189697
|
-
if (key === "primary")
|
|
189698
|
-
return;
|
|
189699
|
-
if (typeof value === "object" && value !== null) {
|
|
189700
|
-
const palette = value;
|
|
189701
|
-
Object.entries(palette).forEach(([shade, colorValue]) => {
|
|
189702
|
-
if (typeof colorValue === "string" && !colorValue.startsWith("var(")) {
|
|
189703
|
-
vars.push(` --color-${key}-${shade}: ${colorValue};`);
|
|
189704
|
-
}
|
|
189705
|
-
});
|
|
189706
|
-
}
|
|
189707
|
-
});
|
|
189708
|
-
Object.entries(semanticMappings).forEach(([key, value]) => {
|
|
189709
|
-
vars.push(` --color-${key}: ${value};`);
|
|
189710
|
-
});
|
|
189711
|
-
return `:root {
|
|
189712
|
-
${vars.join(`
|
|
189713
|
-
`)}
|
|
189714
|
-
}
|
|
189715
|
-
`;
|
|
189716
|
-
}
|
|
189717
|
-
function generateThemeBlock() {
|
|
189718
|
-
const lines = [];
|
|
189719
|
-
Object.entries(texts).forEach(([key, value]) => {
|
|
189720
|
-
const [fontSize, options] = value;
|
|
189721
|
-
lines.push(` --text-${key}: ${fontSize};`);
|
|
189722
|
-
if (options.lineHeight)
|
|
189723
|
-
lines.push(` --text-${key}--line-height: ${options.lineHeight};`);
|
|
189724
|
-
if (options.letterSpacing)
|
|
189725
|
-
lines.push(` --text-${key}--letter-spacing: ${options.letterSpacing};`);
|
|
189726
|
-
if (options.fontWeight)
|
|
189727
|
-
lines.push(` --text-${key}--font-weight: ${options.fontWeight};`);
|
|
189728
|
-
});
|
|
189729
|
-
Object.entries(shadows).forEach(([key, value]) => {
|
|
189730
|
-
lines.push(` --shadow-${key}: ${value};`);
|
|
189731
|
-
});
|
|
189732
|
-
Object.entries(borderRadii).forEach(([key, value]) => {
|
|
189733
|
-
lines.push(` --radius-${key}: ${value};`);
|
|
189734
|
-
});
|
|
189735
|
-
const colorsObj = colors;
|
|
189736
|
-
const ds = colorsObj.ds || {};
|
|
189737
|
-
const flattenDs = (obj, prefix) => {
|
|
189738
|
-
Object.entries(obj).forEach(([key, value]) => {
|
|
189739
|
-
if (typeof value === "object" && value !== null) {
|
|
189740
|
-
flattenDs(value, `${prefix}-${key}`);
|
|
189741
|
-
} else if (typeof value === "string") {
|
|
189742
|
-
lines.push(` --color-${prefix}-${key}: ${value};`);
|
|
189743
|
-
}
|
|
189744
|
-
});
|
|
189745
|
-
};
|
|
189746
|
-
flattenDs(ds, "ds");
|
|
189747
|
-
return `@theme {
|
|
189748
|
-
${lines.join(`
|
|
189749
|
-
`)}
|
|
189750
|
-
}
|
|
189751
|
-
`;
|
|
189752
|
-
}
|
|
189753
|
-
async function updateCssV4(cwd, config) {
|
|
189754
|
-
const cssPath = path3.join(cwd, config.tailwind.css);
|
|
189755
|
-
if (!existsSync3(path3.dirname(cssPath)))
|
|
189756
|
-
return;
|
|
189757
|
-
let content = "";
|
|
189758
|
-
if (existsSync3(cssPath)) {
|
|
189759
|
-
content = await readFile3(cssPath, "utf-8");
|
|
189760
|
-
}
|
|
189761
|
-
const themeBlock = generateThemeBlock();
|
|
189762
|
-
const varsBlock = generateCssVariables();
|
|
189763
|
-
if (!content.includes("@import")) {
|
|
189764
|
-
content = `@import "tailwindcss";
|
|
189765
|
-
|
|
189766
|
-
${content}`;
|
|
189767
|
-
}
|
|
189768
|
-
if (!content.includes("--color-ds-primary-dark:")) {
|
|
189769
|
-
content += `
|
|
189770
|
-
|
|
189771
|
-
${themeBlock}`;
|
|
189772
|
-
}
|
|
189773
|
-
if (!content.includes("--color-primary-500:")) {
|
|
189774
|
-
content += `
|
|
189775
|
-
|
|
189776
|
-
${varsBlock}`;
|
|
189777
|
-
}
|
|
189778
|
-
await writeFile2(cssPath, content, "utf-8");
|
|
189779
|
-
logger.success(`Updated ${config.tailwind.css} with Happly tokens (v4)`);
|
|
189780
|
-
}
|
|
189781
|
-
async function updateCssV3(cwd, config) {
|
|
189782
|
-
const cssPath = path3.join(cwd, config.tailwind.css);
|
|
189783
|
-
if (!existsSync3(cssPath))
|
|
189784
|
-
return;
|
|
189785
|
-
let content = await readFile3(cssPath, "utf-8");
|
|
189786
|
-
const varsBlock = generateCssVariables();
|
|
189787
|
-
if (!content.includes("--color-primary-500:")) {
|
|
189788
|
-
content += `
|
|
189789
|
-
|
|
189790
|
-
${varsBlock}`;
|
|
189791
|
-
await writeFile2(cssPath, content, "utf-8");
|
|
189792
|
-
logger.success(`Updated ${config.tailwind.css} with CSS variables`);
|
|
189793
189717
|
}
|
|
189794
189718
|
}
|
|
189795
189719
|
async function updateConfigV3(cwd, config) {
|
|
@@ -189798,75 +189722,64 @@ async function updateConfigV3(cwd, config) {
|
|
|
189798
189722
|
logger.warn(`Tailwind config file not found at ${configPath}`);
|
|
189799
189723
|
return;
|
|
189800
189724
|
}
|
|
189725
|
+
const pluginPath = path3.join(cwd, HAPPLY_PLUGIN_FILE);
|
|
189726
|
+
const pluginContent = generatePluginFile();
|
|
189727
|
+
if (existsSync3(pluginPath)) {
|
|
189728
|
+
logger.info(`Overwriting existing ${HAPPLY_PLUGIN_FILE}`);
|
|
189729
|
+
}
|
|
189730
|
+
await writeFile2(pluginPath, pluginContent, "utf-8");
|
|
189731
|
+
logger.success(`Created ${HAPPLY_PLUGIN_FILE}`);
|
|
189801
189732
|
let content = await readFile3(configPath, "utf-8");
|
|
189802
|
-
if (content.includes(
|
|
189803
|
-
logger.info(
|
|
189733
|
+
if (content.includes(HAPPLY_PLUGIN_FILE)) {
|
|
189734
|
+
logger.info(`${HAPPLY_PLUGIN_FILE} already registered in tailwind config.`);
|
|
189804
189735
|
return;
|
|
189805
189736
|
}
|
|
189806
|
-
const
|
|
189807
|
-
|
|
189808
|
-
|
|
189809
|
-
|
|
189810
|
-
${extendContent},`);
|
|
189737
|
+
const pluginsRegex = /plugins:\s*\[/;
|
|
189738
|
+
if (pluginsRegex.test(content)) {
|
|
189739
|
+
content = content.replace(pluginsRegex, (match) => `${match}
|
|
189740
|
+
require('./${HAPPLY_PLUGIN_FILE}'),`);
|
|
189811
189741
|
await writeFile2(configPath, content, "utf-8");
|
|
189812
|
-
logger.success(`
|
|
189742
|
+
logger.success(`Registered ${HAPPLY_PLUGIN_FILE} in ${config.tailwind.config}`);
|
|
189813
189743
|
} else {
|
|
189814
|
-
const
|
|
189815
|
-
if (
|
|
189816
|
-
content = content.replace(
|
|
189817
|
-
|
|
189818
|
-
${extendContent}
|
|
189819
|
-
},`);
|
|
189744
|
+
const closingBrace = /}\s*;?\s*$/;
|
|
189745
|
+
if (closingBrace.test(content)) {
|
|
189746
|
+
content = content.replace(closingBrace, ` plugins: [require('./${HAPPLY_PLUGIN_FILE}')],
|
|
189747
|
+
};`);
|
|
189820
189748
|
await writeFile2(configPath, content, "utf-8");
|
|
189821
|
-
logger.success(`
|
|
189749
|
+
logger.success(`Added plugins array with ${HAPPLY_PLUGIN_FILE} to ${config.tailwind.config}`);
|
|
189822
189750
|
} else {
|
|
189823
|
-
logger.warn(`Could not update ${config.tailwind.config}.
|
|
189751
|
+
logger.warn(`Could not update ${config.tailwind.config}. Add manually:
|
|
189752
|
+
` + ` plugins: [require('./${HAPPLY_PLUGIN_FILE}')]`);
|
|
189824
189753
|
}
|
|
189825
189754
|
}
|
|
189826
189755
|
}
|
|
189827
|
-
function
|
|
189828
|
-
const
|
|
189829
|
-
|
|
189830
|
-
|
|
189756
|
+
function generatePluginFile() {
|
|
189757
|
+
const config = {
|
|
189758
|
+
theme: {
|
|
189759
|
+
extend: {
|
|
189760
|
+
colors,
|
|
189761
|
+
fontSize: texts,
|
|
189762
|
+
boxShadow: shadows,
|
|
189763
|
+
borderRadius: borderRadii,
|
|
189764
|
+
fontFamily: fontFamilies,
|
|
189765
|
+
backgroundImage,
|
|
189766
|
+
screens,
|
|
189767
|
+
keyframes,
|
|
189768
|
+
animation: animations
|
|
189769
|
+
}
|
|
189770
|
+
}
|
|
189831
189771
|
};
|
|
189832
|
-
|
|
189833
|
-
|
|
189834
|
-
|
|
189835
|
-
|
|
189836
|
-
|
|
189837
|
-
|
|
189838
|
-
|
|
189839
|
-
|
|
189840
|
-
|
|
189841
|
-
|
|
189842
|
-
|
|
189843
|
-
}`;
|
|
189844
|
-
const radiusJson = JSON.stringify(borderRadii, null, 6).slice(2, -2);
|
|
189845
|
-
const radiusStr = ` borderRadius: {
|
|
189846
|
-
${radiusJson}
|
|
189847
|
-
}`;
|
|
189848
|
-
return [
|
|
189849
|
-
colorsStr,
|
|
189850
|
-
fontSizeStr,
|
|
189851
|
-
shadowStr,
|
|
189852
|
-
radiusStr,
|
|
189853
|
-
` fontFamily: {
|
|
189854
|
-
${JSON.stringify(fontFamilies, null, 6).slice(2, -2)}
|
|
189855
|
-
}`,
|
|
189856
|
-
` backgroundImage: {
|
|
189857
|
-
${JSON.stringify(backgroundImage, null, 6).slice(2, -2)}
|
|
189858
|
-
}`,
|
|
189859
|
-
` screens: {
|
|
189860
|
-
${JSON.stringify(screens, null, 6).slice(2, -2)}
|
|
189861
|
-
}`,
|
|
189862
|
-
` keyframes: {
|
|
189863
|
-
${JSON.stringify(keyframes, null, 6).slice(2, -2)}
|
|
189864
|
-
}`,
|
|
189865
|
-
` animation: {
|
|
189866
|
-
${JSON.stringify(animations, null, 6).slice(2, -2)}
|
|
189867
|
-
}`
|
|
189868
|
-
].join(`,
|
|
189869
|
-
`);
|
|
189772
|
+
return `// HapplyUI Design Tokens — https://ui.happly.cloud
|
|
189773
|
+
// Auto-generated by @happlyui/cli — do not edit manually
|
|
189774
|
+
// This plugin extends your Tailwind config with HapplyUI design tokens.
|
|
189775
|
+
// It uses Tailwind's plugin API for proper deep-merging with your existing config.
|
|
189776
|
+
|
|
189777
|
+
const plugin = require('tailwindcss/plugin');
|
|
189778
|
+
|
|
189779
|
+
module.exports = plugin(function() {
|
|
189780
|
+
// No base styles needed — CSS variables are in happly-theme.css
|
|
189781
|
+
}, ${JSON.stringify(config, null, 2)});
|
|
189782
|
+
`;
|
|
189870
189783
|
}
|
|
189871
189784
|
|
|
189872
189785
|
// src/utils/env.ts
|
|
@@ -189933,137 +189846,1417 @@ function getAgentName() {
|
|
|
189933
189846
|
|
|
189934
189847
|
// src/commands/init.ts
|
|
189935
189848
|
init_types();
|
|
189936
|
-
var UTILS_TEMPLATE = `import { type ClassValue, clsx } from "clsx";
|
|
189937
|
-
import { twMerge } from "tailwind-merge";
|
|
189938
189849
|
|
|
189939
|
-
|
|
189940
|
-
|
|
189941
|
-
|
|
189942
|
-
`;
|
|
189943
|
-
var UTILS_JS_TEMPLATE = `import { clsx } from "clsx";
|
|
189944
|
-
import { twMerge } from "tailwind-merge";
|
|
189850
|
+
// src/utils/templates/happly-theme.ts
|
|
189851
|
+
var HAPPLY_THEME_V4 = `/* HapplyUI Design Tokens — https://ui.happly.cloud */
|
|
189852
|
+
/* Auto-generated by @happlyui/cli — do not edit manually */
|
|
189945
189853
|
|
|
189946
|
-
|
|
189947
|
-
|
|
189854
|
+
@theme {
|
|
189855
|
+
/* HapplyUI Raw Colors */
|
|
189856
|
+
--color-gray-950: #171717;
|
|
189857
|
+
--color-gray-900: #1c1c1c;
|
|
189858
|
+
--color-gray-800: #262626;
|
|
189859
|
+
--color-gray-700: #333333;
|
|
189860
|
+
--color-gray-600: #5c5c5c;
|
|
189861
|
+
--color-gray-500: #7b7b7b;
|
|
189862
|
+
--color-gray-400: #a3a3a3;
|
|
189863
|
+
--color-gray-300: #d1d1d1;
|
|
189864
|
+
--color-gray-200: #ebebeb;
|
|
189865
|
+
--color-gray-100: #f5f5f5;
|
|
189866
|
+
--color-gray-50: #f7f7f7;
|
|
189867
|
+
--color-gray-0: #ffffff;
|
|
189868
|
+
--color-gray-alpha-24: #a3a3a33d;
|
|
189869
|
+
--color-gray-alpha-16: #a3a3a329;
|
|
189870
|
+
--color-gray-alpha-10: #a3a3a31a;
|
|
189871
|
+
|
|
189872
|
+
--color-slate-950: #0e121b;
|
|
189873
|
+
--color-slate-900: #181b25;
|
|
189874
|
+
--color-slate-800: #222530;
|
|
189875
|
+
--color-slate-700: #2b303b;
|
|
189876
|
+
--color-slate-600: #525866;
|
|
189877
|
+
--color-slate-500: #717784;
|
|
189878
|
+
--color-slate-400: #99a0ae;
|
|
189879
|
+
--color-slate-300: #cacfd8;
|
|
189880
|
+
--color-slate-200: #eaecf0;
|
|
189881
|
+
--color-slate-100: #f2f5f8;
|
|
189882
|
+
--color-slate-50: #f5f7fa;
|
|
189883
|
+
--color-slate-0: #ffffff;
|
|
189884
|
+
--color-slate-alpha-24: #99a0ae3d;
|
|
189885
|
+
--color-slate-alpha-16: #99a0ae29;
|
|
189886
|
+
--color-slate-alpha-10: #99a0ae1a;
|
|
189887
|
+
|
|
189888
|
+
--color-blue-950: #122368;
|
|
189889
|
+
--color-blue-900: #182f8b;
|
|
189890
|
+
--color-blue-800: #1f3bad;
|
|
189891
|
+
--color-blue-700: #2547d0;
|
|
189892
|
+
--color-blue-600: #3559e9;
|
|
189893
|
+
--color-blue-500: #335cff;
|
|
189894
|
+
--color-blue-400: #4d82ff;
|
|
189895
|
+
--color-blue-300: #97baff;
|
|
189896
|
+
--color-blue-200: #c0d5ff;
|
|
189897
|
+
--color-blue-100: #d5e2ff;
|
|
189898
|
+
--color-blue-50: #ebf1ff;
|
|
189899
|
+
--color-blue-alpha-24: #476cff3d;
|
|
189900
|
+
--color-blue-alpha-16: #476cff29;
|
|
189901
|
+
--color-blue-alpha-10: #476cff1a;
|
|
189902
|
+
|
|
189903
|
+
--color-orange-950: #71330a;
|
|
189904
|
+
--color-orange-900: #96440d;
|
|
189905
|
+
--color-orange-800: #b75310;
|
|
189906
|
+
--color-orange-700: #ce5e12;
|
|
189907
|
+
--color-orange-600: #e16614;
|
|
189908
|
+
--color-orange-500: #fa7319;
|
|
189909
|
+
--color-orange-400: #ffa468;
|
|
189910
|
+
--color-orange-300: #ffc197;
|
|
189911
|
+
--color-orange-200: #ffd9c0;
|
|
189912
|
+
--color-orange-100: #ffe6d5;
|
|
189913
|
+
--color-orange-50: #fff3eb;
|
|
189914
|
+
--color-orange-alpha-24: #fa73193d;
|
|
189915
|
+
--color-orange-alpha-16: #fa731929;
|
|
189916
|
+
--color-orange-alpha-10: #fa73191a;
|
|
189917
|
+
|
|
189918
|
+
--color-red-950: #681219;
|
|
189919
|
+
--color-red-900: #8b1822;
|
|
189920
|
+
--color-red-800: #ad1f2b;
|
|
189921
|
+
--color-red-700: #d02533;
|
|
189922
|
+
--color-red-600: #e93544;
|
|
189923
|
+
--color-red-500: #fb3748;
|
|
189924
|
+
--color-red-400: #ff6875;
|
|
189925
|
+
--color-red-300: #ff97a0;
|
|
189926
|
+
--color-red-200: #ffc0c5;
|
|
189927
|
+
--color-red-100: #ffd5d8;
|
|
189928
|
+
--color-red-50: #ffebec;
|
|
189929
|
+
--color-red-alpha-24: #fb37483d;
|
|
189930
|
+
--color-red-alpha-16: #fb374829;
|
|
189931
|
+
--color-red-alpha-10: #fb37481a;
|
|
189932
|
+
|
|
189933
|
+
--color-green-950: #0b4627;
|
|
189934
|
+
--color-green-900: #16643b;
|
|
189935
|
+
--color-green-800: #1a7544;
|
|
189936
|
+
--color-green-700: #178c4e;
|
|
189937
|
+
--color-green-600: #1daf61;
|
|
189938
|
+
--color-green-500: #1fc16b;
|
|
189939
|
+
--color-green-400: #3ee089;
|
|
189940
|
+
--color-green-300: #84ebb4;
|
|
189941
|
+
--color-green-200: #c2f5da;
|
|
189942
|
+
--color-green-100: #d6f5e8;
|
|
189943
|
+
--color-green-50: #e3f7ec;
|
|
189944
|
+
--color-green-alpha-24: #1fc16b3d;
|
|
189945
|
+
--color-green-alpha-16: #1fc16b29;
|
|
189946
|
+
--color-green-alpha-10: #1fc16b1a;
|
|
189947
|
+
|
|
189948
|
+
--color-yellow-950: #624c18;
|
|
189949
|
+
--color-yellow-900: #86661d;
|
|
189950
|
+
--color-yellow-800: #a78025;
|
|
189951
|
+
--color-yellow-700: #c99a2c;
|
|
189952
|
+
--color-yellow-600: #e6a819;
|
|
189953
|
+
--color-yellow-500: #f6b51e;
|
|
189954
|
+
--color-yellow-400: #ffd268;
|
|
189955
|
+
--color-yellow-300: #ffe097;
|
|
189956
|
+
--color-yellow-200: #ffecc0;
|
|
189957
|
+
--color-yellow-100: #ffefcc;
|
|
189958
|
+
--color-yellow-50: #fffaeb;
|
|
189959
|
+
--color-yellow-alpha-24: #fbc64b3d;
|
|
189960
|
+
--color-yellow-alpha-16: #fbc64b29;
|
|
189961
|
+
--color-yellow-alpha-10: #fbc64b1a;
|
|
189962
|
+
|
|
189963
|
+
--color-purple-950: #351a75;
|
|
189964
|
+
--color-purple-900: #3d1d86;
|
|
189965
|
+
--color-purple-800: #4c25a7;
|
|
189966
|
+
--color-purple-700: #5b2cc9;
|
|
189967
|
+
--color-purple-600: #693ee0;
|
|
189968
|
+
--color-purple-500: #7d52f4;
|
|
189969
|
+
--color-purple-400: #8c71f6;
|
|
189970
|
+
--color-purple-300: #a897ff;
|
|
189971
|
+
--color-purple-200: #cac0ff;
|
|
189972
|
+
--color-purple-100: #dcd5ff;
|
|
189973
|
+
--color-purple-50: #efebff;
|
|
189974
|
+
--color-purple-alpha-24: #784def3d;
|
|
189975
|
+
--color-purple-alpha-16: #784def29;
|
|
189976
|
+
--color-purple-alpha-10: #784def1a;
|
|
189977
|
+
|
|
189978
|
+
--color-sky-950: #124b68;
|
|
189979
|
+
--color-sky-900: #18658b;
|
|
189980
|
+
--color-sky-800: #1f7ead;
|
|
189981
|
+
--color-sky-700: #2597d0;
|
|
189982
|
+
--color-sky-600: #35ade9;
|
|
189983
|
+
--color-sky-500: #47c2ff;
|
|
189984
|
+
--color-sky-400: #68cdff;
|
|
189985
|
+
--color-sky-300: #97dcff;
|
|
189986
|
+
--color-sky-200: #c0eaff;
|
|
189987
|
+
--color-sky-100: #d5f1ff;
|
|
189988
|
+
--color-sky-50: #ebf8ff;
|
|
189989
|
+
--color-sky-alpha-24: #47c2ff3d;
|
|
189990
|
+
--color-sky-alpha-16: #47c2ff29;
|
|
189991
|
+
--color-sky-alpha-10: #47c2ff1a;
|
|
189992
|
+
|
|
189993
|
+
--color-pink-950: #68123d;
|
|
189994
|
+
--color-pink-900: #8b1852;
|
|
189995
|
+
--color-pink-800: #ad1f66;
|
|
189996
|
+
--color-pink-700: #d0257a;
|
|
189997
|
+
--color-pink-600: #e9358f;
|
|
189998
|
+
--color-pink-500: #fb4ba3;
|
|
189999
|
+
--color-pink-400: #ff68b3;
|
|
190000
|
+
--color-pink-300: #ff97cb;
|
|
190001
|
+
--color-pink-200: #ffc0df;
|
|
190002
|
+
--color-pink-100: #ffd5ea;
|
|
190003
|
+
--color-pink-50: #ffebf4;
|
|
190004
|
+
--color-pink-alpha-24: #fb4ba33d;
|
|
190005
|
+
--color-pink-alpha-16: #fb4ba329;
|
|
190006
|
+
--color-pink-alpha-10: #fb4ba31a;
|
|
190007
|
+
|
|
190008
|
+
--color-teal-950: #0b463e;
|
|
190009
|
+
--color-teal-900: #16645a;
|
|
190010
|
+
--color-teal-800: #1a7569;
|
|
190011
|
+
--color-teal-700: #178c7d;
|
|
190012
|
+
--color-teal-600: #1daf9c;
|
|
190013
|
+
--color-teal-500: #22d3bb;
|
|
190014
|
+
--color-teal-400: #3fdec9;
|
|
190015
|
+
--color-teal-300: #84ebdd;
|
|
190016
|
+
--color-teal-200: #c2f5ee;
|
|
190017
|
+
--color-teal-100: #d0fbf5;
|
|
190018
|
+
--color-teal-50: #e4fbf8;
|
|
190019
|
+
--color-teal-alpha-24: #22d3bb3d;
|
|
190020
|
+
--color-teal-alpha-16: #22d3bb29;
|
|
190021
|
+
--color-teal-alpha-10: #22d3bb1a;
|
|
190022
|
+
|
|
190023
|
+
--color-white-alpha-24: #ffffff3d;
|
|
190024
|
+
--color-white-alpha-16: #ffffff29;
|
|
190025
|
+
--color-white-alpha-10: #ffffff1a;
|
|
190026
|
+
|
|
190027
|
+
--color-black-alpha-24: #1717173d;
|
|
190028
|
+
--color-black-alpha-16: #17171729;
|
|
190029
|
+
--color-black-alpha-10: #1717171a;
|
|
190030
|
+
|
|
190031
|
+
/* HapplyUI Dynamic Neutral Colors */
|
|
190032
|
+
--color-neutral-950: var(--color-gray-950);
|
|
190033
|
+
--color-neutral-900: var(--color-gray-900);
|
|
190034
|
+
--color-neutral-800: var(--color-gray-800);
|
|
190035
|
+
--color-neutral-700: var(--color-gray-700);
|
|
190036
|
+
--color-neutral-600: var(--color-gray-600);
|
|
190037
|
+
--color-neutral-500: var(--color-gray-500);
|
|
190038
|
+
--color-neutral-400: var(--color-gray-400);
|
|
190039
|
+
--color-neutral-300: var(--color-gray-300);
|
|
190040
|
+
--color-neutral-200: var(--color-gray-200);
|
|
190041
|
+
--color-neutral-100: var(--color-gray-100);
|
|
190042
|
+
--color-neutral-50: var(--color-gray-50);
|
|
190043
|
+
--color-neutral-0: var(--color-gray-0);
|
|
190044
|
+
--color-neutral-alpha-24: var(--color-gray-alpha-24);
|
|
190045
|
+
--color-neutral-alpha-16: var(--color-gray-alpha-16);
|
|
190046
|
+
--color-neutral-alpha-10: var(--color-gray-alpha-10);
|
|
190047
|
+
|
|
190048
|
+
/* HapplyUI Dynamic Primary Colors */
|
|
190049
|
+
--color-primary-50: var(--color-purple-50);
|
|
190050
|
+
--color-primary-100: var(--color-purple-100);
|
|
190051
|
+
--color-primary-200: var(--color-purple-200);
|
|
190052
|
+
--color-primary-300: var(--color-purple-300);
|
|
190053
|
+
--color-primary-400: var(--color-purple-400);
|
|
190054
|
+
--color-primary-500: var(--color-purple-500);
|
|
190055
|
+
--color-primary-600: var(--color-purple-600);
|
|
190056
|
+
--color-primary-700: var(--color-purple-700);
|
|
190057
|
+
--color-primary-800: var(--color-purple-800);
|
|
190058
|
+
--color-primary-900: var(--color-purple-900);
|
|
190059
|
+
--color-primary-950: var(--color-purple-950);
|
|
190060
|
+
--color-primary-dark: var(--color-purple-800);
|
|
190061
|
+
--color-primary-darker: var(--color-purple-700);
|
|
190062
|
+
--color-primary-base: var(--color-purple-500);
|
|
190063
|
+
--color-primary-light: var(--color-purple-100);
|
|
190064
|
+
--color-primary-lighter: var(--color-purple-50);
|
|
190065
|
+
--color-primary-alpha-24: var(--color-purple-alpha-24);
|
|
190066
|
+
--color-primary-alpha-16: var(--color-purple-alpha-16);
|
|
190067
|
+
--color-primary-alpha-10: var(--color-purple-alpha-10);
|
|
190068
|
+
|
|
190069
|
+
/* HapplyUI Social Colors */
|
|
190070
|
+
--color-social-apple: #000;
|
|
190071
|
+
--color-social-twitter: #010101;
|
|
190072
|
+
--color-social-github: #24292f;
|
|
190073
|
+
--color-social-notion: #1e2226;
|
|
190074
|
+
--color-social-tidal: #000;
|
|
190075
|
+
--color-social-amazon: #353e47;
|
|
190076
|
+
--color-social-zendesk: #16140d;
|
|
190077
|
+
|
|
190078
|
+
/* HapplyUI Overlay Colors */
|
|
190079
|
+
--color-overlay-gray: #3333333d;
|
|
190080
|
+
--color-overlay-slate: #2b303b3d;
|
|
190081
|
+
--color-overlay: var(--color-overlay-gray);
|
|
190082
|
+
|
|
190083
|
+
/* HapplyUI Semantic Colors */
|
|
190084
|
+
--color-static-black: var(--color-neutral-950);
|
|
190085
|
+
--color-static-white: var(--color-neutral-0);
|
|
190086
|
+
|
|
190087
|
+
--color-bg-strong-950: var(--color-neutral-950);
|
|
190088
|
+
--color-bg-surface-800: var(--color-neutral-800);
|
|
190089
|
+
--color-bg-sub-300: var(--color-neutral-300);
|
|
190090
|
+
--color-bg-soft-200: var(--color-neutral-200);
|
|
190091
|
+
--color-bg-weak-50: var(--color-neutral-50);
|
|
190092
|
+
--color-bg-weak-25: var(--color-neutral-50);
|
|
190093
|
+
--color-bg-white-0: var(--color-neutral-0);
|
|
190094
|
+
|
|
190095
|
+
--color-text-strong-950: var(--color-neutral-950);
|
|
190096
|
+
--color-text-sub-600: var(--color-neutral-600);
|
|
190097
|
+
--color-text-soft-400: var(--color-neutral-400);
|
|
190098
|
+
--color-text-disabled-300: var(--color-neutral-300);
|
|
190099
|
+
--color-text-white-0: var(--color-neutral-0);
|
|
190100
|
+
|
|
190101
|
+
--color-stroke-strong-950: var(--color-neutral-950);
|
|
190102
|
+
--color-stroke-sub-300: var(--color-neutral-300);
|
|
190103
|
+
--color-stroke-soft-200: var(--color-neutral-200);
|
|
190104
|
+
--color-stroke-white-0: var(--color-neutral-0);
|
|
190105
|
+
|
|
190106
|
+
--color-faded-dark: var(--color-neutral-800);
|
|
190107
|
+
--color-faded-base: var(--color-neutral-500);
|
|
190108
|
+
--color-faded-light: var(--color-neutral-200);
|
|
190109
|
+
--color-faded-lighter: var(--color-neutral-100);
|
|
190110
|
+
|
|
190111
|
+
--color-information-dark: var(--color-blue-950);
|
|
190112
|
+
--color-information-base: var(--color-blue-500);
|
|
190113
|
+
--color-information-light: var(--color-blue-200);
|
|
190114
|
+
--color-information-lighter: var(--color-blue-50);
|
|
190115
|
+
|
|
190116
|
+
--color-warning-dark: var(--color-orange-950);
|
|
190117
|
+
--color-warning-darker: var(--color-orange-700);
|
|
190118
|
+
--color-warning-base: var(--color-orange-500);
|
|
190119
|
+
--color-warning-light: var(--color-orange-200);
|
|
190120
|
+
--color-warning-lighter: var(--color-orange-50);
|
|
190121
|
+
--color-warning-alpha-10: var(--color-orange-alpha-10);
|
|
190122
|
+
|
|
190123
|
+
--color-error-dark: var(--color-red-950);
|
|
190124
|
+
--color-error-base: var(--color-red-500);
|
|
190125
|
+
--color-error-light: var(--color-red-200);
|
|
190126
|
+
--color-error-lighter: var(--color-red-50);
|
|
190127
|
+
|
|
190128
|
+
--color-success-dark: var(--color-green-950);
|
|
190129
|
+
--color-success-darker: var(--color-green-700);
|
|
190130
|
+
--color-success-base: var(--color-green-500);
|
|
190131
|
+
--color-success-light: var(--color-green-200);
|
|
190132
|
+
--color-success-lighter: var(--color-green-50);
|
|
190133
|
+
--color-success-alpha-10: var(--color-green-alpha-10);
|
|
190134
|
+
|
|
190135
|
+
--color-away-dark: var(--color-yellow-950);
|
|
190136
|
+
--color-away-base: var(--color-yellow-500);
|
|
190137
|
+
--color-away-light: var(--color-yellow-200);
|
|
190138
|
+
--color-away-lighter: var(--color-yellow-50);
|
|
190139
|
+
|
|
190140
|
+
--color-feature-dark: var(--color-purple-950);
|
|
190141
|
+
--color-feature-base: var(--color-purple-500);
|
|
190142
|
+
--color-feature-light: var(--color-purple-200);
|
|
190143
|
+
--color-feature-lighter: var(--color-purple-50);
|
|
190144
|
+
|
|
190145
|
+
--color-verified-dark: var(--color-sky-950);
|
|
190146
|
+
--color-verified-base: var(--color-sky-500);
|
|
190147
|
+
--color-verified-light: var(--color-sky-200);
|
|
190148
|
+
--color-verified-lighter: var(--color-sky-50);
|
|
190149
|
+
|
|
190150
|
+
--color-highlighted-dark: var(--color-pink-950);
|
|
190151
|
+
--color-highlighted-base: var(--color-pink-500);
|
|
190152
|
+
--color-highlighted-light: var(--color-pink-200);
|
|
190153
|
+
--color-highlighted-lighter: var(--color-pink-50);
|
|
190154
|
+
|
|
190155
|
+
--color-stable-dark: var(--color-teal-950);
|
|
190156
|
+
--color-stable-base: var(--color-teal-500);
|
|
190157
|
+
--color-stable-light: var(--color-teal-200);
|
|
190158
|
+
--color-stable-lighter: var(--color-teal-50);
|
|
190159
|
+
|
|
190160
|
+
/* HapplyUI Typography System */
|
|
190161
|
+
|
|
190162
|
+
--text-title-h1: 3.5rem;
|
|
190163
|
+
--text-title-h1--line-height: 4rem;
|
|
190164
|
+
--text-title-h1--letter-spacing: -0.01em;
|
|
190165
|
+
--text-title-h1--font-weight: 500;
|
|
190166
|
+
|
|
190167
|
+
--text-title-h2: 3rem;
|
|
190168
|
+
--text-title-h2--line-height: 3.5rem;
|
|
190169
|
+
--text-title-h2--letter-spacing: -0.01em;
|
|
190170
|
+
--text-title-h2--font-weight: 500;
|
|
190171
|
+
|
|
190172
|
+
--text-title-h3: 2.5rem;
|
|
190173
|
+
--text-title-h3--line-height: 3rem;
|
|
190174
|
+
--text-title-h3--letter-spacing: -0.01em;
|
|
190175
|
+
--text-title-h3--font-weight: 500;
|
|
190176
|
+
|
|
190177
|
+
--text-title-h4: 2rem;
|
|
190178
|
+
--text-title-h4--line-height: 2.5rem;
|
|
190179
|
+
--text-title-h4--letter-spacing: -0.005em;
|
|
190180
|
+
--text-title-h4--font-weight: 500;
|
|
190181
|
+
|
|
190182
|
+
--text-title-h5: 1.5rem;
|
|
190183
|
+
--text-title-h5--line-height: 2rem;
|
|
190184
|
+
--text-title-h5--letter-spacing: 0em;
|
|
190185
|
+
--text-title-h5--font-weight: 500;
|
|
190186
|
+
|
|
190187
|
+
--text-title-h6: 1.25rem;
|
|
190188
|
+
--text-title-h6--line-height: 1.75rem;
|
|
190189
|
+
--text-title-h6--letter-spacing: 0em;
|
|
190190
|
+
--text-title-h6--font-weight: 500;
|
|
190191
|
+
|
|
190192
|
+
--text-label-xl: 1.5rem;
|
|
190193
|
+
--text-label-xl--line-height: 2rem;
|
|
190194
|
+
--text-label-xl--letter-spacing: -0.015em;
|
|
190195
|
+
--text-label-xl--font-weight: 500;
|
|
190196
|
+
|
|
190197
|
+
--text-label-lg: 1.125rem;
|
|
190198
|
+
--text-label-lg--line-height: 1.5rem;
|
|
190199
|
+
--text-label-lg--letter-spacing: -0.015em;
|
|
190200
|
+
--text-label-lg--font-weight: 500;
|
|
190201
|
+
|
|
190202
|
+
--text-label-md: 1rem;
|
|
190203
|
+
--text-label-md--line-height: 1.5rem;
|
|
190204
|
+
--text-label-md--letter-spacing: -0.011em;
|
|
190205
|
+
--text-label-md--font-weight: 500;
|
|
190206
|
+
|
|
190207
|
+
--text-label-sm: 0.875rem;
|
|
190208
|
+
--text-label-sm--line-height: 1.25rem;
|
|
190209
|
+
--text-label-sm--letter-spacing: -0.006em;
|
|
190210
|
+
--text-label-sm--font-weight: 500;
|
|
190211
|
+
|
|
190212
|
+
--text-label-xs: 0.75rem;
|
|
190213
|
+
--text-label-xs--line-height: 1rem;
|
|
190214
|
+
--text-label-xs--letter-spacing: 0em;
|
|
190215
|
+
--text-label-xs--font-weight: 500;
|
|
190216
|
+
|
|
190217
|
+
--text-label-2xs: 0.6875rem;
|
|
190218
|
+
--text-label-2xs--line-height: 1rem;
|
|
190219
|
+
--text-label-2xs--letter-spacing: 0em;
|
|
190220
|
+
--text-label-2xs--font-weight: 500;
|
|
190221
|
+
|
|
190222
|
+
--text-paragraph-xl: 1.5rem;
|
|
190223
|
+
--text-paragraph-xl--line-height: 2rem;
|
|
190224
|
+
--text-paragraph-xl--letter-spacing: -0.015em;
|
|
190225
|
+
--text-paragraph-xl--font-weight: 400;
|
|
190226
|
+
|
|
190227
|
+
--text-paragraph-lg: 1.125rem;
|
|
190228
|
+
--text-paragraph-lg--line-height: 1.5rem;
|
|
190229
|
+
--text-paragraph-lg--letter-spacing: -0.015em;
|
|
190230
|
+
--text-paragraph-lg--font-weight: 400;
|
|
190231
|
+
|
|
190232
|
+
--text-paragraph-md: 1rem;
|
|
190233
|
+
--text-paragraph-md--line-height: 1.5rem;
|
|
190234
|
+
--text-paragraph-md--letter-spacing: -0.011em;
|
|
190235
|
+
--text-paragraph-md--font-weight: 400;
|
|
190236
|
+
|
|
190237
|
+
--text-paragraph-sm: 0.875rem;
|
|
190238
|
+
--text-paragraph-sm--line-height: 1.25rem;
|
|
190239
|
+
--text-paragraph-sm--letter-spacing: -0.006em;
|
|
190240
|
+
--text-paragraph-sm--font-weight: 400;
|
|
190241
|
+
|
|
190242
|
+
--text-paragraph-xs: 0.75rem;
|
|
190243
|
+
--text-paragraph-xs--line-height: 1rem;
|
|
190244
|
+
--text-paragraph-xs--letter-spacing: 0em;
|
|
190245
|
+
--text-paragraph-xs--font-weight: 400;
|
|
190246
|
+
|
|
190247
|
+
--text-subheading-md: 1rem;
|
|
190248
|
+
--text-subheading-md--line-height: 1.5rem;
|
|
190249
|
+
--text-subheading-md--letter-spacing: 0.06em;
|
|
190250
|
+
--text-subheading-md--font-weight: 500;
|
|
190251
|
+
|
|
190252
|
+
--text-subheading-sm: 0.875rem;
|
|
190253
|
+
--text-subheading-sm--line-height: 1.25rem;
|
|
190254
|
+
--text-subheading-sm--letter-spacing: 0.06em;
|
|
190255
|
+
--text-subheading-sm--font-weight: 500;
|
|
190256
|
+
|
|
190257
|
+
--text-subheading-xs: 0.75rem;
|
|
190258
|
+
--text-subheading-xs--line-height: 1rem;
|
|
190259
|
+
--text-subheading-xs--letter-spacing: 0.04em;
|
|
190260
|
+
--text-subheading-xs--font-weight: 500;
|
|
190261
|
+
|
|
190262
|
+
--text-subheading-2xs: 0.6875rem;
|
|
190263
|
+
--text-subheading-2xs--line-height: 0.75rem;
|
|
190264
|
+
--text-subheading-2xs--letter-spacing: 0.02em;
|
|
190265
|
+
--text-subheading-2xs--font-weight: 500;
|
|
190266
|
+
|
|
190267
|
+
--text-doc-label: 1.125rem;
|
|
190268
|
+
--text-doc-label--line-height: 2rem;
|
|
190269
|
+
--text-doc-label--letter-spacing: -0.015em;
|
|
190270
|
+
--text-doc-label--font-weight: 500;
|
|
190271
|
+
|
|
190272
|
+
--text-doc-paragraph: 1.125rem;
|
|
190273
|
+
--text-doc-paragraph--line-height: 2rem;
|
|
190274
|
+
--text-doc-paragraph--letter-spacing: -0.015em;
|
|
190275
|
+
--text-doc-paragraph--font-weight: 400;
|
|
190276
|
+
|
|
190277
|
+
/* HapplyUI Shadow System */
|
|
190278
|
+
|
|
190279
|
+
--shadow-regular-xs: 0 1px 2px 0 #0a0d1408;
|
|
190280
|
+
--shadow-regular-sm: 0 2px 4px #1b1c1d0a;
|
|
190281
|
+
--shadow-regular-md: 0 16px 32px -12px #0e121b1a;
|
|
190282
|
+
|
|
190283
|
+
--shadow-button-primary-focus:
|
|
190284
|
+
0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-primary-alpha-10);
|
|
190285
|
+
--shadow-button-important-focus:
|
|
190286
|
+
0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-neutral-alpha-16);
|
|
190287
|
+
--shadow-button-error-focus:
|
|
190288
|
+
0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-red-alpha-10);
|
|
190289
|
+
--shadow-button-warning-focus:
|
|
190290
|
+
0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-orange-alpha-10);
|
|
190291
|
+
--shadow-button-success-focus:
|
|
190292
|
+
0 0 0 2px var(--color-bg-white-0), 0 0 0 4px var(--color-green-alpha-10);
|
|
190293
|
+
|
|
190294
|
+
--shadow-fancy-buttons-neutral: 0 1px 2px 0 #1b1c1d7a, 0 0 0 1px #242628;
|
|
190295
|
+
--shadow-fancy-buttons-primary:
|
|
190296
|
+
0 1px 2px 0 #0e121b3d, 0 0 0 1px var(--color-primary-base);
|
|
190297
|
+
--shadow-fancy-buttons-error:
|
|
190298
|
+
0 1px 2px 0 #0e121b3d, 0 0 0 1px var(--color-error-base);
|
|
190299
|
+
--shadow-fancy-buttons-stroke:
|
|
190300
|
+
0 1px 3px 0 #0e121b1f, 0 0 0 1px var(--color-stroke-soft-200);
|
|
190301
|
+
|
|
190302
|
+
--shadow-toggle-switch: 0 6px 10px 0 #0e121b0f, 0 2px 4px 0 #0e121b08;
|
|
190303
|
+
--shadow-switch-thumb: 0 4px 8px 0 #1b1c1d0f, 0 2px 4px 0 #0e121b14;
|
|
190304
|
+
--shadow-tooltip: 0 12px 24px 0 #0e121b0f, 0 1px 2px 0 #0e121b08;
|
|
190305
|
+
|
|
190306
|
+
--shadow-custom-xs:
|
|
190307
|
+
0 0 0 1px rgba(51, 51, 51, 0.04), 0 4px 8px -2px rgba(51, 51, 51, 0.06),
|
|
190308
|
+
0 2px 4px rgba(51, 51, 51, 0.04), 0 1px 2px rgba(51, 51, 51, 0.04),
|
|
190309
|
+
inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
|
|
190310
|
+
--shadow-custom-sm:
|
|
190311
|
+
0 0 0 1px rgba(51, 51, 51, 0.04), 0 16px 8px -8px rgba(51, 51, 51, 0.01),
|
|
190312
|
+
0 12px 6px -6px rgba(51, 51, 51, 0.02),
|
|
190313
|
+
0 5px 5px -2.5px rgba(51, 51, 51, 0.08),
|
|
190314
|
+
0 1px 3px -1.5px rgba(51, 51, 51, 0.16),
|
|
190315
|
+
inset 0 -0.5px 0.5px rgba(51, 51, 51, 0.08);
|
|
190316
|
+
--shadow-custom-md:
|
|
190317
|
+
0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04),
|
|
190318
|
+
0 3px 3px -1.5px rgba(51, 51, 51, 0.02),
|
|
190319
|
+
0 6px 6px -3px rgba(51, 51, 51, 0.04),
|
|
190320
|
+
0 12px 12px -6px rgba(51, 51, 51, 0.04),
|
|
190321
|
+
0 24px 24px -12px rgba(51, 51, 51, 0.04),
|
|
190322
|
+
0 48px 48px -24px rgba(51, 51, 51, 0.04),
|
|
190323
|
+
inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
|
|
190324
|
+
--shadow-custom-lg:
|
|
190325
|
+
0 0 0 1px rgba(51, 51, 51, 0.04), 0 1px 1px 0.5px rgba(51, 51, 51, 0.04),
|
|
190326
|
+
0 3px 3px -1.5px rgba(51, 51, 51, 0.02),
|
|
190327
|
+
0 6px 6px -3px rgba(51, 51, 51, 0.04),
|
|
190328
|
+
0 12px 12px -6px rgba(51, 51, 51, 0.04),
|
|
190329
|
+
0 24px 24px -12px rgba(51, 51, 51, 0.04),
|
|
190330
|
+
0 48px 48px -24px rgba(51, 51, 51, 0.04),
|
|
190331
|
+
0 96px 96px -32px rgba(51, 51, 51, 0.06),
|
|
190332
|
+
inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
|
|
190333
|
+
|
|
190334
|
+
--shadow-complex-12:
|
|
190335
|
+
0 80px 80px -40px rgba(23, 23, 23, 0.04),
|
|
190336
|
+
0 48px 48px -24px rgba(23, 23, 23, 0.04);
|
|
190337
|
+
--shadow-complex:
|
|
190338
|
+
0 20px 20px -10px rgba(23, 23, 23, 0.04),
|
|
190339
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190340
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190341
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190342
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
|
|
190343
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;
|
|
190344
|
+
--shadow-complex-2:
|
|
190345
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.02),
|
|
190346
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190347
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190348
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);
|
|
190349
|
+
--shadow-complex-4:
|
|
190350
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190351
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);
|
|
190352
|
+
--shadow-complex-5:
|
|
190353
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
|
|
190354
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.06),
|
|
190355
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.06),
|
|
190356
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190357
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190358
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04);
|
|
190359
|
+
--shadow-complex-6:
|
|
190360
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.06),
|
|
190361
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.06),
|
|
190362
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190363
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190364
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
|
|
190365
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset;
|
|
190366
|
+
--shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #335cff;
|
|
190367
|
+
--shadow-complex-8:
|
|
190368
|
+
0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),
|
|
190369
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190370
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0.08),
|
|
190371
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;
|
|
190372
|
+
--shadow-complex-9:
|
|
190373
|
+
0 80px 40px -20px rgba(23, 23, 23, 0.06),
|
|
190374
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.06),
|
|
190375
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.06),
|
|
190376
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190377
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190378
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04),
|
|
190379
|
+
0 0 6px 0 rgba(255, 255, 255, 0.04) inset;
|
|
190380
|
+
--shadow-complex-10:
|
|
190381
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190382
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04);
|
|
190383
|
+
--shadow-complex-11:
|
|
190384
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset,
|
|
190385
|
+
0 20px 20px -10px rgba(23, 23, 23, 0.04),
|
|
190386
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190387
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190388
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190389
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.04);
|
|
190390
|
+
|
|
190391
|
+
--shadow-custom-input:
|
|
190392
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190393
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08);
|
|
190394
|
+
--shadow-custom-input-2:
|
|
190395
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190396
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px var(--color-bg-soft-200);
|
|
190397
|
+
--shadow-custom-input-4:
|
|
190398
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.06),
|
|
190399
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.06), 0 0 0 1px rgba(23, 23, 23, 0.02);
|
|
190400
|
+
--shadow-custom-input-active:
|
|
190401
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.02),
|
|
190402
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190403
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;
|
|
190404
|
+
|
|
190405
|
+
--shadow-gray-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08);
|
|
190406
|
+
|
|
190407
|
+
/* HapplyUI Border Radius System */
|
|
190408
|
+
--radius-10: 0.625rem;
|
|
190409
|
+
--radius-20: 1.25rem;
|
|
190410
|
+
|
|
190411
|
+
/* HapplyUI Animation System */
|
|
190412
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
190413
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
190414
|
+
--animate-shimmer: shimmer 2s infinite linear;
|
|
189948
190415
|
}
|
|
189949
|
-
`;
|
|
189950
|
-
var CSS_TEMPLATE_V3 = `@tailwind base;
|
|
189951
|
-
@tailwind components;
|
|
189952
|
-
@tailwind utilities;
|
|
189953
190416
|
|
|
189954
|
-
|
|
190417
|
+
/* Dark Mode — prefers-color-scheme */
|
|
190418
|
+
@media (prefers-color-scheme: dark) {
|
|
189955
190419
|
:root {
|
|
189956
|
-
--
|
|
189957
|
-
--
|
|
189958
|
-
--
|
|
189959
|
-
--
|
|
189960
|
-
--
|
|
189961
|
-
--
|
|
189962
|
-
--
|
|
189963
|
-
|
|
189964
|
-
--
|
|
189965
|
-
--
|
|
189966
|
-
--
|
|
189967
|
-
--
|
|
189968
|
-
--
|
|
189969
|
-
|
|
189970
|
-
--
|
|
189971
|
-
--
|
|
189972
|
-
--
|
|
189973
|
-
--
|
|
189974
|
-
|
|
189975
|
-
--
|
|
190420
|
+
--color-bg-strong-950: var(--color-neutral-0);
|
|
190421
|
+
--color-bg-surface-800: var(--color-neutral-200);
|
|
190422
|
+
--color-bg-sub-300: var(--color-neutral-600);
|
|
190423
|
+
--color-bg-soft-200: var(--color-neutral-700);
|
|
190424
|
+
--color-bg-weak-50: var(--color-neutral-800);
|
|
190425
|
+
--color-bg-weak-25: var(--color-neutral-900);
|
|
190426
|
+
--color-bg-white-0: var(--color-neutral-950);
|
|
190427
|
+
|
|
190428
|
+
--color-text-strong-950: var(--color-neutral-0);
|
|
190429
|
+
--color-text-sub-600: var(--color-neutral-400);
|
|
190430
|
+
--color-text-soft-400: var(--color-neutral-500);
|
|
190431
|
+
--color-text-disabled-300: var(--color-neutral-600);
|
|
190432
|
+
--color-text-white-0: var(--color-neutral-950);
|
|
190433
|
+
|
|
190434
|
+
--color-stroke-strong-950: var(--color-neutral-0);
|
|
190435
|
+
--color-stroke-sub-300: var(--color-neutral-600);
|
|
190436
|
+
--color-stroke-soft-200: var(--color-neutral-800);
|
|
190437
|
+
--color-stroke-white-0: var(--color-neutral-950);
|
|
190438
|
+
|
|
190439
|
+
--color-faded-dark: var(--color-neutral-300);
|
|
190440
|
+
--color-faded-base: var(--color-neutral-500);
|
|
190441
|
+
--color-faded-light: var(--color-neutral-alpha-24);
|
|
190442
|
+
--color-faded-lighter: var(--color-neutral-alpha-10);
|
|
190443
|
+
|
|
190444
|
+
--color-information-dark: var(--color-blue-400);
|
|
190445
|
+
--color-information-base: var(--color-blue-500);
|
|
190446
|
+
--color-information-light: var(--color-blue-alpha-24);
|
|
190447
|
+
--color-information-lighter: var(--color-blue-alpha-16);
|
|
190448
|
+
|
|
190449
|
+
--color-warning-dark: var(--color-orange-400);
|
|
190450
|
+
--color-warning-base: var(--color-orange-600);
|
|
190451
|
+
--color-warning-light: var(--color-orange-alpha-24);
|
|
190452
|
+
--color-warning-lighter: var(--color-orange-alpha-16);
|
|
190453
|
+
|
|
190454
|
+
--color-error-dark: var(--color-red-400);
|
|
190455
|
+
--color-error-base: var(--color-red-600);
|
|
190456
|
+
--color-error-light: var(--color-red-alpha-24);
|
|
190457
|
+
--color-error-lighter: var(--color-red-alpha-16);
|
|
190458
|
+
|
|
190459
|
+
--color-success-dark: var(--color-green-400);
|
|
190460
|
+
--color-success-base: var(--color-green-600);
|
|
190461
|
+
--color-success-light: var(--color-green-alpha-16);
|
|
190462
|
+
--color-success-lighter: var(--color-green-alpha-10);
|
|
190463
|
+
|
|
190464
|
+
--color-away-dark: var(--color-yellow-400);
|
|
190465
|
+
--color-away-base: var(--color-yellow-600);
|
|
190466
|
+
--color-away-light: var(--color-yellow-alpha-24);
|
|
190467
|
+
--color-away-lighter: var(--color-yellow-alpha-16);
|
|
190468
|
+
|
|
190469
|
+
--color-feature-dark: var(--color-purple-400);
|
|
190470
|
+
--color-feature-base: var(--color-purple-500);
|
|
190471
|
+
--color-feature-light: var(--color-purple-alpha-24);
|
|
190472
|
+
--color-feature-lighter: var(--color-purple-alpha-16);
|
|
190473
|
+
|
|
190474
|
+
--color-verified-dark: var(--color-sky-400);
|
|
190475
|
+
--color-verified-base: var(--color-sky-600);
|
|
190476
|
+
--color-verified-light: var(--color-sky-alpha-24);
|
|
190477
|
+
--color-verified-lighter: var(--color-sky-alpha-16);
|
|
190478
|
+
|
|
190479
|
+
--color-highlighted-dark: var(--color-pink-400);
|
|
190480
|
+
--color-highlighted-base: var(--color-pink-600);
|
|
190481
|
+
--color-highlighted-light: var(--color-pink-alpha-24);
|
|
190482
|
+
--color-highlighted-lighter: var(--color-pink-alpha-16);
|
|
190483
|
+
|
|
190484
|
+
--color-stable-dark: var(--color-teal-400);
|
|
190485
|
+
--color-stable-base: var(--color-teal-600);
|
|
190486
|
+
--color-stable-light: var(--color-teal-alpha-24);
|
|
190487
|
+
--color-stable-lighter: var(--color-teal-alpha-16);
|
|
190488
|
+
|
|
190489
|
+
--color-primary-base: var(--color-purple-400);
|
|
190490
|
+
--color-primary-light: var(--color-purple-alpha-16);
|
|
190491
|
+
--color-primary-lighter: var(--color-purple-alpha-10);
|
|
190492
|
+
|
|
190493
|
+
--color-overlay-gray: #3333338f;
|
|
190494
|
+
--color-overlay-slate: #2b303b8f;
|
|
190495
|
+
--color-overlay: var(--color-overlay-gray);
|
|
190496
|
+
|
|
190497
|
+
--color-social-apple: #fff;
|
|
190498
|
+
--color-social-twitter: #fff;
|
|
190499
|
+
--color-social-github: #fff;
|
|
190500
|
+
--color-social-notion: #fff;
|
|
190501
|
+
--color-social-tidal: #fff;
|
|
190502
|
+
--color-social-amazon: #fff;
|
|
190503
|
+
--color-social-zendesk: #fff;
|
|
190504
|
+
|
|
190505
|
+
--shadow-complex-12:
|
|
190506
|
+
0 80px 80px -40px rgba(23, 23, 23, 0),
|
|
190507
|
+
0 48px 48px -24px rgba(23, 23, 23, 0);
|
|
190508
|
+
--shadow-complex:
|
|
190509
|
+
0 20px 20px -10px rgba(23, 23, 23, 0),
|
|
190510
|
+
0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190511
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190512
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626,
|
|
190513
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;
|
|
190514
|
+
--shadow-complex-2:
|
|
190515
|
+
0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190516
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190517
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);
|
|
190518
|
+
--shadow-complex-4:
|
|
190519
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190520
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);
|
|
190521
|
+
--shadow-complex-5:
|
|
190522
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
|
|
190523
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190524
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190525
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190526
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0);
|
|
190527
|
+
--shadow-complex-6:
|
|
190528
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190529
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190530
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190531
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190532
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset;
|
|
190533
|
+
--shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #4d82ff;
|
|
190534
|
+
--shadow-complex-8:
|
|
190535
|
+
0 20px 20px -10px rgba(23, 23, 23, 0.04),
|
|
190536
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190537
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190538
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190539
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
|
|
190540
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;
|
|
190541
|
+
--shadow-complex-9:
|
|
190542
|
+
0 80px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190543
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190544
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190545
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190546
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190547
|
+
0 0 6px 0 rgba(255, 255, 255, 0.04) inset;
|
|
190548
|
+
--shadow-complex-10:
|
|
190549
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190550
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0);
|
|
190551
|
+
--shadow-complex-11:
|
|
190552
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset,
|
|
190553
|
+
0 20px 20px -10px rgba(23, 23, 23, 0),
|
|
190554
|
+
0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190555
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190556
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);
|
|
190557
|
+
--shadow-custom-input:
|
|
190558
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190559
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;
|
|
190560
|
+
--shadow-custom-input-2:
|
|
190561
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190562
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626;
|
|
190563
|
+
--shadow-custom-input-4:
|
|
190564
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190565
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0);
|
|
190566
|
+
--shadow-custom-input-active:
|
|
190567
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.02),
|
|
190568
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190569
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;
|
|
190570
|
+
--shadow-gray-shadow: 0 0 0 1px #262626;
|
|
189976
190571
|
}
|
|
190572
|
+
}
|
|
189977
190573
|
|
|
189978
|
-
|
|
189979
|
-
|
|
189980
|
-
|
|
189981
|
-
|
|
189982
|
-
|
|
189983
|
-
|
|
189984
|
-
|
|
189985
|
-
|
|
189986
|
-
|
|
189987
|
-
|
|
189988
|
-
|
|
189989
|
-
|
|
189990
|
-
|
|
189991
|
-
|
|
189992
|
-
|
|
189993
|
-
|
|
189994
|
-
|
|
189995
|
-
|
|
189996
|
-
|
|
189997
|
-
|
|
190574
|
+
/* Class-based Dark Mode Support */
|
|
190575
|
+
.dark {
|
|
190576
|
+
--color-bg-strong-950: var(--color-neutral-0);
|
|
190577
|
+
--color-bg-surface-800: var(--color-neutral-200);
|
|
190578
|
+
--color-bg-sub-300: var(--color-neutral-600);
|
|
190579
|
+
--color-bg-soft-200: var(--color-neutral-700);
|
|
190580
|
+
--color-bg-weak-50: var(--color-neutral-800);
|
|
190581
|
+
--color-bg-weak-25: var(--color-neutral-900);
|
|
190582
|
+
--color-bg-white-0: var(--color-neutral-950);
|
|
190583
|
+
|
|
190584
|
+
--color-text-strong-950: var(--color-neutral-0);
|
|
190585
|
+
--color-text-sub-600: var(--color-neutral-400);
|
|
190586
|
+
--color-text-soft-400: var(--color-neutral-500);
|
|
190587
|
+
--color-text-disabled-300: var(--color-neutral-600);
|
|
190588
|
+
--color-text-white-0: var(--color-neutral-950);
|
|
190589
|
+
|
|
190590
|
+
--color-stroke-strong-950: var(--color-neutral-0);
|
|
190591
|
+
--color-stroke-sub-300: var(--color-neutral-600);
|
|
190592
|
+
--color-stroke-soft-200: var(--color-neutral-800);
|
|
190593
|
+
--color-stroke-white-0: var(--color-neutral-950);
|
|
190594
|
+
|
|
190595
|
+
--color-faded-dark: var(--color-neutral-300);
|
|
190596
|
+
--color-faded-base: var(--color-neutral-500);
|
|
190597
|
+
--color-faded-light: var(--color-neutral-alpha-24);
|
|
190598
|
+
--color-faded-lighter: var(--color-neutral-alpha-10);
|
|
190599
|
+
|
|
190600
|
+
--color-information-dark: var(--color-blue-400);
|
|
190601
|
+
--color-information-base: var(--color-blue-500);
|
|
190602
|
+
--color-information-light: var(--color-blue-alpha-24);
|
|
190603
|
+
--color-information-lighter: var(--color-blue-alpha-16);
|
|
190604
|
+
|
|
190605
|
+
--color-warning-dark: var(--color-orange-400);
|
|
190606
|
+
--color-warning-base: var(--color-orange-600);
|
|
190607
|
+
--color-warning-light: var(--color-orange-alpha-24);
|
|
190608
|
+
--color-warning-lighter: var(--color-orange-alpha-16);
|
|
190609
|
+
|
|
190610
|
+
--color-error-dark: var(--color-red-400);
|
|
190611
|
+
--color-error-base: var(--color-red-600);
|
|
190612
|
+
--color-error-light: var(--color-red-alpha-24);
|
|
190613
|
+
--color-error-lighter: var(--color-red-alpha-16);
|
|
190614
|
+
|
|
190615
|
+
--color-success-dark: var(--color-green-400);
|
|
190616
|
+
--color-success-base: var(--color-green-600);
|
|
190617
|
+
--color-success-light: var(--color-green-alpha-16);
|
|
190618
|
+
--color-success-lighter: var(--color-green-alpha-10);
|
|
190619
|
+
|
|
190620
|
+
--color-away-dark: var(--color-yellow-400);
|
|
190621
|
+
--color-away-base: var(--color-yellow-600);
|
|
190622
|
+
--color-away-light: var(--color-yellow-alpha-24);
|
|
190623
|
+
--color-away-lighter: var(--color-yellow-alpha-16);
|
|
190624
|
+
|
|
190625
|
+
--color-feature-dark: var(--color-purple-400);
|
|
190626
|
+
--color-feature-base: var(--color-purple-500);
|
|
190627
|
+
--color-feature-light: var(--color-purple-alpha-24);
|
|
190628
|
+
--color-feature-lighter: var(--color-purple-alpha-16);
|
|
190629
|
+
|
|
190630
|
+
--color-verified-dark: var(--color-sky-400);
|
|
190631
|
+
--color-verified-base: var(--color-sky-600);
|
|
190632
|
+
--color-verified-light: var(--color-sky-alpha-24);
|
|
190633
|
+
--color-verified-lighter: var(--color-sky-alpha-16);
|
|
190634
|
+
|
|
190635
|
+
--color-highlighted-dark: var(--color-pink-400);
|
|
190636
|
+
--color-highlighted-base: var(--color-pink-600);
|
|
190637
|
+
--color-highlighted-light: var(--color-pink-alpha-24);
|
|
190638
|
+
--color-highlighted-lighter: var(--color-pink-alpha-16);
|
|
190639
|
+
|
|
190640
|
+
--color-stable-dark: var(--color-teal-400);
|
|
190641
|
+
--color-stable-base: var(--color-teal-600);
|
|
190642
|
+
--color-stable-light: var(--color-teal-alpha-24);
|
|
190643
|
+
--color-stable-lighter: var(--color-teal-alpha-16);
|
|
190644
|
+
|
|
190645
|
+
--color-primary-base: var(--color-purple-400);
|
|
190646
|
+
--color-primary-light: var(--color-purple-alpha-16);
|
|
190647
|
+
--color-primary-lighter: var(--color-purple-alpha-10);
|
|
190648
|
+
|
|
190649
|
+
--color-overlay-gray: #3333338f;
|
|
190650
|
+
--color-overlay-slate: #2b303b8f;
|
|
190651
|
+
--color-overlay: var(--color-overlay-gray);
|
|
190652
|
+
|
|
190653
|
+
--color-social-apple: #fff;
|
|
190654
|
+
--color-social-twitter: #fff;
|
|
190655
|
+
--color-social-github: #fff;
|
|
190656
|
+
--color-social-notion: #fff;
|
|
190657
|
+
--color-social-tidal: #fff;
|
|
190658
|
+
--color-social-amazon: #fff;
|
|
190659
|
+
--color-social-zendesk: #fff;
|
|
190660
|
+
|
|
190661
|
+
--shadow-complex-12:
|
|
190662
|
+
0 80px 80px -40px rgba(23, 23, 23, 0),
|
|
190663
|
+
0 48px 48px -24px rgba(23, 23, 23, 0);
|
|
190664
|
+
--shadow-complex:
|
|
190665
|
+
0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),
|
|
190666
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190667
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px #262626,
|
|
190668
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset;
|
|
190669
|
+
--shadow-complex-2:
|
|
190670
|
+
0 10px 10px -5px rgba(23, 23, 23, 0), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190671
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190672
|
+
0 0 0 1px rgba(23, 23, 23, 0);
|
|
190673
|
+
--shadow-complex-4:
|
|
190674
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190675
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.02);
|
|
190676
|
+
--shadow-complex-5:
|
|
190677
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset,
|
|
190678
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190679
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190680
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0);
|
|
190681
|
+
--shadow-complex-6:
|
|
190682
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190683
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190684
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190685
|
+
0 0 6px 0 rgba(255, 255, 255, 0.24) inset;
|
|
190686
|
+
--shadow-complex-7: 0 1px 2px 0 rgba(14, 18, 27, 0.24), 0 0 0 1px #4d82ff;
|
|
190687
|
+
--shadow-complex-8:
|
|
190688
|
+
0 20px 20px -10px rgba(23, 23, 23, 0.04),
|
|
190689
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04),
|
|
190690
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.04),
|
|
190691
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190692
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0.08),
|
|
190693
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.06) inset;
|
|
190694
|
+
--shadow-complex-9:
|
|
190695
|
+
0 80px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190696
|
+
0 40px 40px -20px rgba(23, 23, 23, 0.04),
|
|
190697
|
+
0 10px 10px -5px rgba(23, 23, 23, 0.04), 0 6px 6px -3px rgba(23, 23, 23, 0),
|
|
190698
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190699
|
+
0 0 6px 0 rgba(255, 255, 255, 0.04) inset;
|
|
190700
|
+
--shadow-complex-10:
|
|
190701
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0);
|
|
190702
|
+
--shadow-complex-11:
|
|
190703
|
+
0 -1px 1px -0.5px rgba(23, 23, 23, 0.04) inset,
|
|
190704
|
+
0 20px 20px -10px rgba(23, 23, 23, 0), 0 10px 10px -5px rgba(23, 23, 23, 0),
|
|
190705
|
+
0 6px 6px -3px rgba(23, 23, 23, 0), 0 3px 3px -1.5px rgba(23, 23, 23, 0),
|
|
190706
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0), 0 0 0 1px rgba(23, 23, 23, 0);
|
|
190707
|
+
--shadow-custom-input:
|
|
190708
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190709
|
+
0 0 0 1px #262626;
|
|
190710
|
+
--shadow-custom-input-2:
|
|
190711
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0), 0 1px 1px -0.5px rgba(23, 23, 23, 0),
|
|
190712
|
+
0 0 0 1px #262626;
|
|
190713
|
+
--shadow-custom-input-4:
|
|
190714
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190715
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1px rgba(23, 23, 23, 0);
|
|
190716
|
+
--shadow-custom-input-active:
|
|
190717
|
+
0 6px 6px -3px rgba(23, 23, 23, 0.02),
|
|
190718
|
+
0 3px 3px -1.5px rgba(23, 23, 23, 0.04),
|
|
190719
|
+
0 1px 1px -0.5px rgba(23, 23, 23, 0.04), 0 0 0 1.4px #335cff;
|
|
190720
|
+
--shadow-gray-shadow: 0 0 0 1px #262626;
|
|
190721
|
+
}
|
|
190722
|
+
|
|
190723
|
+
/* Keyframe Animations */
|
|
190724
|
+
@keyframes spin {
|
|
190725
|
+
to {
|
|
190726
|
+
transform: rotate(360deg);
|
|
189998
190727
|
}
|
|
189999
190728
|
}
|
|
190000
190729
|
|
|
190001
|
-
@
|
|
190002
|
-
|
|
190003
|
-
|
|
190730
|
+
@keyframes ping {
|
|
190731
|
+
75%,
|
|
190732
|
+
100% {
|
|
190733
|
+
transform: scale(2);
|
|
190734
|
+
opacity: 0;
|
|
190004
190735
|
}
|
|
190005
|
-
|
|
190006
|
-
|
|
190736
|
+
}
|
|
190737
|
+
|
|
190738
|
+
@keyframes pulse {
|
|
190739
|
+
50% {
|
|
190740
|
+
opacity: 0.5;
|
|
190007
190741
|
}
|
|
190008
190742
|
}
|
|
190743
|
+
|
|
190744
|
+
@keyframes bounce {
|
|
190745
|
+
0%,
|
|
190746
|
+
100% {
|
|
190747
|
+
transform: translateY(-25%);
|
|
190748
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
190749
|
+
}
|
|
190750
|
+
50% {
|
|
190751
|
+
transform: none;
|
|
190752
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
190753
|
+
}
|
|
190754
|
+
}
|
|
190755
|
+
|
|
190756
|
+
@property --radix-accordion-content-height {
|
|
190757
|
+
syntax: "<length>";
|
|
190758
|
+
inherits: false;
|
|
190759
|
+
initial-value: 0px;
|
|
190760
|
+
}
|
|
190761
|
+
|
|
190762
|
+
@keyframes accordion-down {
|
|
190763
|
+
from {
|
|
190764
|
+
height: 0;
|
|
190765
|
+
opacity: 0;
|
|
190766
|
+
}
|
|
190767
|
+
to {
|
|
190768
|
+
height: var(--radix-accordion-content-height);
|
|
190769
|
+
opacity: 1;
|
|
190770
|
+
}
|
|
190771
|
+
}
|
|
190772
|
+
|
|
190773
|
+
@keyframes accordion-up {
|
|
190774
|
+
from {
|
|
190775
|
+
height: var(--radix-accordion-content-height);
|
|
190776
|
+
opacity: 1;
|
|
190777
|
+
}
|
|
190778
|
+
to {
|
|
190779
|
+
height: 0;
|
|
190780
|
+
opacity: 0;
|
|
190781
|
+
}
|
|
190782
|
+
}
|
|
190783
|
+
|
|
190784
|
+
@keyframes shimmer {
|
|
190785
|
+
0% {
|
|
190786
|
+
background-position: 200% 0;
|
|
190787
|
+
}
|
|
190788
|
+
100% {
|
|
190789
|
+
background-position: -200% 0;
|
|
190790
|
+
}
|
|
190791
|
+
}
|
|
190792
|
+
|
|
190793
|
+
/* HapplyUI Body Styles */
|
|
190794
|
+
body {
|
|
190795
|
+
background: var(--color-bg-white-0);
|
|
190796
|
+
color: var(--color-text-strong-950);
|
|
190797
|
+
font-family: Inter, Arial, Helvetica, sans-serif;
|
|
190798
|
+
margin: 0;
|
|
190799
|
+
padding: 0;
|
|
190800
|
+
}
|
|
190009
190801
|
`;
|
|
190010
|
-
var
|
|
190802
|
+
var HAPPLY_THEME_V3 = `/* HapplyUI Design Tokens — https://ui.happly.cloud */
|
|
190803
|
+
/* Auto-generated by @happlyui/cli — do not edit manually */
|
|
190011
190804
|
|
|
190012
|
-
|
|
190013
|
-
|
|
190014
|
-
--
|
|
190015
|
-
--
|
|
190016
|
-
--
|
|
190017
|
-
--
|
|
190018
|
-
--
|
|
190019
|
-
--
|
|
190020
|
-
--
|
|
190021
|
-
--
|
|
190022
|
-
--
|
|
190023
|
-
--
|
|
190024
|
-
--
|
|
190025
|
-
--
|
|
190026
|
-
--
|
|
190027
|
-
--
|
|
190028
|
-
--
|
|
190029
|
-
|
|
190030
|
-
--
|
|
190031
|
-
--
|
|
190032
|
-
--
|
|
190033
|
-
--
|
|
190805
|
+
:root {
|
|
190806
|
+
/* HapplyUI Raw Colors */
|
|
190807
|
+
--color-gray-950: #171717;
|
|
190808
|
+
--color-gray-900: #1c1c1c;
|
|
190809
|
+
--color-gray-800: #262626;
|
|
190810
|
+
--color-gray-700: #333333;
|
|
190811
|
+
--color-gray-600: #5c5c5c;
|
|
190812
|
+
--color-gray-500: #7b7b7b;
|
|
190813
|
+
--color-gray-400: #a3a3a3;
|
|
190814
|
+
--color-gray-300: #d1d1d1;
|
|
190815
|
+
--color-gray-200: #ebebeb;
|
|
190816
|
+
--color-gray-100: #f5f5f5;
|
|
190817
|
+
--color-gray-50: #f7f7f7;
|
|
190818
|
+
--color-gray-0: #ffffff;
|
|
190819
|
+
--color-gray-alpha-24: #a3a3a33d;
|
|
190820
|
+
--color-gray-alpha-16: #a3a3a329;
|
|
190821
|
+
--color-gray-alpha-10: #a3a3a31a;
|
|
190822
|
+
|
|
190823
|
+
--color-slate-950: #0e121b;
|
|
190824
|
+
--color-slate-900: #181b25;
|
|
190825
|
+
--color-slate-800: #222530;
|
|
190826
|
+
--color-slate-700: #2b303b;
|
|
190827
|
+
--color-slate-600: #525866;
|
|
190828
|
+
--color-slate-500: #717784;
|
|
190829
|
+
--color-slate-400: #99a0ae;
|
|
190830
|
+
--color-slate-300: #cacfd8;
|
|
190831
|
+
--color-slate-200: #eaecf0;
|
|
190832
|
+
--color-slate-100: #f2f5f8;
|
|
190833
|
+
--color-slate-50: #f5f7fa;
|
|
190834
|
+
--color-slate-0: #ffffff;
|
|
190835
|
+
--color-slate-alpha-24: #99a0ae3d;
|
|
190836
|
+
--color-slate-alpha-16: #99a0ae29;
|
|
190837
|
+
--color-slate-alpha-10: #99a0ae1a;
|
|
190838
|
+
|
|
190839
|
+
--color-blue-950: #122368;
|
|
190840
|
+
--color-blue-900: #182f8b;
|
|
190841
|
+
--color-blue-800: #1f3bad;
|
|
190842
|
+
--color-blue-700: #2547d0;
|
|
190843
|
+
--color-blue-600: #3559e9;
|
|
190844
|
+
--color-blue-500: #335cff;
|
|
190845
|
+
--color-blue-400: #4d82ff;
|
|
190846
|
+
--color-blue-300: #97baff;
|
|
190847
|
+
--color-blue-200: #c0d5ff;
|
|
190848
|
+
--color-blue-100: #d5e2ff;
|
|
190849
|
+
--color-blue-50: #ebf1ff;
|
|
190850
|
+
--color-blue-alpha-24: #476cff3d;
|
|
190851
|
+
--color-blue-alpha-16: #476cff29;
|
|
190852
|
+
--color-blue-alpha-10: #476cff1a;
|
|
190853
|
+
|
|
190854
|
+
--color-orange-950: #71330a;
|
|
190855
|
+
--color-orange-900: #96440d;
|
|
190856
|
+
--color-orange-800: #b75310;
|
|
190857
|
+
--color-orange-700: #ce5e12;
|
|
190858
|
+
--color-orange-600: #e16614;
|
|
190859
|
+
--color-orange-500: #fa7319;
|
|
190860
|
+
--color-orange-400: #ffa468;
|
|
190861
|
+
--color-orange-300: #ffc197;
|
|
190862
|
+
--color-orange-200: #ffd9c0;
|
|
190863
|
+
--color-orange-100: #ffe6d5;
|
|
190864
|
+
--color-orange-50: #fff3eb;
|
|
190865
|
+
--color-orange-alpha-24: #fa73193d;
|
|
190866
|
+
--color-orange-alpha-16: #fa731929;
|
|
190867
|
+
--color-orange-alpha-10: #fa73191a;
|
|
190868
|
+
|
|
190869
|
+
--color-red-950: #681219;
|
|
190870
|
+
--color-red-900: #8b1822;
|
|
190871
|
+
--color-red-800: #ad1f2b;
|
|
190872
|
+
--color-red-700: #d02533;
|
|
190873
|
+
--color-red-600: #e93544;
|
|
190874
|
+
--color-red-500: #fb3748;
|
|
190875
|
+
--color-red-400: #ff6875;
|
|
190876
|
+
--color-red-300: #ff97a0;
|
|
190877
|
+
--color-red-200: #ffc0c5;
|
|
190878
|
+
--color-red-100: #ffd5d8;
|
|
190879
|
+
--color-red-50: #ffebec;
|
|
190880
|
+
--color-red-alpha-24: #fb37483d;
|
|
190881
|
+
--color-red-alpha-16: #fb374829;
|
|
190882
|
+
--color-red-alpha-10: #fb37481a;
|
|
190883
|
+
|
|
190884
|
+
--color-green-950: #0b4627;
|
|
190885
|
+
--color-green-900: #16643b;
|
|
190886
|
+
--color-green-800: #1a7544;
|
|
190887
|
+
--color-green-700: #178c4e;
|
|
190888
|
+
--color-green-600: #1daf61;
|
|
190889
|
+
--color-green-500: #1fc16b;
|
|
190890
|
+
--color-green-400: #3ee089;
|
|
190891
|
+
--color-green-300: #84ebb4;
|
|
190892
|
+
--color-green-200: #c2f5da;
|
|
190893
|
+
--color-green-100: #d6f5e8;
|
|
190894
|
+
--color-green-50: #e3f7ec;
|
|
190895
|
+
--color-green-alpha-24: #1fc16b3d;
|
|
190896
|
+
--color-green-alpha-16: #1fc16b29;
|
|
190897
|
+
--color-green-alpha-10: #1fc16b1a;
|
|
190898
|
+
|
|
190899
|
+
--color-yellow-950: #624c18;
|
|
190900
|
+
--color-yellow-900: #86661d;
|
|
190901
|
+
--color-yellow-800: #a78025;
|
|
190902
|
+
--color-yellow-700: #c99a2c;
|
|
190903
|
+
--color-yellow-600: #e6a819;
|
|
190904
|
+
--color-yellow-500: #f6b51e;
|
|
190905
|
+
--color-yellow-400: #ffd268;
|
|
190906
|
+
--color-yellow-300: #ffe097;
|
|
190907
|
+
--color-yellow-200: #ffecc0;
|
|
190908
|
+
--color-yellow-100: #ffefcc;
|
|
190909
|
+
--color-yellow-50: #fffaeb;
|
|
190910
|
+
--color-yellow-alpha-24: #fbc64b3d;
|
|
190911
|
+
--color-yellow-alpha-16: #fbc64b29;
|
|
190912
|
+
--color-yellow-alpha-10: #fbc64b1a;
|
|
190913
|
+
|
|
190914
|
+
--color-purple-950: #351a75;
|
|
190915
|
+
--color-purple-900: #3d1d86;
|
|
190916
|
+
--color-purple-800: #4c25a7;
|
|
190917
|
+
--color-purple-700: #5b2cc9;
|
|
190918
|
+
--color-purple-600: #693ee0;
|
|
190919
|
+
--color-purple-500: #7d52f4;
|
|
190920
|
+
--color-purple-400: #8c71f6;
|
|
190921
|
+
--color-purple-300: #a897ff;
|
|
190922
|
+
--color-purple-200: #cac0ff;
|
|
190923
|
+
--color-purple-100: #dcd5ff;
|
|
190924
|
+
--color-purple-50: #efebff;
|
|
190925
|
+
--color-purple-alpha-24: #784def3d;
|
|
190926
|
+
--color-purple-alpha-16: #784def29;
|
|
190927
|
+
--color-purple-alpha-10: #784def1a;
|
|
190928
|
+
|
|
190929
|
+
--color-sky-950: #124b68;
|
|
190930
|
+
--color-sky-900: #18658b;
|
|
190931
|
+
--color-sky-800: #1f7ead;
|
|
190932
|
+
--color-sky-700: #2597d0;
|
|
190933
|
+
--color-sky-600: #35ade9;
|
|
190934
|
+
--color-sky-500: #47c2ff;
|
|
190935
|
+
--color-sky-400: #68cdff;
|
|
190936
|
+
--color-sky-300: #97dcff;
|
|
190937
|
+
--color-sky-200: #c0eaff;
|
|
190938
|
+
--color-sky-100: #d5f1ff;
|
|
190939
|
+
--color-sky-50: #ebf8ff;
|
|
190940
|
+
--color-sky-alpha-24: #47c2ff3d;
|
|
190941
|
+
--color-sky-alpha-16: #47c2ff29;
|
|
190942
|
+
--color-sky-alpha-10: #47c2ff1a;
|
|
190943
|
+
|
|
190944
|
+
--color-pink-950: #68123d;
|
|
190945
|
+
--color-pink-900: #8b1852;
|
|
190946
|
+
--color-pink-800: #ad1f66;
|
|
190947
|
+
--color-pink-700: #d0257a;
|
|
190948
|
+
--color-pink-600: #e9358f;
|
|
190949
|
+
--color-pink-500: #fb4ba3;
|
|
190950
|
+
--color-pink-400: #ff68b3;
|
|
190951
|
+
--color-pink-300: #ff97cb;
|
|
190952
|
+
--color-pink-200: #ffc0df;
|
|
190953
|
+
--color-pink-100: #ffd5ea;
|
|
190954
|
+
--color-pink-50: #ffebf4;
|
|
190955
|
+
--color-pink-alpha-24: #fb4ba33d;
|
|
190956
|
+
--color-pink-alpha-16: #fb4ba329;
|
|
190957
|
+
--color-pink-alpha-10: #fb4ba31a;
|
|
190958
|
+
|
|
190959
|
+
--color-teal-950: #0b463e;
|
|
190960
|
+
--color-teal-900: #16645a;
|
|
190961
|
+
--color-teal-800: #1a7569;
|
|
190962
|
+
--color-teal-700: #178c7d;
|
|
190963
|
+
--color-teal-600: #1daf9c;
|
|
190964
|
+
--color-teal-500: #22d3bb;
|
|
190965
|
+
--color-teal-400: #3fdec9;
|
|
190966
|
+
--color-teal-300: #84ebdd;
|
|
190967
|
+
--color-teal-200: #c2f5ee;
|
|
190968
|
+
--color-teal-100: #d0fbf5;
|
|
190969
|
+
--color-teal-50: #e4fbf8;
|
|
190970
|
+
--color-teal-alpha-24: #22d3bb3d;
|
|
190971
|
+
--color-teal-alpha-16: #22d3bb29;
|
|
190972
|
+
--color-teal-alpha-10: #22d3bb1a;
|
|
190973
|
+
|
|
190974
|
+
--color-white-alpha-24: #ffffff3d;
|
|
190975
|
+
--color-white-alpha-16: #ffffff29;
|
|
190976
|
+
--color-white-alpha-10: #ffffff1a;
|
|
190977
|
+
|
|
190978
|
+
--color-black-alpha-24: #1717173d;
|
|
190979
|
+
--color-black-alpha-16: #17171729;
|
|
190980
|
+
--color-black-alpha-10: #1717171a;
|
|
190981
|
+
|
|
190982
|
+
/* HapplyUI Dynamic Neutral Colors */
|
|
190983
|
+
--color-neutral-950: var(--color-gray-950);
|
|
190984
|
+
--color-neutral-900: var(--color-gray-900);
|
|
190985
|
+
--color-neutral-800: var(--color-gray-800);
|
|
190986
|
+
--color-neutral-700: var(--color-gray-700);
|
|
190987
|
+
--color-neutral-600: var(--color-gray-600);
|
|
190988
|
+
--color-neutral-500: var(--color-gray-500);
|
|
190989
|
+
--color-neutral-400: var(--color-gray-400);
|
|
190990
|
+
--color-neutral-300: var(--color-gray-300);
|
|
190991
|
+
--color-neutral-200: var(--color-gray-200);
|
|
190992
|
+
--color-neutral-100: var(--color-gray-100);
|
|
190993
|
+
--color-neutral-50: var(--color-gray-50);
|
|
190994
|
+
--color-neutral-0: var(--color-gray-0);
|
|
190995
|
+
--color-neutral-alpha-24: var(--color-gray-alpha-24);
|
|
190996
|
+
--color-neutral-alpha-16: var(--color-gray-alpha-16);
|
|
190997
|
+
--color-neutral-alpha-10: var(--color-gray-alpha-10);
|
|
190998
|
+
|
|
190999
|
+
/* HapplyUI Dynamic Primary Colors */
|
|
191000
|
+
--color-primary-50: var(--color-purple-50);
|
|
191001
|
+
--color-primary-100: var(--color-purple-100);
|
|
191002
|
+
--color-primary-200: var(--color-purple-200);
|
|
191003
|
+
--color-primary-300: var(--color-purple-300);
|
|
191004
|
+
--color-primary-400: var(--color-purple-400);
|
|
191005
|
+
--color-primary-500: var(--color-purple-500);
|
|
191006
|
+
--color-primary-600: var(--color-purple-600);
|
|
191007
|
+
--color-primary-700: var(--color-purple-700);
|
|
191008
|
+
--color-primary-800: var(--color-purple-800);
|
|
191009
|
+
--color-primary-900: var(--color-purple-900);
|
|
191010
|
+
--color-primary-950: var(--color-purple-950);
|
|
191011
|
+
--color-primary-dark: var(--color-purple-800);
|
|
191012
|
+
--color-primary-darker: var(--color-purple-700);
|
|
191013
|
+
--color-primary-base: var(--color-purple-500);
|
|
191014
|
+
--color-primary-light: var(--color-purple-100);
|
|
191015
|
+
--color-primary-lighter: var(--color-purple-50);
|
|
191016
|
+
--color-primary-alpha-24: var(--color-purple-alpha-24);
|
|
191017
|
+
--color-primary-alpha-16: var(--color-purple-alpha-16);
|
|
191018
|
+
--color-primary-alpha-10: var(--color-purple-alpha-10);
|
|
191019
|
+
|
|
191020
|
+
/* HapplyUI Social Colors */
|
|
191021
|
+
--color-social-apple: #000;
|
|
191022
|
+
--color-social-twitter: #010101;
|
|
191023
|
+
--color-social-github: #24292f;
|
|
191024
|
+
--color-social-notion: #1e2226;
|
|
191025
|
+
--color-social-tidal: #000;
|
|
191026
|
+
--color-social-amazon: #353e47;
|
|
191027
|
+
--color-social-zendesk: #16140d;
|
|
191028
|
+
|
|
191029
|
+
/* HapplyUI Overlay Colors */
|
|
191030
|
+
--color-overlay-gray: #3333333d;
|
|
191031
|
+
--color-overlay-slate: #2b303b3d;
|
|
191032
|
+
--color-overlay: var(--color-overlay-gray);
|
|
191033
|
+
|
|
191034
|
+
/* HapplyUI Semantic Colors */
|
|
191035
|
+
--color-static-black: var(--color-neutral-950);
|
|
191036
|
+
--color-static-white: var(--color-neutral-0);
|
|
191037
|
+
|
|
191038
|
+
--color-bg-strong-950: var(--color-neutral-950);
|
|
191039
|
+
--color-bg-surface-800: var(--color-neutral-800);
|
|
191040
|
+
--color-bg-sub-300: var(--color-neutral-300);
|
|
191041
|
+
--color-bg-soft-200: var(--color-neutral-200);
|
|
191042
|
+
--color-bg-weak-50: var(--color-neutral-50);
|
|
191043
|
+
--color-bg-weak-25: var(--color-neutral-50);
|
|
191044
|
+
--color-bg-white-0: var(--color-neutral-0);
|
|
191045
|
+
|
|
191046
|
+
--color-text-strong-950: var(--color-neutral-950);
|
|
191047
|
+
--color-text-sub-600: var(--color-neutral-600);
|
|
191048
|
+
--color-text-soft-400: var(--color-neutral-400);
|
|
191049
|
+
--color-text-disabled-300: var(--color-neutral-300);
|
|
191050
|
+
--color-text-white-0: var(--color-neutral-0);
|
|
191051
|
+
|
|
191052
|
+
--color-stroke-strong-950: var(--color-neutral-950);
|
|
191053
|
+
--color-stroke-sub-300: var(--color-neutral-300);
|
|
191054
|
+
--color-stroke-soft-200: var(--color-neutral-200);
|
|
191055
|
+
--color-stroke-white-0: var(--color-neutral-0);
|
|
191056
|
+
|
|
191057
|
+
--color-faded-dark: var(--color-neutral-800);
|
|
191058
|
+
--color-faded-base: var(--color-neutral-500);
|
|
191059
|
+
--color-faded-light: var(--color-neutral-200);
|
|
191060
|
+
--color-faded-lighter: var(--color-neutral-100);
|
|
191061
|
+
|
|
191062
|
+
--color-information-dark: var(--color-blue-950);
|
|
191063
|
+
--color-information-base: var(--color-blue-500);
|
|
191064
|
+
--color-information-light: var(--color-blue-200);
|
|
191065
|
+
--color-information-lighter: var(--color-blue-50);
|
|
191066
|
+
|
|
191067
|
+
--color-warning-dark: var(--color-orange-950);
|
|
191068
|
+
--color-warning-darker: var(--color-orange-700);
|
|
191069
|
+
--color-warning-base: var(--color-orange-500);
|
|
191070
|
+
--color-warning-light: var(--color-orange-200);
|
|
191071
|
+
--color-warning-lighter: var(--color-orange-50);
|
|
191072
|
+
--color-warning-alpha-10: var(--color-orange-alpha-10);
|
|
191073
|
+
|
|
191074
|
+
--color-error-dark: var(--color-red-950);
|
|
191075
|
+
--color-error-base: var(--color-red-500);
|
|
191076
|
+
--color-error-light: var(--color-red-200);
|
|
191077
|
+
--color-error-lighter: var(--color-red-50);
|
|
191078
|
+
|
|
191079
|
+
--color-success-dark: var(--color-green-950);
|
|
191080
|
+
--color-success-darker: var(--color-green-700);
|
|
191081
|
+
--color-success-base: var(--color-green-500);
|
|
191082
|
+
--color-success-light: var(--color-green-200);
|
|
191083
|
+
--color-success-lighter: var(--color-green-50);
|
|
191084
|
+
--color-success-alpha-10: var(--color-green-alpha-10);
|
|
191085
|
+
|
|
191086
|
+
--color-away-dark: var(--color-yellow-950);
|
|
191087
|
+
--color-away-base: var(--color-yellow-500);
|
|
191088
|
+
--color-away-light: var(--color-yellow-200);
|
|
191089
|
+
--color-away-lighter: var(--color-yellow-50);
|
|
191090
|
+
|
|
191091
|
+
--color-feature-dark: var(--color-purple-950);
|
|
191092
|
+
--color-feature-base: var(--color-purple-500);
|
|
191093
|
+
--color-feature-light: var(--color-purple-200);
|
|
191094
|
+
--color-feature-lighter: var(--color-purple-50);
|
|
191095
|
+
|
|
191096
|
+
--color-verified-dark: var(--color-sky-950);
|
|
191097
|
+
--color-verified-base: var(--color-sky-500);
|
|
191098
|
+
--color-verified-light: var(--color-sky-200);
|
|
191099
|
+
--color-verified-lighter: var(--color-sky-50);
|
|
191100
|
+
|
|
191101
|
+
--color-highlighted-dark: var(--color-pink-950);
|
|
191102
|
+
--color-highlighted-base: var(--color-pink-500);
|
|
191103
|
+
--color-highlighted-light: var(--color-pink-200);
|
|
191104
|
+
--color-highlighted-lighter: var(--color-pink-50);
|
|
191105
|
+
|
|
191106
|
+
--color-stable-dark: var(--color-teal-950);
|
|
191107
|
+
--color-stable-base: var(--color-teal-500);
|
|
191108
|
+
--color-stable-light: var(--color-teal-200);
|
|
191109
|
+
--color-stable-lighter: var(--color-teal-50);
|
|
190034
191110
|
}
|
|
190035
191111
|
|
|
190036
191112
|
.dark {
|
|
190037
|
-
--
|
|
190038
|
-
--
|
|
190039
|
-
--
|
|
190040
|
-
--
|
|
190041
|
-
--
|
|
190042
|
-
--
|
|
190043
|
-
--
|
|
190044
|
-
|
|
190045
|
-
--
|
|
190046
|
-
--
|
|
190047
|
-
--
|
|
190048
|
-
--
|
|
190049
|
-
--
|
|
190050
|
-
|
|
190051
|
-
--
|
|
190052
|
-
--
|
|
190053
|
-
--
|
|
190054
|
-
--
|
|
190055
|
-
|
|
191113
|
+
--color-bg-strong-950: var(--color-neutral-0);
|
|
191114
|
+
--color-bg-surface-800: var(--color-neutral-200);
|
|
191115
|
+
--color-bg-sub-300: var(--color-neutral-600);
|
|
191116
|
+
--color-bg-soft-200: var(--color-neutral-700);
|
|
191117
|
+
--color-bg-weak-50: var(--color-neutral-800);
|
|
191118
|
+
--color-bg-weak-25: var(--color-neutral-900);
|
|
191119
|
+
--color-bg-white-0: var(--color-neutral-950);
|
|
191120
|
+
|
|
191121
|
+
--color-text-strong-950: var(--color-neutral-0);
|
|
191122
|
+
--color-text-sub-600: var(--color-neutral-400);
|
|
191123
|
+
--color-text-soft-400: var(--color-neutral-500);
|
|
191124
|
+
--color-text-disabled-300: var(--color-neutral-600);
|
|
191125
|
+
--color-text-white-0: var(--color-neutral-950);
|
|
191126
|
+
|
|
191127
|
+
--color-stroke-strong-950: var(--color-neutral-0);
|
|
191128
|
+
--color-stroke-sub-300: var(--color-neutral-600);
|
|
191129
|
+
--color-stroke-soft-200: var(--color-neutral-800);
|
|
191130
|
+
--color-stroke-white-0: var(--color-neutral-950);
|
|
191131
|
+
|
|
191132
|
+
--color-faded-dark: var(--color-neutral-300);
|
|
191133
|
+
--color-faded-base: var(--color-neutral-500);
|
|
191134
|
+
--color-faded-light: var(--color-neutral-alpha-24);
|
|
191135
|
+
--color-faded-lighter: var(--color-neutral-alpha-10);
|
|
191136
|
+
|
|
191137
|
+
--color-information-dark: var(--color-blue-400);
|
|
191138
|
+
--color-information-base: var(--color-blue-500);
|
|
191139
|
+
--color-information-light: var(--color-blue-alpha-24);
|
|
191140
|
+
--color-information-lighter: var(--color-blue-alpha-16);
|
|
191141
|
+
|
|
191142
|
+
--color-warning-dark: var(--color-orange-400);
|
|
191143
|
+
--color-warning-base: var(--color-orange-600);
|
|
191144
|
+
--color-warning-light: var(--color-orange-alpha-24);
|
|
191145
|
+
--color-warning-lighter: var(--color-orange-alpha-16);
|
|
191146
|
+
|
|
191147
|
+
--color-error-dark: var(--color-red-400);
|
|
191148
|
+
--color-error-base: var(--color-red-600);
|
|
191149
|
+
--color-error-light: var(--color-red-alpha-24);
|
|
191150
|
+
--color-error-lighter: var(--color-red-alpha-16);
|
|
191151
|
+
|
|
191152
|
+
--color-success-dark: var(--color-green-400);
|
|
191153
|
+
--color-success-base: var(--color-green-600);
|
|
191154
|
+
--color-success-light: var(--color-green-alpha-16);
|
|
191155
|
+
--color-success-lighter: var(--color-green-alpha-10);
|
|
191156
|
+
|
|
191157
|
+
--color-away-dark: var(--color-yellow-400);
|
|
191158
|
+
--color-away-base: var(--color-yellow-600);
|
|
191159
|
+
--color-away-light: var(--color-yellow-alpha-24);
|
|
191160
|
+
--color-away-lighter: var(--color-yellow-alpha-16);
|
|
191161
|
+
|
|
191162
|
+
--color-feature-dark: var(--color-purple-400);
|
|
191163
|
+
--color-feature-base: var(--color-purple-500);
|
|
191164
|
+
--color-feature-light: var(--color-purple-alpha-24);
|
|
191165
|
+
--color-feature-lighter: var(--color-purple-alpha-16);
|
|
191166
|
+
|
|
191167
|
+
--color-verified-dark: var(--color-sky-400);
|
|
191168
|
+
--color-verified-base: var(--color-sky-600);
|
|
191169
|
+
--color-verified-light: var(--color-sky-alpha-24);
|
|
191170
|
+
--color-verified-lighter: var(--color-sky-alpha-16);
|
|
191171
|
+
|
|
191172
|
+
--color-highlighted-dark: var(--color-pink-400);
|
|
191173
|
+
--color-highlighted-base: var(--color-pink-600);
|
|
191174
|
+
--color-highlighted-light: var(--color-pink-alpha-24);
|
|
191175
|
+
--color-highlighted-lighter: var(--color-pink-alpha-16);
|
|
191176
|
+
|
|
191177
|
+
--color-stable-dark: var(--color-teal-400);
|
|
191178
|
+
--color-stable-base: var(--color-teal-600);
|
|
191179
|
+
--color-stable-light: var(--color-teal-alpha-24);
|
|
191180
|
+
--color-stable-lighter: var(--color-teal-alpha-16);
|
|
191181
|
+
|
|
191182
|
+
--color-primary-base: var(--color-purple-400);
|
|
191183
|
+
--color-primary-light: var(--color-purple-alpha-16);
|
|
191184
|
+
--color-primary-lighter: var(--color-purple-alpha-10);
|
|
191185
|
+
|
|
191186
|
+
--color-overlay-gray: #3333338f;
|
|
191187
|
+
--color-overlay-slate: #2b303b8f;
|
|
191188
|
+
--color-overlay: var(--color-overlay-gray);
|
|
191189
|
+
|
|
191190
|
+
--color-social-apple: #fff;
|
|
191191
|
+
--color-social-twitter: #fff;
|
|
191192
|
+
--color-social-github: #fff;
|
|
191193
|
+
--color-social-notion: #fff;
|
|
191194
|
+
--color-social-tidal: #fff;
|
|
191195
|
+
--color-social-amazon: #fff;
|
|
191196
|
+
--color-social-zendesk: #fff;
|
|
190056
191197
|
}
|
|
190057
191198
|
|
|
190058
|
-
|
|
190059
|
-
|
|
191199
|
+
@property --radix-accordion-content-height {
|
|
191200
|
+
syntax: "<length>";
|
|
191201
|
+
inherits: false;
|
|
191202
|
+
initial-value: 0px;
|
|
191203
|
+
}
|
|
191204
|
+
|
|
191205
|
+
@keyframes accordion-down {
|
|
191206
|
+
from {
|
|
191207
|
+
height: 0;
|
|
191208
|
+
opacity: 0;
|
|
191209
|
+
}
|
|
191210
|
+
to {
|
|
191211
|
+
height: var(--radix-accordion-content-height);
|
|
191212
|
+
opacity: 1;
|
|
190060
191213
|
}
|
|
191214
|
+
}
|
|
190061
191215
|
|
|
190062
|
-
|
|
190063
|
-
|
|
190064
|
-
|
|
191216
|
+
@keyframes accordion-up {
|
|
191217
|
+
from {
|
|
191218
|
+
height: var(--radix-accordion-content-height);
|
|
191219
|
+
opacity: 1;
|
|
191220
|
+
}
|
|
191221
|
+
to {
|
|
191222
|
+
height: 0;
|
|
191223
|
+
opacity: 0;
|
|
191224
|
+
}
|
|
191225
|
+
}
|
|
191226
|
+
|
|
191227
|
+
@keyframes shimmer {
|
|
191228
|
+
0% {
|
|
191229
|
+
background-position: 200% 0;
|
|
191230
|
+
}
|
|
191231
|
+
100% {
|
|
191232
|
+
background-position: -200% 0;
|
|
190065
191233
|
}
|
|
190066
191234
|
}
|
|
191235
|
+
|
|
191236
|
+
body {
|
|
191237
|
+
background: var(--color-bg-white-0);
|
|
191238
|
+
color: var(--color-text-strong-950);
|
|
191239
|
+
font-family: Inter, Arial, Helvetica, sans-serif;
|
|
191240
|
+
margin: 0;
|
|
191241
|
+
padding: 0;
|
|
191242
|
+
}
|
|
191243
|
+
`;
|
|
191244
|
+
|
|
191245
|
+
// src/commands/init.ts
|
|
191246
|
+
var HAPPLY_THEME_FILE = "happly-theme.css";
|
|
191247
|
+
var UTILS_TEMPLATE = `import { type ClassValue, clsx } from "clsx";
|
|
191248
|
+
import { twMerge } from "tailwind-merge";
|
|
191249
|
+
|
|
191250
|
+
export function cn(...inputs: ClassValue[]) {
|
|
191251
|
+
return twMerge(clsx(inputs));
|
|
191252
|
+
}
|
|
191253
|
+
`;
|
|
191254
|
+
var UTILS_JS_TEMPLATE = `import { clsx } from "clsx";
|
|
191255
|
+
import { twMerge } from "tailwind-merge";
|
|
191256
|
+
|
|
191257
|
+
export function cn(...inputs) {
|
|
191258
|
+
return twMerge(clsx(inputs));
|
|
191259
|
+
}
|
|
190067
191260
|
`;
|
|
190068
191261
|
async function init(options) {
|
|
190069
191262
|
const cwd = options.cwd || process.cwd();
|
|
@@ -190104,30 +191297,8 @@ async function init(options) {
|
|
|
190104
191297
|
let config;
|
|
190105
191298
|
if (useDefaults) {
|
|
190106
191299
|
config = createDefaultConfig(projectInfo);
|
|
190107
|
-
if (options.baseColor && BASE_COLORS.includes(options.baseColor)) {
|
|
190108
|
-
config.tailwind.baseColor = options.baseColor;
|
|
190109
|
-
}
|
|
190110
|
-
if (options.cssVariables === false) {
|
|
190111
|
-
config.tailwind.cssVariables = false;
|
|
190112
|
-
}
|
|
190113
191300
|
} else {
|
|
190114
191301
|
const responses = await import_prompts.default([
|
|
190115
|
-
{
|
|
190116
|
-
type: "select",
|
|
190117
|
-
name: "baseColor",
|
|
190118
|
-
message: "Which base color would you like to use?",
|
|
190119
|
-
choices: BASE_COLORS.map((color) => ({
|
|
190120
|
-
title: color.charAt(0).toUpperCase() + color.slice(1),
|
|
190121
|
-
value: color
|
|
190122
|
-
})),
|
|
190123
|
-
initial: 0
|
|
190124
|
-
},
|
|
190125
|
-
{
|
|
190126
|
-
type: "confirm",
|
|
190127
|
-
name: "cssVariables",
|
|
190128
|
-
message: "Would you like to use CSS variables for colors?",
|
|
190129
|
-
initial: true
|
|
190130
|
-
},
|
|
190131
191302
|
{
|
|
190132
191303
|
type: "text",
|
|
190133
191304
|
name: "componentsPath",
|
|
@@ -190141,7 +191312,7 @@ async function init(options) {
|
|
|
190141
191312
|
initial: projectInfo.isSrcDir ? "src/lib/happly-ui/happly-ui-utils" : "lib/happly-ui/happly-ui-utils"
|
|
190142
191313
|
}
|
|
190143
191314
|
]);
|
|
190144
|
-
if (
|
|
191315
|
+
if (responses.componentsPath === undefined) {
|
|
190145
191316
|
logger.error("Initialization cancelled.");
|
|
190146
191317
|
process.exit(1);
|
|
190147
191318
|
}
|
|
@@ -190158,29 +191329,60 @@ async function init(options) {
|
|
|
190158
191329
|
await writeComponentFile(cwd, `${utilsPath}${utilsExt}`, utilsContent);
|
|
190159
191330
|
writeSpinner.text = `Created ${utilsPath}${utilsExt}`;
|
|
190160
191331
|
const cssPath = config.tailwind.css;
|
|
190161
|
-
const
|
|
190162
|
-
const
|
|
190163
|
-
|
|
190164
|
-
|
|
190165
|
-
|
|
191332
|
+
const cssDir = path4.dirname(path4.join(cwd, cssPath));
|
|
191333
|
+
const themePath = path4.join(cssDir, HAPPLY_THEME_FILE);
|
|
191334
|
+
const themeContent = projectInfo.tailwindVersion === 4 ? HAPPLY_THEME_V4 : HAPPLY_THEME_V3;
|
|
191335
|
+
if (existsSync4(themePath) && !useDefaults) {
|
|
191336
|
+
const { overwriteTheme } = await import_prompts.default({
|
|
191337
|
+
type: "confirm",
|
|
191338
|
+
name: "overwriteTheme",
|
|
191339
|
+
message: `${HAPPLY_THEME_FILE} already exists. Overwrite?`,
|
|
191340
|
+
initial: true
|
|
191341
|
+
});
|
|
191342
|
+
if (overwriteTheme) {
|
|
191343
|
+
await writeFile3(themePath, themeContent, "utf-8");
|
|
191344
|
+
writeSpinner.text = `Updated ${HAPPLY_THEME_FILE}`;
|
|
191345
|
+
}
|
|
190166
191346
|
} else {
|
|
190167
|
-
|
|
190168
|
-
|
|
190169
|
-
|
|
190170
|
-
|
|
190171
|
-
|
|
190172
|
-
|
|
190173
|
-
|
|
190174
|
-
|
|
190175
|
-
|
|
190176
|
-
|
|
191347
|
+
await writeFile3(themePath, themeContent, "utf-8");
|
|
191348
|
+
writeSpinner.text = `Created ${HAPPLY_THEME_FILE}`;
|
|
191349
|
+
}
|
|
191350
|
+
const fullCssPath = path4.join(cwd, cssPath);
|
|
191351
|
+
if (existsSync4(fullCssPath)) {
|
|
191352
|
+
let existingCss = await readFile4(fullCssPath, "utf-8");
|
|
191353
|
+
if (existingCss.includes("--background:") || existingCss.includes("--foreground:")) {
|
|
191354
|
+
logger.info("Existing shadcn design tokens detected. These will continue to work alongside HapplyUI tokens.");
|
|
191355
|
+
}
|
|
191356
|
+
if (existingCss.includes("--color-neutral-") || existingCss.includes("--color-primary-")) {
|
|
191357
|
+
logger.info("Existing design system tokens detected. Your tokens will take precedence over happly-theme.css defaults.");
|
|
191358
|
+
}
|
|
191359
|
+
if (!existingCss.includes(HAPPLY_THEME_FILE)) {
|
|
191360
|
+
const importStatement = `@import "./${HAPPLY_THEME_FILE}";
|
|
191361
|
+
`;
|
|
191362
|
+
if (projectInfo.tailwindVersion === 4) {
|
|
191363
|
+
if (existingCss.includes('@import "tailwindcss"')) {
|
|
191364
|
+
existingCss = existingCss.replace('@import "tailwindcss";', `@import "tailwindcss";
|
|
191365
|
+
${importStatement}`);
|
|
190177
191366
|
} else {
|
|
190178
|
-
|
|
190179
|
-
` + existingCss, "utf-8");
|
|
191367
|
+
existingCss = importStatement + existingCss;
|
|
190180
191368
|
}
|
|
191369
|
+
} else {
|
|
191370
|
+
existingCss = importStatement + existingCss;
|
|
190181
191371
|
}
|
|
190182
|
-
|
|
191372
|
+
await writeFile3(fullCssPath, existingCss, "utf-8");
|
|
191373
|
+
writeSpinner.text = `Updated ${cssPath} with happly-theme import`;
|
|
190183
191374
|
}
|
|
191375
|
+
} else {
|
|
191376
|
+
const cssContent = projectInfo.tailwindVersion === 4 ? `@import "tailwindcss";
|
|
191377
|
+
@import "./${HAPPLY_THEME_FILE}";
|
|
191378
|
+
` : `@import "./${HAPPLY_THEME_FILE}";
|
|
191379
|
+
|
|
191380
|
+
@tailwind base;
|
|
191381
|
+
@tailwind components;
|
|
191382
|
+
@tailwind utilities;
|
|
191383
|
+
`;
|
|
191384
|
+
await writeComponentFile(cwd, cssPath, cssContent);
|
|
191385
|
+
writeSpinner.text = `Created ${cssPath}`;
|
|
190184
191386
|
}
|
|
190185
191387
|
writeSpinner.text = "Applying Happly UI design tokens...";
|
|
190186
191388
|
await updateTailwindConfig(cwd, config, projectInfo.tailwindVersion);
|
|
@@ -190195,13 +191397,10 @@ async function init(options) {
|
|
|
190195
191397
|
await installDependencies(cwd, deps, {
|
|
190196
191398
|
packageManager: projectInfo.packageManager
|
|
190197
191399
|
});
|
|
190198
|
-
await installDependencies(cwd, ["class-variance-authority"], {
|
|
190199
|
-
packageManager: projectInfo.packageManager
|
|
190200
|
-
});
|
|
190201
191400
|
installSpinner.succeed("Dependencies installed");
|
|
190202
191401
|
} catch {
|
|
190203
191402
|
installSpinner.fail("Failed to install dependencies");
|
|
190204
|
-
logger.warn("Please install manually: clsx tailwind-merge
|
|
191403
|
+
logger.warn("Please install manually: clsx tailwind-merge");
|
|
190205
191404
|
}
|
|
190206
191405
|
logger.break();
|
|
190207
191406
|
logger.success("Project initialized successfully!");
|
|
@@ -190217,9 +191416,7 @@ function createDefaultConfig(projectInfo) {
|
|
|
190217
191416
|
srcDir: isSrcDir,
|
|
190218
191417
|
tailwind: {
|
|
190219
191418
|
config: projectInfo.tailwindConfig || "tailwind.config.ts",
|
|
190220
|
-
css: projectInfo.tailwindCss || (isSrcDir ? "src/index.css" : "index.css")
|
|
190221
|
-
baseColor: "slate",
|
|
190222
|
-
cssVariables: true
|
|
191419
|
+
css: projectInfo.tailwindCss || (isSrcDir ? "src/index.css" : "index.css")
|
|
190223
191420
|
},
|
|
190224
191421
|
tsx: projectInfo.isTypeScript,
|
|
190225
191422
|
aliases: {
|
|
@@ -190237,9 +191434,7 @@ function createConfig(projectInfo, responses) {
|
|
|
190237
191434
|
srcDir: projectInfo.isSrcDir,
|
|
190238
191435
|
tailwind: {
|
|
190239
191436
|
config: projectInfo.tailwindConfig || "tailwind.config.ts",
|
|
190240
|
-
css: projectInfo.tailwindCss || (projectInfo.isSrcDir ? "src/index.css" : "index.css")
|
|
190241
|
-
baseColor: responses.baseColor,
|
|
190242
|
-
cssVariables: responses.cssVariables
|
|
191437
|
+
css: projectInfo.tailwindCss || (projectInfo.isSrcDir ? "src/index.css" : "index.css")
|
|
190243
191438
|
},
|
|
190244
191439
|
tsx: projectInfo.isTypeScript,
|
|
190245
191440
|
aliases: {
|
|
@@ -190254,6 +191449,8 @@ function createConfig(projectInfo, responses) {
|
|
|
190254
191449
|
|
|
190255
191450
|
// src/commands/add.ts
|
|
190256
191451
|
var import_prompts2 = __toESM(require_prompts3(), 1);
|
|
191452
|
+
import { readFile as readFile6, writeFile as writeFile4 } from "fs/promises";
|
|
191453
|
+
import { existsSync as existsSync6 } from "fs";
|
|
190257
191454
|
import path6 from "path";
|
|
190258
191455
|
init_config();
|
|
190259
191456
|
init_registry();
|
|
@@ -190261,6 +191458,9 @@ init_registry();
|
|
|
190261
191458
|
// src/utils/transform.ts
|
|
190262
191459
|
function transformComponent(file, config) {
|
|
190263
191460
|
let content = file.content;
|
|
191461
|
+
if (file.type === "registry:style" || file.path.endsWith(".css")) {
|
|
191462
|
+
return content;
|
|
191463
|
+
}
|
|
190264
191464
|
content = transformImports(content, config);
|
|
190265
191465
|
if (!config.tsx) {
|
|
190266
191466
|
content = transformToJs(content);
|
|
@@ -190361,8 +191561,11 @@ async function add(components, options) {
|
|
|
190361
191561
|
}
|
|
190362
191562
|
process.exit(1);
|
|
190363
191563
|
}
|
|
191564
|
+
const requestedNames = new Set(components);
|
|
190364
191565
|
const existingFiles = [];
|
|
191566
|
+
const skippableDeps = new Set;
|
|
190365
191567
|
for (const item of items) {
|
|
191568
|
+
const isExplicit = requestedNames.has(item.name);
|
|
190366
191569
|
for (const file of item.files) {
|
|
190367
191570
|
const fileType = file.type || item.type;
|
|
190368
191571
|
let fileName = path6.basename(file.path);
|
|
@@ -190373,7 +191576,11 @@ async function add(components, options) {
|
|
|
190373
191576
|
}
|
|
190374
191577
|
const targetPath = getComponentPath(item.name, fileType, config, fileName);
|
|
190375
191578
|
if (componentExists(cwd, targetPath)) {
|
|
190376
|
-
|
|
191579
|
+
if (isExplicit) {
|
|
191580
|
+
existingFiles.push(targetPath);
|
|
191581
|
+
} else {
|
|
191582
|
+
skippableDeps.add(targetPath);
|
|
191583
|
+
}
|
|
190377
191584
|
}
|
|
190378
191585
|
}
|
|
190379
191586
|
}
|
|
@@ -190405,6 +191612,8 @@ async function add(components, options) {
|
|
|
190405
191612
|
}
|
|
190406
191613
|
}
|
|
190407
191614
|
const targetPath = getComponentPath(item.name, fileType, config, fileName);
|
|
191615
|
+
if (skippableDeps.has(targetPath))
|
|
191616
|
+
continue;
|
|
190408
191617
|
const transformedContent = transformComponent(file, config);
|
|
190409
191618
|
await writeComponentFile(cwd, targetPath, transformedContent);
|
|
190410
191619
|
writtenFiles.push(targetPath);
|
|
@@ -190415,6 +191624,10 @@ async function add(components, options) {
|
|
|
190415
191624
|
writeSpinner.fail("Failed to install components");
|
|
190416
191625
|
throw error;
|
|
190417
191626
|
}
|
|
191627
|
+
const styleFiles = writtenFiles.filter((f) => f.endsWith(".css"));
|
|
191628
|
+
if (styleFiles.length > 0) {
|
|
191629
|
+
await injectStyleImports(cwd, config, styleFiles);
|
|
191630
|
+
}
|
|
190418
191631
|
const { dependencies, devDependencies } = collectDependencies(items);
|
|
190419
191632
|
if (dependencies.length > 0) {
|
|
190420
191633
|
const depsSpinner = ora("Installing dependencies...").start();
|
|
@@ -190469,6 +191682,43 @@ async function add(components, options) {
|
|
|
190469
191682
|
function pascalCase(str) {
|
|
190470
191683
|
return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
|
|
190471
191684
|
}
|
|
191685
|
+
async function injectStyleImports(cwd, config, styleFiles) {
|
|
191686
|
+
const cssPath = path6.join(cwd, config.tailwind.css);
|
|
191687
|
+
if (!existsSync6(cssPath))
|
|
191688
|
+
return;
|
|
191689
|
+
let css = await readFile6(cssPath, "utf-8");
|
|
191690
|
+
let added = false;
|
|
191691
|
+
for (const styleFile of styleFiles) {
|
|
191692
|
+
const cssDir = path6.dirname(cssPath);
|
|
191693
|
+
let rel = path6.relative(cssDir, path6.join(cwd, styleFile));
|
|
191694
|
+
rel = rel.split(path6.sep).join("/");
|
|
191695
|
+
if (!rel.startsWith("."))
|
|
191696
|
+
rel = "./" + rel;
|
|
191697
|
+
if (css.includes(rel))
|
|
191698
|
+
continue;
|
|
191699
|
+
const importStatement = `@import '${rel}';`;
|
|
191700
|
+
const lines = css.split(`
|
|
191701
|
+
`);
|
|
191702
|
+
let lastImportIndex = -1;
|
|
191703
|
+
for (let i = 0;i < lines.length; i++) {
|
|
191704
|
+
if (lines[i].trimStart().startsWith("@import ")) {
|
|
191705
|
+
lastImportIndex = i;
|
|
191706
|
+
}
|
|
191707
|
+
}
|
|
191708
|
+
if (lastImportIndex >= 0) {
|
|
191709
|
+
lines.splice(lastImportIndex + 1, 0, importStatement);
|
|
191710
|
+
} else {
|
|
191711
|
+
lines.unshift(importStatement);
|
|
191712
|
+
}
|
|
191713
|
+
css = lines.join(`
|
|
191714
|
+
`);
|
|
191715
|
+
added = true;
|
|
191716
|
+
}
|
|
191717
|
+
if (added) {
|
|
191718
|
+
await writeFile4(cssPath, css, "utf-8");
|
|
191719
|
+
logger.info(`Added style import${styleFiles.length > 1 ? "s" : ""} to ${config.tailwind.css}`);
|
|
191720
|
+
}
|
|
191721
|
+
}
|
|
190472
191722
|
|
|
190473
191723
|
// src/index.ts
|
|
190474
191724
|
var import_picocolors2 = __toESM(require_picocolors(), 1);
|
|
@@ -190476,7 +191726,7 @@ var require2 = createRequire2(import.meta.url);
|
|
|
190476
191726
|
var { version } = require2("../package.json");
|
|
190477
191727
|
var program2 = new Command;
|
|
190478
191728
|
program2.name("happlyui").description("Add HapplyUI components to your project").version(version);
|
|
190479
|
-
program2.command("init").description("Initialize your project with HapplyUI").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-y, --yes", "Skip prompts and use defaults").option("--defaults", "Use default configuration").
|
|
191729
|
+
program2.command("init").description("Initialize your project with HapplyUI").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-y, --yes", "Skip prompts and use defaults").option("--defaults", "Use default configuration").action(init);
|
|
190480
191730
|
program2.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-c, --cwd <path>", "Working directory", process.cwd()).option("-y, --yes", "Skip prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Add all available components").option("-p, --path <path>", "Custom path for components").action(add);
|
|
190481
191731
|
program2.command("list").description("List all available components").option("-c, --cwd <path>", "Working directory", process.cwd()).action(async (options) => {
|
|
190482
191732
|
const { getAvailableComponents: getAvailableComponents2 } = await Promise.resolve().then(() => (init_registry(), exports_registry));
|