@moises.ai/design-system 4.19.3 → 4.19.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.19.3",
+  "version": "4.19.5",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/colors/custom-styles.css

@@ -106,31 +106,31 @@
   --Colors-Neutral-Neutral-Alpha-10: var(--colors-neutral-neutral-alpha-10);
   --Colors-Neutral-Neutral-1: var(--colors-neutral-neutral-1);
 
-  --neutral-1: var(--colors-neutral-neutral-1);
-  --neutral-2: rgba(24, 25, 27, 1);
-  --neutral-3: rgba(33, 34, 37, 1);
-  --neutral-4: rgba(39, 42, 45, 1);
-  --neutral-5: rgba(46, 49, 53, 1);
-  --neutral-6: rgba(54, 58, 63, 1);
-  --neutral-7: rgba(67, 72, 78, 1);
-  --neutral-8: rgba(90, 97, 105, 1);
-  --neutral-9: rgba(105, 110, 119, 1);
-  --neutral-10: rgba(119, 123, 132, 1);
-  --neutral-11: rgba(176, 180, 186, 1);
-  --neutral-12: rgba(237, 238, 240, 1);
+  --neutral-1: #101013;
+  --neutral-2: #16181C;
+  --neutral-3: #1F2126;
+  --neutral-4: #25292E;
+  --neutral-5: #2B2F35;
+  --neutral-6: #32383F;
+  --neutral-7: #3F464E;
+  --neutral-8: #565F69;
+  --neutral-9: #656C77;
+  --neutral-10: #737884;
+  --neutral-11: #ACB4BF;
+  --neutral-12: #E6EAF0;
 
-  --neutral-alpha-1: rgba(0, 0, 0, 0);
-  --neutral-alpha-2: var(--colors-neutral-neutral-alpha-2);
-  --neutral-alpha-3: var(--colors-neutral-neutral-alpha-3);
-  --neutral-alpha-4: var(--colors-neutral-neutral-alpha-4);
-  --neutral-alpha-5: var(--colors-neutral-neutral-alpha-5);
-  --neutral-alpha-6: rgba(214, 235, 253, 0.19);
-  --neutral-alpha-7: rgba(217, 237, 255, 0.25);
-  --neutral-alpha-8: rgba(217, 237, 255, 0.36);
-  --neutral-alpha-9: rgba(223, 235, 253, 0.43);
-  --neutral-alpha-10: var(--colors-neutral-neutral-alpha-10);
-  --neutral-alpha-11: rgba(241, 247, 254, 0.71);
-  --neutral-alpha-12: rgba(252, 253, 255, 0.94);
+  --neutral-alpha-1: rgba(207, 234, 236, 0.02);
+  --neutral-alpha-2: rgba(197, 239, 246, 0.04);
+  --neutral-alpha-3: rgba(206, 222, 248, 0.08);
+  --neutral-alpha-4: rgba(196, 228, 248, 0.11);
+  --neutral-alpha-5: rgba(201, 226, 254, 0.15);
+  --neutral-alpha-6: rgba(200, 228, 253, 0.19);
+  --neutral-alpha-7: rgba(204, 231, 255, 0.25);
+  --neutral-alpha-8: rgba(204, 231, 255, 0.36);
+  --neutral-alpha-9: rgba(207, 226, 253, 0.43);
+  --neutral-alpha-10: rgba(218, 229, 253, 0.48);
+  --neutral-alpha-11: rgba(229, 240, 254, 0.75);
+  --neutral-alpha-12: rgba(242, 247, 255, 0.94);
 
   /* Neutral Extras */
   --neutral-alpha-0-50: rgba(17, 17, 19, 0.50);

package/src/components/Countdown/Countdown.module.css

