jvetrau-ds 0.2.25 → 0.2.26

package/components/form-message/form-message.cjs

@@ -5,6 +5,7 @@ require('./form-message.css');
 var classnames = require('../helpers/classnames');
 
 const FormMessageItem = ({
+  status = "default",
   children,
   className = "",
   ...props
@@ -12,19 +13,25 @@ const FormMessageItem = ({
   const classes = classnames.classnames(
     "form-message__item",
     className,
-    {}
+    {
+      "form-message__item--default": status === "default",
+      "form-message__item--success": status === "success",
+      "form-message__item--warning": status === "warning",
+      "form-message__item--error": status === "error"
+    }
   );
+  const role = status === "error" ? "alert" : status === "success" || status === "warning" ? "status" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "p",
     {
       ...props,
       className: classes,
+      role,
       children
     }
   );
 };
 const FormMessage = ({
-  status,
   children,
   className = "",
   ...props
@@ -32,20 +39,13 @@ const FormMessage = ({
   const classes = classnames.classnames(
     "form-message",
     className,
-    {
-      "form-message--info": status === "info",
-      "form-message--success": status === "success",
-      "form-message--warning": status === "warning",
-      "form-message--error": status === "error"
-    }
+    {}
   );
-  const role = status === "error" ? "alert" : "status";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...props,
       className: classes,
-      role,
       children
     }
   );

package/components/form-message/form-message.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.cjs","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,MAAA,GAAS,SAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,6BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,WAAW,OAAA,GACP,OAAA,GACA,WAAW,SAAA,IACT,MAAA,KAAW,YACX,QAAA,GACA,MAAA;AAER,EAAA,uBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUD,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.cjs","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'default'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  status?: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  status = 'default',\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {\n      'form-message__item--default':\n        status === 'default',\n      'form-message__item--success':\n        status === 'success',\n      'form-message__item--warning':\n        status === 'warning',\n      'form-message__item--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : status === 'success' ||\n          status === 'warning'\n        ? 'status'\n        : undefined;\n\n  return (\n    <p\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/form-message/form-message.css

@@ -38,14 +38,19 @@
   /* motion */
 }
 
-.form-message--info {
+.form-message__item {
   /* color */
-  --form-message-color:
-    var(--color-text);
+  --form-message-item-color:
+    var(--form-message-color);
+
+  color: var(--form-message-item-color);
 
   /* typography */
+  font: inherit;
+  letter-spacing: inherit;
 
   /* size */
+  margin: 0;
 
   /* border */
 
@@ -54,10 +59,10 @@
   /* motion */
 }
 
-.form-message--success {
+.form-message__item--default {
   /* color */
-  --form-message-color:
-    var(--color-text-good);
+  --form-message-item-color:
+    var(--form-message-color);
 
   /* typography */
 
@@ -70,10 +75,10 @@
   /* motion */
 }
 
-.form-message--warning {
+.form-message__item--success {
   /* color */
-  --form-message-color:
-    var(--color-text-med);
+  --form-message-item-color:
+    var(--color-text-good);
 
   /* typography */
 
@@ -86,10 +91,10 @@
   /* motion */
 }
 
-.form-message--error {
+.form-message__item--warning {
   /* color */
-  --form-message-color:
-    var(--color-text-bad);
+  --form-message-item-color:
+    var(--color-text-med);
 
   /* typography */
 
@@ -102,16 +107,14 @@
   /* motion */
 }
 
-.form-message__item {
+.form-message__item--error {
   /* color */
-  color: inherit;
+  --form-message-item-color:
+    var(--color-text-bad);
 
   /* typography */
-  font: inherit;
-  letter-spacing: inherit;
 
   /* size */
-  margin: 0;
 
   /* border */
 
@@ -133,4 +136,4 @@
   /* depth */
 
   /* motion */
-}
+}

package/components/form-message/form-message.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import './form-message.css';
-export type FormMessageStatus = 'info' | 'success' | 'warning' | 'error';
+export type FormMessageStatus = 'default' | 'success' | 'warning' | 'error';
 export interface FormMessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    status: FormMessageStatus;
     children: React.ReactNode;
 }
 export interface FormMessageItemProps extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'children'> {
+    status?: FormMessageStatus;
     children: React.ReactNode;
 }
 interface FormMessageComponent extends React.FC<FormMessageProps> {

package/components/form-message/form-message.js

@@ -3,6 +3,7 @@ import './form-message.css';
 import { classnames } from '../helpers/classnames';
 
 const FormMessageItem = ({
+  status = "default",
   children,
   className = "",
   ...props
@@ -10,19 +11,25 @@ const FormMessageItem = ({
   const classes = classnames(
     "form-message__item",
     className,
-    {}
+    {
+      "form-message__item--default": status === "default",
+      "form-message__item--success": status === "success",
+      "form-message__item--warning": status === "warning",
+      "form-message__item--error": status === "error"
+    }
   );
+  const role = status === "error" ? "alert" : status === "success" || status === "warning" ? "status" : void 0;
   return /* @__PURE__ */ jsx(
     "p",
     {
       ...props,
       className: classes,
+      role,
       children
     }
   );
 };
 const FormMessage = ({
-  status,
   children,
   className = "",
   ...props
@@ -30,20 +37,13 @@ const FormMessage = ({
   const classes = classnames(
     "form-message",
     className,
-    {
-      "form-message--info": status === "info",
-      "form-message--success": status === "success",
-      "form-message--warning": status === "warning",
-      "form-message--error": status === "error"
-    }
+    {}
   );
-  const role = status === "error" ? "alert" : "status";
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...props,
       className: classes,
-      role,
       children
     }
   );

package/components/form-message/form-message.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,MAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,yBACE,MAAA,KAAW,SAAA;AAAA,MACb,uBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,MAAA,KAAW,OAAA,GACP,OAAA,GACA,QAAA;AAEN,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.js","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  status: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {},\n  );\n\n  return (\n    <p\n      {...props}\n      className={classes}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  status,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {\n      'form-message--info':\n        status === 'info',\n      'form-message--success':\n        status === 'success',\n      'form-message--warning':\n        status === 'warning',\n      'form-message--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : 'status';\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}
+{"version":3,"sources":["../../../src/components/form-message/form-message.tsx"],"names":[],"mappings":";;;;AA4BA,MAAM,kBAEF,CAAC;AAAA,EACH,MAAA,GAAS,SAAA;AAAA,EACT,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,oBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,+BACE,MAAA,KAAW,SAAA;AAAA,MACb,6BACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,IAAA,GACJ,WAAW,OAAA,GACP,OAAA,GACA,WAAW,SAAA,IACT,MAAA,KAAW,YACX,QAAA,GACA,MAAA;AAER,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MACX,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ,CAAA;AAOA,MAAM,cAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,OAAA;AAAA,MAEV;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,WAAA,CAAY,IAAA,GAAO,eAAA;AAEnB,IAAO,oBAAA,GAAQ","file":"form-message.js","sourcesContent":["import React from 'react';\n\nimport './form-message.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type FormMessageStatus =\n  | 'default'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport interface FormMessageProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  children: React.ReactNode;\n}\n\nexport interface FormMessageItemProps\n  extends Omit<\n    React.HTMLAttributes<HTMLParagraphElement>,\n    'children'\n  > {\n  status?: FormMessageStatus;\n  children: React.ReactNode;\n}\n\nconst FormMessageItem: React.FC<\n  FormMessageItemProps\n> = ({\n  status = 'default',\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message__item',\n    className,\n    {\n      'form-message__item--default':\n        status === 'default',\n      'form-message__item--success':\n        status === 'success',\n      'form-message__item--warning':\n        status === 'warning',\n      'form-message__item--error':\n        status === 'error',\n    },\n  );\n\n  const role =\n    status === 'error'\n      ? 'alert'\n      : status === 'success' ||\n          status === 'warning'\n        ? 'status'\n        : undefined;\n\n  return (\n    <p\n      {...props}\n      className={classes}\n      role={role}\n    >\n      {children}\n    </p>\n  );\n};\n\ninterface FormMessageComponent\n  extends React.FC<FormMessageProps> {\n  Item: React.FC<FormMessageItemProps>;\n}\n\nconst FormMessage: FormMessageComponent = ({\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'form-message',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n    >\n      {children}\n    </div>\n  );\n};\n\nFormMessage.Item = FormMessageItem;\n\nexport default FormMessage;\n"]}

package/components/surface/surface.css

@@ -72,6 +72,21 @@
   /* motion */
 }
 
+.surface--secondary a {
+  /* color */
+  --link-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);

package/package.json

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

package/styles.css

@@ -3469,14 +3469,19 @@
   /* motion */
 }
 
-.form-message--info {
+.form-message__item {
   /* color */
-  --form-message-color:
-    var(--color-text);
+  --form-message-item-color:
+    var(--form-message-color);
+
+  color: var(--form-message-item-color);
 
   /* typography */
+  font: inherit;
+  letter-spacing: inherit;
 
   /* size */
+  margin: 0;
 
   /* border */
 
@@ -3485,10 +3490,10 @@
   /* motion */
 }
 
-.form-message--success {
+.form-message__item--default {
   /* color */
-  --form-message-color:
-    var(--color-text-good);
+  --form-message-item-color:
+    var(--form-message-color);
 
   /* typography */
 
@@ -3501,10 +3506,10 @@
   /* motion */
 }
 
-.form-message--warning {
+.form-message__item--success {
   /* color */
-  --form-message-color:
-    var(--color-text-med);
+  --form-message-item-color:
+    var(--color-text-good);
 
   /* typography */
 
@@ -3517,10 +3522,10 @@
   /* motion */
 }
 
-.form-message--error {
+.form-message__item--warning {
   /* color */
-  --form-message-color:
-    var(--color-text-bad);
+  --form-message-item-color:
+    var(--color-text-med);
 
   /* typography */
 
@@ -3533,16 +3538,14 @@
   /* motion */
 }
 
-.form-message__item {
+.form-message__item--error {
   /* color */
-  color: inherit;
+  --form-message-item-color:
+    var(--color-text-bad);
 
   /* typography */
-  font: inherit;
-  letter-spacing: inherit;
 
   /* size */
-  margin: 0;
 
   /* border */
 
@@ -4743,6 +4746,21 @@
   /* motion */
 }
 
+.surface--secondary a {
+  /* color */
+  --link-color: var(--color-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--tertiary {
   /* color */
   --surface-bg: var(--color-bg-container-tertiary);

package/themes/base/desktop.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/base/desktop.md

@@ -28,17 +28,17 @@
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
-| `color/semi-bad` | `color` | `#FF4000` |
-| `color/semi-good` | `color` | `#FFBF00` |
+| `color/semi/bad` | `color` | `#FF4000` |
+| `color/semi/good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
 | `color/text/alt` | `color` | `#FFFFFF` |
-| `color/text/bad` | `color` | `#FA4691` |
+| `color/text/bad` | `color` | `#FF4000` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/container/secondary` | `color` | `#FFFFFF` |
 | `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
-| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/good` | `color` | `#0CFF6D` |
 | `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |

package/themes/base/desktop.scoped.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/base/diagram.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/base/diagram.md

@@ -28,17 +28,17 @@
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
-| `color/semi-bad` | `color` | `#FF4000` |
-| `color/semi-good` | `color` | `#FFBF00` |
+| `color/semi/bad` | `color` | `#FF4000` |
+| `color/semi/good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
 | `color/text/alt` | `color` | `#FFFFFF` |
-| `color/text/bad` | `color` | `#FA4691` |
+| `color/text/bad` | `color` | `#FF4000` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/container/secondary` | `color` | `#FFFFFF` |
 | `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
-| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/good` | `color` | `#0CFF6D` |
 | `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |

package/themes/base/diagram.scoped.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/base/mobile.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/base/mobile.md

@@ -28,17 +28,17 @@
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
-| `color/semi-bad` | `color` | `#FF4000` |
-| `color/semi-good` | `color` | `#FFBF00` |
+| `color/semi/bad` | `color` | `#FF4000` |
+| `color/semi/good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
 | `color/text/alt` | `color` | `#FFFFFF` |
-| `color/text/bad` | `color` | `#FA4691` |
+| `color/text/bad` | `color` | `#FF4000` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/container/secondary` | `color` | `#FFFFFF` |
 | `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
-| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/good` | `color` | `#0CFF6D` |
 | `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |

package/themes/base/mobile.scoped.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/brandcopilot/desktop.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/brandcopilot/desktop.md

@@ -28,17 +28,17 @@
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
-| `color/semi-bad` | `color` | `#FF4000` |
-| `color/semi-good` | `color` | `#FFBF00` |
+| `color/semi/bad` | `color` | `#FF4000` |
+| `color/semi/good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
 | `color/text/alt` | `color` | `#FFFFFF` |
-| `color/text/bad` | `color` | `#FA4691` |
+| `color/text/bad` | `color` | `#FF4000` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/container/secondary` | `color` | `#FFFFFF` |
 | `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
-| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/good` | `color` | `#0CFF6D` |
 | `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |

package/themes/brandcopilot/desktop.scoped.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/brandcopilot/diagram.css

@@ -27,13 +27,13 @@
   --color-semi-good: #FFBF00;
   --color-text: #FFFFFF;
   --color-text-alt: var(--color-alt);
-  --color-text-bad: var(--color-bad);
+  --color-text-bad: var(--color-semi-bad);
   --color-text-container: #000000;
   --color-text-container-secondary: var(--color-text-primary-2);
   --color-text-container-tertiary: var(--color-text-contrast);
   --color-text-contrast: #000000;
   --color-text-control: #000000;
-  --color-text-good: var(--color-good);
+  --color-text-good: #0CFF6D;
   --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;

package/themes/brandcopilot/diagram.md

@@ -28,17 +28,17 @@
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
-| `color/semi-bad` | `color` | `#FF4000` |
-| `color/semi-good` | `color` | `#FFBF00` |
+| `color/semi/bad` | `color` | `#FF4000` |
+| `color/semi/good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
 | `color/text/alt` | `color` | `#FFFFFF` |
-| `color/text/bad` | `color` | `#FA4691` |
+| `color/text/bad` | `color` | `#FF4000` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/container/secondary` | `color` | `#FFFFFF` |
 | `color/text/container/tertiary` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
-| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/good` | `color` | `#0CFF6D` |
 | `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |