@axinom/mosaic-ui 0.67.0-rc.2 → 0.67.0

package/src/components/List/ListRow/ListRow.scss

@@ -29,7 +29,7 @@
 
   &.disabled {
     cursor: not-allowed;
-    color: var(--disabled-text-color, var(--ax-neutral));
+    color: var(--disabled-text-color, var(--list-row-disabled-text-color, $list-row-disabled-text-color));
   }
 
   .actions {

package/src/components/PageHeader/PageHeader.scss

@@ -38,7 +38,7 @@
 
       margin-top: 12px;
 
-      color: var(--ax-neutral);
+      color: var(--page-header-subtitle-color, $page-header-subtitle-color);
       font-size: 16px;
     }
 

package/src/components/Tabs/Tab/CustomTab.scss

@@ -5,7 +5,7 @@
 
   display: grid;
   height: 50px;
-  color: var(--ax-primary);
+  color: var(--tab-text-color, $tab-text-color);
   font-size: 14px;
   font-weight: bold;
   border-bottom: none;
@@ -17,17 +17,17 @@
 
   &.selected {
     background: white;
-    color: var(--ax-primary-dark);
+    color: var(--tab-selected-text-color, $tab-selected-text-color);
   }
 
   &:hover:not(.selected):not(.disabled) {
-    background-color: var(--ax-primary);
+    background-color: var(--tab-hover-bg-color, $tab-hover-bg-color);
     transition: background-color $confirmation-transition linear;
     color: white;
   }
 
   &.disabled {
-    color: var(--ax-neutral);
+    color: var(--tab-disabled-text-color, $tab-disabled-text-color);
     cursor: default;
   }
 }

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -4,6 +4,6 @@
   border: none;
   margin: 0;
   padding: 0;
-  background-color: var(--ax-neutral-lighter);
-  border-top: 1px solid var(--ax-neutral-lighter);
+  background-color: var(--tab-list-bg-color, $tab-list-bg-color);
+  border-top: 1px solid var(--tab-list-border-color, $tab-list-border-color);
 }

package/src/styles/branding.scss

@@ -7,20 +7,20 @@
  * ## CSS Custom Properties Defined
  *
  * ### Primary Colors (Blues)
- * - `--ax-primary`: Base primary color (#1478af)
- * - `--ax-primary-dark`: Darker variant (auto-derived using HSL relative color syntax)
- * - `--ax-primary-light`: Lighter variant (auto-derived using HSL relative color syntax)
+ * - `--mosaic-primary`: Base primary light color (#28aae1)
+ * - `--mosaic-secondary`: Base variant (#1478af - auto-derived using RGB relative color syntax)
+ * - `--mosaic-accent`: Darker variant (#00467d - auto-derived using RGB relative color syntax)
  *
  * ### Neutral Colors (Grays)
- * - `--ax-neutral`: Base neutral color (#b7b7b7)
- * - `--ax-neutral-dark`: Darker variant (#707070)
- * - `--ax-neutral-light`: Lighter variant (#dddddd)
- * - `--ax-neutral-lighter`: Lightest variant (#eeeeee)
+ * - `--mosaic-neutral`: Base neutral color (#b7b7b7)
+ * - `--mosaic-neutral-1`: Darker variant (#707070)
+ * - `--mosaic-neutral-2`: Lighter variant (#dddddd)
+ * - `--mosaic-neutral-3`: Lightest variant (#eeeeee)
  *
  * ### Semantic Colors
- * - `--ax-error`: Error/danger state color (#f06c55 - red)
- * - `--ax-warning`: Warning state color (#ffc81a - yellow)
- * - `--ax-success`: Success state color (#95c852 - green)
+ * - `--mosaic-error`: Error/danger state color (#f06c55 - red)
+ * - `--mosaic-warning`: Warning state color (#ffc81a - yellow)
+ * - `--mosaic-success`: Success state color (#95c852 - green)
  *
  * ## Runtime Theming Usage
  *
@@ -32,20 +32,20 @@
  * Override colors in your application's CSS/SCSS:
  *
  *   :root {
- *     --ax-primary: #ff5733;  // No !important needed
- *     --ax-neutral: #666666;
+ *     --mosaic-secondary: #ff5733;  // No !important needed
+ *     --mosaic-neutral: #666666;
  *   }
  *
  * ### Example - Purple Theme
  *
  *   :root {
- *     --ax-primary: #7c3aed;
+ *     --mosaic-primary: #9d7aed;
  *   }
- *   // --ax-primary-dark and --ax-primary-light automatically adjust!
+ *   // --mosaic-secondary and --mosaic-accent automatically adjust!
  *
  * ### Dynamic Runtime Override
  *
- *   document.documentElement.style.setProperty('--ax-primary', '#7c3aed');
+ *   document.documentElement.style.setProperty('--mosaic-primary', '#9d7aed');
  *
  * ### Why This Works
  *
@@ -56,7 +56,7 @@
  *
  * ## Browser Support
  *
- * - CSS Relative Color Syntax (`hsl(from var(...))`) requires:
+ * - CSS Relative Color Syntax (`rgb(from var(...))`) requires:
  *   - Chrome 119+
  *   - Firefox 128+
  *   - Safari 16.4+
@@ -69,21 +69,25 @@
  */
 @layer ax-defaults {
   :root {
-    /* Base Primary Color - override this to change the entire primary palette */
-    --ax-primary: #1478af;
-    --ax-primary-dark: hsl(from var(--ax-primary) h calc(s + 24) calc(l - 13));
-    --ax-primary-light: hsl(
-      from var(--ax-primary) calc(h - 4) calc(s + 3) calc(l + 14)
+    /* Base Primary Light Color - override this to change the entire primary palette */
+    --mosaic-primary: #28aae1;
+    --mosaic-secondary: #1478af;
+    --mosaic-secondary: rgb(
+      from var(--mosaic-primary) calc(r * 0.5) calc(g * 0.706) calc(b * 0.778)
+    );
+    --mosaic-accent: #00467d;
+    --mosaic-accent: rgb(
+      from var(--mosaic-primary) calc(r * 0) calc(g * 0.412) calc(b * 0.556)
     );
 
-    --ax-neutral: #b7b7b7;
-    --ax-neutral-dark: #707070;
-    --ax-neutral-light: #dddddd;
-    --ax-neutral-lighter: #eeeeee;
+    --mosaic-neutral: #b7b7b7;
+    --mosaic-neutral-1: #707070;
+    --mosaic-neutral-2: #dddddd;
+    --mosaic-neutral-3: #eeeeee;
 
     /* Semantic Colors */
-    --ax-error: #f06c55;
-    --ax-warning: #ffc81a;
-    --ax-success: #95c852;
+    --mosaic-error: #f06c55;
+    --mosaic-warning: #ffc81a;
+    --mosaic-success: #95c852;
   }
 }