jvetrau-ds 0.1.30 → 0.1.32

package/components/attach/attach.cjs

@@ -7,6 +7,9 @@ var classnames = require('../helpers/classnames');
 function isImageAttach(item) {
   return item.mimeType?.startsWith("image/") ?? false;
 }
+function isLinkAttach(item) {
+  return item.kind === "link";
+}
 function formatFileSize(sizeBytes) {
   if (sizeBytes === void 0) {
     return "Size unknown";
@@ -19,6 +22,13 @@ function formatFileSize(sizeBytes) {
   }
   return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
 }
+function getLinkHostname(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./u, "");
+  } catch {
+    return url;
+  }
+}
 const Attach = ({
   items,
   onRemove,
@@ -37,11 +47,18 @@ const Attach = ({
       className: classes,
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "attach__list", children: items.map((item) => {
-        const isImage = isImageAttach(item);
+        const isLink = isLinkAttach(item);
+        const isImage = !isLink && isImageAttach(item);
+        const itemClasses = classnames.classnames("attach__item", {
+          "attach__item--link": isLink,
+          "attach__item--image": isImage,
+          "attach__item--file": !isLink && !isImage
+        });
+        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
-            className: "attach__item",
+            className: itemClasses,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "a",
@@ -59,7 +76,7 @@ const Attach = ({
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "attach__file", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "attach__name", children: item.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "attach__size", children: formatFileSize(item.sizeBytes) })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "attach__meta", children: meta })
                   ] })
                 }
               ),
