@occmundial/occ-atomic 3.0.0-beta.61 → 3.0.0-beta.63

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.0.0-beta.63](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.62...v3.0.0-beta.63) (2024-09-30)
+
+
+### Bug Fixes
+
+* Exampl4 button color ([db1879e](https://github.com/occmundial/occ-atomic/commit/db1879ec8445274018099ef3acd41fee8dc097b4))
+
+# [3.0.0-beta.62](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.61...v3.0.0-beta.62) (2024-09-30)
+
+
+### Features
+
+* Adjusted NavTab examples ([bccb094](https://github.com/occmundial/occ-atomic/commit/bccb09481c608c05ad56611898645b5ca57a1745))
+
 # [3.0.0-beta.61](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.60...v3.0.0-beta.61) (2024-09-30)
 
 

package/build/NavAvatarButton/NavAvatarButton.js

@@ -13,7 +13,7 @@ var _Avatar = _interopRequireDefault(require("../Avatar"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-var _excluded = ["classes", "name", "disabled", "dense", "photo", "className"];
+var _excluded = ["classes", "name", "disabled", "theme", "dense", "photo", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -29,6 +29,8 @@ function NavButton(_ref) {
   var classes = _ref.classes,
       name = _ref.name,
       disabled = _ref.disabled,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'ghostWhite' : _ref$theme,
       dense = _ref.dense,
       photo = _ref.photo,
       className = _ref.className,
@@ -39,6 +41,7 @@ function NavButton(_ref) {
   buttonClasses += className ? " ".concat(className) : '';
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
     iconRight: "chevron-down",
+    theme: theme,
     disabled: disabled
   }, buttonProps, {
     className: buttonClasses

package/build/NavTab/NavTab.js

@@ -19,8 +19,6 @@ var _NavItem = _interopRequireDefault(require("../NavItem"));
 
 var _NavButton = _interopRequireDefault(require("../NavButton"));
 
-var _NavAvatarButton = _interopRequireDefault(require("../NavAvatarButton"));
-
 var _NavTop = _interopRequireDefault(require("../NavTop"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -155,7 +153,7 @@ var NavTab = /*#__PURE__*/function (_React$Component) {
           blue = _this$props4.blue;
       return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         theme: blue ? "ghostWhite" : "ghostGrey",
-        size: item.iconLeft || item.iconRight ? 'lg' : 'md',
+        size: item.icon || item.iconRight ? 'lg' : 'md',
         className: classes.button
       }, item), item.text);
     }

package/build/tokens/colors.json

@@ -99,43 +99,43 @@
       "100": "#fff"
     },
     "indigo": {
-      "5": "hsl(221 91.2% 35.7% / 0.05)",
-      "10": "hsl(221 91.2% 35.7% / 0.1)",
-      "20": "hsl(221 91.2% 35.7% / 0.2)",
-      "30": "hsl(221 91.2% 35.7% / 0.3)",
-      "40": "hsl(221 91.2% 35.7% / 0.4)",
-      "50": "hsl(221 91.2% 35.7% / 0.5)",
-      "60": "hsl(221 91.2% 35.7% / 0.6)",
-      "70": "hsl(221 91.2% 35.7% / 0.7)",
-      "80": "hsl(221 91.2% 35.7% / 0.8)",
-      "90": "hsl(221 91.2% 35.7% / 0.9)",
-      "100": "hsl(221 91.2% 35.7%)"
+      "5": "rgba(8, 60, 174, 0.05)",
+      "10": "rgba(8, 60, 174, 0.1)",
+      "20": "rgba(8, 60, 174, 0.2)",
+      "30": "rgba(8, 60, 174, 0.3)",
+      "40": "rgba(8, 60, 174, 0.4)",
+      "50": "rgba(8, 60, 174, 0.5)",
+      "60": "rgba(8, 60, 174, 0.6)",
+      "70": "rgba(8, 60, 174, 0.7)",
+      "80": "rgba(8, 60, 174, 0.8)",
+      "90": "rgba(8, 60, 174, 0.9)",
+      "100": "#083CAE"
     },
     "pink": {
-      "5": "hsl(344 87.1% 57.5% / 0.05)",
-      "10": "hsl(344 87.1% 57.5% / 0.1)",
-      "20": "hsl(344 87.1% 57.5% / 0.2)",
-      "30": "hsl(344 87.1% 57.5% / 0.3)",
-      "40": "hsl(344 87.1% 57.5% / 0.4)",
-      "50": "hsl(344 87.1% 57.5% / 0.5)",
-      "60": "hsl(344 87.1% 57.5% / 0.6)",
-      "70": "hsl(344 87.1% 57.5% / 0.7)",
-      "80": "hsl(344 87.1% 57.5% / 0.8)",
-      "90": "hsl(344 87.1% 57.5% / 0.9)",
-      "100": "hsl(344 87.1% 57.5%)"
+      "5": "rgba(241, 52, 101, 0.05)",
+      "10": "rgba(241, 52, 101, 0.1)",
+      "20": "rgba(241, 52, 101, 0.2)",
+      "30": "rgba(241, 52, 101, 0.3)",
+      "40": "rgba(241, 52, 101, 0.4)",
+      "50": "rgba(241, 52, 101, 0.5)",
+      "60": "rgba(241, 52, 101, 0.6)",
+      "70": "rgba(241, 52, 101, 0.7)",
+      "80": "rgba(241, 52, 101, 0.8)",
+      "90": "rgba(241, 52, 101, 0.9)",
+      "100": "#F13465"
     },
     "corp": {
-      "5": "hsl(234 75.4% 12.7% / 0.05)",
-      "10": "hsl(234 75.4% 12.7% / 0.1)",
-      "20": "hsl(234 75.4% 12.7% / 0.2)",
-      "30": "hsl(234 75.4% 12.7% / 0.3)",
-      "40": "hsl(234 75.4% 12.7% / 0.4)",
-      "50": "hsl(234 75.4% 12.7% / 0.5)",
-      "60": "hsl(234 75.4% 12.7% / 0.6)",
-      "70": "hsl(234 75.4% 12.7% / 0.7)",
-      "80": "hsl(234 75.4% 12.7% / 0.8)",
-      "90": "hsl(234 75.4% 12.7% / 0.9)",
-      "100": "hsl(234 75.4% 12.7%)"
+      "5": "rgba(8, 13, 57, 0.05)",
+      "10": "rgba(8, 13, 57, 0.1)",
+      "20": "rgba(8, 13, 57, 0.2)",
+      "30": "rgba(8, 13, 57, 0.3)",
+      "40": "rgba(8, 13, 57, 0.4)",
+      "50": "rgba(8, 13, 57, 0.5)",
+      "60": "rgba(8, 13, 57, 0.6)",
+      "70": "rgba(8, 13, 57, 0.7)",
+      "80": "rgba(8, 13, 57, 0.8)",
+      "90": "rgba(8, 13, 57, 0.9)",
+      "100": "#080D39"
     },
     "black": {
       "0": "rgba(0,0,0,0.0)",
@@ -202,10 +202,10 @@
     },
     "secondary": {
       "bg": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "default": "rgba(255,255,255,0.1)",
           "hover": "rgba(255,255,255,0.2)",
@@ -216,8 +216,8 @@
     },
     "tertiary": {
       "bg": {
-        "hover": "hsl(221 91.2% 35.7% / 0.05)",
-        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "hover": "rgba(8, 60, 174, 0.05)",
+        "active": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -234,8 +234,8 @@
     },
     "ghost": {
       "bg": {
-        "hover": "hsl(234 75.4% 12.7% / 0.05)",
-        "active": "hsl(234 75.4% 12.7% / 0.1)",
+        "hover": "rgba(8, 13, 57, 0.05)",
+        "active": "rgba(8, 13, 57, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -304,8 +304,8 @@
   "dropdown": {
     "bg": {
       "default": "#fff",
-      "hover": "hsl(221 91.2% 35.7% / 0.05)",
-      "active": "hsl(221 91.2% 35.7% / 0.1)"
+      "hover": "rgba(8, 60, 174, 0.05)",
+      "active": "rgba(8, 60, 174, 0.1)"
     }
   },
   "checkbox": {
@@ -313,7 +313,7 @@
       "bg": {
         "default": "#0059CD",
         "hover": "#083CAE",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+        "disabled": "rgba(8, 60, 174, 0.1)"
       },
       "border": {
         "default": "rgba(255,255,255,0.2)"
@@ -436,8 +436,8 @@
     },
     "brand": {
       "bg": {
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)"
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)"
       }
     },
     "white": {
@@ -464,10 +464,10 @@
     },
     "unselected": {
       "bg": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)"
       }
     }
   },
@@ -478,8 +478,8 @@
       "active": "#ABBDE4",
       "disabled": "#EDEDF1",
       "overlay": {
-        "hover": "hsl(234 75.4% 12.7% / 0.3)",
-        "active": "hsl(234 75.4% 12.7% / 0.4)"
+        "hover": "rgba(8, 13, 57, 0.3)",
+        "active": "rgba(8, 13, 57, 0.4)"
       }
     }
   },
@@ -504,10 +504,10 @@
         "disabled": "#F6809E"
       },
       "secondary": {
-        "default": "hsl(221 91.2% 35.7% / 0.05)",
-        "hover": "hsl(221 91.2% 35.7% / 0.1)",
-        "active": "hsl(221 91.2% 35.7% / 0.2)",
-        "disabled": "hsl(221 91.2% 35.7% / 0.1)",
+        "default": "rgba(8, 60, 174, 0.05)",
+        "hover": "rgba(8, 60, 174, 0.1)",
+        "active": "rgba(8, 60, 174, 0.2)",
+        "disabled": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "default": "rgba(255,255,255,0.1)",
           "hover": "rgba(255,255,255,0.2)",
@@ -516,8 +516,8 @@
         }
       },
       "tertiary": {
-        "hover": "hsl(221 91.2% 35.7% / 0.05)",
-        "active": "hsl(221 91.2% 35.7% / 0.1)",
+        "hover": "rgba(8, 60, 174, 0.05)",
+        "active": "rgba(8, 60, 174, 0.1)",
         "inverse": {
           "hover": "rgba(255,255,255,0.05)",
           "active": "rgba(255,255,255,0.1)"
@@ -535,8 +535,8 @@
         }
       },
       "ghost": {
-        "hover": "hsl(234 75.4% 12.7% / 0.05)",
-        "active": "hsl(234 75.4% 12.7% / 0.1)"
+        "hover": "rgba(8, 13, 57, 0.05)",
+        "active": "rgba(8, 13, 57, 0.1)"
       }
     },
     "default": "#F8FAFD",
@@ -564,7 +564,8 @@
       "disabled": "#D3D4DC"
     },
     "inverse": {
-      "default": "#fff",
+      "bold": "#fff",
+      "default": "rgba(255,255,255,0.7)",
       "disabled": "rgba(255,255,255,0.3)"
     },
     "success": "#38d373",
