@rebilly/instruments 2.1.0-beta.0 → 3.1.0-beta.0

package/dist/style/base/__snapshots__/theme.spec.js.snap

@@ -3,50 +3,225 @@
 exports[`RebillyInstruments theme builds the theme object 1`] = `
 Object {
   "borderRadius": "4px",
-  "color": Object {
-    "background": "#ffffff",
-    "buttonText": "#ffffff",
-    "errorText": "#cd5c5c",
-    "primary": "#0044d4",
-    "text": "#0D2B3E",
-  },
-  "getComputed": Object {
-    "color": Object {
-      "mutedBorder": "rgba(13, 43, 62, 0.25)",
-      "mutedText": "rgba(13, 43, 62, 0.6)",
-      "primaryValues": Values {
-        "alpha": 1,
-        "rgb": Array [
-          0,
-          68,
-          212,
-        ],
-        "type": "base",
-        "weight": 0,
-      },
-    },
-  },
-  "space": Object {
-    "form": Object {
-      "horizontalPadding": "16px",
-      "minHeight": "44px",
-      "padding": "8px 16px",
-      "verticalPadding": "8px",
-    },
-    "l": "48px",
-    "m": "24px",
-    "s": "12px",
-    "xl": "96px",
-    "xs": "6px",
-    "xxl": "112px",
-    "xxs": "4px",
-  },
-  "typography": Object {
-    "captionFontSize": "12px",
-    "captionLineHeight": "12px",
-    "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
-    "fontSize": "16px",
-    "lineHeight": "24px",
-  },
+  "buttonActiveBorder": "var(--rebilly-buttonHoverBorder)",
+  "buttonActiveBorderRadius": "var(--rebilly-buttonHoverBorderRadius)",
+  "buttonActiveBoxShadow": "var(--rebilly-buttonHoverBoxShadow)",
+  "buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
+  "buttonActiveColorText": "var(--rebilly-buttonHoverColorText)",
+  "buttonActiveFontFamily": "var(--rebilly-buttonHoverFontFamily)",
+  "buttonActiveFontLineHeight": "var(--rebilly-buttonHoverFontLineHeight)",
+  "buttonActiveFontSize": "var(--rebilly-buttonHoverFontSize)",
+  "buttonActiveFontWeight": "var(--rebilly-buttonHoverFontWeight)",
+  "buttonBorder": "1px solid transparent",
+  "buttonBorderRadius": "var(--rebilly-borderRadius)",
+  "buttonBoxShadow": "none",
+  "buttonColorBackground": "var(--rebilly-colorPrimary)",
+  "buttonColorText": "#FFFFFF",
+  "buttonFontFamily": "var(--rebilly-fontFamily)",
+  "buttonFontLineHeight": "1.5",
+  "buttonFontSize": "var(--rebilly-fontSizeBase)",
+  "buttonFontWeight": "var(--rebilly-fontWeightBase)",
+  "buttonHoverBorder": "1px solid #0036aa",
+  "buttonHoverBorderRadius": "var(--rebilly-buttonBorderRadius)",
+  "buttonHoverBoxShadow": "var(--rebilly-buttonBoxShadow)",
+  "buttonHoverColorBackground": "#0036aa",
+  "buttonHoverColorText": "var(--rebilly-buttonColorText)",
+  "buttonHoverFontFamily": "var(--rebilly-buttonFontFamily)",
+  "buttonHoverFontLineHeight": "var(--rebilly-buttonFontLineHeight)",
+  "buttonHoverFontSize": "var(--rebilly-buttonFontSize)",
+  "buttonHoverFontWeight": "var(--rebilly-buttonFontWeight)",
+  "colorBackground": "#FFFFFF",
+  "colorDanger": "#CD5C5C",
+  "colorMutedBorder": "rgba(13, 43, 62, 0.25)",
+  "colorMutedText": "rgba(13, 43, 62, 0.6)",
+  "colorPrimary": "#0044D4",
+  "colorText": "#0D2B3E",
+  "cssVars": "--rebilly-colorPrimary: #0044D4;
+--rebilly-colorBackground: #FFFFFF;
+--rebilly-colorText: #0D2B3E;
+--rebilly-colorMutedText: rgba(13, 43, 62, 0.6);
+--rebilly-colorMutedBorder: rgba(13, 43, 62, 0.25);
+--rebilly-colorDanger: #CD5C5C;
+--rebilly-fontFamily: Avenir, Helvetica, Arial, sans-serif;
+--rebilly-fontSizeBase: 16px;
+--rebilly-fontWeightBase: 400;
+--rebilly-fontLineHeightBase: initial;
+--rebilly-fontSmooth: auto;
+--rebilly-borderRadius: 4px;
+--rebilly-headingFontFamily: var(--rebilly-fontFamily);
+--rebilly-headingFontWeight: 500;
+--rebilly-headingColorText: var(--rebilly-colorText);
+--rebilly-buttonColorBackground: var(--rebilly-colorPrimary);
+--rebilly-buttonColorText: #FFFFFF;
+--rebilly-buttonFontFamily: var(--rebilly-fontFamily);
+--rebilly-buttonFontSize: var(--rebilly-fontSizeBase);
+--rebilly-buttonFontLineHeight: 1.5;
+--rebilly-buttonFontWeight: var(--rebilly-fontWeightBase);
+--rebilly-buttonBorder: 1px solid transparent;
+--rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
+--rebilly-buttonBoxShadow: none;
+--rebilly-buttonHoverColorBackground: #0036aa;
+--rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
+--rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
+--rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
+--rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
+--rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
+--rebilly-buttonHoverBorder: 1px solid #0036aa;
+--rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
+--rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
+--rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
+--rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
+--rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
+--rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
+--rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
+--rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
+--rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
+--rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
+--rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
+--rebilly-inputColorBackground: transparent;
+--rebilly-inputColorText: var(--rebilly-colorText);
+--rebilly-inputFontFamily: var(--rebilly-fontFamily);
+--rebilly-inputFontSize: var(--rebilly-fontSizeBase);
+--rebilly-inputFontLineHeight: 1.5;
+--rebilly-inputFontWeight: var(--rebilly-fontWeightBase);
+--rebilly-inputBorder: 1px solid rgba(13, 43, 62, 0.25);
+--rebilly-inputBorderRadius: var(--rebilly-borderRadius);
+--rebilly-inputBoxShadow: none;
+--rebilly-inputHoverColorBackground: var(--rebilly-inputColorBackground);
+--rebilly-inputHoverColorText: var(--rebilly-inputColorText);
+--rebilly-inputHoverFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputHoverFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputHoverFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputHoverFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputHoverBorder: var(--rebilly-inputBorder);
+--rebilly-inputHoverBorderRadius: var(--rebilly-inputBorderRadius);
+--rebilly-inputHoverBoxShadow: var(--rebilly-inputBoxShadow);
+--rebilly-inputFocusColorBackground: var(--rebilly-inputHoverColorBackground);
+--rebilly-inputFocusColorText: var(--rebilly-inputHoverColorText);
+--rebilly-inputFocusFontFamily: var(--rebilly-inputHoverFontFamily);
+--rebilly-inputFocusFontSize: var(--rebilly-inputHoverFontSize);
+--rebilly-inputFocusFontLineHeight: var(--rebilly-inputHoverFontLineHeight);
+--rebilly-inputFocusFontWeight: var(--rebilly-inputHoverFontWeight);
+--rebilly-inputFocusBorder: 1px solid #0044D4;
+--rebilly-inputFocusBorderRadius: var(--rebilly-inputHoverBorderRadius);
+--rebilly-inputFocusBoxShadow: 0 0 0 1px #0044D4;
+--rebilly-inputPlaceholderColorText: rgba(13, 43, 62, 0.6);
+--rebilly-inputPlaceholderFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputPlaceholderFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputPlaceholderFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputPlaceholderFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputSelectionColorText: initial;
+--rebilly-inputSelectionColorBackground: highlight;
+--rebilly-inputErrorColorBackground: var(--rebilly-inputColorBackground);
+--rebilly-inputErrorColorText: var(--rebilly-colorDanger);
+--rebilly-inputErrorFontFamily: var(--rebilly-inputFontFamily);
+--rebilly-inputErrorFontSize: var(--rebilly-inputFontSize);
+--rebilly-inputErrorFontLineHeight: var(--rebilly-inputFontLineHeight);
+--rebilly-inputErrorFontWeight: var(--rebilly-inputFontWeight);
+--rebilly-inputErrorBorder: 1px solid #CD5C5C;
+--rebilly-inputErrorBorderRadius: var(--rebilly-inputBorderRadius);
+--rebilly-inputErrorBoxShadow: var(--rebilly-inputBoxShadow);
+--rebilly-inputErrorHoverColorBackground: var(--rebilly-inputErrorColorBackground);
+--rebilly-inputErrorHoverColorText: var(--rebilly-inputErrorColorText);
+--rebilly-inputErrorHoverFontFamily: var(--rebilly-inputErrorFontFamily);
+--rebilly-inputErrorHoverFontSize: var(--rebilly-inputErrorFontSize);
+--rebilly-inputErrorHoverFontLineHeight: var(--rebilly-inputErrorFontLineHeight);
+--rebilly-inputErrorHoverFontWeight: var(--rebilly-inputErrorFontWeight);
+--rebilly-inputErrorHoverBorder: var(--rebilly-inputErrorBorder);
+--rebilly-inputErrorHoverBorderRadius: var(--rebilly-inputErrorBorderRadius);
+--rebilly-inputErrorHoverBoxShadow: var(--rebilly-inputErrorBoxShadow);
+--rebilly-inputErrorFocusColorBackground: var(--rebilly-inputErrorHoverColorBackground);
+--rebilly-inputErrorFocusColorText: var(--rebilly-inputErrorHoverColorText);
+--rebilly-inputErrorFocusFontFamily: var(--rebilly-inputErrorHoverFontFamily);
+--rebilly-inputErrorFocusFontSize: var(--rebilly-inputErrorHoverFontSize);
+--rebilly-inputErrorFocusFontLineHeight: var(--rebilly-inputErrorHoverFontLineHeight);
+--rebilly-inputErrorFocusFontWeight: var(--rebilly-inputErrorHoverFontWeight);
+--rebilly-inputErrorFocusBorder: var(--rebilly-inputErrorHoverBorder);
+--rebilly-inputErrorFocusBorderRadius: var(--rebilly-inputErrorHoverBorderRadius);
+--rebilly-inputErrorFocusBoxShadow: var(--rebilly-inputErrorHoverBoxShadow);
+--rebilly-inputErrorPlaceholderColorText: rgba(205, 92, 92, 0.6);
+--rebilly-inputErrorPlaceholderFontFamily: var(--rebilly-inputPlaceholderFontFamily);
+--rebilly-inputErrorPlaceholderFontSize: var(--rebilly-inputPlaceholderFontSize);
+--rebilly-inputErrorPlaceholderFontLineHeight: var(--rebilly-inputPlaceholderFontLineHeight);
+--rebilly-inputErrorPlaceholderFontWeight: var(--rebilly-inputPlaceholderFontWeight);
+--rebilly-inputErrorSelectionColorText: var(--rebilly-inputSelectionColorText);
+--rebilly-inputErrorSelectionColorBackground: var(--rebilly-inputSelectionColorBackground);",
+  "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
+  "fontLineHeightBase": "initial",
+  "fontSizeBase": "16px",
+  "fontSmooth": "auto",
+  "fontWeightBase": "400",
+  "headingColorText": "var(--rebilly-colorText)",
+  "headingFontFamily": "var(--rebilly-fontFamily)",
+  "headingFontWeight": "500",
+  "inputBorder": "1px solid rgba(13, 43, 62, 0.25)",
+  "inputBorderRadius": "var(--rebilly-borderRadius)",
+  "inputBoxShadow": "none",
+  "inputColorBackground": "transparent",
+  "inputColorText": "var(--rebilly-colorText)",
+  "inputErrorBorder": "1px solid #CD5C5C",
+  "inputErrorBorderRadius": "var(--rebilly-inputBorderRadius)",
+  "inputErrorBoxShadow": "var(--rebilly-inputBoxShadow)",
+  "inputErrorColorBackground": "var(--rebilly-inputColorBackground)",
+  "inputErrorColorText": "var(--rebilly-colorDanger)",
+  "inputErrorFocusBorder": "var(--rebilly-inputErrorHoverBorder)",
+  "inputErrorFocusBorderRadius": "var(--rebilly-inputErrorHoverBorderRadius)",
+  "inputErrorFocusBoxShadow": "var(--rebilly-inputErrorHoverBoxShadow)",
+  "inputErrorFocusColorBackground": "var(--rebilly-inputErrorHoverColorBackground)",
+  "inputErrorFocusColorText": "var(--rebilly-inputErrorHoverColorText)",
+  "inputErrorFocusFontFamily": "var(--rebilly-inputErrorHoverFontFamily)",
+  "inputErrorFocusFontLineHeight": "var(--rebilly-inputErrorHoverFontLineHeight)",
+  "inputErrorFocusFontSize": "var(--rebilly-inputErrorHoverFontSize)",
+  "inputErrorFocusFontWeight": "var(--rebilly-inputErrorHoverFontWeight)",
+  "inputErrorFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputErrorFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputErrorFontSize": "var(--rebilly-inputFontSize)",
+  "inputErrorFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputErrorHoverBorder": "var(--rebilly-inputErrorBorder)",
+  "inputErrorHoverBorderRadius": "var(--rebilly-inputErrorBorderRadius)",
+  "inputErrorHoverBoxShadow": "var(--rebilly-inputErrorBoxShadow)",
+  "inputErrorHoverColorBackground": "var(--rebilly-inputErrorColorBackground)",
+  "inputErrorHoverColorText": "var(--rebilly-inputErrorColorText)",
+  "inputErrorHoverFontFamily": "var(--rebilly-inputErrorFontFamily)",
+  "inputErrorHoverFontLineHeight": "var(--rebilly-inputErrorFontLineHeight)",
+  "inputErrorHoverFontSize": "var(--rebilly-inputErrorFontSize)",
+  "inputErrorHoverFontWeight": "var(--rebilly-inputErrorFontWeight)",
+  "inputErrorPlaceholderColorText": "rgba(205, 92, 92, 0.6)",
+  "inputErrorPlaceholderFontFamily": "var(--rebilly-inputPlaceholderFontFamily)",
+  "inputErrorPlaceholderFontLineHeight": "var(--rebilly-inputPlaceholderFontLineHeight)",
+  "inputErrorPlaceholderFontSize": "var(--rebilly-inputPlaceholderFontSize)",
+  "inputErrorPlaceholderFontWeight": "var(--rebilly-inputPlaceholderFontWeight)",
+  "inputErrorSelectionColorBackground": "var(--rebilly-inputSelectionColorBackground)",
+  "inputErrorSelectionColorText": "var(--rebilly-inputSelectionColorText)",
+  "inputFocusBorder": "1px solid #0044D4",
+  "inputFocusBorderRadius": "var(--rebilly-inputHoverBorderRadius)",
+  "inputFocusBoxShadow": "0 0 0 1px #0044D4",
+  "inputFocusColorBackground": "var(--rebilly-inputHoverColorBackground)",
+  "inputFocusColorText": "var(--rebilly-inputHoverColorText)",
+  "inputFocusFontFamily": "var(--rebilly-inputHoverFontFamily)",
+  "inputFocusFontLineHeight": "var(--rebilly-inputHoverFontLineHeight)",
+  "inputFocusFontSize": "var(--rebilly-inputHoverFontSize)",
+  "inputFocusFontWeight": "var(--rebilly-inputHoverFontWeight)",
+  "inputFontFamily": "var(--rebilly-fontFamily)",
+  "inputFontLineHeight": "1.5",
+  "inputFontSize": "var(--rebilly-fontSizeBase)",
+  "inputFontWeight": "var(--rebilly-fontWeightBase)",
+  "inputHoverBorder": "var(--rebilly-inputBorder)",
+  "inputHoverBorderRadius": "var(--rebilly-inputBorderRadius)",
+  "inputHoverBoxShadow": "var(--rebilly-inputBoxShadow)",
+  "inputHoverColorBackground": "var(--rebilly-inputColorBackground)",
+  "inputHoverColorText": "var(--rebilly-inputColorText)",
+  "inputHoverFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputHoverFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputHoverFontSize": "var(--rebilly-inputFontSize)",
+  "inputHoverFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputPlaceholderColorText": "rgba(13, 43, 62, 0.6)",
+  "inputPlaceholderFontFamily": "var(--rebilly-inputFontFamily)",
+  "inputPlaceholderFontLineHeight": "var(--rebilly-inputFontLineHeight)",
+  "inputPlaceholderFontSize": "var(--rebilly-inputFontSize)",
+  "inputPlaceholderFontWeight": "var(--rebilly-inputFontWeight)",
+  "inputSelectionColorBackground": "highlight",
+  "inputSelectionColorText": "initial",
+  "labels": "floating",
 }
 `;