jvetrau-ds 0.2.25 → 0.2.27

package/components/surface/surface.css

@@ -23,6 +23,21 @@
   /* motion */
 }
 
+.surface--primary .form-message__item--success {
+  /* color */
+  --form-message-item-color: var(--surface-color);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--secondary {
   /* color */
   --surface-bg: var(--color-bg-container-secondary);
@@ -72,6 +87,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);
@@ -106,6 +136,24 @@
   /* motion */
 }
 
+.surface--secondary .progressbar {
+  /* color */
+  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
+  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
+  --progressbar-value-bg: var(--color-primary-1);
+  --progressbar-label-color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--outline {
   /* color */
   background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "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 */
 
@@ -3687,50 +3690,121 @@
   /* motion */
 }
 
-.logo--symbol {
+.logo--symbol,
+.logo--favicon {
+  /* color */
+
+  /* typography */
+
   /* size */
   gap: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .logo--brandcopilot {
+  /* color */
+
+  /* typography */
+
   /* size */
   --logo-brandcopilot-height: 45px;
   --logo-brandcopilot-wordmark-width: 79px;
 
   align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 :where(a, button) .logo {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
   /* motion */
   cursor: pointer;
 }
 
 .logo__symbol {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: block;
   width: var(--logo-symbol-size);
   height: var(--logo-symbol-size);
   flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .logo__wordmark {
+  /* color */
+
+  /* typography */
+
   /* size */
   display: block;
   width: var(--logo-wordmark-width);
   height: auto;
   flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .logo--brandcopilot .logo__symbol {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: auto;
   height: var(--logo-brandcopilot-height);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .logo--brandcopilot .logo__wordmark {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: var(--logo-brandcopilot-wordmark-width);
   height: var(--logo-brandcopilot-height);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .logo__wordmark--mask {
@@ -4694,6 +4768,21 @@
   /* motion */
 }
 
+.surface--primary .form-message__item--success {
+  /* color */
+  --form-message-item-color: var(--surface-color);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--secondary {
   /* color */
   --surface-bg: var(--color-bg-container-secondary);
@@ -4743,6 +4832,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);
@@ -4777,6 +4881,24 @@
   /* motion */
 }
 
+.surface--secondary .progressbar {
+  /* color */
+  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-1) 30%, transparent);
+  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-1) 40%, transparent);
+  --progressbar-value-bg: var(--color-primary-1);
+  --progressbar-label-color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .surface--outline {
   /* color */
   background: transparent;

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` |

package/themes/brandcopilot/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/brandcopilot/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/brandcopilot/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` |