@@ -89,7 +89,7 @@
 }
 
 .labelSmall.white {
-  color: #737373;
+  color: var(--neutral-10);
 }
 
 .labelSmall.sm {
@@ -158,7 +158,7 @@
 }
 
 .skeletonBox.white .skeleton {
-  background: linear-gradient(90deg, #d5d5d5 4.69%, #a1a1a1 100%);
+  background: linear-gradient(90deg, var(--neutral-11) 4.69%, var(--neutral-9) 100%);
   animation: skeleton_animate 1s infinite;
 }
 
@@ -167,9 +167,9 @@
   height: 60px;
   background: linear-gradient(
     90deg,
-    var(--gray-3) 25%,
-    var(--gray-4) 50%,
-    var(--gray-3) 75%
+    var(--neutral-3) 25%,
+    var(--neutral-4) 50%,
+    var(--neutral-3) 75%
   );
   background-size: 200% 100%;
   animation: skeleton_animate 1.5s ease-in-out infinite;

package/src/components/DataTable/DataTable.module.css

@@ -328,18 +328,18 @@
 }
 
 .DataTable :global(.rt-TableRow:hover) .projectCell:not(.dropdownColumn) :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .DataTable
   :global(.rt-TableRow:focus-within)
   .projectCell:not(.dropdownColumn)
   :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .rowSelected .projectCell:not(.dropdownColumn) :not(.artistText) {
-  color: #edeef0;
+  color: var(--neutral-12);
 }
 
 .dropdownTriggerWrapper {

package/src/components/EmptyState/EmptyState.jsx

@@ -22,9 +22,9 @@ export const EmptyState = ({
 }) => {
   const hasButtonContent = children != null || buttonLabel != null
   return (
-    <Theme asChild>
+    <Theme asChild hasBackground={false}>
       <Flex
-        className={classNames(className)}
+        className={classNames(styles.root, className)}
         direction="column"
         align="center"
         justify="center"

package/src/components/EmptyState/EmptyState.module.css

@@ -1,10 +1,11 @@
+.root {
+  background: transparent;
+}
 
 .content {
-
   max-width: 480px;
   min-width: 320px;
   width: 100%;
-
 }
 
 .iconWrapper {

package/src/components/Extension/Extension.jsx

@@ -77,7 +77,7 @@ function Header({ title, onBack, headerLeft, headerRight, allowClose = true, onC
             gap="1"
             mx="4"
             py="3"
-            style={{ borderBottom: '1px solid var(--gray-a4)' }}
+            style={{ borderBottom: '1px solid var(--neutral-alpha-4)' }}
         >
             {headerLeft !== undefined ? (
                 headerLeft

package/src/components/Extension/Extension.stories.jsx

@@ -11,7 +11,7 @@ const sidebarDecorator = (Story) => (
     style={{
       width: 300,
       height: 500,
-      border: '1px solid var(--gray-a6)',
+      border: '1px solid var(--neutral-alpha-6)',
       borderRadius: 8,
       overflow: 'hidden',
       display: 'flex',
@@ -387,7 +387,7 @@ function KeepMountedHomeScreen() {
         style={{
           padding: 8,
           borderRadius: 6,
-          border: '1px solid var(--gray-a6)',
+          border: '1px solid var(--neutral-alpha-6)',
         }}
       />
       <Button variant="soft" size="2" onClick={() => push('next')}>

package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx

@@ -11,7 +11,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)', width: '240px' }}>
         <Story />
       </div>
     ),
@@ -321,7 +321,7 @@ export const MultipleMeters = {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d', width: '240px' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)', width: '240px' }}>
         <Story />
       </div>
     ),

package/src/components/Knob/utils.js

@@ -107,7 +107,7 @@ export const getPointerProperties = (activeDotIndex, disabled) => {
 
   return {
     pointerRotation: angleInDegrees,
-    pointerColor: disabled ? '#43484E' : '#B0B4BA',
+    pointerColor: disabled ? 'var(--neutral-7)' : 'var(--neutral-11)',
   }
 }
 

package/src/components/PanControl/PanControl.jsx

@@ -190,8 +190,8 @@ export const PanControl = ({
                 A ${KNOB_RADIUS} ${KNOB_RADIUS} 0 ${largeArc} ${sweep}
                 ${x2.toFixed(3)} ${y2.toFixed(3)}`,
       pointerRotation: displayNorm * 180,
-      arcColor: disabled ? '#5A6169' : '#19E4F1',
-      pointerColor: disabled ? '#43484E' : '#B0B4BA',
+      arcColor: disabled ? 'var(--neutral-8)' : '#19E4F1',
+      pointerColor: disabled ? 'var(--neutral-7)' : 'var(--neutral-11)',
     }
   }, [value, disabled, minValue, maxValue])
 

package/src/components/PeakLevel/PeakLevel.stories.jsx

@@ -12,7 +12,7 @@ export default {
   },
   decorators: [
     (Story) => (
-      <div style={{ padding: '16px', background: '#1d1d1d' }}>
+      <div style={{ padding: '16px', background: 'var(--neutral-2)' }}>
         <Story />
       </div>
     ),

package/src/components/RecordingForm/RecordingForm.module.css

@@ -23,7 +23,7 @@
   flex: 1;
   height: 100%;
   border-radius: 1px;
-  background: #333;
+  background: var(--neutral-6);
   transition: background-color 0.1s ease;
 }
 

package/src/components/Select/Select.jsx

@@ -93,32 +93,28 @@ export const Select = ({
                     })}
                     disabled={disabled || readOnly}
                   >
-                    <Text size={size} style={{ color: 'var(--neutral-12)' }}>
-                      {item.label}
-                    </Text>
-                    {item.aiDetected && (
-                      <Text
-                        size="1"
-                        style={{
-                          color: 'var(--aqua-alpha-9)',
-                          verticalAlign: 'top',
-                        }}
-                      >
-                        ✦
+                    <span className={styles.itemLabel}>
+                      <Text size={size} style={{ color: 'var(--neutral-12)' }}>
+                        {item.label}
                       </Text>
-                    )}
-                    {item.extra && (
-                      <Text
-                        size={size}
-                        className={styles.extra}
-                        style={{
-                          color: 'var(--neutral-alpha-9)',
-                        }}
-                      >
-                        {' '}
-                        {item.extra}
-                      </Text>
-                    )}
+                      {item.aiDetected && (
+                        <span className={styles.aiDetected} aria-hidden>
+                          ✦
+                        </span>
+                      )}
+                      {item.extra && (
+                        <Text
+                          size={size}
+                          className={styles.extra}
+                          style={{
+                            color: 'var(--neutral-alpha-9)',
+                          }}
+                        >
+                          {' '}
+                          {item.extra}
+                        </Text>
+                      )}
+                    </span>
                   </SelectRadix.Item>
                 ),
               )}

package/src/components/Select/Select.module.css

@@ -147,3 +147,16 @@
   padding: 12px 15px;
 }
 
+.itemLabel {
+  line-height: 1;
+}
+
+.aiDetected {
+  color: var(--aqua-alpha-9);
+  font-size: var(--font-size-1);
+  line-height: 1;
+  display: inline-block;
+  vertical-align: super;
+  margin-left: 2px;
+}
+

package/src/components/SetlistList/SetlistList.module.css

@@ -21,7 +21,7 @@
 
   &:hover,
   &.menuOpen {
-    background: #212225 !important;
+    background: var(--neutral-3) !important;
 
     .avatarSetlist {
       background: var(--neutral-alpha-3);

package/src/components/Shell/Shell.stories.jsx

@@ -91,11 +91,11 @@ export const Default = {
             <div key="credits-header">
               <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="showActiveTrigger">
                 <Text as="span" style={{ fontSize: 14, fontWeight: 'normal', lineHeight: '20px' }}>Credits: </Text>
-                <Text as="span" style={{ color: 'var(--gray-12)', fontSize: 14 }}>45/60</Text>
+                <Text as="span" style={{ color: 'var(--neutral-12)', fontSize: 14 }}>45/60</Text>
                 <button
                   type="button"
                   aria-label="Upgrade"
-                  style={{ border: 'none', cursor: 'pointer', backgroundColor: 'var(--cyan-9)', color: 'var(--gray-1)', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
+                  style={{ border: 'none', cursor: 'pointer', backgroundColor: 'var(--cyan-9)', color: 'var(--neutral-1)', fontSize: 12, fontWeight: 500, padding: '4px 8px', borderRadius: 4 }}
                   onClick={() => {
                     closeMenu?.()
                     console.log('Upgrade clicked - menu should close')

package/src/components/SliderLibrary/SliderLibrary.module.css

@@ -16,7 +16,7 @@
 }
 
 .root[data-disabled] .track {
-  background-color: #212225;
+  background-color: var(--neutral-3);
   opacity: 1;
   filter: none;
 }
@@ -25,7 +25,7 @@
   position: relative;
   flex-grow: 1;
   height: 4px;
-  background: var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--neutral-alpha-3);
   border-radius: 99px;
   overflow: hidden;
 }
@@ -46,19 +46,19 @@
   background: var(--white, #fff);
   border: none;
   border-radius: 99px;
-  box-shadow: 0 0 0 1px #2e31354d;
+  box-shadow: 0 0 0 1px var(--neutral-alpha-5);
   outline: none;
   cursor: ew-resize;
 }
 
 .thumb[data-focus-visible] {
-  outline: 2px solid var(--neutral-alpha-8, rgba(217, 237, 255, 0.36));
+  outline: 2px solid var(--neutral-alpha-8);
   outline-offset: 2px;
 }
 
 .root[data-disabled] .thumb {
   background-color: #18191b;
-  border: 1px solid #43484e;
+  border: 1px solid var(--neutral-7);
   box-shadow: none;
   cursor: default;
   opacity: 1;
@@ -66,7 +66,7 @@
 }
 
 .root[data-disabled] .range {
-  background-color: #303236;
+  background-color: var(--neutral-5);
   opacity: 1;
   filter: none;
 }

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -44,7 +44,7 @@ export default {
         style={{
           width: 280,
           padding: 24,
-          background: '#1d1d1d',
+          background: 'var(--neutral-2)',
           borderRadius: 8,
         }}
       >
@@ -134,7 +134,7 @@ export const TooltipTiming = {
           formatValue={(v) => `${v}%`}
           aria-label="Volume"
         />
-        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+        <span style={{ color: 'var(--neutral-11)', fontSize: 12 }}>
           Opens after {args.tooltipDelayDuration}ms · closes {args.tooltipCloseDelay}ms
           after leave
         </span>
@@ -178,7 +178,7 @@ export const ThumbDoubleClick = {
           formatValue={(v) => `${v}%`}
           aria-label="Volume"
         />
-        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+        <span style={{ color: 'var(--neutral-11)', fontSize: 12 }}>
           Double-click the thumb to reset to {defaultValue}%
         </span>
       </div>

package/src/components/SpecialDialog/SpecialDialog.module.css

@@ -52,7 +52,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--gray-1, #fcfcfd);
+  color: var(--neutral-12);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/StemGenerationForm/CreateNew/CreateNew.jsx

@@ -245,13 +245,13 @@ export const CreateNew = ({
           onClick={onAddConditioningAudio}
           style={{
             borderRadius: 'var(--radius-4)',
-            border: '1px solid #202224',
+            border: '1px solid var(--neutral-3)',
             cursor: 'pointer',
             paddingTop: 10,
             paddingBottom: 10,
           }}
         >
-          <AttachmentIcon width={16} height={16} style={{ color: '#B0B4BA' }} />
+          <AttachmentIcon width={16} height={16} style={{ color: 'var(--neutral-11)' }} />
           <Tooltip
             content={i18n._(
               'Best results: use isolated target instrument.',

package/src/components/TextField/TextField.jsx

@@ -20,6 +20,9 @@ export const TextField = ({
   error,
   secondaryText,
   autoFocus,
+  aiDetected = false,
+  textAlign = 'left',
+  style,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -27,6 +30,8 @@ export const TextField = ({
     startSlot ||
     (Icon ? <Icon width={16} height={16} className={styles.icon} /> : null)
 
+  const chars = String(value ?? '').length
+
   return (
     <Flex direction="column" width="100%" height="100%" gap="1">
       {title && (
@@ -48,7 +53,13 @@ export const TextField = ({
           [styles.focusRing]: focusRing || error,
           [styles.errorText]: error,
           [styles[`size${size}`]]: size,
+          [styles.alignCenter]: textAlign === 'center',
+          [styles.alignLeft]: textAlign === 'left',
         })}
+        style={{
+          ...(aiDetected && { '--ai-chars': chars }),
+          ...style,
+        }}
         readOnly={readOnly}
         disabled={disabled}
         autoFocus={autoFocus}
@@ -57,18 +68,25 @@ export const TextField = ({
         {resolvedStartSlot && (
           <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
         )}
+        {aiDetected && (
+          <span className={styles.aiDetected} aria-hidden>
+            <span className={styles.aiDetectedMark}>✦</span>
+          </span>
+        )}
         {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
       </TextFieldRadix.Root>
       {secondaryText && (
-        <Text size='1' weight="regular"
+        <Text
+          size="1"
+          weight="regular"
           className={classNames(styles.secondaryText, {
-            [styles.errorText]: error
-          })}>
+            [styles.errorText]: error,
+          })}
+        >
           {secondaryText}
         </Text>
-      )
-      }
-    </Flex >
+      )}
+    </Flex>
   )
 }
 

package/src/components/TextField/TextField.module.css

@@ -1,4 +1,5 @@
 .TextField {
+  position: relative;
   background-color: var(--neutral-alpha-3);
   color: var(--neutral-12);
   box-shadow: none;
@@ -27,6 +28,42 @@
   }
 }
 
+.alignLeft input {
+  text-align: left;
+}
+
+.alignCenter input {
+  text-align: center;
+  /* Radix uses text-indent as left inset; reset it so center is true center. */
+  text-indent: 0;
+  padding-left: var(--text-field-padding);
+  padding-right: var(--text-field-padding);
+}
+
+.aiDetected {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  line-height: 1;
+}
+
+.alignLeft .aiDetected {
+  left: calc(var(--text-field-padding) + (var(--ai-chars, 0) * 1ch) + 2px);
+}
+
+.alignCenter .aiDetected {
+  left: calc(50% + (var(--ai-chars, 0) * 0.5ch) + 2px);
+}
+
+.aiDetectedMark {
+  display: inline-block;
+  color: var(--aqua-alpha-9);
+  font-size: var(--font-size-1);
+  line-height: 1;
+  transform: translateY(-0.35em);
+}
+
 .icon {
   color: var(--neutral-alpha-10);
 }

package/src/components/TextField/TextField.stories.jsx

@@ -155,6 +155,23 @@ const MyComponent = () => (
         defaultValue: { summary: 'undefined' },
       },
     },
+    aiDetected: {
+      control: 'boolean',
+      description: 'Shows ✦ icon next to the input value when true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    textAlign: {
+      control: 'select',
+      options: ['left', 'center'],
+      description: 'Horizontal alignment of the input text',
+      table: {
+        type: { summary: "'left' | 'center'" },
+        defaultValue: { summary: 'left' },
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -273,3 +290,25 @@ export const WithCustomSlots = {
   },
   name: 'With custom slots',
 }
+
+export const WithAiDetected = {
+  args: {
+    ...Default.args,
+    title: 'Tempo',
+    value: '120',
+    textAlign: 'center',
+    aiDetected: true,
+  },
+  name: 'With AI detected',
+}
+
+export const WithAiDetectedLeft = {
+  args: {
+    ...Default.args,
+    title: 'Song tuning (Hz)',
+    value: '440',
+    textAlign: 'left',
+    aiDetected: true,
+  },
+  name: 'With AI detected (left)',
+}