@moises.ai/design-system 2.0.2 → 2.0.4

package/README.md

@@ -83,6 +83,34 @@ Make sure to import this at the root of your application to ensure all styles ar
 3. Start development mode: `npm run dev`
 4. Build: `npm run build`
 
+## Local Testing
+
+To test the package locally in another project before publishing to npm:
+
+1. Install yalc globally:
+   ```bash
+   npm install -g yalc
+   ```
+
+2. In the design system directory, temporarily update the version in package.json to a unique version (e.g., "50.0.1")
+
+3. Publish the package locally:
+   ```bash
+   yalc publish
+   ```
+
+4. In the target project where you want to test the design system:
+   ```bash
+   yalc add @moises.ai/design-system@50.0.1
+   ```
+
+5. When finished testing, remove the local package:
+   ```bash
+   # In the target project
+   yalc remove @moises.ai/design-system@50.0.1
+   npm install # or yarn to restore the published version
+   ```
+
 ## License
 
 MIT

package/dist/colors/custom-styles.css

@@ -100,9 +100,130 @@
   --mint-dark-alpha-11: rgba(120, 255, 190, 1);
   --mint-dark-alpha-12: rgba(166, 254, 205, 1);
 
+  --neutral-1: #fff;
+  --neutral-2: #474747;
+  --neutral-3: #E8EAEC;
+  --neutral-4: #43484E;
+  --neutral-5: #18191B;
   --neutral-10: rgba(119, 123, 132, 1);
   --neutral-11: rgba(176, 180, 186, 1);
   --neutral-12: rgba(237, 238, 240, 1);
 
+  --neutral-alpha-1: rgba(255, 255, 255, 0.00);
   --neutral-alpha-3: rgba(221, 234, 248, 0.08);
+  --neutral-alpha-5: rgba(217, 237, 254, 0.15);
+  --neutral-alpha-9: rgba(223, 235, 253, 0.43);
+  --neutral-alpha-10: rgba(229, 237, 253, 0.48);
+  --neutral-alpha-11: rgba(176, 180, 186, 1);
+
+  /* Panel */
+  --panel-solid: #18191B;
+
+  .radix-themes {
+    --cursor-button: pointer;
+    --cursor-checkbox: pointer;
+    --cursor-disabled: default;
+    --cursor-link: pointer;
+    --cursor-menu-item: pointer;
+    --cursor-radio: pointer;
+    --cursor-slider-thumb: grab;
+    --cursor-slider-thumb-active: grabbing;
+    --cursor-switch: pointer;
+
+    /* custom mint  color*/
+    --mint-1 : var(--mint-1);
+    --mint-2 : var(--mint-2);
+    --mint-3 : var(--mint-3);
+    --mint-4 : var(--mint-4);
+    --mint-5 : var(--mint-5);
+    --mint-6 : var(--mint-6);
+    --mint-7 : var(--mint-7);
+    --mint-8 : var(--mint-8);
+    --mint-9 : var(--mint-9);
+    --mint-10 : var(--mint-10);
+    --mint-11 : var(--mint-11);
+    --mint-12 : var(--mint-12);
+
+    --mint-a1: var(--mint-alpha-1);
+    --mint-a2: var(--mint-alpha-2);
+    --mint-a3: var(--mint-alpha-3);
+    --mint-a4: var(--mint-alpha-4);
+    --mint-a5: var(--mint-alpha-5);
+    --mint-a6: var(--mint-alpha-6);
+    --mint-a7: var(--mint-alpha-7);
+    --mint-a8: var(--mint-alpha-8);
+    --mint-a9: var(--mint-alpha-9);
+    --mint-a10: var(--mint-alpha-10);
+    --mint-a11: var(--mint-alpha-11);
+    --mint-a12: var(--mint-alpha-12);
+
+    --mint-d1: var(--mint-dark-1);
+    --mint-d2: var(--mint-dark-2);
+    --mint-d3: var(--mint-dark-3);
+    --mint-d4: var(--mint-dark-4);
+    --mint-d5: var(--mint-dark-5);
+    --mint-d6: var(--mint-dark-6);
+    --mint-d7: var(--mint-dark-7);
+    --mint-d8: var(--mint-dark-8);
+    --mint-d9: var(--mint-dark-9);
+    --mint-d10: var(--mint-dark-10);
+    --mint-d11: var(--mint-dark-11);
+    --mint-d12: var(--mint-dark-12);
+
+    --mint-d-a1: var(--mint-dark-alpha-1);
+    --mint-d-a2: var(--mint-dark-alpha-2);
+    --mint-d-a3: var(--mint-dark-alpha-3);
+    --mint-d-a4: var(--mint-dark-alpha-4);
+    --mint-d-a5: var(--mint-dark-alpha-5);
+    --mint-d-a6: var(--mint-dark-alpha-6);
+    --mint-d-a7: var(--mint-dark-alpha-7);
+    --mint-d-a8: var(--mint-dark-alpha-8);
+    --mint-d-a9: var(--mint-dark-alpha-9);
+    --mint-d-a10: var(--mint-dark-alpha-10);
+    --mint-d-a11: var(--mint-dark-alpha-11);
+    --mint-d-a12: var(--mint-dark-alpha-12);
+  }
+  [data-accent-color='mint']:where(.rt-variant-ghost) {
+    background-color: transparent;
+    color: rgba(10, 255, 167, 1) !important;
+  }
+
+  [data-accent-color='mint']:where(.rt-variant-ghost):hover:not([data-disabled]) {
+    background-color: transparent;
+    color: rgba(166, 254, 205, 1) !important;
+  }
+
+  [data-accent-color='mint']:where(.rt-variant-ghost):where([data-disabled]){
+    color: rgba(10, 255, 167, 0.5) !important;
+  }
+
+  [data-accent-color='red']:where(.rt-variant-ghost) {
+    background-color: transparent;
+    color: rgba(255, 149, 146, 1) !important;
+  }
+
+  [data-accent-color='red']:where(.rt-variant-ghost):where([data-disabled]){
+    color: rgba(255, 100, 101, 0.92) !important;
+  }
+
+  [data-accent-color='red']:where(.rt-variant-ghost):hover:not([data-disabled]) {
+    background-color: transparent;
+    color: rgba(255, 209, 217, 1) !important;
+  }
+
+  [data-accent-color='gray']:where(.rt-variant-ghost) {
+    background-color: transparent;
+    color: rgba(176, 180, 186, 1) !important;
+  }
+
+  [data-accent-color='gray']:where(.rt-variant-ghost):where([data-disabled]){
+    color: rgba(119, 123, 132, 1) !important;
+  }
+
+  [data-accent-color='gray']:where(.rt-variant-ghost):hover:not([data-disabled]) {
+    background-color: transparent;
+    color: rgba(237, 238, 240, 1) !important;
+  }
+
+
 }