wip: css and ui packages
This commit is contained in:
Adam
@@ -0,0 +1 @@
|
||||
../../CLAUDE.md
|
||||
@@ -0,0 +1,34 @@
|
||||
# dependencies (bun install)
|
||||
node_modules
|
||||
|
||||
# output
|
||||
out
|
||||
dist
|
||||
*.tgz
|
||||
|
||||
# code coverage
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# logs
|
||||
logs
|
||||
_.log
|
||||
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# caches
|
||||
.eslintcache
|
||||
.cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# IntelliJ based IDEs
|
||||
.idea
|
||||
|
||||
# Finder (MacOS) folder config
|
||||
.DS_Store
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "@opencode-ai/css",
|
||||
"version": "0.15.0",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./src/index.css",
|
||||
"./*": "./src/*"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "bun run build.ts",
|
||||
"dev": "bun run dev.ts"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,393 @@
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Remove default margins and padding
|
||||
3. Reset all borders.
|
||||
*/
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
box-sizing: border-box; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
padding: 0; /* 2 */
|
||||
border: 0 solid; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
7. Disable tap highlights on iOS.
|
||||
*/
|
||||
|
||||
html,
|
||||
:host {
|
||||
line-height: 1.5; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
tab-size: 4; /* 3 */
|
||||
font-family: --theme(
|
||||
--default-font-family,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji"
|
||||
); /* 4 */
|
||||
font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
|
||||
font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
|
||||
-webkit-tap-highlight-color: transparent; /* 7 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Reset the default border style to a 1px solid border.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
border-top-width: 1px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: --theme(
|
||||
--default-mono-font-family,
|
||||
ui-monospace,
|
||||
SFMono-Regular,
|
||||
Menlo,
|
||||
Monaco,
|
||||
Consolas,
|
||||
"Liberation Mono",
|
||||
"Courier New",
|
||||
monospace
|
||||
); /* 1 */
|
||||
font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
|
||||
font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
|
||||
font-size: 1em; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
border-collapse: collapse; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Make lists unstyled by default.
|
||||
*/
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block; /* 1 */
|
||||
vertical-align: middle; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Inherit font styles in all browsers.
|
||||
2. Remove border radius in all browsers.
|
||||
3. Remove background color in all browsers.
|
||||
4. Ensure consistent opacity for disabled states in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
optgroup,
|
||||
textarea,
|
||||
::file-selector-button {
|
||||
font: inherit; /* 1 */
|
||||
font-feature-settings: inherit; /* 1 */
|
||||
font-variation-settings: inherit; /* 1 */
|
||||
letter-spacing: inherit; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
border-radius: 0; /* 2 */
|
||||
background-color: transparent; /* 3 */
|
||||
opacity: 1; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Restore default font weight.
|
||||
*/
|
||||
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
Restore indentation.
|
||||
*/
|
||||
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
Restore space after button.
|
||||
*/
|
||||
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
*/
|
||||
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
|
||||
crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
|
||||
*/
|
||||
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
|
||||
/* Safari 17+ */ {
|
||||
::placeholder {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Ensure date/time inputs have the same height when empty in iOS Safari.
|
||||
2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
|
||||
*/
|
||||
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh; /* 1 */
|
||||
text-align: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
|
||||
*/
|
||||
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
|
||||
*/
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit,
|
||||
::-webkit-datetime-edit-year-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-minute-field,
|
||||
::-webkit-datetime-edit-second-field,
|
||||
::-webkit-datetime-edit-millisecond-field,
|
||||
::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
|
||||
*/
|
||||
|
||||
::-webkit-calendar-picker-indicator {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the inability to style the border radius in iOS Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input:where([type="button"], [type="reset"], [type="submit"]),
|
||||
::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Make elements with the HTML hidden attribute stay hidden by default.
|
||||
*/
|
||||
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -0,0 +1,496 @@
|
||||
:root {
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--grey-dark-1: #ffffff;
|
||||
--grey-dark-2: #ffffff;
|
||||
--grey-dark-3: #ffffff;
|
||||
--grey-dark-4: #ffffff;
|
||||
--grey-dark-5: #ffffff;
|
||||
--grey-dark-6: #ffffff;
|
||||
--grey-dark-7: #ffffff;
|
||||
--grey-dark-8: #ffffff;
|
||||
--grey-dark-9: #ffffff;
|
||||
--grey-dark-10: #ffffff;
|
||||
--grey-dark-11: #ffffff;
|
||||
--grey-dark-12: #ffffff;
|
||||
--grey-light-1: #ffffff;
|
||||
--grey-dark-alpha-1: #ffffff;
|
||||
--grey-dark-alpha-2: #ffffff;
|
||||
--grey-dark-alpha-3: #ffffff;
|
||||
--grey-dark-alpha-4: #ffffff;
|
||||
--grey-dark-alpha-5: #ffffff;
|
||||
--grey-dark-alpha-6: #ffffff;
|
||||
--grey-dark-alpha-7: #ffffff;
|
||||
--grey-dark-alpha-8: #ffffff;
|
||||
--grey-dark-alpha-9: #ffffff;
|
||||
--grey-dark-alpha-10: #ffffff;
|
||||
--grey-dark-alpha-11: #ffffff;
|
||||
--grey-dark-alpha-12: #ffffff;
|
||||
--smoke-dark-1: #131010;
|
||||
--grey-light-2: #ffffff;
|
||||
--grey-light-3: #ffffff;
|
||||
--grey-light-4: #ffffff;
|
||||
--grey-light-5: #ffffff;
|
||||
--grey-light-6: #ffffff;
|
||||
--grey-light-7: #ffffff;
|
||||
--grey-light-8: #ffffff;
|
||||
--grey-light-9: #ffffff;
|
||||
--grey-light-10: #ffffff;
|
||||
--grey-light-11: #ffffff;
|
||||
--grey-light-12: #ffffff;
|
||||
--smoke-dark-2: #1b1818;
|
||||
--smoke-dark-3: #252121;
|
||||
--smoke-dark-4: #2d2828;
|
||||
--smoke-dark-5: #343030;
|
||||
--smoke-dark-6: #3e3939;
|
||||
--smoke-dark-7: #4b4646;
|
||||
--smoke-dark-8: #645f5f;
|
||||
--smoke-dark-9: #716c6b;
|
||||
--smoke-dark-10: #7f7979;
|
||||
--smoke-dark-11: #b7b1b1;
|
||||
--smoke-dark-12: #f1ecec;
|
||||
--smoke-light-1: #fdfcfc;
|
||||
--smoke-light-2: #f9f8f8;
|
||||
--smoke-light-3: #f1f0f0;
|
||||
--smoke-light-4: #e9e8e8;
|
||||
--smoke-light-5: #e2e0e0;
|
||||
--smoke-light-6: #dad9d9;
|
||||
--smoke-light-7: #cfcecd;
|
||||
--smoke-light-8: #bcbbbb;
|
||||
--smoke-light-9: #8e8b8b;
|
||||
--smoke-light-10: #848181;
|
||||
--smoke-light-11: #656363;
|
||||
--smoke-light-12: #211e1e;
|
||||
--smoke-dark-alpha-1: #bb000003;
|
||||
--smoke-dark-alpha-2: #f9b4b40b;
|
||||
--smoke-dark-alpha-3: #f9caca16;
|
||||
--smoke-dark-alpha-4: #ffd5d51e;
|
||||
--smoke-dark-alpha-5: #fce2e226;
|
||||
--smoke-dark-alpha-6: #fce2e231;
|
||||
--smoke-dark-alpha-7: #fce8e83f;
|
||||
--smoke-dark-alpha-8: #fff1f159;
|
||||
--smoke-dark-alpha-9: #fff3f067;
|
||||
--smoke-dark-alpha-10: #fff2f276;
|
||||
--smoke-dark-alpha-11: #fff7f7b2;
|
||||
--smoke-dark-alpha-12: #fffafaf0;
|
||||
--smoke-light-alpha-1: #55000003;
|
||||
--smoke-light-alpha-2: #25000007;
|
||||
--smoke-light-alpha-3: #1100000f;
|
||||
--smoke-light-alpha-4: #0c000017;
|
||||
--smoke-light-alpha-5: #1100001f;
|
||||
--smoke-light-alpha-6: #07000026;
|
||||
--smoke-light-alpha-7: #0b060032;
|
||||
--smoke-light-alpha-8: #04000044;
|
||||
--smoke-light-alpha-9: #07000074;
|
||||
--smoke-light-alpha-10: #0400009c;
|
||||
--smoke-light-alpha-11: #0700007e;
|
||||
--smoke-light-alpha-12: #020000df;
|
||||
--yuzu-dark-1: #11120c;
|
||||
--yuzu-light-1: #fdfdfb;
|
||||
--yuzu-light-2: #fbfceb;
|
||||
--yuzu-light-3: #f8fac5;
|
||||
--yuzu-light-4: #f2f4a5;
|
||||
--yuzu-light-5: #e9eb9a;
|
||||
--yuzu-light-6: #dcde8e;
|
||||
--yuzu-light-7: #cccd7e;
|
||||
--yuzu-light-8: #b6b768;
|
||||
--yuzu-light-9: #dcde8d;
|
||||
--yuzu-light-10: #d2d384;
|
||||
--yuzu-light-11: #7c7c2c;
|
||||
--yuzu-light-12: #3d3d23;
|
||||
--yuzu-dark-2: #181810;
|
||||
--yuzu-dark-3: #262614;
|
||||
--yuzu-dark-4: #313115;
|
||||
--yuzu-dark-5: #3d3d18;
|
||||
--yuzu-dark-6: #4a4a21;
|
||||
--yuzu-dark-7: #5a5b2c;
|
||||
--yuzu-dark-8: #6f6f36;
|
||||
--yuzu-dark-9: #fdffca;
|
||||
--yuzu-dark-10: #f4f6c1;
|
||||
--yuzu-dark-11: #dbdda0;
|
||||
--yuzu-dark-12: #eff1bd;
|
||||
--yuzu-dark-alpha-1: #11910002;
|
||||
--yuzu-dark-alpha-2: #f1f10008;
|
||||
--yuzu-dark-alpha-3: #fafa3317;
|
||||
--yuzu-dark-alpha-4: #fbfb2f23;
|
||||
--yuzu-dark-alpha-5: #fbfb3730;
|
||||
--yuzu-dark-alpha-6: #fcfc533e;
|
||||
--yuzu-dark-alpha-7: #fafd6750;
|
||||
--yuzu-dark-alpha-8: #ffff6f65;
|
||||
--yuzu-dark-alpha-9: #fdffca;
|
||||
--yuzu-dark-alpha-10: #fcfec7f6;
|
||||
--yuzu-dark-alpha-11: #fdffb8db;
|
||||
--yuzu-dark-alpha-12: #fdffc8f0;
|
||||
--yuzu-light-alpha-1: #80800004;
|
||||
--yuzu-light-alpha-2: #ccd90014;
|
||||
--yuzu-light-alpha-3: #e1ea003a;
|
||||
--yuzu-light-alpha-4: #dbe0015a;
|
||||
--yuzu-light-alpha-5: #c8cd0065;
|
||||
--yuzu-light-alpha-6: #b1b50071;
|
||||
--yuzu-light-alpha-7: #9b9d0081;
|
||||
--yuzu-light-alpha-8: #84860097;
|
||||
--yuzu-light-alpha-9: #b1b60072;
|
||||
--yuzu-light-alpha-10: #a2a4017b;
|
||||
--yuzu-light-alpha-11: #616100d3;
|
||||
--yuzu-light-alpha-12: #1e1e00dc;
|
||||
--cobalt-dark-1: #091120;
|
||||
--cobalt-dark-2: #0d172b;
|
||||
--cobalt-dark-3: #0c2255;
|
||||
--cobalt-dark-4: #0c2a74;
|
||||
--cobalt-dark-5: #113489;
|
||||
--cobalt-dark-6: #18409b;
|
||||
--cobalt-dark-7: #204cb1;
|
||||
--cobalt-dark-8: #2558d0;
|
||||
--cobalt-dark-9: #034cff;
|
||||
--cobalt-dark-10: #0038ee;
|
||||
--cobalt-dark-11: #89b5ff;
|
||||
--cobalt-dark-12: #cde2ff;
|
||||
--cobalt-light-1: #fcfdff;
|
||||
--cobalt-light-2: #f5faff;
|
||||
--cobalt-light-3: #eaf2ff;
|
||||
--cobalt-light-4: #daeaff;
|
||||
--cobalt-light-5: #c8e0ff;
|
||||
--cobalt-light-6: #b4d2ff;
|
||||
--cobalt-light-7: #98bfff;
|
||||
--cobalt-dark-alpha-1: #0011f211;
|
||||
--cobalt-dark-alpha-2: #0048fe1c;
|
||||
--cobalt-dark-alpha-3: #004dff49;
|
||||
--cobalt-dark-alpha-4: #064dfd6b;
|
||||
--cobalt-dark-alpha-5: #1157ff81;
|
||||
--cobalt-dark-alpha-6: #1e62ff94;
|
||||
--cobalt-dark-alpha-7: #2768feac;
|
||||
--cobalt-dark-alpha-8: #2a6affcd;
|
||||
--cobalt-dark-alpha-9: #034cff;
|
||||
--cobalt-dark-alpha-10: #003bffed;
|
||||
--cobalt-dark-alpha-11: #89b5ff;
|
||||
--cobalt-dark-alpha-12: #cde2ff;
|
||||
--cobalt-light-8: #73a4ff;
|
||||
--cobalt-light-9: #034cff;
|
||||
--cobalt-light-10: #0443de;
|
||||
--cobalt-light-11: #1251ec;
|
||||
--cobalt-light-12: #0f2b6c;
|
||||
--cobalt-light-alpha-1: #0055ff03;
|
||||
--cobalt-light-alpha-2: #0080ff0a;
|
||||
--cobalt-light-alpha-3: #0062ff15;
|
||||
--cobalt-light-alpha-4: #006fff25;
|
||||
--cobalt-light-alpha-5: #0070ff37;
|
||||
--cobalt-light-alpha-6: #0167ff4b;
|
||||
--cobalt-light-alpha-7: #0061ff67;
|
||||
--cobalt-light-alpha-8: #005aff8c;
|
||||
--cobalt-light-alpha-9: #004afffc;
|
||||
--cobalt-light-alpha-10: #0040ddfb;
|
||||
--cobalt-light-alpha-11: #0044ebed;
|
||||
--cobalt-light-alpha-12: #001e63f0;
|
||||
--apple-dark-1: #0c140b;
|
||||
--apple-light-1: #fafefa;
|
||||
--apple-light-2: #f4fcf3;
|
||||
--apple-light-3: #e1fade;
|
||||
--apple-light-4: #cef6c9;
|
||||
--apple-light-5: #b9efb3;
|
||||
--apple-light-6: #9fe598;
|
||||
--apple-light-7: #7dd676;
|
||||
--apple-light-8: #43c23b;
|
||||
--apple-light-9: #12c905;
|
||||
--apple-light-10: #00bd00;
|
||||
--apple-light-11: #008600;
|
||||
--apple-light-12: #184115;
|
||||
--apple-dark-2: #121b11;
|
||||
--apple-dark-3: #152d13;
|
||||
--apple-dark-4: #123d0f;
|
||||
--apple-dark-5: #174b14;
|
||||
--apple-dark-6: #1d5b19;
|
||||
--apple-dark-7: #226c1e;
|
||||
--apple-dark-8: #267f20;
|
||||
--apple-dark-9: #12c905;
|
||||
--apple-dark-10: #17bb0d;
|
||||
--apple-dark-11: #37db2e;
|
||||
--apple-dark-12: #aff7a8;
|
||||
--apple-dark-alpha-1: #00d10004;
|
||||
--apple-dark-alpha-2: #29f9120b;
|
||||
--apple-dark-alpha-3: #33ff221e;
|
||||
--apple-dark-alpha-4: #17fb0730;
|
||||
--apple-dark-alpha-5: #2afc1e3f;
|
||||
--apple-dark-alpha-6: #37fd2b50;
|
||||
--apple-dark-alpha-7: #3efe3362;
|
||||
--apple-dark-alpha-8: #3fff3276;
|
||||
--apple-dark-alpha-9: #12fe02c6;
|
||||
--apple-dark-alpha-10: #19fe0cb7;
|
||||
--apple-dark-alpha-11: #3dfe33d9;
|
||||
--apple-dark-alpha-12: #b4feacf7;
|
||||
--apple-light-alpha-1: #00cc0005;
|
||||
--apple-light-alpha-2: #16c0000c;
|
||||
--apple-light-alpha-3: #18d90021;
|
||||
--apple-light-alpha-4: #18d50036;
|
||||
--apple-light-alpha-5: #15ca004c;
|
||||
--apple-light-alpha-6: #12bf0067;
|
||||
--apple-light-alpha-7: #0db30089;
|
||||
--apple-light-alpha-8: #0bb000c4;
|
||||
--apple-light-alpha-9: #0dc800fa;
|
||||
--apple-light-alpha-10: #00bd00;
|
||||
--apple-light-alpha-11: #008600;
|
||||
--apple-light-alpha-12: #033000ea;
|
||||
--ember-dark-1: #170f0d;
|
||||
--ember-dark-2: #201412;
|
||||
--ember-dark-3: #3c140d;
|
||||
--ember-dark-4: #530e05;
|
||||
--ember-dark-5: #631409;
|
||||
--ember-dark-6: #742216;
|
||||
--ember-dark-7: #8d3324;
|
||||
--ember-dark-8: #b64330;
|
||||
--ember-dark-9: #fc533a;
|
||||
--ember-dark-10: #ee462d;
|
||||
--ember-dark-11: #ff917b;
|
||||
--ember-dark-12: #ffd1c8;
|
||||
--ember-light-1: #fffcfb;
|
||||
--ember-light-2: #fff6f3;
|
||||
--ember-light-3: #ffe9e4;
|
||||
--ember-light-4: #ffd7cc;
|
||||
--ember-light-5: #ffc8ba;
|
||||
--ember-light-6: #ffb7a6;
|
||||
--ember-light-7: #ffa392;
|
||||
--ember-light-8: #f68975;
|
||||
--ember-light-9: #fc533a;
|
||||
--ember-light-10: #ef442a;
|
||||
--ember-light-11: #da3319;
|
||||
--ember-light-12: #5c281f;
|
||||
--ember-dark-alpha-1: #ec000007;
|
||||
--ember-dark-alpha-2: #f23e2011;
|
||||
--ember-dark-alpha-3: #fb22002f;
|
||||
--ember-dark-alpha-4: #ff070047;
|
||||
--ember-dark-alpha-5: #ff1a0058;
|
||||
--ember-dark-alpha-6: #fd3a1d6b;
|
||||
--ember-dark-alpha-7: #ff533685;
|
||||
--ember-dark-alpha-8: #ff5a3eb1;
|
||||
--ember-dark-alpha-9: #ff553bfc;
|
||||
--ember-dark-alpha-10: #ff4a2fed;
|
||||
--ember-dark-alpha-11: #ff917b;
|
||||
--ember-dark-alpha-12: #ffd1c8;
|
||||
--ember-light-alpha-1: #ff400004;
|
||||
--ember-light-alpha-2: #ff40000c;
|
||||
--ember-light-alpha-3: #ff30001b;
|
||||
--ember-light-alpha-4: #ff370033;
|
||||
--ember-light-alpha-5: #ff340045;
|
||||
--ember-light-alpha-6: #ff310059;
|
||||
--ember-light-alpha-7: #ff28006d;
|
||||
--ember-light-alpha-8: #ef25008a;
|
||||
--ember-light-alpha-9: #fb2200c5;
|
||||
--ember-light-alpha-10: #ec1f00d5;
|
||||
--ember-light-alpha-11: #d61d00e6;
|
||||
--ember-light-alpha-12: #460a00e0;
|
||||
--solaris-dark-1: #13110b;
|
||||
--solaris-dark-2: #1b180f;
|
||||
--solaris-dark-3: #2a2307;
|
||||
--solaris-dark-4: #382b00;
|
||||
--solaris-dark-5: #443500;
|
||||
--solaris-dark-6: #514307;
|
||||
--solaris-dark-7: #64551a;
|
||||
--solaris-dark-8: #7f6c25;
|
||||
--solaris-dark-9: #fcd53a;
|
||||
--solaris-dark-10: #f2cb2a;
|
||||
--solaris-dark-11: #fdd63c;
|
||||
--solaris-dark-12: #faebb5;
|
||||
--solaris-light-1: #fefdfa;
|
||||
--solaris-light-2: #fffbea;
|
||||
--solaris-light-3: #fff6be;
|
||||
--solaris-light-4: #ffee9c;
|
||||
--solaris-light-5: #ffe47c;
|
||||
--solaris-light-6: #f2d775;
|
||||
--solaris-light-7: #e0c76f;
|
||||
--solaris-light-8: #cdb047;
|
||||
--solaris-light-9: #ffdc17;
|
||||
--solaris-light-10: #fad337;
|
||||
--solaris-light-11: #917500;
|
||||
--solaris-light-12: #433c22;
|
||||
--solaris-dark-alpha-1: #bb110003;
|
||||
--solaris-dark-alpha-2: #f9b4000b;
|
||||
--solaris-dark-alpha-3: #febb001b;
|
||||
--solaris-dark-alpha-4: #feaf002a;
|
||||
--solaris-dark-alpha-5: #feb80037;
|
||||
--solaris-dark-alpha-6: #feca0045;
|
||||
--solaris-dark-alpha-7: #ffd42b59;
|
||||
--solaris-dark-alpha-8: #ffd63d76;
|
||||
--solaris-dark-alpha-9: #ffd83bfc;
|
||||
--solaris-dark-alpha-10: #fed52bf2;
|
||||
--solaris-dark-alpha-11: #ffd83cfd;
|
||||
--solaris-dark-alpha-12: #fff0b9fa;
|
||||
--solaris-light-alpha-1: #cc990005;
|
||||
--solaris-light-alpha-2: #ffcf0015;
|
||||
--solaris-light-alpha-3: #ffdc0041;
|
||||
--solaris-light-alpha-4: #ffd40063;
|
||||
--solaris-light-alpha-5: #ffcb0083;
|
||||
--solaris-light-alpha-6: #e7b6008a;
|
||||
--solaris-light-alpha-7: #c89c0090;
|
||||
--solaris-light-alpha-8: #ba9200b8;
|
||||
--solaris-light-alpha-9: #ffd900e8;
|
||||
--solaris-light-alpha-10: #f9c700c8;
|
||||
--solaris-light-alpha-11: #917500;
|
||||
--solaris-light-alpha-12: #261e00dd;
|
||||
--lilac-dark-1: #140f14;
|
||||
--lilac-dark-2: #1d141d;
|
||||
--lilac-dark-3: #2f1e31;
|
||||
--lilac-dark-4: #3e2440;
|
||||
--lilac-dark-5: #4a2c4c;
|
||||
--lilac-dark-6: #573859;
|
||||
--lilac-dark-7: #6c486e;
|
||||
--lilac-dark-8: #8a5e8d;
|
||||
--lilac-dark-9: #edb2f1;
|
||||
--lilac-dark-10: #e2a8e6;
|
||||
--lilac-dark-11: #dca2e0;
|
||||
--lilac-dark-12: #edd8ef;
|
||||
--lilac-light-1: #fffcff;
|
||||
--lilac-light-2: #fdf7fe;
|
||||
--lilac-light-3: #fceafd;
|
||||
--lilac-light-4: #faddfb;
|
||||
--lilac-light-5: #f5cff7;
|
||||
--lilac-light-6: #eebff1;
|
||||
--lilac-light-7: #e3a9e7;
|
||||
--lilac-light-8: #d78bdd;
|
||||
--lilac-light-9: #a753ae;
|
||||
--lilac-light-10: #9946a0;
|
||||
--lilac-light-11: #95429c;
|
||||
--lilac-light-12: #590b60;
|
||||
--lilac-dark-alpha-1: #d100d104;
|
||||
--lilac-dark-alpha-2: #fd4cfd0d;
|
||||
--lilac-dark-alpha-3: #ec70fb23;
|
||||
--lilac-dark-alpha-4: #f270fc33;
|
||||
--lilac-dark-alpha-5: #f57dfd40;
|
||||
--lilac-dark-alpha-6: #f691fd4e;
|
||||
--lilac-dark-alpha-7: #fa9eff64;
|
||||
--lilac-dark-alpha-8: #f9a5ff85;
|
||||
--lilac-dark-alpha-9: #fbbcfff0;
|
||||
--lilac-dark-alpha-10: #f9b9fee5;
|
||||
--lilac-dark-alpha-11: #fab8ffde;
|
||||
--lilac-dark-alpha-12: #fde6ffee;
|
||||
--lilac-light-alpha-1: #ff00ff03;
|
||||
--lilac-light-alpha-2: #c000e008;
|
||||
--lilac-light-alpha-3: #db00e715;
|
||||
--lilac-light-alpha-4: #da00e122;
|
||||
--lilac-light-alpha-5: #ca00d530;
|
||||
--lilac-light-alpha-6: #bc00c840;
|
||||
--lilac-light-alpha-7: #ac00b856;
|
||||
--lilac-light-alpha-8: #a800b574;
|
||||
--lilac-light-alpha-9: #7d0087ac;
|
||||
--lilac-light-alpha-10: #73007cb9;
|
||||
--lilac-light-alpha-11: #70007abd;
|
||||
--lilac-light-alpha-12: #520059f4;
|
||||
--coral-dark-1: #160f0e;
|
||||
--coral-light-1: #fffcfc;
|
||||
--coral-light-2: #fff8f7;
|
||||
--coral-light-3: #ffebe8;
|
||||
--coral-light-4: #ffdbd5;
|
||||
--coral-light-5: #ffcdc5;
|
||||
--coral-light-6: #f9beb5;
|
||||
--coral-light-7: #e9aea6;
|
||||
--coral-light-8: #d49b93;
|
||||
--coral-light-9: #af7871;
|
||||
--coral-light-10: #a26c65;
|
||||
--coral-light-11: #9c665f;
|
||||
--coral-light-12: #592a24;
|
||||
--coral-dark-2: #1f1413;
|
||||
--coral-dark-3: #391613;
|
||||
--coral-dark-4: #481b17;
|
||||
--coral-dark-5: #542621;
|
||||
--coral-dark-6: #63332d;
|
||||
--coral-dark-7: #77453f;
|
||||
--coral-dark-8: #935e57;
|
||||
--coral-dark-9: #ffd6d0;
|
||||
--coral-dark-10: #f5ccc6;
|
||||
--coral-dark-11: #e2a8a0;
|
||||
--coral-dark-12: #fcd3cd;
|
||||
--coral-dark-alpha-1: #e6000006;
|
||||
--coral-dark-alpha-2: #ff44330f;
|
||||
--coral-dark-alpha-3: #ff2f1d2b;
|
||||
--coral-dark-alpha-4: #ff3d2b3b;
|
||||
--coral-dark-alpha-5: #ff5c4a48;
|
||||
--coral-dark-alpha-6: #ff746358;
|
||||
--coral-dark-alpha-7: #fd897c6e;
|
||||
--coral-dark-alpha-8: #fe9d908c;
|
||||
--coral-dark-alpha-9: #ffd6d0;
|
||||
--coral-dark-alpha-10: #fed3cdf5;
|
||||
--coral-dark-alpha-11: #ffbdb4e0;
|
||||
--coral-dark-alpha-12: #ffd6cffc;
|
||||
--coral-light-alpha-1: #ff000003;
|
||||
--coral-light-alpha-2: #ff200008;
|
||||
--coral-light-alpha-3: #ff220017;
|
||||
--coral-light-alpha-4: #ff25002a;
|
||||
--coral-light-alpha-5: #ff24003a;
|
||||
--coral-light-alpha-6: #eb20014a;
|
||||
--coral-light-alpha-7: #c0170059;
|
||||
--coral-light-alpha-8: #9a13006c;
|
||||
--coral-light-alpha-9: #700d008e;
|
||||
--coral-light-alpha-10: #650c009a;
|
||||
--coral-light-alpha-11: #620b00a0;
|
||||
--coral-light-alpha-12: #3e0700db;
|
||||
--mint-dark-alpha-1: #00bb0003;
|
||||
--mint-dark-alpha-2: #2bf72b0a;
|
||||
--mint-dark-alpha-3: #66fe5d1b;
|
||||
--mint-dark-alpha-4: #63ff5d2c;
|
||||
--mint-dark-alpha-5: #6cff643b;
|
||||
--mint-dark-alpha-6: #71ff6a4b;
|
||||
--mint-dark-alpha-7: #74fd6f5d;
|
||||
--mint-dark-alpha-8: #74ff6f72;
|
||||
--mint-dark-alpha-9: #c8ffc4f5;
|
||||
--mint-dark-alpha-10: #c6fec2f5;
|
||||
--mint-dark-alpha-11: #b4ffafdc;
|
||||
--mint-dark-alpha-12: #c7ffc3fb;
|
||||
--mint-dark-1: #0d130c;
|
||||
--mint-dark-2: #121a12;
|
||||
--mint-dark-3: #1a2a19;
|
||||
--mint-dark-4: #1f3a1e;
|
||||
--mint-dark-5: #264824;
|
||||
--mint-dark-6: #2d572b;
|
||||
--mint-dark-7: #356733;
|
||||
--mint-dark-8: #3d7b3b;
|
||||
--mint-dark-9: #c8ffc4;
|
||||
--mint-dark-10: #bff5bb;
|
||||
--mint-dark-11: #9dde99;
|
||||
--mint-dark-12: #c4fbc0;
|
||||
--mint-light-1: #fafefa;
|
||||
--mint-light-2: #f4fcf3;
|
||||
--mint-light-3: #dbfdd8;
|
||||
--mint-light-4: #c3fabf;
|
||||
--mint-light-5: #adf2a8;
|
||||
--mint-light-6: #96e692;
|
||||
--mint-light-7: #81d47d;
|
||||
--mint-light-8: #6abc67;
|
||||
--mint-light-9: #9ff29a;
|
||||
--mint-light-10: #98e793;
|
||||
--mint-light-11: #318430;
|
||||
--mint-light-12: #1f461d;
|
||||
--mint-dark-alpha-1: #00bb0003;
|
||||
--mint-dark-alpha-2: #2bf72b09;
|
||||
--mint-dark-alpha-3: #66fe5d1b;
|
||||
--mint-dark-alpha-4: #63ff5d2b;
|
||||
--mint-dark-alpha-5: #6cff643b;
|
||||
--mint-dark-alpha-6: #71ff6a4a;
|
||||
--mint-dark-alpha-7: #74fd6f5c;
|
||||
--mint-dark-alpha-8: #74ff6f72;
|
||||
--mint-dark-alpha-9: #c8ffc4f5;
|
||||
--mint-dark-alpha-10: #c6fec2f5;
|
||||
--mint-dark-alpha-11: #b4ffafdb;
|
||||
--mint-dark-alpha-12: #c7ffc3fa;
|
||||
--mint-light-alpha-1: #00cc0005;
|
||||
--mint-light-alpha-2: #16c0000c;
|
||||
--mint-light-alpha-3: #14f20027;
|
||||
--mint-light-alpha-4: #10ec0040;
|
||||
--mint-light-alpha-5: #0fd90057;
|
||||
--mint-light-alpha-6: #0ac5006d;
|
||||
--mint-light-alpha-7: #08ab0082;
|
||||
--mint-light-alpha-8: #058f0098;
|
||||
--mint-light-alpha-9: #0ddf0065;
|
||||
--mint-light-alpha-10: #0cc7006c;
|
||||
--mint-light-alpha-11: #016800cf;
|
||||
--mint-light-alpha-12: #022e00e2;
|
||||
--grey-light-alpha-1: #ffffff;
|
||||
--grey-light-alpha-2: #ffffff;
|
||||
--grey-light-alpha-3: #ffffff;
|
||||
--grey-light-alpha-4: #ffffff;
|
||||
--grey-light-alpha-5: #ffffff;
|
||||
--grey-light-alpha-6: #ffffff;
|
||||
--grey-light-alpha-7: #ffffff;
|
||||
--grey-light-alpha-8: #ffffff;
|
||||
--grey-light-alpha-9: #ffffff;
|
||||
--grey-light-alpha-10: #ffffff;
|
||||
--grey-light-alpha-11: #ffffff;
|
||||
--grey-light-alpha-12: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
[data-component="button"] {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--text-base--line-height);
|
||||
font-weight: var(--font-weight-normal);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
gap: calc(var(--spacing) * 2);
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-variant="primary"] {
|
||||
border-color: var(--border-default-border);
|
||||
background-color: var(--surface-brand-surface-brand);
|
||||
color: var(--text-on-brand-text-strong-on-brand);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--border-default-border-hover);
|
||||
background-color: var(--surface-brand-surface-brand-hover);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
border-color: var(--border-default-border-active);
|
||||
background-color: var(--surface-brand-surface-brand-active);
|
||||
}
|
||||
&:focus:not(:disabled) {
|
||||
border-color: var(--border-default-border-focus);
|
||||
background-color: var(--surface-brand-surface-brand-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="secondary"] {
|
||||
border-color: var(--border-default-border);
|
||||
background-color: var(--surface-default-surface);
|
||||
color: var(--text-default-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--border-default-border-hover);
|
||||
background-color: var(--surface-default-surface-hover);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
border-color: var(--border-default-border-active);
|
||||
background-color: var(--surface-default-surface-active);
|
||||
}
|
||||
&:focus:not(:disabled) {
|
||||
border-color: var(--border-default-border-focus);
|
||||
background-color: var(--surface-default-surface-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="ghost"] {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--text-default-text);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--surface-default-surface-hover);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
border-color: var(--border-default-border-active);
|
||||
background-color: var(--surface-default-surface-active);
|
||||
}
|
||||
&:focus:not(:disabled) {
|
||||
border-color: var(--border-default-border-focus);
|
||||
background-color: var(--surface-default-surface-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-size="normal"] {
|
||||
padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--text-sm--line-height);
|
||||
}
|
||||
|
||||
&[data-size="large"] {
|
||||
padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--text-sm--line-height);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
[data-component="icon"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
[data-component="select"] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 2);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius-md);
|
||||
border-color: var(--color-smoke-4);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--text-base--line-height);
|
||||
font-weight: var(--font-weight-normal);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--color-primary);
|
||||
}
|
||||
|
||||
[data-slot="section"] {
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--text-xs--line-height);
|
||||
font-weight: var(--font-weight-normal);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-left: calc(var(--spacing) * 2);
|
||||
&:first-child {
|
||||
margin-top: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="item"] {
|
||||
/* "relative flex cursor-pointer select-none items-center": true, */
|
||||
/* "rounded-sm px-2 py-0.5 text-xs outline-none text-text": true, */
|
||||
/* "transition-colors data-[disabled]:pointer-events-none": true, */
|
||||
/* "data-[highlighted]:bg-background-element data-[disabled]:opacity-50": true, */
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc(var(--spacing) * 2);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--text-base--line-height);
|
||||
font-weight: var(--font-weight-normal);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
&[data-highlighted] {
|
||||
background-color: var(--color-background-element);
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* [data-slot="item-label"] { */
|
||||
/* font-size: var(--text-xs); */
|
||||
/* line-height: var(--text-xs--line-height); */
|
||||
/* font-weight: var(--font-weight-normal); */
|
||||
/* } */
|
||||
|
||||
[data-slot="item-indicator"] {
|
||||
/* display: flex; */
|
||||
/* align-items: center; */
|
||||
/* gap: calc(var(--spacing) * 1); */
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="trigger"] {
|
||||
[data-slot="value"] {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[data-slot="icon"] {
|
||||
/* "group size-fit shrink-0 text-text-muted transition-transform duration-100": true, */
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-component="select-content"] {
|
||||
/* "min-w-32 overflow-hidden rounded-md border border-border-subtle/40": true, */
|
||||
/* "bg-background-panel p-1 shadow-md z-50": true, */
|
||||
/* "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95": true, */
|
||||
/* "data-[expanded]:animate-in data-[expanded]:fade-in-0 data-[expanded]:zoom-in-95": true, */
|
||||
min-width: 8rem;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--color-smoke-4);
|
||||
background-color: var(--color-smoke-2);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
z-index: 50;
|
||||
|
||||
/* &[data-closed] { */
|
||||
/* animation: fade-out-0 0.2s ease-out; */
|
||||
/* animation-fill-mode: forwards; */
|
||||
/* animation-delay: 0.2s; */
|
||||
/* opacity: 0; */
|
||||
/* } */
|
||||
/* &[data-expanded] { */
|
||||
/* animation: fade-in-0 0.2s ease-out; */
|
||||
/* animation-fill-mode: forwards; */
|
||||
/* animation-delay: 0.2s; */
|
||||
/* opacity: 1; */
|
||||
/* } */
|
||||
[data-slot="list"] {
|
||||
/* overflow-y-auto max-h-48 whitespace-nowrap overflow-x-hidden */
|
||||
overflow-y: auto;
|
||||
max-height: 12rem;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "./color.css" layer(theme);
|
||||
@import "./theme.css" layer(theme);
|
||||
|
||||
@import "./base.css" layer(base);
|
||||
|
||||
@import "./components/button.css" layer(components);
|
||||
@import "./components/icon.css" layer(components);
|
||||
@import "./components/select.css" layer(components);
|
||||
|
||||
@import "./utilities.css" layer(utilities);
|
||||
@@ -0,0 +1,536 @@
|
||||
:root {
|
||||
--font-sans:
|
||||
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--breakpoint-sm: 40rem;
|
||||
--breakpoint-md: 48rem;
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
--breakpoint-2xl: 96rem;
|
||||
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--text-7xl: 4.5rem;
|
||||
--text-7xl--line-height: 1;
|
||||
--text-8xl: 6rem;
|
||||
--text-8xl--line-height: 1;
|
||||
--text-9xl: 8rem;
|
||||
--text-9xl--line-height: 1;
|
||||
|
||||
--font-weight-thin: 100;
|
||||
--font-weight-extralight: 200;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
--font-weight-black: 900;
|
||||
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
--radius-xs: 0.125rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--radius-3xl: 1.5rem;
|
||||
--radius-4xl: 2rem;
|
||||
|
||||
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
||||
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
|
||||
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
|
||||
|
||||
--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
|
||||
--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
|
||||
--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
|
||||
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
|
||||
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
|
||||
|
||||
--text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
|
||||
--text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
|
||||
--text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
|
||||
--text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
|
||||
--text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
:root {
|
||||
/* OC-1-Light */
|
||||
color-scheme: light;
|
||||
--background-background: var(--smoke-light-1);
|
||||
--background-background-weak: #f7f6f6;
|
||||
--background-background-weaker: #fcfcfc;
|
||||
--surface-default-surface: var(--smoke-light-2);
|
||||
--input-input: var(--smoke-light-1);
|
||||
--input-input-hover: var(--smoke-light-2);
|
||||
--input-input-active: var(--cobalt-light-1);
|
||||
--input-input-selected: var(--cobalt-light-4);
|
||||
--input-input-focus: var(--cobalt-light-1);
|
||||
--input-input-disabled: var(--smoke-light-4);
|
||||
--surface-default-surface-hover: var(--smoke-light-4);
|
||||
--surface-default-surface-active: var(--smoke-light-5);
|
||||
--surface-default-surface-selected: var(--cobalt-light-3);
|
||||
--surface-default-surface-disabled: var(--smoke-light-2);
|
||||
--surface-default-surface-focus: var(--cobalt-light-3);
|
||||
--surface-inset-surface-inset: var(--smoke-light-3);
|
||||
--surface-inset-surface-inset-hover: var(--smoke-light-4);
|
||||
--surface-inset-surface-inset-active: var(--smoke-light-6);
|
||||
--surface-inset-surface-inset-selected: var(--cobalt-light-4);
|
||||
--surface-inset-surface-inset-disabled: var(--smoke-light-3);
|
||||
--surface-inset-surface-inset-focus: var(--cobalt-light-4);
|
||||
--surface-raised-surface-raised: var(--white);
|
||||
--surface-raised-surface-raised-hover: var(--smoke-light-3);
|
||||
--surface-raised-surface-raised-active: var(--smoke-light-4);
|
||||
--surface-raised-surface-raised-selected: var(--cobalt-light-3);
|
||||
--surface-raised-surface-raised-disabled: var(--smoke-light-2);
|
||||
--surface-raised-surface-raised-focus: var(--cobalt-light-3);
|
||||
--surface-overlay-surface-overlay: var(--smoke-light-alpha-9);
|
||||
--surface-brand-surface-brand: var(--yuzu-light-9);
|
||||
--surface-brand-surface-brand-hover: var(--yuzu-light-10);
|
||||
--surface-interactive-surface-interactive: var(--cobalt-light-3);
|
||||
--surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
|
||||
--surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
|
||||
--surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
|
||||
--surface-success-surface-success: var(--apple-light-3);
|
||||
--surface-success-surface-success-weak: var(--apple-light-2);
|
||||
--surface-success-surface-success-strong: var(--apple-light-9);
|
||||
--surface-warning-surface-warning: var(--solaris-light-3);
|
||||
--surface-warning-surface-warning-weak: var(--solaris-light-2);
|
||||
--surface-warning-surface-warning-strong: var(--solaris-light-9);
|
||||
--surface-critical-surface-critical: var(--ember-light-3);
|
||||
--surface-critical-surface-critical-weak: var(--ember-light-2);
|
||||
--surface-critical-surface-critical-strong: var(--ember-light-9);
|
||||
--surface-info-surface-info: var(--lilac-light-3);
|
||||
--surface-info-surface-info-weak: var(--lilac-light-2);
|
||||
--surface-info-surface-info-strong: var(--lilac-light-9);
|
||||
--surface-diff-add-surface-diff-add: var(--coral-light-3);
|
||||
--surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
|
||||
--surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
|
||||
--surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
|
||||
--surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
|
||||
--surface-diff-delete-surface-diff-delete: var(--mint-light-3);
|
||||
--surface-on-background-weak-default-surface-on-background-weak: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
|
||||
--surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
|
||||
--surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
|
||||
--surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
|
||||
--surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
|
||||
--text-default-text: var(--smoke-light-11);
|
||||
--text-default-text-weak: var(--smoke-light-9);
|
||||
--text-default-text-weaker: var(--smoke-light-8);
|
||||
--text-default-text-strong: var(--smoke-light-12);
|
||||
--text-on-brand-text-on-brand: var(--smoke-light-alpha-11);
|
||||
--text-on-interactive-text-on-interactive: var(--smoke-light-alpha-11);
|
||||
--text-on-success-text-on-success: var(--smoke-dark-alpha-11);
|
||||
--text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
|
||||
--text-on-info-text-on-info: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
|
||||
--text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
|
||||
--text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
|
||||
--text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
|
||||
--text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
|
||||
--text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
|
||||
--text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
|
||||
--text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
|
||||
--text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
|
||||
--text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
|
||||
--text-on-interactive-text-weak-on-interactive: var(--smoke-light-alpha-9);
|
||||
--text-on-interactive-text-strong-on-interactive: var(--smoke-light-alpha-12);
|
||||
--text-on-brand-text-weak-on-brand: var(--smoke-light-alpha-9);
|
||||
--text-on-brand-text-weaker-on-brand: var(--smoke-light-alpha-8);
|
||||
--text-on-brand-text-strong-on-brand: var(--smoke-light-alpha-12);
|
||||
--border-default-border: var(--smoke-light-alpha-7);
|
||||
--border-default-border-hover: var(--smoke-light-alpha-8);
|
||||
--border-default-border-active: var(--smoke-light-alpha-9);
|
||||
--border-default-border-selected: var(--cobalt-light-alpha-9);
|
||||
--border-default-border-disabled: var(--smoke-light-alpha-8);
|
||||
--border-default-border-focus: var(--smoke-light-alpha-9);
|
||||
--border-default-border-weak: var(--smoke-light-alpha-5);
|
||||
--icon-default-icon: var(--smoke-light-9);
|
||||
--border-default-border-weak-hover: var(--smoke-light-alpha-6);
|
||||
--icon-default-icon-hover: var(--smoke-light-10);
|
||||
--border-default-border-weak-active: var(--smoke-light-alpha-7);
|
||||
--icon-default-icon-active: var(--smoke-light-11);
|
||||
--icon-default-icon-selected: var(--smoke-light-12);
|
||||
--icon-default-icon-disabled: var(--smoke-light-7);
|
||||
--icon-default-icon-focus: var(--smoke-light-12);
|
||||
--icon-default-icon-weak: var(--smoke-light-7);
|
||||
--icon-default-icon-weak-hover: var(--smoke-light-8);
|
||||
--icon-default-icon-weak-active: var(--smoke-light-9);
|
||||
--icon-default-icon-weak-selected: var(--smoke-light-10);
|
||||
--icon-default-icon-weak-disabled: var(--smoke-light-6);
|
||||
--icon-default-icon-weak-focus: var(--smoke-light-9);
|
||||
--icon-default-icon-strong: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-hover: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-active: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-selected: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-disabled: var(--smoke-light-8);
|
||||
--icon-default-icon-strong-focus: var(--smoke-light-12);
|
||||
--border-default-border-weak-selected: var(--cobalt-light-alpha-6);
|
||||
--border-default-border-weak-disabled: var(--smoke-light-alpha-6);
|
||||
--border-default-border-weak-focus: var(--smoke-light-alpha-7);
|
||||
--border-interactive-border-interactive: var(--cobalt-light-7);
|
||||
--border-interactive-border-interactive-hover: var(--cobalt-light-8);
|
||||
--border-interactive-border-interactive-active: var(--cobalt-light-9);
|
||||
--border-interactive-border-interactive-selected: var(--cobalt-light-9);
|
||||
--border-interactive-border-interactive-disabled: var(--smoke-light-8);
|
||||
--border-interactive-border-interactive-focus: var(--cobalt-light-9);
|
||||
--border-success-border-success: var(--apple-light-6);
|
||||
--border-success-border-success-hover: var(--apple-light-7);
|
||||
--border-success-border-success-selected: var(--apple-light-9);
|
||||
--border-warning-border-warning: var(--solaris-light-6);
|
||||
--border-warning-border-warning-hover: var(--solaris-light-7);
|
||||
--border-warning-border-warning-selected: var(--solaris-light-9);
|
||||
--border-critical-border-critical: var(--ember-light-6);
|
||||
--border-critical-border-critical-hover: var(--ember-light-7);
|
||||
--border-critical-border-critical-selected: var(--ember-light-9);
|
||||
--border-info-border-info: var(--lilac-light-6);
|
||||
--border-info-border-info-hover: var(--lilac-light-7);
|
||||
--border-info-border-info-selected: var(--lilac-light-9);
|
||||
--icon-brand-icon-brand: var(--smoke-light-12);
|
||||
--icon-success-icon-success: var(--apple-light-7);
|
||||
--icon-warning-icon-warning: var(--solaris-light-7);
|
||||
--icon-warning-icon-warning-hover: var(--solaris-light-8);
|
||||
--icon-warning-icon-warning-active: var(--solaris-light-11);
|
||||
--icon-success-icon-success-hover: var(--apple-light-8);
|
||||
--icon-success-icon-success-active: var(--apple-light-11);
|
||||
--icon-critical-icon-critical: var(--ember-light-7);
|
||||
--icon-critical-icon-critical-hover: var(--ember-light-8);
|
||||
--icon-critical-icon-critical-active: var(--ember-light-11);
|
||||
--icon-info-icon-info: var(--lilac-light-7);
|
||||
--icon-info-icon-info-hover: var(--lilac-light-8);
|
||||
--icon-info-icon-info-active: var(--lilac-light-11);
|
||||
--icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
|
||||
--icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
|
||||
--icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
|
||||
--icon-on-interactive-icon-on-interactive: var(--smoke-light-alpha-9);
|
||||
--icon-on-interactive-icon-on-interactive-hover: var(--smoke-light-alpha-10);
|
||||
--icon-on-interactive-icon-on-interactive-selected: var(--smoke-light-alpha-11);
|
||||
--icon-on-success-icon-on-success: var(--apple-light-alpha-9);
|
||||
--icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
|
||||
--icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
|
||||
--icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
|
||||
--icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
|
||||
--icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
|
||||
--icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
|
||||
--icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
|
||||
--icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
|
||||
--icon-on-info-icon-on-info: var(--lilac-light-9);
|
||||
--icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
|
||||
--icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
|
||||
--icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
|
||||
--icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
|
||||
--icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
|
||||
--icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
|
||||
--icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
|
||||
--icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
|
||||
--syntax-syntax-comment: #ffffff;
|
||||
--syntax-syntax-string: #ffffff;
|
||||
--syntax-syntax-keyword: #ffffff;
|
||||
--syntax-syntax-function: #ffffff;
|
||||
--syntax-syntax-number: #ffffff;
|
||||
--syntax-syntax-operator: #ffffff;
|
||||
--syntax-syntax-variable: #ffffff;
|
||||
--syntax-syntax-type: #ffffff;
|
||||
--syntax-syntax-constant: #ffffff;
|
||||
--syntax-syntax-punctuation: #ffffff;
|
||||
--syntax-syntax-success: #ffffff;
|
||||
--syntax-syntax-warning: #ffffff;
|
||||
--syntax-syntax-critical: #ffffff;
|
||||
--syntax-syntax-info: #ffffff;
|
||||
--markdown-markdown-heading: #ffffff;
|
||||
--markdown-markdown-text: #ffffff;
|
||||
--markdown-markdown-link: #ffffff;
|
||||
--markdown-markdown-link-text: #ffffff;
|
||||
--markdown-markdown-code: #ffffff;
|
||||
--markdown-markdown-block-quote: #ffffff;
|
||||
--markdown-markdown-emph: #ffffff;
|
||||
--markdown-markdown-strong: #ffffff;
|
||||
--markdown-markdown-horizontal-rule: #ffffff;
|
||||
--markdown-markdown-list-item: #ffffff;
|
||||
--markdown-markdown-list-enumeration: #ffffff;
|
||||
--markdown-markdown-image: #ffffff;
|
||||
--markdown-markdown-image-text: #ffffff;
|
||||
--markdown-markdown-code-block: #ffffff;
|
||||
|
||||
.dark {
|
||||
/* OC-1-Dark */
|
||||
color-scheme: dark;
|
||||
--background-background: var(--smoke-dark-1);
|
||||
--background-background-weak: #151313;
|
||||
--background-background-weaker: #201c1c;
|
||||
--surface-default-surface: var(--smoke-dark-3);
|
||||
--input-input: var(--smoke-dark-2);
|
||||
--input-input-hover: var(--smoke-dark-2);
|
||||
--input-input-active: var(--cobalt-dark-1);
|
||||
--input-input-selected: var(--cobalt-dark-2);
|
||||
--input-input-focus: var(--cobalt-dark-1);
|
||||
--input-input-disabled: var(--smoke-dark-4);
|
||||
--surface-default-surface-hover: var(--smoke-dark-4);
|
||||
--surface-default-surface-active: var(--smoke-dark-5);
|
||||
--surface-default-surface-selected: var(--cobalt-dark-3);
|
||||
--surface-default-surface-disabled: var(--smoke-dark-2);
|
||||
--surface-default-surface-focus: var(--cobalt-dark-3);
|
||||
--surface-inset-surface-inset: var(--smoke-dark-4);
|
||||
--surface-inset-surface-inset-hover: var(--smoke-dark-5);
|
||||
--surface-inset-surface-inset-active: var(--smoke-dark-6);
|
||||
--surface-inset-surface-inset-selected: var(--cobalt-dark-4);
|
||||
--surface-inset-surface-inset-disabled: var(--smoke-dark-3);
|
||||
--surface-inset-surface-inset-focus: var(--cobalt-dark-4);
|
||||
--surface-raised-surface-raised: var(--smoke-dark-4);
|
||||
--surface-raised-surface-raised-hover: var(--smoke-dark-7);
|
||||
--surface-raised-surface-raised-active: var(--smoke-dark-8);
|
||||
--surface-raised-surface-raised-selected: var(--cobalt-dark-3);
|
||||
--surface-raised-surface-raised-disabled: var(--smoke-dark-3);
|
||||
--surface-raised-surface-raised-focus: var(--cobalt-dark-3);
|
||||
--surface-overlay-surface-overlay: var(--smoke-dark-alpha-2);
|
||||
--surface-brand-surface-brand: var(--yuzu-light-9);
|
||||
--surface-brand-surface-brand-hover: var(--yuzu-light-10);
|
||||
--surface-interactive-surface-interactive: var(--cobalt-light-3);
|
||||
--surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
|
||||
--surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
|
||||
--surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
|
||||
--surface-success-surface-success: var(--apple-light-3);
|
||||
--surface-success-surface-success-weak: var(--apple-light-2);
|
||||
--surface-success-surface-success-strong: var(--apple-light-9);
|
||||
--surface-warning-surface-warning: var(--solaris-light-3);
|
||||
--surface-warning-surface-warning-weak: var(--solaris-light-2);
|
||||
--surface-warning-surface-warning-strong: var(--solaris-light-9);
|
||||
--surface-critical-surface-critical: var(--ember-light-3);
|
||||
--surface-critical-surface-critical-weak: var(--ember-light-2);
|
||||
--surface-critical-surface-critical-strong: var(--ember-light-9);
|
||||
--surface-info-surface-info: var(--lilac-light-3);
|
||||
--surface-info-surface-info-weak: var(--lilac-light-2);
|
||||
--surface-info-surface-info-strong: var(--lilac-light-9);
|
||||
--surface-diff-add-surface-diff-add: var(--coral-light-3);
|
||||
--surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
|
||||
--surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
|
||||
--surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
|
||||
--surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
|
||||
--surface-diff-delete-surface-diff-delete: var(--mint-light-3);
|
||||
--surface-on-background-weak-default-surface-on-background-weak: var(--smoke-dark-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
|
||||
--surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
|
||||
--surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
|
||||
--surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
|
||||
--surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
|
||||
--surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
|
||||
--surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
|
||||
--text-default-text: var(--smoke-dark-alpha-11);
|
||||
--text-default-text-weak: var(--smoke-dark-alpha-9);
|
||||
--text-default-text-weaker: var(--smoke-dark-alpha-8);
|
||||
--text-default-text-strong: var(--smoke-dark-alpha-12);
|
||||
--text-on-brand-text-on-brand: var(--smoke-dark-alpha-11);
|
||||
--text-on-interactive-text-on-interactive: var(--smoke-dark-alpha-11);
|
||||
--text-on-success-text-on-success: var(--smoke-dark-alpha-11);
|
||||
--text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
|
||||
--text-on-info-text-on-info: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
|
||||
--text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
|
||||
--text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
|
||||
--text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
|
||||
--text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
|
||||
--text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
|
||||
--text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
|
||||
--text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
|
||||
--text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
|
||||
--text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
|
||||
--text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
|
||||
--text-on-interactive-text-weak-on-interactive: var(--smoke-dark-alpha-9);
|
||||
--text-on-interactive-text-strong-on-interactive: var(--smoke-dark-alpha-12);
|
||||
--text-on-brand-text-weak-on-brand: var(--smoke-dark-alpha-9);
|
||||
--text-on-brand-text-weaker-on-brand: var(--smoke-dark-alpha-8);
|
||||
--text-on-brand-text-strong-on-brand: var(--smoke-dark-alpha-12);
|
||||
--border-default-border: var(--smoke-dark-alpha-7);
|
||||
--border-default-border-hover: var(--smoke-dark-alpha-8);
|
||||
--border-default-border-active: var(--smoke-dark-alpha-9);
|
||||
--border-default-border-selected: var(--cobalt-dark-alpha-9);
|
||||
--border-default-border-disabled: var(--smoke-dark-alpha-8);
|
||||
--border-default-border-focus: var(--smoke-dark-alpha-9);
|
||||
--border-default-border-weak: var(--smoke-dark-alpha-6);
|
||||
--icon-default-icon: var(--smoke-light-9);
|
||||
--border-default-border-weak-hover: var(--smoke-dark-alpha-7);
|
||||
--icon-default-icon-hover: var(--smoke-light-10);
|
||||
--border-default-border-weak-active: var(--smoke-dark-alpha-8);
|
||||
--icon-default-icon-active: var(--smoke-light-11);
|
||||
--icon-default-icon-selected: var(--smoke-light-12);
|
||||
--icon-default-icon-disabled: var(--smoke-light-7);
|
||||
--icon-default-icon-focus: var(--smoke-light-12);
|
||||
--icon-default-icon-weak: var(--smoke-dark-6);
|
||||
--icon-default-icon-weak-hover: var(--smoke-light-7);
|
||||
--icon-default-icon-weak-active: var(--smoke-light-8);
|
||||
--icon-default-icon-weak-selected: var(--smoke-light-9);
|
||||
--icon-default-icon-weak-disabled: var(--smoke-light-4);
|
||||
--icon-default-icon-weak-focus: var(--smoke-light-9);
|
||||
--icon-default-icon-strong: var(--smoke-dark-12);
|
||||
--icon-default-icon-strong-hover: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-active: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-selected: var(--smoke-light-12);
|
||||
--icon-default-icon-strong-disabled: var(--smoke-light-8);
|
||||
--icon-default-icon-strong-focus: var(--smoke-light-12);
|
||||
--border-default-border-weak-selected: var(--cobalt-dark-alpha-6);
|
||||
--border-default-border-weak-disabled: var(--smoke-dark-alpha-6);
|
||||
--border-default-border-weak-focus: var(--smoke-dark-alpha-8);
|
||||
--border-interactive-border-interactive: var(--cobalt-light-7);
|
||||
--border-interactive-border-interactive-hover: var(--cobalt-light-8);
|
||||
--border-interactive-border-interactive-active: var(--cobalt-light-9);
|
||||
--border-interactive-border-interactive-selected: var(--cobalt-light-9);
|
||||
--border-interactive-border-interactive-disabled: var(--smoke-light-8);
|
||||
--border-interactive-border-interactive-focus: var(--cobalt-light-9);
|
||||
--border-success-border-success: var(--apple-light-6);
|
||||
--border-success-border-success-hover: var(--apple-light-7);
|
||||
--border-success-border-success-selected: var(--apple-light-9);
|
||||
--border-warning-border-warning: var(--solaris-light-6);
|
||||
--border-warning-border-warning-hover: var(--solaris-light-7);
|
||||
--border-warning-border-warning-selected: var(--solaris-light-9);
|
||||
--border-critical-border-critical: var(--ember-light-6);
|
||||
--border-critical-border-critical-hover: var(--ember-light-7);
|
||||
--border-critical-border-critical-selected: var(--ember-light-9);
|
||||
--border-info-border-info: var(--lilac-light-6);
|
||||
--border-info-border-info-hover: var(--lilac-light-7);
|
||||
--border-info-border-info-selected: var(--lilac-light-9);
|
||||
--icon-brand-icon-brand: var(--white);
|
||||
--icon-success-icon-success: var(--apple-light-7);
|
||||
--icon-warning-icon-warning: var(--solaris-light-7);
|
||||
--icon-warning-icon-warning-hover: var(--solaris-light-8);
|
||||
--icon-warning-icon-warning-active: var(--solaris-light-11);
|
||||
--icon-success-icon-success-hover: var(--apple-light-8);
|
||||
--icon-success-icon-success-active: var(--apple-light-11);
|
||||
--icon-critical-icon-critical: var(--ember-light-7);
|
||||
--icon-critical-icon-critical-hover: var(--ember-light-8);
|
||||
--icon-critical-icon-critical-active: var(--ember-light-11);
|
||||
--icon-info-icon-info: var(--lilac-light-7);
|
||||
--icon-info-icon-info-hover: var(--lilac-light-8);
|
||||
--icon-info-icon-info-active: var(--lilac-light-11);
|
||||
--icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
|
||||
--icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
|
||||
--icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
|
||||
--icon-on-interactive-icon-on-interactive: var(--smoke-dark-alpha-9);
|
||||
--icon-on-interactive-icon-on-interactive-hover: var(--smoke-dark-alpha-10);
|
||||
--icon-on-interactive-icon-on-interactive-selected: var(--smoke-dark-alpha-11);
|
||||
--icon-on-success-icon-on-success: var(--apple-light-alpha-9);
|
||||
--icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
|
||||
--icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
|
||||
--icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
|
||||
--icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
|
||||
--icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
|
||||
--icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
|
||||
--icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
|
||||
--icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
|
||||
--icon-on-info-icon-on-info: var(--lilac-light-9);
|
||||
--icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
|
||||
--icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
|
||||
--icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
|
||||
--icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
|
||||
--icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
|
||||
--icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
|
||||
--icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
|
||||
--icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
|
||||
--syntax-syntax-comment: #ffffff;
|
||||
--syntax-syntax-string: #ffffff;
|
||||
--syntax-syntax-keyword: #ffffff;
|
||||
--syntax-syntax-function: #ffffff;
|
||||
--syntax-syntax-number: #ffffff;
|
||||
--syntax-syntax-operator: #ffffff;
|
||||
--syntax-syntax-variable: #ffffff;
|
||||
--syntax-syntax-type: #ffffff;
|
||||
--syntax-syntax-constant: #ffffff;
|
||||
--syntax-syntax-punctuation: #ffffff;
|
||||
--syntax-syntax-success: #ffffff;
|
||||
--syntax-syntax-warning: #ffffff;
|
||||
--syntax-syntax-critical: #ffffff;
|
||||
--syntax-syntax-info: #ffffff;
|
||||
--markdown-markdown-heading: #ffffff;
|
||||
--markdown-markdown-text: #ffffff;
|
||||
--markdown-markdown-link: #ffffff;
|
||||
--markdown-markdown-link-text: #ffffff;
|
||||
--markdown-markdown-code: #ffffff;
|
||||
--markdown-markdown-block-quote: #ffffff;
|
||||
--markdown-markdown-emph: #ffffff;
|
||||
--markdown-markdown-strong: #ffffff;
|
||||
--markdown-markdown-horizontal-rule: #ffffff;
|
||||
--markdown-markdown-list-item: #ffffff;
|
||||
--markdown-markdown-list-enumeration: #ffffff;
|
||||
--markdown-markdown-image: #ffffff;
|
||||
--markdown-markdown-image-text: #ffffff;
|
||||
--markdown-markdown-code-block: #ffffff;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
:root {
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
& {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
@@ -17,9 +17,9 @@
|
||||
"@types/luxon": "3.7.1",
|
||||
"@types/node": "catalog:",
|
||||
"typescript": "catalog:",
|
||||
"vite": "^6.0.0",
|
||||
"vite": "catalog:",
|
||||
"vite-plugin-icons-spritesheet": "3.0.1",
|
||||
"vite-plugin-solid": "^2.11.6"
|
||||
"vite-plugin-solid": "catalog:"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kobalte/core": "catalog:",
|
||||
@@ -31,6 +31,7 @@
|
||||
"@solidjs/router": "0.15.3",
|
||||
"@thisbeyond/solid-dnd": "0.7.5",
|
||||
"diff": "catalog:",
|
||||
"@opencode-ai/ui": "workspace:*",
|
||||
"fuzzysort": "catalog:",
|
||||
"luxon": "catalog:",
|
||||
"marked": "16.2.0",
|
||||
|
||||
@@ -146,7 +146,10 @@ function init() {
|
||||
}
|
||||
for (const p of sync.data.changes) {
|
||||
if (store.node[p.path] === undefined) {
|
||||
fetch(p.path).then(() => setStore("node", p.path, "status", p))
|
||||
fetch(p.path).then(() => {
|
||||
if (store.node[p.path] === undefined) return
|
||||
setStore("node", p.path, "status", p)
|
||||
})
|
||||
} else {
|
||||
setStore("node", p.path, "status", p)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
dist
|
||||
.wrangler
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.vinxi
|
||||
app.config.timestamp_*.js
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env*.local
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
*.launch
|
||||
.settings/
|
||||
|
||||
# Temp
|
||||
gitignore
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="light">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<title>OpenCode UI</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script src="/src/index.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "@opencode-ai/ui",
|
||||
"version": "0.15.0",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./src/components/index.ts",
|
||||
"./*": "./src/components/*"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "catalog:",
|
||||
"vite": "catalog:",
|
||||
"vite-plugin-solid": "catalog:"
|
||||
},
|
||||
"dependencies": {
|
||||
"remeda": "catalog:",
|
||||
"solid-js": "catalog:",
|
||||
"@kobalte/core": "catalog:",
|
||||
"@opencode-ai/css": "workspace:*"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import type { Component } from "solid-js"
|
||||
import { Button } from "./components/button"
|
||||
import { Select } from "./components"
|
||||
import "@opencode-ai/css"
|
||||
import "./index.css"
|
||||
|
||||
const App: Component = () => {
|
||||
return (
|
||||
<main>
|
||||
<div class="light">
|
||||
<h3>Buttons</h3>
|
||||
<section>
|
||||
<Button variant="primary" size="normal">
|
||||
Normal Primary
|
||||
</Button>
|
||||
<Button variant="secondary" size="normal">
|
||||
Normal Secondary
|
||||
</Button>
|
||||
<Button variant="ghost" size="normal">
|
||||
Normal Ghost
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large Primary
|
||||
</Button>
|
||||
<Button variant="secondary" size="large">
|
||||
Large Secondary
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
Large Ghost
|
||||
</Button>
|
||||
</section>
|
||||
<h3>Select</h3>
|
||||
<section>
|
||||
<Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
|
||||
</section>
|
||||
</div>
|
||||
<div class="dark">
|
||||
<h3>Buttons</h3>
|
||||
<section>
|
||||
<Button variant="primary" size="normal">
|
||||
Normal Primary
|
||||
</Button>
|
||||
<Button variant="secondary" size="normal">
|
||||
Normal Secondary
|
||||
</Button>
|
||||
<Button variant="ghost" size="normal">
|
||||
Normal Ghost
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large Primary
|
||||
</Button>
|
||||
<Button variant="secondary" size="large">
|
||||
Large Secondary
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
Large Ghost
|
||||
</Button>
|
||||
</section>
|
||||
<h3>Select</h3>
|
||||
<section>
|
||||
<Select options={["a", "b", "c"]} onSelect={(x) => console.log(x)} placeholder="Select" />
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Button as Kobalte } from "@kobalte/core/button"
|
||||
import { type ComponentProps, splitProps } from "solid-js"
|
||||
|
||||
export interface ButtonProps {
|
||||
size?: "normal" | "large"
|
||||
variant?: "primary" | "secondary" | "ghost"
|
||||
}
|
||||
|
||||
export function Button(props: ComponentProps<"button"> & ButtonProps) {
|
||||
const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"])
|
||||
return (
|
||||
<Kobalte
|
||||
{...rest}
|
||||
data-component="button"
|
||||
data-size={split.size || "normal"}
|
||||
data-variant={split.variant || "secondary"}
|
||||
classList={{
|
||||
...(split.classList ?? {}),
|
||||
[split.class ?? ""]: !!split.class,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Kobalte>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import { splitProps, type ComponentProps } from "solid-js"
|
||||
|
||||
// prettier-ignore
|
||||
const icons = {
|
||||
close: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L6.75 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75L17.25 17.25"></path>',
|
||||
menu: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 5.75H19.25"></path> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 18.25H19.25"></path> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 12H19.25"></path>',
|
||||
"chevron-right": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"></path>',
|
||||
"chevron-left": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"></path>',
|
||||
"chevron-down": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>',
|
||||
"chevron-up": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 14.25L12 10.75L8.75 14.25"></path>',
|
||||
"chevron-down-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.75 10.75 3.25 3.5 3.25-3.5m2-6H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
|
||||
"chevron-up-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8.75 14.25 3.25-3.5 3.25 3.5m2-9.5H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
|
||||
"chevron-right-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m10.75 15.25 3.5-3.25-3.5-3.25m6.5-4H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
|
||||
"chevron-left-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.25 15.25 9.75 12l3.5-3.25m4-4H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2Z"></path>',
|
||||
settings: '<path d="M5.62117 14.9627L6.72197 15.1351C7.53458 15.2623 8.11491 16.0066 8.05506 16.8451L7.97396 17.9816C7.95034 18.3127 8.12672 18.6244 8.41885 18.7686L9.23303 19.1697C9.52516 19.3139 9.87399 19.2599 10.1126 19.0352L10.9307 18.262C11.5339 17.6917 12.4646 17.6917 13.0685 18.262L13.8866 19.0352C14.1252 19.2608 14.4733 19.3139 14.7662 19.1697L15.5819 18.7678C15.8733 18.6244 16.0489 18.3135 16.0253 17.9833L15.9441 16.8451C15.8843 16.0066 16.4646 15.2623 17.2772 15.1351L18.378 14.9627C18.6985 14.9128 18.9568 14.6671 19.0292 14.3433L19.23 13.4428C19.3025 13.119 19.1741 12.7831 18.9064 12.5962L17.9875 11.9526C17.3095 11.4774 17.1024 10.5495 17.5119 9.82051L18.067 8.83299C18.2284 8.54543 18.2017 8.18538 17.9993 7.92602L17.4363 7.2035C17.2339 6.94413 16.8969 6.83701 16.5867 6.93447L15.5221 7.26794C14.7355 7.51441 13.8969 7.1012 13.5945 6.31908L13.1866 5.26148C13.0669 4.95218 12.7748 4.7492 12.4496 4.75L11.5472 4.75242C11.222 4.75322 10.9307 4.95782 10.8126 5.26793L10.4149 6.31344C10.1157 7.1004 9.27319 7.51683 8.4842 7.26874L7.37553 6.92078C7.0645 6.82251 6.72591 6.93044 6.52355 7.19142L5.96448 7.91474C5.76212 8.17652 5.73771 8.53738 5.90228 8.82493L6.47 9.81487C6.88812 10.5446 6.68339 11.4814 6.00149 11.9591L5.0936 12.5954C4.82588 12.7831 4.69754 13.119 4.76998 13.442L4.97077 14.3425C5.04242 14.6671 5.30069 14.9128 5.62117 14.9627Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.5911 10.4089C14.4696 11.2875 14.4696 12.7125 13.5911 13.5911C12.7125 14.4696 11.2875 14.4696 10.4089 13.5911C9.53036 12.7125 9.53036 11.2875 10.4089 10.4089C11.2875 9.53036 12.7125 9.53036 13.5911 10.4089Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
globe: '<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 12C15.25 16.5 13.2426 19.25 12 19.25C10.7574 19.25 8.75 16.5 8.75 12C8.75 7.5 10.7574 4.75 12 4.75C13.2426 4.75 15.25 7.5 15.25 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12H12H19"></path>',
|
||||
github: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 18.25c-3.5 1-3.5-1.75-5-2m10 4v-2.7a2.36 2.36 0 0 0-.66-1.83c2.2-.25 4.51-1.08 4.51-4.9a3.81 3.81 0 0 0-1.05-2.62 3.55 3.55 0 0 0-.07-2.63s-.84-.25-2.73.99a9.37 9.37 0 0 0-4.9 0c-1.89-1.24-2.73-.99-2.73-.99a3.55 3.55 0 0 0-.07 2.63 3.81 3.81 0 0 0-1.05 2.65c0 3.79 2.31 4.62 4.51 4.87a2.36 2.36 0 0 0-.66 1.86v3.97"></path>',
|
||||
hammer: '<path d="M10.75 13.25V10.25H8.25V11.25C8.25 11.8023 7.80228 12.25 7.25 12.25H5.75C5.19772 12.25 4.75 11.8023 4.75 11.25V5.75C4.75 5.19772 5.19772 4.75 5.75 4.75H7.25C7.80228 4.75 8.25 5.19772 8.25 5.75V6.75H15C15 6.75 19.25 6.75 19.25 11.25C19.25 11.25 17 10.25 14.25 10.25V13.25M10.75 13.25H14.25M10.75 13.25V19.25M14.25 13.25V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"avatar-square": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 19S8 15.75 12 15.75 17.25 19 17.25 19m-3-9a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-6.5 9.25h8.5a3 3 0 0 0 3-3v-8.5a3 3 0 0 0-3-3h-8.5a3 3 0 0 0-3 3v8.5a3 3 0 0 0 3 3Z"></path>',
|
||||
slash: '<path d="M11.5 18C11.5 18.2761 11.2761 18.5 11 18.5C10.7239 18.5 10.5 18.2761 10.5 18C10.5 17.7239 10.7239 17.5 11 17.5C11.2761 17.5 11.5 17.7239 11.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 18C15.5 18.2761 15.2761 18.5 15 18.5C14.7239 18.5 14.5 18.2761 14.5 18C14.5 17.7239 14.7239 17.5 15 17.5C15.2761 17.5 15.5 17.7239 15.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.5 18C19.5 18.2761 19.2761 18.5 19 18.5C18.7239 18.5 18.5 18.2761 18.5 18C18.5 17.7239 18.7239 17.5 19 17.5C19.2761 17.5 19.5 17.7239 19.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 18.25L9.25 5.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
robot: '<path d="M4.75 11.75C4.75 9.54086 6.54086 7.75 8.75 7.75H15.25C17.4591 7.75 19.25 9.54086 19.25 11.75V15.25C19.25 17.4591 17.4591 19.25 15.25 19.25H8.75C6.54086 19.25 4.75 17.4591 4.75 15.25V11.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 7.25V4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.25 12C10.25 12.6904 9.69036 13.25 9 13.25C8.30964 13.25 7.75 12.6904 7.75 12C7.75 11.3096 8.30964 10.75 9 10.75C9.69036 10.75 10.25 11.3096 10.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.25 12C16.25 12.6904 15.6904 13.25 15 13.25C14.3096 13.25 13.75 12.6904 13.75 12C13.75 11.3096 14.3096 10.75 15 10.75C15.6904 10.75 16.25 11.3096 16.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 16.25H13.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
cloud: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 14C4.75 15.7949 6.20507 17.25 8 17.25H16C17.7949 17.25 19.25 15.7949 19.25 14C19.25 12.2869 17.9246 10.8834 16.2433 10.759C16.1183 8.5239 14.2663 6.75 12 6.75C9.73368 6.75 7.88168 8.5239 7.75672 10.759C6.07542 10.8834 4.75 12.2869 4.75 14Z"></path>',
|
||||
"file-text": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V10.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 15.75H15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12.75H11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
file: '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V10.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"file-checkmark": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h-5a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h3.5m1.5-14.5v3.5a2 2 0 0 0 2 2h3.5m-5.5-5.5 5.5 5.5m0 0v1m1 3.5s-1.929 2.09-2.893 4.5l-1.607-1.929"></path>',
|
||||
"file-code": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 4.75h-5a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h.5m4.5-14.5v3.5a2 2 0 0 0 2 2h3.5m-5.5-5.5 5.5 5.5m0 0v2m-5 2.5L10.75 17l2.5 2.25m3.5-4.5 2.5 2.25-2.5 2.25"></path>',
|
||||
"file-important": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75L18.25 10.25H14.75C13.6454 10.25 12.75 9.35457 12.75 8.25V4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18 14C18 13.4477 17.5523 13 17 13C16.4477 13 16 13.4477 16 14H18ZM16 16C16 16.5523 16.4477 17 17 17C17.5523 17 18 16.5523 18 16H16ZM16 14V16H18V14H16Z" fill="currentColor"></path><path d="M18 19C18 18.4477 17.5523 18 17 18C16.4477 18 16 18.4477 16 19H18ZM16 19.01C16 19.5623 16.4477 20.01 17 20.01C17.5523 20.01 18 19.5623 18 19.01H16ZM16 19V19.01H18V19H16Z" fill="currentColor"></path>',
|
||||
"file-minus": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25M12.75 4.75L18.25 10.25M18.25 10.25V13.25M19.25 17.25H15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"file-plus": '<path d="M12.75 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H12.25M12.75 4.75V8.25C12.75 9.35457 13.6454 10.25 14.75 10.25H18.25L12.75 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 14.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
files: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 6.75h-3a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2h6.5a2 2 0 0 0 2-2v-5m-5.5-5.5 5.5 5.5m-5.5-5.5v3.5a2 2 0 0 0 2 2h3.5m-3.5-7.5h2l5.5 5.5v5a2 2 0 0 1-2 2H15.5"></path>',
|
||||
"file-zip": '<path d="M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 6C9.5 6.27614 9.27614 6.5 9 6.5C8.72386 6.5 8.5 6.27614 8.5 6C8.5 5.72386 8.72386 5.5 9 5.5C9.27614 5.5 9.5 5.72386 9.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.5 8C11.5 8.27614 11.2761 8.5 11 8.5C10.7239 8.5 10.5 8.27614 10.5 8C10.5 7.72386 10.7239 7.5 11 7.5C11.2761 7.5 11.5 7.72386 11.5 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 10C9.5 10.2761 9.27614 10.5 9 10.5C8.72386 10.5 8.5 10.2761 8.5 10C8.5 9.72386 8.72386 9.5 9 9.5C9.27614 9.5 9.5 9.72386 9.5 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.5 12C11.5 12.2761 11.2761 12.5 11 12.5C10.7239 12.5 10.5 12.2761 10.5 12C10.5 11.7239 10.7239 11.5 11 11.5C11.2761 11.5 11.5 11.7239 11.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
jpg: '<path d="M8.25 8.75V13.5C8.25 14.4665 7.4665 15.25 6.5 15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 15.25V12.25M10.75 12.25V8.75H12.25C12.8023 8.75 13.25 9.19772 13.25 9.75V11.25C13.25 11.8023 12.8023 12.25 12.25 12.25H10.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 8.75H17.75C16.6454 8.75 15.75 9.64543 15.75 10.75V13.25C15.75 14.3546 16.6454 15.25 17.75 15.25H19.25V12.25H17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
pdf: '<path d="M4.75 15.25V12.25M4.75 12.25V8.75H6.25C6.80228 8.75 7.25 9.19772 7.25 9.75V11.25C7.25 11.8023 6.80228 12.25 6.25 12.25H4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.25 8.75H9.75V15.25H11.25C12.3546 15.25 13.25 14.3546 13.25 13.25V10.75C13.25 9.64543 12.3546 8.75 11.25 8.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.25 8.75H15.75V11.75M15.75 15.25V11.75M15.75 11.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
png: '<path d="M4.75 15.25V12.25M4.75 12.25V8.75H6.25C6.80228 8.75 7.25 9.19772 7.25 9.75V11.25C7.25 11.8023 6.80228 12.25 6.25 12.25H4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 15.25V8.75L13.25 15.25V8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 8.75H17.75C16.6454 8.75 15.75 9.64543 15.75 10.75V13.25C15.75 14.3546 16.6454 15.25 17.75 15.25H19.25V12.25H17.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
gif: '<path d="M9.25 8.75H7.75C6.64543 8.75 5.75 9.64543 5.75 10.75V13.25C5.75 14.3546 6.64543 15.25 7.75 15.25H9.25V12.25H7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.75 15.25V8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.25 8.75H15.75C15.1977 8.75 14.75 9.19772 14.75 9.75V11.75M14.75 15.25V11.75M14.75 11.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
archive: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 8.75H5.75L6.57758 17.4396C6.67534 18.4661 7.53746 19.25 8.56857 19.25H15.4314C16.4625 19.25 17.3247 18.4661 17.4224 17.4396L18.25 8.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 5.75C19.25 5.19772 18.8023 4.75 18.25 4.75H5.75C5.19771 4.75 4.75 5.19772 4.75 5.75V7.75C4.75 8.30228 5.19772 8.75 5.75 8.75H18.25C18.8023 8.75 19.25 8.30228 19.25 7.75V5.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 13.25H14.25"></path>',
|
||||
sun: '<circle cx="12" cy="12" r="3.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2.75V4.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L16.0659 7.93416"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21.25 12.0001L19.75 12.0001"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 17.2501L16.0659 16.066"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.75V21.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.9341 16.0659L6.74996 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.25 12.0001L2.75 12.0001"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.93405 7.93423L6.74991 6.75003"></path>',
|
||||
moon: '<path d="M18.25 15.0314C17.7575 15.1436 17.2459 15.2027 16.7209 15.2027C12.8082 15.2027 9.63607 11.9185 9.63607 7.86709C9.63607 6.75253 9.87614 5.69603 10.3057 4.75C7.12795 5.47387 4.75 8.40659 4.75 11.9143C4.75 15.9657 7.9221 19.25 11.8348 19.25C14.6711 19.25 17.1182 17.5242 18.25 15.0314Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
monitor: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V14.25C19.25 15.3546 18.3546 16.25 17.25 16.25H6.75C5.64543 16.25 4.75 15.3546 4.75 14.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 19.25L12 17.25L8.75 19.25"></path>',
|
||||
command: '<path d="M4.75 6.5C4.75 5.5335 5.5335 4.75 6.5 4.75C7.4665 4.75 8.25 5.5335 8.25 6.5V8.25H6.5C5.5335 8.25 4.75 7.4665 4.75 6.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.75 6.5C15.75 5.5335 16.5335 4.75 17.5 4.75C18.4665 4.75 19.25 5.5335 19.25 6.5C19.25 7.4665 18.4665 8.25 17.5 8.25H15.75V6.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.75 15.75H17.5C18.4665 15.75 19.25 16.5335 19.25 17.5C19.25 18.4665 18.4665 19.25 17.5 19.25C16.5335 19.25 15.75 18.4665 15.75 17.5V15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 17.5C4.75 16.5335 5.5335 15.75 6.5 15.75H8.25V17.5C8.25 18.4665 7.4665 19.25 6.5 19.25C5.5335 19.25 4.75 18.4665 4.75 17.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.25 8.25H15.75V15.75H8.25V8.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
link: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.75 13.25L18 12C19.6569 10.3431 19.6569 7.65685 18 6V6C16.3431 4.34315 13.6569 4.34315 12 6L10.75 7.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.25 10.75L6 12C4.34315 13.6569 4.34315 16.3431 6 18V18C7.65685 19.6569 10.3431 19.6569 12 18L13.25 16.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75L9.75 14.25"></path>',
|
||||
share: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 9.25V4.75H14.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 5L11.75 12.25"></path>',
|
||||
branch: '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.75 12.25H15.25C16.3546 12.25 17.25 11.3546 17.25 10.25V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 7C19.25 8.24264 18.2426 9.25 17 9.25C15.7574 9.25 14.75 8.24264 14.75 7C14.75 5.75736 15.7574 4.75 17 4.75C18.2426 4.75 19.25 5.75736 19.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
logout: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 8.75L19.25 12L15.75 15.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H10.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H15.25"></path>',
|
||||
login: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 8.75L13.25 12L9.75 15.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H9.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 12H4.75"></path>',
|
||||
keys: '<path d="M10.25 13.0632C11.9872 12.5294 13.25 10.9122 13.25 9C13.25 6.65279 11.3472 4.75 9 4.75C6.65279 4.75 4.75 6.65279 4.75 9C4.75 10.9122 6.01283 12.5294 7.75 13.0632V18C7.75 18.6904 8.30964 19.25 9 19.25C9.69036 19.25 10.25 18.6904 10.25 18V13.0632Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 12L17.3452 15.0736C17.9523 15.436 18.7285 15.2209 19.079 14.5932C19.4295 13.9655 19.2215 13.1629 18.6144 12.8005L13.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 8V8.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
key: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13.25C17.3472 13.25 19.25 11.3472 19.25 9C19.25 6.65279 17.3472 4.75 15 4.75C12.6528 4.75 10.75 6.65279 10.75 9C10.75 9.31012 10.7832 9.61248 10.8463 9.90372L4.75 16V19.25H8L8.75 18.5V16.75H10.5L11.75 15.5V13.75H13.5L14.0963 13.1537C14.3875 13.2168 14.6899 13.25 15 13.25Z"></path><path stroke="currentColor" d="M16.5 8C16.5 8.27614 16.2761 8.5 16 8.5C15.7239 8.5 15.5 8.27614 15.5 8C15.5 7.72386 15.7239 7.5 16 7.5C16.2761 7.5 16.5 7.72386 16.5 8Z"></path>',
|
||||
info: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V15"></path><circle cx="12" cy="9" r="1" fill="currentColor"></circle><circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>',
|
||||
warning: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.9522 16.3536L10.2152 5.85658C10.9531 4.38481 13.0539 4.3852 13.7913 5.85723L19.0495 16.3543C19.7156 17.6841 18.7487 19.25 17.2613 19.25H6.74007C5.25234 19.25 4.2854 17.6835 4.9522 16.3536Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10V12"></path><circle cx="12" cy="16" r="1" fill="currentColor"></circle>',
|
||||
checkmark: '<path d="M7.75 12.75L10 15.25L16.25 8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"checkmark-square": '<path d="M17.2502 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.2502C18.3548 4.75 19.2502 5.64543 19.2502 6.75V17.25C19.2502 18.3546 18.3548 19.25 17.2502 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12L11 14.25L15.25 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
plus: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5.75V18.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 12L5.75 12"></path>',
|
||||
minus: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.25 12.25L5.75 12.25"></path>',
|
||||
undo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.25 4.75L4.75 9L9.25 13.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.5 9H15.25C17.4591 9 19.25 10.7909 19.25 13V19.25"></path>',
|
||||
merge: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m4.75 19.25 7.25-5V5m2 10.63 5.25 3.62m-10.5-11L12 4.75l3.25 3.5"></path>',
|
||||
redo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.75 4.75L19.25 9L14.75 13.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 9H8.75C6.54086 9 4.75 10.7909 4.75 13V19.25"></path>',
|
||||
refresh: '<path d="M11.25 14.75L8.75 17M8.75 17L11.25 19.25M8.75 17H13.25C16.5637 17 19.25 14.3137 19.25 11V10.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.25 7H10.75C7.43629 7 4.75 9.68629 4.75 13V13.25M15.25 7L12.75 9.25M15.25 7L12.75 4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
rotate: '<path d="M17.1265 6.87348C14.2952 4.04217 9.70478 4.04217 6.87348 6.87348C4.04217 9.70478 4.04217 14.2952 6.87348 17.1265C9.70478 19.9578 14.2952 19.9578 17.1265 17.1265C17.7603 16.4927 18.2522 15.7708 18.6023 15.0001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 19.25V15.75C19.25 15.1977 18.8023 14.75 18.25 14.75H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"arrow-left": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 6.75L4.75 12L10.25 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12H5"></path>',
|
||||
"arrow-down": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 13.75L12 19.25L6.75 13.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18.25V4.75"></path>',
|
||||
"arrow-right": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path>',
|
||||
"arrow-up": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 10.25L12 4.75L6.75 10.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.25V5.75"></path>',
|
||||
enter: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75V12a2 2 0 0 1-2 2h-8.5m0 0 3.5-3.25M6.75 14l3.5 3.25"></path>',
|
||||
trash: '<path d="M5.75 7.75L6.59115 17.4233C6.68102 18.4568 7.54622 19.25 8.58363 19.25H14.4164C15.4538 19.25 16.319 18.4568 16.4088 17.4233L17.25 7.75H5.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 10.75V16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.25 10.75V16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 7.75V6.75C8.75 5.64543 9.64543 4.75 10.75 4.75H12.25C13.3546 4.75 14.25 5.64543 14.25 6.75V7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 7.75H18.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
package: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 8.87 12 12.25M5.75 8.87v7L12 19.25M5.75 8.87l3.125-1.56m9.375 1.56L12 5.75 8.875 7.31m9.375 1.56v7L12 19.25m6.25-10.38-3.125 1.69M12 12.25v7m0-7 3.125-1.69m0 0-6.25-3.25"></path>',
|
||||
box: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8L12 4.75L19.25 8L12 11.25L4.75 8Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16L12 19.25L19.25 16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8V16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8V16"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 11.5V19"></path>',
|
||||
lock: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"></path>',
|
||||
unlocked: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"></path>',
|
||||
activity: '<path d="M4.75 11.75H8.25L10.25 4.75L13.75 19.25L15.75 11.75H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
asterisk: '<path d="M12 4.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.2501 8.74994L5.75 15.2501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.2498 15.2503L5.74976 8.75012" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
bell: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 12V10C17.25 7.1005 14.8995 4.75 12 4.75C9.10051 4.75 6.75 7.10051 6.75 10V12L4.75 16.25H19.25L17.25 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 16.75C9 16.75 9 19.25 12 19.25C15 19.25 15 16.75 15 16.75"></path>',
|
||||
"bell-off": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.875V12L19.25 16.25H7.75M5.75 14.125L6.75 12V10C6.75 7.10051 9.10051 4.75 12 4.75C12 4.75 13.6094 4.75002 14.5938 5.24998"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 16.75C9 16.75 9 19.25 12 19.25C15 19.25 15 16.75 15 16.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 4.75L4.75 19.25"></path>',
|
||||
bolt: '<path d="M10.75 13.25H6.75L13.25 4.75V10.75H17.25L10.75 19.25V13.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
bookmark: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V19.25L12 14.75L6.75 19.25V6.75Z"></path>',
|
||||
brain: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 10.25v-.583A2.917 2.917 0 0 1 8.667 6.75H8.8a2.5 2.5 0 0 1 2.45-2H12m-4.75 5c-1.38 0-2.5 1.231-2.5 2.75 0 .788.301 1.499.784 2 .076.079.157.153.242.221m1.974.529h-.5a2.341 2.341 0 0 1-1.474-.529m0 0a2.917 2.917 0 0 0 2.89 2.529H8.8a2.5 2.5 0 0 0 2.45 2H12m0-14.5h.75a2.5 2.5 0 0 1 2.45 2h.133a2.917 2.917 0 0 1 2.917 2.917v.583M12 4.75V8m0 11.25h.75a2.5 2.5 0 0 0 2.45-2h.133a2.917 2.917 0 0 0 2.891-2.529M12 19.25V15m4.75-5.25c1.38 0 2.5 1.231 2.5 2.75 0 .788-.301 1.499-.784 2a2.594 2.594 0 0 1-.242.221m-1.974.529h.5c.551 0 1.061-.196 1.474-.529M12 15c0-1.6 1.333-2.25 2-2.25h.25M12 15V8m0 0c0 1.2-1 3-2.25 3.25"></path>',
|
||||
browser: '<path d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 8.25H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"browser-cursor": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25h-5.5a2 2 0 0 1-2-2V6.75a2 2 0 0 1 2-2h10.5a2 2 0 0 1 2 2v5.5M8 8h.01m3 0h.01m3 0h.01m.72 5.75 1 5.5L17 17l2.25-.75-4.5-2.5Z"></path>',
|
||||
bug: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19.25v-3.5m0 3.5a4.25 4.25 0 0 1-4.249-4.157M12 19.25a4.25 4.25 0 0 0 4.249-4.157M4.75 7.75v1.326a2 2 0 0 0 1.065 1.768l2.069 1.095M19.25 7.75v1.326a2 2 0 0 1-1.065 1.768l-2.069 1.095M4.75 19.25v-1.645a2 2 0 0 1 1.298-1.873l1.703-.639M19.25 19.25v-1.645a2 2 0 0 0-1.298-1.873l-1.703-.639M9.75 7.25v-.5a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v.5m-4.5 0v2m0-2-.894-.447a2 2 0 0 1-1.106-1.79V4.75m6.5 4.5v-2m0 0 .894-.447a2 2 0 0 0 1.106-1.79V4.75M7.751 15.093 7.75 15v-2c0-.367.046-.722.134-1.062m0 0a4.252 4.252 0 0 1 8.232 0m0 0c.088.34.134.695.134 1.062v2l-.001.093"></path>',
|
||||
"carat-down": '<path d="M12 15.25L16.25 9.75H7.75L12 15.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"carat-left": '<path d="M8.75 12L14.25 7.75V16.25L8.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"carat-right": '<path d="M14.25 12L8.75 7.75V16.25L14.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"carat-up": '<path d="M12 9.75L16.25 15.25H7.75L12 9.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
cards: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15.144 8.75-.725-2.543c-.3-1.048-1.446-1.67-2.562-1.39l-5.556 1.4c-1.116.28-1.778 1.358-1.48 2.406l1.76 6.17c.3 1.048 1.446 1.67 2.562 1.39l.607-.153m5.394-7.28H11.75a2 2 0 0 0-2 2v5.28m5.394-7.28h2.106a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2h-5.5a2 2 0 0 1-2-2v-1.22"></path>',
|
||||
chart: '<path d="M5.75 19.25V13.75M9.75 19.25V11.75M14.25 19.25V13.75M5.75 10.25L9.75 5.75L14.25 9.75L18.25 4.75M18.25 19.25V9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"check-circle": '<path d="M14.25 10C14.25 10 12.3214 12.0893 11.3571 14.5L9.75 12.5714M19.25 12.25C19.25 16.2541 16.0041 19.5 12 19.5C7.99594 19.5 4.75 16.2541 4.75 12.25C4.75 8.24594 7.99594 5 12 5C16.0041 5 19.25 8.24594 19.25 12.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
checklist: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12.25v-5.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2h4.5m-2.5-10.5h6.5m-6.5 4h6.5m-.5 5 1.5 1.5c.75-2.25 3-3.5 3-3.5"></path>',
|
||||
"checklist-cards": '<path d="M15.1439 8.75009L14.4189 6.20709C14.1189 5.15909 12.9729 4.53709 11.8569 4.81709L6.30091 6.21709C5.18491 6.49709 4.52291 7.57509 4.82091 8.62309L6.58091 14.7931C6.88091 15.8411 8.02691 16.4631 9.14291 16.1831L9.74991 16.0301M15.1439 8.75009H11.7499C11.2195 8.75009 10.7108 8.9608 10.3357 9.33587C9.96062 9.71095 9.74991 10.2197 9.74991 10.7501V16.0301M15.1439 8.75009H17.2499C17.7803 8.75009 18.289 8.9608 18.6641 9.33587C19.0392 9.71095 19.2499 10.2197 19.2499 10.7501V17.2501C19.2499 17.7805 19.0392 18.2892 18.6641 18.6643C18.289 19.0394 17.7803 19.2501 17.2499 19.2501H11.7499C11.2195 19.2501 10.7108 19.0394 10.3357 18.6643C9.96062 18.2892 9.74991 17.7805 9.74991 17.2501V16.0301M16.2499 12.2501C16.2499 12.2501 14.7499 13.8751 13.9999 15.7501L12.7499 14.2501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
lab: '<path d="M16.25 4.75H7.75L8.73964 5.86334C9.39049 6.59555 9.75 7.54114 9.75 8.5208V11.25L4.75 19.25H19.25L14.25 11.25V8.5208C14.25 7.54114 14.6095 6.59555 15.2604 5.86334L16.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 15.75H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
circle: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12a7.25 7.25 0 1 1-14.5 0 7.25 7.25 0 0 1 14.5 0Z"></path>',
|
||||
"circle-dotted": '<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 5v.01m3.502.928-.005.01m2.57 2.554-.01.005m.948 3.497h-.01m-.928 3.502-.009-.005m-2.555 2.57-.005-.01M12 19v.01m-3.498-.947-.005.009m-2.555-2.57-.008.005m-.929-3.502h-.01m.947-3.498-.008-.005m2.568-2.555-.005-.008"></path>',
|
||||
clipboard: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 12.25H14.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 15.25H14.25"></path>',
|
||||
clock: '<circle cx="12" cy="12" r="7.25" stroke="currentColor" stroke-width="1.5"></circle><path stroke="currentColor" stroke-width="1.5" d="M12 8V12L14 14"></path>',
|
||||
"close-circle": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 12C4.75 7.99594 7.99594 4.75 12 4.75V4.75C16.0041 4.75 19.25 7.99594 19.25 12V12C19.25 16.0041 16.0041 19.25 12 19.25V19.25C7.99594 19.25 4.75 16.0041 4.75 12V12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 9.75L14.25 14.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 9.75L9.75 14.25"></path>',
|
||||
terminal: '<rect width="14.5" height="14.5" x="4.75" y="4.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" rx="2"></rect><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 10.75L11.25 13L8.75 15.25"></path>',
|
||||
code: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m15.75 8.75 3.5 3.25-3.5 3.25m-7.5-6.5L4.75 12l3.5 3.25m5-9.5-2.5 12.5"></path>',
|
||||
components: '<path d="M9.75 7L12 4.75L14.25 7L12 9.25L9.75 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.75 12L17 9.75L19.25 12L17 14.25L14.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 17L12 14.75L14.25 17L12 19.25L9.75 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.75 12L7 9.75L9.25 12L7 14.25L4.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
copy: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.5 15.25V15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H13.5C14.4665 4.75 15.25 5.5335 15.25 6.5V6.5"></path><rect width="10.5" height="10.5" x="8.75" y="8.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" rx="2"></rect>',
|
||||
cpu: '<path d="M6.75 8.75C6.75 7.64543 7.64543 6.75 8.75 6.75H15.25C16.3546 6.75 17.25 7.64543 17.25 8.75V15.25C17.25 16.3546 16.3546 17.25 15.25 17.25H8.75C7.64543 17.25 6.75 16.3546 6.75 15.25V8.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 4.75V6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 9.75L17.75 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 17.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.25 9.75L4.75 9.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 4.75V6.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 14.25L17.75 14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.25 17.75V19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.25 14.25L4.75 14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
dashboard: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 8.75V19"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8.25H19"></path>',
|
||||
transfer: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 9.25 16 5.75m0 0 3.25 3.5M16 5.75v12.5m-4.75-3.5L8 18.25m0 0-3.25-3.5M8 18.25V5.75"></path>',
|
||||
devices: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 8.25v-.5a1 1 0 0 1 1-1h9.5a1 1 0 0 1 1 1v10.5a1 1 0 0 1-1 1h-5.5m-8-1v-6.5a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-3.5a1 1 0 0 1-1-1Z"></path>',
|
||||
diamond: '<path d="M9.5 9C10.7644 7.54767 12 4.75 12 4.75C12 4.75 13.2356 7.54767 14.5 9C15.7314 10.4145 18.25 12 18.25 12C18.25 12 15.7314 13.5855 14.5 15C13.2356 16.4523 12 19.25 12 19.25C12 19.25 10.7644 16.4523 9.5 15C8.26857 13.5855 5.75 12 5.75 12C5.75 12 8.26857 10.4145 9.5 9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
dice: '<path d="M17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 9C9.5 9.27614 9.27614 9.5 9 9.5C8.72386 9.5 8.5 9.27614 8.5 9C8.5 8.72386 8.72386 8.5 9 8.5C9.27614 8.5 9.5 8.72386 9.5 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 15C9.5 15.2761 9.27614 15.5 9 15.5C8.72386 15.5 8.5 15.2761 8.5 15C8.5 14.7239 8.72386 14.5 9 14.5C9.27614 14.5 9.5 14.7239 9.5 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 9C15.5 9.27614 15.2761 9.5 15 9.5C14.7239 9.5 14.5 9.27614 14.5 9C14.5 8.72386 14.7239 8.5 15 8.5C15.2761 8.5 15.5 8.72386 15.5 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 12C15.5 12.2761 15.2761 12.5 15 12.5C14.7239 12.5 14.5 12.2761 14.5 12C14.5 11.7239 14.7239 11.5 15 11.5C15.2761 11.5 15.5 11.7239 15.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 15C15.5 15.2761 15.2761 15.5 15 15.5C14.7239 15.5 14.5 15.2761 14.5 15C14.5 14.7239 14.7239 14.5 15 14.5C15.2761 14.5 15.5 14.7239 15.5 15Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
discord: '<path d="M5.9143 7.38378L4.93679 14.6174C4.82454 15.448 5.24219 16.2606 5.983 16.6528L8.99995 18.25L9.99995 15.75C9.99995 15.75 10.6562 16.25 11.9999 16.25C13.3437 16.25 13.9999 15.75 13.9999 15.75L14.9999 18.25L18.0169 16.6528C18.7577 16.2606 19.1754 15.448 19.0631 14.6174L18.0856 7.38378C18.0334 6.99739 17.7613 6.67658 17.3887 6.56192L14.7499 5.75003V6.25003C14.7499 6.80232 14.3022 7.25003 13.7499 7.25003H10.2499C9.69766 7.25003 9.24995 6.80232 9.24995 6.25003V5.75003L6.61122 6.56192C6.23855 6.67658 5.96652 6.99739 5.9143 7.38378Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 12C10.5 12.2761 10.2761 12.5 10 12.5C9.72386 12.5 9.5 12.2761 9.5 12C9.5 11.7239 9.72386 11.5 10 11.5C10.2761 11.5 10.5 11.7239 10.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 12C14.5 12.2761 14.2761 12.5 14 12.5C13.7239 12.5 13.5 12.2761 13.5 12C13.5 11.7239 13.7239 11.5 14 11.5C14.2761 11.5 14.5 11.7239 14.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
dots: '<path d="M12.5 6C12.5 6.27614 12.2761 6.5 12 6.5C11.7239 6.5 11.5 6.27614 11.5 6C11.5 5.72386 11.7239 5.5 12 5.5C12.2761 5.5 12.5 5.72386 12.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 6C18.5 6.27614 18.2761 6.5 18 6.5C17.7239 6.5 17.5 6.27614 17.5 6C17.5 5.72386 17.7239 5.5 18 5.5C18.2761 5.5 18.5 5.72386 18.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 12C18.5 12.2761 18.2761 12.5 18 12.5C17.7239 12.5 17.5 12.2761 17.5 12C17.5 11.7239 17.7239 11.5 18 11.5C18.2761 11.5 18.5 11.7239 18.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 6C6.5 6.27614 6.27614 6.5 6 6.5C5.72386 6.5 5.5 6.27614 5.5 6C5.5 5.72386 5.72386 5.5 6 5.5C6.27614 5.5 6.5 5.72386 6.5 6Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 12C6.5 12.2761 6.27614 12.5 6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5C6.27614 11.5 6.5 11.7239 6.5 12Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.5 18C12.5 18.2761 12.2761 18.5 12 18.5C11.7239 18.5 11.5 18.2761 11.5 18C11.5 17.7239 11.7239 17.5 12 17.5C12.2761 17.5 12.5 17.7239 12.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 18C18.5 18.2761 18.2761 18.5 18 18.5C17.7239 18.5 17.5 18.2761 17.5 18C17.5 17.7239 17.7239 17.5 18 17.5C18.2761 17.5 18.5 17.7239 18.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 18C6.5 18.2761 6.27614 18.5 6 18.5C5.72386 18.5 5.5 18.2761 5.5 18C5.5 17.7239 5.72386 17.5 6 17.5C6.27614 17.5 6.5 17.7239 6.5 18Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
expand: '<path d="M15.25 9.25L12 5.75L8.75 9.25M15.25 14.75L12 18.25L8.75 14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
droplet: '<path d="M17.25 14.0714C17.25 16.9315 14.8995 19.25 12 19.25C9.10051 19.25 6.75 16.9315 6.75 14.0714C6.75 11.2114 12 4.75 12 4.75C12 4.75 17.25 11.2114 17.25 14.0714Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"chevron-double-down": '<path d="M8.75 7.75L12 11.25L15.25 7.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 12.75L12 16.25L15.25 12.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"chevron-double-left": '<path d="M11.25 8.75L7.75 12L11.25 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.25 8.75L12.75 12L16.25 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"chevron-double-right": '<path d="M7.75 8.75L11.25 12L7.75 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.75 8.75L16.25 12L12.75 15.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"chevron-double-up": '<path d="M8.75 11.25L12 7.75L15.25 11.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 16.25L12 12.75L15.25 16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"speech-bubble": '<path d="M12 18.25C15.866 18.25 19.25 16.1552 19.25 11.5C19.25 6.84483 15.866 4.75 12 4.75C8.13401 4.75 4.75 6.84483 4.75 11.5C4.75 13.2675 5.23783 14.6659 6.05464 15.7206C6.29358 16.0292 6.38851 16.4392 6.2231 16.7926C6.12235 17.0079 6.01633 17.2134 5.90792 17.4082C5.45369 18.2242 6.07951 19.4131 6.99526 19.2297C8.0113 19.0263 9.14752 18.722 10.0954 18.2738C10.2933 18.1803 10.5134 18.1439 10.7305 18.1714C11.145 18.224 11.5695 18.25 12 18.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
message: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18.25C15.5 18.25 19.25 16.5 19.25 12C19.25 7.5 15.5 5.75 12 5.75C8.5 5.75 4.75 7.5 4.75 12C4.75 13.0298 4.94639 13.9156 5.29123 14.6693C5.50618 15.1392 5.62675 15.6573 5.53154 16.1651L5.26934 17.5635C5.13974 18.2547 5.74527 18.8603 6.43651 18.7307L9.64388 18.1293C9.896 18.082 10.1545 18.0861 10.4078 18.1263C10.935 18.2099 11.4704 18.25 12 18.25Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.5 12C12.5 12.2761 12.2761 12.5 12 12.5C11.7239 12.5 11.5 12.2761 11.5 12C11.5 11.7239 11.7239 11.5 12 11.5C12.2761 11.5 12.5 11.7239 12.5 12Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.5 12C15.5 12.2761 15.2761 12.5 15 12.5C14.7239 12.5 14.5 12.2761 14.5 12C14.5 11.7239 14.7239 11.5 15 11.5C15.2761 11.5 15.5 11.7239 15.5 12Z"></path>',
|
||||
annotation: '<path d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V15.25C19.25 16.3546 18.3546 17.25 17.25 17.25H14.625L12 19.25L9.375 17.25H6.75C5.64543 17.25 4.75 16.3546 4.75 15.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
square: '<path d="M17.2502 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.2502C18.3548 4.75 19.2502 5.64543 19.2502 6.75V17.25C19.2502 18.3546 18.3548 19.25 17.2502 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
"pull-request": '<path d="M9.25 7C9.25 8.24264 8.24264 9.25 7 9.25C5.75736 9.25 4.75 8.24264 4.75 7C4.75 5.75736 5.75736 4.75 7 4.75C8.24264 4.75 9.25 5.75736 9.25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.25 17C9.25 18.2426 8.24264 19.25 7 19.25C5.75736 19.25 4.75 18.2426 4.75 17C4.75 15.7574 5.75736 14.75 7 14.75C8.24264 14.75 9.25 15.7574 9.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.25 17C19.25 18.2426 18.2426 19.25 17 19.25C15.7574 19.25 14.75 18.2426 14.75 17C14.75 15.7574 15.7574 14.75 17 14.75C18.2426 14.75 19.25 15.7574 19.25 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.75 9.5V14.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.25 14.25V10.4701C17.25 9.83943 17.0513 9.22483 16.682 8.71359L14 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.75 8.25V4.75H17.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
pencil: '<path d="M4.75 19.25L9 18.25L18.9491 8.30083C19.3397 7.9103 19.3397 7.27714 18.9491 6.88661L17.1134 5.05083C16.7228 4.6603 16.0897 4.6603 15.6991 5.05083L5.75 15L4.75 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.0234 7.03906L17.0234 10.0391" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
sparkles: '<path d="M17 4.75C17 5.89705 15.8971 7 14.75 7C15.8971 7 17 8.10295 17 9.25C17 8.10295 18.1029 7 19.25 7C18.1029 7 17 5.89705 17 4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 14.75C17 15.8971 15.8971 17 14.75 17C15.8971 17 17 18.1029 17 19.25C17 18.1029 18.1029 17 19.25 17C18.1029 17 17 15.8971 17 14.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 7.75C9 9.91666 6.91666 12 4.75 12C6.91666 12 9 14.0833 9 16.25C9 14.0833 11.0833 12 13.25 12C11.0833 12 9 9.91666 9 7.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>',
|
||||
photo: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16L7.49619 12.5067C8.2749 11.5161 9.76453 11.4837 10.5856 12.4395L13 15.25M10.915 12.823C11.9522 11.5037 13.3973 9.63455 13.4914 9.51294C13.4947 9.50859 13.4979 9.50448 13.5013 9.50017C14.2815 8.51598 15.7663 8.48581 16.5856 9.43947L19 12.25M6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25Z"></path>',
|
||||
columns: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5V19"></path>',
|
||||
"open-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.25 4.75v14.5m-3-8.5L9.75 12l1.5 1.25m-4.5 6h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
|
||||
"close-pane": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 4.75v14.5m3-8.5L14.25 12l-1.5 1.25M6.75 19.25h10.5a2 2 0 0 0 2-2V6.75a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v10.5a2 2 0 0 0 2 2Z"></path>',
|
||||
"file-search": '<path fill="currentColor" d="M17.25 9.25V10a.75.75 0 0 0 .53-1.28l-.53.53Zm-4.5-4.5.53-.53a.75.75 0 0 0-.53-.22v.75ZM10.25 20a.75.75 0 0 0 0-1.5V20Zm7.427-3.383a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm1.043 3.163a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-.94-11.06-4.5-4.5-1.06 1.06 4.5 4.5 1.06-1.06ZM12.75 4h-6v1.5h6V4ZM4 6.75v10.5h1.5V6.75H4ZM6.75 20h3.5v-1.5h-3.5V20ZM12 4.75v3.5h1.5v-3.5H12ZM13.75 10h3.5V8.5h-3.5V10ZM12 8.25c0 .966.784 1.75 1.75 1.75V8.5a.25.25 0 0 1-.25-.25H12Zm-8 9A2.75 2.75 0 0 0 6.75 20v-1.5c-.69 0-1.25-.56-1.25-1.25H4ZM6.75 4A2.75 2.75 0 0 0 4 6.75h1.5c0-.69.56-1.25 1.25-1.25V4Zm8.485 14.47a3.235 3.235 0 0 0 3.236-3.235h-1.5c0 .959-.777 1.736-1.736 1.736v1.5Zm0-4.97c.959 0 1.736.777 1.736 1.735h1.5A3.235 3.235 0 0 0 15.235 12v1.5Zm0-1.5A3.235 3.235 0 0 0 12 15.235h1.5c0-.958.777-1.735 1.735-1.735V12Zm0 4.97a1.735 1.735 0 0 1-1.735-1.735H12a3.235 3.235 0 0 0 3.235 3.236v-1.5Zm1.382.707 2.103 2.103 1.06-1.06-2.103-2.103-1.06 1.06Z"></path>',
|
||||
"folder-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 19.25h-3.5a2 2 0 0 1-2-2v-9.5h12.5a2 2 0 0 1 2 2v.5m-5.75-2.5-.931-1.958a2 2 0 0 0-1.756-1.042H6.75a2 2 0 0 0-2 2V11m12.695 6.445 1.805 1.805m-3.75-1a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z"></path>',
|
||||
search: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z"></path>',
|
||||
"web-search": '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 8.25v-.5a2 2 0 0 0-2-2H6.75a2 2 0 0 0-2 2v.5m14.5 0H4.75m14.5 0v2m-14.5-2v8a2 2 0 0 0 2 2h2.5m7.743-1.257 2.257 2.257m-4.015-1.53a2.485 2.485 0 1 0 0-4.97 2.485 2.485 0 0 0 0 4.97Z"></path>',
|
||||
loading: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.75v1.5m5.126.624L16 8m3.25 4h-1.5m-.624 5.126-1.768-1.768M12 16.75v2.5m-3.36-3.891-1.768 1.768M7.25 12h-2.5m3.891-3.358L6.874 6.874"></path>',
|
||||
mic: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 8C8.75 6.20507 10.2051 4.75 12 4.75C13.7949 4.75 15.25 6.20507 15.25 8V11C15.25 12.7949 13.7949 14.25 12 14.25C10.2051 14.25 8.75 12.7949 8.75 11V8Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.75C5.75 12.75 6 17.25 12 17.25C18 17.25 18.25 12.75 18.25 12.75"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 17.75V19.25"></path>',
|
||||
} as const
|
||||
|
||||
export interface IconProps extends ComponentProps<"svg"> {
|
||||
name: keyof typeof icons
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function Icon(props: IconProps) {
|
||||
const [local, others] = splitProps(props, ["name", "size", "class", "classList"])
|
||||
const size = local.size ?? 24
|
||||
return (
|
||||
<svg
|
||||
data-component="icon"
|
||||
classList={{
|
||||
...(local.classList || {}),
|
||||
[local.class ?? ""]: !!local.class,
|
||||
}}
|
||||
width={size}
|
||||
height={size}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
innerHTML={icons[local.name]}
|
||||
aria-hidden="true"
|
||||
{...others}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from "./button"
|
||||
export * from "./icon"
|
||||
export * from "./select"
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Select as Kobalte } from "@kobalte/core/select"
|
||||
import { createMemo, type ComponentProps } from "solid-js"
|
||||
import { Icon, Button, type ButtonProps } from "@opencode-ai/ui"
|
||||
import { pipe, groupBy, entries, map } from "remeda"
|
||||
|
||||
export interface SelectProps<T> {
|
||||
placeholder?: string
|
||||
options: T[]
|
||||
current?: T
|
||||
value?: (x: T) => string
|
||||
label?: (x: T) => string
|
||||
groupBy?: (x: T) => string
|
||||
onSelect?: (value: T | undefined) => void
|
||||
class?: ComponentProps<"div">["class"]
|
||||
classList?: ComponentProps<"div">["classList"]
|
||||
}
|
||||
|
||||
export function Select<T>(props: SelectProps<T> & ButtonProps) {
|
||||
const grouped = createMemo(() => {
|
||||
const result = pipe(
|
||||
props.options,
|
||||
groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
|
||||
// mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
|
||||
entries(),
|
||||
map(([k, v]) => ({ category: k, options: v })),
|
||||
)
|
||||
return result
|
||||
})
|
||||
|
||||
return (
|
||||
<Kobalte<T, { category: string; options: T[] }>
|
||||
data-component="select"
|
||||
value={props.current}
|
||||
options={grouped()}
|
||||
optionValue={(x) => (props.value ? props.value(x) : (x as string))}
|
||||
optionTextValue={(x) => (props.label ? props.label(x) : (x as string))}
|
||||
optionGroupChildren="options"
|
||||
placeholder={props.placeholder}
|
||||
sectionComponent={(props) => (
|
||||
<Kobalte.Section data-slot="section">{props.section.rawValue.category}</Kobalte.Section>
|
||||
)}
|
||||
itemComponent={(itemProps) => (
|
||||
<Kobalte.Item
|
||||
data-slot="item"
|
||||
classList={{
|
||||
...(props.classList ?? {}),
|
||||
[props.class ?? ""]: !!props.class,
|
||||
}}
|
||||
{...itemProps}
|
||||
>
|
||||
<Kobalte.ItemLabel data-slot="item-label">
|
||||
{props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
|
||||
</Kobalte.ItemLabel>
|
||||
<Kobalte.ItemIndicator data-slot="item-indicator">
|
||||
<Icon name="checkmark" size={16} />
|
||||
</Kobalte.ItemIndicator>
|
||||
</Kobalte.Item>
|
||||
)}
|
||||
onChange={(v) => {
|
||||
props.onSelect?.(v ?? undefined)
|
||||
}}
|
||||
>
|
||||
<Kobalte.Trigger
|
||||
data-slot="trigger"
|
||||
as={Button}
|
||||
size={props.size}
|
||||
variant={props.variant}
|
||||
classList={{
|
||||
...(props.classList ?? {}),
|
||||
[props.class ?? ""]: !!props.class,
|
||||
}}
|
||||
>
|
||||
<Kobalte.Value<T> data-slot="value">
|
||||
{(state) => {
|
||||
const selected = state.selectedOption() ?? props.current
|
||||
if (!selected) return props.placeholder || ""
|
||||
if (props.label) return props.label(selected)
|
||||
return selected as string
|
||||
}}
|
||||
</Kobalte.Value>
|
||||
<Kobalte.Icon data-slot="icon">
|
||||
<Icon name="chevron-down" size={16} class="-my-2 group-data-[expanded]:rotate-180" />
|
||||
</Kobalte.Icon>
|
||||
</Kobalte.Trigger>
|
||||
<Kobalte.Portal>
|
||||
<Kobalte.Content data-component="select-content">
|
||||
<Kobalte.Listbox data-slot="list" />
|
||||
</Kobalte.Content>
|
||||
</Kobalte.Portal>
|
||||
</Kobalte>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
/* re-exporting for convenience */
|
||||
@import "@opencode-ai/css";
|
||||
@@ -0,0 +1,39 @@
|
||||
:root {
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background-background);
|
||||
color: var(--text-default-text);
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
main > div {
|
||||
flex: 1;
|
||||
padding: 3rem;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: var(--background-background);
|
||||
color: var(--text-default-text);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web"
|
||||
import "solid-devtools"
|
||||
|
||||
import App from "./app"
|
||||
|
||||
const root = document.getElementById("root")
|
||||
|
||||
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
|
||||
throw new Error(
|
||||
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
|
||||
)
|
||||
}
|
||||
|
||||
render(() => <App />, root!)
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
// General
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"target": "ESNext",
|
||||
|
||||
// Modules
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"isolatedModules": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"noEmit": true,
|
||||
|
||||
// Type Checking & Safety
|
||||
"strict": true,
|
||||
"types": ["vite/client"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from "vite"
|
||||
import solidPlugin from "vite-plugin-solid"
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solidPlugin()],
|
||||
server: { port: 3001 },
|
||||
build: {
|
||||
target: "esnext",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user