@@ -68,7 +85,7 @@ const Attach = ({
                 {
                   className: "attach__remove",
                   type: "button",
-                  "aria-label": `${removeLabel} \u0444\u0430\u0439\u043B ${item.name}`,
+                  "aria-label": `${removeLabel}: ${item.name}`,
                   onClick: () => onRemove(item.id),
                   children: removeLabel
                 }

package/components/attach/attach.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"attach.cjs","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isImage = isImageAttach(item);\n\n          return (\n            <li\n              key={item.id}\n              className=\"attach__item\"\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__size\">\n                      {formatFileSize(item.sizeBytes)}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel} файл ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"attach.cjs","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}

package/components/attach/attach.css

@@ -3,7 +3,7 @@
   --attachment-color: var(--color-text);
   --attachment-item-bg: var(--color-control);
   --attachment-border-color: var(--color-line);
-  --attachment-size-color: var(--color-text-note);
+  --attachment-meta-color: var(--color-text-note);
 
   color: var(--attachment-color);
 
@@ -65,20 +65,31 @@
     solid
     var(--attachment-border-color);
   border-radius: var(--attachment-radius);
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__link {
   /* color */
   color: inherit;
 
+  /* typography */
+  text-decoration: none;
+
   /* size */
   min-width: 0;
 
-  /* typography */
-  text-decoration: none;
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__link:hover .attach__name {
+  /* typography */
   text-decoration: underline;
 }
 
@@ -91,6 +102,10 @@
 
   /* border */
   border-radius: var(--attachment-radius);
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__file {
@@ -98,23 +113,43 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__name {
-  /* size */
-  overflow: hidden;
-
   /* typography */
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  /* size */
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.attach__size {
+.attach__meta {
   /* color */
-  color: var(--attachment-size-color);
+  color: var(--attachment-meta-color);
 
   /* typography */
   font-size: 0.85em;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__remove {
@@ -132,10 +167,13 @@
   /* border */
   border: 0;
 
+  /* depth */
+
   /* motion */
   cursor: pointer;
 }
 
 .attach__remove:hover {
+  /* typography */
   text-decoration: underline;
 }

package/components/attach/attach.d.cts

@@ -1,9 +1,11 @@
 import React from 'react';
 
+type AttachItemKind = 'file' | 'link';
 interface AttachItem {
     id: string;
     name: string;
     url: string;
+    kind?: AttachItemKind;
     mimeType?: string;
     sizeBytes?: number;
 }
@@ -15,4 +17,4 @@ interface AttachProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attach: React.FC<AttachProps>;
 
-export { type AttachItem, type AttachProps, Attach as default };
+export { type AttachItem, type AttachItemKind, type AttachProps, Attach as default };

package/components/attach/attach.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 
+type AttachItemKind = 'file' | 'link';
 interface AttachItem {
     id: string;
     name: string;
     url: string;
+    kind?: AttachItemKind;
     mimeType?: string;
     sizeBytes?: number;
 }
@@ -15,4 +17,4 @@ interface AttachProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Attach: React.FC<AttachProps>;
 
-export { type AttachItem, type AttachProps, Attach as default };
+export { type AttachItem, type AttachItemKind, type AttachProps, Attach as default };

package/components/attach/attach.js

@@ -5,6 +5,9 @@ import { classnames } from '../helpers/classnames';
 function isImageAttach(item) {
   return item.mimeType?.startsWith("image/") ?? false;
 }
+function isLinkAttach(item) {
+  return item.kind === "link";
+}
 function formatFileSize(sizeBytes) {
   if (sizeBytes === void 0) {
     return "Size unknown";
@@ -17,6 +20,13 @@ function formatFileSize(sizeBytes) {
   }
   return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
 }
+function getLinkHostname(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./u, "");
+  } catch {
+    return url;
+  }
+}
 const Attach = ({
   items,
   onRemove,
@@ -35,11 +45,18 @@ const Attach = ({
       className: classes,
       ...props,
       children: /* @__PURE__ */ jsx("ul", { className: "attach__list", children: items.map((item) => {
-        const isImage = isImageAttach(item);
+        const isLink = isLinkAttach(item);
+        const isImage = !isLink && isImageAttach(item);
+        const itemClasses = classnames("attach__item", {
+          "attach__item--link": isLink,
+          "attach__item--image": isImage,
+          "attach__item--file": !isLink && !isImage
+        });
+        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
         return /* @__PURE__ */ jsxs(
           "li",
           {
-            className: "attach__item",
+            className: itemClasses,
             children: [
               /* @__PURE__ */ jsx(
                 "a",
@@ -57,7 +74,7 @@ const Attach = ({
                     }
                   ) : /* @__PURE__ */ jsxs("span", { className: "attach__file", children: [
                     /* @__PURE__ */ jsx("span", { className: "attach__name", children: item.name }),
-                    /* @__PURE__ */ jsx("span", { className: "attach__size", children: formatFileSize(item.sizeBytes) })
+                    /* @__PURE__ */ jsx("span", { className: "attach__meta", children: meta })
                   ] })
                 }
               ),
@@ -66,7 +83,7 @@ const Attach = ({
                 {
                   className: "attach__remove",
                   type: "button",
-                  "aria-label": `${removeLabel} \u0444\u0430\u0439\u043B ${item.name}`,
+                  "aria-label": `${removeLabel}: ${item.name}`,
                   onClick: () => onRemove(item.id),
                   children: removeLabel
                 }

package/components/attach/attach.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isImage = isImageAttach(item);\n\n          return (\n            <li\n              key={item.id}\n              className=\"attach__item\"\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__size\">\n                      {formatFileSize(item.sizeBytes)}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel} файл ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}

package/components/logo/logo.css

@@ -24,6 +24,11 @@
   gap: 0;
 }
 
+:where(a, button) .logo {
+  /* motion */
+  cursor: pointer;
+}
+
 .logo__symbol {
   /* size */
   display: block;

package/components/tag/tag.css

@@ -1,17 +1,17 @@
 .tag {
   /* color */
-  --tag-bg: var(--color-colorsemigood);
-  --tag-text: var(--color-colortextcontrol);
+  --tag-bg: var(--color-semi-good);
+  --tag-text: var(--color-text-control);
 
   background: var(--tag-bg);
   color: var(--tag-text);
 
   /* typography */
-  --tag-font-family: var(--typography-fontbodyfamily);
-  --tag-font-weight: var(--typography-fontnoteweight);
-  --tag-font-size: var(--typography-fontnote);
-  --tag-line-height: var(--typography-fontnoteline);
-  --tag-letter-spacing: var(--typography-fontnoteletterspacing);
+  --tag-font-family: var(--font-note-family);
+  --tag-font-weight: var(--font-note-weight);
+  --tag-font-size: var(--font-note-size);
+  --tag-line-height: var(--font-note-line-height);
+  --tag-letter-spacing: var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
@@ -22,8 +22,8 @@
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--size-paddingtaghorz);
-  --tag-padding-y: var(--size-paddingtagvert);
+  --tag-padding-x: var(--padding-tag-horz);
+  --tag-padding-y: var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
@@ -33,11 +33,11 @@
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--border-radiuscontrol);
+  --tag-border-radius: var(--radius-control);
   --tag-border-color: transparent;
 
-  border: var(--tag-border-width) solid var(--tag-border-color);
-  border-radius: var(--tag-border-radius);
+  border: none;
+  border-radius: var(--radius-control);
   outline: none;
 
   /* depth */
@@ -79,9 +79,9 @@
 }
 
 .tag--context-error {
-  --tag-bg: var(--color-colorbad);
+  --tag-bg: var(--color-bad);
 }
 
 .tag--context-warning {
-  --tag-bg: var(--color-colormed);
+  --tag-bg: var(--color-med);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -32,7 +32,7 @@
   --attachment-color: var(--color-text);
   --attachment-item-bg: var(--color-control);
   --attachment-border-color: var(--color-line);
-  --attachment-size-color: var(--color-text-note);
+  --attachment-meta-color: var(--color-text-note);
 
   color: var(--attachment-color);
 
@@ -94,20 +94,31 @@
     solid
     var(--attachment-border-color);
   border-radius: var(--attachment-radius);
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__link {
   /* color */
   color: inherit;
 
+  /* typography */
+  text-decoration: none;
+
   /* size */
   min-width: 0;
 
-  /* typography */
-  text-decoration: none;
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__link:hover .attach__name {
+  /* typography */
   text-decoration: underline;
 }
 
@@ -120,6 +131,10 @@
 
   /* border */
   border-radius: var(--attachment-radius);
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__file {
@@ -127,23 +142,43 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__name {
-  /* size */
-  overflow: hidden;
-
   /* typography */
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  /* size */
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
-.attach__size {
+.attach__meta {
   /* color */
-  color: var(--attachment-size-color);
+  color: var(--attachment-meta-color);
 
   /* typography */
   font-size: 0.85em;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .attach__remove {
@@ -161,11 +196,14 @@
   /* border */
   border: 0;
 
+  /* depth */
+
   /* motion */
   cursor: pointer;
 }
 
 .attach__remove:hover {
+  /* typography */
   text-decoration: underline;
 }
 
@@ -1179,6 +1217,11 @@
   gap: 0;
 }
 
+:where(a, button) .logo {
+  /* motion */
+  cursor: pointer;
+}
+
 .logo__symbol {
   /* size */
   display: block;
@@ -2114,18 +2157,18 @@
 /* src/components/tag/tag.css */
 .tag {
   /* color */
-  --tag-bg: var(--color-colorsemigood);
-  --tag-text: var(--color-colortextcontrol);
+  --tag-bg: var(--color-semi-good);
+  --tag-text: var(--color-text-control);
 
   background: var(--tag-bg);
   color: var(--tag-text);
 
   /* typography */
-  --tag-font-family: var(--typography-fontbodyfamily);
-  --tag-font-weight: var(--typography-fontnoteweight);
-  --tag-font-size: var(--typography-fontnote);
-  --tag-line-height: var(--typography-fontnoteline);
-  --tag-letter-spacing: var(--typography-fontnoteletterspacing);
+  --tag-font-family: var(--font-note-family);
+  --tag-font-weight: var(--font-note-weight);
+  --tag-font-size: var(--font-note-size);
+  --tag-line-height: var(--font-note-line-height);
+  --tag-letter-spacing: var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
@@ -2136,8 +2179,8 @@
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--size-paddingtaghorz);
-  --tag-padding-y: var(--size-paddingtagvert);
+  --tag-padding-x: var(--padding-tag-horz);
+  --tag-padding-y: var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
@@ -2147,11 +2190,11 @@
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--border-radiuscontrol);
+  --tag-border-radius: var(--radius-control);
   --tag-border-color: transparent;
 
-  border: var(--tag-border-width) solid var(--tag-border-color);
-  border-radius: var(--tag-border-radius);
+  border: none;
+  border-radius: var(--radius-control);
   outline: none;
 
   /* depth */
@@ -2193,11 +2236,11 @@
 }
 
 .tag--context-error {
-  --tag-bg: var(--color-colorbad);
+  --tag-bg: var(--color-bad);
 }
 
 .tag--context-warning {
-  --tag-bg: var(--color-colormed);
+  --tag-bg: var(--color-med);
 }
 
 /* src/components/textarea/textarea.css */

package/themes/base/desktop.css

@@ -1,4 +1,6 @@
 :root {
+  --color-alt: #FFFFFF;
+  --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
   --color-bg-contrast: #FFFFFF;
@@ -8,23 +10,26 @@
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
+  --color-good: var(--color-primary-1);
   --color-line: #FFFFFF;
-  --color-line-bad: var(--color-primary-2);
   --color-line-contrast: #000000;
-  --color-line-good: var(--color-primary-1);
   --color-line-grid: #3E3F40;
-  --color-line-med: #FF7300;
-  --color-line-semi-bad: #FF4000;
-  --color-line-semi-good: #FFBF00;
   --color-link: var(--color-primary-2);
   --color-link-visited: var(--color-primary-2);
+  --color-med: #FF7300;
   --color-primary-1: #F9EC0E;
   --color-primary-2: #FA4691;
   --color-secondary: #FFFFFF;
+  --color-semi-bad: #FF4000;
+  --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
+  --color-text-alt: var(--color-alt);
+  --color-text-bad: var(--color-bad);
   --color-text-container: #000000;
   --color-text-contrast: #000000;
   --color-text-control: #000000;
+  --color-text-good: var(--color-good);
+  --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;
   --color-text-primary-2: #FFFFFF;
@@ -109,8 +114,6 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
-  --margin-tag-horz: 8px;
-  --margin-tag-vert: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;
@@ -129,6 +132,8 @@
   --padding-table-horz: 0px;
   --padding-table-vert: 0px;
   --padding-tag: 4px;
+  --padding-tag-horz: 8px;
+  --padding-tag-vert: 4px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;