@comfyorg/design-system 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/package.json +5 -3
- package/src/css/_palette.css +7 -0
- package/src/css/style.css +38 -37
- package/src/icons/comfy-cloud.svg +4 -0
- package/src/icons/comfy-logo.svg +2 -2
- package/src/workspaceAvatar.ts +54 -0
- package/src/icons/credits.svg +0 -3
package/README.md
CHANGED
|
@@ -39,6 +39,7 @@ For the palette and fonts without the Tailwind layers or icon plugins:
|
|
|
39
39
|
| `./css/_palette.css` | Color variables |
|
|
40
40
|
| `./css/fonts.css` | Font faces |
|
|
41
41
|
| `./icons/*.svg` | Comfy icon set source SVGs |
|
|
42
|
+
| `./workspaceAvatar` | Deterministic workspace avatar styles by plan and name |
|
|
42
43
|
|
|
43
44
|
Icons are exposed to Tailwind as `icon-[comfy--*]` and `icon-mask-[comfy--*]`
|
|
44
45
|
utilities. Size them with `size-*`, not font-size classes.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@comfyorg/design-system",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Shared design system for ComfyUI Frontend",
|
|
5
5
|
"homepage": "https://comfy.org",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,12 +15,14 @@
|
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"src/css",
|
|
18
|
-
"src/icons"
|
|
18
|
+
"src/icons",
|
|
19
|
+
"src/workspaceAvatar.ts"
|
|
19
20
|
],
|
|
20
21
|
"type": "module",
|
|
21
22
|
"exports": {
|
|
22
23
|
"./css/*": "./src/css/*",
|
|
23
|
-
"./icons/*": "./src/icons/*"
|
|
24
|
+
"./icons/*": "./src/icons/*",
|
|
25
|
+
"./workspaceAvatar": "./src/workspaceAvatar.ts"
|
|
24
26
|
},
|
|
25
27
|
"publishConfig": {
|
|
26
28
|
"access": "public"
|
package/src/css/_palette.css
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
@theme {
|
|
2
2
|
/* Font Families */
|
|
3
3
|
--font-inter: 'Inter', sans-serif;
|
|
4
|
+
--font-formula: 'PP Formula', 'Inter', sans-serif;
|
|
4
5
|
|
|
5
6
|
/* Palette Colors */
|
|
7
|
+
--color-transparency-white-t8: rgb(255 255 255 / 0.08);
|
|
8
|
+
--color-transparency-white-t20: rgb(255 255 255 / 0.2);
|
|
9
|
+
--color-transparency-white-t40: rgb(255 255 255 / 0.4);
|
|
10
|
+
|
|
6
11
|
--color-charcoal-100: #55565e;
|
|
7
12
|
--color-charcoal-200: #494a50;
|
|
8
13
|
--color-charcoal-300: #3c3d42;
|
|
@@ -11,6 +16,8 @@
|
|
|
11
16
|
--color-charcoal-600: #262729;
|
|
12
17
|
--color-charcoal-700: #202121;
|
|
13
18
|
--color-charcoal-800: #171718;
|
|
19
|
+
--color-charcoal-900: #111111;
|
|
20
|
+
--color-charcoal-950: #09090a;
|
|
14
21
|
|
|
15
22
|
--color-neutral-550: #636363;
|
|
16
23
|
|
package/src/css/style.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
@plugin "./lucideStrokePlugin.js";
|
|
14
14
|
|
|
15
15
|
/* Safelist dynamic comfy icons for node library folders */
|
|
16
|
-
@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
|
|
16
|
+
@source inline("icon-[comfy--{ai-model,anthropic,bfl,bria,bytedance,claude,comfy-cloud,comfy-logo,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
|
|
17
17
|
|
|
18
18
|
/* Badge icon names are built at runtime, so the scanner cannot find them. */
|
|
19
19
|
@source inline("icon-mask-[comfy--{3d-decomp,ai-model,anthropic,batch-images-node,bfl,bria,brightness-contrast,bytedance,canny,canny-to-image,canny-to-video,channels,chromatic-aberration,claude,comfy-c,comfy-logo,credits,depth-to-image,depth-to-video,dial,elevenlabs,extensions-blocks,file-output,frames-to-video,gemini,get-video-components,glow,grain,grok,hitpaw,ideogram,image-ai-edit,image-batch,image-blur,image-canny,image-captioning,image-collage,image-compare,image-depth,image-edit,image-inpaint,image-invert,image-outpaint,image-outpainting,image-remove-background,image-rotate,image-select-object-segmentation,image-shader,image-sharpen,image-to-3d,image-to-image,image-to-layers,image-to-video,image-upscale,image-vectorize,kling,load-3d,load-audio,load-video,lora-loader,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,open-ai-chat-node,openai,pin,pixverse,play,pose-to-image,pose-to-video,quiver,recraft,reve,rodin,runway,save-3d,save-audio,save-video,send,sora,stability-ai,template,tencent,text-prompt-enhance,text-to-3d,text-to-audio,text-to-image,text-to-video,topaz,tripo,veo,video-captioning,video-edit,video-enhance,video-extract-frame,video-inpaint,video-interpolation,video-select-object-segmentation,video-slice,video-split-screen,video-trim,video-upscale,vidu,voice-clone,wan,wavespeed,workflow}]");
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
--color-gold-400: #fcbf64;
|
|
52
52
|
--color-gold-500: #fdab34;
|
|
53
53
|
--color-gold-600: #fd9903;
|
|
54
|
+
--color-gold-700: #c77700;
|
|
55
|
+
--color-gold-800: #8c6a38;
|
|
54
56
|
|
|
55
57
|
--color-credit: #ddbd31;
|
|
56
58
|
|
|
@@ -67,6 +69,8 @@
|
|
|
67
69
|
|
|
68
70
|
--color-primary-comfy-ink: #211927;
|
|
69
71
|
--color-primary-comfy-canvas: #c2bfb9;
|
|
72
|
+
--color-primary-warm-white: #f0efed;
|
|
73
|
+
--color-primary-warm-gray: #7e7c78;
|
|
70
74
|
|
|
71
75
|
--color-danger-100: #c02323;
|
|
72
76
|
--color-danger-200: #d62952;
|
|
@@ -232,6 +236,8 @@
|
|
|
232
236
|
--inverted-background-hover: var(--color-charcoal-600);
|
|
233
237
|
--warning-background: var(--color-gold-400);
|
|
234
238
|
--warning-background-hover: var(--color-gold-500);
|
|
239
|
+
--warning-foreground: var(--color-gold-800);
|
|
240
|
+
--warning-on-background: var(--color-charcoal-800);
|
|
235
241
|
--success-background: var(--color-jade-600);
|
|
236
242
|
--border-default: var(--color-smoke-600);
|
|
237
243
|
--border-subtle: var(--color-smoke-400);
|
|
@@ -385,6 +391,8 @@
|
|
|
385
391
|
--inverted-background-hover: var(--color-smoke-200);
|
|
386
392
|
--warning-background: var(--color-gold-600);
|
|
387
393
|
--warning-background-hover: var(--color-gold-500);
|
|
394
|
+
--warning-foreground: var(--color-gold-600);
|
|
395
|
+
--warning-on-background: var(--color-charcoal-800);
|
|
388
396
|
--success-background: var(--color-jade-600);
|
|
389
397
|
--border-default: var(--color-charcoal-200);
|
|
390
398
|
--border-subtle: var(--color-charcoal-300);
|
|
@@ -560,6 +568,8 @@
|
|
|
560
568
|
--color-inverted-background-hover: var(--inverted-background-hover);
|
|
561
569
|
--color-warning-background: var(--warning-background);
|
|
562
570
|
--color-warning-background-hover: var(--warning-background-hover);
|
|
571
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
572
|
+
--color-warning-on-background: var(--warning-on-background);
|
|
563
573
|
--color-success-background: var(--success-background);
|
|
564
574
|
--color-border-default: var(--border-default);
|
|
565
575
|
--color-border-subtle: var(--border-subtle);
|
|
@@ -718,6 +728,32 @@ body {
|
|
|
718
728
|
border: thin solid;
|
|
719
729
|
}
|
|
720
730
|
|
|
731
|
+
/* Heading rhythm shared by both markdown renderers; em-relative so margins scale with the heading, not the root font size. */
|
|
732
|
+
.comfy-markdown .tiptap h1,
|
|
733
|
+
.comfy-markdown .tiptap h2,
|
|
734
|
+
.comfy-markdown .tiptap h3,
|
|
735
|
+
.comfy-markdown .tiptap h4,
|
|
736
|
+
.comfy-markdown .tiptap h5,
|
|
737
|
+
.comfy-markdown .tiptap h6,
|
|
738
|
+
.comfy-markdown-content h1,
|
|
739
|
+
.comfy-markdown-content h2,
|
|
740
|
+
.comfy-markdown-content h3,
|
|
741
|
+
.comfy-markdown-content h4,
|
|
742
|
+
.comfy-markdown-content h5,
|
|
743
|
+
.comfy-markdown-content h6 {
|
|
744
|
+
margin-block: 0.67em;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
/* Tiptap headings already resolve to `normal`; only the parsed-HTML renderer needs its 1.6 body leading overridden. */
|
|
748
|
+
.comfy-markdown-content h1,
|
|
749
|
+
.comfy-markdown-content h2,
|
|
750
|
+
.comfy-markdown-content h3,
|
|
751
|
+
.comfy-markdown-content h4,
|
|
752
|
+
.comfy-markdown-content h5,
|
|
753
|
+
.comfy-markdown-content h6 {
|
|
754
|
+
line-height: 1.2;
|
|
755
|
+
}
|
|
756
|
+
|
|
721
757
|
/* Shared markdown content styling for consistent rendering across components */
|
|
722
758
|
.comfy-markdown-content {
|
|
723
759
|
/* Typography */
|
|
@@ -730,47 +766,16 @@ body {
|
|
|
730
766
|
.comfy-markdown-content h1 {
|
|
731
767
|
font-size: calc(22 / 14 * var(--comfy-textarea-font-size));
|
|
732
768
|
font-weight: 700; /* font-bold */
|
|
733
|
-
margin-top: 2rem; /* mt-8 */
|
|
734
|
-
margin-bottom: 1rem; /* mb-4 */
|
|
735
|
-
}
|
|
736
|
-
|
|
737
|
-
.comfy-markdown-content h1:first-child {
|
|
738
|
-
margin-top: 0; /* first:mt-0 */
|
|
739
769
|
}
|
|
740
770
|
|
|
741
771
|
.comfy-markdown-content h2 {
|
|
742
772
|
font-size: calc(18 / 14 * var(--comfy-textarea-font-size));
|
|
743
773
|
font-weight: 700; /* font-bold */
|
|
744
|
-
margin-top: 2rem; /* mt-8 */
|
|
745
|
-
margin-bottom: 1rem; /* mb-4 */
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
.comfy-markdown-content h2:first-child {
|
|
749
|
-
margin-top: 0; /* first:mt-0 */
|
|
750
774
|
}
|
|
751
775
|
|
|
752
776
|
.comfy-markdown-content h3 {
|
|
753
777
|
font-size: calc(16 / 14 * var(--comfy-textarea-font-size));
|
|
754
778
|
font-weight: 700; /* font-bold */
|
|
755
|
-
margin-top: 2rem; /* mt-8 */
|
|
756
|
-
margin-bottom: 1rem; /* mb-4 */
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
.comfy-markdown-content h3:first-child {
|
|
760
|
-
margin-top: 0; /* first:mt-0 */
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
.comfy-markdown-content h4,
|
|
764
|
-
.comfy-markdown-content h5,
|
|
765
|
-
.comfy-markdown-content h6 {
|
|
766
|
-
margin-top: 2rem; /* mt-8 */
|
|
767
|
-
margin-bottom: 1rem; /* mb-4 */
|
|
768
|
-
}
|
|
769
|
-
|
|
770
|
-
.comfy-markdown-content h4:first-child,
|
|
771
|
-
.comfy-markdown-content h5:first-child,
|
|
772
|
-
.comfy-markdown-content h6:first-child {
|
|
773
|
-
margin-top: 0; /* first:mt-0 */
|
|
774
779
|
}
|
|
775
780
|
|
|
776
781
|
/* Paragraphs */
|
|
@@ -1524,16 +1529,12 @@ audio.comfy-audio.empty-audio-widget {
|
|
|
1524
1529
|
position: relative;
|
|
1525
1530
|
transition: background-color 0.2s;
|
|
1526
1531
|
}
|
|
1527
|
-
.maskEditor_toolPanelContainerSelected svg {
|
|
1528
|
-
fill: var(--p-button-text-primary-color) !important;
|
|
1529
|
-
}
|
|
1530
1532
|
.maskEditor_toolPanelContainerSelected .maskEditor_toolPanelIndicator {
|
|
1531
1533
|
display: block;
|
|
1532
1534
|
}
|
|
1533
1535
|
.maskEditor_toolPanelContainer svg {
|
|
1534
1536
|
width: 75%;
|
|
1535
1537
|
aspect-ratio: 1/1;
|
|
1536
|
-
fill: var(--p-button-text-secondary-color);
|
|
1537
1538
|
}
|
|
1538
1539
|
|
|
1539
1540
|
.maskEditor_toolPanelContainerDark:hover {
|
|
@@ -1550,7 +1551,7 @@ audio.comfy-audio.empty-audio-widget {
|
|
|
1550
1551
|
width: 4px;
|
|
1551
1552
|
position: absolute;
|
|
1552
1553
|
left: 0;
|
|
1553
|
-
background:
|
|
1554
|
+
background: currentColor;
|
|
1554
1555
|
}
|
|
1555
1556
|
.maskEditor_sidePanelSeparator {
|
|
1556
1557
|
width: 100%;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520">
|
|
2
|
+
<path d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z" fill="#211927"/>
|
|
3
|
+
<path d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z" fill="#F2FF59"/>
|
|
4
|
+
</svg>
|
package/src/icons/comfy-logo.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
2
|
-
<path d="
|
|
1
|
+
<svg viewBox="0 0 173 48" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill="currentColor" d="M170.474 8.75283C170.474 8.75283 167.118 8.75283 164.685 8.75283C162.252 8.75283 160.206 10.3959 159.582 12.6326L156.526 23.2971C156.401 23.7157 156.008 24.0219 155.553 24.0219H154.474C153.912 24.0219 153.457 23.5658 153.457 23.0035C153.457 22.9036 153.469 22.8098 153.501 22.7161L156.563 12.0141C156.626 11.7891 156.663 11.558 156.663 11.3143C156.663 9.90238 155.522 8.75908 154.112 8.75908H148.354C145.922 8.75908 143.869 10.4084 143.252 12.6513L140.351 22.7911C140.226 23.2097 139.84 23.5221 139.378 23.5221H138.268C137.706 23.5221 137.251 23.066 137.251 22.5037C137.251 22.4037 137.263 22.31 137.288 22.2226L137.731 20.6794C137.787 20.4733 137.812 20.2546 137.812 20.0297C137.812 18.6177 136.671 17.4744 135.261 17.4744H131.849C131.288 17.4744 130.832 17.0183 130.832 16.4561C130.832 16.3624 130.845 16.2686 130.87 16.1812L131.512 13.9383C131.649 13.4697 132.08 13.1324 132.591 13.1324H135.904C138.318 13.1324 140.351 11.5143 140.994 9.30886L142.715 3.30496C142.778 3.08004 142.815 2.84264 142.815 2.59898C142.815 1.18704 141.674 0.0437327 140.264 0.0437327H134.581C132.167 0.0437327 130.134 1.66185 129.491 3.87348L128.325 7.94689C128.194 8.42171 127.757 8.76532 127.246 8.76532H123.858C121.432 8.76532 119.392 10.3959 118.762 12.6263L115.855 22.7786C115.737 23.2097 115.344 23.5283 114.876 23.5283H113.766C113.204 23.5283 112.749 23.0722 112.749 22.51C112.749 22.4162 112.761 22.3225 112.786 22.2351L113.229 20.6982C113.285 20.4857 113.316 20.2671 113.316 20.0359C113.316 18.624 112.175 17.4807 110.765 17.4807H107.378C106.817 17.4807 106.361 17.0246 106.361 16.4623C106.361 16.3561 106.374 16.2561 106.405 16.1624L107.584 12.0328C107.646 11.8079 107.684 11.5705 107.684 11.3268C107.684 9.91487 106.542 8.77157 105.132 8.77157H99.3749C96.9546 8.77157 94.9148 10.3959 94.2848 12.6138L93.1059 16.7372C92.9874 17.1683 92.5944 17.4807 92.1265 17.4807H90.9975C90.4361 17.4807 89.9807 17.0246 89.9807 16.4623C89.9807 16.3686 89.9932 16.2749 90.0181 16.1874L91.1971 12.064C91.2657 11.8329 91.3031 11.5892 91.3031 11.3331C91.3031 9.92112 90.1616 8.77782 88.7519 8.77782H74.8165C72.3838 8.77782 70.3378 10.4209 69.714 12.6576L64.312 31.5127C64.1935 31.9438 63.8005 32.2686 63.3265 32.2686H62.2099C61.6485 32.2686 61.1931 31.8126 61.1931 31.2503C61.1931 31.1628 61.2056 31.0754 61.2243 30.9941L64.1499 20.7669C64.2185 20.5357 64.2559 20.2921 64.2559 20.0422C64.2559 18.6302 63.1144 17.4869 61.7046 17.4869H58.2551C57.6937 17.4869 57.2383 17.0308 57.2383 16.4686C57.2383 16.3749 57.2508 16.2811 57.2758 16.1874L58.4485 12.0828C58.5233 11.8454 58.5608 11.5955 58.5608 11.3331C58.5608 9.92112 57.4192 8.77782 56.0095 8.77782H50.2457C47.8379 8.77782 45.8044 10.3897 45.1619 12.5951L44.0017 16.6435C43.8769 17.1246 43.4403 17.4807 42.9163 17.4807H39.5416C37.1089 17.4807 35.0628 19.1238 34.4391 21.3604L31.5322 31.5189C31.4137 31.95 31.0207 32.2624 30.5529 32.2624H29.5548C28.9934 32.2624 28.5381 31.8063 28.5381 31.244C28.5381 31.1503 28.5506 31.0566 28.5755 30.9629L28.9934 29.4947C29.0621 29.2636 29.0995 29.0199 29.0995 28.7638C29.0995 27.3456 27.9517 26.196 26.5357 26.196H15.0456C14.4281 26.2023 13.9228 25.7025 13.9228 25.084C13.9228 24.9715 13.9416 24.8653 13.9665 24.7653L17.0605 13.9695C17.1915 13.4947 17.6281 13.1449 18.1396 13.1449L29.6734 13.1324C32.1061 13.1324 34.1584 11.4893 34.7759 9.24639L36.51 3.22999C36.5662 3.01757 36.5974 2.78641 36.5974 2.55525C36.5974 1.1433 35.4558 0 34.0461 0H20.0921C17.6718 0 15.6258 1.63061 14.9957 3.8485L13.823 7.95314C13.6858 8.42171 13.2554 8.76532 12.7439 8.76532H9.39417C6.99261 8.76532 4.96531 10.3647 4.31658 12.5576L0.0935684 27.3081C0.0311901 27.5267 0 27.7642 0 28.0016C0 29.4198 1.14776 30.5693 2.56375 30.5693H5.85732C6.47487 30.5693 6.98013 31.0691 6.98013 31.6939C6.98013 31.8001 6.96766 31.9063 6.93647 32.0062L5.76999 36.0734C5.71385 36.2921 5.67642 36.517 5.67642 36.7481C5.67642 38.1601 6.81795 39.3034 8.2277 39.3034L22.188 39.2909C24.6145 39.2909 26.6605 37.654 27.2843 35.4237L27.6835 34.018C27.802 33.5869 28.195 33.2683 28.6628 33.2683H29.6609C30.2223 33.2683 30.6777 33.7243 30.6777 34.2866C30.6777 34.3866 30.6652 34.4803 30.634 34.574L30.2098 36.0484C30.1474 36.2671 30.1163 36.492 30.1163 36.7294C30.1163 38.1413 31.2578 39.2846 32.6675 39.2846H36.1358C36.6972 39.2846 37.1525 39.7407 37.1525 40.303C37.1525 40.403 37.14 40.4967 37.1089 40.5904L35.9112 44.7638C35.8488 44.9824 35.8176 45.2073 35.8176 45.4447C35.8176 46.8567 36.9591 48 38.3689 48H44.1327C46.5467 48 48.5802 46.3819 49.2227 44.1702L50.383 40.1156C50.5077 39.6345 50.9444 39.2846 51.4683 39.2846H54.8181C57.2259 39.2846 59.2656 37.6728 59.9019 35.4674L60.3136 34.0242C60.4321 33.5869 60.8251 33.2683 61.2992 33.2683H62.4157C62.9771 33.2683 63.4325 33.7243 63.4325 34.2866C63.4325 34.3803 63.42 34.474 63.3951 34.5615L62.9771 36.0109C62.9148 36.2358 62.8773 36.4732 62.8773 36.7169C62.8773 38.1288 64.0189 39.2722 65.4286 39.2722H71.1549C73.569 39.2784 75.6025 37.6665 76.245 35.4549L79.9253 22.5912C80.0501 22.1663 80.4368 21.854 80.9047 21.854H81.9838C82.5452 21.854 83.0006 22.31 83.0006 22.8723C83.0006 22.9723 82.9881 23.066 82.9632 23.1597L79.2766 36.0359C79.2142 36.2546 79.183 36.4857 79.183 36.7232C79.183 38.1351 80.3245 39.2784 81.7343 39.2784H87.5043C89.9121 39.2784 91.9394 37.6728 92.5881 35.4736L96.2747 22.5912C96.3932 22.1663 96.7862 21.8477 97.254 21.8477H98.3456C98.907 21.8477 99.3624 22.3038 99.3624 22.8661C99.3624 22.966 99.3499 23.0597 99.325 23.1472L95.6446 36.0047C95.5823 36.2296 95.5449 36.467 95.5449 36.7169C95.5449 38.1288 96.6864 39.2722 98.0961 39.2722H103.866C106.286 39.2722 108.326 37.6478 108.956 35.4299L111.869 25.2651C111.994 24.8403 112.381 24.5342 112.849 24.5342H113.959C114.52 24.5342 114.976 24.9902 114.976 25.5525C114.976 25.6525 114.963 25.7524 114.932 25.8399L109.524 44.7325C109.461 44.9512 109.43 45.1886 109.43 45.426C109.43 46.838 110.572 47.9813 111.982 47.9813H117.739C120.159 47.9813 122.205 46.3506 122.835 44.1328L126.491 31.3565C126.628 30.8879 127.058 30.5443 127.57 30.5443H130.882C133.29 30.5443 135.317 28.9387 135.966 26.7333L136.384 25.2776C136.502 24.8465 136.895 24.5279 137.363 24.5279H138.474C139.035 24.5279 139.49 24.984 139.49 25.5463C139.49 25.64 139.478 25.7274 139.453 25.8149L139.035 27.2831C138.973 27.508 138.935 27.7454 138.935 27.9891C138.935 29.401 140.077 30.5443 141.486 30.5443L153.076 30.5568C153.638 30.5568 154.093 31.0129 154.093 31.5752C154.093 31.6751 154.081 31.7751 154.049 31.8626L153.394 34.1492C153.276 34.5802 152.883 34.8926 152.415 34.8926H148.934C146.508 34.8926 144.468 36.5232 143.838 38.7474L142.135 44.7013C142.067 44.9324 142.029 45.1699 142.029 45.426C142.029 46.838 143.171 47.9813 144.58 47.9813H150.338C152.758 47.9813 154.798 46.3569 155.428 44.139L156.607 40.0281C156.719 39.5908 157.118 39.2722 157.593 39.2722H161.111C163.518 39.2722 165.546 37.6665 166.195 35.4611L172.9 12.0266C172.969 11.8016 173 11.558 173 11.3081C173 9.89613 171.858 8.75283 170.449 8.75283H170.474ZM50.2707 23.1347L47.1081 34.1804C46.9833 34.599 46.5904 34.8989 46.135 34.8989H45.0621C44.5007 34.8989 44.0453 34.4428 44.0453 33.8805C44.0453 33.793 44.0578 33.7056 44.0765 33.6244L47.2391 22.5912C47.3576 22.1601 47.7506 21.8477 48.2184 21.8477H49.2851C49.8465 21.8477 50.3019 22.3038 50.3019 22.8661C50.3019 22.9598 50.2894 23.0535 50.2644 23.141L50.2707 23.1347Z" />
|
|
3
3
|
</svg>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
const PLAN_COLORS = {
|
|
2
|
+
FREE: { lightness: 0.45, chroma: 0.016, hue: 240, hueRange: 0 },
|
|
3
|
+
CREATOR: { lightness: 0.53, chroma: 0.085, hue: 210, hueRange: 14 },
|
|
4
|
+
PRO: { lightness: 0.52, chroma: 0.14, hue: 295, hueRange: 14 },
|
|
5
|
+
TEAM: { lightness: 0.52, chroma: 0.1, hue: 155, hueRange: 14 },
|
|
6
|
+
ENTERPRISE: { lightness: 0.66, chroma: 0.16, hue: 345, hueRange: 12 }
|
|
7
|
+
} as const
|
|
8
|
+
|
|
9
|
+
type AvatarPlan = keyof typeof PLAN_COLORS
|
|
10
|
+
|
|
11
|
+
const NAME_VARIATIONS = [-1, -0.5, 0, 0.5, 1] as const
|
|
12
|
+
|
|
13
|
+
/** Solid Polar plan color for a workspace avatar; neutral when the tier is unavailable. */
|
|
14
|
+
export function workspaceAvatarStyle(
|
|
15
|
+
workspaceName: string,
|
|
16
|
+
subscriptionTier: string | null | undefined
|
|
17
|
+
): { backgroundColor?: string; color?: string } {
|
|
18
|
+
if (subscriptionTier === undefined) return {}
|
|
19
|
+
|
|
20
|
+
const plan = resolveAvatarPlan(subscriptionTier)
|
|
21
|
+
const base = PLAN_COLORS[plan]
|
|
22
|
+
const variation =
|
|
23
|
+
NAME_VARIATIONS[nameHash(workspaceName) % NAME_VARIATIONS.length] ?? 0
|
|
24
|
+
const lightnessStep = base.hueRange ? 0.025 : 0.055
|
|
25
|
+
const lightness = (base.lightness + variation * lightnessStep).toFixed(3)
|
|
26
|
+
const chroma = (base.chroma + variation * 0.006).toFixed(3)
|
|
27
|
+
const hue = Math.round(base.hue + variation * base.hueRange)
|
|
28
|
+
|
|
29
|
+
return {
|
|
30
|
+
backgroundColor: `oklch(${lightness} ${chroma} ${hue})`,
|
|
31
|
+
color:
|
|
32
|
+
plan === 'ENTERPRISE' ? 'var(--color-charcoal-800)' : 'var(--color-white)'
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function resolveAvatarPlan(tier: string | null): AvatarPlan {
|
|
37
|
+
if (tier === 'STANDARD' || tier === 'FOUNDERS_EDITION') return 'CREATOR'
|
|
38
|
+
return tier && isAvatarPlan(tier) ? tier : 'FREE'
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function isAvatarPlan(tier: string): tier is AvatarPlan {
|
|
42
|
+
return Object.hasOwn(PLAN_COLORS, tier)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
function nameHash(name: string): number {
|
|
46
|
+
const characters = Array.from(name.normalize('NFKC').trim().toLowerCase())
|
|
47
|
+
return (
|
|
48
|
+
characters.reduce(
|
|
49
|
+
(hash, character) =>
|
|
50
|
+
Math.imul(hash ^ (character.codePointAt(0) ?? 0), 16777619),
|
|
51
|
+
2166136261
|
|
52
|
+
) >>> 0
|
|
53
|
+
)
|
|
54
|
+
}
|
package/src/icons/credits.svg
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0zm-13.239 0a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0zm6.619 6.619a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0zm0-13.238a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z"/>
|
|
3
|
-
</svg>
|