@eturnity/eturnity_reusable_components 7.51.16-EPDM-13568.3 → 7.51.16-EPDM-13568.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.16-EPDM-13568.3",
+  "version": "7.51.16-EPDM-13568.4",
   "files": [
     "dist",
     "src"

package/src/components/buttons/mainButton/index.vue

@@ -2,6 +2,7 @@
   <PageContainer>
     <ButtonContainer
       :id="id"
+      :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
       :data-id="dataId"
@@ -11,7 +12,6 @@
       :is-disabled="isDisabled"
       :min-width="minWidth"
       :no-wrap="noWrap"
-      :theme-type="theme"
       :type="type"
       :variant="variant"
     >
@@ -51,7 +51,7 @@
     height: String,
     variant: String,
     buttonSize: String,
-    themeType: String,
+    appTheme: String,
   }
   const ButtonContainer = styled('div', ButtonAttrs)`
     display: flex;
@@ -62,24 +62,24 @@
       props.theme?.mainButton?.size?.[props.buttonSize]?.fontSize};
     color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.textColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .textColor};
     background-color: ${(props) =>
       props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.backgroundColor
         : props.customColor
         ? props.customColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .default};
 
     border: ${(props) => {
       const borderValue = props.isDisabled
-        ? props.theme.mainButton[props.themeType][props.type][props.variant]
+        ? props.theme.mainButton[props.appTheme][props.type][props.variant]
             .disabled.borderColor
-        : props.theme.mainButton[props.themeType][props.type][props.variant]
+        : props.theme.mainButton[props.appTheme][props.type][props.variant]
             .borderColor
       return borderValue ? '1px solid ' + borderValue : 'none'
     }};
@@ -94,18 +94,18 @@
     &:hover {
       background-color: ${(props) =>
         props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
               .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
               .hover};
     }
 
     &:active {
       background-color: ${(props) =>
         props.isDisabled
-          ? props.theme.mainButton[props.themeType][props.type][props.variant]
+          ? props.theme.mainButton[props.appTheme][props.type][props.variant]
               .disabled.backgroundColor
-          : props.theme.mainButton[props.themeType][props.type][props.variant]
+          : props.theme.mainButton[props.appTheme][props.type][props.variant]
               .active};
     }
   `
@@ -197,7 +197,7 @@
         type: String,
         default: '',
       },
-      theme: {
+      appTheme: {
         type: String,
         default: 'light',
       },