@rebilly/instruments 3.13.4-beta.0 → 3.14.1-beta.0

package/src/style/base/default-theme.js

@@ -1,4 +1,4 @@
-import { mutedTextColor, mutedBorderColor, darken } from '../utils/color-values';
+import { mutedTextColor, darken, mutedBorderColor } from '../utils/color-values';
 import Border from '../utils/border';
 
 const properties = {
@@ -24,13 +24,18 @@ const properties = {
   colorMutedText: {
     fallback: {
       type: 'func',
-      value: theme => mutedTextColor(theme.colorText)
+      value: theme => mutedTextColor(theme.colorText, 60)
     }
   },
   colorMutedBorder: {
     fallback: {
       type: 'func',
-      value: theme => mutedBorderColor(theme.colorText)
+      value: theme => {
+        if(theme.colorTextProvided) {
+          return mutedBorderColor(theme.colorText);
+        }
+        return '#DCE3EA';
+      }
     }
   },
   colorDanger: {
@@ -56,13 +61,13 @@ const properties = {
   fontWeightBase: {
     fallback: {
       type: 'static',
-      value: '400',
+      value: '500',
     }
   },
   fontLineHeightBase: {
     fallback: {
-      type: 'static',
-      value: 'initial',
+      type: 'func',
+      value: theme => `calc(${theme.fontSizeBase} * 1.5)`,
     }
   },
   fontSmooth: {
@@ -76,7 +81,7 @@ const properties = {
   borderRadius: {
     fallback: {
       type: 'static',
-      value: '4px',
+      value: '6px',
     }
   },
 
@@ -90,7 +95,7 @@ const properties = {
   headingFontWeight: {
     fallback: {
       type: 'static',
-      value: '500',
+      value: '600',
     }
   },
   headingColorText: {
@@ -127,8 +132,8 @@ const properties = {
   },
   buttonFontLineHeight: {
     fallback: {
-      type: 'static',
-      value: '1.5',
+      type: 'variable',
+      value: 'fontLineHeightBase',
     }
   },
   buttonFontWeight: {
@@ -156,6 +161,62 @@ const properties = {
     }
   },
 
+  /** Buttons Secondary */
+  buttonSecondaryColorBackground: {
+    fallback: {
+      type: 'variable',
+      value: 'colorBackground',
+    }
+  },
+  buttonSecondaryColorText: {
+    fallback: {
+      type: 'variable',
+      value: 'colorPrimary',
+    }
+  },
+  buttonSecondaryFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'fontFamily',
+    }
+  },
+  buttonSecondaryFontSize: {
+    fallback: {
+      type: 'variable',
+      value: 'fontSizeBase',
+    }
+  },
+  buttonSecondaryFontLineHeight: {
+    fallback: {
+      type: 'variable',
+      value: 'fontLineHeightBase',
+    }
+  },
+  buttonSecondaryFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'fontWeightBase',
+    }
+  },
+  buttonSecondaryBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => `1px solid ${theme.colorPrimary}`,
+    }
+  },
+  buttonSecondaryBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'borderRadius',
+    }
+  },
+  buttonSecondaryBoxShadow: {
+    fallback: {
+      type: 'static',
+      value: 'none',
+    }
+  },
+
   /** Buttons: Hover */
   buttonHoverColorBackground: {
     fallback: {
@@ -222,6 +283,62 @@ const properties = {
       value: 'buttonBoxShadow',
     }
   },
+
+  /** Buttons Secondary: Hover */
+  buttonSecondaryHoverColorBackground: {
+    fallback: {
+      type: 'variable',
+      value: 'colorBackground'
+    }
+  },
+  buttonSecondaryHoverColorText: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryColorText',
+    }
+  },
+  buttonSecondaryHoverFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryFontFamily',
+    }
+  },
+  buttonSecondaryHoverFontSize: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryFontSize',
+    }
+  },
+  buttonSecondaryHoverFontLineHeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryFontLineHeight',
+    }
+  },
+  buttonSecondaryHoverFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryFontWeight',
+    }
+  },
+  buttonSecondaryHoverBorder: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryBorder',
+    }
+  },
+  buttonSecondaryHoverBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryBorderRadius',
+    }
+  },
+  buttonSecondaryHoverBoxShadow: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryBoxShadow',
+    }
+  },
   
   /** Buttons: Active */
   buttonActiveColorBackground: {
@@ -279,6 +396,62 @@ const properties = {
     }
   },
 
+  /** Buttons Secondary: Active */
+  buttonSecondaryActiveColorBackground: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverColorBackground',
+    }
+  },
+  buttonSecondaryActiveColorText: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverColorText',
+    }
+  },
+  buttonSecondaryActiveFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverFontFamily',
+    }
+  },
+  buttonSecondaryActiveFontSize: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverFontSize',
+    }
+  },
+  buttonSecondaryActiveFontLineHeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverFontLineHeight',
+    }
+  },
+  buttonSecondaryActiveFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverFontWeight',
+    }
+  },
+  buttonSecondaryActiveBorder: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverBorder'
+    }
+  },
+  buttonSecondaryActiveBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverBorderRadius',
+    }
+  },
+  buttonSecondaryActiveBoxShadow: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonSecondaryHoverBoxShadow',
+    }
+  },
+
   /** Inputs: Base */
   inputColorBackground: {
     fallback: {
@@ -306,8 +479,8 @@ const properties = {
   },
   inputFontLineHeight: {
     fallback: {
-      type: 'static',
-      value: '1.5',
+      type: 'variable',
+      value: 'fontLineHeightBase',
     }
   },
   inputFontWeight: {
@@ -319,7 +492,7 @@ const properties = {
   inputBorder: {
     fallback: {
       type: 'func',
-      value: theme => `1px solid ${mutedBorderColor(theme.colorText)}`
+      value: theme => `1px solid ${darken(theme.colorMutedBorder, 4)}`
     }
   },
   inputBorderRadius: {
@@ -461,7 +634,7 @@ const properties = {
         if(theme.inputColorTextProvided) {
           return mutedTextColor(theme.inputColorText);
         }
-        return mutedTextColor(theme.colorText);
+        return theme.colorMutedText;
       }
     }
   },