@@ -600,7 +601,8 @@
     },
     "info": {
       "subtle": "#b9d7ff"
-    }
+    },
+    "accent": "#F13465"
   },
   "text": {
     "corp": {

package/build/tokens/shadows.json

@@ -1,10 +1,10 @@
 {
-  "focus-pink": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-  "focus-indigo": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+  "focus-pink": "0 0 0 8px rgba(241, 52, 101, 0.3)",
+  "focus-indigo": "0 0 0 8px rgba(8, 60, 174, 0.3)",
   "focus-bright-blue": "0 0 0 8px rgba(0,110,255,0.3)",
   "focus-white": "0 0 0 8px rgba(255,255,255,0.2)",
   "focus-sky": "0 0 0 8px rgba(206,216,240,0.4)",
-  "focus-corp": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+  "focus-corp": "0 0 0 8px rgba(8, 13, 57, 0.1)",
   "elevation-elevation-1": "0 1px 2px 0 rgba(8,13,57,0.12), 0 1px 6px 0 rgba(9,61,173,0.05)",
   "elevation-elevation-2": "0 3px 3px -1px rgba(8,13,57,0.12), 0 3px 12px 0 rgba(9,61,173,0.08)",
   "elevation-elevation-3": "0 4px 5px -3px rgba(8,13,56,0.12), 0 6px 18px 0 rgba(9,61,173,0.08)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.61",
+  "version": "3.0.0-beta.63",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",